docs: 固化工具页紧凑页头规范
This commit is contained in:
@@ -89,9 +89,10 @@ description: UniDesk Web 开发与受控浏览器验证技能。用户提到 Web
|
||||
- Vite 必须绑定可访问的 native 端口并保持 HMR,浏览器端 HMR 地址不得写成 `0.0.0.0`。
|
||||
- HWLAB 工具页面默认使用受限工作区:
|
||||
- AppShell 和页面根容器不得产生 document 级或主内容区全局滚动;
|
||||
- 页面头、命令栏和状态摘要保持稳定可见;
|
||||
- 页面头必须是紧凑命令栏,状态摘要作为其底栏,二者不得挤占主体工作区;
|
||||
- 列表、时间线、日志、证据面板和正文分别在所属 pane 内滚动;
|
||||
- 移动端允许工作区内部纵向滚动,但不得把滚动责任退回 document 或 AppShell;
|
||||
- 页头高度预算、状态底栏和主体占比的默认判定见 [references/design.md](references/design.md);
|
||||
- 历史页面按风险逐步迁移,新页面和重设计页面必须直接采用该合同。
|
||||
- L1 公网调试入口交给用户前必须完成浏览器 readiness 验收:
|
||||
- 使用 `bun scripts/cli.ts web-probe native-readiness --node <node> --lane <lane> --profile <profile>` 一次完成验收;
|
||||
|
||||
@@ -4,6 +4,22 @@
|
||||
|
||||
- UniDesk/HWLAB 的工具页默认是工作界面,不是营销页:首屏直接呈现可操作对象、状态和主要任务流,避免 hero、装饰卡片和说明性大段文案。
|
||||
- 信息密度优先但要稳定:header 保持窄,source/file/project 等上下文选择放在顶部工具栏或状态栏下拉;计数、来源、taskRef、更新时间等元信息收敛到详情/感叹号弹窗,不长期占主版面。
|
||||
- 工具页页头默认采用紧凑命令栏:
|
||||
- 页面身份、短说明和高频操作在桌面端保持同一行或同一紧凑区域;
|
||||
- 操作按钮靠右对齐,不得为了少量按钮单独占据一整行;
|
||||
- 标题使用工具页尺度,不得使用 hero 尺度;
|
||||
- 说明默认限制为一行,空间不足时隐藏次要说明,不得持续撑高页头;
|
||||
- 禁止用大面积留白、背景纹理或装饰区域扩充页头。
|
||||
- 状态摘要默认作为页头底栏:
|
||||
- 紧贴命令栏下方,不在命令栏与主体之间增加大段空白;
|
||||
- 桌面端优先使用单行、等高、可扫描的状态分栏,不使用高大的独立状态卡片;
|
||||
- 单项只保留短标签、主值和必要状态点,详细解释进入主体或检查器;
|
||||
- 状态数量超过可用宽度时优先内部横向滚动或收敛次要字段,不换成多行高卡片墙。
|
||||
- 页头必须服从主体工作区高度预算:
|
||||
- 在 `1920x1080` 桌面视口中,页面命令栏与状态底栏合计高度默认不超过主内容可用高度的 `18%`;
|
||||
- 主体工作区使用 `minmax(0, 1fr)` 或等价布局占满全部剩余高度;
|
||||
- 页面不得为了展示品牌、说明或空白而压缩列表、时间线、正文和证据检查器;
|
||||
- 紧凑桌面优先隐藏次要说明、缩小垂直 padding 和收敛状态字段,再考虑改变主体分栏。
|
||||
- 主内容区必须占优:树、大纲、列表和导航只作为左侧辅助视图,默认约 30% 或更小,并支持折叠或调整宽度;正文、报告、trace、消息或表格等主工作内容应占页面主要空间。
|
||||
- Workbench 类三栏/双栏工作区优先复用通用受限布局组件或抽取通用组件后再接入新页面;不要为每个页面重新堆叠一套 `aside + main + report` CSS。
|
||||
- HWLAB 页面滚动边界:
|
||||
@@ -18,4 +34,12 @@
|
||||
- 文档/任务类页面优先就地阅读和就地编辑:标题和正文双击或显式编辑态切换,不为常规查看单独铺满输入框;正文渲染态必须可见,不能只显示 taskRef、文件名或更新时间。
|
||||
- 报告、Markdown、日志和 JSON 片段要用成熟 Markdown/代码块渲染,代码块采用浅色 Workbench 风格、可滚动且不撑破布局;不要把裸 JSON 或长日志直接挤爆页面。
|
||||
- 页面状态要可深链:重要 source/file/task/report/session 选择进入 RESTful URL,并能刷新后恢复;联动其他功能只通过公共 API、稳定 id 和 URL,不把两个功能互相嵌入成强依赖。
|
||||
- 设计验收必须用截图或 web-probe 样本检查真实版面:正文是否可见、主区域是否足够、弹窗是否遮挡流程、长文本是否溢出、移动/窄屏是否仍可操作。桌面默认视口是 `1920x1080`;项目/MDTODO/报告类页面还应按风险覆盖紧凑桌面视口(例如 960x600)的深链默认态、左侧树折叠态、右侧报告关闭态。涉及报告渲染或布局重写时还必须覆盖右侧报告栏和报告全屏态。记录 document overflow 必须为零、主内容区不得滚动、pane 宽高和滚动范围、正文/报告可见性、按钮是否被遮挡,以及截图 SHA。
|
||||
- 设计验收必须用截图或 web-probe 样本检查真实版面:
|
||||
- 检查正文是否可见、主区域是否足够、弹窗是否遮挡流程、长文本是否溢出、移动或窄屏是否仍可操作;
|
||||
- 桌面默认视口是 `1920x1080`;
|
||||
- 记录命令栏、状态底栏和主体工作区的实际高度及占比;
|
||||
- 确认页头未超过默认高度预算,主体工作区占据全部剩余高度;
|
||||
- 项目、MDTODO 和报告类页面按风险覆盖紧凑桌面视口,例如 960x600;
|
||||
- 紧凑桌面覆盖深链默认态、左侧树折叠态和右侧报告关闭态;
|
||||
- 涉及报告渲染或布局重写时覆盖右侧报告栏和报告全屏态;
|
||||
- 记录 document overflow 为零、主内容区不滚动、pane 宽高和滚动范围、正文或报告可见性、按钮遮挡情况及截图 SHA。
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
# R4.10 任务报告
|
||||
|
||||
## 结果
|
||||
|
||||
- CaseRun 页头已改为紧凑工具栏:
|
||||
- 页面身份、单行说明和高频操作位于同一紧凑区域;
|
||||
- 状态摘要紧贴命令栏,形成窄底栏;
|
||||
- 主体三栏继续使用 `minmax(0, 1fr)` 占满剩余高度。
|
||||
- 用户截图反馈已泛化到 `unidesk-webdev`:
|
||||
- 工具页页头不得采用 hero 尺度;
|
||||
- 操作按钮不得为少量操作独占整行;
|
||||
- 状态摘要默认使用单行底栏,不使用高大卡片墙;
|
||||
- `1920x1080` 下命令栏与状态底栏默认不超过主内容可用高度的 `18%`;
|
||||
- 验收必须记录页头、状态底栏和主体工作区的实际高度及占比。
|
||||
|
||||
## 视觉证据
|
||||
|
||||
- 优化后截图:
|
||||
- 路径:`/tmp/web-probe-screenshot-nc01-v03-1784354333890-84364e87-web-probe-nc01-v03.png`;
|
||||
- SHA256:`f4160cf3ce9b8791500ed1147f3c69c7187035cdc513b0dcd2a2b948efb792bc`。
|
||||
- `1920x1080` 视口:
|
||||
- 命令栏与状态底栏合计约 118px;
|
||||
- 占主内容可用高度约 11%;
|
||||
- 主体工作区获得其余约 89%;
|
||||
- document size 与 viewport 均为 1920x1080;
|
||||
- 无水平溢出。
|
||||
|
||||
## 验证
|
||||
|
||||
- `unidesk-webdev` skill:`quick_validate.py` 通过。
|
||||
- CaseRun Vue SFC parse 与 `compileScript`:通过。
|
||||
- 桌面 `caserun` native readiness:pass。
|
||||
- 移动端 `caserun-mobile` native readiness:pass。
|
||||
- 两个 profile 均满足:
|
||||
- 页面挂载和基础交互通过;
|
||||
- console error 为 0;
|
||||
- page error 为 0;
|
||||
- failed response 为 0;
|
||||
- document 和主内容区无全局滚动。
|
||||
@@ -99,3 +99,7 @@ P5 CI/CD 与原入口回归:补齐服务制品和 GitOps,仅以 v0.3 PR merg
|
||||
### R4.9 [completed]
|
||||
|
||||
基于真实 software-smoke 的 Temporal DTO 优化 CaseRun 完成态展示:按服务端事件绘制实际阶段,展示产物、SHA256、证据和 workflow identity,修正 createdAt、深链用例选择与证据面板视觉层级,并通过 YAML 固定公网入口完成桌面和移动端 L1 readiness;正式公网部署态无受控登录态时保留认证边界,不用 fixture 冒充生产页面证据,完成任务后将详细报告写入[任务报告](./details/hwlab-caserun/R4.9_Task_Report.md)。
|
||||
|
||||
### R4.10 [completed]
|
||||
|
||||
根据真实页面截图收敛 CaseRun 页头空间:将页面身份、说明和操作改为紧凑命令栏,将状态摘要固定为页头底栏,并把紧凑页头、状态底栏和主体高度预算沉淀为 unidesk-webdev 默认设计规则;通过桌面和移动端 L1 readiness 验证无全局滚动及交互回归,完成任务后将详细报告写入[任务报告](./details/hwlab-caserun/R4.10_Task_Report.md)。
|
||||
|
||||
Reference in New Issue
Block a user