这是一个基于 Vue 3 的购物商城应用，专门设计用于线上前端开发工程师上机面试。项目包含了多个故意设计的问题和bug，需要候选人在规定时间内发现并修复这些问题，最后提交代码并创建合并请求。

测试候选人在以下方面的能力：

• 问题发现能力 - 快速识别代码中的问题
• Vue.js 技能 - 熟练使用 Vue 3 Composition API
• 调试技能 - 使用开发工具定位和修复问题
• 代码质量 - 编写规范、可维护的代码
• Git 协作 - 规范的提交和合并请求流程
• AI 工具使用 - 合理使用 AI 辅助开发

1. Fork 项目: 点击项目页面的 "Fork" 按钮
2. 在线开发: 在 CodeSandbox 中直接修复问题
3. 实时预览: 右侧预览窗口可查看效果
4. 提交代码: 完成后提交到你的 Fork 仓库

1. Fork 原始项目 到你的 GitHub 账户
2. 克隆你的 Fork:

   git clone https://github.com/你的用户名/vue-shopping-interview.git
   cd vue-shopping-interview
   

3. 安装依赖:

   npm install
   

4. 启动开发服务器:

   npm run dev
   

5. 打开浏览器访问 http://localhost:3000

• 在线开发: 仅需浏览器，支持 CodeSandbox
• 本地开发: Node.js 16+, npm/yarn, Git, VS Code (推荐)

1. 购物车计算错误 - 总数和总价计算逻辑有问题
2. 组件引用错误 - 组件导入路径可能有问题
3. 异步数据处理 - API 调用的错误处理不完整
4. 内存泄漏风险 - 事件监听器没有正确清理

5. 性能问题 - 搜索筛选没有防抖处理
6. 用户体验问题 - 图片加载失败没有处理
7. 响应式问题 - 移动端显示异常
8. 数据验证缺失 - 表单输入验证不完整

9. 样式问题 - CSS 选择器优先级问题
10. 代码规范 - 变量命名和代码格式问题
11. 边界条件 - 空数据状态处理不当
12. 可访问性 - 缺少 ARIA 标签和键盘导航

• 问题发现(25分): 15分钟内发现所有严重问题，准确识别问题根因
• 修复质量(30分): 正确修复所有问题且无副作用，代码质量高
• Git协作(20分): 提交信息规范，合并请求描述详细清晰
• 时间管理(15分): 在规定时间内高效完成，合理分配修复优先级
• 技术深度(10分): 主动优化性能和用户体验，高效使用AI工具

• 问题发现(20分): 20分钟内发现大部分关键问题
• 修复质量(25分): 主要问题修复正确，代码质量良好
• Git协作(15分): 基本遵循Git协作规范，合并请求信息完整
• 时间管理(10分): 基本按时完成主要修复
• 技术深度(5分): 能使用AI工具辅助开发

• 问题发现(15分): 发现并修复部分关键问题
• 修复质量(20分): 主要功能能够正常运行
• Git协作(10分): 完成基本的提交和合并请求流程
• 时间管理(10分): 在AI帮助下完成基本修复
• 技术深度(5分): 基本理解所使用的技术方案

• 问题发现能力差，遗漏关键问题
• 修复不完整或引入新问题
• Git协作流程不规范，合并请求信息不完整
• 时间管理差，未能在规定时间内完成基本要求

• 合并请求质量 - 详细的PR描述，包含修复说明和测试步骤
• 提交历史清晰 - 每个提交都有明确目的，符合约定式提交规范
• 主动发现额外问题 - 发现并修复未明确要求的优化点
• 性能优化 - 主动改善应用性能和用户体验
• 代码重构 - 在修复过程中改进代码结构和可维护性
• 文档完善 - 在PR中添加必要的代码注释和修复说明

src/
├── components/           # Vue组件
│   ├── ProductList.vue  # 商品列表组件 (包含显示问题)
│   ├── ShoppingCart.vue # 购物车组件 (包含计算错误)
│   └── SearchFilter.vue # 搜索筛选组件 (包含性能问题)
├── stores/              # Pinia状态管理
│   └── productStore.js  # 商品数据管理 (包含API问题)
├── api/                 # API服务层
│   └── productApi.js    # 数据接口 (包含异步处理问题)
├── App.vue             # 主应用组件 (包含逻辑错误)
├── main.js             # 应用入口
└── style.css           # 全局样式 (包含响应式问题)

1. Fork 项目 到个人 GitHub 账户
2. 选择开发环境 (CodeSandbox 或本地)
3. 启动项目 并熟悉基本结构
4. 创建开发分支 git checkout -b fix/interview-fixes

