14 KiB

Raw Blame History

GEO 平台 - UI 风格指南

概述

本文档定义 GEO 平台的前端 UI 风格规范，确保全平台视觉一致性。所有前端开发人员、UI 设计师和产品经理应遵循本指南进行界面设计和开发。

GEO 平台的 UI 设计遵循以下核心原则：

专业可信：体现企业级 SaaS 平台的专业感和可信度
简洁高效：减少视觉噪音，让用户聚焦于数据和操作
层次分明：通过清晰的信息层级引导用户注意力
响应式适配：适配桌面端、平板和移动端设备

风格特征总结

设计语言

特征	描述	应用场景
扁平化设计	去除冗余装饰，强调内容和功能	全局
卡片化布局	使用卡片容器组织信息模块	仪表盘、列表页
留白呼吸感	充足的内边距和外边距	全局
微妙的层次感	通过阴影和边框区分层级	卡片、弹窗、下拉
数据可视化	丰富的图表和数据展示	仪表盘、报告页
状态色彩编码	使用颜色直观表达状态	状态标签、进度条

整体氛围

主色调：深蓝/靛蓝色系，传达专业、科技、可信
辅助色：翠绿色表示成功/正向，琥珀色表示警告，红色表示错误
中性色：丰富的灰度层级用于文字和边框
背景：浅色背景为主，深色模式作为可选项

Design Tokens

颜色体系

主色调（Primary）

Token	色值	用途
`--color-primary-50`	`#EEF2FF`	极浅背景、hover 状态
`--color-primary-100`	`#E0E7FF`	轻色背景、选中状态
`--color-primary-200`	`#C7D2FE`	边框高亮
`--color-primary-300`	`#A5B4FC`	禁用状态主色
`--color-primary-400`	`#818CF8`	次要强调
`--color-primary-500`	`#6366F1`	主色 - 按钮、链接、图标
`--color-primary-600`	`#4F46E5`	按钮 hover、深色调
`--color-primary-700`	`#4338CA`	按钮 active
`--color-primary-800`	`#3730A3`	深色背景文字
`--color-primary-900`	`#312E81`	标题、深色元素

语义色（Semantic）

Token	色值	用途
`--color-success-50`	`#F0FDF4`	成功状态轻背景
`--color-success-500`	`#22C55E`	成功 - 成功提示、正向指标
`--color-success-600`	`#16A34A`	成功 hover
`--color-warning-50`	`#FFFBEB`	警告状态轻背景
`--color-warning-500`	`#F59E0B`	警告 - 警告提示、待处理
`--color-warning-600`	`#D97706`	警告 hover
`--color-error-50`	`#FEF2F2`	错误状态轻背景
`--color-error-500`	`#EF4444`	错误 - 错误提示、失败状态
`--color-error-600`	`#DC2626`	错误 hover
`--color-info-50`	`#EFF6FF`	信息状态轻背景
`--color-info-500`	`#3B82F6`	信息 - 信息提示

中性色（Neutral）

Token	色值	用途
`--color-gray-50`	`#F9FAFB`	页面背景、hover 背景
`--color-gray-100`	`#F3F4F6`	卡片背景、分隔背景
`--color-gray-200`	`#E5E7EB`	边框、分隔线
`--color-gray-300`	`#D1D5DB`	禁用边框、占位符
`--color-gray-400`	`#9CA3AF`	次要文字、图标
`--color-gray-500`	`#6B7280`	辅助文字
`--color-gray-600`	`#4B5563`	正文文字
`--color-gray-700`	`#374151`	标题文字
`--color-gray-800`	`#1F2937`	深色标题
`--color-gray-900`	`#111827`	主标题、深色文字

圆角（Border Radius）

Token	值	用途
`--radius-none`	`0`	直角（表格、特殊场景）
`--radius-sm`	`4px`	小元素（标签、徽章）
`--radius-md`	`6px`	默认（按钮、输入框）
`--radius-lg`	`8px`	卡片、容器
`--radius-xl`	`12px`	大卡片、模态框
`--radius-2xl`	`16px`	页面级容器
`--radius-full`	`9999px`	圆形（头像、状态点）

阴影（Shadow）

Token	值	用途
`--shadow-sm`	`0 1px 2px 0 rgba(0,0,0,0.05)`	轻微提升（按钮 hover）
`--shadow-md`	`0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)`	卡片默认
`--shadow-lg`	`0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)`	下拉菜单、浮层
`--shadow-xl`	`0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)`	模态框、抽屉
`--shadow-inner`	`inset 0 2px 4px 0 rgba(0,0,0,0.05)`	内嵌效果

字体（Typography）

字体族

Token	值	用途
`--font-sans`	`Inter, "PingFang SC", "Microsoft YaHei", sans-serif`	正文、UI 文字
`--font-mono`	`"JetBrains Mono", "Fira Code", monospace`	代码、数据值

