zhaoxi/KiloStar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend):优化前端页面设计

Browse Source
This commit is contained in:
zhaoxi
2026-05-29 16:44:17 +00:00
parent a83c5fa5bd
commit affe460180
80 changed files with 2670 additions and 2678 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Plugin/ToolSettings.tsx
+19 -22
View File
@@ -1,21 +1,18 @@
import { useState, useEffect } from 'react';
import { Package } from 'lucide-react';
import { Package, Wrench } from 'lucide-react';
import apiClient from '../../api/client';
export function ToolSettings() {
const [tools, setTools] = useState<string[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchTools();
}, []);
useEffect(() => { fetchTools(); }, []);
const fetchTools = async () => {
try {
setLoading(true);
const response = await apiClient.get('/api/v1/resource/tool');
const toolsData = response.data.tools || [];
setTools(toolsData);
setTools(response.data.tools || []);
} catch (err) {
console.error('Failed to fetch tools:', err);
} finally {
@@ -26,33 +23,33 @@ export function ToolSettings() {
return (
<div className="max-w-4xl space-y-6">
<div>
<h3 className="text-xl font-semibold text-slate-800">Installed Tools</h3>
<p className="text-slate-500 mt-1">Manage agent tools and functions.</p>
<div className="flex items-center gap-2 mb-1">
<Wrench size={16} className="text-accent" />
<h3 className="text-lg font-bold text-text-primary">Installed Tools</h3>
</div>
<p className="text-sm text-text-muted">Manage agent tools and functions</p>
</div>
<div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
<div className="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
<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="font-medium text-slate-800">Available Tools</h4>
<p className="text-sm text-slate-500">List of installed tools available for agents.</p>
<h4 className="text-sm font-bold text-text-primary">Available Tools</h4>
<p className="text-[11px] text-text-muted">Installed tools for agents</p>
</div>
</div>
<div className="p-6">
{loading ? (
<div className="text-slate-500 text-sm">Loading tools...</div>
<div className="text-text-muted text-sm">Loading tools...</div>
) : tools.length === 0 ? (
<div className="text-slate-500 text-sm">No tools installed yet.</div>
<div className="text-text-muted text-sm">No tools installed yet.</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{tools.map((tool) => (
<div key={tool} className="p-4 border border-slate-200 rounded-xl flex items-center justify-between hover:shadow-sm transition-shadow">
<div className="flex items-center">
<div className="w-10 h-10 bg-purple-50 rounded-lg flex items-center justify-center mr-3">
<Package size={20} className="text-purple-600" />
</div>
<span className="font-medium text-slate-800">{tool}</span>
<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>