新增上传数据页轻改版实施计划

2026-03-25 14:03:44 +08:00
parent b14eef8482
commit 137d6630fe
3 changed files with 474 additions and 0 deletions
--- a/docs/plans/backend/2026-03-25-project-upload-page-light-redesign-backend-implementation.md
+++ b/docs/plans/backend/2026-03-25-project-upload-page-light-redesign-backend-implementation.md
@@ -0,0 +1,148 @@
+# Project Upload Page Light Redesign Backend Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 对“上传数据”页轻改版完成后端影响面确认，明确本次需求仅涉及前端结构与样式调整，后端接口、服务实现和数据库均无需改动。
+
+**Architecture:** 该需求只移动前端按钮入口并删除前端上传卡片展示，不改变 `/ccdi/file-upload/*` 相关接口调用方式。后端工作聚焦在现有上传链路能力确认、必要的定向测试复核以及实施记录沉淀，避免误改 Java 或 SQL。
+
+**Tech Stack:** Spring Boot 3, Java 21, Maven, SQL/接口检视, 文档记录
+
+---
+
+## 文件结构与职责
+
+**修改文件**
+
+- `docs/reports/implementation/2026-03-25-project-upload-page-light-redesign-backend-record.md`
+  记录本次后端影响评估、验证命令与“无需代码改动”的结论。
+
+**参考文件**
+
+- `docs/superpowers/specs/2026-03-25-project-upload-page-light-redesign-design.md`
+- `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiFileUploadController.java`
+- `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiFileUploadServiceImpl.java`
+- `ccdi-project/src/test/java/com/ruoyi/ccdi/project/controller/CcdiFileUploadControllerTest.java`
+- `ccdi-project/src/test/java/com/ruoyi/ccdi/project/service/impl/CcdiFileUploadServiceImplTest.java`
+
+## Task 1: 确认本次需求不触达后端契约
+
+**Files:**
+- Review: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiFileUploadController.java`
+- Review: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiFileUploadServiceImpl.java`
+
+- [ ] **Step 1: 检查上传页依赖的后端接口已完整存在**
+
+Run:
+
+```bash
+rg -n "/ccdi/file-upload|parse-id-card-file|pull-bank-info|statistics/\\{projectId\\}" \
+  ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiFileUploadController.java
+```
+
+Expected:
+
+- PASS，能看到批量上传、身份证解析、拉取本行信息、统计查询等接口均已存在。
+
+- [ ] **Step 2: 检查服务层无需因 UI 轻改版而变更**
+
+Run:
+
+```bash
+rg -n "batchUploadFiles|parseIdCardFile|submitPullBankInfo|countByStatus|deleteFileUploadRecord" \
+  ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiFileUploadServiceImpl.java
+```
+
+Expected:
+
+- PASS，现有服务方法已覆盖上传页所有动作，本次不需要新增 service、mapper 或 DTO。
+
+- [ ] **Step 3: 明确后端无改造结论**
+
+结论必须覆盖：
+
+```text
+1. “上传流水”只是前端入口从卡片移动到头部，不改变请求目标
+2. “查看报告”“拉取本行信息”“征信导入”均复用现有链路
+3. 本次无需新增或修改 controller、service、mapper、SQL、菜单数据
+```
+
+## Task 2: 做定向测试复核，确认现有上传链路稳定
+
+**Files:**
+- Test: `ccdi-project/src/test/java/com/ruoyi/ccdi/project/controller/CcdiFileUploadControllerTest.java`
+- Test: `ccdi-project/src/test/java/com/ruoyi/ccdi/project/service/impl/CcdiFileUploadServiceImplTest.java`
+
+- [ ] **Step 1: 运行上传链路相关后端测试**
+
+Run:
+
+```bash
+mvn -pl ccdi-project -Dtest=CcdiFileUploadControllerTest,CcdiFileUploadServiceImplTest test
+```
+
+Expected:
+
+- PASS，说明上传、解析、拉取和统计相关后端能力保持可用。
+
+- [ ] **Step 2: 记录无源码改动的验证口径**
+
+补充说明：
+
+```text
+1. 本次后端验证的目标是确认“无需改动”而不是产出新功能
+2. 若测试失败，先确认是否为历史问题，不要为配合前端样式调整而擅自改后端
+```
+
+## Task 3: 补后端实施记录并提交
+
+**Files:**
+- Create: `docs/reports/implementation/2026-03-25-project-upload-page-light-redesign-backend-record.md`
+
+- [ ] **Step 1: 新增后端实施记录**
+
+记录以下内容：
+
+```markdown
+# 上传数据页轻改版后端实施记录
+
+## 结论
+- 本次需求仅调整前端页面结构与样式
+- 上传相关后端接口、服务与数据库结构保持不变
+- 后端仅完成影响面确认与定向测试复核
+
+## 检查范围
+- CcdiFileUploadController
+- CcdiFileUploadServiceImpl
+- 上传链路相关单元测试
+
+## 验证
+- rg -n "/ccdi/file-upload|parse-id-card-file|pull-bank-info|statistics/\\{projectId\\}" ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiFileUploadController.java
+- rg -n "batchUploadFiles|parseIdCardFile|submitPullBankInfo|countByStatus|deleteFileUploadRecord" ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiFileUploadServiceImpl.java
+- mvn -pl ccdi-project -Dtest=CcdiFileUploadControllerTest,CcdiFileUploadServiceImplTest test
+```
+
+- [ ] **Step 2: 复核暂存区仅包含后端记录文件**
+
+Run:
+
+```bash
+git status --short
+```
+
+Expected:
+
+- 后端计划执行阶段不应带入任何 Java、SQL 或无关文档改动。
+
+- [ ] **Step 3: 提交后端记录**
+
+Run:
+
+```bash
+git add docs/reports/implementation/2026-03-25-project-upload-page-light-redesign-backend-record.md
+git commit -m "补充上传数据页轻改版后端记录"
+```
+
+Expected:
+
+- PASS，提交仅包含后端影响确认记录，且提交信息为中文。
--- a/docs/plans/frontend/2026-03-25-project-upload-page-light-redesign-frontend-implementation.md
+++ b/docs/plans/frontend/2026-03-25-project-upload-page-light-redesign-frontend-implementation.md
@@ -0,0 +1,309 @@
+# Project Upload Page Light Redesign Frontend Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 将项目详情“上传数据”页调整为极简工作台布局，移除上传流水卡片，把“上传流水”作为右上角唯一主按钮，并保持现有上传弹窗与列表链路不变。
+
+**Architecture:** 仅改 `UploadData.vue` 的模板结构、局部状态清理和样式表达，不改接口调用、不改业务判断、不改弹窗链路。先更新前端源码契约测试锁定目标布局，再做组件实现，最后补实施记录并完成回归验证。
+
+**Tech Stack:** Vue 2, Element UI, SCSS, Node.js 源码契约测试
+
+---
+
+## 文件结构与职责
+
+**修改文件**
+
+- `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
+  移除上传卡片结构，把上传流水入口并入头部按钮组，清理仅服务于卡片展示的状态与方法，重写头部和表格工作区样式。
+- `ruoyi-ui/tests/unit/upload-data-header-import-button.test.js`
+  将头部按钮顺序和主次样式的源码契约改为新布局目标。
+- `ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js`
+  将“卡片禁用”契约调整为“头部上传按钮禁用 + 卡片逻辑已清理”的新契约。
+- `docs/reports/implementation/2026-03-25-project-upload-page-light-redesign-frontend-record.md`
+  记录本次前端实施内容、验证命令和结果。
+
+**参考文件**
+
+- `docs/superpowers/specs/2026-03-25-project-upload-page-light-redesign-design.md`
+- `ruoyi-ui/tests/unit/upload-data-batch-upload.test.js`
+- `ruoyi-ui/tests/unit/upload-data-file-list-table.test.js`
+- `ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js`
+
+## Task 1: 先把源码契约改成目标布局
+
+**Files:**
+- Modify: `ruoyi-ui/tests/unit/upload-data-header-import-button.test.js`
+- Modify: `ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js`
+- Test: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
+
+- [ ] **Step 1: 改写头部按钮顺序测试为新目标**
+
+在 `ruoyi-ui/tests/unit/upload-data-header-import-button.test.js` 中，把原有“查看报告优先、保留上传卡片”的断言改为以下目标：
+
+```javascript
+assert(
+  /<div class="header-actions">[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>[\s\S]*?@click="handleViewReport"[\s\S]*?>\s*查看报告\s*<\/el-button>[\s\S]*?@click="handleFetchBankInfo"[\s\S]*?>\s*拉取本行信息\s*<\/el-button>[\s\S]*?@click="handleGoCreditInfoPage"[\s\S]*?>\s*征信导入\s*<\/el-button>/.test(
+    source
+  ),
+  "页面右上角按钮顺序应为上传流水、查看报告、拉取本行信息、征信导入"
+);
+
+assert(
+  /<el-button[\s\S]*?type="primary"[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>/.test(
+    source
+  ),
+  "上传流水按钮应为头部唯一主按钮"
+);
+
+assert(
+  !/uploadCards:/.test(source) && !/class="upload-cards"/.test(source),
+  "上传卡片数据和模板应已清理"
+);
+```
+
+- [ ] **Step 2: 改写禁用态测试到头部主按钮**
+
+把 `ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js` 的断言改为校验：
+
+```javascript
+assert(
+  /<el-button[\s\S]*?:disabled="isProjectTagging \|\| isProjectArchived"[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>/.test(
+    source
+  ),
+  "头部上传流水按钮应在项目打标中或已归档时禁用"
+);
+
+[
+  "uploadCards:",
+  "syncUploadCardDisabledState()",
+  "handleUploadClick(key)",
+  "class=\"upload-section\"",
+].forEach((token) => {
+  assert(!source.includes(token), `旧上传卡片逻辑未清理: ${token}`);
+});
+```
+
+- [ ] **Step 3: 运行测试确认当前实现尚未满足**
+
+Run:
+
+```bash
+node ruoyi-ui/tests/unit/upload-data-header-import-button.test.js
+node ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js
+```
+
+Expected:
+
+- FAIL，证明当前页面仍保留旧上传卡片结构，尚未完成轻改版。
+
+## Task 2: 实现头部主按钮和页面结构收束
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
+- Test: `ruoyi-ui/tests/unit/upload-data-header-import-button.test.js`
+- Test: `ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js`
+
+- [ ] **Step 1: 在头部按钮组最前加入上传流水主按钮**
+
+在 `header-actions` 中新增并前置按钮：
+
+```vue
+<el-button
+  size="small"
+  type="primary"
+  icon="el-icon-upload2"
+  :disabled="isProjectTagging || isProjectArchived"
+  @click="handleOpenBatchUploadDialog"
+>
+  上传流水
+</el-button>
+```
+
+保持其余按钮顺序为“查看报告 / 拉取本行信息 / 征信导入”。
+
+- [ ] **Step 2: 删除上传流水卡片模板区**
+
+移除以下模板块，不保留任何卡片容器：
+
+```vue
+<div class="upload-section">
+  <div class="upload-cards">
+    ...
+  </div>
+</div>
+```
+
+页面首屏在锁定提示之后直接进入记录表格区。
+
+- [ ] **Step 3: 清理仅服务于上传卡片的状态与方法**
+
+从 `UploadData.vue` 中删除或收敛以下内容：
+
+```javascript
+uploadStatusList: [],
+uploadCards: [...],
+metrics: [...],
+```
+
+```javascript
+loadInitialData() {}
+updateUploadCards() {}
+syncUploadCardDisabledState() {}
+updateQualityMetrics() {}
+handleUploadClick(key) {}
+```
+
+同步清理不再使用的 `getUploadStatus` import、相关 watcher、created/mounted 中仅服务于卡片逻辑的调用。
+
+- [ ] **Step 4: 用最小方法承接批量上传弹窗打开**
+
+新增专用方法，复用现有弹窗状态：
+
+```javascript
+handleOpenBatchUploadDialog() {
+  if (this.isProjectTagging || this.isProjectArchived) {
+    return;
+  }
+  this.batchUploadDialogVisible = true;
+  this.selectedFiles = [];
+}
+```
+
+不要改动 `handleBatchUpload()`、文件校验、轮询与列表刷新链路。
+
+- [ ] **Step 5: 重写头部和记录区样式，但不新增说明条**
+
+在 `scoped` 样式中完成以下调整：
+
+- 强化 `.content-header` 的整体感，让标题区与按钮区形成统一首屏
+- 删除 `.upload-section`、`.upload-cards`、`.upload-card` 相关样式
+- 提升 `.file-list-section` 的边框、圆角、留白和表格工作区完整度
+- 保持锁定提示为独立信息条，但控制视觉重量
+- 更新移动端布局，让按钮组换行后仍保持“上传流水”优先可见
+
+- [ ] **Step 6: 运行契约测试确认通过**
+
+Run:
+
+```bash
+node ruoyi-ui/tests/unit/upload-data-header-import-button.test.js
+node ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js
+```
+
+Expected:
+
+- PASS
+
+## Task 3: 做定向回归，确保弹窗与表格不回归
+
+**Files:**
+- Test: `ruoyi-ui/tests/unit/upload-data-batch-upload.test.js`
+- Test: `ruoyi-ui/tests/unit/upload-data-file-list-table.test.js`
+- Test: `ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js`
+
+- [ ] **Step 1: 回归批量上传弹窗结构**
+
+Run:
+
+```bash
+node ruoyi-ui/tests/unit/upload-data-batch-upload.test.js
+```
+
+Expected:
+
+- PASS，证明批量上传弹窗结构和限制文案未被破坏。
+
+- [ ] **Step 2: 回归上传记录表格结构**
+
+Run:
+
+```bash
+node ruoyi-ui/tests/unit/upload-data-file-list-table.test.js
+```
+
+Expected:
+
+- PASS，证明文件列表主要列和表格结构保持不变。
+
+- [ ] **Step 3: 回归征信导入入口仍为跳页**
+
+Run:
+
+```bash
+node ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js
+```
+
+Expected:
+
+- PASS，证明本次调整没有把“征信导入”入口改回本地弹窗。
+
+- [ ] **Step 4: 用源码检视确认旧卡片已彻底移除**
+
+Run:
+
+```bash
+rg -n "uploadCards|handleUploadClick|upload-section|upload-cards|upload-card" ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
+```
+
+Expected:
+
+- 无结果，或仅保留与本次新布局无关的注释清理提示；不应再残留旧卡片逻辑。
+
+## Task 4: 补前端实施记录并提交
+
+**Files:**
+- Create: `docs/reports/implementation/2026-03-25-project-upload-page-light-redesign-frontend-record.md`
+
+- [ ] **Step 1: 新增前端实施记录**
+
+记录以下内容：
+
+```markdown
+# 上传数据页轻改版前端实施记录
+
+## 本次改动
+- 移除上传数据页中的上传流水卡片
+- 将上传流水提升为右上角唯一主按钮
+- 统一头部、锁定提示和文件记录区视觉
+
+## 影响文件
+- ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
+- ruoyi-ui/tests/unit/upload-data-header-import-button.test.js
+- ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js
+
+## 验证
+- node ruoyi-ui/tests/unit/upload-data-header-import-button.test.js
+- node ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js
+- node ruoyi-ui/tests/unit/upload-data-batch-upload.test.js
+- node ruoyi-ui/tests/unit/upload-data-file-list-table.test.js
+- node ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js
+```
+
+- [ ] **Step 2: 复核暂存区只包含本次前端相关文件**
+
+Run:
+
+```bash
+git status --short
+```
+
+Expected:
+
+- 仅暂存本次前端轻改版相关文件；若出现无关文件，先移出暂存区。
+
+- [ ] **Step 3: 提交前端改动**
+
+Run:
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue \
+  ruoyi-ui/tests/unit/upload-data-header-import-button.test.js \
+  ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js \
+  docs/reports/implementation/2026-03-25-project-upload-page-light-redesign-frontend-record.md
+git commit -m "调整上传数据页轻改版前端实现"
+```
+
+Expected:
+
+- PASS，提交信息为中文且仅包含本次前端改动。
--- a/docs/reports/implementation/2026-03-25-project-upload-page-light-redesign-plan-record.md
+++ b/docs/reports/implementation/2026-03-25-project-upload-page-light-redesign-plan-record.md
@@ -0,0 +1,17 @@
+# 2026-03-25 上传数据页轻改版实施计划产出记录
+
+## 本次产出
+
+- 新增后端实施计划 `docs/plans/backend/2026-03-25-project-upload-page-light-redesign-backend-implementation.md`
+- 新增前端实施计划 `docs/plans/frontend/2026-03-25-project-upload-page-light-redesign-frontend-implementation.md`
+
+## 关键结论
+
+- 前端实施计划聚焦 `UploadData.vue` 的结构收束、头部主按钮调整、旧上传卡片逻辑清理和定向源码契约测试更新
+- 后端实施计划仅保留上传链路影响面确认、定向测试复核和实施记录沉淀，不新增接口或 SQL
+- 本次继续遵循“最短路径实现”，不增加统计块、提示条或其他超出需求范围的页面能力
+
+## 后续动作
+
+- 实现阶段优先执行前端实施计划
+- 后端按计划完成“无需改造”的验证与记录