Openclawdesign

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 品牌色

品牌渐变（全局统一）：

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

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

1.2 语义色

1.3 背景色

1.4 文字层级

1.5 渐变 Icon 容器配色

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

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 字号与字重

2.3 数字排版

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

3. 间距系统

3.1 页面级

3.2 卡片内

3.3 元素间

4. 圆角系统

5. 阴影系统

注意：通过 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 交互过渡

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 响应式网格

8. 组件规范

8.1 按钮

主按钮 CTA（品牌渐变）：

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

尺寸：

变体使用规则：

• 主操作 → 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 或其他图标库。

导航图标映射

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 确认