feat(toolset): 工具系统重构为 toolset 统一管理,新增系统预置工具集

将工具管理从"agent 挂单个 tool"改为"agent 挂 toolset"模式:
- 三个系统预置工具集(system_basic/system_chat/system_workflow)入 DB
- 新增 send_file 工具(系统对话工具集)、修复 approval actor 调用 bug
- 后端 agent 加载全部走 toolset 链路,移除 load_tools_from_list
- 前端工具集中心卡片展示 + agent 配置改为 toolset 多选
- resource API 增加 category 过滤与系统 toolset 保护

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-06-05 18:03:49 +00:00
parent d39c80743d
commit 0e57c5cf16
23 changed files with 584 additions and 169 deletions
@@ -15,7 +15,7 @@ interface WorkerIndividual {
output_template?: string;
bound_skill?: string;
workspace?: string;
tools?: string;
toolsets?: string;
}
interface PersonaTemplate {
@@ -24,6 +24,15 @@ interface PersonaTemplate {
system_prompt: string;
}
interface ToolsetItem {
toolset_id: string;
name: string;
description?: string;
tools: string[];
is_system: boolean;
category: string;
}
export function WorkerIndividualSettings() {
const { t } = useTranslation();
const [providers, setProviders] = useState<Provider[]>([]);
@@ -31,7 +40,7 @@ export function WorkerIndividualSettings() {
const [systemNodes, setSystemNodes] = useState<any[]>([]);
const [personaTemplates, setPersonaTemplates] = useState<PersonaTemplate[]>([]);
const [availableSkills, setAvailableSkills] = useState<string[]>([]);
const [availableTools, setAvailableTools] = useState<string[]>([]);
const [availableToolsets, setAvailableToolsets] = useState<ToolsetItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [isEditing, setIsEditing] = useState(false);
@@ -43,17 +52,17 @@ export function WorkerIndividualSettings() {
const fetchData = async () => {
setLoading(true);
try {
const [provRes, workRes, sysRes, toolsRes, skillsRes, tplRes] = await Promise.all([
const [provRes, workRes, sysRes, toolsetRes, skillsRes, tplRes] = await Promise.all([
apiClient.get('/api/v1/provider/list'),
apiClient.get('/api/v1/agent/worker'),
apiClient.get('/api/v1/agent'),
apiClient.get('/api/v1/resource/tool'),
apiClient.get('/api/v1/resource/custom-toolset'),
apiClient.get('/api/v1/resource/skill'),
apiClient.get('/api/v1/agent/template')
]);
setProviders(Object.values(provRes.data.provider_list || {}));
setWorkers(workRes.data.workers || []);
setAvailableTools(toolsRes.data.tools || []);
setAvailableToolsets(toolsetRes.data.toolsets || []);
setAvailableSkills(Object.keys(skillsRes.data.skills || {}));
setPersonaTemplates(tplRes.data.templates || []);
@@ -69,7 +78,7 @@ export function WorkerIndividualSettings() {
display_name: found?.display_name || '',
provider_title: found?.provider_title || defaultProvider,
model_id: found?.model_id || '',
tools: found?.tools ? JSON.stringify(found.tools) : '[]',
toolsets: found?.tools ? JSON.stringify(found.tools) : '[]',
persona_id: found?.persona_id || '',
is_system: true
};
@@ -89,7 +98,7 @@ export function WorkerIndividualSettings() {
output_template: typeof worker.output_template === 'string' ? worker.output_template : JSON.stringify(worker.output_template || {}),
bound_skill: typeof worker.bound_skill === 'string' ? worker.bound_skill : JSON.stringify(worker.bound_skill || {}),
workspace: typeof worker.workspace === 'string' ? worker.workspace : JSON.stringify(worker.workspace || []),
tools: typeof worker.tools === 'string' ? worker.tools : JSON.stringify(worker.tools || [])
toolsets: typeof worker.toolsets === 'string' ? worker.toolsets : JSON.stringify(worker.toolsets || worker.tools || [])
});
setIsNew(false);
setIsEditing(true);
@@ -99,7 +108,7 @@ export function WorkerIndividualSettings() {
const handleAddNew = () => {
setEditData({ agent_name: '', agent_type: 'ordinary_individual', description: '',
provider_title: providers.length > 0 ? providers[0].provider_title : '', model_id: '',
persona_id: '', output_template: '{}', bound_skill: '{}', workspace: '[]', tools: '[]' });
persona_id: '', output_template: '{}', bound_skill: '{}', workspace: '[]', toolsets: '[]' });
setIsNew(true);
setIsEditing(true);
setModalMessage('');
@@ -120,7 +129,7 @@ export function WorkerIndividualSettings() {
individual_name: editData.agent_name,
provider_title: editData.provider_title,
model_id: editData.model_id,
tools: JSON.parse(editData.tools || '[]'),
toolsets: JSON.parse(editData.toolsets || '[]'),
persona_id: (editData as any).persona_id || null,
display_name: (editData as any).display_name || null
});
@@ -130,7 +139,7 @@ export function WorkerIndividualSettings() {
output_template: JSON.parse(editData.output_template || '{}'),
bound_skill: JSON.parse(editData.bound_skill || '{}'),
workspace: JSON.parse(editData.workspace || '[]'),
tools: JSON.parse(editData.tools || '[]')
toolsets: JSON.parse(editData.toolsets || '[]')
};
if (isNew) await apiClient.post('/api/v1/agent/worker', payload);
else await apiClient.put(`/api/v1/agent/worker/${editData.agent_id}`, payload);
@@ -336,23 +345,24 @@ export function WorkerIndividualSettings() {
</>
)}
<div>
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.tools')}</label>
<div className="flex flex-wrap gap-1.5 p-3 bg-bg-input border border-border-primary rounded-xl max-h-40 overflow-y-auto">
{availableTools.map(tool => {
let currentTools: string[] = [];
try { currentTools = JSON.parse(editData.tools || '[]'); } catch { }
const isSelected = currentTools.includes(tool);
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.toolsets')}</label>
<div className="grid grid-cols-2 gap-2 p-3 bg-bg-input border border-border-primary rounded-xl max-h-48 overflow-y-auto">
{availableToolsets.map(ts => {
let currentToolsets: string[] = [];
try { currentToolsets = JSON.parse(editData.toolsets || '[]'); } catch { }
const isSelected = currentToolsets.includes(ts.toolset_id);
return (
<button key={tool} type="button" onClick={() => {
const updated = isSelected ? currentTools.filter(t => t !== tool) : [...currentTools, tool];
setEditData({...editData, tools: JSON.stringify(updated)});
<button key={ts.toolset_id} type="button" onClick={() => {
const updated = isSelected ? currentToolsets.filter(id => id !== ts.toolset_id) : [...currentToolsets, ts.toolset_id];
setEditData({...editData, toolsets: JSON.stringify(updated)});
}}
className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-all ${isSelected ? 'bg-accent-light text-accent border border-accent/20' : 'bg-bg-secondary text-text-muted border border-border-primary hover:border-text-muted'}`}>
{tool}
className={`flex flex-col items-start p-2.5 rounded-lg text-left transition-all ${isSelected ? 'bg-accent-light border border-accent/30' : 'bg-bg-secondary border border-border-primary hover:border-text-muted'}`}>
<span className="text-xs font-medium text-text-primary">{ts.name}</span>
<span className="text-[10px] text-text-muted mt-0.5">{ts.tools.length} {t('agent.toolsCount')}</span>
</button>
);
})}
{availableTools.length === 0 && <span className="text-xs text-text-muted">{t('agent.noTools')}</span>}
{availableToolsets.length === 0 && <span className="text-xs text-text-muted col-span-2">{t('plugin.toolsetEmpty')}</span>}
</div>
</div>
{modalMessage && <div className="p-3 bg-danger-bg text-danger text-sm rounded-xl border border-danger/20">{modalMessage}</div>}
+160 -37
View File
@@ -1,69 +1,192 @@
import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Package, Wrench, Loader2, Box } from 'lucide-react';
import { Package, Wrench, Loader2, Box, Shield, X } from 'lucide-react';
import apiClient from '../../api/client';
interface Toolset {
toolset_id: string;
name: string;
description?: string;
tools: string[];
is_system: boolean;
category: string;
}
export function ToolSettings() {
const { t } = useTranslation();
const [tools, setTools] = useState<string[]>([]);
const [toolsets, setToolsets] = useState<Toolset[]>([]);
const [loading, setLoading] = useState(true);
const [selected, setSelected] = useState<Toolset | null>(null);
useEffect(() => { fetchTools(); }, []);
useEffect(() => { fetchToolsets(); }, []);
const fetchTools = async () => {
const fetchToolsets = async () => {
try {
setLoading(true);
const response = await apiClient.get('/api/v1/resource/tool');
setTools(response.data.tools || []);
const res = await apiClient.get('/api/v1/resource/custom-toolset');
setToolsets(res.data.toolsets || []);
} catch (err) {
console.error('Failed to fetch tools:', err);
console.error('Failed to fetch toolsets:', err);
} finally {
setLoading(false);
}
};
const systemToolsets = toolsets.filter(ts => ts.is_system);
const userToolsets = toolsets.filter(ts => !ts.is_system);
return (
<div className="max-w-4xl space-y-6">
<div>
<div className="flex items-center gap-2 mb-1">
<Wrench size={16} className="text-accent" />
<h3 className="text-lg font-bold text-text-primary">{t('plugin.toolManagement')}</h3>
<h3 className="text-lg font-bold text-text-primary">
{t('plugin.toolManagement')}
</h3>
</div>
<p className="text-sm text-text-muted">{t('plugin.toolDesc')}</p>
</div>
<div className="bg-bg-card border border-border-primary rounded-2xl shadow-sm overflow-hidden">
<div className="px-6 py-4 border-b border-border-primary flex justify-between items-center bg-bg-secondary">
<div>
<h4 className="text-sm font-bold text-text-primary">{t('plugin.availableTools')}</h4>
<p className="text-[11px] text-text-muted">{t('plugin.toolSubDesc')}</p>
</div>
{loading ? (
<div className="flex flex-col items-center justify-center py-12 text-text-muted">
<Loader2 size={24} className="animate-spin mb-3" />
<span className="text-sm">{t('common.loading')}</span>
</div>
<div className="p-6">
{loading ? (
<div className="flex flex-col items-center justify-center py-12 text-text-muted">
<Loader2 size={24} className="animate-spin mb-3" />
<span className="text-sm">{t('common.loading')}</span>
</div>
) : tools.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-text-muted">
<Box size={32} className="mb-3 opacity-40" />
<span className="text-sm">{t('plugin.noTools')}</span>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{tools.map((tool) => (
<div key={tool} className="flex items-center gap-3 p-3.5 bg-bg-secondary border border-border-secondary rounded-xl hover:border-accent/30 transition-all">
<div className="w-9 h-9 rounded-lg bg-accent-light flex items-center justify-center">
<Package size={16} className="text-accent" />
</div>
<span className="text-sm font-medium text-text-primary">{tool}</span>
</div>
))}
</div>
) : toolsets.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-text-muted">
<Box size={32} className="mb-3 opacity-40" />
<span className="text-sm">{t('plugin.toolsetEmpty')}</span>
</div>
) : (
<>
{systemToolsets.length > 0 && (
<ToolsetGroup
title={t('plugin.systemToolsets')}
toolsets={systemToolsets}
onSelect={setSelected}
/>
)}
</div>
{userToolsets.length > 0 && (
<ToolsetGroup
title={t('plugin.userToolsets')}
toolsets={userToolsets}
onSelect={setSelected}
/>
)}
</>
)}
{selected && (
<ToolsetModal toolset={selected} onClose={() => setSelected(null)} />
)}
</div>
);
}
/* PLACEHOLDER_TOOLSET_GROUP */
function ToolsetGroup({
title,
toolsets,
onSelect,
}: {
title: string;
toolsets: Toolset[];
onSelect: (ts: Toolset) => void;
}) {
const { t } = useTranslation();
return (
<div>
<h4 className="text-sm font-semibold text-text-secondary mb-3">
{title}
</h4>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{toolsets.map((ts) => (
<button
key={ts.toolset_id}
onClick={() => onSelect(ts)}
className="relative flex flex-col items-start p-4 bg-bg-card border border-border-primary rounded-xl hover:border-accent/40 hover:shadow-sm transition-all text-left cursor-pointer"
>
{ts.is_system && (
<span className="absolute top-2 right-2 text-[10px] font-medium px-1.5 py-0.5 rounded bg-accent/10 text-accent">
{t('plugin.toolsetSystem')}
</span>
)}
<div className="w-9 h-9 rounded-lg bg-accent-light flex items-center justify-center mb-2">
{ts.is_system ? (
<Shield size={16} className="text-accent" />
) : (
<Package size={16} className="text-accent" />
)}
</div>
<span className="text-sm font-medium text-text-primary">
{ts.name}
</span>
{ts.description && (
<span className="text-[11px] text-text-muted mt-0.5 line-clamp-2">
{ts.description}
</span>
)}
<span className="text-[11px] text-text-muted mt-1">
{t('plugin.toolsetCount', { count: ts.tools.length })}
</span>
</button>
))}
</div>
</div>
);
}
/* PLACEHOLDER_TOOLSET_MODAL */
function ToolsetModal({
toolset,
onClose,
}: {
toolset: Toolset;
onClose: () => void;
}) {
const { t } = useTranslation();
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
onClick={onClose}
>
<div
className="bg-bg-card border border-border-primary rounded-2xl shadow-lg w-full max-w-md mx-4"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between px-5 py-4 border-b border-border-primary">
<div>
<h4 className="text-sm font-bold text-text-primary">
{toolset.name}
</h4>
{toolset.description && (
<p className="text-[11px] text-text-muted mt-0.5">
{toolset.description}
</p>
)}
</div>
<button
onClick={onClose}
className="p-1 rounded hover:bg-bg-secondary transition-colors"
>
<X size={16} className="text-text-muted" />
</button>
</div>
<div className="px-5 py-4 space-y-2 max-h-80 overflow-y-auto">
<p className="text-xs font-medium text-text-secondary mb-2">
{t('plugin.toolsetTools')}
</p>
{toolset.tools.map((tool) => (
<div
key={tool}
className="flex items-center gap-2.5 p-2.5 bg-bg-secondary rounded-lg"
>
<Package size={14} className="text-accent shrink-0" />
<span className="text-sm text-text-primary">{tool}</span>
</div>
))}
</div>
</div>
</div>
);
}
+12 -4
View File
@@ -198,8 +198,10 @@
"outputTemplate": "Output Template (JSON)",
"boundSkill": "Bound Skill",
"workspace": "Workspace (JSON)",
"tools": "Tools",
"noTools": "No tools",
"tools": "Toolsets",
"noTools": "No toolsets",
"toolsets": "Toolsets",
"toolsCount": "tools",
"system": "System",
"type.ordinary_individual": "Ordinary",
"type.skill_individual": "Skill",
@@ -224,11 +226,17 @@
"persona": "Persona"
},
"plugin": {
"toolManagement": "Tool Management",
"toolDesc": "Manage agent tools and functions",
"toolManagement": "Toolset Center",
"toolDesc": "Manage system and custom toolsets",
"availableTools": "Available Tools",
"toolSubDesc": "Installed tools for agents",
"noTools": "No tools installed yet.",
"systemToolsets": "System Toolsets",
"userToolsets": "My Toolsets",
"toolsetTools": "Included Tools",
"toolsetEmpty": "No toolsets available",
"toolsetSystem": "System",
"toolsetCount": "{{count}} tools",
"skillManagement": "Skill Management",
"skillDesc": "Manage agent skills and functions",
"installSkill": "Install Skill",
+11 -3
View File
@@ -198,8 +198,10 @@
"outputTemplate": "输出模板 (JSON)",
"boundSkill": "绑定技能",
"workspace": "工作空间 (JSON)",
"tools": "工具",
"tools": "工具",
"noTools": "暂无工具",
"toolsets": "工具集",
"toolsCount": "个工具",
"system": "系统",
"type.ordinary_individual": "普通",
"type.skill_individual": "技能",
@@ -224,11 +226,17 @@
"persona": "人设"
},
"plugin": {
"toolManagement": "工具管理",
"toolDesc": "管理代理工具和函数",
"toolManagement": "工具集中心",
"toolDesc": "管理系统和自定义工具集",
"availableTools": "可用工具",
"toolSubDesc": "已安装的工具",
"noTools": "暂无已安装的工具",
"systemToolsets": "系统工具集",
"userToolsets": "我的工具集",
"toolsetTools": "包含工具",
"toolsetEmpty": "暂无工具集",
"toolsetSystem": "系统",
"toolsetCount": "{{count}} 个工具",
"skillManagement": "技能管理",
"skillDesc": "管理代理技能和函数",
"installSkill": "安装技能",