273 lines
4.3 KiB
Markdown
273 lines
4.3 KiB
Markdown
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）
|
||
|
||
```css
|
||
: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
|
||
所有组件必须可复用
|
||
状态颜色必须统一
|
||
|
||
如需新增组件，必须先扩展本规范后再开发。
|