跳转至

前端开发 · 角色指南

假设你已读过 docs/00_overview/ 与 docs/01_onboarding/。

你的工具箱

工具 用途
VS Code 主 IDE
Claude Code + Codex AI 协作
OpenSpec / Superpowers 流程 / 工程模式
本仓库 czerp-frontend Avue / Element / metadata 范式
pnpm + Vite 构建
Knife4j（看后端 API 文档） 接口契约

高价值工作流（触发 → AI 做什么 → 人怎么验）

# 触发 AI 做什么 人怎么验
设计稿→代码 拿到 Figma 高保真稿 Figma MCP 读 frame + Code Connect 映射到真实组件生成代码 核对是否复用 ef-design-base-elp/封装组件，而非堆单文件
Avue 样板 新增 CRUD 页 按 Avue 3.7 + Element Plus 范式生成 list/form/dialog 配置 跑全交互（失败/权限/边界）；字典走 metadata
动态路由 新增页面 按 avue-router 范式加页 + 提示后端配菜单 路由 key=服务名、权限点对齐后端
视觉 QA 提 PR 前 无头浏览器做响应式/视觉一致性检查、前后态截图 diff、抓控制台报错 按设计稿逐屏对比，源码原子化修复后复验

现状：控制台中文单一语言（面向企业内员工，无需 i18n / vue-i18n，中文文案直接写）；前端暂无单测框架（vitest），质量靠联调 + 视觉 QA + 评审，需要时再引入。

一天典型流程

站会后：
- 接故事（前端部分）/ 接联调任务
- /user-story-impl CZPRJ-X
- 看原型（Axure Cloud / Axure LLM Wiki MCP）

实现：
- 按 console-dynamic-router 加新页面 + 后端配菜单（找后端 / PM）
- 列表 / 表单走 avue-and-element 标准
- 字典 / 枚举走 metadata-usage（不要 dicUrl）
- 接口调用走 http-and-api（@/axios）
- 公司封装组件先查 components-catalog（PingCode 目录页 iNW1gUP_）

联调：
- 后端 API 起来后切到真接口
- 跑全套交互（含失败 / 权限 / 边界）

提交前：
- /pre-pr-review
- /code-review
- /pr-describe

必读 skills

  1. console-dynamic-router — 动态路由
  2. metadata-usage — 字典 / 枚举
  3. avue-and-element — 列表 / 表单标准
  4. components-catalog — 公司封装组件
  5. http-and-api — 接口调用
  6. permission-render — 按钮权限

铁律

  1. 不在前端硬编码业务路由 — 全部由后端菜单驱动。
  2. 字典 / 枚举走 metadata 工具，禁止 dicUrl 单独请求。
  3. request 用 @/axios（即 src/axios.js），禁止裸 axios。
  4. 业务数据取 res.data.data；失败由拦截器统一 reject + 弹错，正常路径不用判 success。
  5. 前端权限只做 UX 渲染，安全由后端把关。
  6. 优先查公司封装组件（@ifinmate/ef-design-base-elp + src/components/）。

联调协作

  • 后端 API 起来前用 Mock（avue 自带 dicData + 项目内 mock 工具）。
  • 拿 OpenAPI 文档（Knife4j）做契约对齐。
  • 端到端联调失败时先看后端日志（容易是后端而不是前端的问题）。

常见错误

  • ❌ 在 src/router/page 里硬编码业务路由
  • ❌ 表单字段写 dicUrl: '/api/dict/yes-no'（应该用 metadata.getDictOptions）
  • ❌ 文件上传用裸 axios（应该 request({ ..., data: FormData })）
  • ❌ 按钮 v-if="role === 'admin'"（应该用 v-if="permission.xxx" 或 avue-crud :permission，权限码下划线风格）
  • ❌ 接口失败时只在 console.log，没给用户 UI 反馈

进一步