docs: add comprehensive page development standards (CODING_STANDARDS.md §11)

- 新增 §11 页面开发规范(10 个子节),覆盖目录结构分4级、入口组件命名统一为 Index、业务 Hook 内部结构顺序、常量/子组件/存储键/模式切换/布局约定等规范
- 新增 §11.9 页面开发检查清单(10 步逐项确认)
- 更新 AGENTS.md 和 copilot-instructions.md 同步引用新规范章节
- 修正 useLazyTranslation → useI18n 与实际代码保持一致
This commit is contained in:
雨霖铃
2026-05-28 23:09:14 +08:00
parent 6bddc4fcfc
commit e33761381d
3 changed files with 334 additions and 17 deletions
+9 -5
View File
@@ -59,18 +59,22 @@ public/ # 静态资源(图标、_locales 等)
### 页面组件模式
典型功能页面遵循 **UI + Hook 分离** 模式
典型功能页面遵循 **UI + Hook 分离** 模式。详见 [CODING_STANDARDS.md § 11](./.github/CODING_STANDARDS.md#11-页面开发规范)。
```
src/pages/FeatureName/
├── index.tsx # 页面 UI(纯展示,使用 shadcn/ui 组件
├── index.tsx # 页面 UI(纯展示,仅负责渲染布局
├── useFeatureName.ts # 业务逻辑 Hook(状态管理 + 转换逻辑)
── constants.ts # 常量定义
── constants.ts # 常量定义(可选,≥3 个常量时创建)
└── __tests__/
└── index.test.tsx
```
- 页面组件调用 `useLazyTranslation('featureName')` 获取翻译函数
- 页面入口组件统一命名为 `Index`,通过 `export default function Index()` 导出
- Hook 负责所有状态管理和业务逻辑,通过返回值暴露给页面
- 子组件可进一步拆分(如 `LiveClock.tsx``ResultView.tsx`
- 子组件可以独立调用 `useI18n``useSnackbar` 等全局 Hook
-`index.tsx` 超过 150 行时,必须拆分为 UI + Hook 模式
- 复杂页面可增加 `contexts/``hooks/``components/` 子目录
## 关键架构决策