cc工作前备份
This commit is contained in:
iven
45
desktop/src/components/Settings/About.tsx
Normal file
45
desktop/src/components/Settings/About.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
export function About() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-orange-400 to-red-500 rounded-2xl flex items-center justify-center text-3xl shadow-lg">
|
||||
🦞
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">ZCLAW</h1>
|
||||
<p className="text-sm text-orange-500">版本 0.2.0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-5 mb-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-gray-900">检查更新</h2>
|
||||
</div>
|
||||
<button className="text-sm bg-orange-500 text-white rounded-lg px-4 py-1.5 hover:bg-orange-600 flex items-center gap-1">
|
||||
🔄 检查更新
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-5 mb-8">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-gray-900">更新日志</h2>
|
||||
<p className="text-xs text-gray-500 mt-0.5">查看当前版本的更新内容</p>
|
||||
</div>
|
||||
<button className="border border-gray-300 rounded-lg px-4 py-1.5 text-sm hover:bg-gray-100">更新日志</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-xs text-gray-400 space-y-1">
|
||||
<p>© 2026 ZCLAW | Powered by OpenClaw</p>
|
||||
<p>基于 OpenClaw 开源框架定制</p>
|
||||
<div className="flex justify-center gap-4 mt-3">
|
||||
<a href="#" className="text-orange-500 hover:text-orange-600">隐私政策</a>
|
||||
<a href="#" className="text-orange-500 hover:text-orange-600">用户协议</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
118
desktop/src/components/Settings/General.tsx
Normal file
118
desktop/src/components/Settings/General.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { useState } from 'react';
|
||||
import { useGatewayStore } from '../../store/gatewayStore';
|
||||
import { useChatStore } from '../../store/chatStore';
|
||||
|
||||
export function General() {
|
||||
const { connectionState, gatewayVersion, error, connect, disconnect } = useGatewayStore();
|
||||
const { currentModel } = useChatStore();
|
||||
const [theme, setTheme] = useState<'light' | 'dark'>('light');
|
||||
const [autoStart, setAutoStart] = useState(false);
|
||||
const [showToolCalls, setShowToolCalls] = useState(false);
|
||||
|
||||
const connected = connectionState === 'connected';
|
||||
const connecting = connectionState === 'connecting' || connectionState === 'reconnecting';
|
||||
|
||||
const handleConnect = () => { connect().catch(() => {}); };
|
||||
const handleDisconnect = () => { disconnect(); };
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-8">通用设置</h1>
|
||||
|
||||
<h2 className="text-sm font-medium text-gray-500 uppercase tracking-wide mb-3">Gateway 连接</h2>
|
||||
<div className="bg-gray-50 rounded-xl p-5 mb-6 space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-700">状态</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`w-2 h-2 rounded-full ${connected ? 'bg-green-400' : connecting ? 'bg-yellow-400 animate-pulse' : 'bg-gray-300'}`} />
|
||||
<span className={`text-sm font-medium ${connected ? 'text-green-600' : connecting ? 'text-yellow-600' : 'text-gray-400'}`}>
|
||||
{connected ? '已连接' : connecting ? '连接中...' : connectionState === 'handshaking' ? '握手中...' : '未连接'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-700">地址</span>
|
||||
<span className="text-sm text-gray-500 font-mono">ws://127.0.0.1:18789</span>
|
||||
</div>
|
||||
{gatewayVersion && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-700">版本</span>
|
||||
<span className="text-sm text-gray-500">{gatewayVersion}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-700">当前模型</span>
|
||||
<span className="text-sm text-orange-600 font-medium">{currentModel}</span>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="text-xs text-red-500 bg-red-50 rounded-lg p-2">{error}</div>
|
||||
)}
|
||||
<div className="flex gap-2 pt-1">
|
||||
{connected ? (
|
||||
<button
|
||||
onClick={handleDisconnect}
|
||||
className="text-sm border border-gray-300 rounded-lg px-4 py-1.5 hover:bg-gray-100 text-gray-600"
|
||||
>
|
||||
断开连接
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
disabled={connecting}
|
||||
className="text-sm bg-orange-500 text-white rounded-lg px-4 py-1.5 hover:bg-orange-600 disabled:opacity-50"
|
||||
>
|
||||
{connecting ? '连接中...' : '连接 Gateway'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-sm font-medium text-gray-500 uppercase tracking-wide mb-3">外观与行为</h2>
|
||||
<div className="bg-gray-50 rounded-xl p-5 space-y-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">主题模式</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5">选择浅色或深色模式。</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setTheme('light')}
|
||||
className={`w-8 h-8 rounded-full border-2 ${theme === 'light' ? 'border-orange-500' : 'border-gray-300'} bg-white`}
|
||||
/>
|
||||
<button
|
||||
onClick={() => setTheme('dark')}
|
||||
className={`w-8 h-8 rounded-full border-2 ${theme === 'dark' ? 'border-orange-500' : 'border-gray-300'} bg-gray-900`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">开机自启</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5">登录时自动启动 ZCLAW。</div>
|
||||
</div>
|
||||
<Toggle checked={autoStart} onChange={setAutoStart} />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">显示工具调用</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5">在对话消息中显示模型的工具调用详情块。</div>
|
||||
</div>
|
||||
<Toggle checked={showToolCalls} onChange={setShowToolCalls} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => onChange(!checked)}
|
||||
className={`w-11 h-6 rounded-full transition-colors relative flex-shrink-0 ${checked ? 'bg-orange-500' : 'bg-gray-300'}`}
|
||||
>
|
||||
<span className={`block w-5 h-5 bg-white rounded-full shadow absolute top-0.5 transition-all ${checked ? 'left-[22px]' : 'left-0.5'}`} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
34
desktop/src/components/Settings/IMChannels.tsx
Normal file
34
desktop/src/components/Settings/IMChannels.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { Plus, RefreshCw } from 'lucide-react';
|
||||
|
||||
export function IMChannels() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h1 className="text-2xl font-bold text-gray-900">IM 频道</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>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-8 text-center mt-6">
|
||||
<button className="bg-orange-500 text-white text-sm rounded-lg px-4 py-2 hover:bg-orange-600 mb-3">
|
||||
添加频道
|
||||
</button>
|
||||
<p className="text-sm text-gray-500">尚未添加 IM 频道</p>
|
||||
<p className="text-xs text-gray-400 mt-1">点击「添加频道」连接你的第一个 IM 频道</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<h2 className="text-sm font-medium text-gray-700 mb-3">快速添加</h2>
|
||||
<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">+ 飞书</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
64
desktop/src/components/Settings/MCPServices.tsx
Normal file
64
desktop/src/components/Settings/MCPServices.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { useState } from 'react';
|
||||
import { Plus, RefreshCw } from 'lucide-react';
|
||||
|
||||
interface MCPService {
|
||||
id: string;
|
||||
name: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export function MCPServices() {
|
||||
const [services, setServices] = useState<MCPService[]>([
|
||||
{ id: 'filesystem', name: 'File System', enabled: true },
|
||||
{ id: 'webfetch', name: 'Web Fetch', enabled: true },
|
||||
]);
|
||||
|
||||
const toggleService = (id: string) => {
|
||||
setServices(prev => prev.map(s => s.id === id ? { ...s, enabled: !s.enabled } : s));
|
||||
};
|
||||
|
||||
|
||||
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>
|
||||
<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="flex items-center gap-3">
|
||||
<span className="text-gray-400">⇄</span>
|
||||
<span className="text-sm text-gray-900">{svc.name}</span>
|
||||
</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">
|
||||
{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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
101
desktop/src/components/Settings/ModelsAPI.tsx
Normal file
101
desktop/src/components/Settings/ModelsAPI.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { useState } from 'react';
|
||||
import { useGatewayStore } from '../../store/gatewayStore';
|
||||
import { useChatStore } from '../../store/chatStore';
|
||||
|
||||
interface ModelEntry {
|
||||
id: string;
|
||||
name: string;
|
||||
provider: string;
|
||||
}
|
||||
|
||||
const AVAILABLE_MODELS: ModelEntry[] = [
|
||||
{ id: 'glm-5', name: 'GLM-5', provider: '智谱 AI' },
|
||||
{ id: 'qwen3.5-plus', name: 'Qwen3.5+', provider: '通义千问' },
|
||||
{ id: 'kimi-k2.5', name: 'Kimi-K2.5', provider: '月之暗面' },
|
||||
{ id: 'minimax-m2.5', name: 'MiniMax-M2.5', provider: 'MiniMax' },
|
||||
];
|
||||
|
||||
export function ModelsAPI() {
|
||||
const { connectionState, connect, disconnect } = useGatewayStore();
|
||||
const { currentModel, setCurrentModel } = useChatStore();
|
||||
const [gatewayUrl, setGatewayUrl] = useState('ws://127.0.0.1:18789');
|
||||
|
||||
const connected = connectionState === 'connected';
|
||||
const connecting = connectionState === 'connecting' || connectionState === 'reconnecting';
|
||||
|
||||
const handleReconnect = () => {
|
||||
disconnect();
|
||||
setTimeout(() => connect().catch(() => {}), 500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">模型与 API</h1>
|
||||
<button
|
||||
onClick={handleReconnect}
|
||||
disabled={connecting}
|
||||
className="text-sm text-gray-500 border border-gray-300 rounded-lg px-3 py-1.5 hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
{connecting ? '连接中...' : '重新连接'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2 className="text-sm font-medium text-gray-500 uppercase tracking-wide mb-3">中文模型 Provider</h2>
|
||||
<div className="bg-gray-50 rounded-xl divide-y divide-gray-200 mb-6">
|
||||
{AVAILABLE_MODELS.map((model) => {
|
||||
const isActive = model.id === currentModel;
|
||||
return (
|
||||
<div key={model.id} className="flex items-center justify-between px-5 py-3.5">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900">{model.name}</span>
|
||||
<span className="text-xs text-gray-400 ml-2">{model.provider}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{isActive ? (
|
||||
<span className="text-xs text-green-600 bg-green-50 px-2.5 py-1 rounded-md font-medium">当前使用</span>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setCurrentModel(model.id)}
|
||||
className="text-xs text-orange-500 hover:text-orange-600 hover:bg-orange-50 px-2.5 py-1 rounded-md transition-colors"
|
||||
>
|
||||
切换
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<h2 className="text-sm font-medium text-gray-500 uppercase tracking-wide mb-3">Gateway 连接</h2>
|
||||
<div className="bg-gray-50 rounded-xl p-5 space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`text-xs px-2.5 py-1 rounded-md font-medium ${connected ? 'bg-green-50 text-green-600' : 'bg-gray-200 text-gray-500'}`}>
|
||||
{connected ? '已连接' : connecting ? '连接中...' : '未连接'}
|
||||
</span>
|
||||
{!connected && !connecting && (
|
||||
<button
|
||||
onClick={() => connect().catch(() => {})}
|
||||
className="text-sm bg-orange-500 text-white rounded-lg px-3 py-1.5 hover:bg-orange-600"
|
||||
>
|
||||
连接
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-500 mb-1 block">Gateway WebSocket URL</label>
|
||||
<input
|
||||
type="text"
|
||||
value={gatewayUrl}
|
||||
onChange={(e) => setGatewayUrl(e.target.value)}
|
||||
className="w-full bg-white border border-gray-200 rounded-lg text-sm text-gray-700 font-mono px-3 py-2 focus:outline-none focus:ring-2 focus:ring-orange-200 focus:border-orange-300"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">
|
||||
默认地址: ws://127.0.0.1:18789。修改后需重新连接。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
desktop/src/components/Settings/Privacy.tsx
Normal file
55
desktop/src/components/Settings/Privacy.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export function Privacy() {
|
||||
const [optimization, setOptimization] = useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-2">数据与隐私</h1>
|
||||
<p className="text-sm text-gray-500 mb-6">查看数据存储位置与 ZCLAW 的网络出站范围。</p>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-5 mb-6">
|
||||
<h2 className="text-sm font-bold text-gray-900 mb-1">本地数据路径</h2>
|
||||
<p className="text-xs text-gray-500 mb-3">所有工作区文件、对话记录和 Agent 输出均存储在此本地目录。</p>
|
||||
<div className="bg-white border border-gray-200 rounded-lg px-3 py-2">
|
||||
<span className="text-sm text-gray-700 font-mono">~/.openclaw/zclaw-workspace</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-5 mb-6">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1 mr-4">
|
||||
<h2 className="text-sm font-bold text-gray-900">优化计划</h2>
|
||||
<p className="text-xs text-gray-500 mt-1 leading-relaxed">
|
||||
我们诚挚邀您加入优化提升计划。您的加入会帮助我们更好地改进产品：在去标识化处理后，我们可能将您输入与生成的信息以及屏幕操作信息用于模型的训练与优化。我们尊重您的个人信息主体权益，您有权选择不允许我们将您的信息用于此目的。您也可以在后续使用中的任何时候通过"设置"中的开启或关闭按钮选择加入或退出优化计划。
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setOptimization(!optimization)}
|
||||
className={`w-11 h-6 rounded-full transition-colors relative flex-shrink-0 ${optimization ? 'bg-orange-500' : 'bg-gray-300'}`}
|
||||
>
|
||||
<span className={`block w-5 h-5 bg-white rounded-full shadow absolute top-0.5 transition-all ${optimization ? 'left-[22px]' : 'left-0.5'}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-5">
|
||||
<h2 className="text-sm font-bold text-gray-900 mb-3">备案信息</h2>
|
||||
<div className="space-y-2 text-xs text-gray-500">
|
||||
<div className="flex gap-8">
|
||||
<span className="text-gray-400 w-24">项目名称</span>
|
||||
<span>ZCLAW — OpenClaw 定制版</span>
|
||||
</div>
|
||||
<div className="flex gap-8">
|
||||
<span className="text-gray-400 w-24">开源协议</span>
|
||||
<span>MIT License</span>
|
||||
</div>
|
||||
<div className="flex gap-8">
|
||||
<span className="text-gray-400 w-24">数据存储</span>
|
||||
<span>全部本地存储，不上传云端</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
134
desktop/src/components/Settings/SettingsLayout.tsx
Normal file
134
desktop/src/components/Settings/SettingsLayout.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Settings as SettingsIcon,
|
||||
BarChart3,
|
||||
Bot,
|
||||
Puzzle,
|
||||
Blocks,
|
||||
MessageSquare,
|
||||
FolderOpen,
|
||||
Shield,
|
||||
MessageCircle,
|
||||
Info,
|
||||
ArrowLeft,
|
||||
} from 'lucide-react';
|
||||
import { General } from './General';
|
||||
import { UsageStats } from './UsageStats';
|
||||
import { ModelsAPI } from './ModelsAPI';
|
||||
import { MCPServices } from './MCPServices';
|
||||
import { Skills } from './Skills';
|
||||
import { IMChannels } from './IMChannels';
|
||||
import { Workspace } from './Workspace';
|
||||
import { Privacy } from './Privacy';
|
||||
import { About } from './About';
|
||||
|
||||
interface SettingsLayoutProps {
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
type SettingsPage =
|
||||
| 'general'
|
||||
| 'usage'
|
||||
| 'models'
|
||||
| 'mcp'
|
||||
| 'skills'
|
||||
| 'im'
|
||||
| 'workspace'
|
||||
| 'privacy'
|
||||
| 'feedback'
|
||||
| 'about';
|
||||
|
||||
const menuItems: { id: SettingsPage; label: string; icon: React.ReactNode }[] = [
|
||||
{ id: 'general', label: '通用', icon: <SettingsIcon className="w-4 h-4" /> },
|
||||
{ id: 'usage', label: '用量统计', icon: <BarChart3 className="w-4 h-4" /> },
|
||||
{ id: 'models', label: '模型与 API', icon: <Bot className="w-4 h-4" /> },
|
||||
{ id: 'mcp', label: 'MCP 服务', icon: <Puzzle className="w-4 h-4" /> },
|
||||
{ id: 'skills', label: '技能', icon: <Blocks className="w-4 h-4" /> },
|
||||
{ id: 'im', label: 'IM 频道', icon: <MessageSquare className="w-4 h-4" /> },
|
||||
{ id: 'workspace', label: '工作区', icon: <FolderOpen className="w-4 h-4" /> },
|
||||
{ id: 'privacy', label: '数据与隐私', icon: <Shield className="w-4 h-4" /> },
|
||||
{ id: 'feedback', label: '提交反馈', icon: <MessageCircle className="w-4 h-4" /> },
|
||||
{ id: 'about', label: '关于', icon: <Info className="w-4 h-4" /> },
|
||||
];
|
||||
|
||||
export function SettingsLayout({ onBack }: SettingsLayoutProps) {
|
||||
const [activePage, setActivePage] = useState<SettingsPage>('general');
|
||||
|
||||
const renderPage = () => {
|
||||
switch (activePage) {
|
||||
case 'general': return <General />;
|
||||
case 'usage': return <UsageStats />;
|
||||
case 'models': return <ModelsAPI />;
|
||||
case 'mcp': return <MCPServices />;
|
||||
case 'skills': return <Skills />;
|
||||
case 'im': return <IMChannels />;
|
||||
case 'workspace': return <Workspace />;
|
||||
case 'privacy': return <Privacy />;
|
||||
case 'feedback': return <Feedback />;
|
||||
case 'about': return <About />;
|
||||
default: return <General />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen flex bg-white">
|
||||
{/* Left navigation */}
|
||||
<aside className="w-56 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-2 px-4 py-3 text-sm text-gray-500 hover:text-gray-700 border-b border-gray-200"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
返回应用
|
||||
</button>
|
||||
|
||||
<nav className="flex-1 py-2">
|
||||
{menuItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setActivePage(item.id)}
|
||||
className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${
|
||||
activePage === item.id
|
||||
? 'bg-orange-50 text-orange-600 font-medium'
|
||||
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<div className="max-w-2xl mx-auto px-8 py-8">
|
||||
{renderPage()}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Simple feedback page (inline)
|
||||
function Feedback() {
|
||||
const [text, setText] = useState('');
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-2">提交反馈</h1>
|
||||
<p className="text-sm text-gray-500 mb-6">请描述你遇到的问题或建议。默认会附带本地日志，便于快速定位问题。</p>
|
||||
<textarea
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder="请尽量详细描述复现步骤、期望结果和实际结果"
|
||||
className="w-full h-40 border border-gray-300 rounded-lg p-3 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
||||
/>
|
||||
<button
|
||||
disabled={!text.trim()}
|
||||
className="mt-4 px-6 py-2 bg-orange-500 text-white text-sm rounded-lg hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
提交
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
51
desktop/src/components/Settings/Skills.tsx
Normal file
51
desktop/src/components/Settings/Skills.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export function Skills() {
|
||||
const [extraDir, setExtraDir] = useState('~/.opencode/skills');
|
||||
const [activeTab, setActiveTab] = useState<'all' | 'available' | 'installed'>('all');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h1 className="text-2xl font-bold text-gray-900">技能</h1>
|
||||
<button className="text-sm text-gray-400">加载中...</button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mb-6">
|
||||
技能为 Agent 扩展专业知识和工作流程。它们是从本地包、技能目录和你配置的额外目录中发现的 SKILL.md 文件。满足所有依赖条件的技能会自动处于可用状态。
|
||||
</p>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-5 mb-6">
|
||||
<h2 className="text-sm font-bold text-gray-900 mb-1">额外技能目录</h2>
|
||||
<p className="text-xs text-gray-500 mb-3">包含 SKILL.md 文件的额外目录。保存到 Gateway 配置的 skills.load.extraDirs 中。</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={extraDir}
|
||||
onChange={(e) => setExtraDir(e.target.value)}
|
||||
className="flex-1 bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
|
||||
/>
|
||||
<button className="bg-orange-500 text-white text-sm rounded-lg px-4 py-2 hover:bg-orange-600">添加</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 mb-4">
|
||||
{(['all', 'available', 'installed'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`text-xs px-3 py-1 rounded-full ${
|
||||
activeTab === tab ? 'bg-orange-500 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{tab === 'all' ? '全部 (0)' : tab === 'available' ? '可用 (0)' : '已安装 (0)'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-8 text-center">
|
||||
<p className="text-sm text-gray-400">暂无技能</p>
|
||||
<p className="text-xs text-gray-300 mt-1">连接 Gateway 后将自动加载技能列表</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
76
desktop/src/components/Settings/UsageStats.tsx
Normal file
76
desktop/src/components/Settings/UsageStats.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useGatewayStore } from '../../store/gatewayStore';
|
||||
|
||||
export function UsageStats() {
|
||||
const { usageStats, loadUsageStats, connectionState } = useGatewayStore();
|
||||
|
||||
useEffect(() => {
|
||||
if (connectionState === 'connected') {
|
||||
loadUsageStats();
|
||||
}
|
||||
}, [connectionState]);
|
||||
|
||||
const stats = usageStats || { totalSessions: 0, totalMessages: 0, totalTokens: 0, byModel: {} };
|
||||
const models = Object.entries(stats.byModel || {});
|
||||
|
||||
const formatTokens = (n: number) => {
|
||||
if (n >= 1_000_000) return `~${(n / 1_000_000).toFixed(1)} M`;
|
||||
if (n >= 1_000) return `~${(n / 1_000).toFixed(1)} k`;
|
||||
return `${n}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">用量统计</h1>
|
||||
<button onClick={() => loadUsageStats()} className="text-sm text-gray-500 border border-gray-300 rounded-lg px-3 py-1.5 hover:bg-gray-50">
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mb-6">本设备所有已保存对话的 Token 用量汇总。</p>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 mb-8">
|
||||
<StatCard label="会话数" value={stats.totalSessions} />
|
||||
<StatCard label="消息数" value={stats.totalMessages} />
|
||||
<StatCard label="总 Token" value={formatTokens(stats.totalTokens)} />
|
||||
</div>
|
||||
|
||||
<h2 className="text-sm font-medium text-gray-700 mb-3">按模型</h2>
|
||||
<div className="bg-gray-50 rounded-xl p-5 space-y-4">
|
||||
{models.length === 0 && (
|
||||
<p className="text-sm text-gray-400 text-center py-4">暂无数据</p>
|
||||
)}
|
||||
{models.map(([model, data]) => {
|
||||
const total = data.inputTokens + data.outputTokens;
|
||||
const maxTokens = Math.max(...models.map(([, d]) => d.inputTokens + d.outputTokens), 1);
|
||||
const pct = (total / maxTokens) * 100;
|
||||
return (
|
||||
<div key={model}>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm font-medium text-gray-900">{model}</span>
|
||||
<span className="text-xs text-gray-500">{data.messages} 条消息</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2 mb-1">
|
||||
<div className="bg-orange-500 h-2 rounded-full" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-400">
|
||||
<span>输入: {formatTokens(data.inputTokens)}</span>
|
||||
<span>输出: {formatTokens(data.outputTokens)}</span>
|
||||
<span>总计: {formatTokens(total)}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ label, value }: { label: string; value: string | number }) {
|
||||
return (
|
||||
<div className="bg-gray-50 rounded-xl p-4 text-center">
|
||||
<div className="text-2xl font-bold text-gray-900">{value}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
desktop/src/components/Settings/Workspace.tsx
Normal file
82
desktop/src/components/Settings/Workspace.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export function Workspace() {
|
||||
const [projectDir, setProjectDir] = useState('~/.openclaw/zclaw-workspace');
|
||||
const [restrictFiles, setRestrictFiles] = useState(true);
|
||||
const [autoSaveContext, setAutoSaveContext] = useState(true);
|
||||
const [fileWatching, setFileWatching] = useState(true);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-2">工作区</h1>
|
||||
<p className="text-sm text-gray-500 mb-6">配置本地项目目录与上下文持久化行为。</p>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-5 mb-6">
|
||||
<h2 className="text-sm font-bold text-gray-900 mb-1">默认项目目录</h2>
|
||||
<p className="text-xs text-gray-500 mb-3">ZCLAW 项目和上下文文件的保存位置。</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={projectDir}
|
||||
onChange={(e) => setProjectDir(e.target.value)}
|
||||
className="flex-1 bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-orange-500"
|
||||
/>
|
||||
<button className="border border-gray-300 rounded-lg px-4 py-2 text-sm hover:bg-gray-100">浏览</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<ToggleCard
|
||||
title="限制文件访问范围"
|
||||
description="开启后，Agent 的工作空间将限制在工作目录内。关闭后可访问更大范围，可能导致数据操作。无论开关状态，均建议提前备份重要文件。注意：受技术限制，我们无法保证完全阻止目录外执行或由此带来的外部影响；请自行评估风险并谨慎使用。"
|
||||
checked={restrictFiles}
|
||||
onChange={setRestrictFiles}
|
||||
highlight
|
||||
/>
|
||||
<ToggleCard
|
||||
title="自动保存上下文"
|
||||
description="自动将聊天记录和提取的产物保存到本地工作区文件夹。"
|
||||
checked={autoSaveContext}
|
||||
onChange={setAutoSaveContext}
|
||||
/>
|
||||
<ToggleCard
|
||||
title="文件监听"
|
||||
description="监听本地文件变更，实时更新 Agent 上下文。"
|
||||
checked={fileWatching}
|
||||
onChange={setFileWatching}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 bg-gray-50 rounded-xl p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-gray-900">从 OpenClaw 迁移</h2>
|
||||
<p className="text-xs text-gray-500 mt-1">将 OpenClaw 的配置、对话记录、技能等数据迁移到 ZCLAW</p>
|
||||
</div>
|
||||
<button className="border border-gray-300 rounded-lg px-4 py-2 text-sm hover:bg-gray-100">开始迁移</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToggleCard({ title, description, checked, onChange, highlight }: {
|
||||
title: string; description: string; checked: boolean; onChange: (v: boolean) => void; highlight?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={`rounded-xl p-5 ${highlight ? 'bg-orange-50 border border-orange-200' : 'bg-gray-50'}`}>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1 mr-4">
|
||||
<h3 className={`text-sm font-bold ${highlight ? 'text-orange-700' : 'text-gray-900'}`}>{title}</h3>
|
||||
<p className="text-xs text-gray-500 mt-1 leading-relaxed">{description}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onChange(!checked)}
|
||||
className={`w-11 h-6 rounded-full transition-colors relative flex-shrink-0 mt-0.5 ${checked ? 'bg-orange-500' : 'bg-gray-300'}`}
|
||||
>
|
||||
<span className={`block w-5 h-5 bg-white rounded-full shadow absolute top-0.5 transition-all ${checked ? 'left-[22px]' : 'left-0.5'}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user