Feature-Based 前端目录结构

按业务功能而非技术类型组织前端目录的设计：每个 feature 自包含组件/hooks/服务/页面，共享代码放顶层。

#type / concept #status / growing #tech / dev / frontend

[!info] related notes

相关: React Router 路由

Feature-Based 前端目录结构

两种组织方式

按技术类型（Type-Based）

src/
├── components/     # 所有组件混在一起
├── hooks/          # 所有 hooks
├── services/       # 所有 API 调用
└── pages/          # 所有页面

问题：改一个功能要跨 4-5 个目录找文件。

按业务功能（Feature-Based）

src/
├── components/     # 共享 UI 组件
├── stores/         # 全局状态
├── features/
│   ├── auth/       # 认证
│   │   ├── components/
│   │   ├── services/
│   │   └── pages/
│   ├── consultation/  # 咨询
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   └── pages/
│   └── profile/    # 档案
└── App.tsx

好处：一个功能的所有代码在一个目录下，删除功能 = 删除目录。

各层职责

层	位置	职责
共享 UI	`components/`	Button、Card 等纯展示组件
功能组件	`features/*/components/`	只在该 feature 内使用
功能 hooks	`features/*/hooks/`	专用逻辑
API 调用	`features/*/services/`	封装 HTTP 请求
页面	`features/*/pages/`	路由级组件

Feature 间通信

Feature 之间不直接引用对方的代码。通信方式：

全局 store — 两个 feature 读写同一个 Zustand store
路由 — 跳转到另一个 feature 的页面
共享组件 — 提取共同 UI 到顶层 components/

何时拆出新 feature

有独立的页面（至少 1 个路由）
有专用的 API 调用
有 3+ 个专用组件