Update assistant tool setting ui

web/pages/ToolLibrary.tsx

@@ -92,6 +92,57 @@ export const ToolLibraryPage: React.FC = () => {
     const matchesCategory = categoryFilter === 'all' || tool.category === categoryFilter;
     return matchesSearch && matchesCategory;
   });
+  const systemTools = filteredTools.filter((tool) => tool.category === 'system');
+  const queryTools = filteredTools.filter((tool) => tool.category === 'query');
+
+  const renderToolCard = (tool: Tool) => (
+    <div
+      key={tool.id}
+      className="p-5 rounded-xl border transition-all relative bg-card/30 border-white/5 hover:bg-white/5 hover:border-white/10 hover:shadow-lg"
+    >
+      <div className="flex items-start space-x-4">
+        <div className={`p-3 rounded-lg shrink-0 transition-colors ${tool.category === 'system' ? 'bg-primary/10 text-primary' : 'bg-blue-500/10 text-blue-400'}`}>
+          {iconMap[tool.icon] || <Box className="w-5 h-5" />}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between mb-1 gap-2">
+            <span className="text-base font-bold text-white truncate">{tool.name}</span>
+            {tool.isSystem ? <Badge variant="outline" className="text-[9px] h-4 px-1">SYSTEM</Badge> : <Badge variant="outline" className="text-[9px] h-4 px-1">CUSTOM</Badge>}
+          </div>
+          <div className="flex items-center gap-2 mb-2">
+            <Badge variant="outline" className={`text-[10px] border-0 px-0 ${tool.category === 'system' ? 'text-primary' : 'text-blue-400'}`}>
+              {tool.category === 'system' ? 'SYSTEM' : 'QUERY'}
+            </Badge>
+            <span className="text-[10px] text-muted-foreground font-mono opacity-50 truncate">ID: {tool.id}</span>
+          </div>
+          <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed opacity-80">{tool.description}</p>
+        </div>
+      </div>
+
+      <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between">
+        <span className="text-[11px] text-muted-foreground">system/query 仅表示执行类型</span>
+        <div className="flex space-x-1">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              openEdit(tool);
+            }}
+            title="编辑工具"
+            className="p-1.5 rounded-md transition-colors hover:bg-primary/20 text-muted-foreground hover:text-primary"
+          >
+            <Edit2 className="w-4 h-4" />
+          </button>
+          <button
+            onClick={(e) => handleDeleteTool(e, tool)}
+            title="删除工具"
+            className="p-1.5 rounded-md transition-colors hover:bg-destructive/20 text-muted-foreground hover:text-destructive"
+          >
+            <Trash2 className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
 
   const handleSaveTool = async () => {
     if (!toolName.trim()) {
@@ -202,70 +253,51 @@ export const ToolLibraryPage: React.FC = () => {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {!isLoading && filteredTools.map((tool) => (
-          <div
-            key={tool.id}
-            className="p-5 rounded-xl border transition-all relative bg-card/30 border-white/5 hover:bg-white/5 hover:border-white/10 hover:shadow-lg"
-          >
-            <div className="flex items-start space-x-4">
-            <div className={`p-3 rounded-lg shrink-0 transition-colors ${tool.category === 'system' ? 'bg-primary/10 text-primary' : 'bg-blue-500/10 text-blue-400'}`}>
-              {iconMap[tool.icon] || <Box className="w-5 h-5" />}
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center justify-between mb-1 gap-2">
-                <span className="text-base font-bold text-white truncate">{tool.name}</span>
-                {tool.isSystem ? <Badge variant="outline" className="text-[9px] h-4 px-1">SYSTEM</Badge> : <Badge variant="outline" className="text-[9px] h-4 px-1">CUSTOM</Badge>}
+      {isLoading ? (
+        <div className="py-12 flex flex-col items-center justify-center text-muted-foreground opacity-70">
+          <Wrench className="w-12 h-12 mb-4 stroke-1 animate-pulse" />
+          <p>加载中...</p>
+        </div>
+      ) : filteredTools.length === 0 ? (
+        <div className="py-12 flex flex-col items-center justify-center text-muted-foreground opacity-50">
+          <Wrench className="w-12 h-12 mb-4 stroke-1" />
+          <p>未找到相关工具</p>
+        </div>
+      ) : (
+        <div className="space-y-8">
+          {(categoryFilter === 'all' || categoryFilter === 'system') && (
+            <section className="space-y-3">
+              <div className="flex items-center justify-between">
+                <h2 className="text-sm font-black uppercase tracking-wider text-primary">System Command</h2>
+                <Badge variant="outline" className="text-[10px]">{systemTools.length} tools</Badge>
               </div>
-              <div className="flex items-center gap-2 mb-2">
-                <Badge variant="outline" className={`text-[10px] border-0 px-0 ${tool.category === 'system' ? 'text-primary' : 'text-blue-400'}`}>
-                  {tool.category === 'system' ? 'SYSTEM' : 'QUERY'}
-                </Badge>
-                <span className="text-[10px] text-muted-foreground font-mono opacity-50 truncate">ID: {tool.id}</span>
+              {systemTools.length === 0 ? (
+                <div className="rounded-lg border border-white/10 bg-black/20 p-4 text-xs text-muted-foreground">当前筛选条件下无系统指令工具。</div>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {systemTools.map(renderToolCard)}
+                </div>
+              )}
+            </section>
+          )}
+
+          {(categoryFilter === 'all' || categoryFilter === 'query') && (
+            <section className="space-y-3">
+              <div className="flex items-center justify-between">
+                <h2 className="text-sm font-black uppercase tracking-wider text-blue-300">Information Query</h2>
+                <Badge variant="outline" className="text-[10px]">{queryTools.length} tools</Badge>
               </div>
-              <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed opacity-80">{tool.description}</p>
-            </div>
-            </div>
-
-            <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between">
-              <span className="text-[11px] text-muted-foreground">system/query 仅表示执行类型</span>
-              <div className="flex space-x-1">
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    openEdit(tool);
-                  }}
-                  title="编辑工具"
-                  className="p-1.5 rounded-md transition-colors hover:bg-primary/20 text-muted-foreground hover:text-primary"
-                >
-                  <Edit2 className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={(e) => handleDeleteTool(e, tool)}
-                  title="删除工具"
-                  className="p-1.5 rounded-md transition-colors hover:bg-destructive/20 text-muted-foreground hover:text-destructive"
-                >
-                  <Trash2 className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-          </div>
-        ))}
-
-        {!isLoading && filteredTools.length === 0 && (
-          <div className="col-span-full py-12 flex flex-col items-center justify-center text-muted-foreground opacity-50">
-            <Wrench className="w-12 h-12 mb-4 stroke-1" />
-            <p>未找到相关工具</p>
-          </div>
-        )}
-
-        {isLoading && (
-          <div className="col-span-full py-12 flex flex-col items-center justify-center text-muted-foreground opacity-70">
-            <Wrench className="w-12 h-12 mb-4 stroke-1 animate-pulse" />
-            <p>加载中...</p>
-          </div>
-        )}
-      </div>
+              {queryTools.length === 0 ? (
+                <div className="rounded-lg border border-white/10 bg-black/20 p-4 text-xs text-muted-foreground">当前筛选条件下无信息查询工具。</div>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {queryTools.map(renderToolCard)}
+                </div>
+              )}
+            </section>
+          )}
+        </div>
+      )}
 
       <Dialog
         isOpen={isToolModalOpen}