# 网页开发人员 ## 推荐型号 **主要：** `codex` \- 全栈实现、React 组件、API 端点、数据库查询 **架构：** `opus` \- 复杂的系统设计、架构决策、可扩展性规划 **快速修复：** `sonnet` \- 错误修复、小功能、CSS 调整 ** ** ## 🔄 自动 QA 政策 **状态：** ✅ **启用** \- 始终迭代 UI/UX 工作；后端选择性 **原因：** 前端/UI 工作是主观的，视觉质量很重要。后端工作更加客观，但仍然受益于完整性审查。 **这意味着什么：** * Fitz 在子代理完成后自动对所有 Web 开发可交付成果进行 QA * 如果需求缺失或发现质量问题，创建详细的反馈文档 * 生成带有反馈的迭代代理，直到工作完成 * 您只审查已完成、可用于生产的代码 **质量标准：** * ✅ 满足任务简介中的所有要求（未部分完成） * ✅ UI 作品与提供的任何设计灵感相匹配 * ✅ 代码干净、组织良好且可维护 * ✅ 响应式设计适用于移动设备和桌面设备 * ✅ 支持深色模式（如果适用） * ✅ 面向客户的界面上没有占位符/粗糙的样式 * ✅ 后端 API 具有适当的错误处理和验证 * ✅ 正常工作 - 没有明显的错误或重大更改 **例外：** * **快速修复/补丁：** 单一 QA 审查，除非损坏，否则不要迭代 * **仅后端工作：** 轻度 QA（工作正常吗？），而不是视觉修饰 * **实验/原型：** 如果标记为草稿，则跳过 QA **您可以覆盖：** 说“跳过 QA”或“足够好，交付它”以绕过迭代 ** ** ## 核心专长 ### 前端开发 * **React** \- 现代钩子、组件模式、状态管理 * **Vite** \- 快速构建、HMR、优化 * **Tailwind CSS** \-实用优先的样式、设计系统 * **Chart.js / D3** \- 数据可视化 * **响应式设计** \- 移动优先、可访问的 UI ### 后端开发 * **Node.js + Express** \- RESTful API、中间件、路由 * **数据库集成** \- PostgreSQL、MongoDB、Supabase * **身份验证** \- OAuth、JWT、会话管理 * **API 设计** \- RESTful 模式、版本控制、文档 ### 全栈模式 * **项目结构** \- Monorepo 与单独的存储库 * **状态管理** \- Context、Zustand、React Query * **错误处理** \- 客户端 + 服务器端 * **性能优化** \- 代码分割、延迟加载、缓存 * **部署** \- Vercel、Railway、PM2、Docker ## 项目架构清单在开始任何 Web 项目之前，定义： ### 1\. **技术堆栈** * 前端框架（React、Vue、vanilla JS？） * 构建工具（Vite、Next.js、Create React App？） * 样式方法（Tailwind、CSS 模块、样式组件？） * 状态管理（Context、Zustand、Redux？） * 后端运行时（Node、Deno、Bun？） * 数据库（PostgreSQL、MongoDB、Supabase、Firebase？） ### 2\. **项目结构** 项目名称/ ├── 前端/ # React 应用程序 │ ├── src/ │ │ ├── 组件/ │ │ ├──页数/ │ │ ├── 挂钩/ │ │ ├── 实用工具/ │ │ ├── api/ # API客户端函数 │ │ └── App.jsx │ ├── 公开/ │ └── package.json ├── 后端/ # Express API │ ├── 路线/ │ ├── 控制器/ │ ├── 型号/ │ ├── 中间件/ │ └── 服务器.js └── 自述文件.md ### 3\. **数据流** * 数据如何从后端→前端获取？ * 状态存储在哪里（本地、上下文、外部存储）？ * 如何处理 API 调用（fetch、axios、React Query）？ * 缓存策略是什么？ ### 4\. **错误处理** * 客户端错误边界 * API错误响应（格式一致） * 面向用户的错误消息 * 日志记录策略 ## 反应最佳实践 ### 组件模式 **展示组件**（仅限 UI）：导出函数 MetricCard({ 标题, 值, 更改, 状态 }) { 返回（

{标题}

{值}

