## 前端核心组件与交互

- **DDS-Section**: 12.2 页面职责与交互说明
- **DDS-Lines**: L1489-L1572

### Extract

#### 核心可复用组件

| 组件 | 文件 | 用途 |
|------|------|------|
| 文件上传器 | `FileUploader.vue` | 拖拽 + 点击上传，进度条，平台自动检测 |
| 交易表格 | `TransactionTable.vue` | `v-data-table` + 行展开 + 批量操作 |
| 规则编辑器 | `RuleEditor.vue` | 条件构建器 + 动作配置 + 测试预览 |
| 去重对比 | `DedupCompare.vue` | 左右分栏对比 + 评分因子 + 差异高亮 |
| 审计时间线 | `AuditTimeline.vue` | `v-timeline` + 快照展开 |

#### 1. FileUploader.vue

- 使用 Vuetify `v-file-input` + 自定义拖拽区域
- 文件选择后立即调用 `POST /api/v1/import/batches`
- 上传进度条实时展示
- 自动检测文件来源平台，允许手动修改
- 批量文件列表显示文件名、大小、检测到的平台

#### 2. TransactionTable.vue

- 使用 Vuetify `v-data-table` 实现分页排序
- 行展开（`expanded`）显示详情面板：原始字段 vs 标准字段对比
- 规则命中说明显示该条交易命中的具体规则
- 状态标记：以颜色标签区分 待清洗/已清洗/重复/待确认
- 筛选器：支持按来源平台、分类、方向、状态过滤
- 必须 `fixed-header` + 列宽显式指定

#### 3. DedupCompare.vue

- 左右分栏对比布局
- 差异字段高亮显示
- 评分因子可展开查看（6 项因子各自得分）
- 操作按钮：确认合并 / 拒绝合并 / 暂时跳过
- 链路视图展示已识别的转账闭环和订单链路

#### 4. RuleEditor.vue

- 条件构建器：支持多条件 AND/OR 组合
- 使用 Vuetify `v-select`、`v-text-field`、`v-chip` 构建
- 按类型分组展示规则列表，支持拖拽排序优先级
- 测试按钮触发 `POST /api/v1/rules/:id/test`
- 启用/禁用一键切换

#### 5. AuditTimeline.vue

- 使用 Vuetify `v-timeline` 组件
- 每个节点可展开查看详细快照数据
- 处理链路：原始文件 → 原始记录 → 标准化 → 规则命中 → 导入结果

#### Pinia Store 清单

| Store | 文件 | 管理的状态 |
|-------|------|-----------|
| Import Store | `importStore.ts` | 批次列表、上传状态、处理进度 |
| Transaction Store | `transactionStore.ts` | 交易记录分页、筛选条件、详情 |
| Rule Store | `ruleStore.ts` | 规则列表、编辑表单、测试结果 |

#### API 模块清单

| 模块 | 文件 | 封装的 API 组 |
|------|------|-------------|
| Import API | `api/import.ts` | 批次上传、列表、详情、处理 |
| Transaction API | `api/transaction.ts` | 交易查询、详情、链路 |
| Dedup API | `api/dedup.ts` | 去重列表、确认、拒绝 |
| Rule API | `api/rule.ts` | 规则 CRUD、测试、评估 |
| Export API | `api/export.ts` | 导入任务、重试、CSV 导出 |
| Audit API | `api/audit.ts` | 审计日志查询 |

#### TypeScript 类型清单

| 文件 | 定义的类型 |
|------|-----------|
| `types/transaction.ts` | Transaction, Direction, TransactionStatus, RawRecord |
| `types/rule.ts` | Rule, RuleType, RuleCondition, RuleHit |
| `types/common.ts` | Response, PageResponse, ImportBatch, SourceFile, ImportTask |
