界面与交互规范

本页维护页面视觉、布局与交互状态的完整规则。目录、API、类型与组件组织见前端工程规范；流程办理页的菜单命名与显示顺序见公共开发约定 · 流程菜单与分类命名。

内容、按钮数量、文字长度、显隐、交互或布局变化时，读取本页受影响章节，不只在任务名称含“样式”时读取。标准区域优先复用经核验符合当前规则的共享实现和样例，不把现有页面一概视为合规；共享类名仅是实现依据，不能证明最终效果正确。验收分工以根 AGENTS.md 为准。

1. 基础视觉

• 页面使用 MiSans；如环境没有该字体，依次使用 HarmonyOS Sans SC、PingFang SC、Source Han Sans SC、Microsoft YaHei 和无衬线字体。
• 管理端主内容区背景为 #EBF3F5（叠加品牌青 / 品牌蓝两色浅光斑，与登录页同源），查询区、树面板、列表卡、弹窗和抽屉使用白色表面 #FFFFFF。
• 面板、弹窗和抽屉使用 14px 圆角；输入框、按钮、标签、表格和紧凑选择器使用 10px 圆角；圆形图标按钮使用 50%。不要将内容面板强行做成小圆角，也不要让控件圆角超过 10px。
• 面板使用 1px --app-surface-border 细边框和轻阴影；静态阴影为 0 1px 2px rgba(15,23,42,.05)，悬停可升至 0 8px 24px rgba(15,23,42,.06)。
• 管理端主内容外边距与面板间距为 12px；面板内部常规内边距为 16px。
• 桌面端以 1920 × 1080 屏幕、系统缩放 100%、浏览器缩放 100% 为设备基线；1920 × 900–930 是浏览器 CSS 视口，不是业务页面可直接占用的高度。布局必须在可用宽度不足时收缩或换列，禁止在 1920px 宽度下裁切主内容。
• 固定 Header 与 TagsView 启用时，业务内容区顶部偏移为 111px；正常工作区的业务内容区实际高度约为 777px–807px。业务页面只使用共享工作区高度，不重复扣减固定导航或页签高度。

2. 色彩与语义

语义	色值	使用位置
主色	#199EAC（默认值，品牌青）	主按钮、链接、当前/选中状态、开关开启；布局设置「主题颜色」可改，全栈令牌随主色派生。
主色浅阶	由主色派生（color-mix 8%–12%）	菜单悬停、树选中、轻量强调背景。
成功	#67C23A	已完成、通过、成功提示、正向操作。
警告	#E6A23C	待处理、风险、导出、需谨慎确认的操作。
危险	#F56C6C	删除、终止、作废、错误；审批退回按审批动作规范使用警告色。
主文字	#1F2937	标题与关键数据。
正文	#303133	表格与表单内容。
辅助文字	#6B7280	说明、计数与次级元数据。
细边框	#E5E7EB	面板、控件、表格边界。
表格表头	背景 #F8FAFC，文字 #475569	所有标准台账表格；实现时使用 --app-surface-subtle 与 --app-text-secondary 令牌，见 2.1。

外观三态各有默认主色：纯白 #409EFF、主题 #199EAC、深色 #5EBBC5（品牌青提亮阶，保证暗底可读性）；切换外观自动应用对应默认主色，布局设置「主题颜色」手动改色后可经「恢复默认色」一键回到当前外观的默认值。

橙色只能表达警告、风险或需确认的动作，不能作为普通分类色；首页看板的数据卡渐变和流程页的业务色带是受控例外，不反向覆盖管理端共享组件。

字典标签在 Element Plus 标准五色（primary / success / info / warning / danger）不够区分类别时，使用拓展色板补位：

拓展色	色值	参考用途
紫 purple	#8B5CF6	运营、平台类业务
青 cyan	#06B6D4	数字化、咨询类业务
品红 magenta	#EC4899	检测、试验类业务
金 gold	#CA8A04	审计、资金监督类业务
黄绿 lime	#65A30D	兜底分类（如「其他」）

拓展色板定义于 digital-construction-ui/src/assets/styles/vendors/element-plus/_dict-tag.scss，light-3/5/7/8/9 与 dark-2 派生变量按 Element Plus 生成规则用 color-mix 合成（浅色混白、深色混 #141414），随外观三态自动适配，页面不得为字典标签另写颜色。字典数据通过「CSS Class」字段配置 dict-tag-purple 等类名启用对应配色；标准五色直接配「样式」（list_class）即可。拓展色按业务语义需要配置，不给无语义的纯分类字典批量上色；未配色的字典项保持无色纯文本，是合法的中性展示。