字号层级

Token	大小	字重	行高	用途
`--text-xs`	`12px`	400	`16px`	辅助说明、时间戳
`--text-sm`	`14px`	400	`20px`	次要文字、描述
`--text-base`	`16px`	400	`24px`	正文默认
`--text-lg`	`18px`	500	`28px`	小标题、强调文字
`--text-xl`	`20px`	600	`28px`	卡片标题
`--text-2xl`	`24px`	600	`32px`	页面小标题
`--text-3xl`	`30px`	700	`36px`	页面标题
`--text-4xl`	`36px`	700	`40px`	大标题、数字展示

间距（Spacing）

Token	值	用途
`--space-1`	`4px`	极小间距
`--space-2`	`8px`	紧凑间距（图标与文字）
`--space-3`	`12px`	小间距
`--space-4`	`16px`	默认间距（内边距基础）
`--space-5`	`20px`	中等间距
`--space-6`	`24px`	卡片内边距
`--space-8`	`32px`	区块间距
`--space-10`	`40px`	大区块间距
`--space-12`	`48px`	页面级间距
`--space-16`	`64px`	大页面间距

组件改造计划

GEO 平台基于 shadcn/ui 组件库进行构建，以下是对核心组件的定制化规范。

Button 按钮

变体	背景	文字	边框	Hover	用途
`default`	`primary-500`	white	none	`primary-600`	主要操作
`secondary`	`gray-100`	`gray-900`	none	`gray-200`	次要操作
`outline`	transparent	`gray-700`	`gray-200`	`gray-50`	辅助操作
`ghost`	transparent	`gray-700`	none	`gray-100`	极简操作
`destructive`	`error-500`	white	none	`error-600`	危险操作
`link`	transparent	`primary-500`	none	underline	链接样式

尺寸规范：

sm：h-8 px-3 text-sm
md（默认）：h-10 px-4 text-base
lg：h-12 px-6 text-lg

Card 卡片

默认样式：
- 背景：white
- 圆角：`radius-lg` (8px)
- 阴影：`shadow-md`
- 内边距：`space-6` (24px)
- 边框：`1px solid gray-200`

Hover 状态：
- 阴影提升：`shadow-lg`
- 过渡：`transition-shadow duration-200`

卡片变体：

变体	说明
`default`	标准卡片，用于信息展示
`stats`	统计卡片，大号数字 + 描述
`interactive`	可交互卡片，hover 有明显反馈
`flat`	扁平卡片，无阴影，用于列表项

Input 输入框

默认样式：
- 高度：`h-10`
- 圆角：`radius-md` (6px)
- 边框：`1px solid gray-300`
- 内边距：`px-3`
- 字体：`text-base`
- 背景：white

Focus 状态：
- 边框：`primary-500`
- 阴影：`0 0 0 2px primary-100`
- 过渡：`transition-all duration-200`

错误状态：
- 边框：`error-500`
- 阴影：`0 0 0 2px error-50`

Badge 标签

变体	背景	文字	用途
`default`	`primary-100`	`primary-700`	默认标签
`secondary`	`gray-100`	`gray-700`	次要标签
`success`	`success-50`	`success-600`	成功状态
`warning`	`warning-50`	`warning-600`	警告状态
`error`	`error-50`	`error-600`	错误状态
`info`	`info-50`	`info-600`	信息状态

Table 表格

默认样式：
- 表头背景：`gray-50`
- 表头文字：`gray-700` font-medium text-sm
- 行高：`h-12`
- 行边框：`border-b border-gray-200`
- 行 hover：`bg-gray-50`
- 单元格内边距：`px-4 py-3`
- 空状态：居中显示插图 + 提示文字

特殊行样式：

状态	样式
选中行	`bg-primary-50`
禁用行	`opacity-50`
高亮行	`bg-warning-50`

默认样式：
- 遮罩：`bg-black/50`
- 容器背景：white
- 圆角：`radius-xl` (12px)
- 阴影：`shadow-xl`
- 最大宽度：`max-w-lg` (512px)
- 内边距：`p-6`
- 动画：fade-in + scale-in

头部：
- 标题：`text-lg font-semibold`
- 关闭按钮：右上角 ghost 按钮

底部操作区：
- 居右排列
- 主按钮在右，次按钮在左
- 间距：`gap-3`

Toast 通知

类型	图标	背景	边框
`success`	CheckCircle	white	`success-200`
`warning`	AlertTriangle	white	`warning-200`
`error`	XCircle	white	`error-200`
`info`	Info	white	`info-200`

默认样式：
- 位置：右上角固定
- 最大宽度：`400px`
- 圆角：`radius-lg`
- 阴影：`shadow-lg`
- 内边距：`p-4`
- 自动关闭：`5秒`
- 动画：slide-in-right + fade-out

