203 lines
6.6 KiB
Markdown
203 lines
6.6 KiB
Markdown
# 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 数据升级而提前制造无效改动
|