2.1 深色模式

平台外观为「纯白 / 主题 / 深色」三态：纯白与主题（品牌浅青）为浅色两态，由布局设置抽屉的侧栏主题承载；深色即整站暗黑模式，状态由 digital-construction-ui/src/hooks/useThemeMode.ts 统一持有，布局设置抽屉的「深色」选项与登录页开关共用同一份状态，页面不得自行调用 useColorMode / useDark。应用挂载前由 main.ts 调用 initThemeMode() 落定 html.dark，index.html 有同键名的防闪脚本。

页面样式只允许使用下表的语义令牌，浅深两套同名同义。页面里禁止再写死浅色语义字面值（如 #fff、#f8fafc、#cbd5e1、#475569、#303133），否则切到深色时会形成白底黑字压在深色壳上的观感。

语义	令牌	浅色	深色
面板/卡片底	--app-surface-bg	#ffffff	#111827
次级底（表头、分区、只读网格）	--app-surface-subtle	#f8fafc	rgba(148,163,184,0.08)
凹陷底（归档条、占位区）	--app-surface-sunken	#f1f5f9	rgba(15,23,42,0.6)
主色浅底（选中项、当前节点）	--app-surface-tint	主色 light-9 阶	主色 color-mix 14%
默认描边	--app-surface-border	#e5e7eb	rgba(71,85,105,0.5)
强调描边（表格线、分区外框）	--app-border-strong	#cbd5e1	rgba(148,163,184,0.32)
轻分隔线	--app-border-subtle	#ebeef5	rgba(148,163,184,0.16)
标题	--app-text-title	#1f2937	#f3f7ff
正文	--app-text-body	#303133	#d5dbe6
次要说明	--app-text-secondary	#475569	#b6c2d6
辅助/计数	--app-text-muted	#6b7280	#8ea0bd
占位与禁用	--app-text-placeholder	#a8abb2	#6c7280
状态三联（成功/警告/危险/信息）	--app-status-{success,warning,danger,info}-{bg,border,text}	见 tokens/_theme.scss	见 tokens/_theme-dark.scss

配合规则：

• Element Plus 基础变量已在深色下桥接到上述业务令牌，var(--el-text-color-*)、var(--el-border-color*)、var(--el-fill-color*)、var(--el-bg-color*) 可直接使用并自动适配，优先于新增业务令牌。
• 状态色必须三个一组使用（底 / 描边 / 文字）。只把文字换成令牌、底色仍是浅色字面值，会在深色下形成浅底浅字。
• 品牌色、统计指标色、图表调色板、渐变、SVG 的 fill/stroke、彩色底上的白字，以及文档类型图标等标识色，不参与主题令牌化。
• 页面确需浅色字面值时，浅色声明保持原样，另加 html.dark { ... } 暗色覆盖，不要改动浅色观感。
• 在 <style scoped> 里写暗色规则必须用 html.dark { ... } 或扁平的 html.dark .xxx { ... }。不要用 :global(html.dark) { .xxx { ... } }：该写法会把内层选择器丢掉，声明被直接挂到 html 元素上，整段暗色规则静默失效。
• 新增或修改暗色相关样式后，需通过仓库统一入口执行 .\.agents\tools\dev.ps1 pnpm --dir .\digital-construction-ui exec vitest run src/assets/styles/dark-mode.spec.ts，其中该测试会校验令牌对称性、禁用字面色值与失效规则。

2.2 决策驾驶舱

决策驾驶舱（路由 /cockpit，独立全屏、登录必需、菜单隐藏）从个人中心身份条进入、顶栏「返回工作台」回到 /index，双向切换。页面为表现型大屏：取色全部走平台令牌与品牌色板（壳层光斑、surface、状态三件套、主色），echarts 轴色运行时读取 CSS 变量并随 useThemeMode 浅深重建；KPI 语义 chips 使用状态三联令牌。演示阶段数据集中于 src/views/cockpit/mock.ts（移植自已删除的 public/indicator 选型稿），页面顶栏标注「模拟演示数据」；接入真实指标体系时整体替换该 mock 模块，不改页面结构。

3. 字体层级

