openclawdesign

name	openclawdesign
description	OpenClaw Enterprise 设计系统规范。当用户要求创建、修改或审查 OpenClaw Enterprise 平台的 前端页面、组件或 UI 时，必须加载此 Skill 以确保视觉风格、交互模式和代码实现与现有页面完全一致。 适用于 React + TypeScript + Tailwind CSS v4 + shadcn/ui 技术栈。

OpenClaw Enterprise Design System

设计语言：「流动蓝图」Fluid Blueprint 技术栈：React 19 · TypeScript · Vite · Tailwind CSS v4 · shadcn/ui (new-york style) · wouter · lucide-react · recharts · sonner · framer-motion

你是 OpenClaw Enterprise 平台的专属 UI 设计师和前端工程师。你的职责是确保所有新页面、新组件、UI 修改都严格遵循以下设计规范，与现有页面保持视觉和交互的完全一致。

---

1. 色彩系统

1.1 品牌色

名称	值	用途
Brand Blue	#007AFF	主色，活跃态，链接，主按钮
Brand Purple	#5856D6	副色，渐变终点

品牌渐变（全局统一）：

background: linear-gradient(135deg, #007AFF, #5856D6);

用于：Logo 容器、Avatar fallback、主 CTA 按钮、活跃分页按钮。

1.2 语义色

语义	色值	Tailwind 类	用途
成功/运行中	#16A34A	bg-green-500 (dot), text-green-600	状态徽章、在线指示
错误/停用	#DC2626	bg-red-500 (dot), text-red-600	停止状态、危险操作
警告/待处理	#F59E0B	bg-yellow-500 (dot), text-yellow-600	待处理状态
信息提示	—	bg-blue-50 border-blue-100 text-blue-600	提示横幅
警告提示	—	bg-amber-50 border-amber-100 text-amber-700	警告横幅

1.3 背景色

区域	色值	说明
Admin 主背景	#F0F2F8	通过 inline style 设置
Tenant 主背景	#FAFBFF	通过 inline style 设置
卡片/面板	#FFFFFF	纯白
表格斑马纹	bg-gray-50/50	hover 态
表头	bg-gray-50/50	极浅灰

1.4 文字层级

层级	Tailwind 类	用途
一级	text-gray-900	标题、卡片标题、关键数据
二级	text-gray-700	正文、表格内容
三级	text-gray-500	描述、辅助文字
四级	text-gray-400	占位符、极弱提示
活跃	text-blue-600	活跃导航、链接
危险	text-red-400 hover:text-red-600	删除按钮

1.5 渐变 Icon 容器配色

每种功能使用固定渐变，不可混用：

渐变	用途
from-blue-500 to-blue-600	模型、总数统计
from-green-500 to-green-600	通道、运行中
from-purple-500 to-purple-600	技能、输出
from-indigo-500 to-indigo-600	输入 Tokens
from-blue-600 to-purple-600	总 Tokens
from-orange-500 to-red-500	全局配额消耗
from-gray-400 to-gray-500	已停用

---

2. 排版系统

2.1 字体

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

• 正文字体：Inter（权重 400/500/600/700/800）
• 等宽字体：DM Mono（用于 API Key、JSON、代码片段）
• 渲染：开启 antialiased

2.2 字号与字重

用途	Tailwind 类	等效值
页面标题 h1	text-2xl font-bold	24px / 700
卡片标题 h2	font-semibold text-gray-900	16px / 600
统计大数字	text-2xl font-bold	24px / 700
正文/表格	text-sm	14px
标签 Label	text-sm font-medium text-gray-700	14px / 500
描述	text-sm text-gray-500	14px
分组标题	text-xs font-semibold text-gray-400 uppercase tracking-wider	12px / 600
表头	text-xs font-medium text-gray-500 uppercase tracking-wide	12px / 500
Badge 文字	text-xs font-medium	12px / 500
Dialog 标题	text-lg leading-none font-semibold	18px / 600

2.3 数字排版

所有数字内容使用 tabular-nums 确保等宽对齐。

---

3. 间距系统

3.1 页面级

区域	间距
Admin 内容区 padding	p-8 (32px)
Tenant 内容区 padding	px-6 py-8 (24px/32px)
标题区到内容区	mb-6 或 mb-8
Admin max-width	max-w-3xl（表单页）/ max-w-5xl（列表页）/ 不限（监控页）
Tenant max-width	max-w-6xl 或 max-w-7xl

3.2 卡片内

位置	间距
表单卡片	p-8
普通卡片	p-5 或 p-6
卡片 header	px-6 py-5
表格 header cells	px-6 py-3
表格 body cells	px-6 py-4

3.3 元素间

上下文	间距
表单字段间	space-y-6 或 space-y-4
Label 到 Input	space-y-2
按钮组 gap	gap-3
图标与文字	gap-2 或 gap-2.5
统计卡片 grid	gap-4
导航项间	space-y-0.5

---

4. 圆角系统

组件	圆角
主卡片/表格容器	rounded-2xl (16px)
图标容器(大)	rounded-xl (12px)
导航项/输入框/Logo	rounded-lg (8px)
按钮/Badge	rounded-md (6px)
状态徽章/进度条	rounded-full
Dialog	rounded-lg (8px)

---

5. 阴影系统

场景	阴影值
主卡片（最常用）	0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04)
Glass card	0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04)
强调卡片	0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06)
主按钮 hover glow	0 4px 14px rgba(0,122,255,0.3)
Sidebar	1px 0 0 0 rgba(0,0,0,0.04)

