NE503-设计规范

基础颜色

语义颜色

状态颜色

Toast 消息预览

✓ 操作成功完成

⚠ 请注意检查

ℹ 系统信息提示

✕ 操作失败

界面元素

链接颜色

普通链接已访问链接悬停查看效果

表格颜色

设备名称	状态	CPU	内存
Camera-01	在线	45%	2.1GB
Camera-02	在线	38%	1.8GB
Camera-03	离线	-	-
Camera-04	在线	52%	2.4GB

加载状态

滚动条

徽章颜色

默认主要成功警告错误轮廓

图表颜色

侧边栏颜色

侧边栏预览

CamThink

📊 Dashboard

📱 Apps (hover)

⚙️ Settings (active)

→ Network

🔧 Maintenance

颜色用途对照

aside 背景 --sidebar

激活菜单项背景 --sidebar-primary / 10%

激活菜单文字 --sidebar-primary

悬停菜单项背景 --sidebar-accent

普通菜单文字 --sidebar-foreground

侧边栏边框 --sidebar-border

字体大小规范

页面标题

示例

系统信息

Tailwind

text-lg font-bold

用于页面区块标题、对话框标题

卡片标题

示例

System Information

Tailwind

text-base font-bold

用于 Dashboard 卡片标题

正文（默认）

示例

这是正文内容，用于大多数 UI 元素

Tailwind

text-sm (14px)

正文、标签、按钮文字、列表项 - 系统默认字体大小

辅助文字

示例

说明文字、时间戳

Tailwind

text-xs (12px)

用于说明文字、时间戳、标签、元数据

图标尺寸

小图标

w-3.5 h-3.5 (14px)

常规图标

w-4 h-4 (16px)

功能图标

w-4.5 h-4.5 (18px)

列表图标用 w-3.5，按钮图标用 w-4，功能图标用 w-4.5

圆角规范

主要卡片

示例

rounded-2xl

Tailwind

rounded-2xl (16px)

用于 Dashboard 卡片、主要容器

内容卡片

示例

rounded-xl

Tailwind

rounded-xl (12px)

用于内容区域、Tab 容器、普通卡片

表单行/信息项

示例

rounded-lg

Tailwind

rounded-lg (8px)

用于设置页信息行、表单容器、列表项

按钮

示例

Tailwind

rounded-md (6px)

用于所有按钮、小标签、输入框

徽章/图标背景

示例

rounded-full 运行中

Tailwind

rounded-full

用于状态徽章、用户头像、图标容器背景

间距规范

页面内边距

普通页面

p-4 md:p-6

设置页

p-6 md:p-12

普通页面使用 p-4/p-6，设置页等独立页面使用更大的内边距

卡片内边距

Dashboard 卡片

p-5 (20px)

应用卡片

p-6 (24px)

Dashboard 使用 p-5，应用列表等使用 p-6

元素间距

紧凑间距

gap-2 (8px)

常规间距

gap-4 (16px)

图标与文字用 gap-2，卡片间元素用 gap-4

按钮尺寸

图标按钮

h-8 w-8 (32px)

普通按钮

h-9 (36px)

大按钮

h-11 px-6 (44px)

操作按钮使用 h-9，底部操作按钮使用 h-11

布局规范

两栏布局

示例

col-span-6

Tailwind

grid grid-cols-2 gap-4

三栏布局

示例

col-span-4

Tailwind

grid grid-cols-3 gap-4

四栏布局

示例

col-span-3

Tailwind

grid grid-cols-4 gap-4

阴影规范

卡片默认阴影

示例

shadow-sm

Tailwind

shadow-sm

用于所有卡片、列表项、信息面板的默认阴影

卡片悬停阴影

示例

hover:shadow-md

Tailwind

hover:shadow-md

卡片悬停时提升阴影层级，增强交互反馈

对话框/弹窗阴影

示例

shadow-xl

Tailwind

shadow-xl

用于模态框、对话框、下拉菜单等浮动层

图标规范

图标尺寸

小图标

w-3.5 h-3.5 (14px)

常规图标

w-4 h-4 (16px)

功能图标

w-4.5 h-4.5 (18px)

大图标

w-6 h-6 (24px)

列表图标用 w-3.5，按钮图标用 w-4，功能图标用 w-4.5，导航图标用 w-6

图标颜色

主色图标

text-primary

弱化图标

text-muted-foreground

状态图标

text-success / text-warning / text-error

图标使用场景

📊 Dashboard 导航 w-5 h-5

⚙️ 按钮内图标 w-4 h-4

• 列表项图标 w-3.5 h-3.5

动画规范

过渡时长

悬停效果

duration-200

通用过渡

duration-300

悬停状态使用 200ms，页面过渡使用 300ms

缓动函数

默认

ease (默认)

进入动画

ease-out

退出动画

ease-in

大多数情况使用默认 ease，进入用 ease-out，退出用 ease-in

卡片悬停动画

Tailwind

transition-shadow hover:shadow-md

卡片悬停时提升阴影，提供视觉反馈

常用动画类

淡入 animate-fade-in

滑入 animate-slide-in

脉冲 animate-pulse

旋转加载 animate-spin