这是一个专为前端开发者设计的面试项目，包含 React 和 Vue 两个版本，提供两种不同的面试模式。

web_interview/
├── react/              # React 版本 (基于 Umi.js)
├── vue/                # Vue 版本 (基于 Vite + Vue 3)
├── README.md           # 项目总体说明（当前文件）
├── AI_README.md        # React 调试面试题说明
├── AI_VUE_README.md    # Vue 调试面试题说明
└── ONLINE_INTERVIEW.md # 线上上机面试说明

适合场景：考察基础编程能力和从零构建应用的能力

面试时间：40 分钟

技术要求：

• React 版本: React Hooks + TypeScript
• Vue 版本: Vue 3 Composition API + TypeScript

实现位置：

• React: react/src/pages/TodoList/index.tsx
• Vue: vue/src/views/HomeView.vue

适合场景：考察问题发现、调试能力和 AI 协作能力

面试时间：45-50 分钟

调试对象：

• React: react/src/pages/AiTodo.tsx（功能完整但含有多个 bug）
• Vue: vue/src/views/AiTodo.vue（功能完整但含有多个 bug）

详细说明：

• React 版本请参考：AI_README.md
• Vue 版本请参考：AI_VUE_README.md

适合场景：考察 Git 协作能力、代码审查和远程开发技能

面试时间：60-70 分钟

技术要求：

• 仅限调试模式：只能选择 React 或 Vue 的 AI 调试版本
• Git 协作：需要提交代码并创建合并请求
• 代码审查：需要编写清晰的提交信息和 PR 描述

协作流程：

1. Fork 项目 → 克隆到本地
2. 创建分支 → 按规范命名修复分支
3. 调试修复 → 修复 AI 版本中的所有 bug
4. 提交代码 → 编写规范的提交信息
5. 创建 PR → 详细描述修复内容和测试结果

详细说明：请参考 ONLINE_INTERVIEW.md

# 进入 React 项目目录
cd react

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

访问地址：

• 从零实现版本：http://localhost:8000
• 调试版本：http://localhost:8000/ai

# 进入 Vue 项目目录
cd vue

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

访问地址：

• 从零实现版本：http://localhost:5173
• 调试版本：http://localhost:5173/ai

---

序号	功能描述	分值
1	实现列表的渲染，数据为对象数组	8分
2	顶部输入框，回车键添加任务到列表顶部	10分
3	复选框标记完成状态，已完成显示删除线	12分
4	鼠标悬停显示删除按钮，点击删除事项	10分
5	底部全选复选框，显示完成数/总数	12分
6	清除已完成任务按钮	10分
7	隐藏/显示已完成事项切换按钮	12分
8	支持编辑功能	10分
9	页面布局设计	8分
10	补充 TypeScript 类型	8分

• 功能完整性: 70%
• 代码质量: 15%
• UI/UX 设计: 10%
• TypeScript 类型: 5%

interface TodoItem {
  id: string;           // 唯一标识符
  text: string;         // 任务内容
  completed: boolean;   // 是否已完成
  createdAt: Date;      // 创建时间
}

1. 添加任务: 输入框回车或点击按钮
2. 切换状态: 点击复选框切换完成状态
3. 删除任务: 悬停显示删除按钮
4. 批量操作: 全选/清除已完成
5. 筛选显示: 隐藏/显示已完成项
6. 编辑功能: 双击或编辑按钮修改内容

• 使用 useState 管理状态
• 事件处理和表单控制
• 条件渲染和列表渲染
• CSS Modules 或 Less 样式

• 使用 ref/reactive 管理响应式状态
• v-model 双向绑定
• v-for 列表渲染和 v-if 条件渲染
• Scoped CSS 样式

---

React 调试版本 (AiTodo.tsx)：

• 包含功能完整的 TodoList 应用
• 故意植入多个不同类型的 bug
• 考察快速定位和修复问题的能力
• 详细说明请看：AI_README.md

Vue 调试版本 (AiTodo.vue)：

• 包含功能完整的 TodoList 应用
• 故意植入多个不同类型的 bug
• 考察 Vue 框架特定的调试能力
• 详细说明请看：AI_VUE_README.md

1. 问题发现（10-15分钟）：测试功能，记录发现的问题
2. 问题修复（25-35分钟）：分析原因，逐一修复bug
3. 代码优化（5-10分钟）：性能优化和代码质量提升

允许使用的 AI 工具：

• GitHub Copilot
• Cursor AI
• Claude、ChatGPT 等对话式 AI
• 其他编程辅助 AI 工具

重要原则：

• ✅ 可以使用 AI 协助定位和修复问题
• ✅ 需要理解并能解释修复的原理
• ✅ 要验证 AI 建议的正确性
• ❌ 不能盲目复制 AI 代码而不理解

---

1. 从简单功能开始: 先实现基本的添加、显示、删除
2. 逐步增强: 再添加筛选、编辑等高级功能
3. 注意细节: 用户体验和边界情况处理
4. 代码质量: 保持代码简洁、可读性强
5. 类型安全: 充分利用 TypeScript 类型检查

1. 系统性测试: 逐个功能点进行测试
2. 开发者工具: 充分利用浏览器开发者工具
3. 问题分类: 按严重程度和影响范围分类修复
4. 验证修复: 每修复一个问题都要验证功能正常

react/
├── src/
│   ├── pages/
│   │   ├── index.tsx          # 主页面（模式选择）
│   │   ├── AiTodo.tsx         # 调试面试题（含bug的完整应用）
│   │   └── TodoList/
│   │       ├── index.tsx      # 从零实现面试题（模板）
│   │       └── index.less     # 样式文件
│   └── types/
│       └── todo.ts            # TypeScript 类型定义
└── package.json

vue/
├── src/
│   ├── App.vue                # 主应用（模式选择）
│   ├── views/
│   │   ├── HomeView.vue       # 从零实现面试题（模板）
│   │   └── AiTodo.vue         # 调试面试题（含bug的完整应用）
│   └── types/
│       └── todo.ts            # TypeScript 类型定义
└── package.json

• ✅ 项目已包含完整的开发环境配置
• ✅ 样式框架和基础布局已准备就绪
• ✅ 专注于功能实现，无需关心项目搭建
• ✅ 可以自由选择 React 或 Vue 版本进行开发
• ✅ 建议先选择面试模式，再开始实现

模式选择建议：

• 传统面试场景：选择模式一（从零实现）
• 现代开发场景：选择模式二（调试 + AI协作）
• 技能全面考察：可以两种模式结合使用

• 构建工具: Umi.js
• 开发语言: TypeScript
• 样式方案: Less + CSS Modules
• 包管理器: pnpm

• 构建工具: Vite
• 开发语言: TypeScript
• 样式方案: Scoped CSS
• 包管理器: pnpm

---

祝你面试顺利！ 🎉