前端工程师

本skill指导如何理解产品需求，实现前端页面功能，构建用户交互界面。

何时使用本Skill

当前端工程师需要实现前端功能时使用，例如：

"我是前端工程师，需要实现前端功能..."
"我需要实现这个UI设计..."
"请帮我开发这个前端页面..."

核心职责

1. 需求理解

理解产品需求和功能规格
理解UI设计稿
理解交互流程

2. 页面实现

实现前端页面
实现用户交互
实现页面跳转
实现表单和数据展示

3. 业务逻辑实现

理解业务领域
识别业务实体
实现前端业务逻辑

4. 接口对接

对接后端API
处理数据请求和响应
处理错误和异常

5. 性能优化

优化页面加载速度
优化渲染性能
优化用户体验

关键技能

前端技术

HTML5
CSS3
JavaScript/TypeScript
前端框架（React/Vue/Angular）

工具能力

前端构建工具（Webpack/Vite/Rollup）
版本控制（Git）
调试工具（Chrome DevTools）
代码编辑器（VSCode）

业务理解能力

业务领域理解
业务实体识别
业务逻辑实现

优化能力

性能优化
用户体验优化
兼容性处理

输入物

UI设计稿
产品功能清单
功能规格说明
API文档

交付物

前端代码
组件库
前端文档

质量标准

✅ 功能实现完整
✅ 代码质量高
✅ 用户体验流畅
✅ 符合设计稿
✅ 性能良好

工作流程

需求接收：接收UI设计稿、功能规格说明、API文档
需求理解：深入理解产品需求和功能规格
业务分析：分析业务领域，识别业务实体
页面实现：实现前端页面和用户交互
业务逻辑实现：实现前端业务逻辑
接口对接：对接后端API
性能优化：优化页面性能和用户体验
测试验证：进行功能测试和兼容性测试
代码提交：提交代码，进行代码评审

工作流程图

graph LR
    A[UI设计稿] -->|需求理解| B[功能分析]
    B -->|业务分析| C[业务模型]
    C -->|页面实现| D[组件开发]
    D -->|业务逻辑| E[状态管理]
    E -->|接口对接| F[API集成]
    F -->|错误处理| G[异常处理]
    G -->|性能优化| H[性能调优]
    H -->|测试验证| I[功能测试]
    I -->|兼容性测试| J{通过?}
    J -->|是| K[代码评审]
    J -->|否| L[修复问题]
    L -->|调整| D
    K -->|合并| M[提交到测试]

协作关系

向上对接：UI专家、产品专家
平行对接：后端工程师、技术架构师

前端开发方法论

方法1: 组件化开发

将页面拆分为独立的组件
组件可复用
组件职责单一
组件接口清晰

组件设计原则：

单一职责：每个组件只负责一个功能
可复用：组件可以在多个地方使用
可组合：组件可以组合成更大的组件
接口清晰：组件的输入和输出要清晰

方法2: 响应式设计

适配不同设备（PC、平板、手机）
适配不同分辨率
使用CSS媒体查询
使用弹性布局（Flexbox、Grid）

响应式断点：

手机：<= 768px
平板：769px - 1024px
PC：>= 1025px

方法3: 性能优化

减少HTTP请求
使用CDN
压缩资源
使用懒加载
使用缓存
代码分割

前端技术栈选择

前端框架

React: 适合大型应用，组件化，生态丰富
Vue: 适合中小型应用，简单易学
Angular: 适合企业级应用，完整解决方案

UI组件库

Ant Design: 企业级UI组件库
Element Plus: Vue 3组件库
Material-UI: React组件库
TDesign: 腾讯企业级设计体系

状态管理

Redux/React Query: React状态管理
Vuex/Pinia: Vue状态管理
MobX: 响应式状态管理

常见误区

❌ 误区1: 只关注功能，不关注代码质量 ✅ 正确: 功能和代码质量并重

❌ 误区2: 不考虑性能，只关注功能实现 ✅ 正确: 在实现功能的同时考虑性能优化

❌ 误区3: 不考虑用户体验，只关注技术实现 ✅ 正确: 在实现技术的同时考虑用户体验

成功案例

案例1: 报表导出功能前端实现

功能需求: 导出销售数据为Excel

实现步骤:

页面布局:
- 在产品页面右上角添加"导出"按钮
- 实现导出配置面板（弹出式）
导出配置面板:
- 数据范围选择（日期范围、产品分类、地区）
- 导出格式选择（Excel、CSV、PDF）
- 导出字段配置（多选框）
- 确认和取消按钮
交互逻辑:
- 点击导出按钮 → 打开配置面板
- 配置完成后点击确认 → 调用导出API
- 导出成功 → 下载文件或提示下载
- 导出失败 → 显示错误提示
业务逻辑:
- 数据范围联动（选择产品分类后自动加载地区）
- 字段配置保存和加载
- 导出历史记录

技术实现:

使用React + Ant Design
使用React Query管理API调用
使用Zustand管理组件状态
实现表单验证
实现进度条显示

案例2: 搜索功能前端实现

功能需求: 产品搜索功能