feat: Features架构迁移 - P0和P1部分完成
## 完成的工作 ### 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>
This commit is contained in:
yml2213
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
10acca637e
commit
b5903a169f
@@ -0,0 +1,194 @@
|
||||
# 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小时
|
||||
Reference in New Issue
Block a user