# Vue 迁移检查清单

## 📋 迁移前准备

### 代码备份
- [ ] 创建新的 Git 分支 `vue-migration`
- [ ] 提交当前所有更改
- [ ] 创建备份标签 `git tag backup-before-vue-migration`

### 环境准备
- [ ] 确认 Node.js 版本 >= 16.0.0
- [ ] 清理 node_modules 和 package-lock.json
- [ ] 准备测试环境

---

## 🔧 依赖管理

### 移除 React 依赖
- [ ] 移除 `react`
- [ ] 移除 `react-dom`
- [ ] 移除 `lucide-react`
- [ ] 移除 `@vitejs/plugin-react`
- [ ] 移除 `@types/react`
- [ ] 移除 `@types/react-dom`
- [ ] 移除 `eslint-plugin-react-hooks`
- [ ] 移除 `eslint-plugin-react-refresh`

### 安装 Vue 依赖
- [ ] 安装 `vue@^3.4.0`
- [ ] 安装 `pinia@^2.1.0`
- [ ] 安装 `vue-router@^4.2.0` (可选)
- [ ] 安装 `lucide-vue-next@^0.344.0`
- [ ] 安装 `@vueuse/core@^10.7.0` (可选)
- [ ] 安装 `@vitejs/plugin-vue@^5.0.0`
- [ ] 安装 `vue-tsc@^1.8.25`
- [ ] 安装 `@vue/eslint-config-typescript@^12.0.0`
- [ ] 安装 `eslint-plugin-vue@^9.20.0`

---

## ⚙️ 配置文件更新

### package.json
- [ ] 更新 `scripts.build` 为 `vue-tsc && vite build`
- [ ] 更新 `scripts.lint` 支持 Vue 文件
- [ ] 添加 `scripts.type-check` 脚本
- [ ] 移除所有 React 相关依赖
- [ ] 添加所有 Vue 相关依赖

### vite.config.ts
- [ ] 替换 `@vitejs/plugin-react` 为 `@vitejs/plugin-vue`
- [ ] 添加路径别名 `@` 指向 `./src`
- [ ] 保持服务器配置不变
- [ ] 保持预览配置不变

### tsconfig.json
- [ ] 更新 `jsx` 为 `"preserve"`
- [ ] 添加 `baseUrl: "."`
- [ ] 添加 `paths: { "@/*": ["./src/*"] }`
- [ ] 确保 `include` 包含 `*.vue` 文件

### 新建文件
- [ ] 创建 `src/env.d.ts` (Vue 类型声明)
- [ ] 创建 `.eslintrc.cjs` (ESLint 配置)
- [ ] 创建 `src/stores/` 目录 (Pinia stores)

---

## 📁 文件结构迁移

### 组件文件转换
- [ ] `src/components/ProgressBar.tsx` → `ProgressBar.vue`
- [ ] `src/components/SidebarItem.tsx` → `SidebarItem.vue`
- [ ] `src/components/TableCheckItem.tsx` → `TableCheckItem.vue`
- [ ] `src/components/Toast.tsx` → `Toast.vue` + `ToastItem.vue`
- [ ] `src/layouts/MainLayout.tsx` → `MainLayout.vue`
- [ ] `src/layouts/Sidebar.tsx` → `Sidebar.vue`
- [ ] `src/pages/DashboardView.tsx` → `DashboardView.vue`
- [ ] `src/pages/ProjectListView.tsx` → `ProjectListView.vue`
- [ ] `src/pages/EngagementView.tsx` → `EngagementView.vue`
- [ ] `src/pages/engagement/SetupStep.tsx` → `SetupStep.vue`
- [ ] `src/pages/engagement/InventoryStep.tsx` → `InventoryStep.vue`
- [ ] `src/pages/engagement/ContextStep.tsx` → `ContextStep.vue`
- [ ] `src/pages/engagement/ValueStep.tsx` → `ValueStep.vue`
- [ ] `src/pages/engagement/DeliveryStep.tsx` → `DeliveryStep.vue`

### 状态管理迁移
- [ ] `src/contexts/ToastContext.tsx` → `src/stores/toast.ts` (Pinia)
- [ ] 创建 `src/stores/index.ts` (Pinia 导出)

### 入口文件迁移
- [ ] `src/main.tsx` → `src/main.ts`
- [ ] `src/App.tsx` → `src/App.vue`

### 保持不变的文件
- [ ] `src/types/index.ts` (类型定义)
- [ ] `src/data/mockData.ts` (模拟数据)
- [ ] `src/index.css` (样式文件)
- [ ] `tailwind.config.js` (Tailwind 配置)

---

## 🔄 代码转换检查

