4.3 KiB
4.3 KiB
HYApp 管理平台 UI 设计规范（v1.0）
一、设计目标
本系统为 HYApp 管理平台，UI 设计需满足：
- 高信息密度（服务器 / 服务监控）
- 强状态表达（运行 / 异常 / 告警）
- 快速操作（启停 / 重启 / 排查）
- 统一规范（组件可复用）
二、整体布局（Layout）
2.1 页面结构
┌───────────────────────────────┐ │ Header (64px) │ ├──────────────┬────────────────┤ │ Sidebar │ Content │ │ (224px) │ (自适应) │ └──────────────┴────────────────┘
2.2 尺寸规范
| 模块 | 尺寸 |
|---|---|
| Header | 64px |
| Sidebar | 224px |
| 页面 padding | 24px |
| 卡片间距 | 16px |
2.3 响应式
| 分辨率 | 行为 |
|---|---|
| ≥1440px | 标准布局 |
| <1280px | Sidebar 收缩 |
三、设计 Token（CSS Variables）
:root {
/* 背景 */
--bg-page: #F4F7FB;
--bg-sidebar: #FFFFFF;
--bg-header: #FFFFFF;
--bg-card: #FFFFFF;
/* 边框 */
--border: #D8E0EC;
/* 主色 */
--primary: #2563EB;
/* 状态色 */
--success: #16A34A;
--warning: #D97706;
--danger: #DC2626;
--info: #0284C7;
/* 字体 */
--text-primary: #0F172A;
--text-secondary: #475569;
--text-tertiary: #64748B;
}
四、颜色规范（语义化）
4.1 状态颜色
状态 颜色 含义
运行中 #16A34A 正常
已停止 #64748B 不活跃
异常 #DC2626 错误
警告 #D97706 风险
👉 禁止随意更改状态颜色
4.2 图表颜色
--chart-blue: #2563EB;
--chart-green: #16A34A;
--chart-red: #DC2626;
--chart-orange: #D97706;
五、字体规范
5.1 字号
类型 大小
KPI 数值 32px
页面标题 20px
卡片标题 14px
表格文字 13px
辅助文字 12px
5.2 字体
-apple-system, PingFang SC, Microsoft YaHei, sans-serif
六、组件规范
6.1 Sidebar（侧边栏）
宽度：224px
item 高度：44px
状态：
状态 样式
默认 浅色文字
hover 背景高亮
active 渐变蓝
6.2 Header（顶部栏）
包含：
搜索框
刷新按钮
时间筛选
通知
用户信息
6.3 卡片（Card）
基础样式
background: #FFFFFF;
border-radius: 10px;
padding: 20px;
6.4 KPI 卡片
结构：
图标 + 标题
数值（大）
辅助信息（增长/状态）
6.5 图表卡片
组成：
标题
筛选器
图表
规范：
项目 规则
折线 2px
网格线 低透明
字体 12px
七、表格规范
7.1 表格样式
background: #FFFFFF;
border-radius: 10px;
7.2 表头
height: 44px;
background: #F1F5F9;
7.3 行状态
状态 样式
默认 无背景
hover 高亮
7.4 列规范
服务列
包含：
图标
名称
描述
资源列（CPU / 内存）
必须包含：
数值
mini 图表 或 进度条
操作列
按钮顺序：
启动 / 重启 / 停止 / 更多
八、按钮规范
8.1 类型
类型 用途
Primary 主操作
Default 普通
Danger 危险操作
Success 启动
8.2 样式示例
.btn-primary {
background: var(--primary);
color: #FFFFFF;
}
.btn-danger {
color: #DC2626;
}
九、状态组件
9.1 状态点
width: 8px;
height: 8px;
border-radius: 50%;
9.2 Badge
padding: 0 10px;
border-radius: 999px;
十、抽屉（详情面板）
10.1 尺寸
属性 值
宽度 360px
10.2 结构
标题
Tabs（基础信息 / 配置 / 监控 / 日志）
内容区
操作区
十一、页面规范
11.1 总览页
模块顺序：
KPI 卡片
资源图表
告警趋势
服务列表
11.2 服务管理页
模块：
统计卡片
趋势图
筛选栏
表格
详情抽屉
十二、动效规范
场景 时长
hover 150ms
抽屉 250ms
图表更新 渐变
十三、前端实现建议
13.1 技术栈
推荐：
React + Ant Design / Arco
Vue + Element Plus / Naive UI
图表：ECharts
13.2 CSS 架构
styles/
├── tokens.css
├── base.css
├── components/
└── pages/
13.3 命名规范（BEM）
.card {}
.card__header {}
.card__body {}
.table {}
.table__row {}
十四、扩展能力
未来可扩展：
🌙 深浅色模式
📊 多主题
🔔 实时告警（WebSocket）
📱 移动端适配
结语
本规范为 HYApp 管理平台 UI 基础标准：
所有页面必须遵循 Token
所有组件必须可复用
状态颜色必须统一
如需新增组件，必须先扩展本规范后再开发。