# 液态玻璃后台 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. 权限与审计。

判断一个页面是否符合规范，可以用三句话检查：

- 第一眼能不能看出当前环境和服务健康情况。
- 第二步能不能定位异常服务和关键指标。
- 第三步执行危险操作时，是否有明确影响范围、确认流程和审计记录。