admin/hyapp-deploly

Fork 0

zhx 29dcce8ca0 Add deploy platform initial project

2026-05-20 16:49:19 +08:00

20 KiB

Raw Permalink Blame History

液态玻璃后台 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 首页布局

首页名称建议：项目运维台。

从上到下：

顶部筛选栏：项目、环境、集群、当前告警、当前用户、角色。
状态总览：运行中服务数、异常服务数、最近发布、活跃告警、数据库状态。
微服务列表：服务、状态、版本、实例数、CPU/内存、最近发布、负责人、操作。
下方可选区域：最近事件、资源状态、告警摘要。

首页不使用大 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 背景

页面背景使用柔和的大面积渐变，不使用离散装饰圆球、漂浮光斑或强装饰图形。

4.3 玻璃材质

默认玻璃面：

.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%);
}

强玻璃面用于右侧抽屉、弹窗、顶部关键容器：

.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：

.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 字体

字体栈：

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 示例：

.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。
高度：全高或内容区全高。
背景：强玻璃面。
顶部固定：标题 + 关闭按钮。
底部固定：取消 + 主操作按钮。
中间内容滚动。

发布抽屉步骤：

选择版本或镜像 Tag。
选择发布策略：滚动发布、灰度发布、全量发布。
查看变更内容。
预检查。
确认执行。
发布中。
完成。

生产环境提醒：

放在抽屉顶部。
使用 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 状态。

7.4 Loading

场景：

页面首次加载：骨架屏。
表格局部刷新：表格内 loading，不遮挡整个页面。
发布执行：抽屉内步骤状态实时更新。

7.5 Disabled

降低透明度。
保留 Tooltip 或说明，解释为什么不可操作。
对危险操作，权限不足时不要隐藏入口，建议展示禁用态并说明权限要求。

8. 动效规范

动效只用于反馈，不用于装饰。

时间：

场景	时长
Hover / Press	120ms
菜单展开	160ms
抽屉进入	220ms
Toast 出现	180ms
步骤状态变化	180ms

缓动：

--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. 全局实现建议

建议在前端项目中建立以下基础层：

styles/
  tokens.css
  glass.css
  layout.css
  components.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 推荐顺序：

项目运维台首页。
微服务列表。
服务详情页。
发布抽屉。
重启确认流程。
发布记录。
数据资源状态页。
日志与事件。
权限与审计。

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

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

20 KiB Raw Permalink Blame History Unescape Escape