### Hooks 转换
- [ ] 所有 `useState` 转换为 `ref` 或 `reactive`
- [ ] 所有 `useEffect` 转换为 `watch` 或 `watchEffect`
- [ ] 所有 `useMemo` 转换为 `computed`
- [ ] 所有 `useCallback` 转换为普通函数或 `computed`
- [ ] 所有 `useContext` 转换为 `inject` 或 Pinia store
- [ ] 所有 `useRef` 转换为 `ref`

### 事件处理转换
- [ ] 所有 `onClick` 转换为 `@click`
- [ ] 所有 `onChange` 转换为 `@change` 或 `v-model`
- [ ] 所有 `onSubmit` 转换为 `@submit`
- [ ] 所有事件处理器参数正确传递

### 条件渲染转换
- [ ] 所有 `{condition && <Component />}` 转换为 `<Component v-if="condition" />`
- [ ] 所有三元表达式转换为 `v-if/v-else`
- [ ] 所有 `map` 循环转换为 `v-for`

### Props 和 Emits
- [ ] 所有组件 Props 使用 `defineProps<Props>()`
- [ ] 所有事件使用 `defineEmits<Emits>()`
- [ ] Props 传递使用 `:prop="value"`
- [ ] 事件监听使用 `@event="handler"`

### 图标库转换
- [ ] 所有 `lucide-react` 导入替换为 `lucide-vue-next`
- [ ] 所有图标组件 `size={20}` 替换为 `:size="20"`
- [ ] 所有图标组件正确渲染

### 样式类转换
- [ ] 所有 `className` 替换为 `class`
- [ ] 所有动态类使用 `:class` 绑定
- [ ] Tailwind CSS 类保持不变

---

## 🧪 功能测试清单

### Dashboard 页面
- [ ] KPI 卡片正常显示
- [ ] 项目作业全景表正常显示
- [ ] 风险雷达正常显示
- [ ] 所有数据正常加载

### 项目列表页面
- [ ] 项目列表正常显示
- [ ] 搜索功能正常
- [ ] 筛选功能正常
- [ ] 项目卡片点击正常
- [ ] 新建项目功能正常

### 项目作业台
- [ ] 步骤导航器正常显示
- [ ] 步骤切换正常
- [ ] SetupStep: 表单验证正常
- [ ] SetupStep: 行业选择正常
- [ ] InventoryStep: 方案选择正常
- [ ] InventoryStep: 文件上传正常
- [ ] InventoryStep: 结果表格正常
- [ ] InventoryStep: 排序功能正常
- [ ] ContextStep: 表单填写正常
- [ ] ContextStep: 场景添加正常
- [ ] ValueStep: 场景显示正常
- [ ] ValueStep: 场景选择正常
- [ ] DeliveryStep: 交付物列表正常
- [ ] DeliveryStep: 下载功能正常

### 通用功能
- [ ] Toast 通知正常显示
- [ ] Toast 自动关闭正常
- [ ] 演示模式切换正常
- [ ] 侧边栏导航正常
- [ ] 响应式布局正常
- [ ] 移动端适配正常

---

## 🐛 错误检查

### 编译错误
- [ ] 运行 `npm run dev` 无编译错误
- [ ] 运行 `npm run build` 无构建错误
- [ ] 运行 `npm run type-check` 无类型错误

### 运行时错误
- [ ] 浏览器控制台无错误
- [ ] 所有页面正常加载
- [ ] 所有交互正常响应

### 类型错误
- [ ] 所有 TypeScript 类型正确
- [ ] 所有组件 Props 类型正确
- [ ] 所有事件类型正确

---

## 📊 性能检查

### 加载性能
- [ ] 首屏加载时间 ≤ 2s
- [ ] 页面切换流畅
- [ ] 无长时间阻塞

### 运行时性能
- [ ] 大数据量表格渲染正常
- [ ] 无内存泄漏
- [ ] 无不必要的重渲染

---

## 🧹 清理工作

### 删除旧文件
- [ ] 删除所有 `.tsx` 文件
- [ ] 删除 `src/contexts/` 目录（如果不再需要）
- [ ] 删除 React 相关配置文件

### 更新文档
- [ ] 更新 README.md
- [ ] 更新技术栈说明
- [ ] 更新开发指南
- [ ] 更新部署文档

### Git 提交
- [ ] 提交所有更改
- [ ] 编写详细的提交信息
- [ ] 创建 Pull Request（如适用）

---

## ✅ 最终验收

### 功能完整性
- [ ] 所有功能正常工作
- [ ] 所有交互行为一致
- [ ] 所有样式保持一致

### 代码质量
- [ ] 代码符合 Vue 3 最佳实践
- [ ] 无 ESLint 错误
- [ ] 无 TypeScript 错误
- [ ] 代码注释完整

### 文档完整性
- [ ] README 已更新
- [ ] 迁移文档完整
- [ ] 代码注释清晰

---

## 📝 备注

在迁移过程中遇到的问题和解决方案：

1. 
2. 
3. 

---

**迁移完成日期**: _______________

**迁移负责人**: _______________

**审核人**: _______________