feat: 新增工具插件、系统日志、workflow配置及前端优化

1. 新增工具插件(edit_file, python_executor, search_file, shell_executor, write_file) 2. 新增系统事件日志模块和API 3. 新增workflow配置文件和详情API 4. 前端增加SSE、错误边界、设置引导等组件 5. 优化认证加密、速率限制、配置加载等工具模块 6. 删除废弃的cluster和health API 7. 补充单元测试和集成测试 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-06-03 07:34:43 +00:00
parent f04fef916f
commit a53ffebe0e
57 changed files with 2804 additions and 271 deletions
@@ -0,0 +1,144 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { RefreshCw, Search } from 'lucide-react';
+
+interface EventLog {
+  id: number;
+  trace_id: string;
+  event_type: string;
+  level: string;
+  node_name: string | null;
+  message: string;
+  metadata: Record<string, any> | null;
+  created_at: string | null;
+}
+
+const LEVEL_STYLES: Record<string, { bg: string; text: string; label: string }> = {
+  error: { bg: 'bg-[rgba(196,145,122,0.12)]', text: 'text-[#a0705a]', label: 'ERROR' },
+  warn: { bg: 'bg-[rgba(196,168,130,0.15)]', text: 'text-[#9a7d5e]', label: 'WARN' },
+  info: { bg: 'bg-[rgba(156,175,136,0.12)]', text: 'text-[#7a8e6a]', label: 'INFO' },
+};
+
+export function SystemLogsView() {
+  const { t } = useTranslation();
+  const [logs, setLogs] = useState<EventLog[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [traceFilter, setTraceFilter] = useState('');
+  const [typeFilter, setTypeFilter] = useState('');
+  const [levelFilter, setLevelFilter] = useState('');
+
+  const fetchLogs = async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      if (traceFilter) params.set('trace_id', traceFilter);
+      if (typeFilter) params.set('event_type', typeFilter);
+      if (levelFilter) params.set('level', levelFilter);
+      params.set('limit', '200');
+
+      const resp = await fetch(`/api/v1/system/logs?${params.toString()}`, {
+        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` },
+      });
+      if (!resp.ok) throw new Error('Failed to fetch logs');
+      const data = await resp.json();
+      setLogs(data.logs || []);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchLogs(); }, []);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    fetchLogs();
+  };
+
+  return (
+    <div className="max-w-6xl">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-bold text-text-primary">{t('agent.systemLogs')}</h2>
+        <button onClick={fetchLogs} disabled={loading} className="p-2 text-text-muted hover:text-accent hover:bg-accent-light rounded-lg transition-all">
+          <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
+        </button>
+      </div>
+
+      <form onSubmit={handleSearch} className="grid grid-cols-4 gap-3 mb-5">
+        <input
+          type="text"
+          value={traceFilter}
+          onChange={(e) => setTraceFilter(e.target.value)}
+          placeholder={t('agent.logFilterTraceId')}
+          className="px-3 py-2 bg-bg-card border border-border-primary rounded-lg text-sm text-text-primary placeholder:text-text-muted/50 focus:outline-none focus:ring-2 focus:ring-accent/15"
+        />
+        <select
+          value={typeFilter}
+          onChange={(e) => setTypeFilter(e.target.value)}
+          className="px-3 py-2 bg-bg-card border border-border-primary rounded-lg text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/15"
+        >
+          <option value="">{t('agent.logFilterAllTypes')}</option>
+          <option value="workflow_start">workflow_start</option>
+          <option value="step_enter">step_enter</option>
+          <option value="step_complete">step_complete</option>
+          <option value="step_error">step_error</option>
+          <option value="workflow_complete">workflow_complete</option>
+          <option value="workflow_fail">workflow_fail</option>
+          <option value="system">system</option>
+        </select>
+        <select
+          value={levelFilter}
+          onChange={(e) => setLevelFilter(e.target.value)}
+          className="px-3 py-2 bg-bg-card border border-border-primary rounded-lg text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/15"
+        >
+          <option value="">{t('agent.logFilterAllLevels')}</option>
+          <option value="info">INFO</option>
+          <option value="warn">WARN</option>
+          <option value="error">ERROR</option>
+        </select>
+        <button type="submit" className="flex items-center justify-center gap-2 px-4 py-2 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-hover transition-colors">
+          <Search size={14} /> {t('agent.logSearch')}
+        </button>
+      </form>
+
+      <div className="bg-bg-card border border-border-primary rounded-xl overflow-hidden">
+        <div className="overflow-x-auto max-h-[60vh] overflow-y-auto">
+          <table className="w-full text-xs">
+            <thead className="bg-bg-secondary sticky top-0">
+              <tr>
+                <th className="px-4 py-3 text-left font-semibold text-text-muted uppercase tracking-wider">{t('agent.logLevel')}</th>
+                <th className="px-4 py-3 text-left font-semibold text-text-muted uppercase tracking-wider">{t('agent.logType')}</th>
+                <th className="px-4 py-3 text-left font-semibold text-text-muted uppercase tracking-wider">Trace ID</th>
+                <th className="px-4 py-3 text-left font-semibold text-text-muted uppercase tracking-wider">{t('agent.logNode')}</th>
+                <th className="px-4 py-3 text-left font-semibold text-text-muted uppercase tracking-wider">{t('agent.logMessage')}</th>
+                <th className="px-4 py-3 text-left font-semibold text-text-muted uppercase tracking-wider">{t('agent.logTime')}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border-primary">
+              {logs.length === 0 ? (
+                <tr><td colSpan={6} className="px-4 py-12 text-center text-text-muted">{t('agent.noLogs')}</td></tr>
+              ) : (
+                logs.map((log) => {
+                  const style = LEVEL_STYLES[log.level] || LEVEL_STYLES.info;
+                  return (
+                    <tr key={log.id} className="hover:bg-bg-secondary/50 transition-colors">
+                      <td className="px-4 py-2.5">
+                        <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${style.bg} ${style.text}`}>{style.label}</span>
+                      </td>
+                      <td className="px-4 py-2.5 text-text-secondary font-mono">{log.event_type}</td>
+                      <td className="px-4 py-2.5 text-text-muted font-mono">{log.trace_id.slice(-8)}</td>
+                      <td className="px-4 py-2.5 text-text-secondary">{log.node_name || '-'}</td>
+                      <td className="px-4 py-2.5 text-text-primary max-w-xs truncate" title={log.message}>{log.message}</td>
+                      <td className="px-4 py-2.5 text-text-muted whitespace-nowrap">{log.created_at ? new Date(log.created_at).toLocaleString() : '-'}</td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}