feat(ui): Phase 8 UI/UX optimization and system documentation update

## Sidebar Enhancement
- Change tabs to icon + small label layout for better space utilization
- Add Teams tab with team collaboration entry point

## Settings Page Improvements
- Connect theme toggle to gatewayStore.saveQuickConfig for persistence
- Remove OpenFang backend download section, simplify UI
- Add time range filter to UsageStats (7d/30d/all)
- Add stat cards with icons (sessions, messages, input/output tokens)
- Add token usage overview bar chart
- Add 8 ZCLAW system skill definitions with categories

## Bug Fixes
- Fix ChannelList duplicate content with deduplication logic
- Integrate CreateTriggerModal in TriggersPanel
- Add independent SecurityStatusPanel with 12 default enabled layers
- Change workflow view to use SchedulerPanel as unified entry

## New Components
- CreateTriggerModal: Event trigger creation modal
- HandApprovalModal: Hand approval workflow dialog
- HandParamsForm: Enhanced Hand parameter form
- SecurityLayersPanel: 16-layer security status display

## Architecture
- Add TOML config parsing support (toml-utils.ts, config-parser.ts)
- Add request timeout and retry mechanism (request-helper.ts)
- Add secure token storage (secure-storage.ts, secure_storage.rs)

## Tests
- Add unit tests for config-parser, toml-utils, request-helper
- Add team-client and teamStore tests

## Documentation
- Update SYSTEM_ANALYSIS.md with Phase 8 completion
- UI completion: 100% (30/30 components)
- API coverage: 93% (63/68 endpoints)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

desktop/src/components/TriggersPanel.tsx

@@ -1,61 +1,97 @@
 /**
  * TriggersPanel - OpenFang Triggers Management UI
  *
- * Displays available OpenFang Triggers and allows toggling them on/off.
+ * Displays available OpenFang Triggers and allows creating and toggling them.
  */
 
 import { useState, useEffect, useCallback } from 'react';
 import { useGatewayStore } from '../store/gatewayStore';
 import type { Trigger } from '../store/gatewayStore';
+import { CreateTriggerModal } from './CreateTriggerModal';
+import {
+  Zap,
+  RefreshCw,
+  Plus,
+  Globe,
+  Bell,
+  MessageSquare,
+  AlertCircle,
+  CheckCircle2,
+  X,
+} from 'lucide-react';
+
+// === Trigger Type Config ===
+
+const TRIGGER_TYPE_CONFIG: Record<string, { icon: typeof Zap; label: string; color: string }> = {
+  webhook: { icon: Globe, label: 'Webhook', color: 'text-blue-500' },
+  event: { icon: Bell, label: '事件', color: 'text-amber-500' },
+  message: { icon: MessageSquare, label: '消息', color: 'text-green-500' },
+  schedule: { icon: Zap, label: '定时', color: 'text-purple-500' },
+  file: { icon: Zap, label: '文件', color: 'text-cyan-500' },
+  manual: { icon: Zap, label: '手动', color: 'text-gray-500' },
+};
 
 interface TriggerCardProps {
   trigger: Trigger;
   onToggle: (id: string, enabled: boolean) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
   isToggling: boolean;
+  isDeleting: boolean;
 }
 
