Clawra - GUI 增强界面

约 1242 字大约 4 分钟

2026-03-07

GUI 增强界面 - 为 OpenClaw 提供现代化图形管理界面，前后端分离架构，富交互体验。

核心特性

现代化 UI

响应式设计，适配各种屏幕
暗色/亮色主题切换
流畅的动画效果
直观的操作体验

实时通信

WebSocket 双向通信
实时消息推送
状态同步
低延迟交互

可视化管理

对话历史可视化
工具调用追踪
性能监控面板
配置可视化编辑

多用户支持

用户认证系统
权限管理
多租户隔离
团队协作

快速开始

系统要求

Node.js 18+
npm 或 yarn
OpenClaw 后端服务

安装

# 克隆仓库
git clone https://github.com/SumeLabs/clawra.git
cd clawra

# 安装依赖
npm install

# 开发模式
npm run dev

# 生产构建
npm run build

配置

创建 .env 文件：

# 后端 API 地址
VITE_API_URL=http://localhost:3000
VITE_WS_URL=ws://localhost:3000

# 认证配置
VITE_AUTH_ENABLED=true
VITE_JWT_SECRET=your_secret_key

# 功能开关
VITE_ENABLE_ANALYTICS=true
VITE_ENABLE_NOTIFICATIONS=true

启动

# 开发服务器
npm run dev
# 访问 http://localhost:5173

# 生产部署
npm run build
npm run preview

技术架构

前端技术栈

框架: React 18 + TypeScript
状态管理: Zustand
路由: React Router v6
UI 组件: Ant Design / shadcn/ui
样式: TailwindCSS
图表: Recharts / ECharts
WebSocket: Socket.io-client

后端桥接

// WebSocket 连接
import { io } from 'socket.io-client';

const socket = io(import.meta.env.VITE_WS_URL, {
  auth: {
    token: localStorage.getItem('token')
  }
});

// 监听消息
socket.on('message', (data) => {
  console.log('收到消息:', data);
});

// 发送消息
socket.emit('send_message', {
  content: 'Hello, AI!',
  conversation_id: '123'
});

状态管理

import { create } from 'zustand';

interface ChatStore {
  messages: Message[];
  addMessage: (message: Message) => void;
  clearMessages: () => void;
}

export const useChatStore = create<ChatStore>((set) => ({
  messages: [],
  addMessage: (message) => 
    set((state) => ({ messages: [...state.messages, message] })),
  clearMessages: () => set({ messages: [] }),
}));

功能特性

对话界面

import { ChatContainer, MessageList, MessageInput } from '@/components/chat';

function ChatPage() {
  return (
    <ChatContainer>
      <MessageList messages={messages} />
      <MessageInput onSend={handleSend} />
    </ChatContainer>
  );
}

工具调用可视化

import { ToolCallTimeline } from '@/components/tools';

function ToolsPage() {
  return (
    <ToolCallTimeline
      calls={toolCalls}
      onCallClick={handleCallClick}
    />
  );
}

性能监控

import { MetricsChart } from '@/components/metrics';

function MonitorPage() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <MetricsChart
        title="响应时间"
        data={responseTimeData}
        type="line"
      />
      <MetricsChart
        title="Token 使用"
        data={tokenUsageData}
        type="bar"
      />
    </div>
  );
}

配置编辑器

import { ConfigEditor } from '@/components/config';

function ConfigPage() {
  return (
    <ConfigEditor
      config={config}
      onChange={handleConfigChange}
      onSave={handleSave}
    />
  );
}

界面截图

主界面

对话界面

监控面板

配置管理

适用场景

团队协作

多人共享 AI 助手
对话历史共享
权限分级管理

企业部署

内部 AI 助手平台
统一管理界面
审计和监控

个人使用

不习惯命令行的用户
需要可视化管理
多设备访问

高级功能

插件系统

// 定义插件接口
interface Plugin {
  name: string;
  version: string;
  init: (app: App) => void;
  destroy: () => void;
}

// 注册插件
const weatherPlugin: Plugin = {
  name: 'weather',
  version: '1.0.0',
  init: (app) => {
    app.registerTool({
      name: 'get_weather',
      icon: 'weather',
      handler: getWeather
    });
  },
  destroy: () => {
    // 清理资源
  }
};

主题定制

// 自定义主题
const customTheme = {
  colors: {
    primary: '#667eea',
    secondary: '#764ba2',
    background: '#1a202c',
    text: '#e2e8f0',
  },
  fonts: {
    body: 'Inter, sans-serif',
    heading: 'Poppins, sans-serif',
  },
};

// 应用主题
<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

快捷键支持

import { useHotkeys } from 'react-hotkeys-hook';

function ChatInput() {
  // Ctrl+Enter 发送消息
  useHotkeys('ctrl+enter', () => handleSend());
  
  // Ctrl+K 打开命令面板
  useHotkeys('ctrl+k', () => openCommandPalette());
  
  // Esc 清空输入
  useHotkeys('esc', () => clearInput());
}

国际化

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslations },
      zh: { translation: zhTranslations },
    },
    lng: 'zh',
    fallbackLng: 'en',
  });

部署方案

Docker 部署

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Nginx 配置

server {
    listen 80;
    server_name clawra.example.com;
    
    root /usr/share/nginx/html;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://openclaw-backend:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
    }
    
    location /ws {
        proxy_pass http://openclaw-backend:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

Vercel 部署

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "vite"
}

性能优化

代码分割

import { lazy, Suspense } from 'react';

const ChatPage = lazy(() => import('./pages/Chat'));
const MonitorPage = lazy(() => import('./pages/Monitor'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/chat" element={<ChatPage />} />
        <Route path="/monitor" element={<MonitorPage />} />
      </Routes>
    </Suspense>
  );
}

虚拟滚动

import { FixedSizeList } from 'react-window';

function MessageList({ messages }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={messages.length}
      itemSize={80}
    >
      {({ index, style }) => (
        <div style={style}>
          <Message message={messages[index]} />
        </div>
      )}
    </FixedSizeList>
  );
}

与其他版本对比

vs 官方版

官方版纯命令行，Clawra 提供图形界面
官方版单用户，Clawra 支持多用户
Clawra 是官方版的 UI 增强

vs OpenClaw Manager

Manager 专注服务管理，Clawra 专注交互体验
Manager 是桌面应用，Clawra 是 Web 应用
两者可以互补使用

贡献

欢迎前端开发者贡献！

# 克隆仓库
git clone https://github.com/SumeLabs/clawra.git

# 安装依赖
npm install

# 运行开发服务器
npm run dev

# 运行测试
npm run test

许可证

MIT License - 详见 LICENSE

访问 GitHub 仓库 →