ccdi/docs/plans/frontend/2026-03-18-lsfx-logid-primary-binding-frontend-implementation.md

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 主体账号一致性”：

# LSFX Mock LogId 主体账号前端联调记录

## 验证范围
- 上传返回的主体与账号
- 流水明细中的本方主体与账号
- 同一 logId 跨分页一致性

## 验证结果
- [ ] 上传返回存在主体账号
- [ ] 流水明细可见统一主体账号
- [ ] 翻页后主体账号不变化

• 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

本任务只建立联调记录，不修改前端业务代码。

• Step 4: Commit

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:

cd ruoyi-ui
npm run build:prod

Expected:

• 构建成功

• 说明本次 Mock 变化不会强制前端源码同步改动

• Step 2: Run route-level smoke check

手工验证以下入口：

• 项目详情页可打开

• “上传数据”页签可打开

• “流水明细查询”页签可打开

• “拉取本行信息”相关交互仍可进入

• Step 3: Update verification notes

把构建结果和入口冒烟结果写入联调记录。

• Step 4: Commit

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

在联调记录中按以下格式记录：

- `logId=xxxxx`
  - 上传返回主体：`测试主体A`
  - 上传返回账号：`6222...`
  - 明细页主体：`测试主体A`
  - 明细页账号：`6222...`
  - 翻页后是否一致：是 / 否

• Step 4: Commit

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

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 主体账号的一致性展示
• 若页面已能正确展示，则本期不需要前端代码改造