品牌1设计系统规范 <!-- 🏷️ 标题区-主标题：28px/Bold/#262626，对应 → GW/标题区示例.html .title-main -->
版本：1.6 | 更新日期：2026年6月10日 | 适用范围：品牌1产品PC端/移动端/大屏所有界面 <!-- 🏷️ 标题区-元信息行：14px/Regular/#7B8EA2，对应 → GW/标题区示例.html .title-meta -->
> 基于 v1.4 版本修复上下关系映射问题，统一语义定义，规范色板交叉引用。v1.6 新增 §3.4 典型页面布局间距规范，整合三种页面类型的布局结构与间距规则。 <!-- 🏷️ 标题区-引语：14px/Regular/#7B8EA2，Neutral-3背景左侧装饰线，对应 → GW/标题区示例.html .title-quote -->
目录
- 一、视觉主题与色彩体系
- 二、字体排版规则
- 三、间距与布局系统
- 3.4 典型页面布局间距规范 - 四、深度与阴影层次
- 五、组件样式
- 六、交互行为与动效
- 七、设计规范
- 八、特定组件指南
- 九、数据格式与文案规范
- 十、单图形组件布局与图表规范
- 十一、典型界面模板布局规范
一、视觉主题与色彩体系
1.1 视觉主题与氛围
品牌1设计系统的视觉语言，建立在一种克制的东方诗学之上——以"雪域白"（#FFFFFF、#F1F6F7）为画布，以"青矾绿"（#07978D）为灵魂笔触。它的设计质感如同一册精心装帧的工程手稿：干净、严谨，且足够自信地让功能性自我表达（考虑到品牌1面向电力与财务等B端专业场景，这恰如其分）。
白色在这里是有温度的。区别于纯白带来的冰冷感，品牌1的中性色基底融合了微妙的水灰色调（#F5F8F8、#E4EDF0），让页面背景呈现出类似宣纸的温润质感。这种白色的层次并非简单堆叠——从容器背景 #F1F6F7 到页面背景 #E4EDF0，再到分割线 #DCE1EA，每一层都带着克制的灰度递进，如同中国传统水墨中"墨分五色"的细腻追求，只是将墨色替换成了现代工业语境下的精密灰度阶梯。
青矾绿（#07978D）的选择极具巧思。它既非翡翠的张扬，亦非松石的跳脱，而是一种沉淀后的生机——像铜器表面经年累月形成的铜绿，温润、沉稳，却又暗含着生命力。这种绿色不发出喧哗的邀请，而是以近乎沉默的姿态出现在关键交互节点：按钮的焦点态、输入框的激活边框、导航的当前指示器。它不是用来抢占视线的，而是用来引导方向的——如同山林间一条不起眼却可靠的小径标记。
排版系统建立在一种实用主义的二元性之上：思源黑体以其中宫开阔、字形刚正的性格承担所有界面文字，笔画间透露出工程文档般的精确感与秩序感。这套字体的选择不是审美的炫技，而是功能性的深思熟虑——在B端产品的高密度信息场景下，每一个字符的清晰可辨都是对用户时间的尊重。所有正文文本使用略微正直的间距设定（0.14px–0.18px），赋予长篇阅读一种通透、呼吸舒适的节奏。标题则用Bold字重（700）形成明确的视觉锚点，在大片灰色信息流中建立起层级的地标。
让品牌1设计系统与众不同的是其阴影哲学——不是没有阴影，而是让阴影几乎消失。每一层阴影都经过精密的不透明度调配（#252B30 作为统一阴影源色，不透明度从 2% 到 16% 逐层递进），形成的效果并非让元素"浮起"，而是让它们几乎不存在地悬浮——以最轻盈的方式停留在页面上方，仿佛只是空气密度的微妙变化。这种设计语言传达出一种自信：真正的专业工具不需要通过视觉重量来宣示自己的存在。
圆角的使用同样遵循这套克制美学。2px 的基础圆角（按钮、输入框）几乎不易察觉，它只是温柔地消解了直角可能带来的生硬感；4px 的卡片圆角让内容区块获得恰当的归属感，却不会因过度圆润而削弱专业气质。这种极低曲率的圆角选择，让人联想到精密仪器上经过倒角处理的金属边缘——不是为了装饰，而是为了触感的舒适与使用的耐久。特殊场景（如对话框）允许使用 8px 圆角以营造独立的容器层次感，此为唯一超出基础范围的例外情况。
药丸形标签（9999px 圆角）是系统中唯一的高曲率元素，它们如同白色画布上偶尔出现的精巧徽章，以 Brand-6 背景配合白色文字，形成精确的信息分类锚点。
核心特征：
- 雪域白画布搭配水灰底色（
#F5F8F8、#E4EDF0），营造温润如宣纸的质感 - 青矾绿（
#07978D）作为品牌灵魂色——沉稳、内敛、带有沉淀后的生机 - 思源黑体承担全部界面文字，中宫开阔，精确传达信息层级
- 正字间距（0.14–0.18px）赋予正文通透的阅读节奏
- 多层低不透明度阴影叠加（
#252B30统一阴影源，2%–16% 逐层递进），元素以最轻盈的方式悬浮 - 2px–4px 微曲率圆角（对话框允许 8px 作为例外），传递精密仪器的倒角质感
- 药丸形标签（9999px）作为唯一高曲率元素，形成精确的信息分类锚点
- 60:30:10 配色法则：60% 中性色（雪域白灰）、30% 功能色（语义色系）、10% 强调色（青矾绿）
- 间距系统以 8px 为最小单元、12px 为主干单位，如同建筑模数般严整
1.2 品牌色序列
| 命名 | 色值 | 用途 |
|---|---|---|
| Brand-10 | #000000 | 最深 |
| Brand-9 | #002324 | 更深 |
| Brand-8 | #004545 | 点击状态、激活态 |
| Brand-7 | #00706B | 深色 |
| Brand-6 | #07978D | 常规状态、主色、青矾绿 |
| Brand-5 | #22A396 | 悬停状态 |
| Brand-4 | #41B0A1 | 边框悬停 |
| Brand-3 | #64BDAE | 浅色 |
| Brand-2 | #8BC9BD | 禁用状态 |
| Brand-1 | #EBF9FA | 浅色背景 |
1.3 中性色序列
| 命名 | 色值 | 用途 |
|---|---|---|
| Neutral-10 | #262626 | 深色、标题/正文 |
| Neutral-9 | #7B8EA2 | 次要文字 |
| Neutral-8 | #A1B0BF | 禁用文字 |
| Neutral-7 | #B7BCC6 | 边框悬停 |
| Neutral-6 | #DCE1EA | 边框/分割线 |
| Neutral-5 | #EBECEF | 禁用背景 |
| Neutral-4 | #E4EDF0 | 页面背景 |
| Neutral-3 | #F5F8F8 | 容器背景3 |
| Neutral-2 | #F1F6F7 | 容器背景2 |
| Neutral-1 | #FFFFFF | 白色背景、容器背景 |
| Neutral-11 | #F7F9FA | 标题栏背景（页面顶部专用） |
1.4 功能色序列
包含成功、警告、错误、进行四种语义，每类提供"常规/边框"、"浅色边框"、"浅色背景"三级色值：
| 功能类型 | Token | 常规/边框 | 浅色边框 | 浅色背景 | 应用场景 |
|---|---|---|---|---|---|
| 成功色（Success） | Success-6 | #0FB886 | #A9EBCE | #E0F7EC | 操作成功、积极状态 |
| 警告色（Warning） | Warning-6 | #FD824C | #FFC19E | #FFF6F0 | 需要注意、警告信息 |
| 错误色（Error） | Error-6 | #E5524C | #FFAFA6 | #FFF2F0 | 操作失败、错误提示 |
| 进行色（Progress） | Progress-6 | #1875F0 | #6AB5FF | #BDE2FF | 处理中、进行状态 |
1.5 渐变色序列
| 渐变命名 | 颜色组合 | 用途 |
|---|---|---|
| Gradient-1 | #07978D → #027C76 | 焦点 |
| Gradient-2 | #22A396 → #0C867A | 焦点悬停 |
| Gradient-3 | #027C76 → #07978D | 焦点点击、激活 |
| Gradient-4 | #FFFFFF → #F5F5F8 | 普通 |
| Gradient-5 | #FFFFFF → #E9EEF5 | 普通悬停 |
| Gradient-6 | #E2E8F0 → #FFFFFF | 普通点击、激活 |
| Gradient-7 | #55D1A3 → #0FB886 | 成功 |
| Gradient-8 | #FFC19E → #FD824C | 警告 |
| Gradient-9 | #FFAFA6 → #E5524C | 错误 |
| Gradient-10 | #1875F0 → #6AB5FF | 信息/进行 |
| Gradient-11 | #B7BCC6 → #7B8EA2 | 禁用/次要信息 |
| Gradient-12 | #07978D → #0C59C3 | 卡片选中色 |
1.6 文字与背景配色
| 场景 | 前景色 | 背景色 | 对比度 | 适用场景 |
|---|---|---|---|---|
| 主要文本 | Neutral-10 | Neutral-1 | 9.8:1 | 标题、正文内容 |
| 次要文本 | Neutral-9 | Neutral-1 | 3.7:1 | 辅助说明、时间戳 |
| 禁用文本 | Neutral-8 | Neutral-1 | 2.9:1 | 禁用状态文字 |
| 反白文本 | Neutral-1 | Neutral-10 | 15.8:1 | 深色背景上的文字 |
二、字体排版规则
2.1 字体系列
- 中文：思源黑体
- 英文/数字：Arial
2.2 字号与字重体系
| Token | 字号 | 字重 | 用途 |
|---|---|---|---|
--font-size-1 |
10px | Regular | 辅助小字、标签 |
--font-size-2 |
12px | Regular | 次级说明、时间戳 |
--font-size-3 |
14px | Regular | 正文（默认） |
--font-size-4 |
16px | Bold | 模块标题 |
--font-size-5 |
18px | Bold | 页面大标题 |
--font-size-6 |
20px | Bold | 页面主标题 |
--font-size-7 |
22px | Bold | 一级标题 |
--font-size-8 |
24px | Bold | 展示标题 |
--font-size-9 |
28px | Bold | 页面标题（主导航级） |
--font-size-10 |
30px | Bold | 超大标题（特殊场景） |
--font-size-11 |
36px | Bold | 展示标题（大型广告/报告） |
> 说明：Token 编号与字号大小同步递增（越大号越大），用途命名按实际使用场景描述，避免层级歧义。
2.3 字重规范
| Token | 字重值 | 用途 |
|---|---|---|
--font-weight-light |
200 | 轻字重，辅助信息 |
--font-weight-normal |
400 | 常规字重，正文 |
--font-weight-medium |
500 | 中等字重，强调 |
--font-weight-semibold |
600 | 半粗体，子标题 |
--font-weight-bold |
700 | 粗体，标题 |
--font-weight-heavy |
800 | 特粗体，大标题 |
2.4 行高规范
| Token | 行高值 | 用途 |
|---|---|---|
--line-height-1 |
1 | 紧凑行高，单行文本 |
--line-height-2 |
1.5 | 标准行高，多行文本 |
--line-height-3 |
1.8 | 宽松行高，长文本 |
三、间距与布局系统
3.1 间距系统
| 间距 | 水平用途 | 垂直用途 |
|---|---|---|
| 4px | 内容容器与关联控件之间 | 容器内关联控件间距（如工具栏按钮间） |
| 6px | 局部工具栏与下方表格之间 | — |
| 8px | 除常规12px/16px外的备选间距 | 除常规12px/16px外的备选间距 |
| 12px | 各容器上下间距、同容器内各组元素间距 | 组内各元素间距 |
| 16px | 不同组之间间距（如表与表之间） | 容器与同容器内组之间的间距 |
基础布局参数：
- 容器左右间距：16px，上下间距：12px
- 表单行间距：12px
- 控件默认高度：28px（内容垂直居中、水平左对齐）
- 最小间距单位：4px；主要间距单位：12px
基础布局间距使用注意：
- 带顶部导航页面与页面标题区上下间距为0px
- 查询与列表的页面标题区与查询面板上下间距为0px
3.2 网格系统
- 基于 24列网格系统
- 水槽固定 16px
- 两侧固定留白各 16px
响应式断点：
| 名称 | 宽度 | 主要变化 |
|---|---|---|
| 小型（sm） | 320px | 单列排列、紧凑间距 |
| 中型（md） | 672px | 开始多列布局、常规间距 |
| 大型（lg） | 1056px | 完整功能显示、标准间距 |
| 超大型（xlg） | 1312px | 最大内容密度、优化间距 |
| 最大 | 1584px | 最大内容宽度、居中布局 |
3.3 布局层级深度
| 层级 | 处理方式 | 用途 |
|---|---|---|
| 路基层（Level 0） | 无阴影，Neutral-1背景 | 默认页面表面，直接连接页面根元素 |
| 漂浮层（Level 1） | --shadow-1，Neutral-1背景 | 卡片、列表项目，略高于页面表面 |
| 悬浮层（Level 2） | --shadow-2，Neutral-1背景 | 下拉菜单、悬浮窗、浮动状态 |
| 模态层（Level 3） | --shadow-3，Neutral-1背景 | 模态框、对话框，需完全用户注意 |
3.4 典型页面布局间距规范
基于品牌1产品常见的三种页面类型——内页结构（后台表单/列表页）、门户首页（品牌展示/仪表板首屏）、数据分析主页（图表看板/数据驾驶舱）——统一规定布局结构与间距规则。
3.4.1 布局结构共性
所有三种页面均采用垂直单列流式布局（flex-direction: column），区域从上至下依次排列。页面主体内容设置最大宽度（推荐 1200px）并水平居中，左右内边距统一为 16px–24px。通栏区域（如导航区）宽度为 100% 或 1920px 满宽。
通用区域序列（由上至下）：
- 顶部导航区（固定高度，全宽）
- 次级导航区（页面导航/页签，视页面类型可选）
- 内容区域（根据页面类型，由查询区、英雄区、卡片区、内容区块等组成）
- 底部留白（最后一个区域与页面底部保持间距）
3.4.2 间距统一规则
所有页面的上下间距（margin/padding 垂直方向）与左右间距遵循以下取值区间：上下间距 4px–32px，左右间距 4px–24px。
上下间距规范
| 场景 | 间距值 | 实现方式 |
|---|---|---|
| 相邻两个主要区域之间 | 16px – 24px（推荐 16px 或 24px） | 上方区域 margin-bottom，或下方区域 margin-top |
| 最后一个区域与页面底部 | 16px – 24px（不低于 16px） | 父容器底部 padding 或最后一个元素 margin-bottom |
| 区域内内容与边框（内边距） | 16px | padding-top/bottom: 16px |
| 紧凑型页面（如数据看板） | 4px 或 8px | 减少留白，提升信息密度 |
| 门户页面（视觉呼吸感） | 24px 或 32px | 增强模块区分 |
各页面类型的间距映射
| 页面类型 | 主区域间距 | 页面底部留白 | 区域内上下内边距 | 左右内边距 |
|---|---|---|---|---|
| 内页结构 | 16px（查询区与标题区之间） | 16px | 16px | 16px–24px |
| 门户首页 | 24px（英雄区↔卡片区↔内容区之间） | 24px | 16px | 16px–24px |
| 数据分析主页 | 24px（模块之间） | 24px | 16px | 16px–24px |
3.4.3 三种页面类型差异对比
| 维度 | 内页结构 | 门户首页 | 数据分析主页 |
|---|---|---|---|
| 区域序列 | 导航区 → 查询区 → 内容标题区 | 导航区 → 英雄区 → 卡片区 → N个内容区 | 导航区 → 二级导航区（页签） → 卡片区 → N个内容区 |
| 上下主间距 | 16px（查询区与标题区之间） | 24px（各区之间） | 24px（各区之间） |
| 左右间距 | 16px–24px | 16px–24px | 16px–24px |
| 特殊性 | 无英雄区或卡片区，偏后台表单页；查询区与导航区紧贴 | 需要强烈视觉分层，使用更大间距；英雄区为全宽通栏 | 内容区数量可变，使用 :last-child 控制底部留白 |
3.4.4 内页结构详细规范
内页结构适用于后台管理系统的查询/列表/表单页，整体采用垂直单列流式布局，包含三个核心区域。
区域序列与间距：
┌──────────────────────────────────────────────┐
│ 页面标题区（固定高度，全宽） │
│ margin-bottom: 0 │
├──────────────────────────────────────────────┤
│ 查询区（卡片背景） │
│ padding: 16px（上下内边距） │
│ margin-bottom: 16px │
├──────────────────────────────────────────────┤
│ 内容标题区（页面标题/表格标题） │
│ margin-bottom: 16px（下方为表格/列表时保持） │
├──────────────────────────────────────────────┤
│ （后续内容：表格/列表/表单） │
│ padding-bottom: 16px（底部留白） │
└──────────────────────────────────────────────┘
> 注：此处的"页面标题区"对应 §5.8 页面-标题区组件规范，在内页结构中作为顶部栏使用，与 §5.4 全局导航/顶栏为二选一关系。
各区域详细说明：
| 区域 | 布局方式 | 尺寸 | 背景 | 内边距 | 备注 |
|---|---|---|---|---|---|
| 页面标题区 | 固定顶部，全宽 | 1920×50px（通栏满宽） | Neutral-11 #F7F9FA | 0px 16px（左右） | 标题栏阴影：0px 2px 4px 0px rgba(37,43,48,0.08)（参见 §5.8） |
| 查询区 | 自动撑开，卡片背景 | 高度不固定，宽100% | Neutral-1 #FFFFFF | padding: 16px | 含查询表单与按钮，圆角4px，阴影--shadow-1 |
| 内容标题区 | 左对齐行内布局 | 高度约40–50px | 无背景或Neutral-1 | — | 左侧面包屑/标题，右侧可配操作按钮 |
间距规则：
- 页面标题区与查询区之间：标题区 margin-bottom: 0（紧贴），查询区通过自身 padding-top: 16px 提供实际视觉间距
- 查询区与内容标题区之间：查询区 margin-bottom: 16px
- 内容标题区与后续内容之间：标题区 margin-bottom: 16px
- 页面底部留白：padding-bottom: 16px（由页面主容器提供）
- 响应式：小屏（<768px）查询区表单项可换行，间距保持不变
3.4.5 门户首页详细规范
门户首页适用于品牌展示/仪表板首屏，需要强烈视觉分层，各区域间使用更大间距以增强呼吸感。
区域序列与间距：
┌──────────────────────────────────────────────┐
│ 顶部导航区（固定高度，全宽） │
│ margin-bottom: 0 │
├──────────────────────────────────────────────┤
│ 英雄区（全宽通栏） │
│ margin-bottom: 24px │
├──────────────────────────────────────────────┤
│ 卡片区（指标卡/功能入口卡） │
│ margin-bottom: 24px │
├──────────────────────────────────────────────┤
│ 内容区 1~N（图文/列表/图表） │
│ margin-bottom: 24px │
│ 最后一个内容区：margin-bottom: 0 │
├──────────────────────────────────────────────┤
│ 底部留白 │
│ padding-bottom: 24px │
└──────────────────────────────────────────────┘
间距规则：
- 导航区与英雄区：紧贴（margin-bottom: 0）
- 英雄区与卡片区：margin-bottom: 24px
- 卡片区与第一个内容区：margin-bottom: 24px
- 多个内容区之间：margin-bottom: 24px
- 最后一个内容区与页面底部：由父容器 padding-bottom: 24px 提供
- 内容区内部：padding: 16px（内容区内边距）
- 左右间距：页面主体容器左右 padding: 16px–24px
特殊性说明：
- 英雄区通常为全宽通栏，背景色与主体区分
- 卡片区可横向排列（≤4个/行），支持横向滚动
- 内容区数量可变，使用 :last-child 或容器底部 padding 控制底部留白
3.4.6 数据分析主页详细规范
数据分析主页适用于数据看板/驾驶舱/BI分析页，包含多个可配置的内容区块，模块之间严格采用 24px 间距。
区域序列与间距：
┌──────────────────────────────────────────────┐
│ 顶部导航区（固定高度，全宽） │
│ margin-bottom: 0 │
├──────────────────────────────────────────────┤
│ 二级导航区（页签） │
│ margin-bottom: 0 │
├──────────────────────────────────────────────┤
│ 卡片区（统计指标卡） │
│ margin-bottom: 24px │
├──────────────────────────────────────────────┤
│ 内容区 1（图表/表格） │
│ margin-bottom: 24px │
├──────────────────────────────────────────────┤
│ 内容区 2（图表/表格） │
│ margin-bottom: 24px │
├──────────────────────────────────────────────┤
│ 内容区 N（数量可变） │
│ margin-bottom: 0（last-child） │
├──────────────────────────────────────────────┤
│ 底部留白 │
│ padding-bottom: 24px │
└──────────────────────────────────────────────┘
间距规则：
- 导航区与二级导航区：紧贴（margin-bottom: 0）
- 二级导航区与卡片区：紧贴（margin-bottom: 0）
- 卡片区与第一个内容区：margin-bottom: 24px
- 多个内容区之间：margin-bottom: 24px
- 最后一个内容区：margin-bottom: 0（使用 :last-child 选择器）
- 页面底部：父容器 padding-bottom: 24px
- 内容区内部：padding: 16px（图表面板内边距，参见 §10.7 空间布局规范）
- 左右间距：页面主体容器左右 padding: 16px–24px
特殊性说明：
- 内容区数量可变，通过 :last-child 控制最后一个区块的底部外边距归零，避免与父容器底部 padding 叠加
- 二级导航区采用页签/选项卡形式（可选），与顶部导航区紧贴
- 卡片区展示关键 KPI 指标，支持选中状态（参见 §5.9.3）
- 内容区中可嵌入单图形组件（参见 §10.1–10.2）
3.4.7 总结
> 所有三种页面（内页结构、门户首页、数据分析主页）均采用垂直单列流式布局，主体内容区域左右内边距统一为 16–24px。上下间距方面，主要模块之间推荐使用 24px；数据分析主页严格采用 24px，内页结构采用 16px。最后一个内容区域与页面底部之间保留 16–24px 的额外留白，避免内容贴底。
四、深度与阴影层次
4.1 基础阴影
所有阴影统一使用 #252B30 作为阴影源色。
| Token | 颜色组合 | 用途 |
|---|---|---|
--shadow-1 |
0px 0px 2px 0px #252B3029, 0px 2px 8px 0px #252B301F, 0px 4px 16px 0px #252B3014 | 卡片、列表项 |
--shadow-2 |
0px 4px 8px 0px #252B301F, 0px 8px 16px 0px #252B3014, 0px 24px 32px 0px #252B300A | 弹窗、下拉菜单 |
--shadow-3 |
0px 8px 16px 0px #252B3014, 0px 16px 32px 0px #252B301F, 0px 24px 48px 0px #252B3029 | 模态框、对话框 |
4.2 辅助阴影
| Token | 颜色组合 | 用途 |
|---|---|---|
--shadow-steps-1 |
2px 2px 10px 0px #252B301F | 步骤条阴影 |
--shadow-steps-2 |
2px 2px 10px 0px #252B3033 | 步骤条阴影（深色） |
--shadow-special |
2px 2px 3px 0px #DFEBE850 | 特殊高亮效果 |
4.3 内阴影
| Token | 颜色组合 | 用途 |
|---|---|---|
--shadow-inner-1 |
inset 0px 0px 2px 0px #252B3029, inset 0px 2px 8px 0px #252B301F, inset 0px 4px 16px 0px #252B3014 | 小内阴影 |
--shadow-inner-2 |
inset 0px 4px 8px 0px #252B301F, inset 0px 8px 16px 0px #252B3014, inset 0px 24px 32px 0px #252B300A | 中内阴影 |
--shadow-inner-3 |
inset 0px 8px 16px 0px #252B3014, inset 0px 16px 32px 0px #252B301F, inset 0px 24px 48px 0px #252B3029 | 大内阴影 |
五、组件样式
5.1 按钮
| 类型 | 背景 | 文字 | 悬停 | 激活 | 边框 | 圆角 |
|---|---|---|---|---|---|---|
| 主要按钮 | Brand-6 #07978D | Neutral-1 #FFFFFF | Brand-5 #22A396 | Brand-8 #004545 | — | 2px |
| 次要按钮 | Neutral-4 #E4EDF0 | Neutral-10 #262626 | Neutral-6 #DCE1EA | Brand-1 #EBF9FA | — | 2px |
| 危险按钮 | Error-6 #E5524C | Neutral-1 #FFFFFF | Warning-6 #FD824C | #BF3636 | — | 2px |
| 幽灵按钮 | 透明 | Brand-6 #07978D | Brand-5 #22A396 | Brand-8 #004545 | 1px solid Brand-6 | 2px |
- 默认高度：28px
- 触摸目标：按钮默认高度 28px，实际可点击区域应通过 padding 扩展至最小 44×44px（详见 §6.2）
5.2 卡片与容器
| 属性 | 默认 | 悬停 |
|---|---|---|
| 背景 | Neutral-1 #FFFFFF | — |
| 边框 | Neutral-6 #DCE1EA | Neutral-7 #B7BCC6 |
| 圆角 | 4px | — |
| 阴影 | --shadow-1 | --shadow-2 |
5.3 输入框与表单
- 背景：Neutral-1 #FFFFFF
- 边框：Neutral-6 #DCE1EA（焦点：Brand-6 #07978D；错误：Error-6 #E5524C）
- 圆角：2px | 高度：28px | 文字：Neutral-10 #262626
5.4 全局导航/顶栏
适用场景： 用于门户首页、数据分析主页等页面的顶部全局导航，使用优先级高于页面标题栏。品牌1产品中，全局导航/顶栏与页面标题栏为二选一关系，全局导航/顶栏优先用于门户及数据分析类页面。
> ⚠️ 二选一规则：全局导航/顶栏与页面标题栏禁止同时出现在同一页面中。若因业务需要意外共存，全局导航/顶栏的 z-index 必须高于页面标题栏（推荐全局导航 z-index: 2，页面标题栏 z-index: 1），确保顶部导航区始终处于最高视觉层级。
| 属性 | 值 |
|---|---|
| 定位 | position: fixed; top: 0；z-index: 2 |
| 尺寸 | 1920 × 64px（通栏满宽） |
| 布局 | Flexbox，display: flex，justify-content: space-between，align-items: center |
| 内边距 | 4px 24px（上下左右） |
| 背景 | linear-gradient(180deg, #F2F5F9 0%, #FFFFFF 100%) |
| 阴影 | 0px 2px 4px 0px rgba(118, 146, 199, 0.2) |
| 文字 | Neutral-10 #262626 |
| 悬停 | Brand-5 #22A396 |
| 激活 | 下边框指示器 |
> 层级关系：门户首页/数据分析主页中，顶部导航（z-index: 2）> 页面标题栏/英雄区（z-index: 1），两者上下间距为 0px。查询/列表等内页中，页面标题栏（z-index: 1）> 查询面板区，两者上下间距为 0px。
5.5 标签与徽章
- 背景：Brand-6 #07978D | 文字：Neutral-1 #FFFFFF | 圆角：胶囊形（9999px）
5.6 提示框（按功能色区分）
| 类型 | Token | 边框色 |
|---|---|---|
| 成功 | Success-6 | #0FB886 |
| 警告 | Warning-6 | #FD824C |
| 错误 | Error-6 | #E5524C |
| 信息 | Progress-6 | #1875F0 |
5.7 对话框
- 背景：Neutral-1 #FFFFFF | 圆角：8px（特殊场景，参见 §1.1 圆角说明） | 阴影：--shadow-3
- 尺寸：小 400px宽 / 中 800x500px / 大 1000~1068x610px
- 支持最大化：99%浏览器宽*高
5.8 页面-标题区
页面-标题区用于品牌1系统内页顶部，适用于查询、列表等内页场景。
> 层级说明：页面-标题区仅在内页结构（查询/列表/表单页）中作为顶部栏使用，与 §5.4 全局导航/顶栏为二选一关系，二者禁止同时出现在同一页面。若用于无全局导航的内页，z-index 需设置为 1，以确保其阴影能正确覆盖下层内容（如查询面板区）。
| 属性 | 值 |
|---|---|
| 尺寸 | 1920 × 50px（通栏满宽） |
| 定位 | position: relative；z-index: 1（内页顶部栏层级） |
| 背景 | Neutral-11 #F7F9FA |
| 阴影 | 0px 2px 4px 0px rgba(37, 43, 48, 0.08) — 使用 #252B30 阴影源 |
| 布局 | Flexbox，display: flex，水平左对齐，垂直居中 |
| 内边距 | 0px 16px（左右） |
| 子元素间距 | gap: 16px |
5.9 主页指标-通用样式
主页指标用于品牌1系统首页展示关键业务数据，由指标卡背景容器、指标卡数据（图标+数据）构成。
5.9.1 主页指标-背景样式
| 属性 | 值 |
|---|---|
| 尺寸 | 1888 × 120px |
| 布局 | display: flex，padding: 0px |
| 圆角 | 4px |
| 背景 | linear-gradient(180deg, #F3F5F8 0%, #FFFFFF 100%) |
| 边框 | 2px solid #FFFFFF |
| 阴影 | 0px 2px 8px 0px #252B301F, 0px 4px 16px 0px #252B3014（注：统一使用 #252B30 阴影源） |
5.9.2 主页指标—卡片数据样式
5.9.2.1 定义指标卡
卡片数据由"指标卡图标 + 指标卡数据"构成，为左右结构布局，图标在左，数据在右。普通指标卡的图标默认为 SVG。
| 属性 | 值 |
|---|---|
| 尺寸 | 299.19 × 72px |
| 布局 | display: flex，align-items: center，padding: 0px，gap: 12px |
| 对齐 | align-self: stretch |
| 层级 | z-index: 0 |
5.9.2.2 定义指标卡图标
指标卡图标引用目录：./指标卡图标/（按 1、2、3、4…依次选用）
| 属性 | 值 |
|---|---|
| 容器尺寸 | 72 × 72px |
| 图标尺寸 | 48 × 48px |
| 层级 | z-index: 0 |
5.9.2.3 定义指标卡数据
指标卡数据由"主标题 + 主数据 + 辅助数据"构成，所有行左侧边缘垂直对齐（整体左对齐）。同一行内的数字、单位"万元"、百分比、箭头等元素在水平方向上紧密排列。
| 属性 | 值 |
|---|---|
| 尺寸 | 215.19 × 72px |
| 布局 | display: flex，flex-direction: column，padding: 0px，gap: 12px |
| 伸缩 | flex-grow: 1 |
| 层级 | z-index: 1 |
5.9.3 主页指标—卡片的选中状态
| 属性 | 值 |
|---|---|
| 尺寸 | 347.19 × 120px |
| 布局 | display: flex，align-items: center，padding: 24px 16px，gap: 8px |
| 伸缩 | flex-grow: 1，align-self: stretch |
| 层级 | z-index: 0 |
| 背景 | linear-gradient(109deg, #07978D 0%, #0C59C3 100%) |
六、交互行为与动效
6.1 交互反馈
| 状态 | 反馈方式 |
|---|---|
| 按钮悬停 | Brand-5 背景色 |
| 按钮点击 | Brand-8 背景色 |
| 输入框焦点 | Brand-6 边框 |
| 成功 | Success-6 #0FB886 |
| 错误 | Error-6 #E5524C |
| 警告 | Warning-6 #FD824C |
6.2 触摸目标
- 按钮默认高度：28px
- 最小可点击区域：44×44px（通过 padding/外层包裹元素扩展，例如按钮内外边距补足上下各 8px、左右各扩展至满足 44px 宽度）
- 链接悬停：Underline + Brand-5
6.3 动画与提示
加载动画： 84×12px，Brand-6 颜色，"加载中..." 14px 文字
浮动提示： 最大宽度300px，圆角4px，背景Neutral-1，3秒后自动消失
悬停过渡： 0.3s ease-in-out
七、设计规范
7.1 必须执行
- 使用 Brand-6（#07978D）作为所有主要交互元素的强调色
- 使用标准化圆角（2px-4px），对话框等特殊容器允许 8px（参见 §1.1 例外说明）
- 使用标准化间距系统和阴影系统
- 遵循 60:30:10 配色法则
- 使用品牌色序列渐变作为焦点和激活状态
- 根据文本尺寸应用适当字重
- 使用标准化阴影层次表现空间关系（统一 #252B30 阴影源）
7.2 禁止执行
- 不使用未经授权的替代品牌色或创建新颜色
- 不使用超过规范的非标准圆角值（对话框 8px 为唯一定义例外）
- 不同时使用多个强对比颜色
- 不在用户界面上使用渐变色作为主要设计元素
- 不使用非标准间距值
- 不使用过于复杂的装饰效果影响可读性
- 不在高密度信息区使用过多阴影装饰
- 不偏离已定义的功能色使用场景规则
- 不混用非 #252B30 阴影源色
八、特定组件指南
8.1 智能助手（小智）
| 区域 | 样式 |
|---|---|
| 入口（悬浮） | 屏幕右下角，48×48px，Brand-5 背景 |
| 窗口（停靠） | 650px-1200px宽，从右向左滑出 |
| 窗口（浮动） | 可拖拽，650px宽 × 756px高最小 |
| 入口品牌色 | Brand-5 #22A396 |
| 窗口背景 | Neutral-1 #FFFFFF |
| 文字颜色 | Neutral-10 #262626 |
| 功能按钮 | Brand-6 #07978D |
技术特性： 自然语言理解、上下文记忆多轮对话、意图识别、知识图谱关联检索、数据加密隐私保护
8.2 水印组件
| 属性 | 值 |
|---|---|
| 文字颜色 | Neutral-6 #DCE1EA |
| 透明度 | 30% |
| 角度 | -45度 |
| 间距 | 150px × 150px |
| 字号 | 16px |
规则： 始终显示且不可移除；支持文字/图标/组合类型；不影响内容可读性；可按用户权限显示不同强度
8.3 侧边面板与浮动窗
| 组件 | 规范 |
|---|---|
| 侧边面板 | 396px最小值，支持自定义最大值 |
| 浮动窗 | 8个方向自适应弹出，与目标元素边框对齐，最大宽度300px |
九、数据格式与文案规范
9.1 金额
- 千分位分隔：英文逗号
- 货币符号：与金额之间无空格（
￥10,000.00或10.00万元，二选一使用，避免符号与单位重复） - 小数位：保留两位 | 表格对齐：右对齐
9.2 百分比
- 小数位由业务定义，不自动补全
- 表单标签带 %，表格表头带 %
9.3 普通数字
- 千分位：除特殊要求外必须使用（如 1,000.00）
- 显示：不可折行、省略
9.4 文案
- 页面标题：简洁准确，"名词"或"名词+动词"
- 按钮文案：明确操作意图，"动词"或"动词+宾语"
- 标点：中文全角，数字/英文半角
十、单图形组件布局与图表规范
10.1 组件概述
单图形是用于展示单个图表数据的容器组件，由以下五部分组成：
| 区域 | 必选/可选 | 说明 |
|---|---|---|
| 标题区 | 必选 | 顶部最左侧，上下居中，28px固定高度 |
| 功能区 | 可选 | 紧邻标题区右侧，含下拉选择器+内容说明 |
| 按钮区 | 可选 | 标题行最右侧，含按钮组/局部工具/选项卡 |
| 扩展区 | 可选 | 标题行下方，28px固定，空间不足时触发 |
| 图表区 | 必选 | 宽高撑满容器，含图表/单位/标注 |
10.2 标题区布局场景
| 场景 | 布局规则 |
|---|---|
| 标题区独立 | 自动撑满父容器宽度 |
| + 功能区 | 标题自适应，功能区撑满剩余 |
| + 按钮区 | 标题自适应，按钮区右对齐 |
| + 功能区 + 按钮区 | 标题自适应，功能区+按钮区共享剩余 |
10.3 核心图表类型适配规则
| 图表类型 | 核心适用场景 | 绑定色板 | 关键规范 |
|---|---|---|---|
| 折线图 | 趋势变化、时间序列 | 基础色板（单系列）/ 单色顺序色板（多系列） | 线宽PC 2px/移动端1.5px；数据点直径PC 4px/移动端3px |
| 柱状图 | 分类对比、统计 | 基础色板（单系列）/ 拓展色板（多系列） | 柱宽统一，间距=柱宽50%；移动端柱宽≥12px |
| 条形图 | 长分类名称、排名 | 基础色板（单系列）/ 拓展色板（多系列） | 条高统一，间距=条高30%；移动端条高≥18px |
| 面积图 | 趋势占比、累计数据 | 面积渐变色板 | 渐变透明度50%-80%；移动端仅展示核心趋势 |
| 双轴图 | 双维度关联、不同量纲 | 基础色板（双轴各1主色） | 仅「折线+柱状」组合，数据系列≤2个 |
| 水波图 | 单指标完成率、KPI | 单色顺序色板（梯度填充） | 水波≤2层；≥100%成功色，＜80%警告/失败色 |
| 饼图/环形图 | 占比分析、构成展示 | 基础色板（饼图）/ 拓展色板（环形图） | 分类≤6个；环形图内环占比30%；按数据从大到小顺时针 |
| 仪表盘 | 单指标实时监控 | 单色顺序色板（刻度梯度）/ 语义色板（阈值） | 刻度分正常/预警/异常；指针用品牌主色 |
| 雷达图 | 多维度综合评估 | 单色顺序色板（单主体）/ 基础色板（多主体） | 维度≤8个（移动端≤5个） |
| 散点图 | 相关性分析、分布 | 基础色板（不同系列）/ 语义色板（异常点） | 点大小PC 4-8px/移动端3-6px |
跨端适配要点：
- PC端/大屏：保障数据完整性，支持多系列叠加、悬停/筛选/下钻
- 移动端：聚焦核心数据，简化样式，仅保留1-2个系列
- 移动端不推荐：双轴图、散点图、多维度雷达图
10.4 通用交互规范
| 交互类型 | 行为描述 |
|---|---|
| 悬停展示 | 数据气泡窗含单数据/多数据/地图三种场景 |
| 点击穿透 | 横向跨图表/页面/系统跳转 |
| 点击下钻 | 纵向从粗粒度到细粒度，下钻内容仅支持图表 |
| 图例交互 | 点击图例隐藏/显示对应数据系列 |
10.5 分类色板规范
10.5.1 基础色板（10色）
| 序号 | 色值 | 色相 | 核心应用场景 |
|---|---|---|---|
| 1 | #1875F0 | 蓝色 | 中性、进行中、主数据系列 |
| 2 | #0FB886 | 绿色 | 主数据系列、达标色 |
| 3 | #FD824C | 橙色 | 次要信息、中性数据 |
| 4 | #6B809C | 灰色 | 次要信息、中性数据 |
| 5 | #6FC8F7 | 浅蓝 | 多系列辅助色 |
| 6 | #BE7460 | 棕红 | 饼图次要分类 |
| 7 | #F6BD15 | 黄色 | 语义标注、低危预警 |
| 8 | #189490 | 深青 | 品牌1图表主色 |
| 9 | #87E8DE | 浅青 | 品牌1多系列辅助色 |
| 10 | #BF3737 | 红色 | 错误、高危异常（图表专用色，与通用功能色 Error-6 #E5524C 在图表高密度色彩场景中区分使用） |
10.5.2 拓展色板（20色）
| 序号 | 色值 | 序号 | 色值 | 序号 | 色值 | 序号 | 色值 |
|---|---|---|---|---|---|---|---|
| 1 | #1875F0 | 6 | #FD824C | 11 | #BE7460 | 16 | #189490 |
| 2 | #A1C9F9 | 7 | #FFE0A5 | 12 | #E9CCBF | 17 | #C5E4E3 |
| 3 | #0FB886 | 8 | #6B809C | 13 | #F6BD15 | 18 | #67E8DE |
| 4 | #9FE8D6 | 9 | #D2D9E1 | 14 | #FADE89 | 19 | #CFF8F6 |
| 5 | #4B85FF | 10 | #6FC8F7 | 15 | #3FD39F | 20 | #BF3737 |
10.5.3 单色顺序色板（7色系 × 7梯度）
| 色系 | 梯度1 | 梯度2 | 梯度3 | 梯度4 | 梯度5 | 梯度6 | 梯度7 |
|---|---|---|---|---|---|---|---|
| 蓝色系 | #0349F9 | #004D89 | #1875F0 | #4B85FF | #6DA5FF | #8DBFFF | #A8D9FF |
| 绿色系 | #00542C | #006C41 | #008557 | #00966E | #0FB886 | #3FD39F | #60EE8B |
| 橙色系 | #881E00 | #A53803 | #C2501E | #FD824C | #FF9C64 | #FFB67C | #FFD095 |
| 灰色系 | #031F35 | #1E354D | #374D66 | #516681 | #6B809C | #8098BB | #A2B7D5 |
| 黄色系 | #390900 | #482200 | #5E3400 | #795200 | #966800 | #B58600 | #F6BD15 |
| 青色系 | #00545C | #006C70 | #008585 | #009696 | #189490 | #42B0AC | #87E8DE |
| 红色系 | #610000 | #7F000A | #BF1420 | #BF3737 | #E0554F | #FF7169 | #FF8E83 |
10.5.4 同色渐变色板（10组）
| 序号 | 渐变组合（上→下） | 色值（上/下） |
|---|---|---|
| 1 | 蓝→浅蓝 | #1875F0 / #4B85FF |
| 2 | 绿→浅绿 | #0FB886 / #3FD39F |
| 3 | 橙→浅橙 | #FD824C / #FF9C64 |
| 4 | 灰→浅灰 | #6B809C / #A2B7D5 |
| 5 | 浅蓝→更浅蓝 | #6FC8F7 / #8EE5FF |
| 6 | 棕红→浅棕 | #BE7460 / #DDAF7A |
| 7 | 黄→浅黄 | #F6BD15 / #FAD36A |
| 8 | 深青→浅青 | #189490 / #42B0AC |
| 9 | 浅青→更浅青 | #87E8DE / #A5FFFC |
| 10 | 红→浅红 | #BF3737 / #E0554F |
10.5.5 语义色板（4类）
图表语义色板对应 §1.4 通用功能色的图表场景映射。
| 语义分类 | 主色值 | 对应功能色 Token | 辅助色值 | 核心应用场景 |
|---|---|---|---|---|
| 信息/进行中 | #1875F0 | Progress-6 | #A1C9F9 | 正常流程、常规数据 |
| 正确/成功 | #0FB886 | Success-6 | #9FE8D6 | 达标、盈利、完成率≥100% |
| 警告/提示 | #FD824C | Warning-6 | #FFE0A5 | 完成率80%-99%、轻量预警 |
| 失败/错误 | #E5524C | Error-6 | #FFAFA6 | 亏损、故障、完成率＜80% |
> 注：§10.5.5 图表语义色板统一使用 §1.4 定义的通用功能色 Token（Success-6、Warning-6、Error-6、Progress-6），确保 UI 组件与图表场景的语义一致性。其中，警告色（Warning-6 #FD824C）与失败/错误色（Error-6 #E5524C）的区分遵循 §1.4 定义，切勿混用。
10.6 图表通用组件规范
10.6.1 标题
| 层级 | PC端 | 移动端 | 位置 |
|---|---|---|---|
| 主标题 | 16px/Medium/#262626 | 14px/Medium/#262626 | 图表区域左上角 |
| 副标题 | 14px/Regular/#7B8EA2 | 12px/Regular/#7B8EA2 | 主标题正下方 |
10.6.2 单位
- 字号：PC 12px/Regular，移动端 10px/Regular
- 颜色：#7B8EA2
- 位置：主标题右侧 / 纵轴刻度顶部 / 图表中心（水波图/仪表盘/饼图）
10.6.3 图例
| 图例类型 | 图形样式 | 适配图表 |
|---|---|---|
| 线图例 | 实线2px | 折线图/双轴图/雷达图 |
| 点线图例 | 圆点6px+实线2px | 多系列折线图/散点图 |
| 虚线图例 | 虚线2px | 对比系列折线图/双轴图 |
| 面图例 | 实心方块8×8px | 柱状图/条形图/面积图/饼图 |
| 梯度图例 | 渐变长条40×8px | 水波图/仪表盘/热力图 |
- 位置：图表区域右上角
- 排列：≤5项单行，>5项多列竖排
- 交互：PC悬停高亮；移动端点击隐藏/显示
10.6.4 提示信息
| 样式 | 背景 | 文字 |
|---|---|---|
| 深色 | #162B41 | #FFFFFF |
| 浅色 | #FFFFFF | #162B41，边框#DCE1EA |
- 圆角：4px | 阴影：0 2px 8px rgba(0,0,0,0.1)
- 内容：维度+数值+单位+时间
10.6.5 图表文字规范
| 文字类型 | 颜色 | PC字号 | 移动端字号 | 字重 |
|---|---|---|---|---|
| 主标题/面板标题 | #262626 | 16px | 14px | Medium |
| 副标题/图例文字 | #7B8EA2 | 14px | 12px | Regular |
| 单位/坐标轴文字 | #7B8EA2 | 12px | 10px | Regular |
| 图表中心数值 | #262626 | 20px | 16px | Bold |
| 备注/说明 | #A1B0BF | 12px | 10px | Regular |
10.7 空间布局规范
面板间距
| 布局元素 | PC端 | 移动端 |
|---|---|---|
| 面板顶部→主标题 | 24px | 16px |
| 主标题→图表上边界 | 16px | 12px |
| 图表左边界→面板左边界 | 16px | 12px |
| 图表下边界→坐标轴上边界 | 8px | 6px |
| 坐标轴下边界→面板底部 | 12px | 8px |
图表面板通用布局
图表面板是承载图表展示的标准容器，由标题区、单位、图例和图表展示区构成，同时分为：单轴图和双轴图。
单轴图：图表仅使用一个Y轴，为左Y轴，单位仅显示“左单位”。
┌──────────────────────────────────────────────────────┐
│ 标题（必选） │
├──────────────────────────────────────────────────────┤
│ 单位（必选） 图例（必选） │
├──────────────────────────────────────────────────────┤
│ │
│ 图表展示区（必选） │
│ │
│ │
└──────────────────────────────────────────────────────┘
| 区域 | 必选/可选 | 说明 |
|---|---|---|
| 标题 | 必选 | 面板顶部，左侧对齐 |
| 左单位 | 必选 | 标题区下方左侧，紧邻标题 |
| 图例 | 必选 | 标题区下方右侧，与单位同行 |
| 图表展示区 | 必选 | 单位/图例下方，撑满剩余空间 |
双轴图：图表拥有主、副两个Y轴，通常分局图表左右两侧，同时显示左右两个单位，“左单位”为主，“右单位”为辅。
┌──────────────────────────────────────────────────────┐
│ 标题（必选） │
├──────────────────────────────────────────────────────┤
│ 单位（必选） 图例（必选） 单位（必选） │
├──────────────────────────────────────────────────────┤
│ │
│ 图表展示区（必选） │
│ │
│ │
└──────────────────────────────────────────────────────┘
| 区域 | 必选/可选 | 说明 |
|---|---|---|
| 标题 | 必选 | 面板顶部，左侧对齐 |
| 左单位 | 必选 | 标题区下方左侧，紧邻标题 |
| 右单位 | 必选 | 标题区下方右侧 ，与下方图表右侧对齐 |
| 图例 | 必选 | 标题区下方居中，与单位同行 |
| 图表展示区 | 必选 | 单位/图例下方，撑满剩余空间 |
多图表组合规则
- PC端/大屏：横向≤3个/行，纵向≤4个/列
- 移动端：仅支持纵向单列，≤3个/列，图表间间距16px
- 通用：同面板多图表须统一色板/字体/图例/坐标轴样式
10.8 坐标轴设计规范
单轴规范
| 项目 | 横轴（X轴） | 纵轴（Y轴） |
|---|---|---|
| 轴线 | #DCE1EA，1px | 与横轴一致 |
| 刻度 | #B7BCC6，1px，长度8px（PC）/6px（移动端） | 与横轴一致 |
| 文字 | 12px/Regular/#7B8EA2，时间居中/分类左对齐 | 同左，文字右对齐 |
| 轴标题 | 14px/Regular/#7B8EA2，横轴下边界居中 | 旋转90°，纵轴左边界居中 |
| 网格线 | #F5F8F8，1px，虚线（PC）/实线（移动端） | 同左 |
双轴规范
- 左Y轴：品牌主色（#1875F0/#189490）绑定核心数据
- 右Y轴：功能主色（#0FB886/#FD824C）绑定对比数据
- 仅支持「折线+柱状」组合，数据系列≤2个
轴布局适应优先级
直接显示 → 自动换行 → 旋转显示（仅横轴）→ 缩略文字
10.9 地图可视化规范
品牌1地图色板（绿色系）：
| 级别 | 色值 | 说明 |
|---|---|---|
| 六级（最高） | #005E34 | 电力高负荷/财务高盈利 |
| 五级 | #31A8A8 | 次高数据层级 |
| 四级 | #62E8BC | 中高数据层级 |
| 三级 | #93D1D0 | 中等数据层级 |
| 二级 | #C4E4E5 | 中低数据层级 |
| 一级（最低） | #DCEDF0 | 最低数据层级 |
| 无业务区域 | #E5EDF6 | 无数据覆盖 |
| 悬浮高亮 | #0096E0 | 悬停反馈 |
| 选中高亮 | #162B41 | 选中反馈 |
地图联动： 点击地图区域，联动图表自动刷新为该区域详细数据；PC端左右组合，移动端上下组合。
十一、典型界面模板布局规范
11.1 模板概述
界面模板是预定义的标准布局结构，确保产品界面一致性和用户体验规范性，包含数据展示、交互操作、信息组织等核心功能模块。
11.2 核心模板一览
| 模板类型 | 核心结构 | 必选区 | 可选区 |
|---|---|---|---|
| 业务处理主页 | 纵向分层 | 导航区、智慧卡片区、业务轨迹区/任务处理区 | 信息维度管理区、明细操作区 |
| 查询分析模板 | 上条件+下结果 | 标题区、查询条件区、查询结果区 | — |
| 列表录入模板 | 上条件+中表格+下按钮 | 标题区、录入结果区 | 查询条件区、全局按钮区 |
| 单据录入模板 | 7段纵向 | 标题区、制单人信息区、基本信息区、详情信息区、页面工具栏 | 附件信息区、审批轨迹区 |
| 报表模板 | 条件+表格+操作 | 标题区、工具条区、表格主体区 | 前置条件区、属性设置区 |
| 向导模板 | 步骤引导 | 标题区、向导区、内容区、全局按钮区 | 查询条件区 |
| 分组表单模板 | 左树+右表单 | 左侧导航树、右侧表单区 | — |
| 列表表单模板 | 上+中+下 | 上方操作按钮、中部表格数据、下方分页控件 | — |
| 数据分析模板 | 维度+图表+明细 | 导航区、标题区、分析内容区 | 侧边导航、分析条件区、数据操作区 |
11.3 业务处理主页模板
布局采用纵向分层结构（各区域从上至下依次排列），其中智慧卡片区内卡片横向排列并支持横向滚动。具体为：顶部导航区接智慧卡片区，中间可选配信息维度管理区和明细操作区，底部为业务轨迹区或任务处理区二选一。智慧卡片展示关键业务指标，支持横向滚动和多种连接符样式，任务处理区支持待办事项多维度筛选和视图切换。
┌──────────────────────────────────────────────────────┐
│ 导航区（必选） │
├──────────────────────────────────────────────────────┤
│ 信息维度管理区（可选） │
│ [条件1] [条件2] │
├──────────────────────────────────────────────────────┤
│ 智慧卡片区（必选） │
│ [卡片1] [卡片2] [卡片3] [卡片4] │
│ [→ 智慧卡片区 ←] │
├──────────────────────────────────────────────────────┤
│ 明细操作区（可选） │
│ [功能快捷入口] │ [待操作事项提醒] │ [数据可视化指标] │
├──────────────────────────────────────────────────────┤
│ 业务轨迹区（必选/与任务处理区二选一） │
│ ┌─────────────────────────────────────────────┐ │
│ │ 表格标题 [排序] [筛选] [导出] [列设置] [放大] │ │
│ │ 表格主体 │ │
│ └─────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────┤
│ 任务处理区（必选/与业务轨迹区二选一） │
│ ┌─────────────────────────────────────────────┐ │
│ │ 选项卡：待办事项、已办事项 │ │
│ │ 搜索框: [请输入关键字] │ │
│ │ 过滤条件: [按时间] [按状态] [按类型] │ │
│ │ ▢ 列表视图 ▢ 表格视图 │ │
│ │ 待办事项列表 │ │
│ └─────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────┘
11.4 查询分析模板
布局：左侧条件配置区、右侧结果展示区。条件采用折叠面板分组，结果支持表格和图表双视图切换。条件筛选实时更新结果，支持高级查询和多维度分析。
┌──────────────────────────────────────────────────────┐
│ 标题区（必选） │
├──────────────────────────────────────────────────────┤
│ - 页面标题名称 │
│ - 全局辅助按钮 │
├──────────────────────────────────────────────────────┤
│ 查询条件区（必选） │
│ - 查询条件输入框 │
│ - 查询、重置、查询方案等按钮 │
├──────────────────────────────────────────────────────┤
│ 查询结果区（必选） │
│ - 局部工具栏 │
│ - 数据展示（表格/卡片/列表等） │
└──────────────────────────────────────────────────────┘
11.5 列表录入模板
布局：上方标题区，中部查询条件区（可选）+ 录入结果区，底部全局按钮区（可选）。支持批量操作和数据校验。
┌──────────────────────────────────────────────────────┐
│ 标题区（必选） │
├──────────────────────────────────────────────────────┤
│ - 页面标题名称 │
│ - 全局辅助按钮 │
├──────────────────────────────────────────────────────┤
│ 查询条件区（可选） │
│ - 查询条件输入框 │
│ - 查询、重置、查询方案等按钮 │
├──────────────────────────────────────────────────────┤
│ 录入结果区（必选） │
│ - 局部工具栏 │
│ - 数据表格 │
├──────────────────────────────────────────────────────┤
│ 全局按钮区（可选） │
│ - 页面级别的操作按钮 │
└──────────────────────────────────────────────────────┘
11.6 单据录入模板
布局：从上到下依次由7个部分组成。顶部标题区显示单据名称和编号，制单人信息区显示制作者信息和时间戳，基本信息区包含主表单的关键字段，详情信息区展示详细数据表格或子表，附件信息区支持文件上传和预览，审批轨迹区记录审批历史和状态，页面工具栏提供保存、提交、导出等操作按钮。支持分步填写验证和实时数据校验。
┌──────────────────────────────────────────────────────┐
│ 标题区（必选） │
├──────────────────────────────────────────────────────┤
│ - 单据名称和标识信息 │
│ - 全局辅助按钮 │
├──────────────────────────────────────────────────────┤
│ 制单人信息区（必选） │
│ - 制单人、制单时间 │
│ - 当前状态标识 │
├──────────────────────────────────────────────────────┤
│ 基本信息区（必选） │
│ - 主表单字段 │
│ - 核心业务信息 │
├──────────────────────────────────────────────────────┤
│ 详情信息区（必选） │
│ - 明细表格数据 │
│ - 子表信息展示 │
├──────────────────────────────────────────────────────┤
│ 附件信息区（可选） │
│ - 附件上传区域 │
│ - 文件预览和下载 │
├──────────────────────────────────────────────────────┤
│ 审批轨迹区（可选） │
│ - 审批流程节点 │
│ - 审批意见和状态 │
├──────────────────────────────────────────────────────┤
│ 页面工具栏（必选） │
│ - 保存、提交、取消、导出等操作按钮 │
└──────────────────────────────────────────────────────┘
11.7 报表模板
布局：顶部搜索过滤区、中部数据表格区、底部操作汇总区。表格含表头、表体、表三部分，支持排序、筛选、分页。提供数据导出和批量操作功能，重要操作按钮贴近表格底部。
11.7.1 模型设计场景布局
┌──────────────────────────────────────────────────────┐
│ 标题区（必选） │
├──────────────────────────────────────────────────────┤
│ 工具条区（必选） │
│ [文件] [快速工具栏] [功能选项卡] │
├──────────────────┬───────────────────────────────────┤
│ 前置条件区 │ 表格主体区 │ 属性及设置区 │
│ (可选) │ (必选) │ (可选) │
│ │ │ │
│ 导航树/列表 │ 葡萄城表格 │ │
│ │ │ │
└──────────────────┴───────────────────────────────────┘
11.7.2 报表查询场景布局
┌──────────────────────────────────────────────────────┐
│ 标题区（必选） │
├──────────────────────────────────────────────────────┤
│ 查询条件区（可选） │
│ [条件1] [条件2] [查询] [重置] │
├──────────────────┬───────────────────────────────────┤
│ 前置条件区 │ 表格主体区 │
│ (可选) │ (必选) │
│ │ │
│ 导航树/列表 │ 葡萄城表格 │
│ │ [选项卡] [工具栏] │
│ │ │
└──────────────────┴───────────────────────────────────┘
11.8 向导模板
布局：顶部进度指示、中部步骤内容、底部操作导航。当前步骤高亮并显示详细说明。支持步骤跳转和条件分支验证，操作进度自动保存和恢复。
11.8.1 横向向导布局
┌──────────────────────────────────────────────────────┐
│ 标题区（必选） │
├──────────────────────────────────────────────────────┤
│ 查询条件区（可选） │
├──────────────────────────────────────────────────────┤
│ 向导区（横向） │
│ [S1][S2][S3] │
│ ───────────────────────────────────────────────── │
│ 内容区（必选） │
│ 当前步骤内容 │
├──────────────────────────────────────────────────────┤
│ 全局按钮区（上一步、下一步、完成） │
└──────────────────────────────────────────────────────┘
11.8.2 纵向向导布局
┌──────────────────────────────────────────────────────┐
│ 标题区（必选） │
├──────────────────────────────────────────────────────┤
│ 查询条件区（可选） │
├──────────────────┬───────────────────────────────────┤
│ 向导区（纵向） │ 内容区 │
│ │ │
│ [S1] │ 当前步骤内容 │
│ [S2] │ │
│ [S3] │ │
│ │ │
├──────────────────┴───────────────────────────────────┤
│ 全局按钮区（上一步、下一步、完成） │
└──────────────────────────────────────────────────────┘
11.9 分组表单模板
布局：左侧导航树、右侧表单区。表单分区块展示，验证错误提示显示在对应字段下方。表单分步填写验证，支持保存草稿和历史版本回溯。
11.10 列表表单模板
布局：上方操作按钮、中部表格数据、下方分页控件。支持单行编辑和批量操作模式切换。表格行内直接编辑，数据变更即时生效，保留操作历史记录。
11.11 数据分析模板
布局：左侧维度配置、中部图表展示、右侧数据明细。图表支持联动更新，明细数据可筛选导出。提供钻取分析和对比功能，支持数据导出为多种格式。
┌──────────────────────────────────────────────────────┐
│ ①导航区（必选） │
├────────────┬─────────────────────────────────────────┤
│ │ ②标题区（必选） │
│ ├─────────────────────────────────────────┤
│ │ ④分析条件区（可选） │
│ ③侧边导航 │ ⑤数据操作区（可选） │
│ (可选) ├─────────────────────────────────────────┤
│ │ │
│ │ │
│ │ ⑥分析内容区（必选） │
│ │ │
│ │ │
└────────────┴─────────────────────────────────────────┘
11.12 模板组合规则
继承关系
基础模板提供通用布局结构，专业模板在基础上扩展特色功能区域。继承确保了一致性，扩展体现了专业性，形成从简单到复杂的模板体系。
模块化组合方法
布局单位采用可复用组件，支持横向和纵向组合，定义明确的接口规范。通过配置参数实现不同组合效果，组件间遵循松耦合原则，便于维护和升级。
自适应布局策略
基于断点自动调整组件排列，重要信息前置，次要信息可折叠隐藏。支持内容优先级算法，根据使用场景智能调整组件大小和显示顺序。
11.13 响应式适配
| 场景 | 布局调整 | 触摸优化 |
|---|---|---|
| 小屏 | 垂直堆叠，组件间距自适应 | 点击区域≥48px，间距增大防误触 |
| 中屏 | 分栏显示，部分折叠 | 滚动区域高度适配 |
| 大屏 | 完整布局，多列网格 | — |
更新日志：
- 2026年6月10日 v1.6 — 新增 §3.4 典型页面布局间距规范：
- §3.4.1 布局结构共性（垂直单列流式布局、通用区域序列）
- §3.4.2 间距统一规则（上下间距/左右间距表格规范）
- §3.4.3 三种页面类型差异对比（内页结构/门户首页/数据分析主页）
- §3.4.4 内页结构详细规范（含 ASCII 布局示意图与间距规则）
- §3.4.5 门户首页详细规范
- §3.4.6 数据分析主页详细规范
- §3.4.7 总结
- 整合"整体骨架与布局结构"描述，与 §11 典型界面模板布局规范互补
- 2026年6月9日 v1.5 — 修复上下关系映射问题：
- §1.4 功能色序列补充 Token 命名（Success-6 / Warning-6 / Error-6 / Progress-6）
- §1.5 补充 Gradient-10（信息/进行），修正 Gradient-11 用途为"禁用/次要信息"
- §1.3 新增 Neutral-11 #F7F9FA 对应标题栏背景
- §1.1 补充对话框 8px 圆角为例外说明
- §5.1 补充按钮触摸目标扩展说明
- §5.6 提示框补充 Token 列
- §5.7 对话框圆角标注"特殊场景"，阴影修正为 --shadow-3
- §5.8 标题栏背景修正为 Neutral-11
- §5.9.1 主页指标阴影统一为 #252B30 阴影源
- §6.2 触摸目标补充 28px→44px 扩展方式
- §7.1/§7.2 补充对话框圆角例外、#252B30 阴影源规则
- §9.1 金额示例二选一说明
- §10.5.5 图表语义色板添加功能色 Token 映射列，修正失败/错误色为 Error-6 #E5524C
- §2.2 修正常见标题层级命名逻辑
- 2026年5月25日 v1.4 — 整合 v1.3~v1.4 版本，新增图表规范（10种图表适配规则、分类色板、通用组件、空间布局、坐标轴、地图可视化）及9种界面模板布局规范（含组合规则与响应式适配），合并重复内容为精简版。
