新增上传数据页轻改版实施计划
This commit is contained in:
@@ -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，提交信息为中文且仅包含本次前端改动。
|
||||
Reference in New Issue
Block a user