ocean_project_manager/frontend/WORKSTANDARDS.md

前端程序员工作规范

工作目录

• 主目录: frontend/
• 源代码目录: frontend/src/
• 组件目录: frontend/src/components/
• 页面目录: frontend/src/pages/
• 样式目录: frontend/src/styles/
• 测试目录: frontend/tests/
• 文档目录: frontend/docs/

开发规范

代码结构

frontend/
├── src/              # 源代码
│   ├── components/   # 可复用组件
│   ├── pages/        # 页面组件
│   ├── hooks/        # 自定义Hooks
│   ├── services/     # API服务
│   ├── utils/        # 工具函数
│   ├── styles/       # 样式文件
│   └── types/        # TypeScript类型定义
├── tests/            # 组件测试
├── docs/             # 组件文档和开发文档
└── package.json      # 依赖管理

开发流程

1. 在 frontend/src/ 中编写UI组件和页面
2. 在 frontend/tests/ 中编写组件测试
3. 在 frontend/docs/ 中编写组件文档
4. 开发前需在 docs/ui-design-spec.md 中查看UI设计规范

代码提交规范

• 提交信息格式: [frontend] <类型>: <描述>
• 类型: feat, fix, style, refactor, test, chore
• 示例: [frontend] feat: 添加项目列表组件

禁止事项

• ❌ 不得在 backend/ 或 testing/ 目录中工作
• ❌ 不得修改后端API（需协调后端程序员）
• ❌ 不得提交未经过测试的代码

UI组件要求

• 所有组件必须在 frontend/docs/components.md 中文档化
• 文档包含: 组件名称、Props、使用示例、截图
• 遵循设计规范 docs/ui-design-spec.md

测试要求

• 关键组件必须有单元测试
• 测试文件命名: <组件名>.test.tsx 或 <组件名>.spec.tsx
• 使用Jest或Vitest测试框架

技术栈

• 框架: React/Vue/Angular
• 状态管理: Redux/Vuex/Zustand
• 样式: Tailwind CSS/CSS Modules
• 构建工具: Vite/Webpack