iven/zclaw_openfang
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(hands): restructure Hands UI with Chinese localization

Browse Source 
Major changes:
- Add HandList.tsx component for left sidebar
- Add HandTaskPanel.tsx for middle content area
- Restructure Sidebar tabs: 分身/HANDS/Workflow
- Remove Hands tab from RightPanel
- Localize all UI text to Chinese
- Archive legacy OpenClaw documentation
- Add Hands integration lessons document
- Update feature checklist with new components

UI improvements:
- Left sidebar now shows Hands list with status icons
- Middle area shows selected Hand's tasks and results
- Consistent styling with Tailwind CSS
- Chinese status labels and buttons

Documentation:
- Create docs/archive/openclaw-legacy/ for old docs
- Add docs/knowledge-base/hands-integration-lessons.md
- Update docs/knowledge-base/feature-checklist.md
- Update docs/knowledge-base/README.md

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
2026-03-14 23:16:32 +08:00
parent 67e1da635d
commit 07079293f4
126 changed files with 36229 additions and 1035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
desktop/src/components/Settings/MCPServices.tsx
View File

@@ -1,63 +1,61 @@
import { useState } from 'react';
import { Plus, RefreshCw } from 'lucide-react';
interface MCPService {
id: string;
name: string;
enabled: boolean;
}
import { FileText, Globe } from 'lucide-react';
import { useGatewayStore } from '../../store/gatewayStore';
export function MCPServices() {
const [services, setServices] = useState<MCPService[]>([
{ id: 'filesystem', name: 'File System', enabled: true },
{ id: 'webfetch', name: 'Web Fetch', enabled: true },
]);
const { quickConfig, saveQuickConfig } = useGatewayStore();
const toggleService = (id: string) => {
setServices(prev => prev.map(s => s.id === id ? { ...s, enabled: !s.enabled } : s));
const services = quickConfig.mcpServices || [];
const toggleService = async (id: string) => {
const nextServices = services.map((service) =>
service.id === id ? { ...service, enabled: !service.enabled } : service
);
await saveQuickConfig({ mcpServices: nextServices });
};
return (
<div>
<div className="flex justify-between items-center mb-2">
<h1 className="text-2xl font-bold text-gray-900">MCP 服务</h1>
<div className="flex gap-2">
<button className="text-sm border border-gray-300 rounded-lg px-3 py-1.5 hover:bg-gray-50 flex items-center gap-1">
<RefreshCw className="w-3.5 h-3.5" /> 刷新
</button>
<button className="text-sm bg-orange-500 text-white rounded-lg px-3 py-1.5 hover:bg-orange-600 flex items-center gap-1">
<Plus className="w-3.5 h-3.5" /> 添加服务
</button>
</div>
<div className="max-w-3xl">
<div className="flex justify-between items-center mb-4">
<h1 className="text-xl font-bold text-gray-900">MCP 服务</h1>
<span className="text-xs text-gray-400">{services.length} 个已声明服务</span>
</div>
<div className="text-xs text-gray-500 mb-6">
MCP（模型上下文协议）服务为 Agent 扩展外部工具 — 文件系统、数据库、网页搜索等。
</div>
<p className="text-sm text-gray-500 mb-6">MCP（模型上下文协议）服务为 Agent 扩展外部工具：文件系统、数据库、网页搜索等。</p>
<div className="bg-gray-50 rounded-xl divide-y divide-gray-200">
{services.map((svc) => (
<div key={svc.id} className="flex items-center justify-between px-5 py-4">
<div className="bg-white rounded-xl border border-gray-200 divide-y divide-gray-100 shadow-sm mb-6">
{services.length > 0 ? services.map((svc) => (
<div key={svc.id} className="flex justify-between items-center p-4">
<div className="flex items-center gap-3">
<span className="text-gray-400">⇄</span>
<span className="text-sm text-gray-900">{svc.name}</span>
{svc.id === 'filesystem'
? <FileText className="w-4 h-4 text-gray-500" />
: <Globe className="w-4 h-4 text-gray-500" />}
<div>
<div className="text-sm text-gray-900">{svc.name}</div>
<div className="text-xs text-gray-400 mt-1">{svc.id}</div>
</div>
</div>
<div className="flex items-center gap-3">
<button onClick={() => toggleService(svc.id)} className="text-xs text-gray-500 border border-gray-300 rounded px-2 py-1 hover:bg-gray-100">
<div className="flex gap-2 items-center">
<span className={`text-xs px-2 py-1 rounded-full ${svc.enabled ? 'bg-green-50 text-green-600' : 'bg-gray-100 text-gray-500'}`}>
{svc.enabled ? '已启用' : '已停用'}
</span>
<button
onClick={() => { toggleService(svc.id).catch(() => {}); }}
className="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
>
{svc.enabled ? '停用' : '启用'}
</button>
<button className="text-xs text-gray-500 border border-gray-300 rounded px-2 py-1 hover:bg-gray-100">设置</button>
<button className="text-xs text-gray-500 border border-gray-300 rounded px-2 py-1 hover:bg-gray-100">删除</button>
</div>
</div>
))}
)) : (
<div className="p-8 text-center text-sm text-gray-400">
当前快速配置中尚未声明 MCP 服务
</div>
)}
</div>
<div className="mt-6">
<h2 className="text-sm font-medium text-gray-700 mb-3">快速添加模版</h2>
<p className="text-xs text-gray-400 mb-3">一键添加常用 MCP 服务</p>
<div className="flex gap-2">
<button className="text-sm bg-orange-500 text-white rounded-lg px-4 py-1.5 hover:bg-orange-600">+ Brave Search</button>
<button className="text-sm bg-orange-500 text-white rounded-lg px-4 py-1.5 hover:bg-orange-600">+ SQLite</button>
</div>
<div className="text-xs text-amber-700 bg-amber-50 rounded-lg p-3">
当前页面只支持查看和启停已保存在快速配置中的 MCP 服务；新增服务、删除服务和详细参数配置尚未在桌面端接入。
</div>
</div>
);