（二）导航

1、导航菜单

顶部导航

顶部导航适用于信息层级扁平、浏览性强的门户/前台场景，一级栏目控制在 2~7 个，单个标题 2~6 个中文字符为宜。高度固定，宽度以屏幕适配。导航遵循"三步直达"原则，从首页到内容页不超过三次点击，栏目超过三层时，第三层及以下收折在内容区触发，不挤占导航区域。

侧边导航

侧边导航覆盖中后台层级管理与高频切换场景，展开态用于深度导航场景，224px 宽度完整展示多级菜单与文字标签，单行文字不超过8个字，超出...；支持三级及以下菜单的动态收折，保证操作区域与信息层级清晰；收起态用于屏效优先场景，80px 图标化/文字呈现释放横向空间给内容区，文字最多显示2个字；悬停/点击后通过浮层面板展示次级导航，维持操作连续性；响应态用于小屏适配场景，低于 1024px 时自动收折为抽屉浮层，避免挤占内容区。通过展开/收起/响应三态的平滑切换与内容区列宽的自动流式适配，实现不同设备与使用偏好下的导航体验一致性。

2、面包屑

面包屑用于显示当前页面在整个系统层级结构中的位置，帮助用户快速感知当前所处路径，并支持逐级回溯导航。提供两种面包屑样式，用于不同场景。状态分为当前页面和前续页面两种状态，点击支持跳转。层级少于三级时不显示，通过主导航即可定位。节点文字过长时，单个节点文字最多显示 10 个汉字（或等宽英文），超出部分以 ... 截断，hover 时显示完整名称；弹窗、抽屉等浮层内页面不使用面包屑，面包屑只出现在主内容区页面中。

3、标签页

标签页用于对同一页面内具有并列关系的内容进行分类切换，按样式分为常规式，适用于页面顶部内容切换，最通用，与大多数页面结构兼容；卡片式，适用于模块内嵌分类，需强化区块感或与卡片矩阵搭配时；竖状式，适用于设置页、详情页侧边分类，分类较多且需节省纵向空间；胶囊式，适用于筛选工具栏、紧凑切换场景，选中状态需强烈感知。标签数量建议控制在 2~7 个，文案保持 2~4 个中文字符，超出可视区域时支持横向滚动或收折为下拉菜单。

4、步骤条

用于引导用户按流程完成线性任务，帮助用户对操作长度和当前所处位置建立预期，步骤建议控制在 2~5 步，每步文案保持在 8 个字符以内，按方向分为横向步骤条（适用于页面顶部，流程较短）和纵向步骤条（适用于页面左侧，步骤较多或需追加详细描述），每类步骤条提供两种排版样式，步骤状态区分为未开始、进行中、已完成、报错四种。

5、分页器

分页器用于大量内容的分页加载，让用户清楚知晓数据总量、当前位置及剩余页数。提供大、小两类尺寸分页器适配不同场景，另外按形态形成多种组合方式。数据量 ≤ 1 页时不显示分页器，标准分页支持用户自定义每页条数（10/20/50/100）。