类型	字号/字重	使用规则
页面/区块标题	16px / 600	台账区块标题、流程步骤标题、审批区块标题。
列表/卡片标题	15px / 600	列表面板标题、卡片标题。
二级标题	14px / 600	表单组标题、卡片次标题、重要标签。
正文与按钮	14px / 400-500	默认文字、按钮、输入内容、导航项。
表格表头	13px / 500	文字使用 --app-text-secondary，保持居中。
辅助文字	12-13px / 400	提示、次级信息、数量描述、页签。

标题只表达内容层级，不能用颜色或字号制造多余层级；一个卡片内通常不超过两级标题。

4. 导航框架

• 左侧导航默认品牌浅青 #E7F4F5（布局设置外观三态：主题 / 纯白 / 深色，深色为整站暗黑模式），展开宽度为 240px；折叠宽度为 58px，并保留 12px 外槽，主区偏移为 58px + 12px = 70px。Logo 区高 44px，顶部栏高 52px，展开宽度需保证“工程项目招标管理”这类 8 字菜单完整显示。
• 左侧菜单项高 40px、上下间距 3px（46px 节奏）；选中菜单使用主色浅阶背景与主色文字，圆角 10px，图标与文字间距 6px；嵌套菜单每级缩进 12px，一级左内边距 10px。
• 顶部导航为浮动卡片：--app-navbar-bg 底（品牌浅青态 #E7F4F5、白色态 --app-surface-bg、深色态 #111827）、1px --app-navbar-border 细边框、14px 圆角、轻阴影，高 52px；页签栏底色 --app-tags-bg 与顶栏同步；系统支持左侧 / 混合 / 顶部三种导航模式，本规范以默认的左侧导航模式为准。右侧图标按钮高 32px，图标 16px，必须有可访问名称。
• 页签栏高 38px；页签本体高 26px、文字 12px。激活页签为主色底、白字。

5. 卡片、查询与表单

• 查询区与列表区均为白色 14px 圆角面板，面板间距 12px。
• 查询卡使用等宽栅格布局：默认每行 4 列，≤1500px 降 3 列、≤1100px 降 2 列、≤640px 单列纵排。仅有一个或两个查询条件时，可分别使用一列或两列等宽筛选项；窄屏仍按上述规则降为单列。栅格与标签对齐规则由共享类 .query-form 提供，查询表单必须携带该类并配合 inline，不得用裸 el-form inline 自排。
• 查询表单每个条件项内部为双轨栅格：标签轨 minmax(6em, auto)、控件轨 minmax(0, 1fr)。标签文字 14px/600，右对齐、不换行；不超过 6 字的标签占同一宽度，超过 6 字自动加宽不截断。控件恒等于控件轨宽度（width:100%; max-width:100%; min-width:0），日期范围、数字框、自定义选择器等不得以固有宽度撑破所在列，保证同列各行控件左右缘严格对齐。该规则须以高于 Element Plus .el-form--inline .el-form-item 的特异性书写（如 .query-form.el-form--inline .el-form-item），否则会被其 display:inline-flex 覆盖导致错位。查询卡不使用固定 240px/308px 控件宽度：.query-form 已用 !important 强制控件撑满控件轨，页面上再写内联或 scoped 固定宽度不会产生任何渲染效果，只会误导后续改造，发现即移除（如招投标各台账查询卡控件上的遗留 style="width: 240px"）。旧内联表单的固定宽度兼容样式仅作用于 .query-form 之外，不作为查询卡的实现标准。
• 搜索、重置按钮固定在“筛选条件”标题行右端的 panel-actions 容器，与折叠箭头同行；条件行只放筛选项。单条件、双条件查询卡也遵守同一按钮位置，不在表单末尾另设按钮列。
• 输入框、下拉框、日期框和文本域均为 --app-surface-bg 底、1px --app-surface-border 边框、10px 圆角。获得焦点时使用主色浅阶的 2px 外描，不使用重阴影。
• 发起、编辑和审批表单的双列表单标签推荐 120px，可在 110px–120px 内取值；标签右对齐，保证 4–5 个汉字的标签单行显示、不换行。超过 5 个字的标签优先精简文案；确需保留 6–7 个字的标签时，整张表单统一放宽到 130px，同一表单内不混用多种标签宽度，避免控件左缘错位。必填项在标签前显示红色星号，星号与标签间距 4px。
• 双列表单的条件显示字段必须把 v-if 挂在 el-col 上，隐藏时不留空列占半行；默认自上而下每行两项排满，备注、附件等整宽字段单独占一行。
• 文本域高度至少 88px；审批意见建议 96px。表单字段纵向间距为 16px，同一行字段间距为 24px。