侧边栏导航：

默认样式：
- 宽度：`w-64` (256px)
- 背景：`gray-900`
- 文字：`gray-300`

选中状态：
- 背景：`primary-600`
- 文字：white
- 左侧边框指示：`3px solid primary-400`

Hover 状态：
- 背景：`gray-800`
- 文字：white

顶部导航：

默认样式：
- 高度：`h-16`
- 背景：white
- 边框：`border-b border-gray-200`
- 阴影：`shadow-sm`

交互规范

过渡动画

场景	时长	缓动函数	属性
按钮 hover	`150ms`	`ease-in-out`	`background-color, border-color, box-shadow`
卡片 hover	`200ms`	`ease-out`	`box-shadow, transform`
模态框出现	`200ms`	`cubic-bezier(0.16, 1, 0.3, 1)`	`opacity, transform`
下拉菜单	`150ms`	`ease-out`	`opacity, transform`
Toast 出现/消失	`300ms`	`ease-in-out`	`opacity, transform`
页面切换	`200ms`	`ease-in-out`	`opacity`
数据加载骨架屏	`pulse 2s infinite`	-	`opacity`

加载状态

场景	样式
页面加载	全屏骨架屏 + Logo
数据加载	卡片/表格骨架屏
按钮加载	按钮内 Spinner，禁用点击
无限滚动	底部 Spinner
文件上传	进度条 + 百分比

空状态

统一空状态样式：
- 居中布局
- 插图/图标：`primary-200` 色调
- 标题：`text-lg font-medium text-gray-700`
- 描述：`text-sm text-gray-500`
- 操作按钮（可选）：`primary` 按钮

错误状态

统一错误状态样式：
- 错误图标：`error-500` 色的 AlertTriangle
- 标题：`text-lg font-medium text-gray-900`
- 描述：`text-sm text-gray-600`
- 重试按钮：`outline` 按钮
- 错误详情（可选）：可展开的折叠面板

表单校验

校验提示样式：
- 错误信息：`text-xs text-error-500 mt-1`
- 错误图标：输入框右侧 `error-500` 图标
- 成功图标：输入框右侧 `success-500` Check 图标
- 实时校验：输入后 `300ms` 延迟触发

布局规范

页面结构

┌─────────────────────────────────────────────┐
│  顶部导航栏 (h-16, fixed)                    │
├──────────┬──────────────────────────────────┤
│          │  页面标题区                        │
│  侧边栏   │  ┌────────────────────────────┐  │
│ (w-64)   │  │  内容区                       │  │
│  fixed   │  │  ┌──────┐ ┌──────┐ ┌──────┐ │  │
│          │  │  │ 卡片  │ │ 卡片  │ │ 卡片  │ │  │
│          │  │  └──────┘ └──────┘ └──────┘ │  │
│          │  │  ┌────────────────────────┐  │  │
│          │  │  │ 表格/列表               │  │  │
│          │  │  └────────────────────────┘  │  │
│          │  └────────────────────────────┘  │
└──────────┴──────────────────────────────────┘

响应式断点

断点	宽度	布局调整
`sm`	`640px`	移动端基础适配
`md`	`768px`	侧边栏可折叠
`lg`	`1024px`	完整桌面布局
`xl`	`1280px`	宽屏扩展
`2xl`	`1536px`	超宽屏

网格系统

采用 CSS Grid + Flexbox 混合布局
仪表盘卡片网格：grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4
卡片间距：gap-6
页面最大宽度：max-w-7xl (1280px)，居中显示

图表规范

GEO 平台大量使用数据可视化图表，基于 Recharts 实现。

配色方案

图表主色系：
- 系列 1：`#6366F1` (primary-500)
- 系列 2：`#22C55E` (success-500)
- 系列 3：`#F59E0B` (warning-500)
- 系列 4：`#EF4444` (error-500)
- 系列 5：`#8B5CF6` (violet-500)
- 系列 6：`#06B6D4` (cyan-500)

图表样式

通用样式：
- 背景：透明
- 网格线：`gray-200`，虚线
- 坐标轴文字：`gray-500`，text-xs
- 图例：底部居中
- Tooltip：白色背景，圆角，阴影

柱状图：
- 圆角：`radius-sm` 顶部
- 间距：`barGap=4`

折线图：
- 线条宽度：`2px`
- 数据点：`r=4`，hover `r=6`
- 填充区域：`fillOpacity=0.1`

饼图/环形图：
- 内半径：`60%`
- 标签：外部引导线 + 百分比

本文档定义 GEO 平台的 UI 风格规范，所有前端实现应严格遵循以上 Design Tokens 和组件规范。

14 KiB Raw Blame History Unescape Escape