07 - 高级功能全解

功能: 将设计图转为代码

使用方法:
1. 在 Chat 中上传图片（拖拽或粘贴）
2. 描述需求

Prompt示例:
"这是一个登录页面的设计稿，
 请帮我用 React + TailwindCSS 实现，
 要求:
 - 响应式设计
 - 动画效果
 - 表单验证"

Claude 会分析图片并生成完整代码！

场景: 页面显示异常

操作:
1. 截图当前页面
2. 上传到 Chat
3. 描述问题

Prompt:
"这个按钮位置不对，应该居中显示，
 请检查代码并修复"

Claude 能看懂截图，找出 CSS 问题！

Prompt:
"审查 @src/api/user.ts，关注:
 
 1. 安全性
    - SQL注入风险
    - XSS漏洞
    - 认证问题
 
 2. 性能
    - N+1查询
    - 不必要的循环
    - 内存泄漏
 
 3. 最佳实践
    - 错误处理
    - 代码复用
    - 命名规范
 
 4. TypeScript
    - 类型安全
    - 泛型使用
    - 类型推导
 
 请给出:
 - 问题列表（按严重程度排序）
 - 具体修复建议
 - 重构后的代码"

工作流:

1. 在 GitHub PR 页面复制 diff
2. 粘贴到 Claude Chat
3. 添加审查要求

Prompt:
"审查这个 PR:

[粘贴 diff]

关注点:
- 是否符合项目规范
- 有无潜在bug
- 测试是否充分
- 文档是否更新

请给出 LGTM 或 Request Changes 建议"

选中代码 + Cmd+K:

"重构这段代码:
 - 提取重复逻辑
 - 优化性能
 - 改善可读性
 - 添加错误处理
 - 使用设计模式（如适用）"

Claude 会:
1. 识别代码坏味道
2. 应用重构模式
3. 保持功能不变
4. 添加测试

Composer 模式:

"重构用户模块:
 
 目标:
 1. 从 Class-based 迁移到 Functional
 2. 提取自定义 hooks
 3. 优化状态管理（使用 Zustand）
 4. 添加 loading 和 error 状态
 5. 改进类型定义
 
 涉及文件:
 @src/features/user/**/*"

Claude 会协调多个文件的修改！

Prompt:
"为 @src/utils/validation.ts 生成完整的单元测试

要求:
- 使用 Jest + TypeScript
- 测试所有导出函数
- 包含成功和失败场景
- 测试边界条件
- 100% 覆盖率

测试用例应该:
1. 清晰的描述
2. AAA模式 (Arrange-Act-Assert)
3. 适当的 mock
4. 有意义的断言"

Prompt:
"生成登录流程的 E2E 测试

使用: Playwright + TypeScript

场景:
1. 成功登录
2. 密码错误
3. 邮箱未注册
4. 记住我功能
5. 登出流程

要求:
- Page Object Model 模式
- 等待元素出现
- 截图失败场景
- 清理测试数据"

复制错误信息:

Prompt:
"遇到这个错误:

TypeError: Cannot read properties of undefined (reading 'id')
    at UserCard.tsx:23:18
    at ...

相关代码:
[粘贴代码]

请:
1. 解释错误原因
2. 找出根本问题
3. 提供修复方案
4. 解释如何避免

此类错误"

Prompt:
"这个组件渲染很慢:

@components/UserList.tsx

表现:
- 初始加载慢
- 滚动卡顿
- 状态更新慢

请:
1. 分析性能瓶颈
2. 使用 React DevTools Profiler 数据
3. 提供优化方案
4. 生成优化后的代码"

Prompt:
"为 @src/api/ 目录生成 API 文档

格式: OpenAPI 3.0

包含:
- 所有端点
- 请求/响应 schema
- 认证方式
- 错误码说明
- 示例请求

生成:
1. openapi.yaml
2. 人类可读的 markdown 文档"

选中函数 + Cmd+K:

"为这个函数添加完整的 JSDoc 注释

包含:
- 函数描述
- 参数说明（类型、含义）
- 返回值说明
- 抛出的异常
- 使用示例
- 注意事项"

Prompt:
"基于这个项目生成完整的 README.md

@package.json
@src/

包含:
- 项目介绍
- 功能特性
- 技术栈
- 安装步骤
- 使用文档
- API 文档链接
- 贡献指南
- License
- 截图（描述位置）"

Prompt:
"设计一个电商系统的后端架构

需求:
- 用户认证
- 商品管理
- 订单处理
- 支付集成
- 库存管理
- 搜索功能

请提供:
1. 系统架构图（用 Mermaid）
2. 数据库设计（ER图）
3. API 设计
4. 技术栈选型
5. 部署方案
6. 扩展性考虑"

Prompt:
"设计社交媒体应用的数据库

功能:
- 用户系统
- 帖子发布
- 评论系统
- 点赞/收藏
- 关注/粉丝
- 私信

提供:
1. PostgreSQL Schema
2. 关系图
3. 索引策略
4. 分表策略（如需）
5. Prisma schema 文件"

Prompt:
"创建 GitHub Actions 工作流

需求:
- 代码检查（ESLint + TypeScript）
- 运行测试
- 构建项目
- Docker 镜像构建
- 部署到 Vercel
- Slack 通知

触发条件:
- Push to main
- Pull Request
- 手动触发"

Prompt:
"实现观察者模式（TypeScript）

场景: 事件系统

要求:
- 类型安全
- 支持多个监听器
- 支持取消订阅
- 错误处理
- 完整示例"