注意：通过 inline style={{ boxShadow: "..." }} 设置，不使用 Tailwind shadow 类。

---

6. 动画系统

6.1 页面切换

所有页面根元素必须包含 page-enter class：

.page-enter {
  animation: pageEnter 0.25s ease-out;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

6.2 交互过渡

场景	类
通用 hover	transition-all duration-150
颜色变化	transition-colors
卡片 hover	transition-all duration-200 hover:-translate-y-0.5
按钮 glow	transition: box-shadow 0.2s ease

6.3 Dialog 动画

• 打开：animate-in fade-in-0 zoom-in-95 duration-200
• 关闭：animate-out fade-out-0 zoom-out-95 duration-200

---

7. 布局系统

7.1 Admin 布局

+--[ Sidebar w-64 fixed ]--+--[ Main ml-64 flex-1 p-8 ]--+
|  Logo(h-16 px-5)         |  bg: #F0F2F8                |
|  前往员工端链接            |  page-enter 内容区          |
|  Nav Groups(可折叠)       |                              |
|  User Footer(p-3)        |                              |
+---------------------------+------------------------------+

• Sidebar：w-64, fixed, bg-white, border-r border-gray-100
• 导航项：px-3 py-2 rounded-lg text-sm font-medium gap-2.5
• 活跃项：text-blue-600 bg-blue-50 + border-left: 2px solid #007AFF
• 分组标题：text-xs font-semibold text-gray-400 uppercase tracking-wider
• 导航 icon：w-4 h-4

7.2 Tenant 布局

+--[ Navbar h-16 fixed z-50 bg-white/90 backdrop-blur-md ]--+
|  Logo  |  Nav Items  |  管理后台按钮 + User               |
+-----------------------------------------------------------+
|  pt-16 min-h-screen                                       |
|  max-w-7xl mx-auto px-6 内容区                             |
+-----------------------------------------------------------+

• Navbar：h-16, fixed, z-50, bg-white/90, backdrop-blur-md, border-b border-gray-100
• 导航项：px-4 py-2 rounded-lg text-sm font-medium
• 活跃：text-blue-600 bg-blue-50
• 非活跃：text-gray-600 hover:text-gray-900 hover:bg-gray-50

7.3 响应式网格

场景	列数
OpenClaw 卡片	grid-cols-1 md:grid-cols-2 lg:grid-cols-3
统计卡片	grid-cols-3 或 grid-cols-5
帮助文档	grid-cols-1 md:grid-cols-2

---

8. 组件规范

8.1 按钮

主按钮 CTA（品牌渐变）：

<Button style={{ background: "linear-gradient(135deg, #007AFF, #5856D6)" }} className="text-white btn-primary-glow">

尺寸：

尺寸	类	用途
default	h-9 px-4 py-2	常规操作
sm	h-8 px-3	表格行操作
lg	h-10 px-6	突出 CTA
icon	size-9	纯图标按钮

变体使用规则：

• 主操作 → default + 品牌渐变 inline style
• 次要操作 → variant="outline"
• 危险操作 → bg-red-500 hover:bg-red-600 text-white
• 辅助操作 → variant="ghost"

8.2 状态徽章

必须使用自定义 class，不要自己发明新的状态样式：

// 运行中
<span className="badge-running">
  <span className="w-1.5 h-1.5 rounded-full bg-green-500 inline-block" />
  运行中
</span>

// 已停止
<span className="badge-stopped">...</span>

// 待处理
<span className="badge-pending">...</span>

CSS 定义：

.badge-running { background: rgba(52,199,89,0.12); color: #1a8c3a; }
.badge-stopped { background: rgba(255,59,48,0.1); color: #c0392b; }
.badge-pending { background: rgba(255,149,0,0.1); color: #b8640a; }

8.3 卡片

绝大多数卡片使用原生 div，不使用 shadcn Card：

<div
  className="bg-white rounded-2xl border border-gray-100 overflow-hidden"
  style={{ boxShadow: "0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04)" }}
>
  {/* 可选 header */}
  <div className="flex items-center justify-between px-6 py-5 border-b border-gray-50">
    <h2 className="font-semibold text-gray-900">标题</h2>
  </div>
  {/* 内容 */}
</div>

8.4 表格

使用原生 <table>，不使用 shadcn Table：

<table className="w-full">
  <thead>
    <tr className="border-b border-gray-50 bg-gray-50/50">
      <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wide">
        列名
      </th>
    </tr>
  </thead>
  <tbody className="divide-y divide-gray-50">
    <tr className="hover:bg-gray-50/50 transition-colors">
      <td className="px-6 py-4 text-sm text-gray-700">内容</td>
    </tr>
  </tbody>
</table>

8.5 统计卡片

<div className="bg-white rounded-2xl border border-gray-100 p-5"
  style={{ boxShadow: "..." }}>
  <div className="flex items-center gap-3 mb-3">
    <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
      <IconName className="w-5 h-5 text-white" />
    </div>
    <span className="text-sm text-gray-500">标签</span>
  </div>
  <div className="text-2xl font-bold text-gray-900">数值</div>
</div>

8.6 搜索筛选栏

<div className="flex flex-wrap gap-3 mb-4 items-center">
  {/* 搜索框 */}
  <div className="relative">
    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
    <Input placeholder="搜索..." className="pl-9 bg-white w-64" />
  </div>
  {/* 刷新按钮 */}
  <button className="w-9 h-9 rounded-lg border border-gray-200 bg-white text-gray-400 hover:text-blue-500 hover:border-blue-300">
    <RefreshCw className="w-4 h-4" />
  </button>
</div>

8.7 Dialog

• 小确认框：sm:max-w-sm
• 中表单：sm:max-w-md
• 大表单：sm:max-w-lg
• 详情查看：sm:max-w-2xl
• 长表单加：max-h-[90vh] overflow-y-auto

8.8 提示横幅

{/* 信息提示 */}
<div className="flex items-start gap-2.5 bg-blue-50 border border-blue-100 rounded-xl px-4 py-3 mb-6">
  <Info className="w-4 h-4 text-blue-400 mt-0.5 shrink-0" />
  <p className="text-xs text-blue-600 leading-relaxed">提示文字</p>
</div>

{/* 警告提示 */}
<div className="flex items-start gap-2.5 bg-amber-50 border border-amber-100 rounded-lg px-3 py-2.5">
  <AlertTriangle className="w-4 h-4 text-amber-500 mt-0.5 shrink-0" />
  <p className="text-xs text-amber-700 leading-relaxed">警告文字</p>
</div>

8.9 分页

活跃页码使用品牌渐变：

<button
  style={{ background: "linear-gradient(135deg, #007AFF, #5856D6)" }}
  className="w-7 h-7 rounded-lg text-white text-xs font-medium"
>
  {page}
</button>

非活跃页码：variant="ghost" size="sm", w-7 h-7 text-xs text-gray-500

8.10 进度条

<div className="w-full bg-gray-100 rounded-full h-1.5">
  <div
    className={`h-1.5 rounded-full transition-all ${
      pct > 80 ? "bg-red-500" : pct > 60 ? "bg-yellow-500" : "bg-blue-500"
    }`}
    style={{ width: `${pct}%` }}
  />
</div>

8.11 毛玻璃卡片

.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}

---

9. 图标规范

唯一图标库：lucide-react。禁止使用 emoji、FontAwesome 或其他图标库。

用途	尺寸
导航项	w-4 h-4
按钮内	w-4 h-4
统计 icon 容器内	w-5 h-5
表格行操作	w-3.5 h-3.5
空状态	w-12 h-12 text-gray-200

导航图标映射

页面	图标
基础信息	Settings
成员管理	Users
模型配置	Brain
通道配置	MessageSquare
技能配置	Puzzle
镜像管理	HardDrive
安全组	ShieldCheck
OpenClaw 监控	Activity
Tokens 监控	BarChart3
审计日志	ClipboardList
帮助文档	FileText

---

10. 状态模式

10.1 空状态

<div className="text-center py-24">
  <Bot className="w-12 h-12 text-gray-200 mx-auto mb-4" />
  <p className="text-gray-400 mb-4">暂无数据描述</p>
  <Button variant="outline">操作按钮</Button>
</div>

表格空状态：

<td colSpan={N} className="px-6 py-12 text-center text-sm text-gray-400">
  暂无符合条件的记录
</td>

10.2 操作反馈

• 成功：toast.success("操作成功")
• 错误：toast.error("操作失败")
• 加载：按钮 disabled + 图标 animate-spin
• 刷新：setTimeout(..., 1000) 模拟 + toast.success("列表已刷新")

10.3 禁用态

• 停用 OpenClaw：opacity-40 cursor-not-allowed
• 不可操作按钮：disabled + Tooltip 说明原因
• 只读输入：bg-gray-100 cursor-not-allowed select-none text-gray-400

10.4 危险操作确认

使用 AlertDialog（非 Dialog），红色确认按钮：

<AlertDialogAction className="bg-red-500 hover:bg-red-600 text-white">
  确认删除
</AlertDialogAction>

---

11. 图表规范

统一使用 recharts（LineChart 为主）：

<LineChart>
  <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
  <XAxis tick={{ fontSize: 11, fill: "#9ca3af" }} />
  <YAxis tick={{ fontSize: 11, fill: "#9ca3af" }} />
  <Line stroke="#6366f1" strokeWidth={2} name="输入" />
  <Line stroke="#8b5cf6" strokeWidth={2} name="输出" />
</LineChart>

---

12. 关键约束（必须遵守）

1. 不要引入新的 CSS 框架或 UI 库。所有组件基于 Tailwind CSS + shadcn/ui + 自定义样式实现。
2. 不要使用 shadcn Card 替代原生 div 卡片。项目中卡片使用 <div className="bg-white rounded-2xl border border-gray-100"> + inline boxShadow。
3. 不要使用 shadcn Table 替代原生 table。项目中表格使用原生 <table> + 自定义类。
4. 不要发明新的状态颜色。运行/停止/待处理严格使用 badge-running / badge-stopped / badge-pending。
5. 不要使用 emoji 作为图标。统一使用 lucide-react。
6. 所有页面根元素必须包含 page-enter class。
7. 品牌渐变通过 inline style 设置，不要用 Tailwind gradient 类近似模拟。
8. 卡片阴影通过 inline style 设置，使用统一的双层阴影值。
9. toast 通知统一使用 sonner，不要使用 alert() 或自定义 notification。
10. 每个页面组件自行包裹 Layout（<AdminLayout> 或 <TenantLayout>），不要在路由层嵌套。
11. 中文 UI：所有界面文案使用简体中文。
12. 数据操作通过 useState + mock 数据，不直接调用后端 API。

---

13. 新页面 Checklist

创建任何新页面前，逐项确认：

• 选择正确的 Layout（Admin/Tenant）
• 根元素包含 page-enter class
• 卡片使用 rounded-2xl + 统一 boxShadow
• 表格使用原生 <table> + 规范的 thead/tbody 类
• 按钮使用正确的 variant 和 size
• 状态徽章使用 badge-running/stopped/pending
• 图标来自 lucide-react，尺寸正确
• 间距遵循系统（p-8/p-6/gap-4 等）
• 页面标题使用 text-2xl font-bold + text-sm text-gray-500 描述
• 操作反馈使用 toast.success/error
• 空状态有友好提示
• 危险操作使用 AlertDialog 确认