Files
John Qiu 23ea8fdca5 feat: 融合 devflow-claude P0 批机制 (REQ-20260416-0017)
P0-1: SessionStart Hook — hooks/session-context.sh
  从分支名解析 REQ-ID,调 MCP API 查询需求详情注入 system-reminder

P0-2: PreToolUse Hook — hooks/pre-tool-confirm.sh
  拦截生产推送、force push、docker prod 容器操作、git reset --hard 等

P0-3: Release Draft 闸门设计文档 — docs/design/release-draft-gate.md
  完整架构 + 渐进式落地路径(拆 7 个子任务延后)
  附最小可用脚本 hooks/release-draft.sh 创建 Gitea draft release

P0-4: Memory 隔离规则 — 写入 req-prd / req-design / req-workflow
  禁止 auto-memory 污染模板产出物(章节结构、字段定义、文档结构)

P0-5: CLAUDE.md 架构检查 + 架构片段库
  dev-coding skill 执行前检查架构关键词
  新增 templates/claude-md-snippets/ 含 Go+Gin / React+AntD / Vue+Element /
  MCP+TS / generic 五套骨架

P0-6: /commit 分支保护自动化 — 新 skill dev-commit-plugin
  保护分支自动建功能分支 + Conventional Commits + REQ-XXX 自动关联

安装:
  bash hooks/install.sh

后续:
  P0-3 完整实现拆 7 个子任务(P0-3.1 ~ P0-3.7)
  建议先部署 hooks 跑 1-2 周观察,再推进 Release 机制落地
2026-04-16 21:02:29 +09:30

2.0 KiB
Raw Permalink Blame History

Architecture

目录结构React + TypeScript + Ant Design

frontend/src/
├── pages/       # 页面级组件(路由对应)
├── components/  # 可复用 UI 组件
├── services/    # API 客户端Axios 封装)
├── hooks/       # 自定义 React Hooks
├── contexts/    # Context Providersauth, timer 等)
├── utils/       # 工具函数auth, validation, date 等)
├── types/       # TypeScript 类型定义
└── config/      # Feature flags, 性能配置

状态管理

状态类型 方案
服务器状态 React Query (TanStack Query)
全局状态 Context API
本地状态 useState / useReducer
表单状态 Ant Design Form

禁止Redux / MobX本项目不使用

路由

  • React Router v6
  • 路由定义集中在 src/routes/
  • 懒加载:const Page = lazy(() => import(...))

API 调用

  • 使用 services/ 下的封装函数,不要在组件里直接 axios.get
  • 响应类型必须有 TypeScript interface
  • 错误统一由 axios 拦截器处理

样式

  • Ant Design 组件 + CSS Module
  • 禁止内联 style={{ ... }} 用于复杂样式
  • 全局变量走 CSS Variables

Modal 安全规则(重要)

Modal.success/info/warning/error 是非阻塞调用,后续 UI 操作必须放在 onOk 回调中:

// WRONG
Modal.success({ title: '成功' });
setNextModalOpen(true);  // 立即执行,两个 modal 冲突

// CORRECT
Modal.success({
  title: '成功',
  onOk: () => setNextModalOpen(true),
});

命名规范

类型 约定 示例
组件文件 PascalCase UserProfile.tsx
Hook 文件 camelCase useAuth.ts
工具文件 kebab-case date-utils.ts
组件名 PascalCase UserProfile
Hook 名 use 前缀 useAuth

测试

  • 单测Jest + React Testing Library
  • E2EPlaywright
  • 测试文件:xxx.test.tsx 与源文件同目录