5.1 详情页统一使用描述列表

所有详情页、详情弹窗及详情抽屉的字段展示统一使用 Element Plus el-descriptions / el-descriptions-item。按业务含义分组，桌面合理分列，窄屏收缩列数；长说明和多主体列表跨列、自然换行；标签宽度一致，空值统一占位，金额和日期保留格式及单位。使用共享浅深主题令牌。附件、列表与办理记录等复杂内容使用对应专用组件。本次先重构项目详情，其他详情在各自修改时遵循本规范。

6. 按钮与操作栏

• 标准按钮高度为 32px，文字 14px，左右内边距 15px，圆角 10px；按钮间距 8px。small 与 large 尺寸保留 Element Plus 默认规格，不被全局按钮高度覆盖。
• 主按钮使用主色实底白字，用于查询、提交、确认、保存、通过；次按钮使用白底、细边框和正文色，用于重置、取消、返回；工具栏按钮可用带语义色描边的浅色样式。
• 台账删除、流程终止和作废只使用危险红；固定表单流程的退回使用橙色描边，取消不得使用红色。禁用按钮保留边界并明显降低文字与背景对比。
• 台账和树表的操作列必须是“图标 + 文字 + 语义色”；提示浮层只能辅助说明，不能替代操作列按钮文字。嵌入树节点行尾的辅助操作必须仅显示图标，使用固定 28px × 28px 点击区，并同时提供 Tooltip 和可访问名称，避免操作文字挤压节点名称。
• 行内操作按语义着色：查看/修改使用主色；新增下级、分配、复制、下载等正向操作使用成功色；重置、数据权限、撤销等需谨慎确认的操作使用警告色；删除、终止、作废、移除使用危险色。保留原有权限控制与二次确认。
• 操作列表头必须水平居中；当操作单元格使用 Flex 布局时，表头与正文都必须显式设置横向居中，不能只依赖 text-align: center。
• 行内操作按钮不得换行，按钮间保持 8px 间距；多按钮操作区使用共享 ledger-actions 容器。操作列宽度按按钮数量和文字长度预留，不使用固定的通用 150px 宽度。双操作列建议至少 160px，并以“图标 + 文字”完整可见为验收标准。
• 悬停只改变颜色、边框和轻阴影，不改变布局尺寸；原型展示本次交互适用的默认、悬停与禁用状态，静态展示或不存在禁用语义的控件不补造状态。
• 状态标签使用紧凑尺寸：台账“正常”等紧凑标签为 22px 高；流程状态标签为 24px 高。草稿使用灰色，待审核/处理中使用蓝色，已通过/已完成使用绿色，进行中使用橙色，退回/终止使用红色。

7. 台账表格与分页

7.1 视口与高度

• 表格带完整网格线、10px 圆角、浅灰边框和轻阴影；表格行悬停时背景变为很浅的灰蓝色。固定列必须有不透明背景，避免横向滚动时透视。
• 表头高 40px，字号 13px，表头背景 --app-surface-subtle，文字 --app-text-secondary，表头与正文统一水平居中（由 .el-table th/.el-table td 全局保证，统一覆盖列级 align 声明，含金额/数字列）；唯一例外是树形名称列保持左对齐，保证缩进层级可读。常规台账正文行高为 44px–48px，正文 14px；信息密集型预览表允许压缩字号与列宽，但不得降低状态与关键字段的可读性。
• 在 1920 × 900–930 浏览器 CSS 视口中，普通台账默认每页 10 条。优先通过分页、紧凑列宽和剩余高度分配保持可读性；标准台账优先滚动表格正文，查询区、工具栏、表头和分页保持可见。内容确实超出时允许滚动，不得遮挡表头、固定列或操作栏。

7.2 工作区与滚动模式

• 同一纵向内容链路最多一个主滚动容器。先通过弹性布局、min-height: 0 和紧凑但可读的间距分配高度；禁止以裁切或 overflow: hidden 隐藏仍需访问的内容。
• .app-page-viewport 用于标准台账、树表和左树右表：根工作区不滚动，内部数据区按需滚动；树形工作台的并列区域可各自承担明确的内部滚动。
• .app-page-scroll 用于长表单、详情、审批记录和文档：仅工作区内容使用单一纵向滚动。
• .app-page-immersive 用于 BIM/GIS、设计器、驾驶舱和 AI 会话：根工作区不滚动，由画布、侧栏或列表等明确子区域承担滚动。
• 每个业务页面必须选择一种共享模式，不得自行编写 calc(100vh - Npx)；页面不再猜测浏览器高度。

