这是一个基于 Vue 3 + TypeScript + <script setup> 的现代化购物商城应用，专门设计用于线上前端开发工程师上机面试。项目使用了Vue 3的最新特性和最佳实践，包含了精心设计的10个核心bug，需要候选人在规定时间内发现并修复这些问题，最后提交代码并创建合并请求。

• Vue 3.4+ - 使用 <script setup> 语法糖
• TypeScript - 完整的类型安全支持
• Pinia - Vue 3官方推荐的状态管理
• Vite - 现代化构建工具
• ESLint + TypeScript - 代码质量保证

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

• Vue 3现代化开发 - 熟练使用 <script setup> + TypeScript
• 类型安全编程 - TypeScript接口设计和类型推导
• 问题发现能力 - 快速识别代码中的问题
• 调试技能 - 使用开发工具定位和修复问题
• 代码质量 - 编写规范、可维护的代码
• 状态管理 - 理解和使用Pinia状态管理
• 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. 安装依赖:

   # 推荐使用pnpm (更快的包管理器)
   pnpm install
   # 或使用npm
   npm install
   

4. 启动开发服务器:

   pnpm dev
   # 或使用npm
   npm run dev
   

5. 类型检查:

   pnpm type-check
   # 或使用npm
   npm run type-check
   

6. 打开浏览器访问 http://localhost:5173 (Vite默认端口)

• 在线开发: 仅需浏览器，支持 CodeSandbox
• 本地开发: Node.js 18+, pnpm/npm, Git, VS Code (推荐)
• VS Code扩展: Volar (Vue 3 + TypeScript支持)
• Vue DevTools: 强烈推荐安装Vue 3开发者工具

本项目包含 10个精心设计的核心bug，每种类型一个，确保面试聚焦和高效：

1. [逻辑错误] 购物车库存检查缺失 (src/App.vue:62)

   • 添加商品到购物车时没有检查库存限制
   • 可能导致购买数量超过库存

2. [边界条件] 购物车数量更新问题 (src/App.vue:72)

   • 更新商品数量时没有处理数量为0的情况
   • 应该在数量为0时自动移除商品

3. [异步错误] 状态管理错误处理不完整 (src/stores/productStore.ts:15)

   • 加载成功后没有清除之前的错误状态
   • 导致错误信息可能一直显示

4. [API错误] 错误信息不够详细 (src/api/productApi.ts:47)

   • API错误处理信息太模糊，不利于调试
   • 应该保留原始错误信息

5. [UI处理] 图片加载失败处理缺失 (src/components/ProductList.vue:22)

   • 图片加载失败时没有显示默认图片
   • 影响用户体验

6. [计算错误] 购物车总数计算错误 (src/components/ShoppingCart.vue:59)

   • 显示商品种类数而不是商品数量总和
   • 应该计算所有商品数量的总和

7. [响应式问题] 移动端显示异常 (src/components/ShoppingCart.vue:375)

   • 移动端购物车布局显示不正常
   • 需要优化响应式设计

8. [性能优化] 搜索防抖缺失 (src/components/SearchFilter.vue:55)

   • 搜索输入没有防抖处理，每次输入都触发搜索
   • 造成不必要的性能消耗

9. [内存泄漏] 事件监听器未清理 (src/components/SearchFilter.vue:67)

   • 组件卸载时没有清理事件监听器
   • 可能导致内存泄漏

10. [CSS问题] 选择器优先级问题 (src/components/SearchFilter.vue:148)
    • 使用 !important 强制覆盖样式
    • 不符合CSS最佳实践

• 问题发现(30分): 15分钟内发现所有严重问题，准确识别问题类型
• 修复质量(40分): 正确修复所有问题且无副作用，代码质量高
• 技术理解(20分): 深入理解Vue 3 + TypeScript技术栈
• 时间管理(10分): 在规定时间内高效完成

• 问题发现(25分): 20分钟内发现大部分关键问题
• 修复质量(30分): 主要问题修复正确，代码质量良好
• 技术理解(15分): 基本掌握Vue 3现代化开发
• 时间管理(5分): 基本按时完成主要修复

• 问题发现(20分): 发现并修复部分关键问题
• 修复质量(25分): 基本功能能够正常运行
• 技术理解(10分): 理解基本的Vue 3概念
• 时间管理(5分): 完成基础修复

• 问题发现能力差，遗漏关键问题
• 修复不完整或引入新问题
• 对Vue 3 + TypeScript理解不足

• 代码优化 - 主动改善代码结构和性能
• 类型安全 - 充分利用TypeScript的类型系统
• 用户体验 - 主动改善界面交互和体验
• 最佳实践 - 遵循Vue 3和TypeScript最佳实践
• 文档完善 - 在PR中添加清晰的修复说明

src/
├── components/           # Vue组件
│   ├── ProductList.vue  # 商品列表组件 (BUG 5)
│   ├── ShoppingCart.vue # 购物车组件 (BUG 6, 7)
│   └── SearchFilter.vue # 搜索筛选组件 (BUG 8, 9, 10)
├── stores/              # Pinia状态管理
│   └── productStore.ts  # 商品数据管理 (BUG 3)
├── api/                 # API服务层
│   └── productApi.ts    # 数据接口 (BUG 4)
├── types/               # TypeScript类型定义
│   └── index.ts         # 统一类型导出
├── App.vue             # 主应用组件 (BUG 1, 2)
├── main.ts             # 应用入口
└── style.css           # 全局样式

1. Fork 项目 到个人 GitHub 账户
2. 选择开发环境 (CodeSandbox 或本地)
3. 启动项目 并熟悉基本结构

1. 功能测试 - 运行应用，测试各个功能模块
2. 控制台检查 - 使用开发者工具检查错误信息
3. 代码审查 - 快速浏览代码，识别潜在问题
4. 优先级规划 - 制定修复顺序（严重→中等→轻微）

1. 严重问题优先 - 先修复逻辑错误和边界条件
2. 功能性修复 - 修复UI和计算问题
3. 性能优化 - 改善搜索防抖和内存管理
4. 代码质量 - 修复CSS和代码规范问题
5. 实时验证 - 每个修复后立即测试功能

1. 最终测试 - 确保所有功能正常工作
2. 代码提交 - 使用规范的提交信息
3. 创建PR - 简要描述修复内容

1. 首先修复严重问题 (BUG 1-4) - 影响核心功能
2. 然后处理中等问题 (BUG 5-7) - 影响用户体验
3. 最后优化性能问题 (BUG 8-10) - 代码质量改善

• Vue DevTools - 调试Vue组件状态
• TypeScript - 利用类型检查发现问题
• Browser DevTools - 检查网络请求和错误
• AI工具 - 可以使用但需要理解原理

• 优先修复会导致应用崩溃的严重错误
• 每次修复后都要测试相关功能
• 保持代码风格的一致性
• 充分利用TypeScript的类型系统

---

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

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