8.7 KiB
项目上传数据页轻改版设计
1. 背景
当前项目详情页的“上传数据”页签中，上传流水入口以独立卡片形式呈现，右上角头部区域则放置“查看报告”“拉取本行信息”“征信导入”等按钮。现状存在两个明显问题：
- 上传动作被拆分在卡片区与头部区两处，页面视觉重心分散
- 上传卡片与下方上传记录表格之间缺乏统一的版面组织，整体感偏弱
本次需求希望在不改变现有功能链路的前提下，移除“上传流水”卡片，将“上传流水”动作提升到右上角，并对页面进行轻量重设计，使页面观感更整体、更像一个统一的业务工作台。
2. 目标与范围
2.1 目标
- 移除上传数据页中的“上传流水”卡片区域
- 将“上传流水”按钮加入右上角按钮组，并作为最高优先级主操作展示
- 保持页面整体简洁，进入页签后直接呈现“标题 + 操作按钮 + 记录表格”
- 在不增加新业务流程的前提下，提升页面视觉统一性和层级清晰度
2.2 非目标
- 不修改上传、拉取、征信导入、查看报告的业务逻辑
- 不新增统计卡片、说明条、数据概览等额外信息块
- 不改动上传弹窗、拉取弹窗、表格字段、轮询逻辑和接口协议
- 不调整项目详情页其他页签的结构和风格
3. 当前页面问题分析
当前 UploadData.vue 的主体结构为：
- 页面标题与右上角辅助按钮
- 锁定提示
- 上传卡片区
- 上传记录表格区
其中上传卡片区只有一个“流水导入”卡片，本质上承载的是当前页最重要的主操作，但它与头部按钮区并列存在，导致：
- 首屏可操作入口不集中，用户需要在头部和卡片间切换视线
- 上传卡片作为单一功能块独占一整段空间，页面节奏被人为拉长
- 表格区与上传区的设计语言不一致，页面像“几个块拼在一起”，而不是单个完整工作界面
4. 设计原则
4.1 最短路径实现
本次仅做轻改版，不改变原有功能关系，不引入兼容性方案或过度包装，严格围绕“移除卡片、按钮右移、整体更统一”三个核心目标展开。
4.2 页面角色明确
上传数据页本质上是业务操作页，不是宣传页，也不是概览页。视觉表达应偏工具型、冷静、克制，让用户快速找到主操作并查看处理记录。
4.3 主次分明
“上传流水”是当前页最重要动作，必须在头部获得唯一主按钮层级；其余动作保持可见，但不与主操作争抢视觉权重。
4.4 一页一气呵成
页面只保留必要结构，去掉孤立卡片，通过统一头部背景、留白、圆角和表格容器语言，让页面看起来像一个整体工作台。
5. 视觉方向
5.1 Visual Thesis
以冷静的蓝灰业务界面为基调，用轻量头部背景和统一容器语言，把上传数据页收束成一个简洁、稳定、可直接操作的工作台。
5.2 Content Plan
- Hero / 头部：标题“上传数据”与右上角操作按钮
- Support / 支撑区：锁定提示，仅在归档或打标中出现
- Detail / 核心区：上传记录表格与刷新操作
- Final CTA / 最终动作：上传流水主按钮，贯穿页面的唯一主入口
5.3 Interaction Thesis
- 通过按钮主次样式差异，让用户进入页面时先看到“上传流水”
- 通过头部和表格容器的统一样式，提升页面首屏整体感
- 通过简化首屏结构，缩短用户从进入页签到执行上传的认知路径
6. 设计方案
6.1 页面结构调整
上传数据页重构为以下三层：
- 顶部标题操作区
- 锁定提示区（条件展示）
- 上传记录工作区
改造后不再保留独立上传卡片区，页面进入后直接看到标题和操作，再下接表格。
6.2 顶部标题操作区
头部左侧保留页面标题“上传数据”，不额外增加副标题说明、统计摘要或提示带，符合“极简”方向。
头部右侧按钮组顺序调整为：
- 上传流水
- 查看报告
- 拉取本行信息
- 征信导入
其中：
- “上传流水”使用唯一主按钮样式
- 其余三个按钮统一使用次级按钮样式
- 所有按钮继续复用现有禁用逻辑，不改业务判断
这样处理后，头部即成为页面唯一明确的操作起点，替代原来的上传卡片承担主入口角色。
6.3 锁定提示区
项目归档或银行流水打标中时，继续展示原有锁定提示文案，位置保持在头部下方。
视觉上采用更统一的浅警示色块样式，但控制高度和视觉重量，避免它压过头部按钮和表格主体。该区域仅承载状态提醒，不新增操作或说明。
6.4 上传记录工作区
上传记录区继续由“刷新工具栏 + 表格 + 分页”组成，但整体会统一收进一个更完整的工作区容器中。
具体处理如下：
- 工具栏只保留“刷新”按钮，不新增筛选、概览或统计
- 表格字段、顺序、状态标签、行操作文案保持不变
- 容器通过统一圆角、边框、表头底色和内边距增强完整感
- 表格区与头部区共享同一套蓝灰视觉语言，减少割裂
这样既能保证功能稳定，又能让页面从“上卡片下表格”变成“头部操作 + 记录面板”的完整布局。
7. 交互与状态设计
7.1 上传流水按钮
点击“上传流水”后，继续打开现有“批量上传流水文件”弹窗：
- 不改弹窗标题
- 不改文件类型校验
- 不改单文件大小、最大文件数和上传接口
- 不改上传成功后的刷新与轮询行为
本次只改变入口位置和入口样式，不改变后续链路。
7.2 其他按钮
- “查看报告”继续保留现有跳转逻辑
- “拉取本行信息”继续复用现有弹窗和提交逻辑
- “征信导入”继续跳转现有征信页面
所有辅助按钮只做样式层级下调，不做行为改造。
7.3 锁定态
当项目状态为归档或打标中时：
- 锁定提示继续展示
- “上传流水”“拉取本行信息”“征信导入”等按钮继续禁用
- 表格记录仍可查看
锁定态的业务含义与当前实现完全一致，仅优化视觉呈现。
8. 代码改动边界
本次设计预期主要改动以下文件：
ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
改动点集中在：
- 模板结构调整
- 头部按钮组顺序与样式调整
- 移除上传卡片相关渲染结构
- 清理上传卡片相关的前端展示数据
- 重写页面头部、提示区、表格区样式
以下内容不应改动：
@/api/ccdiProjectUpload接口调用- 上传、删除、轮询、分页等方法逻辑
- 项目状态判断逻辑
- 弹窗表单字段与交互链路
9. 测试与验收设计
9.1 页面验收点
- 页面中不再出现“上传流水”卡片
- 右上角出现“上传流水”主按钮，且排在所有操作最前
- 页面首屏为“标题 + 按钮 + 表格”，无新增统计块或说明条
- 锁定提示在归档或打标中场景下仍正常展示
9.2 交互验收点
- 点击“上传流水”仍能正常打开批量上传弹窗
- 点击“查看报告”“拉取本行信息”“征信导入”仍保持原有行为
- 上传成功后列表刷新与轮询行为保持不变
- 删除记录、查看错误、分页切换等能力不回归
9.3 响应式验收点
- 桌面端下按钮组与标题对齐稳定，不出现换行错位
- 窄屏下按钮允许换行，但主按钮仍保持最优先视觉位置
- 表格区和工具栏在窄屏下不出现布局断裂
10. 风险与控制
10.1 风险
- 仅删除卡片而不重构头部样式，容易让页面看起来像“删了一块内容”，而不是完成了一次设计收束
- 按钮组在窄屏下可能因为操作较多而出现换行拥挤
- 移除卡片后若保留无用数据结构，代码可读性会下降
10.2 控制措施
- 头部、锁定提示、表格区一起统一视觉语言，避免只做删减式修改
- 在样式设计中提前处理按钮组换行与间距
- 同步删除或收敛仅服务于上传卡片展示的数据结构与样式代码
11. 预期交付
- 设计文档 1 份
- 后续实施计划 2 份：
- 前端实施计划
- 后端实施计划（明确本次无需后端代码改动）
- 前端页面样式与结构调整代码
12. 验收标准
- 上传流水卡片被完全移除
- 上传流水按钮位于右上角，并作为唯一主按钮展示
- 页面首屏结构更简洁，头部与表格区形成统一工作台视觉
- 原有上传、拉取、查看报告、征信导入、列表与轮询逻辑不回归
- 桌面端与窄屏场景下布局稳定