7.3 单行与溢出

• 表头、单元格内容、行内操作和工具栏均以单行呈现；不得通过换行挤压行高或操作栏。
• 文本列超出可用宽度时使用省略号。名称、编码、路径、权限标识等需要查看完整值的字段必须提供悬停提示；状态、开关等短信息无需额外提示。
• 选择列宽 50px–55px，日期列通常为 160px–180px。操作列根据实际按钮数配置：单操作约 86px–132px、双操作约 160px、三操作约 260px、四操作约 360px，以单行完整展示为准。

7.4 固定列与横向滚动

• 优先固定左侧关键识别列：选择列、编号/编码、名称中连续的 1–3 列；树表至少固定名称列。不要固定过多列，以免压缩有效阅读区。
• 操作列固定在最右侧。中间的次要字段在空间不足时横向滚动，左右关键列与操作栏始终可见。
• 右侧固定栏除操作列外，还必须包含表格的关键状态列（审批状态、审核状态、有效/启用状态、流程状态、转换状态等，如有）。状态列紧邻操作列左侧，与操作列同属右侧固定组；固定列必须连续，禁止在固定组内夹入非固定列，也禁止把中间某列单独设为 fixed="right"。多个状态列按“业务主状态在后”排列。
• 关键状态列原本位于表格中间时，先把它移到操作列左侧再固定，不得为了少改列序而放弃固定；状态列是滚动时的判读依据，与操作列同等重要。
• 标准台账使用 ledger-table，操作列使用 ledger-operation-column；多按钮操作区使用 ledger-actions 保持单行。共享规则负责单行省略、操作按钮间距和标签列表不换行。
• 阶段计划、日期矩阵等确实需要较大横向宽度的编辑表格，可以使用独立的表格横向滚动容器；禁止父容器与表格组件同时设置 overflow-x: auto，同一表格只能出现一条横向滚动条。宽度足够时应让列完整展示，不应为了套用固定弹窗宽度制造滚动。

7.5 操作与分页

• 行内操作遵循“图标＋文字＋语义色”规则；危险操作需要二次确认。
• 分页置于表格下方右侧，顶部间距 20px，内边距 10px 20px；每页条数为 10 / 20 / 30 / 50，桌面端默认显示 7 个连续页码。

8. 弹窗、抽屉与反馈

