# 前端程序员工作规范

## 工作目录
- **主目录**: `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