192 lines
6.2 KiB
Markdown
192 lines
6.2 KiB
Markdown
# LSFX Mock LogId Primary Binding 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:** 在不改动现有前端业务代码的前提下，验证项目详情相关页面在接入更新后的 LSFX Mock 后，能够稳定展示同一 `logId` 下统一的本方主体与本方账号。
|
|
|
|
**Architecture:** 本期前端仍以联调验证为主，不预设 Vue 代码改造；通过联调记录、构建验证和页面手工检查，确认上传链路返回的主体账号与流水明细展示保持一致；只有在联调中暴露真实展示问题时，才拆出单独前端修复需求。
|
|
|
|
**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-logid-primary-binding-frontend-verification.md`
|
|
|
|
- [ ] **Step 1: Write the verification record skeleton**
|
|
|
|
先创建联调记录文件，明确本次验证重点是“同一 `logId` 主体账号一致性”：
|
|
|
|
```markdown
|
|
# LSFX Mock LogId 主体账号前端联调记录
|
|
|
|
## 验证范围
|
|
- 上传返回的主体与账号
|
|
- 流水明细中的本方主体与账号
|
|
- 同一 logId 跨分页一致性
|
|
|
|
## 验证结果
|
|
- [ ] 上传返回存在主体账号
|
|
- [ ] 流水明细可见统一主体账号
|
|
- [ ] 翻页后主体账号不变化
|
|
```
|
|
|
|
- [ ] **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**
|
|
|
|
本任务只建立联调记录，不修改前端业务代码。
|
|
|
|
- [ ] **Step 4: Commit**
|
|
|
|
```bash
|
|
git add docs/tests/records/2026-03-18-lsfx-logid-primary-binding-frontend-verification.md
|
|
git commit -m "新增Mock主体账号绑定前端联调记录模板"
|
|
```
|
|
|
|
### Task 2: 完成前端构建与入口冒烟
|
|
|
|
**Files:**
|
|
- Modify: `docs/tests/records/2026-03-18-lsfx-logid-primary-binding-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**
|
|
|
|
手工验证以下入口：
|
|
|
|
- 项目详情页可打开
|
|
- “上传数据”页签可打开
|
|
- “流水明细查询”页签可打开
|
|
- “拉取本行信息”相关交互仍可进入
|
|
|
|
- [ ] **Step 3: Update verification notes**
|
|
|
|
把构建结果和入口冒烟结果写入联调记录。
|
|
|
|
- [ ] **Step 4: Commit**
|
|
|
|
```bash
|
|
git add docs/tests/records/2026-03-18-lsfx-logid-primary-binding-frontend-verification.md
|
|
git commit -m "记录Mock主体账号绑定前端构建与入口验证"
|
|
```
|
|
|
|
### Task 3: 验证上传结果与流水明细中的主体账号一致性
|
|
|
|
**Files:**
|
|
- Modify: `docs/tests/records/2026-03-18-lsfx-logid-primary-binding-frontend-verification.md`
|
|
- Verify: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
|
|
- Verify: `ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue`
|
|
|
|
- [ ] **Step 1: Prepare the manual verification checklist**
|
|
|
|
围绕同一 `logId`，记录以下检查点：
|
|
|
|
- 上传返回中是否能看到本方主体和本方账号
|
|
- 进入流水明细后，本方主体是否与上传返回一致
|
|
- 本方账号是否与上传返回一致
|
|
- 翻页后本方主体和账号是否仍一致
|
|
|
|
- [ ] **Step 2: Run manual verification against updated Mock**
|
|
|
|
建议联调步骤：
|
|
|
|
1. 启动前端、后端、`lsfx-mock-server`
|
|
2. 在项目详情页执行上传文件或拉取本行信息
|
|
3. 记下返回的 `logId`、本方主体、本方账号
|
|
4. 打开同一 `logId` 对应的流水明细
|
|
5. 验证列表首屏和翻页后的主体账号是否一致
|
|
|
|
- [ ] **Step 3: Record actual UI results**
|
|
|
|
在联调记录中按以下格式记录：
|
|
|
|
```markdown
|
|
- `logId=xxxxx`
|
|
- 上传返回主体：`测试主体A`
|
|
- 上传返回账号：`6222...`
|
|
- 明细页主体：`测试主体A`
|
|
- 明细页账号：`6222...`
|
|
- 翻页后是否一致：是 / 否
|
|
```
|
|
|
|
- [ ] **Step 4: Commit**
|
|
|
|
```bash
|
|
git add docs/tests/records/2026-03-18-lsfx-logid-primary-binding-frontend-verification.md
|
|
git commit -m "记录Mock主体账号绑定前端联调结果"
|
|
```
|
|
|
|
### Task 4: 收敛前端结论并清理验证进程
|
|
|
|
**Files:**
|
|
- Modify: `docs/tests/records/2026-03-18-lsfx-logid-primary-binding-frontend-verification.md`
|
|
- Modify: `docs/plans/frontend/2026-03-18-lsfx-logid-primary-binding-frontend-implementation.md`
|
|
|
|
- [ ] **Step 1: Summarize whether frontend code changes are required**
|
|
|
|
在联调记录末尾输出最终结论：
|
|
|
|
- 若上传返回和流水明细中的主体账号一致，则结论为“本期前端零代码改动”
|
|
- 若存在显示缺口，则明确是接口字段问题还是页面渲染问题
|
|
|
|
- [ ] **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-logid-primary-binding-frontend-verification.md docs/plans/frontend/2026-03-18-lsfx-logid-primary-binding-frontend-implementation.md
|
|
git commit -m "补充Mock主体账号绑定前端联调结论"
|
|
```
|
|
|
|
## Frontend Integration Conclusion
|
|
|
|
本计划的默认结论是“先联调验证，再决定是否需要前端修复”：
|
|
|
|
- 这次主改动仍在 `lsfx-mock-server`
|
|
- 前端重点验证同一 `logId` 主体账号的一致性展示
|
|
- 若页面已能正确展示，则本期不需要前端代码改造
|