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

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