6.2 UI 组织
学习目标
完成本节后,你将能够:
- 理解
web/src/features的组织方式。 - 区分 feature-local 组件和 shared UI 组件。
- 判断一个前端文件应该放哪里。
6.2.1 常见 feature 结构
text
web/src/features/[feature]/
├── components/
├── hooks/
├── server/
├── types/
└── README.md不是每个 feature 都完全一致,但复杂 feature 通常会把 UI、server router/service、types 和说明放在一起。
6.2.2 通用组件
| 目录 | 用途 |
|---|---|
web/src/components/ui | 基础 UI primitives |
web/src/components/table | 通用表格系统 |
web/src/components/layouts | layout、popup、shell |
web/src/features/**/components | feature 专属组件 |
6.2.3 放置判断
| 情况 | 位置 |
|---|---|
| 只用于一个 feature | feature 内 |
| 多个 feature 复用 | web/src/components |
| 和 tRPC/service 紧密相关 | feature 的 server/ |
| 纯展示组件 | 组件目录 + story/test |