save code

frontend/README.md

@@ -0,0 +1,41 @@
+# 前端开发目录
+
+## 目录说明
+
+### src/
+源代码目录，包含所有前端UI代码。
+
+#### components/
+可复用组件，如按钮、表单、卡片等。
+
+#### pages/
+页面组件，如登录页、首页、设置页等。
+
+#### hooks/
+自定义React Hooks，封装可复用的状态逻辑。
+
+#### services/
+API服务，封装与后端的HTTP请求。
+
+#### utils/
+工具函数，提供通用功能。
+
+#### styles/
+样式文件，包含全局样式和主题。
+
+#### types/
+TypeScript类型定义。
+
+### tests/
+测试目录，包含组件测试和集成测试。
+
+### docs/
+文档目录，包含组件文档和开发文档。
+
+## 工作规范
+
+详见 [WORKSTANDARDS.md](WORKSTANDARDS.md)
+
+## UI设计规范
+
+详见 [../docs/ui-design-spec.md](../docs/ui-design-spec.md)

frontend/WORKSTANDARDS.md

@@ -0,0 +1,60 @@
+# 前端程序员工作规范
+
+## 工作目录
+- **主目录**: `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