826 lines
20 KiB
Markdown
826 lines
20 KiB
Markdown
# 液态玻璃后台 UI 设计规范
|
||
|
||
适用产品：运维管理平台、微服务管理平台、发布/重启/回滚控制台、数据库资源管理后台。
|
||
|
||
设计目标：在保持截图中的“液态玻璃”视觉质感的同时，保证后台系统需要的信息密度、可读性、风险控制和操作效率。
|
||
|
||
## 1. 设计定位
|
||
|
||
整体风格定义为：浅色冰蓝液态玻璃后台。
|
||
|
||
它不是营销页、不是展示型大屏，而是一个高频操作的运维控制台。界面第一优先级是让用户快速回答以下问题：
|
||
|
||
- 当前项目和环境是否健康
|
||
- 哪些服务异常
|
||
- 最近谁发布了什么
|
||
- 是否可以安全执行发布、重启、回滚
|
||
- MySQL、MongoDB、Redis、MQ 等公共资源是否正常
|
||
|
||
## 2. 核心设计原则
|
||
|
||
### 2.1 信息优先
|
||
|
||
- 首页核心区域优先展示微服务列表，而不是装饰性卡片。
|
||
- 服务状态、版本、实例数、CPU/内存、最近发布、负责人、操作入口必须在同一行内可扫描。
|
||
- 高风险动作必须可见但不应过于顺手，生产环境操作必须经过二次确认。
|
||
|
||
### 2.2 玻璃感服务于层级
|
||
|
||
- 玻璃效果主要用于页面壳、侧边栏、顶部筛选区、统计区、表格容器、详情面板和发布抽屉。
|
||
- 不要把每一小块内容都做成强玻璃卡片，避免界面碎片化。
|
||
- 同一页面最多使用 3 个玻璃层级：页面容器、内容容器、浮层/抽屉。
|
||
|
||
### 2.3 克制的视觉强度
|
||
|
||
- 主色使用冰蓝和白色透明层。
|
||
- 状态色只用于语义：健康、警告、严重、未知、执行中。
|
||
- 图表可以使用蓝、绿、红、紫、橙作为指标区分，避免整个平台只有一种蓝色。
|
||
|
||
### 2.4 风险可控
|
||
|
||
- 发布、重启、回滚、数据库恢复、权限变更必须有影响范围说明。
|
||
- 生产环境必须显示环境提醒和审计提示。
|
||
- 所有关键操作都要在事件流和审计日志中可追踪。
|
||
|
||
## 3. 页面布局规范
|
||
|
||
### 3.1 全局框架
|
||
|
||
推荐结构：
|
||
|
||
- 左侧导航：项目运维台主导航
|
||
- 顶部工具栏：项目、环境、集群、告警、用户角色
|
||
- 主内容区：当前页面的核心任务
|
||
- 右侧抽屉：发布、重启、配置变更等流程型操作
|
||
|
||
桌面端基础尺寸：
|
||
|
||
| 区域 | 尺寸 |
|
||
| --- | --- |
|
||
| 页面最小宽度 | 1280px |
|
||
| 左侧导航宽度 | 216px |
|
||
| 收起导航宽度 | 72px |
|
||
| 顶部栏高度 | 64px |
|
||
| 内容区外边距 | 20px |
|
||
| 页面模块间距 | 16px / 20px |
|
||
| 右侧抽屉宽度 | 420px - 460px |
|
||
|
||
### 3.2 首页布局
|
||
|
||
首页名称建议：项目运维台。
|
||
|
||
从上到下：
|
||
|
||
1. 顶部筛选栏：项目、环境、集群、当前告警、当前用户、角色。
|
||
2. 状态总览：运行中服务数、异常服务数、最近发布、活跃告警、数据库状态。
|
||
3. 微服务列表：服务、状态、版本、实例数、CPU/内存、最近发布、负责人、操作。
|
||
4. 下方可选区域：最近事件、资源状态、告警摘要。
|
||
|
||
首页不使用大 Hero，不放宣传说明，不做低密度卡片瀑布。
|
||
|
||
### 3.3 服务详情页布局
|
||
|
||
服务详情页建议结构：
|
||
|
||
- 顶部：返回、面包屑、服务名称、状态、命名空间、负责人、创建时间。
|
||
- 标签页：概览、实例、发布、日志、监控、配置、事件。
|
||
- 概览页：基础状态、依赖服务、监控概览、最近事件、实例列表。
|
||
- 右侧抽屉：发布、重启、回滚等操作流程。
|
||
|
||
## 4. 设计 Token
|
||
|
||
### 4.1 颜色
|
||
|
||
基础色：
|
||
|
||
| Token | 色值 | 用途 |
|
||
| --- | --- | --- |
|
||
| `--color-bg-page` | `#edf6ff` | 页面底色 |
|
||
| `--color-bg-page-soft` | `#f7fbff` | 页面浅色过渡 |
|
||
| `--color-glass` | `rgba(247, 251, 255, 0.58)` | 默认玻璃面 |
|
||
| `--color-glass-strong` | `rgba(255, 255, 255, 0.72)` | 强玻璃面 |
|
||
| `--color-glass-muted` | `rgba(232, 244, 255, 0.42)` | 弱玻璃面 |
|
||
| `--color-glass-active` | `rgba(219, 236, 255, 0.76)` | 导航/标签激活背景 |
|
||
| `--color-border-light` | `rgba(255, 255, 255, 0.82)` | 高光边 |
|
||
| `--color-border-soft` | `rgba(114, 151, 188, 0.22)` | 分割线 |
|
||
|
||
文字色：
|
||
|
||
| Token | 色值 | 用途 |
|
||
| --- | --- | --- |
|
||
| `--color-text-primary` | `#1d2b3a` | 标题、关键数字 |
|
||
| `--color-text-secondary` | `#52677f` | 正文、表格内容 |
|
||
| `--color-text-tertiary` | `#7b8da3` | 辅助信息 |
|
||
| `--color-text-disabled` | `#a8b7c8` | 禁用文本 |
|
||
| `--color-text-inverse` | `#ffffff` | 深色按钮文字 |
|
||
|
||
品牌与操作色：
|
||
|
||
| Token | 色值 | 用途 |
|
||
| --- | --- | --- |
|
||
| `--color-brand` | `#2f7df6` | 主按钮、激活态 |
|
||
| `--color-brand-hover` | `#1f6ee8` | 主按钮 hover |
|
||
| `--color-brand-soft` | `#e6f1ff` | 品牌浅背景 |
|
||
| `--color-brand-ring` | `rgba(47, 125, 246, 0.28)` | 聚焦环 |
|
||
|
||
语义色：
|
||
|
||
| 状态 | 主色 | 背景 | 用途 |
|
||
| --- | --- | --- | --- |
|
||
| Healthy | `#18a957` | `rgba(24, 169, 87, 0.12)` | 健康、通过 |
|
||
| Warning | `#f5a524` | `rgba(245, 165, 36, 0.14)` | 警告、需关注 |
|
||
| Critical | `#e5484d` | `rgba(229, 72, 77, 0.14)` | 严重、失败 |
|
||
| Running | `#2f7df6` | `rgba(47, 125, 246, 0.14)` | 执行中、发布中 |
|
||
| Unknown | `#8b98a9` | `rgba(139, 152, 169, 0.14)` | 未知、未连接 |
|
||
|
||
图表色：
|
||
|
||
| 指标 | 色值 |
|
||
| --- | --- |
|
||
| CPU / QPS | `#4f83ff` |
|
||
| 内存 | `#37b66a` |
|
||
| 错误率 | `#ff5a57` |
|
||
| 平均延迟 | `#9b72f2` |
|
||
| P95 延迟 | `#ff9f43` |
|
||
|
||
### 4.2 背景
|
||
|
||
页面背景使用柔和的大面积渐变，不使用离散装饰圆球、漂浮光斑或强装饰图形。
|
||
|
||
推荐 CSS：
|
||
|
||
```css
|
||
:root {
|
||
--page-bg:
|
||
linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(221, 239, 255, 0.72)),
|
||
radial-gradient(1200px 720px at 12% 8%, rgba(255, 255, 255, 0.82), transparent 62%),
|
||
radial-gradient(1000px 680px at 88% 0%, rgba(255, 232, 224, 0.36), transparent 58%),
|
||
linear-gradient(180deg, #f7fbff 0%, #eaf5ff 100%);
|
||
}
|
||
```
|
||
|
||
背景可以有轻微的折射感，但必须保证表格、表单、抽屉背后的区域足够干净。
|
||
|
||
### 4.3 玻璃材质
|
||
|
||
默认玻璃面：
|
||
|
||
```css
|
||
.glass-surface {
|
||
background:
|
||
linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(232, 244, 255, 0.46));
|
||
border: 1px solid rgba(255, 255, 255, 0.82);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.88),
|
||
inset 0 -1px 0 rgba(122, 158, 192, 0.12),
|
||
0 18px 48px rgba(55, 101, 145, 0.16);
|
||
backdrop-filter: blur(24px) saturate(145%);
|
||
-webkit-backdrop-filter: blur(24px) saturate(145%);
|
||
}
|
||
```
|
||
|
||
强玻璃面用于右侧抽屉、弹窗、顶部关键容器：
|
||
|
||
```css
|
||
.glass-surface-strong {
|
||
background:
|
||
linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(236, 246, 255, 0.58));
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.95),
|
||
0 24px 64px rgba(48, 92, 132, 0.2);
|
||
backdrop-filter: blur(30px) saturate(150%);
|
||
-webkit-backdrop-filter: blur(30px) saturate(150%);
|
||
}
|
||
```
|
||
|
||
弱玻璃面用于表格行、输入框、标签、依赖服务 Chip：
|
||
|
||
```css
|
||
.glass-subtle {
|
||
background: rgba(255, 255, 255, 0.48);
|
||
border: 1px solid rgba(255, 255, 255, 0.66);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
|
||
}
|
||
```
|
||
|
||
降级要求：
|
||
|
||
- 不支持 `backdrop-filter` 时，玻璃背景透明度提高到 `0.88`。
|
||
- 表格、表单和抽屉必须保持可读，不允许依赖模糊效果本身提供对比度。
|
||
|
||
### 4.4 圆角
|
||
|
||
| 类型 | 圆角 |
|
||
| --- | --- |
|
||
| 页面主壳、侧边栏、右侧抽屉 | 20px |
|
||
| 一级内容容器 | 16px |
|
||
| 表格容器、图表容器 | 12px |
|
||
| 数据卡片、菜单、输入框 | 8px |
|
||
| 状态 Badge、Chip | 6px |
|
||
| 图标按钮 | 8px |
|
||
|
||
原则：只有框架级玻璃容器可以使用较大圆角；高密度数据卡片和表格单元保持 8px 左右，避免后台界面过度柔化。
|
||
|
||
### 4.5 阴影
|
||
|
||
| Token | 值 | 用途 |
|
||
| --- | --- | --- |
|
||
| `--shadow-glass-sm` | `0 8px 24px rgba(55, 101, 145, 0.12)` | 小控件 |
|
||
| `--shadow-glass-md` | `0 18px 48px rgba(55, 101, 145, 0.16)` | 卡片/表格容器 |
|
||
| `--shadow-glass-lg` | `0 24px 64px rgba(48, 92, 132, 0.2)` | 抽屉/弹窗 |
|
||
| `--shadow-focus` | `0 0 0 4px rgba(47, 125, 246, 0.22)` | 聚焦态 |
|
||
|
||
### 4.6 字体
|
||
|
||
字体栈：
|
||
|
||
```css
|
||
font-family: Inter, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
```
|
||
|
||
字号：
|
||
|
||
| 场景 | 字号 | 行高 | 字重 |
|
||
| --- | --- | --- | --- |
|
||
| 页面标题 | 20px | 28px | 700 |
|
||
| 面板标题 | 16px | 24px | 700 |
|
||
| 表格正文 | 13px | 20px | 500 |
|
||
| 正文 | 14px | 22px | 500 |
|
||
| 辅助文本 | 12px | 18px | 500 |
|
||
| 关键数字 | 28px | 36px | 700 |
|
||
| 状态 Badge | 12px | 18px | 600 |
|
||
|
||
规范：
|
||
|
||
- 不使用负字距。
|
||
- 表格和表单内不要使用过大的标题字。
|
||
- 数字指标可以使用 `font-variant-numeric: tabular-nums;`，方便对齐。
|
||
|
||
### 4.7 间距
|
||
|
||
基础间距：`4 / 8 / 12 / 16 / 20 / 24 / 32`。
|
||
|
||
常用规则：
|
||
|
||
- 页面外边距：20px。
|
||
- 模块间距：16px。
|
||
- 表格单元格左右 padding：16px。
|
||
- 表单项垂直间距：12px。
|
||
- 抽屉步骤块间距：16px。
|
||
- 按钮内边距：水平 16px，垂直 9px。
|
||
|
||
## 5. 组件规范
|
||
|
||
### 5.1 侧边导航
|
||
|
||
用途：承载平台一级功能，不放业务详情。
|
||
|
||
规格：
|
||
|
||
- 宽度：216px。
|
||
- 外边距：16px。
|
||
- 导航项高度：44px。
|
||
- 图标：18px。
|
||
- 激活态：左侧 3px 蓝色指示条 + 浅蓝玻璃背景。
|
||
- 文案：总览、微服务、发布记录、数据漫游、配置中心、日志与事件、监控告警、权限与审计。
|
||
|
||
交互：
|
||
|
||
- Hover：背景透明度提升，边框高光增强。
|
||
- Active：图标和文字使用品牌蓝。
|
||
- 收起状态只显示图标，hover 显示 Tooltip。
|
||
|
||
### 5.2 顶部工具栏
|
||
|
||
用途：表达当前操作上下文。
|
||
|
||
必须包含：
|
||
|
||
- 项目选择器
|
||
- 环境切换：dev / test / staging / prod
|
||
- 集群选择器
|
||
- 当前告警入口
|
||
- 当前用户
|
||
- 当前角色
|
||
|
||
环境切换规范：
|
||
|
||
- `prod` 激活时使用蓝色强调，但旁边的危险操作流程必须出现生产环境提醒。
|
||
- 不同环境切换后，页面数据和操作权限必须同步变化。
|
||
|
||
### 5.3 状态总览卡
|
||
|
||
规格：
|
||
|
||
- 高度：104px - 112px。
|
||
- 图标容器：44px。
|
||
- 标题：12px 辅助文本。
|
||
- 主数字：28px。
|
||
- 单卡最多展示一个主指标。
|
||
|
||
推荐卡片：
|
||
|
||
- 运行中服务数
|
||
- 异常服务数
|
||
- 最近发布
|
||
- 活跃告警
|
||
- 数据库状态
|
||
|
||
### 5.4 表格
|
||
|
||
表格是运维平台的核心组件。
|
||
|
||
规格：
|
||
|
||
- 表头高度：44px。
|
||
- 行高：56px。
|
||
- 单元格左右间距：16px。
|
||
- 表格容器使用一级玻璃面。
|
||
- 表头使用弱玻璃背景。
|
||
- 行分割线使用 `rgba(114, 151, 188, 0.16)`。
|
||
|
||
服务列表字段：
|
||
|
||
| 字段 | 说明 |
|
||
| --- | --- |
|
||
| 服务 | 服务名、可选命名空间 |
|
||
| 状态 | Healthy / Warning / Critical / Unknown |
|
||
| 当前版本 | 镜像 Tag 或语义化版本 |
|
||
| 实例数 | 当前可用/期望实例 |
|
||
| CPU / 内存 | 数字 + 细进度条 |
|
||
| 最近发布 | 相对时间 |
|
||
| 负责人 | 团队或人员 |
|
||
| 操作 | 日志、详情、更多 |
|
||
|
||
操作列规范：
|
||
|
||
- 高频安全操作直接展示：日志、详情。
|
||
- 发布、重启、配置、回滚放入更多菜单。
|
||
- 危险操作使用红色文本，并触发二次确认或流程抽屉。
|
||
|
||
### 5.5 状态 Badge
|
||
|
||
规格：
|
||
|
||
- 高度：24px。
|
||
- 内边距：`0 8px`。
|
||
- 圆角：6px。
|
||
- 左侧可带 6px 状态点。
|
||
|
||
文案固定：
|
||
|
||
- `Healthy`
|
||
- `Warning`
|
||
- `Critical`
|
||
- `Running`
|
||
- `Unknown`
|
||
|
||
状态不能只依赖颜色，必须保留文字。
|
||
|
||
### 5.6 按钮
|
||
|
||
按钮类型：
|
||
|
||
| 类型 | 用途 |
|
||
| --- | --- |
|
||
| Primary | 开始发布、确认执行 |
|
||
| Secondary | 取消、返回 |
|
||
| Ghost | 表格内轻量操作 |
|
||
| Danger | 删除、强制重启、回滚生产 |
|
||
| Icon | 更多、关闭、刷新、返回 |
|
||
|
||
规格：
|
||
|
||
- 默认高度：36px。
|
||
- 大按钮高度：40px。
|
||
- 图标按钮：32px x 32px。
|
||
- 主按钮可以使用蓝色轻微渐变和柔和阴影。
|
||
|
||
Primary 示例：
|
||
|
||
```css
|
||
.button-primary {
|
||
color: #fff;
|
||
background: linear-gradient(180deg, #3f8cff 0%, #1f6ee8 100%);
|
||
box-shadow: 0 10px 24px rgba(47, 125, 246, 0.34);
|
||
}
|
||
```
|
||
|
||
### 5.7 表单和选择器
|
||
|
||
规格：
|
||
|
||
- 高度：36px。
|
||
- 圆角：8px。
|
||
- 背景：弱玻璃面。
|
||
- Focus：品牌蓝边框 + 聚焦环。
|
||
- Disabled：降低透明度，文字使用禁用色。
|
||
|
||
下拉选择器用于：
|
||
|
||
- 项目
|
||
- 集群
|
||
- 镜像 Tag
|
||
- 命名空间
|
||
- 数据库实例
|
||
|
||
### 5.8 Tabs
|
||
|
||
服务详情页使用 Tabs。
|
||
|
||
规格：
|
||
|
||
- 高度：48px。
|
||
- 激活态：蓝色文字 + 底部 2px 指示线。
|
||
- 标签数量超过 7 个时，后续项目进入更多菜单。
|
||
|
||
推荐顺序：
|
||
|
||
概览、实例、发布、日志、监控、配置、事件。
|
||
|
||
### 5.9 右侧流程抽屉
|
||
|
||
用途：发布、重启、回滚、配置变更。
|
||
|
||
规格：
|
||
|
||
- 宽度：420px - 460px。
|
||
- 高度：全高或内容区全高。
|
||
- 背景：强玻璃面。
|
||
- 顶部固定：标题 + 关闭按钮。
|
||
- 底部固定：取消 + 主操作按钮。
|
||
- 中间内容滚动。
|
||
|
||
发布抽屉步骤：
|
||
|
||
1. 选择版本或镜像 Tag。
|
||
2. 选择发布策略：滚动发布、灰度发布、全量发布。
|
||
3. 查看变更内容。
|
||
4. 预检查。
|
||
5. 确认执行。
|
||
6. 发布中。
|
||
7. 完成。
|
||
|
||
生产环境提醒：
|
||
|
||
- 放在抽屉顶部。
|
||
- 使用 Warning 语义色。
|
||
- 明确展示当前环境、影响实例数、是否需要二次确认。
|
||
|
||
### 5.10 Stepper
|
||
|
||
规格：
|
||
|
||
- 圆点尺寸：22px。
|
||
- 当前步骤：品牌蓝圆点 + 白色数字。
|
||
- 完成步骤：Success 色 + 对勾。
|
||
- 未开始步骤：灰色圆点。
|
||
- 每个步骤块使用弱玻璃面。
|
||
|
||
步骤内容必须简洁，避免长段说明。
|
||
|
||
### 5.11 图表
|
||
|
||
适用于服务详情、监控概览、数据库资源页。
|
||
|
||
规范：
|
||
|
||
- 使用轻量折线图。
|
||
- 网格线透明度低。
|
||
- 坐标轴文字使用辅助文本色。
|
||
- 图表高度：120px - 180px。
|
||
- 小图表不放过多图例。
|
||
- 图表颜色固定使用指标色，不随机。
|
||
|
||
监控概览推荐：
|
||
|
||
- CPU 使用率
|
||
- 内存使用率
|
||
- QPS
|
||
- 错误率
|
||
- 平均响应延迟
|
||
- P95 响应延迟
|
||
|
||
### 5.12 菜单
|
||
|
||
规格：
|
||
|
||
- 宽度：120px - 180px。
|
||
- 背景：强玻璃面。
|
||
- 菜单项高度：36px。
|
||
- 危险操作放底部，红色文字，必要时加分割线。
|
||
|
||
服务行更多菜单：
|
||
|
||
- 发布
|
||
- 重启
|
||
- 配置
|
||
- 回滚
|
||
|
||
### 5.13 Toast 和通知
|
||
|
||
位置：
|
||
|
||
- 默认右上角。
|
||
- 发布流程内的状态反馈优先显示在抽屉内部，不只依赖 Toast。
|
||
|
||
类型：
|
||
|
||
- 成功：发布完成、重启完成。
|
||
- 警告：预检查有风险。
|
||
- 错误：发布失败、连接失败。
|
||
- 信息：任务已提交。
|
||
|
||
### 5.14 空状态和异常状态
|
||
|
||
空状态保持克制：
|
||
|
||
- 不使用大插画。
|
||
- 使用图标 + 一句话 + 主操作按钮。
|
||
|
||
示例：
|
||
|
||
- 暂无服务
|
||
- 暂无发布记录
|
||
- 当前环境未接入数据库
|
||
|
||
异常状态必须给出下一步：
|
||
|
||
- 重试
|
||
- 查看日志
|
||
- 查看事件
|
||
- 联系负责人
|
||
|
||
## 6. 运维业务页面规范
|
||
|
||
### 6.1 微服务页
|
||
|
||
核心能力：
|
||
|
||
- 服务搜索
|
||
- 状态筛选
|
||
- 负责人筛选
|
||
- 环境和集群继承顶部上下文
|
||
- 批量操作仅允许安全操作，危险操作默认不批量开放
|
||
|
||
列表优先，不使用卡片墙。
|
||
|
||
### 6.2 发布记录页
|
||
|
||
字段：
|
||
|
||
- 时间
|
||
- 服务
|
||
- 环境
|
||
- 版本变更
|
||
- 发布策略
|
||
- 操作人
|
||
- 状态
|
||
- 耗时
|
||
- 操作入口
|
||
|
||
状态：
|
||
|
||
- 成功
|
||
- 失败
|
||
- 执行中
|
||
- 已回滚
|
||
|
||
### 6.3 数据资源页
|
||
|
||
不要默认做成在线数据库客户端。第一版以运维视角为主。
|
||
|
||
资源类型：
|
||
|
||
- MySQL
|
||
- MongoDB
|
||
- Redis
|
||
- MQ / Kafka
|
||
|
||
每个资源展示：
|
||
|
||
- 连接状态
|
||
- 主从/副本状态
|
||
- 容量
|
||
- 连接数
|
||
- 慢查询/错误摘要
|
||
- 备份状态
|
||
- 所属服务
|
||
- 负责人
|
||
|
||
生产环境查询能力必须加权限、审批、脱敏和审计。
|
||
|
||
### 6.4 日志与事件页
|
||
|
||
日志规范：
|
||
|
||
- 时间范围
|
||
- 服务筛选
|
||
- 级别筛选
|
||
- 关键词搜索
|
||
- 实时跟随开关
|
||
|
||
事件规范：
|
||
|
||
- 发布事件
|
||
- 重启事件
|
||
- 健康检查事件
|
||
- 配置变更事件
|
||
- 数据库连接异常事件
|
||
|
||
### 6.5 权限与审计页
|
||
|
||
必须展示：
|
||
|
||
- 操作人
|
||
- 操作对象
|
||
- 操作类型
|
||
- 环境
|
||
- 操作时间
|
||
- 执行结果
|
||
- 关联工单或审批记录
|
||
|
||
## 7. 交互状态
|
||
|
||
### 7.1 Hover
|
||
|
||
- 玻璃面亮度轻微增加。
|
||
- 边框高光增强。
|
||
- 可点击区域必须显示指针。
|
||
- 不使用明显位移，避免表格扫描时跳动。
|
||
|
||
### 7.2 Active
|
||
|
||
- 导航、Tabs、环境切换使用品牌蓝。
|
||
- 按钮 Active 可以降低亮度。
|
||
|
||
### 7.3 Focus
|
||
|
||
所有可交互元素必须有键盘 Focus 状态。
|
||
|
||
推荐：
|
||
|
||
```css
|
||
:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 4px rgba(47, 125, 246, 0.22);
|
||
}
|
||
```
|
||
|
||
### 7.4 Loading
|
||
|
||
场景：
|
||
|
||
- 页面首次加载：骨架屏。
|
||
- 表格局部刷新：表格内 loading，不遮挡整个页面。
|
||
- 发布执行：抽屉内步骤状态实时更新。
|
||
|
||
### 7.5 Disabled
|
||
|
||
- 降低透明度。
|
||
- 保留 Tooltip 或说明，解释为什么不可操作。
|
||
- 对危险操作，权限不足时不要隐藏入口，建议展示禁用态并说明权限要求。
|
||
|
||
## 8. 动效规范
|
||
|
||
动效只用于反馈，不用于装饰。
|
||
|
||
时间：
|
||
|
||
| 场景 | 时长 |
|
||
| --- | --- |
|
||
| Hover / Press | 120ms |
|
||
| 菜单展开 | 160ms |
|
||
| 抽屉进入 | 220ms |
|
||
| Toast 出现 | 180ms |
|
||
| 步骤状态变化 | 180ms |
|
||
|
||
缓动：
|
||
|
||
```css
|
||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
||
```
|
||
|
||
禁止：
|
||
|
||
- 背景长期大幅动画。
|
||
- 表格行持续闪烁。
|
||
- 告警使用高频闪烁。
|
||
|
||
## 9. 可访问性和可读性
|
||
|
||
最低要求：
|
||
|
||
- 正文和背景对比度不低于 4.5:1。
|
||
- 大号关键数字对比度不低于 3:1。
|
||
- 状态不能只靠颜色表达，必须有文字或图标。
|
||
- 点击目标不小于 32px x 32px。
|
||
- 抽屉、弹窗、菜单支持键盘关闭。
|
||
- 用户开启减少动态效果时，禁用非必要过渡。
|
||
|
||
玻璃面可读性规则：
|
||
|
||
- 承载正文的玻璃层透明度不低于 0.58。
|
||
- 承载表格和表单的玻璃层透明度不低于 0.68。
|
||
- 背景折射纹理不能穿过表格文字密集区域。
|
||
|
||
## 10. 文案规范
|
||
|
||
操作文案：
|
||
|
||
- 使用动词 + 对象：发布服务、重启实例、回滚版本。
|
||
- 危险操作必须说明影响：将重启 3 个实例，期间可能出现短暂连接波动。
|
||
- 避免模糊文案：确定、提交、处理。
|
||
|
||
状态文案：
|
||
|
||
- 发布中
|
||
- 发布成功
|
||
- 发布失败
|
||
- 预检查通过
|
||
- 预检查未通过
|
||
- 等待确认
|
||
|
||
生产环境确认文案示例：
|
||
|
||
> 当前环境为 prod，本次操作将影响 3 个实例。请确认已评估影响范围，并已记录审计日志。
|
||
|
||
## 11. 全局实现建议
|
||
|
||
建议在前端项目中建立以下基础层：
|
||
|
||
```text
|
||
styles/
|
||
tokens.css
|
||
glass.css
|
||
layout.css
|
||
components.css
|
||
```
|
||
|
||
基础 CSS 变量示例：
|
||
|
||
```css
|
||
:root {
|
||
color-scheme: light;
|
||
|
||
--color-bg-page: #edf6ff;
|
||
--color-text-primary: #1d2b3a;
|
||
--color-text-secondary: #52677f;
|
||
--color-text-tertiary: #7b8da3;
|
||
|
||
--color-brand: #2f7df6;
|
||
--color-success: #18a957;
|
||
--color-warning: #f5a524;
|
||
--color-danger: #e5484d;
|
||
|
||
--radius-shell: 20px;
|
||
--radius-panel: 16px;
|
||
--radius-card: 8px;
|
||
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
|
||
--shadow-glass-sm: 0 8px 24px rgba(55, 101, 145, 0.12);
|
||
--shadow-glass-md: 0 18px 48px rgba(55, 101, 145, 0.16);
|
||
--shadow-glass-lg: 0 24px 64px rgba(48, 92, 132, 0.2);
|
||
}
|
||
```
|
||
|
||
## 12. 禁止项
|
||
|
||
- 不要做营销型 Hero 首页。
|
||
- 不要把后台做成大面积宣传卡片。
|
||
- 不要让危险操作裸露成显眼的大按钮。
|
||
- 不要在表格密集区域使用过强背景纹理。
|
||
- 不要只用颜色表达服务状态。
|
||
- 不要在玻璃容器中再嵌套多层卡片。
|
||
- 不要把生产环境操作和测试环境操作做成完全一样的确认流程。
|
||
- 不要默认开放生产数据库查询入口。
|
||
- 不要隐藏审计记录。
|
||
|
||
## 13. 页面优先级
|
||
|
||
MVP 推荐顺序：
|
||
|
||
1. 项目运维台首页。
|
||
2. 微服务列表。
|
||
3. 服务详情页。
|
||
4. 发布抽屉。
|
||
5. 重启确认流程。
|
||
6. 发布记录。
|
||
7. 数据资源状态页。
|
||
8. 日志与事件。
|
||
9. 权限与审计。
|
||
|
||
判断一个页面是否符合规范，可以用三句话检查：
|
||
|
||
- 第一眼能不能看出当前环境和服务健康情况。
|
||
- 第二步能不能定位异常服务和关键指标。
|
||
- 第三步执行危险操作时，是否有明确影响范围、确认流程和审计记录。
|