第九章：实战项目案例

# 第一步：项目初始化与架构设计
用 Vite 创建 React 18 + TypeScript 项目，安装并配置：
- Ant Design 5.x（中文语言包）
- React Router v6（含权限路由守卫）
- React Query（数据请求状态管理）
- axios（配置拦截器：请求加 token，响应统一处理 401/403）

创建标准的项目目录结构：
src/
  pages/          # 页面组件
  components/     # 通用组件
  hooks/          # 自定义 Hook
  services/       # API 请求函数
  stores/         # 全局状态（Zustand）
  types/          # TypeScript 类型定义
  utils/          # 工具函数

# 第二步：用户管理页面
创建用户管理页面 src/pages/users/index.tsx。

功能：
- 用户列表（Ant Design Table，支持分页、排序、筛选）
- 搜索框（按姓名/邮箱模糊搜索，300ms 防抖）
- 状态筛选（全部/启用/禁用）
- 操作列（编辑、禁用/启用、删除，带确认弹窗）
- 新建/编辑用户弹窗（表单校验）

API 接口（Mock）：
- GET /api/users?page=1&size=20&keyword=&status=
- POST /api/users
- PUT /api/users/:id
- DELETE /api/users/:id

# 第一步：核心游戏逻辑
用原生 JavaScript 和 Canvas 实现贪吃蛇游戏核心：

技术要求：
- 使用 ES6 Class 组织代码（Snake 类、Food 类、Game 类）
- 游戏循环用 requestAnimationFrame
- 网格大小 20px，画布 400x400
- 方向键控制，禁止 180° 反向移动
- 吃到食物：蛇增长 + 得分 +10
- 碰墙或碰自身：游戏结束

输出单个 index.html 文件（内联 CSS 和 JS）。

# 第二步：增加音效和视觉效果
在现有游戏基础上增加：
1. 用 Web Audio API 生成音效（不需要音频文件）：
   - 吃食物：短促的高频"叮"
   - 游戏结束：下降音调
2. 蛇头和蛇身颜色渐变（头部主色，尾部渐淡）
3. 食物随机形状（圆形/方形/三角形轮换）
4. 得分浮动动画（+10 字样从食物位置飘上去消失）

# 第三步：移动端适配
添加移动端支持：
1. 触摸滑动控制（swipe up/down/left/right）
2. 屏幕宽度小于 480px 时，Canvas 等比缩放适应屏幕
3. 添加屏幕上的方向按钮（虚拟方向键，半透明覆盖在画布下方）

# 初始化 Expo 项目
用 Expo（SDK 50+）初始化 React Native 项目，配置：
- TypeScript
- Expo Router（文件系统路由）
- NativeWind（Tailwind CSS for RN）
- AsyncStorage（本地持久化）

创建基础 Todo 功能：
- 首页：任务列表 + 底部输入框
- 任务项：勾选完成、左滑删除、点击编辑
- 分类：全部/待完成/已完成 Tab 切换
- 数据持久化到 AsyncStorage

# 添加提醒功能
为 Todo APP 添加任务提醒：
1. 创建任务时可选设置提醒时间（DateTimePicker）
2. 使用 expo-notifications 在设定时间发送本地推送通知
3. 通知内容：任务标题 + "该完成了！"
4. 处理 iOS/Android 权限请求差异
5. App 在后台时通知仍正常触发

# 搭建 Manifest V3 扩展框架
创建 Chrome 扩展，实现划词翻译功能。

文件结构：
- manifest.json（Manifest V3，权限：activeTab、storage、contextMenus）
- background.js（Service Worker：处理右键菜单、消息转发）
- content.js（注入网页：监听文字选择、显示翻译气泡）
- popup.html/js（扩展图标点击弹窗：设置 API Key）
- options.html/js（选项页：目标语言、翻译风格设置）

功能要求：
- 选中文字后显示翻译图标，点击图标调用 Claude API 翻译
- 翻译结果在气泡中显示，支持复制
- API Key 存储在 chrome.storage.local（不明文显示）

# 实现 Claude API 调用
在 background.js 中实现 Claude 翻译：

调用参数：
- model: claude-haiku-4-5（响应快、成本低，适合翻译）
- max_tokens: 200
- system: "你是专业翻译助手。将用户提供的文本翻译为{目标语言}。
  只输出翻译结果，不要解释，不要加引号。"
- messages: [{ role: "user", content: 选中的文字 }]

错误处理：
- API Key 未设置：提示用户去选项页配置
- 网络错误：显示重试按钮
- 超时（5s）：显示"翻译超时，请重试"

# 初始化 CLI 项目
创建一个名为 ai-review 的 Node.js CLI 工具项目。

功能：
- ai-review                    # 审查当前 git staged 变更
- ai-review --file src/api.ts  # 审查指定文件
- ai-review --pr 123           # 审查 GitHub PR（需 GH_TOKEN）
- ai-review --fix              # 审查并自动修复低风险问题

技术选型：
- commander.js（命令解析）
- @anthropic-ai/sdk（AI 调用）
- chalk（彩色输出）
- ora（加载动画）
- cosmiconfig（配置文件支持 .aireviewrc）

确保 package.json 配置 bin 字段，支持全局安装后直接使用 ai-review 命令。

# 配置文件支持
为 ai-review 添加 .aireviewrc.json 配置文件支持：

可配置项：
{
  "model": "claude-sonnet-4-6",
  "language": "zh",               // 审查报告语言
  "rules": ["security", "performance", "style"],  // 启用的规则集
  "severity": "warning",          // 最低报告级别
  "ignore": ["*.test.ts", "dist/"]  // 忽略的文件
}

实现规则集：
- security：OWASP Top 10 相关问题
- performance：N+1查询、无限循环、内存泄漏
- style：命名规范、复杂度、重复代码

# 发布到 npm
准备发布 ai-review 到 npm：
1. 完善 package.json（description、keywords、repository、license）
2. 创建 README.md（安装、使用方法、配置说明）
3. 添加 .npmignore 排除开发文件
4. 配置 GitHub Actions：push tag 时自动 npm publish
5. 添加版本管理命令（npm run release:patch/minor/major）