-function TriggerCard({ trigger, onToggle, isToggling }: TriggerCardProps) {
+function TriggerCard({ trigger, onToggle, onDelete, isToggling, isDeleting }: TriggerCardProps) {
   const handleToggle = async () => {
     await onToggle(trigger.id, !trigger.enabled);
   };
 
-  const statusColor = trigger.enabled
-    ? 'bg-green-500'
-    : 'bg-gray-400';
-
-  const typeLabel: Record<string, string> = {
-    webhook: 'Webhook',
-    schedule: '定时任务',
-    event: '事件触发',
-    manual: '手动触发',
-    file: '文件监听',
-    message: '消息触发',
+  const handleDelete = async () => {
+    if (confirm(`确定要删除触发器 "${trigger.id}" 吗？`)) {
+      await onDelete(trigger.id);
+    }
   };
 
+  const typeConfig = TRIGGER_TYPE_CONFIG[trigger.type] || { icon: Zap, label: trigger.type, color: 'text-gray-500' };
+  const TypeIcon = typeConfig.icon;
+
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
+    <div className={`bg-white dark:bg-gray-800 rounded-lg border p-4 shadow-sm transition-colors ${
+      trigger.enabled
+        ? 'border-green-200 dark:border-green-800'
+        : 'border-gray-200 dark:border-gray-700'
+    }`}>
       <div className="flex items-center justify-between">
-        <div className="flex-1">
+        <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
-            <h3 className="font-medium text-gray-900 dark:text-white">{trigger.id}</h3>
-            <span className={`w-2 h-2 rounded-full ${statusColor}`} title={trigger.enabled ? '已启用' : '已禁用'} />
+            <TypeIcon className={`w-4 h-4 ${typeConfig.color}`} />
+            <h3 className="font-medium text-gray-900 dark:text-white truncate">{trigger.id}</h3>
+            <span className={`w-2 h-2 rounded-full flex-shrink-0 ${
+              trigger.enabled ? 'bg-green-500' : 'bg-gray-400'
+            }`} />
           </div>
           <div className="flex items-center gap-2 mt-1">
             <span className="text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
-              {typeLabel[trigger.type] || trigger.type}
+              {typeConfig.label}
             </span>
             <span className={`text-xs ${trigger.enabled ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'}`}>
               {trigger.enabled ? '已启用' : '已禁用'}
             </span>
           </div>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <button
+            onClick={handleDelete}
+            disabled={isDeleting}
+            className="p-1.5 text-gray-400 hover:text-red-500 rounded-md disabled:opacity-50"
+            title="删除"
+          >
+            <X className="w-4 h-4" />
+          </button>
           <button
             onClick={handleToggle}
-            disabled={isToggling}
+            disabled={isToggling || isDeleting}
             className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
               trigger.enabled ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'
-            } ${isToggling ? 'opacity-50 cursor-not-allowed' : ''}`}
+            } ${(isToggling || isDeleting) ? 'opacity-50 cursor-not-allowed' : ''}`}
             title={trigger.enabled ? '点击禁用' : '点击启用'}
           >
             <span
@@ -71,9 +107,11 @@ function TriggerCard({ trigger, onToggle, isToggling }: TriggerCardProps) {
 }
 
 export function TriggersPanel() {
-  const { triggers, loadTriggers, isLoading, client } = useGatewayStore();
+  const { triggers, loadTriggers, isLoading, client, deleteTrigger } = useGatewayStore();
   const [togglingTrigger, setTogglingTrigger] = useState<string | null>(null);
+  const [deletingTrigger, setDeletingTrigger] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   useEffect(() => {
     loadTriggers();
@@ -82,9 +120,7 @@ export function TriggersPanel() {
   const handleToggle = useCallback(async (id: string, enabled: boolean) => {
     setTogglingTrigger(id);
     try {
-      // Call the gateway to toggle the trigger
       await client.request('triggers.toggle', { id, enabled });
-      // Reload triggers after toggle
       await loadTriggers();
     } catch (error) {
       console.error('Failed to toggle trigger:', error);
@@ -93,6 +129,18 @@ export function TriggersPanel() {
     }
   }, [client, loadTriggers]);
 
+  const handleDelete = useCallback(async (id: string) => {
+    setDeletingTrigger(id);
+    try {
+      await deleteTrigger(id);
+      await loadTriggers();
+    } catch (error) {
+      console.error('Failed to delete trigger:', error);
+    } finally {
+      setDeletingTrigger(null);
+    }
+  }, [deleteTrigger, loadTriggers]);
+
   const handleRefresh = useCallback(async () => {
     setRefreshing(true);
     try {
@@ -102,6 +150,10 @@ export function TriggersPanel() {
     }
   }, [loadTriggers]);
 
+  const handleCreateSuccess = useCallback(() => {
+    loadTriggers();
+  }, [loadTriggers]);
+
   if (isLoading && triggers.length === 0) {
     return (
       <div className="p-4 text-center text-gray-500 dark:text-gray-400">
@@ -110,63 +162,79 @@ export function TriggersPanel() {
     );
   }
 
-  if (triggers.length === 0) {
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
-            触发器 (Triggers)
-          </h2>
-          <button
-            onClick={handleRefresh}
-            disabled={refreshing}
-            className="text-sm text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-50"
-          >
-            {refreshing ? '刷新中...' : '刷新'}
-          </button>
-        </div>
-        <div className="p-4 text-center text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-          暂无可用的触发器
-        </div>
-      </div>
-    );
-  }
-
-  // Count enabled/disabled triggers
   const enabledCount = triggers.filter(t => t.enabled).length;
   const totalCount = triggers.length;
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
-            触发器 (Triggers)
-          </h2>
-          <span className="text-sm text-gray-500 dark:text-gray-400">
-            {enabledCount}/{totalCount} 已启用
-          </span>
+    <>
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+              事件触发器
+            </h2>
+            <span className="text-sm text-gray-500 dark:text-gray-400">
+              {enabledCount}/{totalCount} 已启用
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleRefresh}
+              disabled={refreshing}
+              className="text-sm text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-50 flex items-center gap-1"
+            >
+              <RefreshCw className={`w-3.5 h-3.5 ${refreshing ? 'animate-spin' : ''}`} />
+              {refreshing ? '刷新中...' : '刷新'}
+            </button>
+            <button
+              onClick={() => setIsCreateModalOpen(true)}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors"
+            >
+              <Plus className="w-4 h-4" />
+              新建触发器
+            </button>
+          </div>
         </div>
-        <button
-          onClick={handleRefresh}
-          disabled={refreshing}
-          className="text-sm text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-50"
-        >
-          {refreshing ? '刷新中...' : '刷新'}
-        </button>
+
+        {triggers.length === 0 ? (
+          <div className="p-8 text-center bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+            <div className="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-full flex items-center justify-center mx-auto mb-3">
+              <Zap className="w-6 h-6 text-amber-600 dark:text-amber-400" />
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">暂无事件触发器</p>
+            <p className="text-xs text-gray-400 dark:text-gray-500 mb-4 max-w-sm mx-auto">
+              事件触发器在系统事件（如收到消息、文件更改或 API webhook）发生时触发代理执行。
+            </p>
+            <button
+              onClick={() => setIsCreateModalOpen(true)}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors"
+            >
+              <Plus className="w-4 h-4" />
+              创建事件触发器
+            </button>
+          </div>
+        ) : (
+          <div className="grid gap-3">
+            {triggers.map((trigger) => (
+              <TriggerCard
+                key={trigger.id}
+                trigger={trigger}
+                onToggle={handleToggle}
+                onDelete={handleDelete}
+                isToggling={togglingTrigger === trigger.id}
+                isDeleting={deletingTrigger === trigger.id}
+              />
+            ))}
+          </div>
+        )}
       </div>
 
-      <div className="grid gap-3">
-        {triggers.map((trigger) => (
-          <TriggerCard
-            key={trigger.id}
-            trigger={trigger}
-            onToggle={handleToggle}
-            isToggling={togglingTrigger === trigger.id}
-          />
-        ))}
-      </div>
-    </div>
+      <CreateTriggerModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onSuccess={handleCreateSuccess}
+      />
+    </>
   );
 }