# 原型 UI 规范：布局（Layout）

## 目标
- 让原型具备一致的结构层级与阅读路径，便于“场景 → 节点 → 原型”逐条评审

## Web（桌面端）全局布局
- 结构：左侧导航（可折叠）+ 顶部 Header + 内容区（白底 Card 分组）
- 导航：支持 2 级菜单；当前路由高亮；可在顶部提供全局搜索入口（占位即可）
- 内容区：默认 padding 16~24；区块间距 16；避免全屏灰底上直接堆文字

## Web 顶部 Header 规范
- 高度：建议 56（或 48），与内容区留出明确分隔（阴影或 1px 分割线）
- 左侧区域：
  - 导航折叠按钮（与左侧导航联动）
  - 产品 Logo/名称（可点击回到首页或工作台）
  - 面包屑（至少展示当前模块/页面）
- 中间区域：
  - 全局搜索入口（placeholder 即可，但需可交互）
  - 可选：快捷入口（新建/创建/发起）聚合为下拉按钮，避免堆多个 Primary
- 右侧区域（必须）：
  - 登录信息：组织/租户（如有）、用户名、当前角色（或权限组）至少展示其一
  - 消息/通知入口（占位即可）
  - Avatar 头像（必须）
- Avatar 下拉菜单（context menu，必须点击弹出）：
  - 个人资料（Profile）
  - 账号设置（Settings）
  - 切换角色（Switch role，若存在 RBAC）
  - 切换租户/门店/组织（Switch tenant/org，若存在多主体）
  - 退出登录（Logout）

## Web 页面骨架（列表型默认）
- 顶部：页面标题 + 右侧主按钮区（Primary 仅保留 1 个）
- 查询区：可折叠筛选表单（默认折叠）；常用条件不超过 3 个
- 主体：Table（含分页/排序占位），左上角显示结果条数，右上角放“刷新/列设置/导出（如涉及）”

## 列表页展示方式（按数据与任务选择）
- 默认：Table 视图（信息密度高、支持排序/分页）
- 卡片列表：当每条记录需要展示较多摘要信息或移动端优先时使用（Web 可用 Card 列表替代 Table）
- 分组列表：按状态/类型/日期分组（Group Header + 每组列表），用于“多状态混排、需要快速扫视”的场景
- 分栏视图：左侧列表 + 右侧详情（或 Drawer），用于“高频浏览与对比”，避免频繁跳转
- 视图切换：仅在确有必要时提供（例如 Table/卡片切换）；默认不做“为做而做”的多视图

## 列表查询与过滤输出规范（按复杂度选用）
- 设计原则：不是所有页面都需要复杂查询；查询控件必须由“数据量/筛选维度/使用频率/错误风险”驱动
- 快捷查询（Quick Search，适用面广）：
  - 形式：单一搜索框 + 支持回车搜索
  - 口径：明确搜索范围（例如单号/标题/申请人），不要做“全字段模糊”导致不可解释结果
  - 输出：在 UI 中用可见文案标注搜索口径（placeholder/提示文案均可）
- 快捷筛选（Quick Filters，常用条件 <= 3）：
  - 形式：Segmented/Tab（状态维度）+ 2~3 个高频筛选（例如组织、时间范围、类型）
  - 输出：默认条件必须明确（默认状态、默认时间范围等），并可一键重置
- 标准查询区（折叠表单，默认折叠）：
  - 适用：筛选维度 4~8，且需要“精确筛选”
  - 输出：展开后字段分组清晰（基础条件/高级条件），且提供“查询/重置”
- 复杂查询（Advanced，按需）：
  - 仅在确有需求时启用：例如字段 > 8、组合条件频繁、需要保存视图/复用条件
  - 输出要求：必须提供“条件标签/已选条件汇总”，避免用户不知道当前生效了什么
  - 可选：保存常用条件为“我的视图/快捷查询”，但不强制每个页面都具备

## 列表-详情联动（推荐默认）
- 列表行点击：打开右侧详情 Drawer（而不是跳转新页面），便于快速浏览与对比
- Drawer 宽度：建议 60%~70%（或 720~960），保持列表仍可见
- Drawer 内容：与“详情型默认”一致（基础信息 + Tabs），Tabs 里包含“操作履历/审批记录/附件/关联对象”
- Drawer 内编辑：点击“编辑”再打开二级 Drawer 或切换到编辑态；避免多层 Drawer 叠加超过 2 层

## Web 页面骨架（详情型默认）
- 基础信息：Descriptions（2~3 列）展示关键字段与状态 Tag
- 操作区：按状态/角色显示按钮（Primary <= 1，危险操作用 Danger）
- 附加区：Tabs 承载“操作履历/附件/审批记录/关联对象”等

## 表单页（新建/编辑）
- 默认承载：从列表页打开 Drawer 表单（与“列表-详情联动”一致）
- 表单分段：按业务结构拆成 2~4 个 Card/分区（基础信息/明细/补充信息/附件等）
- 底部操作栏：提交/保存草稿/取消（可吸底），保持长表单可操作
- 复杂表单：用 Tabs 或 Steps 拆分；拆分后仍要保证校验与错误提示可回溯到具体字段

## 步骤页（Step/Wizard）
- 顶部：Steps 进度条（明确当前步骤与总步骤数）
- 内容：每步内容用 Card/分区承载，单步内避免过长滚动
- 操作区：上一步/下一步/保存草稿/取消；主按钮仅保留一个 Primary
- 回退策略：允许回到上一步修改，已填内容需保留（mock 即可但需可演示）

## 审批页（Approval）
- 顶部：标题 + 状态 Tag（待审批/已通过/已驳回/已取消等）+ 关键编号（如单号）
- 基础信息：Descriptions 展示关键字段（申请人/时间/金额/对象/原因等）
- 审批信息区：
  - 当前节点信息（当前审批人/候选人/截止时间占位）
  - 审批记录 Timeline（必须可见）
- 操作区：
  - 同意/驳回（必备），转交/加签/撤回（按需占位）
  - 操作按钮统一放在页顶右侧或吸底操作栏，避免散落在多个区域

## Mobile（移动端）全局布局
- 结构：顶部栏 + 内容区 +（按需）底部吸底操作栏
- 内容区：默认 padding 12~16；区块间距 12；列表项用 Card/List 组合，避免 Table
- 操作：底部主操作（如提交/确认）优先吸底；次要操作收纳到更多菜单或二级页面

## 响应式与可评审性
- Web 页面在窄屏下保持可用：导航可折叠，表格列可省略为摘要列（占位即可）
- 所有页面需可通过路由直接访问；避免仅能从某个页面点击进入