• 简单单列编辑弹窗宽 560px；标准双列表单弹窗宽 960px（区间 880px–1080px）。固定表单流程的新增、编辑在业务台账弹窗完成，不再设置独立的“流程发起弹窗”；查看和办理才进入流程工作台。审批操作放在工作台顶部信息卡右侧；通用流程进度默认用右侧抽屉 680px，固定表单流程的流程图使用底部 80% 高度抽屉，抽屉只展示流程图。
• 弹窗宽度统一使用 width: min(具体数值, calc(100vw - 40px))，避免小屏裁切；弹窗和抽屉使用 14px 圆角、细边框和中等级阴影；标题区内边距 16px 16px 8px，标题下有浅灰分隔线。
• 弹窗滚动链路全局只允许一条：.el-dialog__body 是唯一滚动容器，全局样式（vendors/element-plus/_dialog.scss）已内置 max-height: calc(90vh - 111px)、overflow-y: auto 与 overflow-x: hidden，头部与底部固定不随正文滚动。业务代码不得在弹窗内再嵌套自带 max-height/overflow 的第二层滚动包裹，也不得为弹窗高度自编 calc(100vh - Npx)（同 7.2 页面高度禁令）——双层滚动容器正是“弹窗出现两根竖向滚动条”的唯一来源。抽屉同理：正文滚动由 .el-drawer__body 承担，不在业务层再建滚动壳。
• 弹窗正文不得出现横向滚动条。使用 el-row gutter 栅格时，列间距以负外边距实现，会把行盒右缘推出滚动容器（gutter 24 溢出 12px）；且滚动容器一旦设置 overflow-y: auto，另一轴按 CSS 规则计算为 auto，该溢出即触发横向滚动条。长表单弹窗应在滚动容器两侧预留不小于半个 gutter 的内边距吸收负外边距；确需横向滚动的宽表格按 7.4 使用表格自身内部滚动，容器保持 overflow-x: hidden。验收判据：弹窗内纵向滚动容器数量为 1，且正文容器 scrollWidth === clientWidth。
• 宽型编辑弹窗用于阶段计划、日期矩阵等多列编辑场景时，可使用 width: min(1360px, calc(100vw - 48px))；以 1920 × 1080 为基线时优先保证表格完整展示且弹窗正文无横向滚动。低于基线后只允许宽表格自身承担一条横向滚动，不能再叠加弹窗或页面横向滚动。
• 内嵌数据表格或子台账穿透弹窗（如从线路穿透查看关联标段列表、沿线工点库、设备清单等 7–10 列多列表格），宽度统一使用 width: min(1280px, calc(100vw - 48px))（区间 1160px–1280px）；以 1920 × 900–930（含 1920 × 911）为浏览器基准视口时，必须保证各业务列舒展平铺，严禁产生横向滚动条。低于 1366px 窄屏时仅允许表格内部单一容器承担横向滚动，不得在基准大屏视口下因弹窗固定宽度过窄制造横向滚动条。
• 弹窗遮罩使用深色半透明层；背景模糊只能作为受控增强，不能削弱弹窗的焦点与可读性。
• 设置抽屉固定在右侧，宽 300px；固定表单业务附件预览抽屉固定在左侧，宽度为视口 65%；审批时间线附件预览抽屉固定在右侧，宽度为视口 65%。两处附件均复用通用 FileUpload：点击文件名预览，单独提供下载按钮，文件类型使用统一图标。预览统一在站内抽屉打开，不使用新标签页：页面监听 preview 时由页面展示抽屉（方向与宽度按所在场景约定），未接管预览时由组件展示内置左抽屉（视口 65%）。通用附件组件不常驻展示大小、格式与数量口径提示文本，超出限制上传时再提示；导入模板等专用说明文案不受此限。
• 删除、终止、退回等不可逆动作先显示确认弹窗，正文明确说明影响对象与结果。

9. 业务页面规则

台账页面

• 标准结构固定为“查询卡 -> 列表卡（工具栏 -> 表格 -> 分页）”，查询卡始终位于页面最上方。不要在查询卡中放业务操作按钮。确有统计诉求时，可在查询卡与列表卡之间加一行统计摘要卡（只读指标，不含操作按钮），不得插到查询卡之上。
• 列表卡工具栏为“左标题、右操作”两段式，使用共享 toolbar-shell：左端 table-heading 放区块标题（可附“共 N 条”说明），右端 toolbar-actions 放操作组。操作组顺序为新增、修改、删除、导出，随后是列设置/刷新类轻操作；按钮组不得整体左置，也不得只留按钮而缺左侧标题。
• 未选中数据时，修改和删除为禁用态。
• 工点库这种存在上下文选择的台账可使用左侧 280px 项目选择栏 + 右侧列表的双栏结构，两个区域间距 12px。
• 项目信息配置、工程信息配置等三栏工作台允许左树、中列表、右详情；侧栏宽度响应收缩，详情卡始终获得剩余空间，窄屏切换为纵向堆叠。

树形管理与筛选

• 树节点内容使用“可收缩名称区 + 固定宽度操作区”的横向布局；名称区设置 min-width: 0 并在溢出时省略，完整名称通过悬停提示查看。
• 节点行尾的新增下级、修改、删除等辅助操作仅显示语义色图标，按钮间距 2px–4px；必须保留原权限判断、事件阻止冒泡、危险操作确认、Tooltip 和 aria-label。面板标题栏按钮与树表操作列不适用此例外。
• 单位管理主树、部门筛选树、部门数据权限树和人员选择中的部门树默认收起，先突出根节点，按需展开；树选择下拉框保持按需展开，不强制继承页面主树状态。
• 流程分类维护树默认展开，便于浏览完整分类结构；保留“展开/折叠”控制。
• 菜单管理采用懒加载树表，首次默认收起；列表刷新时仅恢复用户已经展开的节点，不主动展开全部菜单。

固定表单流程

