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 应用
- 两者可以互补使用
相关链接
- GitHub: SumeLabs/clawra
- 在线演示: demo.clawra.com
- 文档: docs.clawra.com
- 问题反馈: Issues
贡献
欢迎前端开发者贡献!
# 克隆仓库
git clone https://github.com/SumeLabs/clawra.git
# 安装依赖
npm install
# 运行开发服务器
npm run dev
# 运行测试
npm run test许可证
MIT License - 详见 LICENSE