121 lines
4.5 KiB
TypeScript
121 lines
4.5 KiB
TypeScript
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>
|
|
);
|
|
}
|