wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7624a75dee138390bca5d5d06a24a3e715d11fde
ccdi/docs/plans/frontend/2026-03-18-lsfx-mock-large-transaction-frontend-implementation.md

6.6 KiB
Raw Blame History

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

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

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

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

## 验证结果
- [ ] 页面可打开
- [ ] 列表可分页
- [ ] 摘要和对手方可见
  • Step 2: Run path existence smoke check

Run:

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
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:

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
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

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

- `购买房产首付款`：可见 / 不可见
- `个人所得税税款`：可见 / 不可见
- `柜面现金存款`：可见 / 不可见
- `手机银行转账`：可见 / 不可见
  • Step 4: Commit
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
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 数据升级而提前制造无效改动
Reference in New Issue View Git Blame Copy Permalink