ccdi/docs/plans/frontend/2026-03-18-lsfx-mock-large-transaction-frontend-implementation.md

# LSFX Mock Large Transaction Frontend Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 在不改动现有 Vue 页面业务逻辑的前提下，完成与 LSFX Mock 大额交易样本的前端联调验证，确保项目详情中的上传、拉取本行信息和流水明细查询页面能正常展示命中样本数据。

**Architecture:** 本期前端以联调验证为主，不预设页面代码改造；先锁定实际受影响的入口页面与 API，再通过构建、手工回归和验证记录确认现有组件能承接新的 Mock 流水样本；若联调中发现展示问题，再将问题回流到后端 Mock 数据字段层或单独前端修复需求。

**Tech Stack:** Vue 2, Element UI, Axios request wrapper, npm, Node

---

### Task 1: 固化联调入口与验证记录模板

**Files:**
- Verify: `ruoyi-ui/src/views/ccdiProject/detail.vue`
- Verify: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
- Verify: `ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue`
- Verify: `ruoyi-ui/src/api/ccdiProjectUpload.js`
- Create: `docs/tests/records/2026-03-18-lsfx-mock-large-transaction-frontend-verification.md`

- [ ] **Step 1: Write the verification record skeleton**

先创建前端联调记录，提前写好待验证项目：

```markdown
# LSFX Mock 大额交易前端联调记录

## 验证范围
- UploadData 拉取本行信息
- DetailQuery 流水明细查询
- 关键样本展示：房产首付、税款、现金存款、手机银行转账

## 验证结果
- [ ] 页面可打开
- [ ] 列表可分页
- [ ] 摘要和对手方可见
```

- [ ] **Step 2: Run path existence smoke check**

Run:

```bash
test -f ruoyi-ui/src/views/ccdiProject/detail.vue
test -f ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
test -f ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue
test -f ruoyi-ui/src/api/ccdiProjectUpload.js
```

Expected:

- 四条命令都返回成功

- [ ] **Step 3: Keep implementation minimal**

本任务不改动 Vue 代码，只建立联调记录文件并确认入口路径真实存在。

- [ ] **Step 4: Commit**

```bash
git add docs/tests/records/2026-03-18-lsfx-mock-large-transaction-frontend-verification.md
git commit -m "新增Mock大额交易前端联调记录模板"
```

### Task 2: 完成前端静态构建与入口冒烟

**Files:**
- Modify: `docs/tests/records/2026-03-18-lsfx-mock-large-transaction-frontend-verification.md`

- [ ] **Step 1: Run frontend build smoke check**

Run:

```bash
cd ruoyi-ui
npm run build:prod
```

Expected:

- 构建成功
- 说明本次 Mock 数据增强不会强制触发前端源码改动

- [ ] **Step 2: Run route-level smoke check**

手工验证以下入口：

- 项目详情页可打开
- “上传数据”页签可打开
- “流水明细查询”页签可打开
- “拉取本行信息”弹窗可打开

若要辅助定位，可在浏览器中重点观察：

- `ruoyi-ui/src/views/ccdiProject/detail.vue`
- `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
- `ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue`

- [ ] **Step 3: Update verification notes**

把构建结果和入口检查结果记入联调记录文件。

- [ ] **Step 4: Commit**

```bash
git add docs/tests/records/2026-03-18-lsfx-mock-large-transaction-frontend-verification.md
git commit -m "记录Mock大额交易前端构建与入口冒烟结果"
```

### Task 3: 使用新 Mock 样本验证流水明细展示

**Files:**
- Modify: `docs/tests/records/2026-03-18-lsfx-mock-large-transaction-frontend-verification.md`
- Verify: `ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue`
- Verify: `ruoyi-ui/src/api/ccdiProjectUpload.js`

- [ ] **Step 1: Prepare the manual verification checklist**

围绕新样本，准备以下查询口径：

- 搜索摘要 `首付款`
- 搜索摘要 `税款`
- 搜索摘要 `现金存款`
- 搜索摘要 `手机银行转账`
- 按金额倒序检查大额收入 / 大额支出是否展示正确

- [ ] **Step 2: Run manual verification against the updated Mock**

建议联调步骤：

1. 启动后端、前端、`lsfx-mock-server`
2. 在项目详情页执行上传或拉取本行信息
3. 打开“流水明细查询”页签
4. 通过关键词和排序验证新样本是否可见

重点观察字段：

- 交易日期
- 收入/支出金额
- 对手方名称
- 用户摘要

- [ ] **Step 3: Record the actual UI results**

把每一类样本是否能在页面上被找到写入联调记录，例如：

```markdown
- `购买房产首付款`：可见 / 不可见
- `个人所得税税款`：可见 / 不可见
- `柜面现金存款`：可见 / 不可见
- `手机银行转账`：可见 / 不可见
```

- [ ] **Step 4: Commit**

```bash
git add docs/tests/records/2026-03-18-lsfx-mock-large-transaction-frontend-verification.md
git commit -m "记录Mock大额交易流水前端明细联调结果"
```

### Task 4: 收敛前端结论并关闭验证进程

**Files:**
- Modify: `docs/tests/records/2026-03-18-lsfx-mock-large-transaction-frontend-verification.md`
- Modify: `docs/plans/frontend/2026-03-18-lsfx-mock-large-transaction-frontend-implementation.md`

- [ ] **Step 1: Summarize whether frontend code changes are required**

在联调记录末尾补最终结论：

- 若现有页面能正确展示新样本，则结论为“本期前端零代码改动”
- 若页面出现字段缺失或文案异常，明确问题是 Mock 字段问题还是页面展示问题

- [ ] **Step 2: Stop any started services**

若本任务启动过：

- `npm run dev`
- 后端 `mvn -pl ruoyi-admin spring-boot:run`
- Mock `python main.py` 或 `uvicorn main:app --reload --host 0.0.0.0 --port 8000`

必须在验证完成后主动关闭进程，避免残留端口占用。

- [ ] **Step 3: Keep implementation minimal**

除非联调明确暴露真实展示缺陷，否则不提前改动 `ruoyi-ui/src` 下业务代码。

- [ ] **Step 4: Commit**

```bash
git add docs/tests/records/2026-03-18-lsfx-mock-large-transaction-frontend-verification.md docs/plans/frontend/2026-03-18-lsfx-mock-large-transaction-frontend-implementation.md
git commit -m "补充Mock大额交易前端联调结论"
```

## Frontend Integration Conclusion

本计划默认结论是“先联调验证，再决定是否改前端代码”：

- 这次主变更在 `lsfx-mock-server`
- 前端优先验证现有页面是否已经能承接增强后的流水样本
- 只有在联调明确暴露展示问题时，才补独立前端修复任务，避免为了 Mock 数据升级而提前制造无效改动