file-organization

# 文件组织 应用程序中用于可维护、可扩展前端代码的正确文件和目录结构。 --- ## features/ 与 components/ 的区别 ### features/ 目录 **目的**：具有自身逻辑、API 和组件的领域特定功能 **何时使用：** - 功能包含多个相关组件 - 功能拥有自己的 API 端点 - 功能具有领域特定逻辑 - 功能包含自定义 Hook/工具函数 **示例：** - `features/posts/` - 项目目录/文章管理 - `features/blogs/` - 博客构建与渲染 - `features/auth/` - 身份验证流程 **结构：** features/ my-feature/ api/ myFeatureApi.ts # API 服务层 components/ MyFeatureMain.tsx # 主组件 SubComponents/ # 相关组件 hooks/ useMyFeature.ts # 自定义 Hook useSuspenseMyFeature.ts # Suspense Hook helpers/ myFeatureHelpers.ts # 工具函数 types/ index.ts # TypeScript 类型 index.ts # 公共导出 ### components/ 目录 **目的**：在多个功能中真正可复用的组件 **何时使用：** - 组件在 3 个以上地方使用 - 组件是通用的（无功能特定逻辑） - 组件是 UI 原语或模式 **示例：** - `components/SuspenseLoader/` - 加载包装器 - `components/CustomAppBar/` - 应用头部 - `components/ErrorBoundary/` - 错误处理 - `components/LoadingOverlay/` - 加载遮罩 **结构：** components/ SuspenseLoader/ SuspenseLoader.tsx SuspenseLoader.test.tsx CustomAppBar/ CustomAppBar.tsx CustomAppBar.test.tsx --- ## 功能目录结构（详细） ### 完整功能示例 基于 `features/posts/` 结构： features/ posts/ api/ postApi.ts # API 服务层 (GET, POST, PUT, DELETE) components/ PostTable.tsx # 主容器组件 grids/ PostDataGrid/ PostDataGrid.tsx drawers/ ProjectPostDrawer/ ProjectPostDrawer.tsx cells/ editors/ TextEditCell.tsx renderers/ DateCell.tsx toolbar/ CustomToolbar.tsx hooks/ usePostQueries.ts # 常规查询 useSuspensePost.ts # Suspense 查询 usePostMutations.ts # 变更操作 useGridLayout.ts # 功能特定 Hook