zclaw_openfang/desktop/src/components/TriggersPanel.tsx

/**
 * TriggersPanel - OpenFang Triggers Management UI
 *
 * Displays available OpenFang Triggers and allows toggling them on/off.
 */

import { useState, useEffect, useCallback } from 'react';
import { useGatewayStore } from '../store/gatewayStore';
import type { Trigger } from '../store/gatewayStore';

interface TriggerCardProps {
  trigger: Trigger;
  onToggle: (id: string, enabled: boolean) => Promise<void>;
  isToggling: boolean;
}

function TriggerCard({ trigger, onToggle, isToggling }: 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: '消息触发',
  };

  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="flex items-center justify-between">
        <div className="flex-1">
          <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 ? '已启用' : '已禁用'} />
          </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}
            </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">
          <button
            onClick={handleToggle}
            disabled={isToggling}
            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' : ''}`}
            title={trigger.enabled ? '点击禁用' : '点击启用'}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                trigger.enabled ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
        </div>
      </div>
    </div>
  );
}

export function TriggersPanel() {
  const { triggers, loadTriggers, isLoading, client } = useGatewayStore();
  const [togglingTrigger, setTogglingTrigger] = useState<string | null>(null);
  const [refreshing, setRefreshing] = useState(false);

  useEffect(() => {
    loadTriggers();
  }, [loadTriggers]);

  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);
    } finally {
      setTogglingTrigger(null);
    }
  }, [client, loadTriggers]);

  const handleRefresh = useCallback(async () => {
    setRefreshing(true);
    try {
      await loadTriggers();
    } finally {
      setRefreshing(false);
    }
  }, [loadTriggers]);

  if (isLoading && triggers.length === 0) {
    return (
      <div className="p-4 text-center text-gray-500 dark:text-gray-400">
        加载中...
      </div>
    );
  }

  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>
        <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="grid gap-3">
        {triggers.map((trigger) => (
          <TriggerCard
            key={trigger.id}
            trigger={trigger}
            onToggle={handleToggle}
            isToggling={togglingTrigger === trigger.id}
          />
        ))}
      </div>
    </div>
  );
}

export default TriggersPanel;