yml2213andClaude Opus 4.7
b5903a169f
## 完成的工作 ### P0: 基础设施准备 - 创建 features/ 和 shared/ 目录结构 - 迁移共享资源：API基础设施、工具函数、类型定义 - 迁移通用composables：useMoney, useSmsCountdown, usePricingCalculator - 迁移全局样式文件 - 建立模块化导出系统 ### P1.1: 钱包模块 (wallet) - 迁移 API: wallet.ts - 迁移 Views: WalletView.vue - 新增 Composable: useWallet.ts (封装钱包状态管理) - 更新导入路径到 shared/ ### P1.2: 聊天模块 (chats) - 迁移 API: chats.ts - 迁移 Views: ChatView, MessagesView (桌面+移动) - 迁移 Composables: useChatSSE.ts - 迁移 Components: ChatAttachmentImage.vue - 更新导入路径到 shared/ ## 技术改进 - 修复 shared/composables 导出问题 (default → 命名导出) - 修复 shared/api/client.ts 类型导入路径 - 建立清晰的模块边界和导出规范 ## 文档 - 添加完整的迁移计划文档 - 添加进度跟踪文档 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
195 lines
5.6 KiB
Markdown
195 lines
5.6 KiB
Markdown
# Features 架构迁移进度报告
|
||
|
||
**日期：** 2026-06-04
|
||
**分支：** refactor/features-architecture
|
||
**状态：** 进行中
|
||
|
||
---
|
||
|
||
## 已完成的工作
|
||
|
||
### ✅ P0: 基础设施准备
|
||
创建了新的目录结构并迁移共享资源：
|
||
|
||
```
|
||
frontend/src/
|
||
├── features/ # 新：业务模块目录
|
||
├── shared/ # 新：共享资源层
|
||
│ ├── api/ # API 基础设施 (client.ts)
|
||
│ ├── composables/ # 通用组合函数 (useMoney, useSmsCountdown, usePricingCalculator)
|
||
│ ├── components/ # 共享组件
|
||
│ ├── utils/ # 工具函数 (8个文件)
|
||
│ ├── types/ # 全局类型定义
|
||
│ └── styles/ # 全局样式 (5个CSS文件)
|
||
```
|
||
|
||
**文件统计：**
|
||
- shared/ 目录：22个文件
|
||
- 已建立模块化导出系统 (index.ts)
|
||
|
||
---
|
||
|
||
### ✅ P1.1: 钱包模块（wallet）
|
||
完整迁移钱包模块到 `features/wallet/`：
|
||
|
||
```
|
||
features/wallet/
|
||
├── api/
|
||
│ └── wallet.ts # 钱包 API (5个函数)
|
||
├── composables/
|
||
│ └── useWallet.ts # 新：钱包状态管理 composable
|
||
├── views/
|
||
│ └── WalletView.vue # 用户钱包页面
|
||
├── types.ts # 模块类型定义
|
||
└── index.ts # 模块统一导出
|
||
```
|
||
|
||
**功能：**
|
||
- 余额查询、充值、账单明细
|
||
- 支付订单、结算金额
|
||
- 管理员资金账本
|
||
|
||
**已修复：**
|
||
- ✅ 更新导入路径到 `@/shared/`
|
||
- ✅ 类型依赖正确引用
|
||
|
||
---
|
||
|
||
### ✅ P1.2: 聊天模块（chats）
|
||
完整迁移聊天模块到 `features/chats/`：
|
||
|
||
```
|
||
features/chats/
|
||
├── api/
|
||
│ └── chats.ts # 聊天 API
|
||
├── components/
|
||
│ └── ChatAttachmentImage.vue # 聊天附件组件
|
||
├── composables/
|
||
│ └── useChatSSE.ts # SSE 实时连接
|
||
├── views/
|
||
│ ├── ChatView.vue # 桌面端聊天页
|
||
│ ├── MessagesView.vue # 消息列表
|
||
│ ├── MobileChatView.vue # 移动端聊天
|
||
│ └── MobileMessagesView.vue # 移动端消息列表
|
||
└── index.ts # 模块统一导出
|
||
```
|
||
|
||
**功能：**
|
||
- 买卖双方沟通
|
||
- 端到端聊天、附件支持
|
||
- 实时消息推送（SSE）
|
||
- 管理员聊天转接、快速回复
|
||
|
||
**已修复：**
|
||
- ✅ 更新导入路径到 `@/shared/`
|
||
|
||
---
|
||
|
||
## 当前存在的类型错误
|
||
|
||
运行 `npm run typecheck` 发现以下问题（需要在后续修复）：
|
||
|
||
### 1. 测试文件缺少依赖
|
||
```
|
||
src/composables/home/__tests__/*.spec.ts - 缺少 vitest
|
||
```
|
||
**解决方案：** 安装 vitest 或暂时忽略
|
||
|
||
### 2. 订单模块类型错误
|
||
```
|
||
src/composables/order/useOrderDetail.ts - evidence 属性不存在
|
||
src/composables/order/useOrderSnapshot.ts - listing_snapshot 属性不存在
|
||
```
|
||
**解决方案：** 在迁移订单模块时统一修复
|
||
|
||
### 3. Shared 导出问题
|
||
- ✅ 已修复：shared/composables/index.ts 的 default 导出改为命名导出
|
||
- ✅ 已修复：shared/api/client.ts 导入路径
|
||
|
||
### 4. 第三方库缺失
|
||
```
|
||
views/account/OrderDetailView.vue - 缺少 qrcode 类型
|
||
```
|
||
**解决方案：** `npm install @types/qrcode` (已在 package.json 中)
|
||
|
||
---
|
||
|
||
## 下一步工作
|
||
|
||
### 🔄 P1.3: 订单模块（orders）- 待开始
|
||
这是最复杂的模块，需要：
|
||
|
||
1. **拆分 useOrderDetail.ts**（当前混合了多个领域）
|
||
- 提取支付轮询逻辑 → `usePaymentPolling.ts`
|
||
- 提取结算逻辑 → `useSettlement.ts`
|
||
- 保留核心订单逻辑
|
||
|
||
2. **迁移文件**
|
||
- API: `api/orders.ts`
|
||
- Views: 8个页面（桌面3个 + 移动3个 + 管理2个）
|
||
- Composables: `order/useOrderDetail.ts`, `order/useOrderSnapshot.ts`
|
||
- Components: 订单卡片、状态徽章、支付二维码等
|
||
|
||
3. **修复类型错误**
|
||
- 补充 Order 接口中缺失的属性
|
||
- 修复 evidence、listing_snapshot、checkout_info、counter_info
|
||
|
||
---
|
||
|
||
## 文件移动统计
|
||
|
||
| 模块 | 状态 | API | Views | Composables | Components |
|
||
|------|------|-----|-------|-------------|------------|
|
||
| shared | ✅ | 1 | 0 | 3 | 2 |
|
||
| wallet | ✅ | 1 | 1 | 1 | 0 |
|
||
| chats | ✅ | 1 | 4 | 1 | 1 |
|
||
| orders | 🔄 | 待迁移 | 8 | 2 | 多个 |
|
||
| listings | ⏸️ | - | - | - | - |
|
||
| auth | ⏸️ | - | - | - | - |
|
||
| seller | ⏸️ | - | - | - | - |
|
||
| disputes | ⏸️ | - | - | - | - |
|
||
| admin | ⏸️ | - | - | - | - |
|
||
|
||
---
|
||
|
||
## 风险与注意事项
|
||
|
||
### ⚠️ 已发现的风险
|
||
1. **订单模块复杂度高：** useOrderDetail.ts 混合了多个业务领域，需要谨慎拆分
|
||
2. **类型错误积累：** 订单相关的类型定义不完整，需要补充
|
||
3. **移动端路由：** 需要同步更新路由配置
|
||
|
||
### ✅ 已缓解的风险
|
||
- 共享资源已成功提取到 shared/ 目录
|
||
- 钱包和聊天模块迁移顺利，验证了迁移方案可行性
|
||
- 建立了模块化导出体系
|
||
|
||
---
|
||
|
||
## 验证清单
|
||
|
||
### 每个模块完成后：
|
||
- [x] 钱包模块：文件已迁移，导入路径已修复
|
||
- [x] 聊天模块：文件已迁移，导入路径已修复
|
||
- [ ] 运行 `npm run typecheck` - 有既存错误，待订单模块时统一修复
|
||
- [ ] 运行 `npm run dev` - 待验证
|
||
- [ ] 测试页面功能 - 待验证
|
||
|
||
---
|
||
|
||
## 技术债务
|
||
|
||
1. **测试覆盖不足：** 缺少单元测试，依赖 vitest
|
||
2. **类型定义不完整：** Order 接口缺少多个属性
|
||
3. **兼容层未建立：** 旧路径的 re-export 尚未创建（如需要）
|
||
|
||
---
|
||
|
||
**下次继续：** 迁移订单模块，这是 P1 阶段的最后一个模块，也是最复杂的一个。
|
||
|
||
**预计剩余工作量：**
|
||
- P1 订单模块：4小时
|
||
- P2 模块（listings, auth）：6小时
|
||
- P3 模块（seller, disputes, admin）：7小时
|
||
- 总计：~17小时
|