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

下一节 ​

表格系统