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

frontend/src/components/Plugin/SkillSettings.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
+import { Download, Trash2, Plus, Box, Sparkles } from 'lucide-react';
 import apiClient from '../../api/client';
-import { Download, Trash2, Plus, Box } from 'lucide-react';
 
 export function SkillSettings() {
   const [skills, setSkills] = useState<string[]>([]);
@@ -15,14 +15,8 @@ export function SkillSettings() {
     setLoading(true);
     try {
       const response = await apiClient.get('/api/v1/resource/skill');
-      const skillsData = response.data.skills || {};
-      // skillsData might be an object mapping skill names to their details, or it might be an array in some versions.
-      // We ensure it is an array of strings (skill names)
-      if (Array.isArray(skillsData)) {
-        setSkills(skillsData);
-      } else {
-        setSkills(Object.keys(skillsData));
-      }
+      const data = response.data.skills || {};
+      setSkills(Array.isArray(data) ? data : Object.keys(data));
     } catch (err) {
       console.error('Failed to fetch skills:', err);
     } finally {
@@ -30,29 +24,21 @@ export function SkillSettings() {
     }
   };
 
-  useEffect(() => {
-    fetchSkills();
-  }, []);
+  useEffect(() => { fetchSkills(); }, []);
 
   const handleInstall = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!repoUrl) return;
-
     setInstalling(true);
     setMessage('');
     setError('');
-
     try {
-      await apiClient.post('/api/v1/resource/skill', {
-        repo_url: repoUrl,
-        path: path || null
-      });
+      await apiClient.post('/api/v1/resource/skill', { repo_url: repoUrl, path: path || null });
       setMessage('Skill installed successfully');
       setRepoUrl('');
       setPath('');
       fetchSkills();
     } catch (err: any) {
-      console.error(err);
       setError(err.response?.data?.message || 'Failed to install skill');
     } finally {
       setInstalling(false);
@@ -60,69 +46,55 @@ export function SkillSettings() {
   };
 
   const handleDelete = async (skillName: string) => {
-    if (!confirm(`Are you sure you want to delete ${skillName}?`)) return;
+    if (!confirm(`Delete ${skillName}?`)) return;
     try {
       await apiClient.delete(`/api/v1/resource/skill/${skillName}`);
       fetchSkills();
-    } catch (err: any) {
-      console.error('Failed to delete skill:', err);
+    } catch {
       alert('Failed to delete skill');
     }
   };
 
   return (
     <div className="max-w-4xl space-y-6">
-      <div className="mb-8">
-        <h1 className="text-2xl font-bold text-slate-800">Skill Management</h1>
-        <p className="text-slate-500 mt-1">Manage agent skills and functions.</p>
+      <div>
+        <div className="flex items-center gap-2 mb-1">
+          <Sparkles size={16} className="text-accent" />
+          <h1 className="text-lg font-bold text-text-primary">Skill Management</h1>
+        </div>
+        <p className="text-sm text-text-muted">Manage agent skills and functions</p>
       </div>
 
-      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-        <div className="p-6 border-b border-slate-100 flex items-center space-x-3">
-           <div className="w-10 h-10 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center">
-             <Download size={20} />
-           </div>
-           <div>
-             <h2 className="text-lg font-semibold text-slate-800">Install Skill</h2>
-             <p className="text-sm text-slate-500">Install a new skill from a repository.</p>
-           </div>
+      <div className="bg-bg-card rounded-2xl border border-border-primary shadow-sm overflow-hidden">
+        <div className="px-6 py-4 border-b border-border-primary flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl bg-accent-light flex items-center justify-center">
+            <Download size={16} className="text-accent" />
+          </div>
+          <div>
+            <h2 className="text-sm font-bold text-text-primary">Install Skill</h2>
+            <p className="text-[11px] text-text-muted">Install from a repository</p>
+          </div>
         </div>
         <div className="p-6">
           <form onSubmit={handleInstall} className="space-y-4">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Repository URL</label>
-                <input
-                  type="text"
-                  required
-                  value={repoUrl}
-                  onChange={(e) => setRepoUrl(e.target.value)}
-                  placeholder="https://github.com/user/repo"
-                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
+                <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">Repository URL</label>
+                <input type="text" required value={repoUrl} onChange={(e) => setRepoUrl(e.target.value)} placeholder="https://github.com/user/repo"
+                  className="w-full px-3.5 py-2.5 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent placeholder:text-text-muted/50" />
               </div>
               <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Path (Optional)</label>
-                <input
-                  type="text"
-                  value={path}
-                  onChange={(e) => setPath(e.target.value)}
-                  placeholder="e.g. subfolder/path"
-                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
+                <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">Path (Optional)</label>
+                <input type="text" value={path} onChange={(e) => setPath(e.target.value)} placeholder="subfolder/path"
+                  className="w-full px-3.5 py-2.5 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent placeholder:text-text-muted/50" />
               </div>
             </div>
-
-            {message && <div className="text-green-600 text-sm">{message}</div>}
-            {error && <div className="text-red-600 text-sm">{error}</div>}
-
+            {message && <div className="text-xs text-success">{message}</div>}
+            {error && <div className="text-xs text-danger">{error}</div>}
             <div className="flex justify-end">
-              <button
-                type="submit"
-                disabled={installing}
-                className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
-              >
-                <Plus size={16} className="mr-2" />
+              <button type="submit" disabled={installing}
+                className="flex items-center gap-2 px-5 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-all shadow-lg shadow-accent/15 text-sm font-medium disabled:opacity-50">
+                <Plus size={14} />
                 {installing ? 'Installing...' : 'Install'}
               </button>
             </div>
@@ -130,31 +102,27 @@ export function SkillSettings() {
         </div>
       </div>
 
-      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-        <div className="p-6 border-b border-slate-100">
-           <h2 className="text-lg font-semibold text-slate-800">Installed Skills</h2>
+      <div className="bg-bg-card rounded-2xl border border-border-primary shadow-sm overflow-hidden">
+        <div className="px-6 py-4 border-b border-border-primary">
+          <h2 className="text-sm font-bold text-text-primary">Installed Skills ({skills.length})</h2>
         </div>
         <div className="p-6">
           {loading ? (
-            <div className="text-slate-500 text-sm">Loading skills...</div>
+            <div className="text-text-muted text-sm">Loading skills...</div>
           ) : skills.length === 0 ? (
-            <div className="text-slate-500 text-sm">No skills installed yet.</div>
+            <div className="text-text-muted text-sm">No skills 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">
               {skills.map((skill) => (
-                <div key={skill} className="p-4 border border-slate-200 rounded-xl flex items-center justify-between hover:shadow-sm transition-shadow">
-                  <div className="flex items-center space-x-3">
-                    <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-slate-500">
-                      <Box size={16} />
+                <div key={skill} className="flex items-center justify-between p-3.5 bg-bg-secondary border border-border-secondary rounded-xl hover:border-accent/30 transition-all group">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-lg bg-bg-card border border-border-primary flex items-center justify-center">
+                      <Box size={14} className="text-text-muted" />
                     </div>
-                    <span className="font-medium text-slate-800">{skill}</span>
+                    <span className="text-sm font-medium text-text-primary">{skill}</span>
                   </div>
-                  <button
-                    onClick={() => handleDelete(skill)}
-                    className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
-                    title="Delete Skill"
-                  >
-                    <Trash2 size={16} />
+                  <button onClick={() => handleDelete(skill)} className="p-1.5 text-text-muted hover:text-danger hover:bg-danger-bg rounded-lg transition-all opacity-0 group-hover:opacity-100">
+                    <Trash2 size={14} />
                   </button>
                 </div>
               ))}