cc工作前备份

2026-03-12 00:23:42 +08:00
parent f75a2b798b
commit ef849c62ab
98 changed files with 12110 additions and 568 deletions
--- a/desktop/src/components/ChannelList.tsx
+++ b/desktop/src/components/ChannelList.tsx
@@ -0,0 +1,120 @@
+import { useEffect } from 'react';
+import { useGatewayStore } from '../store/gatewayStore';
+import { Radio, RefreshCw, MessageCircle, Settings } from 'lucide-react';
+
+const CHANNEL_ICONS: Record<string, string> = {
+  feishu: '飞',
+  qqbot: 'QQ',
+  wechat: '微',
+};
+
+interface ChannelListProps {
+  onOpenSettings?: () => void;
+}
+
+export function ChannelList({ onOpenSettings }: ChannelListProps) {
+  const { channels, connectionState, loadChannels, loadPluginStatus } = useGatewayStore();
+
+  const connected = connectionState === 'connected';
+
+  useEffect(() => {
+    if (connected) {
+      loadPluginStatus().then(() => loadChannels());
+    }
+  }, [connected]);
+
+  const handleRefresh = () => {
+    loadPluginStatus().then(() => loadChannels());
+  };
+
+  if (!connected) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-gray-400 text-xs px-4 text-center">
+        <Radio className="w-8 h-8 mb-2 opacity-30" />
+        <p>IM 频道</p>
+        <p className="mt-1">连接 Gateway 后可用</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200">
+        <span className="text-xs font-medium text-gray-500">频道列表</span>
+        <button
+          onClick={handleRefresh}
+          className="p-1 text-gray-400 hover:text-orange-500 rounded"
+          title="刷新"
+        >
+          <RefreshCw className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto custom-scrollbar">
+        {/* Configured channels */}
+        {channels.map((ch) => (
+          <div
+            key={ch.id}
+            className="flex items-center gap-3 px-3 py-3 hover:bg-gray-100 border-b border-gray-50"
+          >
+            <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-white text-xs font-bold flex-shrink-0 ${
+              ch.status === 'active'
+                ? 'bg-gradient-to-br from-blue-500 to-indigo-500'
+                : 'bg-gray-300'
+            }`}>
+              {CHANNEL_ICONS[ch.type] || <MessageCircle className="w-4 h-4" />}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-xs font-medium text-gray-900 truncate">{ch.label}</div>
+              <div className={`text-[11px] ${
+                ch.status === 'active' ? 'text-green-500' : ch.status === 'error' ? 'text-red-500' : 'text-gray-400'
+              }`}>
+                {ch.status === 'active' ? '已连接' : ch.status === 'error' ? ch.error || '错误' : '未配置'}
+                {ch.accounts !== undefined && ch.accounts > 0 && ` · ${ch.accounts} 个账号`}
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {/* Always show available channels that aren't configured */}
+        {!channels.find(c => c.type === 'feishu') && (
+          <div className="flex items-center gap-3 px-3 py-3 hover:bg-gray-100 border-b border-gray-50 opacity-60">
+            <div className="w-8 h-8 rounded-lg flex items-center justify-center text-white text-xs font-bold flex-shrink-0 bg-gray-300">
+              飞
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-xs font-medium text-gray-600">飞书 (Feishu)</div>
+              <div className="text-[11px] text-gray-400">未配置</div>
+            </div>
+          </div>
+        )}
+        {!channels.find(c => c.type === 'qqbot') && (
+          <div className="flex items-center gap-3 px-3 py-3 hover:bg-gray-100 border-b border-gray-50 opacity-60">
+            <div className="w-8 h-8 rounded-lg flex items-center justify-center text-white text-xs font-bold flex-shrink-0 bg-gray-300">
+              QQ
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-xs font-medium text-gray-600">QQ 机器人</div>
+              <div className="text-[11px] text-gray-400">未安装插件</div>
+            </div>
+          </div>
+        )}
+
+        {/* Help text */}
+        <div className="px-3 py-4 text-center">
+          <p className="text-[11px] text-gray-400 mb-2">在设置中配置 IM 频道</p>
+          {onOpenSettings && (
+            <button
+              onClick={onOpenSettings}
+              className="inline-flex items-center gap-1 text-xs text-orange-500 hover:text-orange-600"
+            >
+              <Settings className="w-3 h-3" />
+              打开设置
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}