1. 功能测试 - 运行应用，测试各个功能模块
2. 控制台检查 - 使用开发者工具检查错误信息
3. 问题记录 - 列出发现的问题并按严重程度排序
4. 优先级规划 - 制定修复顺序

1. 严重问题优先 - 先修复导致应用崩溃的问题
2. 功能性修复 - 修复核心业务逻辑错误
3. 体验优化 - 改善用户交互和性能问题
4. 实时测试 - 每个修复后立即验证功能
5. 可使用AI工具 - 但需要理解和验证解决方案

1. 代码提交 - 使用规范的提交信息
2. 推送代码 到你的 Fork 仓库
3. 创建合并请求 - 详细描述修复内容
4. 最终检查 - 确保所有修复正常工作

• Vue DevTools - 调试Vue组件状态
• Browser DevTools - 检查网络请求和错误
• VS Code Extensions - Vetur, ES Lint等
• AI工具 - 可以使用但需要理解原理

• 优先修复会导致应用无法运行的严重错误
• 注意测试修复后的功能是否正常工作
• 保持代码风格的一致性
• 添加适当的注释说明修复原因

# 1. Fork项目到你的GitHub账户后，克隆你的Fork
git clone https://github.com/你的用户名/vue-shopping-interview.git
cd vue-shopping-interview

# 2. 创建开发分支
git checkout -b fix/interview-fixes

# 3. 修复问题后，分别提交每个修复
git add src/components/ShoppingCart.vue
git commit -m "fix: 修复购物车总价计算错误

- 修复价格精度问题导致的计算错误
- 添加商品数量的边界条件检查
- 优化购物车数量更新逻辑"

# 4. 继续修复其他问题
git add src/components/ProductList.vue
git commit -m "fix: 修复商品列表显示问题

- 解决图片加载失败的处理
- 修复搜索筛选逻辑错误"

# 5. 推送到你的Fork仓库
git push origin fix/interview-fixes

# 6. 在GitHub上创建Pull Request到原仓库

## 修复说明
本次修复解决了项目中的以下问题：

### 🔧 已修复问题
1. **购物车计算错误** - 修复总价计算精度问题
2. **商品列表显示** - 解决图片加载和筛选逻辑
3. **性能优化** - 添加搜索防抖处理

### 🧪 测试步骤
1. 添加商品到购物车，验证总价计算正确
2. 测试商品搜索功能，确认筛选结果准确
3. 检查控制台，确认无错误信息

### 📋 修复清单
- [x] 购物车总价计算
- [x] 商品列表筛选
- [x] 图片加载处理
- [ ] 其他优化项目(如有)

1. 项目部署 - 确保原始项目可正常运行，所有bug都已植入
2. 评分表准备 - 准备详细的评分记录表
3. 时间管理 - 设置计时器，严格控制各阶段时间
4. 环境检查 - 确认候选人可以正常访问GitHub和开发环境

1. 问题发现能力 - 是否能快速定位问题根因
2. 调试技能 - 使用开发工具的熟练程度
3. 代码质量 - 修复方案的优雅程度和可维护性
4. 时间管理 - 能否合理分配时间，优先处理关键问题
5. Git使用 - 提交信息和PR的专业程度

候选人：___________ 时间：___________

问题发现 (25分)：
- 严重问题发现：___ /15分
- 问题定位速度：___ /10分

修复质量 (30分)：
- 修复正确性：___ /20分  
- 代码质量：___ /10分

Git协作 (20分)：
- 提交规范：___ /10分
- PR质量：___ /10分

时间管理 (15分)：
- 完成度：___ /10分
- 优先级：___ /5分

技术深度 (10分)：
- 理解程度：___ /5分
- 优化能力：___ /5分

总分：___ /100分

Q: 可以使用搜索引擎和AI工具吗？ A: 完全可以，这是真实工作场景。但面试官会询问解决方案的原理，确保候选人理解而非盲目复制。

Q: 如果在规定时间内无法完成所有修复怎么办？ A: 按优先级修复最重要的问题，并在PR中说明剩余问题的修复思路和时间估算。

Q: 发现了额外的优化点是否应该实施？ A: 建议实施，这是重要加分项。但要确保不影响现有功能，并在PR中明确说明。

Q: 网络环境不好，无法正常使用在线开发环境怎么办？ A: 可以申请延时或改用本地开发，但需要提前告知面试官并调整时间安排。

Q: Fork的项目如何提交合并请求？ A: 在你的Fork仓库中点击"Pull Request"，选择从你的分支合并到原仓库的main分支。

---

如有技术问题或面试相关疑问，请及时联系面试官。

祝愿每位候选人都能发挥出最佳水平！ 🎉