From d0b96a3f7219486275f89b0532b7a47de39b8cf1 Mon Sep 17 00:00:00 2001
From: Xin Wang <wx44wx@XindeMac-mini.local>
Date: Mon, 9 Feb 2026 00:17:06 +0800
Subject: [PATCH] Add edit and delete button for tools

---
 web/pages/ToolLibrary.tsx | 39 +++++++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/web/pages/ToolLibrary.tsx b/web/pages/ToolLibrary.tsx
index 324e683..7665f9b 100644
--- a/web/pages/ToolLibrary.tsx
+++ b/web/pages/ToolLibrary.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Search, Filter, Plus, Wrench, Terminal, Globe, Camera, CameraOff, Image, Images, CloudSun, Calendar, TrendingUp, Coins, Trash2, Edit2, Box } from 'lucide-react';
+import { Search, Filter, Plus, Wrench, Terminal, Globe, Camera, CameraOff, Image, Images, CloudSun, Calendar, TrendingUp, Coins, Trash2, Edit2, Box, Lock } from 'lucide-react';
 import { Button, Input, Badge, Dialog } from '../components/UI';
 import { Tool } from '../types';
 import { createTool, deleteTool, fetchTools, updateTool } from '../services/backendApi';
@@ -168,8 +168,9 @@ export const ToolLibraryPage: React.FC = () => {
         {!isLoading && filteredTools.map((tool) => (
           <div
             key={tool.id}
-            className="p-5 rounded-xl border transition-all relative group flex items-start space-x-4 bg-card/30 border-white/5 hover:bg-white/5 hover:border-white/10 hover:shadow-lg"
+            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>
@@ -190,27 +191,45 @@ export const ToolLibraryPage: React.FC = () => {
               </div>
               <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed opacity-80">{tool.description}</p>
             </div>
+            </div>
 
-            <div className="absolute top-3 right-3 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
-              {!tool.isSystem && (
+            <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between">
+              {tool.isSystem ? (
+                <span className="inline-flex items-center text-[11px] text-muted-foreground">
+                  <Lock className="w-3 h-3 mr-1.5" /> 系统工具只读
+                </span>
+              ) : (
+                <span className="text-[11px] text-muted-foreground">可编辑自定义工具</span>
+              )}
+              <div className="flex space-x-1">
                 <button
                   onClick={(e) => {
                     e.stopPropagation();
-                    openEdit(tool);
+                    if (!tool.isSystem) openEdit(tool);
                   }}
-                  className="p-1.5 rounded-md hover:bg-primary/20 text-muted-foreground hover:text-primary transition-colors"
+                  disabled={tool.isSystem}
+                  title={tool.isSystem ? '系统工具不可编辑' : '编辑工具'}
+                  className={`p-1.5 rounded-md transition-colors ${
+                    tool.isSystem
+                      ? 'text-muted-foreground/40 cursor-not-allowed'
+                      : 'hover:bg-primary/20 text-muted-foreground hover:text-primary'
+                  }`}
                 >
                   <Edit2 className="w-4 h-4" />
                 </button>
-              )}
-              {!tool.isSystem && (
                 <button
                   onClick={(e) => handleDeleteTool(e, tool)}
-                  className="p-1.5 rounded-md hover:bg-destructive/20 text-muted-foreground hover:text-destructive transition-colors"
+                  disabled={tool.isSystem}
+                  title={tool.isSystem ? '系统工具不可删除' : '删除工具'}
+                  className={`p-1.5 rounded-md transition-colors ${
+                    tool.isSystem
+                      ? 'text-muted-foreground/40 cursor-not-allowed'
+                      : 'hover:bg-destructive/20 text-muted-foreground hover:text-destructive'
+                  }`}
                 >
                   <Trash2 className="w-4 h-4" />
                 </button>
-              )}
+              </div>
             </div>
           </div>
         ))}