按实际业务内容组织导航、标题、查询区、工作区和操作区，明确桌面适配、中文换行与长内容处理规则。
## 任务目标 请为中国大陆企业管理系统设计清晰有序的页面布局。风格稳重、克制，以完成业务任务为主。 交付能用于评审或后续实施的具体方案、规则与样例；未要求实施的部分不声称已经落地。 ## 输入信息（选填） 两项均可留空，也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表；能读取的内容由执行者补齐。 页面布局目标：优先处理当前讨论的页面；未指定时，以现有系统默认业务入口及其核心工作区为布局范围，从已有内容识别主要任务与操作，不另造功能模块。 页面或设计资料：读取现有页面结构、公共布局、主题变量、响应式规则和真实字段样例，结合会话中的截图、品牌规范与终端要求确定设计基线。 ## 信息不完整时 先使用本次对话中已经说明的信息；用户留空、写“暂无／不清楚”或未替换输入标记，都按缺失处理，不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问，不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料，不为补齐输入擅自扩大操作范围。 ### 优先确认 - 查路由对应的页面与公共布局，识别导航、标题、查询区、数据区和操作区的关系。 - 盘点现有字号、行高、间距、宽度、组件密度与断点，区分公共约定和局部覆盖。 - 从已提供内容或字段结构检查长公司名、地址、编号、金额及操作数量，找出溢出和信息层级问题。 ### 可采用的默认处理 - 以清楚的中文政企业务界面为方向，先排信息层级和阅读顺序，再调整色彩；不添加装饰性口号、数字卡或无关插图。 - 优先复用已有尺度与布局，缺少规范时提出少量统一字号和间距建议，明确属于本项目建议。 - 宽表使用自身区域滚动，关键状态与操作保持可见；窄屏按业务任务重排，不把桌面宽表机械压缩。 ### 必须有依据的事项 - 页面主要办理任务与现有内容矛盾时，不能为美观决定删除关键字段或操作；先交付保留内容的结构整理。 - 已明确的品牌或终端限制互相冲突且影响内容可用性时，需确认适用优先级，不擅自替换品牌规范。 只有缺口会改变业务结果、权限边界或关键实现，且无法从现有资料确认时，才集中提出最多 3 个关键问题；说明影响，并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定，不逐项等待确认。 ### 资料仍不足时的交付 - 只有截图或内容清单时交付页面区域结构、对齐层级、尺寸缩放规则和长内容处理说明。 - 没有可运行页面时完成设计走查与针对目标终端的验收清单，不虚构浏览器验证或设备占比。 ## 执行要求 通过网格、栅格和统一间距建立空间秩序，断点与区域宽度由实际内容及目标终端决定，不直接套用示例尺寸。 1. 确认页面主任务、主要业务对象和最重要操作，按使用顺序排列导航、标题、查询条件、数据区和操作区。先处理信息层级，再选择颜色与装饰。 2. 盘点现有间距、字号、行高、圆角与组件密度，优先复用一致的值；没有规范时建立少量可重复使用的尺度，并标明这是项目建议。避免为每个区域创造新的卡片样式。 3. 确定固定宽度、弹性宽度和可滚动区域，给出最小与最大可用宽度。大表格可以定义表格内部滚动，但不要让整个页面无意横向溢出。 4. 设计中文标题和字段名称的换行规则，长公司名、长地址、英文编号和多位金额都要有实际策略。关键状态、金额与按钮不能被省略后丢失意义。 5. 为目标终端定义布局变化：筛选项如何收纳，主次操作如何排列，侧栏何时折叠。不要把桌面宽表简单压缩成小程序页面，应按任务另行组织移动端内容。 6. 使用已提供的真实内容检查首屏重点、阅读顺序、控件对齐、滚动区域和页面留白。无截图或可运行页面时只给设计走查结果，并列出需要浏览器验证的事项。 ## 交付与验收 输出：页面结构、区域尺寸与缩放规则、间距和字体建议、不同终端布局、长内容规则、组件清单及验收检查表。每项视觉决定用一句业务理由解释即可。 验收：主要任务清晰；同类控件对齐一致；中文无生硬断词；内容在目标宽度可读可操作；没有装饰性大标语、无来源数字和遮挡业务内容的视觉效果。 信息边界：不编造用户设备占比或浏览器验收结果；已有品牌规范与本建议冲突时列出冲突，不能冒充完成了视觉还原。 ### 本条完成检查 - 主任务及主次操作明确，同类区域与控件对齐，信息层级一致。 - 目标宽度下的滚动、缩放和长中文策略可执行，关键状态与按钮不因截断丢失含义。 - 视觉尺度有可复用依据，页面不出现虚构业务数字和遮挡办理内容的装饰。 按本条要求组织结果，使用简洁中文和一致的编号、术语、缩进及空行；已有项目格式优先。只说明实际完成的内容，将采用的假设、未完成项和缺少的条件写在相关位置，不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注，不宣称已通过或已有性能收益。 ## 参考资料与适用边界 参考来源（核验于 2026-09-08）： - [Ant Design 布局](https://ant.design/docs/spec/layout-cn/)