• 固定表单流程不是通用的“流程发起页面”。业务台账负责新增、编辑和草稿保存；查看或当前待办的“去办理”才进入流程工作台，新增或编辑不因打开弹窗而创建或改变流程实例。六类固定表单流程共用同一套工作台规范。
• 表单字段、含义、校验和路由固定在业务模块契约中，不使用动态表单配置改变业务字段含义；同一流程的查看、办理和历史记录使用同一套表单布局。
• 流程办理页的菜单名称和显示顺序遵循公共开发约定 · 流程菜单与分类命名。
• 流程工作台主体采用左右两栏：左侧为业务表单，默认只读；右侧为审批信息时间线和当前可执行操作。默认按约 62% / 38% 分配可用宽度，窄屏改为单列并保证内容可达。草稿、撤销和退回状态是否可编辑、可提交，严格按模块业务规则决定。
• 顶部信息卡固定为三栏“业务标题 / 流程信息 / 单据编号”；流程信息栏展示流程定义名称和版本号。办理动作与“流程图”同处顶部操作区；办理动作仅从模块业务规则支持、当前角色和状态可执行的动作中选取，存在时按“流程图、提交审批/同意/重新提交、退回、转办、委托、加签、减签、终止、返回”的相对顺序排列，返回始终最右。查看模式隐藏审批动作，仅保留流程图和返回。
• 业务表单使用白色 14px 圆角卡片；标题 18px/700，基础信息默认双列，区块内边距 16px 20px，行间距 12px，列间距 24px。表单较长时只允许工作区单一纵向滚动。
• 右侧审批时间线每个节点卡片采用三段信息层级：第一行显示节点名称和紧随其后的审批状态；会签/或签/票签作为协作标识固定在卡片右上角，不占用办理人和时间信息行，标签尺寸、圆角、边框和排版与审批状态一致，但使用独立于审批状态的协作色板；第二行显示当前办理人，办理人行上方间距约 2px、与时间区上方间距约 4px，保持紧凑且不悬空；第三行显示开始时间、结束时间和运行时长。节点名称和当前办理人优先使用可用宽度，显示不下时通过悬停提示展示完整内容；审批意见取消单行截断，允许自然换行并完整展示。审批意见、抄送和附件继续向下顺延，顺序为“审批意见 → 抄送 → 附件”，不单独占用时间线卡片。
• 审批时间线附件位于抄送信息下方，使用通用 FileUpload 单行紧凑展示（文件名点击预览、绿色“下载”按钮、预览方向与 65% 宽度规则见第 8 节）。业务表单附件使用同一组件，预览抽屉从左侧打开。
• 流程图从底部打开高度为视口 80% 的抽屉，抽屉只展示流程图，不在主体中重复放置流程图或复制平台“我的任务”等平台能力。

审批页面

• 固定表单流程的审批页面沿用流程工作台，不再另做一套发起页或审批页布局：左侧展示只读业务单据，右侧展示审批信息、审批意见、附件和当前操作。
• 审批操作按钮统一放在顶部操作区（动作顺序见第 9 节固定表单流程约定）。其中提交类使用绿色描边，退回使用橙色描边，转办使用蓝色描边，委托使用靛青色描边，加签使用青绿色描边，减签使用橙色描边，终止使用红色描边；每个动作提供悬停 Tooltip 说明。
• 审批弹窗预置“同意、拟同意、原则同意、请按要求落实”等快捷意见；附件文案统一为“本次审批附件”，默认不展示消息提醒选项；抄送按钮与取消、审批按钮保持同一底部操作行，已选抄送人显示在抄送按钮左侧。
• 退回文案与驳回区分：退回必须选择目标节点并填写退回意见；终止、委托、转办、加签、减签等动作保留各自确认和办理信息。流程图通过底部 80% 高度抽屉打开，不与审批信息重复占用主体空间。

10. 原型验收清单

新页面、整体布局调整或明确的整页验收，按页面类型选取通用项及台账、树表、流程工作台等适用条目；局部修改先查清影响，再核对受影响条目，不要求填写无关条目或另建报告。是否使用浏览器遵循根 AGENTS.md，由 Agent 根据实际风险判断，用户显式要求时执行；选用后从真实页面观察，不以 API 注入冒充页面验证。清单不增加固定批准点，也不将未选浏览器的任务自动交给用户。本规范中的危险动作确认指产品内的用户交互，不是修改相关代码前向用户请示。

选用浏览器核验时，业务行为在一个基准视口覆盖适用的角色、状态和动作分支；响应式和主题检查选择代表性业务状态，不将角色、状态、视口与主题做全组合。涉及这些维度之间的联动时，补测对应组合；权限、只读和失败路径仍按前端规范验证。桌面默认使用 1920 × 900 浏览器 CSS 视口，1600 × 760 检查布局收缩和内容可达性；高度计算、固定区域或临界溢出行为变化时加测 1920 × 930。