0 ? '正' : '负'}`}> {变化> 0？ '↑' : '↓'} {Math.abs(变化)}%

） } **容器组件**（逻辑）：导出函数仪表板（）{ const [数据，setData] = useState(null) const [正在加载，setLoading] = useState(true) 使用效果（（）=> { fetchData().then(setData).finally(() => setLoading(false)) }, []) 如果（正在加载）返回返回 } **自定义挂钩**（可重用逻辑）：函数 useAPI（端点）{ const [数据，setData] = useState(null) const [正在加载，setLoading] = useState(true) const [错误，setError] = useState(null) 使用效果（（）=> { 获取（端点） .then(res => res.json()) .then(设置数据) .catch(设置错误) .finally(() => setLoading(false)) }, [端点]) 返回 { 数据、加载、错误 } } ### 状态管理理念 * **useState** \- 本地组件状态 * **useContext** \- 共享状态（主题、用户、全局设置） * **React Query / SWR** \- 服务器状态（API 数据、缓存） * **Zustand / Redux** \- 复杂的全局状态（如果确实需要） **规则：** 保持状态尽可能本地化。仅在必要时抬起。 ## API 设计模式 ### RESTful 端点 GET /api/portfolio/overview # 统计摘要 GET /api/properties # 列出所有属性 GET /api/properties/:id # 单个属性详细信息 POST /api/properties/:id/metrics # 更新指标 GET /api/insights # AI 生成的见解 GET /api/alerts # 活动警报 ### 响应格式（一致） { “状态”：“成功”， “数据”：{...}， “元”：{ "时间戳": "2026-01-29T20:00:00Z", “缓存”：真 } } ### 错误格式 { “状态”：“错误”， “错误”：{ “代码”：“VALIDATION_ERROR”， "message": "无效的属性 ID", “详细信息”：{ ... } } } ## 性能优化 ### 前端 * **代码分割** \- 延迟加载路由/组件 * **Memoization** \- `useMemo`、`React.memo` 用于昂贵的渲染 * **虚拟化** \- 对于长列表（react-window） * **图像优化** \- WebP、延迟加载、srcset * **捆绑包分析** \- 保持捆绑包大小 < 500KB ### 后端 * **缓存** \- Redis，用于频繁查询的内存缓存 * **数据库索引** \- 索引经常查询的字段 * **速率限制** \- 防止 API 滥用 * **压缩** \- gzip/brotli 响应 * **连接池** \- 重用数据库连接 ### 网络 * **HTTP/2** \- 多路复用、服务器推送 * **CDN** \- 从边缘提供的静态资源 * **预取** \- 预加载关键资源 * **服务人员** \- 离线支持、缓存 ## 设计系统集成构建 UI 时，建立： ### 1\. **颜色系统** ：根{ --颜色主色：#6366f1； --颜色成功：#10b981； --颜色警告：#f59e0b； --颜色危险：#ef4444； --bg-primary: #ffffff; --bg-次要：#f8fafc； --text-primary: #0f172a; --文本辅助：#475569； } ### 2\. **版式比例** --text-xs: 12px; --text-sm: 14px; --文本基数：16px； --文本-lg：18px； --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; ### 3\. **间距系统** --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-6: 24px; --spacing-8: 32px; ### 4\. **组件库** * 按钮（主要、次要、危险、幽灵） * 卡片（默认、升高、有边框） * 输入（文本、选择、复选框、单选） * 警报（成功、警告、错误、信息） * 模态框、工具提示、下拉菜单 * 加载状态（旋转器、骨架） ## 要避免的常见陷阱 ### 前端 * ❌ 道具钻探（使用上下文或构图） * ❌ useEffect hooks 过多（整合逻辑） * ❌ 内联样式（使用 CSS 模块或 Tailwind） * ❌ 不处理加载/错误状态 * ❌ 忘记辅助功能（ARIA 标签、键盘导航） ### 后端 * ❌ 无输入验证（验证所有内容） * ❌ SQL注入漏洞（使用参数化查询） * ❌ 暴露敏感数据（清理响应） * ❌ 无速率限制（防止滥用） * ❌ 糟糕的错误消息（具体但安全） ### 架构 * ❌ 过早优化（先构建，后优化） * ❌ 过度设计（KISS 原则） * ❌ 没有关注点分离（混合 UI + 逻辑） * ❌ 紧耦合（组件应该是模块化的） * ❌ 无需测试（至少对关键路径进行冒烟测试） ## 部署清单发货前： * 配置环境变量（不是硬编码） * 错误日志记录设置（Sentry、LogRocket） * 分析跟踪（GA4，似是而非） * 性能监控（Lighthouse、Web Vitals） * 配置安全标头（CSP、CORS、HSTS） * 计划数据库备份 * SSL 证书处于活动状态 * 启用API速率限制 * 错误边界到位 * 所有异步操作的加载状态 * 移动响应能力测试 * 通过可访问性审核（最低 WCAG AA） * 带有设置说明的自述文件 * API端点的文档 ## 调试工作流程 ### 前端问题 1.检查浏览器控制台（错误、警告） 2. React DevTools（组件树、props、状态） 3. 网络选项卡（API 调用、响应时间） 4.性能选项卡（渲染时间、内存泄漏） ### 后端问题 1.检查服务器日志（错误、堆栈跟踪） 2. 使用curl/Postman测试端点 3.数据库查询日志（慢查询） 4.内存/CPU使用率（资源泄漏） ### 集成问题 1. CORS错误（检查标头） 2. 身份验证失败（令牌过期？） 3. 数据格式不匹配（后端与前端） 4. 缓存问题（陈旧数据） ## 技术堆栈决策矩阵需要|推荐|另类 ---|---|--- 前端框架 |反应 + 投票 | Next.js（如果需要 SSR）造型 |顺风 CSS | CSS 模块状态管理|上下文 + React 查询 |祖斯坦后端 |节点 + Express |快速化（更快）数据库| PostgreSQL + Supabase | MongoDB 部署| Vercel（前端）+ Railway（后端）|码头工人+VPS 授权 | Supabase 授权 | Auth0，职员图表| Chart.js |重新图表，D3 ## 项目结构示例（分析仪表板）分析仪表板/ ├── 前端/ │ ├── src/ │ │ ├── 组件/ │ │ │ ├── MetricCard.jsx │ │ │ ├── PropertyCard.jsx │ │ │ ├── InsightsPanel.jsx │ │ │ └── TrafficChart.jsx │ │ ├──页数/ │ │ │ ├── Dashboard.jsx │ │ │ ├── PropertyDetail.jsx │ │ │ └── InsightsHub.jsx │ │ ├── 挂钩/ │ │ │ ├── useAPI.js │ │ │ ├── useInsights.js │ │ │ └── useAlerts.js │ │ ├── API/ │ │ │ └── client.js │ │ ├── App.jsx │ │ └──index.css │ └── package.json ├── 后端/ │ ├── 路线/ │ │ ├──portfolio.js │ │ ├── Insights.js │ │ └──alerts.js │ ├── 服务/ │ │ ├── ga4.js │ │ ├── anomalyDetection.js │ │ └──Recommendations.js │ ├── 缓存.js │ └── 服务器.js └── 自述文件.md ## 何时寻求帮助 * **复杂的架构决策** → 使用 `opus` 进行战略思考 * **性能瓶颈** → 首先分析，其次优化 * **安全问题** → 总是最好询问 * **不熟悉的 API** → 阅读文档，先隔离测试 * **重大变更** → 检查迁移指南、变更日志 ## 质量标准 **发货代码：** * ✅ 适用于移动设备和桌面设备 * ✅ 具有所有异步操作的加载状态 * ✅ 优雅地处理错误（没有静默的失败） * ✅ 可访问（键盘导航、ARIA 标签） * ✅ 表现良好（灯塔得分 >90） * ✅ 可维护（清晰的命名，需要的地方注释） * ✅ 遵循项目现有模式 **不要发送以下代码：** * ❌ 有 console.log 语句（删除或使用适当的日志记录） * ❌ 具有硬编码的 API 密钥或秘密 * ❌ 边缘情况破裂（彻底测试） * ❌ 性能较差（优化关键路径） * ❌ 无法访问（使用键盘+屏幕阅读器测试） ## 理念 * **务实胜过完美** \- 发布工作代码，根据实际使用情况进行迭代 * **用户至上** \- 性能、可访问性和用户体验胜过开发人员的便利性 * **一致性** \- 遵循代码库中既定的模式 * **清晰** \- 代码的阅读量多于编写量；优先考虑可读性 * **弹性** \- 假设事情会失败；优雅地处理错误 ** ** **在以下情况下使用此技能：** 构建或重构 Web 应用程序、制定架构决策、优化性能或调试复杂的全栈问题。

网页开发人员

包含技能