146 lines
15 KiB
Markdown
146 lines
15 KiB
Markdown
# 客户端首页简化样板
|
||
|
||
日期：2026-09-18。依据：[客户端简化与易用性优化建议](客户端简化与易用性优化建议.md)及本轮“先修改一个首页看看效果”的要求。
|
||
|
||
本轮直接实现首页样板，供人工查看后调整。当前用户要求作为首页布局变更依据；其余页面继续沿用各自已确认原型。验收视口为 1920×1080、缩放 100%，状态为待人工截图确认。
|
||
|
||
## 修改前核对矩阵
|
||
|
||
原型入口：[workbench.html](../悦/官网头程下单/workbench.html) 的 `#dashViewHome`（第 3532 行附近）；当前实现入口：[DashboardView.vue](../../apps/client-web/src/modules/dashboard/views/DashboardView.vue)。
|
||
|
||
| 页面/操作 | 原型与当前承载 | 本轮样板 | 原因及影响 |
|
||
| --- | --- | --- | --- |
|
||
| 首页布局 | 原型为三列海外业务卡片；当前为卡片主区及账户、概览、支持侧栏 | 欢迎区、常用入口、头程订单动态、需要处理、其他业务 | 头程入口前置，减少不提供实际功能的提示按钮；只修改首页内容区 |
|
||
| 创建/查询业务 | 原型卡片进入业务；当前为正式路由跳转 | 按成员权限显示常用入口，进入现有创建页或列表 | 不新增表单、不改变下单承载或权限 |
|
||
| 企业认证提醒 | 当前首次进入弹出 520px 居中提醒，进入资质上传 | 持续可见的状态提示，主动点击进入已有资质上传弹框 | 减少登录后打断；审核中、驳回、停用分别解释；不改资质操作本身 |
|
||
| 继续草稿 | 原型首页未定义；原订单列表已有草稿操作 | 显示少量真实草稿及“前往订单列表完善”入口 | 同时要求列表与编辑权限；沿用列表办理，避免同名编辑路由缓存引发跨草稿错误 |
|
||
| 费用确认 | 首页未定义；列表进入正式确认弹框 | 仅在近期订单有服务端待确认标志时提示“前往订单列表核对” | 不假装直达具体确认页，不在首页提交确认 |
|
||
| 最近业务 | 当前首页未展示列表 | 只读头程订单摘要；编号缺失为“—” | 显示部分记录，不作全量统计；完整查询进入订单列表 |
|
||
| 文件预览、删除、审核 | 首页未定义 | 不新增首页操作，保留原业务页面承载 | 不改变既有重要操作的确认门槛 |
|
||
|
||
## 数据与状态
|
||
|
||
- 企业资料、已提交头程订单、草稿分别使用现有公开 API，独立处理失败；不加载成员、资质附件或仓库主档。
|
||
- 使用首页局部状态，不覆盖订单列表的共享集合与筛选结果。每次回到首页重新获取，刷新期间不将旧数据当作最新事实。
|
||
- 只取一页少量订单和草稿，不展示“全部待办/全部订单”数字；近期没有费用提示不表示企业没有其他待确认费用。
|
||
- 无权限不发对应请求；失败、加载、成功空态分别展示，不以假记录或零值补齐。
|
||
- 移除首页原有尚不可用的帮助按钮、固定联系时效承诺及基于局部订单集合的汇总数字。
|
||
- 保留现有响应式能力，本轮不新增其他视口验收。
|
||
|
||
## 人工查看要点
|
||
|
||
1. 首页可以直接找到头程创建与查询；海外仓、账单及其他业务入口符合账号权限。
|
||
2. 正常、无订单、请求失败、只读成员、企业待认证/审核中/驳回时，页面都有明确结果。
|
||
3. 草稿与费用提示进入真实订单列表，按钮明确说明目的地，首页不直接编辑或自动确认。
|
||
4. 长企业名、订单号和入仓码可阅读，键盘可访问入口；不展示内部 ID。
|
||
5. 返回首页更新数据，返回订单列表不会因首页加载而替换列表数据。
|
||
|
||
## 本地检查
|
||
|
||
- 首页数据编排行为测试 14 项通过，覆盖权限、独立失败、并行加载、草稿筛选、排序与业务编号。
|
||
- 客户端全量本地测试 344 项通过，类型检查和构建通过；旧首页的源码文本快照测试随旧布局替换，由新的行为测试验证读取边界。
|
||
- 静态复核发现草稿编辑页按路由名缓存，首页样板因此使用订单列表入口，不新增可能打开错误草稿的直接链接。
|
||
- 未进行真实接口验收或 AI 截图；视觉与实际操作待人工确认。
|
||
|
||
## 订单与海外仓列表统一（2026-09-18）
|
||
|
||
根据 1920×1080、浏览器缩放 100% 的人工截图，以下页面统一使用客户端订单列表的紧凑视觉语言：
|
||
|
||
- 入库订单、派送订单；
|
||
- 贴标申请、仓储转运、货物废弃；
|
||
- 退货签收、退货库存、退货箱号。
|
||
|
||
统一规则：
|
||
|
||
1. 页面路由面包屑和工作区标签已经说明当前位置，列表内容不再重复显示大标题与说明文字。
|
||
2. 查询条件使用四列网格工具栏；字段有短标签，日期使用一个范围控件，查询和重置固定在底部操作行。
|
||
3. 新增操作放入表格工具栏右侧；表格工具栏左侧显示列表名称和总数，不在页面右上角单独悬浮。
|
||
4. 表格操作列固定在第一列；长编号单行省略并保留悬浮提示；状态使用轻量标签；行高、表头、边框和分页沿用共享密度变量。
|
||
5. 无数据时保留表头与紧凑空态，不再撑出大面积空白；错误状态与正常空数据保持区分。
|
||
6. 共用页面从同一入口收敛：贴标、转运、废弃共用列表骨架；退货库存和退货箱号共用列表骨架，避免同组页面继续产生不同间距和分页样式。
|
||
|
||
本轮只调整列表承载和视觉密度，不改变接口、业务状态、权限和创建流程。退货签收及箱号详情后续已按下文规则改为独立工作区页面。
|
||
|
||
本地检查：客户端 349 项测试、类型检查及生产构建通过；未部署、未执行真实接口或测试环境操作，更新后的 100% 截图仍需人工确认。
|
||
|
||
## 按钮层级统一（2026-09-18）
|
||
|
||
列表及详情页面统一遵循“一个操作区只突出一个主要动作”的规则：
|
||
|
||
1. 查询、新增、最终提交使用蓝色主按钮；同一区域不并列多个同等醒目的主按钮。
|
||
2. 重置、取消、返回、重试和下载等辅助操作使用白底描边按钮；按钮文字直接说明结果，不使用含义不清的“确定”。
|
||
3. 表格内的详情、编辑、查看等操作改为紧凑文字按钮，超过三个操作时继续收入口径一致的“更多”菜单，避免操作列被一排按钮撑宽。
|
||
4. 删除、停用、取消申请等不可逆或负向操作只使用红色文字或危险按钮；不把普通业务状态颜色当作按钮层级。
|
||
5. 桌面按钮统一为 32px 高、6px 圆角、13px 字号、16px 图标；小型及行内操作为 28px 高，相邻操作保持 8px 间距。
|
||
6. 禁用、加载和键盘焦点由共享样式处理；分页按钮保留方形控件样式，不套用表格行内文字按钮。
|
||
|
||
本轮将规则落在客户端共享样式、查询工具栏和数据表格中，已统一的订单与海外仓列表自动应用；业务专属的提交、危险操作和权限逻辑不变。客户端 350 项测试、类型检查及生产构建均通过，未部署，仍需按 1920×1080、浏览器缩放 100% 人工截图确认。
|
||
|
||
### 入库订单详情补充
|
||
|
||
入库订单详情不再使用重复大标题和多张纵向卡片。返回入口、计划号、集装箱/海外仓摘要和状态合并到 64px 顶栏；概览使用 42px 高的标签值行；入仓明细与托盘明细复用共享紧凑表格。计划号和状态不在概览中重复展示，页面内容统一收进一个有边界的连续详情面板。调整后客户端 351 项测试、类型检查及生产构建通过。
|
||
|
||
派送单详情同步采用相同结构：派送单号、海外仓、派送方式和状态进入 64px 顶栏；订单概览、运输预约使用 42px 信息行；货物与费用明细复用共享表格。客户可见的派送状态、派送方式、提货方式、装载类型、车型和预约账号转换为中文，不直接展示后端枚举值。调整后客户端 352 项测试、类型检查及生产构建通过。
|
||
|
||
### 贴标申请与退货签收详情补充
|
||
|
||
贴标申请详情和退货签收详情改为以业务编号为参数的独立工作区路由，列表点击“详情”后不再打开弹框，也不再依赖列表页内部状态。返回操作统一回到对应列表；新建贴标申请或退货预报成功后直接进入新建记录的详情页，避免重复打开列表标签。
|
||
|
||
两个详情均采用连续详情面板：64px 顶栏合并返回入口、业务编号、页面类型和状态；概览信息使用紧凑标签值网格；SKU、签收批次和换标任务继续使用表格展示，不拆成占空间的大卡片。贴标履约状态转换为客户可读文案，仓库显示沿用仓库目录，不向客户展示内部仓库 ID。
|
||
|
||
本轮新增独立详情路由和防回退测试后，客户端 354 项测试、类型检查及生产构建通过。未部署、未执行真实接口或测试环境操作；1920×1080、浏览器缩放 100% 的最终视觉仍待人工截图确认。
|
||
|
||
### 全部业务详情统一补充
|
||
|
||
继续按“列表紧凑、详情连续、业务编号贯穿”的原则完成客户端业务详情盘点与收敛：
|
||
|
||
- 入库订单、派送订单、头程订单；
|
||
- 海外采购、美国本土卡、美本土散板；
|
||
- 贴标申请、退货签收、仓储转运、货物废弃、退货箱号；
|
||
- 客户账单、消息详情。
|
||
|
||
上述详情均通过独立受权限保护的工作区路由打开，URL 优先使用计划号、订单号、退货单号、箱号、账单号等客户可见业务编号。列表不再承载业务详情弹框；企业资料编辑、成员/角色编辑及文件预览仍保留弹框或抽屉，因为它们属于短编辑或预览任务，不属于业务详情页。
|
||
|
||
详情视觉统一为一个有外边距和边界的连续面板：64px 左右的紧凑顶栏承载返回、业务编号、摘要、状态和必要动作；概览信息使用紧凑标签值网格；多条货物、费用、收款、托盘或签收记录使用表格；不再用多个大卡片堆叠。页面内同时提供加载、无数据、失败和重试状态，避免接口失败后只留下空白页面。
|
||
|
||
客户端全量 356 项测试、类型检查及生产构建通过。未部署、未执行真实接口或测试环境操作；最终仍需按 1920×1080、浏览器缩放 100% 逐页人工截图确认。
|
||
|
||
## 客户菜单收口与头程下单方式（2026-09-18）
|
||
|
||
按客户实际办理任务收口左侧导航：
|
||
|
||
- “快速建草稿”不再作为独立菜单项；在“头程下单”的创建页内提供“普通下单 / 快速下单”切换，快速方式仍受独立权限控制。
|
||
- “入库订单”“派送订单”“退货库存”“退货箱号管理”从客户菜单移除。这些属于仓内或履约管理视角，不作为客户日常入口。
|
||
- 上述四类存量页面的受保护路由暂时保留但不进入导航，以免已打开的工作区标签或旧链接立即失效；这不代表它们继续作为客户产品栏目。
|
||
- 入仓码关联摘要继续以入仓码作为贯穿业务标识，不再向客户重复展示内部订单号。
|
||
|
||
本轮不修改接口、权限码和业务数据，只调整客户导航及下单入口承载。客户端全量 356 项测试、生产构建和差异检查通过；未部署，需按 1920×1080、浏览器缩放 100% 人工确认菜单与下单方式切换。
|
||
|
||
## 我的消息列表统一（2026-09-18）
|
||
|
||
“我的消息”列表纳入客户端统一的紧凑列表体系：移除重复的大标题、说明和装饰性铃铛；查询条件复用四列查询工具栏；消息标题、摘要、分类、发送时间和状态使用共享数据表格；“详情 / 标为已读”保留在首列，“全部标为已读”移到表格工具栏右侧。空数据只显示紧凑的“暂无消息”，仍保留表头、总数和每页数量，不再用大面积空态撑高页面。
|
||
|
||
本轮不改变消息接口、成员可见范围和已读权限。客户端全量 357 项测试、类型检查、生产构建和差异检查通过；未部署，需按 1920×1080、浏览器缩放 100% 人工确认最终列表密度。
|
||
|
||
## 列表工具栏与头程草稿筛选（2026-09-18）
|
||
|
||
统一列表只在底部分页区显示“共 N 条 / 第 N 页”，表格顶部不再重复列表名和总条数。没有事项标签的列表，其新增、批量已读等常用操作统一从右侧移到左侧，并且不再渲染空标题容器，避免共享间距把按钮额外向右推移；操作按钮与查询区、表格首列使用同一左侧基线。头程订单仍在左侧保留事项标签，顶部只保留已选数量，不重复总数。
|
||
|
||
头程订单事项标签顺序调整为“全部、确认计费重、上传资料、草稿”。“草稿”只筛选状态为 `DRAFT` 的订单，并显示当前查询条件下的草稿数量；切换标签时继续重置页码和已选订单，不改变查询条件和草稿提交权限。
|
||
|
||
本轮同步应用于海外采购、美国本土卡、美本土散板、入库/派送、海外仓业务、退货和我的消息等共享列表。客户端全量 358 项测试、类型检查、生产构建和差异检查通过；未部署，需按 1920×1080、浏览器缩放 100% 人工确认操作区位置。
|
||
|
||
## 海外仓与财务按钮统一（2026-09-18）
|
||
|
||
贴标申请、仓储转运、货物废弃、退货预报与签收四个海外仓列表统一把新增操作放在表格工具栏左侧，并与查询区和表格“操作”列共用左侧基线。四个入口继续复用共享 `DataTable`，不在各页面单独维护右对齐或额外占位样式。
|
||
|
||
“费用与账单”同步收敛：资金账户移除正文内重复的页头标题和独占整行的充值工具栏，六个余额/授信指标合并为一块连续的六列概览，“账户充值”嵌入最左侧“实际余额”单元；客户账单使用共享四列查询工具栏、共享紧凑表格、首列操作和底部分页，查询、重置、查看及确认账单沿用客户端统一按钮层级。本轮不改变余额、流水、充值及账单接口和权限。
|
||
|
||
资金账户的“账户流水”和“充值申请”不再使用旧表格与旧分页，统一切换到共享紧凑表格。流水列表保留业务单号、变动类型、变动金额、实际/冻结/可用余额、操作人、备注和发生时间；“已用授信、可用授信”已在顶部概览展示，不再对每条流水重复铺列，避免关键的操作人、备注和时间被挤出当前视口。充值申请同步采用一致的列宽、单行省略与底部分页。
|
||
|
||
客户端全量 360 项测试、类型检查和生产构建通过；未部署，需按 1920×1080、浏览器缩放 100% 人工确认四个海外仓入口和两个财务页面的按钮基线、表格密度及横向滚动。
|
||
|
||
## 当前菜单分组可手动收起（2026-09-18）
|
||
|
||
左侧菜单首次进入页面或切换到其他业务分组时，仍自动展开当前路由所在的父级菜单；展开后不再锁定当前分组，用户点击父级菜单可以正常收起，再次点击可以重新展开。当前页面的选中样式继续保留，不因分组暂时收起而丢失路由状态。
|