• 原型表达的业务场景、角色、数据、操作、流程和附件要求是否已实现？不核对布局、控件摆放、字段顺序等视觉还原；原型缺项不得作为业务限制的依据。
• 具体角色执行具体操作后，保存或推进结果是否符合已记录的验收示例？
• 是否存在漏做、改义或无需求来源的多做？
• 背景、表面、圆角和间距是否符合第 1 节基础视觉，取色是否使用第 2 节对应外观的主题与语义令牌？
• 普通主操作及固定表单流程动作的颜色是否符合第 2、6、9 节的语义和审批动作约定？
• 是否按本节视口范围检查台账的查询、工具栏、表格、分页及本次适用状态，并按第 7.1、7.5 节核对默认条数和分页？
• 内嵌表格或子列表穿透弹窗是否符合第 8 节的基准视口、列展示和横向滚动要求？
• 弹窗内是否只有一条纵向滚动链路（正文 .el-dialog__body 唯一滚动，无业务层嵌套滚动壳），且正文容器无横向滚动条（scrollWidth === clientWidth）？
• 收缩视口下内容是否可达，滚动链路是否符合第 7.2 节的共享工作区模式？
• 页面是否选用 .app-page-viewport、.app-page-scroll 或 .app-page-immersive 之一，并避免页面专属 calc(100vh - Npx)？
• 台账表头、内容、工具栏和操作栏是否保持单行；长文本是否省略并可悬停查看完整值？
• 是否固定左侧关键识别列和右侧操作栏，并仅让中间次要字段横向滚动？
• 右侧固定栏是否同时包含操作列与关键状态列（审批状态、审核状态、有效状态、流程状态等）？状态列是否紧邻操作列左侧，且固定组内没有夹入非固定列？
• 台账页是否以查询卡开头，统计摘要卡（如有）位于查询卡之后、列表卡之前？
• 列表卡工具栏是否为“左标题、右操作组”，操作组位于右端而不是整体左置？
• 表格/树表操作列是否均为“图标＋文字＋语义色”；树节点行尾辅助操作是否为带 Tooltip 和可访问名称的纯图标；危险动作是否保留确认？
• 工具栏和操作列的动作顺序、语义色、表头与正文对齐、按钮间距和列宽是否符合第 6、7、9 节；实际按钮是否单行完整显示，权限或状态改变显隐后是否仍无换行、裁切或异常留白？选用浏览器时在真实页面观察适用状态，不能只根据共享类名声称实际渲染通过。
• 树的默认展开状态是否符合业务：组织/部门树收起、流程分类展开、菜单懒加载树收起？
• 项目信息配置、工程信息配置等三栏工作台是否符合第 1、9 节的基准宽度和窄屏布局要求？
• 固定表单流程是否满足“台账新增/编辑、工作台查看/办理”的入口边界，且未在新增或编辑时创建流程实例？
• 工作台是否为左侧只读业务表单、右侧审批信息与操作区，状态不可编辑、按钮显隐和提交规则是否符合业务契约？
• 流程图抽屉方向和高度是否符合第 8、9 节，且未复制“我的任务”等平台能力？
• 工作台顶部是否保持“流程图在左、返回在最右”的动作顺序，审批按钮是否使用约定语义色并带 Tooltip？
• 审批时间线节点是否按“节点名称 + 审批状态 / 当前办理人 / 开始时间、结束时间、运行时长”三段顺序排列；会签、或签、票签是否固定在右上角，并与审批状态同尺寸但使用独立色板？
• 节点名称和当前办理人显示不下时是否可悬停查看完整内容；审批意见是否允许换行且没有省略号或固定高度截断？
• 业务表单与审批时间线是否共用 FileUpload，附件预览方向和宽度是否符合第 8 节，且审批时间线中抄送位于审批意见下方、附件上方？
• 图标按钮、开关和折叠导航是否拥有可访问名称，键盘焦点是否不被固定栏或弹窗遮挡？
• 深色模式下页面是否不出现白底黑字、浅底浅字或近黑文字压在深底上？覆盖查询卡、台账、表单分区、弹窗抽屉、审批时间线与状态标签。
• 修改共享主题初始化、全局主题样式或登录/注册/错误页时，是否检查受影响页面的深色显示与切换？涉及主题初始化或登录页切换时，是否验证切到深色后刷新页面的首屏不再先闪一帧浅色加载层？普通业务新页不触发这组平台主题回归。