Skip to content

6.2 UI 组织

学习目标

完成本节后,你将能够:

  1. 理解 web/src/features 的组织方式。
  2. 区分 feature-local 组件和 shared UI 组件。
  3. 判断一个前端文件应该放哪里。

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/layoutslayout、popup、shell
web/src/features/**/componentsfeature 专属组件

6.2.3 放置判断

情况位置
只用于一个 featurefeature 内
多个 feature 复用web/src/components
和 tRPC/service 紧密相关feature 的 server/
纯展示组件组件目录 + story/test

下一节

表格系统