frontend-design

name	frontend-design
description	前端界面设计技能。当需要为监测平台、数据看板或内部管理系统设计 Web 前端界面时加载此技能，获取工程行业 UI 规范和组件设计指引。

适用场景

• 自动化监测云平台的数据看板页面
• 项目管理后台界面
• 监测预警大屏展示页面
• 移动端巡检记录 H5 页面
• 内部工具系统（数据上传、报表查看、审批流程）

设计原则

1. 工程行业 UI 特点

工程监测平台不同于消费类产品，用户是项目经理、监测工程师和甲方负责人。核心诉求：

优先级	需求	设计要求
最高	数据清晰可读	大字号数据展示，表格行高充足，关键数据突出
高	预警醒目	红/橙/黄/绿四色预警体系贯穿全局
高	快速定位异常	异常数据置顶或高亮，无需翻页查找
中	操作简单	目标用户非技术人员，减少操作步骤
低	视觉美观	专业稳重风格，避免花哨动效

2. 配色体系

预警四色系统（全平台统一）

等级	颜色	Hex	含义
正常	绿色	#16a34a	各项指标在安全范围内
提示	黄色	#ca8a04	达到控制值 70%，需关注
预警	橙色	#ea580c	达到控制值 85%，需加密观测
报警	红色	#dc2626	达到或超过控制值，启动应急预案

基础配色

用途	色值	说明
主色	#2563eb	品牌蓝，导航栏、主按钮
背景	#f8fafc	浅灰白，页面底色
卡片	#ffffff	纯白，内容卡片
文字主色	#1e293b	深灰蓝，正文
文字辅色	#64748b	中灰，标签和说明文字
边框	#e2e8f0	浅灰，卡片和表格边框

3. 字体与排版

标题：     16-20px, font-weight: 600, color: #1e293b
数据大字： 28-36px, font-weight: 700, font-variant-numeric: tabular-nums
正文：     14px, line-height: 1.6
表格内容： 13-14px, font-variant-numeric: tabular-nums
标签：     12px, color: #64748b

数值展示必须使用等宽数字（tabular-nums），确保列对齐。

常用页面结构

监测数据看板

┌─────────────────────────────────────────┐
│  导航栏（项目名称 / 日期选择 / 预警统计） │
├───────┬─────────────────────────────────┤
│       │  统计卡片区（4列）               │
│  侧   │  ┌──────┬──────┬──────┬──────┐  │
│  边   │  │正常XX │提示XX │预警XX │报警XX│  │
│  栏   │  └──────┴──────┴──────┴──────┘  │
│       │                                 │
│  项   │  趋势图区域                      │
│  目   │  ┌─────────────────────────────┐│
│  列   │  │  chart_generator SVG 嵌入   ││
│  表   │  └─────────────────────────────┘│
│       │                                 │
│       │  数据表格区域                    │
│       │  ┌─────────────────────────────┐│
│       │  │  测点 │ 本期 │ 累计 │ 状态  ││
│       │  │  ...  │ ...  │ ...  │ ...   ││
│       │  └─────────────────────────────┘│
└───────┴─────────────────────────────────┘

预警大屏

┌─────────────────────────────────────────┐
│  顶部标题栏（项目名 + 实时时间 + 天气）  │
├─────────────┬───────────┬───────────────┤
│  左侧面板    │  中央地图   │  右侧面板    │
│  预警列表    │  测点分布   │  趋势图表    │
│  （按等级    │  （地图标点  │  （选中测点   │
│   排序）     │  颜色=等级） │  的时序曲线） │
├─────────────┴───────────┴───────────────┤
│  底部：滚动公告栏（最近预警事件 + 施工动态） │
└─────────────────────────────────────────┘

组件设计规范

数据卡片

宽度：自适应（grid 等分）
高度：100-120px
内容：指标名称（12px灰色） + 数值（28-36px加粗） + 单位（14px） + 变化箭头
边框：1px solid #e2e8f0，圆角 8px
阴影：0 1px 3px rgba(0,0,0,0.1)
预警态：左边框 4px 对应预警色

数据表格

表头：背景 #f1f5f9，font-weight: 600，粘性定位
行高：40-44px（确保可点击）
斑马纹：奇数行 #ffffff，偶数行 #f8fafc
超限行：背景 #fef2f2（红色浅底），左边框 3px #dc2626
hover：背景 #eff6ff

状态标签

正常：background: #dcfce7; color: #166534; border-radius: 4px; padding: 2px 8px; 提示：background: #fef9c3; color:
#854d0e; 预警：background: #ffedd5; color: #9a3412; 报警：background: #fee2e2; color: #991b1b; font-weight: 600;

技术选型建议

场景	推荐方案
数据看板	React + Tailwind CSS + Recharts
预警大屏	React + ECharts（地图能力）
移动端 H5	React + Ant Design Mobile
内部工具	React + Ant Design Pro
快速原型	HTML + Tailwind CDN

注意事项

• 监测平台用户多为 Windows + Chrome/Edge 环境，确保兼容性
• 大屏页面需适配 1920×1080 和 3840×2160 两种分辨率
• 表格数据可能很长（200+ 行），必须使用虚拟滚动或分页
• 图表使用 chart_generator 工具生成 SVG 后可直接嵌入页面
• 中文字体优先使用系统字体栈："PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif