hyapp-admin-platform/design.md

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
所有组件必须可复用
状态颜色必须统一

如需新增组件，必须先扩展本规范后再开发。