# 客户端首页简化样板

日期：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% 逐页人工截图确认。