feat:黄炎培对话对接中

src/components/COMPONENT_GUIDELINES.md

@@ -154,3 +154,37 @@ export type { ComponentNameProps, ComponentNameRef } from "./component-name";
 | `*.hooks.ts`     | 组件专用 hooks | 有可复用的状态逻辑   |
 | `*.utils.ts`     | 工具函数       | 有纯函数逻辑需要提取 |
 | `*.constants.ts` | 常量定义       | 有多个常量需要共享   |
+
+<!-- 1. common / base (基础组件)
+存放与业务逻辑解耦的原子级组件。这些组件通常不包含 API 请求，只负责展示和交互。
+示例：MyButton, MyInput, Modal, Icon。
+用途：如果项目没有使用 Ant Design 或 Element Plus 等 UI 库，或者在其基础上二次封装，则放在此处 [1, 2]。
+2. business / biz (业务组件)
+存放与特定业务逻辑耦合、但在多个页面中复用的组件。
+示例：UserSelect（包含用户列表接口请求）、AddressPicker、OrderCard。
+用途：这些组件包含业务状态或特定的数据处理逻辑 [1, 3]。
+3. layout (布局组件)
+存放页面的整体结构组件。
+示例：Header, Footer, Sidebar, NavBar。
+用途：定义应用的外壳结构，通常在全局路由配置中使用 [2, 4]。
+4. hoc / render-props (高阶/逻辑组件)
+存放不直接渲染 UI，而是通过高阶组件（HOC）或 Render Props 模式提供逻辑复用的组件。
+示例：withAuth（权限校验）、ErrorBoundary（错误边界）。
+5. svg / icons (图标组件)
+专门用于存放封装后的 SVG 图标或字体图标组件。
+用途：方便通过组件形式调用图标，如 <IconName />。
+标准组件内部结构
+为了保持清晰，每个具体的组件通常建议以文件夹的形式存在，而不是单个文件：
+text
+components/
+└── MyComponent/
+    ├── index.ts          # 组件对外暴露的入口
+    ├── MyComponent.tsx   # 组件核心代码
+    ├── MyComponent.scss  # 组件私有样式
+    ├── types.ts          # TypeScript 类型定义
+    ├── hooks.ts          # 组件内部抽离的逻辑 (可选)
+    └── __tests__/        # 单元测试文件 (可选)
+请谨慎使用此类代码。
+
+注意事项：页面级组件
+请注意，仅在单个页面中使用的私有组件，通常不建议放在 src/components 下，而应放在对应页面的文件夹内（例如 src/pages/Home/components），以避免全局组件目录过于臃肿 -->