信息密度标准

DirectSurface UI 面向传统后台管理系统和桌面式业务软件，设计目标接近 DevExpress、WinForms/WPF 管理端控件套件，而不是营销站点或面向消费者的低密度页面。页面应优先承载查询、维护、录入、审核、调试和工作台任务，让用户在一个视口内看到足够多的有效信息。

高信息密度不等于拥挤。组件仍要保持状态清晰、命中稳定、文本可读、布局不跳动；它反对的是大面积留白、层层卡片、过大的 padding/margin 和装饰性标题占据主要视口。

设计目标

后台页面默认采用紧凑、工作导向的密度：

一个页面优先展示查询条件、操作入口、主数据区和当前上下文，而不是大标题、大说明和大卡片。
表格、树、列表、表单、工具栏和工作区 chrome 是主角；装饰背景、阴影和营销式视觉应保持克制。
常用操作保持可见，低频操作进入 toolbar overflow、context menu、更多菜单或二级弹窗。
页面默认不做 hero、宣传型封面、图文大卡片或大面积居中空状态。
登录、品牌页、欢迎页可以独立设计，但进入工作台后应回到后台密度。

密度层级

组件和页面可以提供三档密度，但后台管理系统默认使用 dense。

层级	适用场景	设计取向
`dense`	查询维护、表格录入、字典管理、医嘱/病历/审计工作台、调试工具。	小间距、高可读、强对齐、主内容占满剩余空间。
`regular`	设置页、详情页、普通业务表单、弹窗编辑。	保持可读和分组，不追求展示最多字段。
`comfortable`	登录、欢迎页、空白引导、演示首页、低频配置向导。	增加呼吸感，但不作为后台工作页默认密度。

业务页面需要表达密度差异时，应优先使用公开的主题 token 或组件 options，不要在不同页面分别写死多套 padding。

页面结构

后台页面推荐从稳定分区开始：

Page / Tab
  PageHeader / compact title bar
  Query / Filter region
  Toolbar / CommandToolbar
  Main data region flex=1
  Detail / Status / Side panel

规则：

主数据区应使用 flex 或 dock fill 占满剩余高度。
查询条件、工具栏和分页不要挤占主数据区过多高度。
外层页面 padding 应克制；内层分组不再重复大 padding。
不把每个业务块都包成 Card。普通业务页优先使用 Section 或无框布局。
卡片只用于独立信息块、指标卡、登录/欢迎页、对象摘要或需要明确背景的局部区域。
复杂页面允许多区域分割，但每个区域都应有明确任务：查询、列表、详情、编辑、审计、诊断。

间距和尺寸

以下是后台默认建议值。具体数值应从 ThemeData 或组件级 token 派生。

对象	dense 建议	regular 建议	说明
页面外边距	8-12	12-16	工作台 tab 内不建议超过 16。
区块间距	6-10	10-14	查询区、toolbar、表格之间保持紧凑。
表单行距	6-8	8-12	高密录入优先使用 EntryGrid。
表单列距	10-16	16-24	避免字段互相贴近，但不要制造大空洞。
工具栏高度	32-36	36-40	图标和文字按钮命中区稳定。
普通控件高度	28-32	32-36	由主题 controlHeight 控制。
表格行高	28-32	32-36	大数据表格优先 dense。
表头/过滤行高度	28-32	32-36	过滤行应显示摘要，不做大输入区。
侧边导航宽度	220-260	240-280	允许折叠 rail 或搜索。

避免：

页面根部 padding: 24/32 作为默认工作页样式。
Section/Card 之间使用大段 margin 制造“分区感”。
每个表单字段独立包一层带 padding 的容器。
表格上方堆叠大标题、大说明、大查询卡片、大操作栏。

查询区

查询区通常短而密集：

简单查询可用一行横向输入 + 查询按钮。
多条件查询使用 RenderEntryGrid 或 RenderFormPanel，常用 3-4 列。
高级条件默认可折叠，不应把低频条件常驻挤占表格高度。
查询、重置、导出等操作靠近查询条件；批量操作靠近表格 toolbar。
字段变化通常只更新 query draft，点击查询后再刷新大表格。

表格、树和列表

数据组件是后台系统的核心承载区：

表格、树表、树和列表应占据页面主要面积。
大数据使用组件内置虚拟化、可视区绘制、列宽限制和滚动管理。
行操作优先使用紧凑图标按钮、context menu 或 toolbar 命令，不在每行放多个大按钮。
空值使用稳定占位，例如 -，避免空白造成列错读。
状态、标签、数量使用 Badge/Chip 的 compact 形态，而不是宽大的色块。
多列文本默认 ellipsis；完整内容通过 tooltip、详情面板、弹窗或单元格编辑器查看。

不要在表格外层再套同方向 ScrollViewer。表格应自己管理滚动、选中、复制、排序、筛选和编辑。

表单和详情

表单应根据任务选择密度：

查询表单和维护表单默认 dense。
审核、配置、低频设置可用 regular。
长表单先分组，再在每组内保持紧凑对齐。
高密字段使用 RenderEntryGrid + RenderFieldPresenter，不要手写坐标。
表格单元格编辑使用 GridView 编辑器或 popup editor，不把完整表单塞进单元格。
页面级保存、取消、审核、提交放在固定操作区或命令栏，不依赖滚动到底部。

字段 label 应稳定对齐。超长 label 优先省略或 tooltip，不应把整列撑到很宽。

工具栏和命令

后台系统操作多，工具栏应清楚但克制：

常用命令直接显示，危险命令和低频命令可放入更多菜单。
图标按钮用于标题栏、表格行、窗口 chrome 和紧凑工具区。
文字按钮用于明确命令，例如查询、保存、提交、审核。
权限、流程状态和加载状态应通过命令系统统一映射 visible/enabled。
toolbar group 之间可以有分隔，但不靠大 margin 分组。

浮层和反馈

反馈不应打断高频工作流：

成功反馈优先使用轻量 notification/toast 或状态栏，不频繁弹 modal。
错误需要用户修正时，放在字段、表格状态层或当前区域附近。
删除、提交、归档等高风险操作使用确认弹窗。
查询无结果是 empty 状态，不是错误。
弹窗用于短流程编辑或确认；复杂维护应打开页面、抽屉或工作区 tab。

禁止模式

把后台页面做成 landing page。
默认使用大 hero、大图、大宣传文案。
每个区块都套 Card，形成 Card inside Card。
用大 padding/margin 替代真实分组。
用大面积空状态替代可操作入口。
为了“显得高级”降低表格行数、字段数量和主内容面积。
页面根部只有少量信息，却占满一个视口。

评审检查

评审后台组件或页面时，至少检查：

首屏是否能看到核心查询/操作/主数据区。
主数据区是否占据剩余空间，而不是被标题、说明、卡片和留白挤压。
默认间距是否来自 token，是否适合 dense 工作页。
是否优先使用 Section、EntryGrid、GridView、Toolbar 等后台组件。
是否避免 Card 堆叠和大面积装饰。
窄宽度下是否有明确降级策略：折叠查询、高级筛选、列隐藏、overflow menu、详情面板收起。
弹窗、通知、空状态是否服务当前任务，而不是遮挡或打断高频操作。