wx44wx/AI-VideoAssistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add edit and delete button for tools

Browse Source
This commit is contained in:
Xin Wang
2026-02-09 00:17:06 +08:00
parent 77b186dceb
commit d0b96a3f72
1 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/pages/ToolLibrary.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; 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 { Button, Input, Badge, Dialog } from '../components/UI';
import { Tool } from '../types'; import { Tool } from '../types';
import { createTool, deleteTool, fetchTools, updateTool } from '../services/backendApi'; import { createTool, deleteTool, fetchTools, updateTool } from '../services/backendApi';
@@ -168,8 +168,9 @@ export const ToolLibraryPage: React.FC = () => {
{!isLoading && filteredTools.map((tool) => ( {!isLoading && filteredTools.map((tool) => (
<div <div
key={tool.id} 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'}`}> <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" />} {iconMap[tool.icon] || <Box className="w-5 h-5" />}
</div> </div>
@@ -190,27 +191,45 @@ export const ToolLibraryPage: React.FC = () => {
</div> </div>
<p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed opacity-80">{tool.description}</p> <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed opacity-80">{tool.description}</p>
</div> </div>
</div>
<div className="absolute top-3 right-3 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between">
{!tool.isSystem && ( {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 <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); 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" /> <Edit2 className="w-4 h-4" />
</button> </button>
)}
{!tool.isSystem && (
<button <button
onClick={(e) => handleDeleteTool(e, tool)} 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" /> <Trash2 className="w-4 h-4" />
</button> </button>
)} </div>
</div> </div>
</div> </div>
))} ))}