0d4fa96b82
Some checks failed
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Build Frontend (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
重构所有代码和文档中的项目名称，将OpenFang统一更新为ZCLAW。包括： - 配置文件中的项目名称 - 代码注释和文档引用 - 环境变量和路径 - 类型定义和接口名称 - 测试用例和模拟数据 同时优化部分代码结构，移除未使用的模块，并更新相关依赖项。
406 lines
16 KiB
TypeScript
406 lines
16 KiB
TypeScript
/**
|
|
* IMChannels - IM Channel Management UI
|
|
*
|
|
* Displays and manages IM channel configurations.
|
|
* Supports viewing, configuring, and adding new channels.
|
|
*/
|
|
import { useState, useEffect } from 'react';
|
|
import { Radio, RefreshCw, MessageCircle, Settings2, Plus, X, Check, AlertCircle, ExternalLink } from 'lucide-react';
|
|
import { useConnectionStore } from '../../store/connectionStore';
|
|
import { useConfigStore, type ChannelInfo } from '../../store/configStore';
|
|
import { useAgentStore } from '../../store/agentStore';
|
|
|
|
const CHANNEL_ICONS: Record<string, string> = {
|
|
feishu: '飞',
|
|
qqbot: 'QQ',
|
|
wechat: '微',
|
|
discord: 'D',
|
|
slack: 'S',
|
|
telegram: 'T',
|
|
};
|
|
|
|
const CHANNEL_CONFIG_FIELDS: Record<string, { key: string; label: string; type: string; placeholder: string; required: boolean }[]> = {
|
|
feishu: [
|
|
{ key: 'appId', label: 'App ID', type: 'text', placeholder: 'cli_xxx', required: true },
|
|
{ key: 'appSecret', label: 'App Secret', type: 'password', placeholder: '••••••••', required: true },
|
|
],
|
|
discord: [
|
|
{ key: 'botToken', label: 'Bot Token', type: 'password', placeholder: 'OTk2NzY4...', required: true },
|
|
{ key: 'guildId', label: 'Guild ID (可选)', type: 'text', placeholder: '123456789', required: false },
|
|
],
|
|
slack: [
|
|
{ key: 'botToken', label: 'Bot Token', type: 'password', placeholder: 'xoxb-...', required: true },
|
|
{ key: 'appToken', label: 'App Token', type: 'password', placeholder: 'xapp-...', required: false },
|
|
],
|
|
telegram: [
|
|
{ key: 'botToken', label: 'Bot Token', type: 'password', placeholder: '123456:ABC...', required: true },
|
|
],
|
|
qqbot: [
|
|
{ key: 'appId', label: 'App ID', type: 'text', placeholder: '1234567890', required: true },
|
|
{ key: 'token', label: 'Token', type: 'password', placeholder: '••••••••', required: true },
|
|
],
|
|
wechat: [
|
|
{ key: 'corpId', label: 'Corp ID', type: 'text', placeholder: 'wwxxx', required: true },
|
|
{ key: 'agentId', label: 'Agent ID', type: 'text', placeholder: '1000001', required: true },
|
|
{ key: 'secret', label: 'Secret', type: 'password', placeholder: '••••••••', required: true },
|
|
],
|
|
};
|
|
|
|
const KNOWN_CHANNELS = [
|
|
{ type: 'feishu', label: '飞书 (Feishu/Lark)', description: '企业即时通讯平台' },
|
|
{ type: 'discord', label: 'Discord', description: '游戏社区和语音聊天' },
|
|
{ type: 'slack', label: 'Slack', description: '团队协作平台' },
|
|
{ type: 'telegram', label: 'Telegram', description: '加密即时通讯' },
|
|
{ type: 'qqbot', label: 'QQ 机器人', description: '腾讯QQ官方机器人' },
|
|
{ type: 'wechat', label: '企业微信', description: '企业微信机器人' },
|
|
];
|
|
|
|
interface ChannelConfigModalProps {
|
|
channel: ChannelInfo | null;
|
|
channelType: string | null;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSave: (config: Record<string, string>) => Promise<void>;
|
|
isSaving: boolean;
|
|
}
|
|
|
|
function ChannelConfigModal({ channel, channelType, isOpen, onClose, onSave, isSaving }: ChannelConfigModalProps) {
|
|
const [config, setConfig] = useState<Record<string, string>>({});
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const fields = channelType ? CHANNEL_CONFIG_FIELDS[channelType] || [] : [];
|
|
|
|
useEffect(() => {
|
|
if (channel?.config) {
|
|
setConfig(channel.config as Record<string, string>);
|
|
} else {
|
|
setConfig({});
|
|
}
|
|
setError(null);
|
|
}, [channel, channelType]);
|
|
|
|
if (!isOpen || !channelType) return null;
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
// Validate required fields
|
|
for (const field of fields) {
|
|
if (field.required && !config[field.key]?.trim()) {
|
|
setError(`请填写 ${field.label}`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
await onSave(config);
|
|
onClose();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : '保存失败');
|
|
}
|
|
};
|
|
|
|
const channelInfo = KNOWN_CHANNELS.find(c => c.type === channelType);
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md mx-4">
|
|
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{channel ? `配置 ${channel.label}` : `添加 ${channelInfo?.label || channelType}`}
|
|
</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
|
|
>
|
|
<X className="w-5 h-5 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-4 space-y-4">
|
|
{channelInfo && (
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
{channelInfo.description}
|
|
</p>
|
|
)}
|
|
|
|
{fields.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
<AlertCircle className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
|
<p>该通道类型暂不支持通过 UI 配置</p>
|
|
<p className="text-xs mt-1">请通过配置文件或 CLI 进行配置</p>
|
|
</div>
|
|
) : (
|
|
fields.map((field) => (
|
|
<div key={field.key}>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
{field.label}
|
|
{field.required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
<input
|
|
type={field.type}
|
|
value={config[field.key] || ''}
|
|
onChange={(e) => setConfig({ ...config, [field.key]: e.target.value })}
|
|
placeholder={field.placeholder}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
))
|
|
)}
|
|
|
|
{error && (
|
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-600 dark:text-red-400">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{fields.length > 0 && (
|
|
<div className="flex gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
>
|
|
取消
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSaving}
|
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center gap-2"
|
|
>
|
|
{isSaving ? (
|
|
<>
|
|
<RefreshCw className="w-4 h-4 animate-spin" />
|
|
保存中...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Check className="w-4 h-4" />
|
|
保存
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function IMChannels() {
|
|
const channels = useConfigStore((s) => s.channels);
|
|
const loadChannels = useConfigStore((s) => s.loadChannels);
|
|
const createChannel = useConfigStore((s) => s.createChannel);
|
|
const updateChannel = useConfigStore((s) => s.updateChannel);
|
|
const connectionState = useConnectionStore((s) => s.connectionState);
|
|
const loadPluginStatus = useAgentStore((s) => s.loadPluginStatus);
|
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [selectedChannel, setSelectedChannel] = useState<ChannelInfo | null>(null);
|
|
const [newChannelType, setNewChannelType] = useState<string | null>(null);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [showAddMenu, setShowAddMenu] = useState(false);
|
|
|
|
const connected = connectionState === 'connected';
|
|
const loading = connectionState === 'connecting' || connectionState === 'reconnecting' || connectionState === 'handshaking';
|
|
|
|
useEffect(() => {
|
|
if (connected) {
|
|
loadPluginStatus().then(() => loadChannels());
|
|
}
|
|
}, [connected]);
|
|
|
|
const handleRefresh = () => {
|
|
loadPluginStatus().then(() => loadChannels());
|
|
};
|
|
|
|
const handleConfigure = (channel: ChannelInfo) => {
|
|
setSelectedChannel(channel);
|
|
setNewChannelType(channel.type);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleAddChannel = (type: string) => {
|
|
setSelectedChannel(null);
|
|
setNewChannelType(type);
|
|
setIsModalOpen(true);
|
|
setShowAddMenu(false);
|
|
};
|
|
|
|
const handleSaveConfig = async (config: Record<string, string>) => {
|
|
setIsSaving(true);
|
|
try {
|
|
if (selectedChannel) {
|
|
await updateChannel(selectedChannel.id, { config });
|
|
} else if (newChannelType) {
|
|
const channelInfo = KNOWN_CHANNELS.find(c => c.type === newChannelType);
|
|
await createChannel({
|
|
type: newChannelType,
|
|
name: channelInfo?.label || newChannelType,
|
|
config,
|
|
enabled: true,
|
|
});
|
|
}
|
|
await loadChannels();
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const availableChannels = KNOWN_CHANNELS.filter(
|
|
(channel) => !channels.some((item) => item.type === channel.type)
|
|
);
|
|
|
|
return (
|
|
<div className="max-w-3xl">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h1 className="text-xl font-bold text-gray-900 dark:text-white">IM 频道</h1>
|
|
<div className="flex gap-2">
|
|
<span className="text-xs text-gray-400 flex items-center">
|
|
{connected ? `${channels.length} 个已识别频道` : loading ? '连接中...' : '未连接 Gateway'}
|
|
</span>
|
|
<button
|
|
onClick={handleRefresh}
|
|
disabled={!connected}
|
|
className="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg flex items-center gap-1 transition-colors disabled:opacity-50"
|
|
>
|
|
<RefreshCw className="w-3 h-3" /> 刷新
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{!connected ? (
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 h-64 flex flex-col items-center justify-center mb-6 shadow-sm text-gray-400">
|
|
<Radio className="w-8 h-8 mb-3 opacity-40" />
|
|
<span className="text-sm">连接 Gateway 后查看真实 IM 频道状态</span>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 mb-6 shadow-sm divide-y divide-gray-100 dark:divide-gray-700">
|
|
{channels.length > 0 ? channels.map((channel) => (
|
|
<div key={channel.id} className="p-4 flex items-center gap-4">
|
|
<div className={`w-10 h-10 rounded-xl flex items-center justify-center text-white text-sm font-semibold ${
|
|
channel.status === 'active'
|
|
? 'bg-gradient-to-br from-blue-500 to-indigo-500'
|
|
: channel.status === 'error'
|
|
? 'bg-gradient-to-br from-red-500 to-rose-500'
|
|
: 'bg-gray-300 dark:bg-gray-600'
|
|
}`}>
|
|
{CHANNEL_ICONS[channel.type] || <MessageCircle className="w-4 h-4" />}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium text-gray-900 dark:text-white">{channel.label}</div>
|
|
<div className={`text-xs mt-1 ${
|
|
channel.status === 'active'
|
|
? 'text-green-600 dark:text-green-400'
|
|
: channel.status === 'error'
|
|
? 'text-red-500 dark:text-red-400'
|
|
: 'text-gray-400'
|
|
}`}>
|
|
{channel.status === 'active' ? '已连接' : channel.status === 'error' ? channel.error || '错误' : '未配置'}
|
|
{channel.accounts !== undefined && channel.accounts > 0 ? ` · ${channel.accounts} 个账号` : ''}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => handleConfigure(channel)}
|
|
className="p-2 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
|
title="配置"
|
|
>
|
|
<Settings2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)) : (
|
|
<div className="h-40 flex items-center justify-center text-sm text-gray-400">
|
|
尚未识别到可用频道
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Add Channel Section */}
|
|
{connected && availableChannels.length > 0 && (
|
|
<div className="mb-6">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">添加新频道</div>
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setShowAddMenu(!showAddMenu)}
|
|
className="text-xs text-white bg-blue-500 hover:bg-blue-600 px-3 py-1.5 rounded-lg flex items-center gap-1 transition-colors"
|
|
>
|
|
<Plus className="w-3 h-3" /> 添加频道
|
|
</button>
|
|
{showAddMenu && (
|
|
<div className="absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-10">
|
|
{availableChannels.map((channel) => (
|
|
<button
|
|
key={channel.type}
|
|
onClick={() => handleAddChannel(channel.type)}
|
|
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg flex items-center gap-2"
|
|
>
|
|
<span className="w-6 h-6 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-xs">
|
|
{CHANNEL_ICONS[channel.type] || '?'}
|
|
</span>
|
|
<div>
|
|
<div className="font-medium text-gray-900 dark:text-white">{channel.label}</div>
|
|
<div className="text-xs text-gray-500">{channel.description}</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Planned Channels */}
|
|
<div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400 mb-3">规划中的接入渠道</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
{availableChannels.map((channel) => (
|
|
<span
|
|
key={channel.type}
|
|
className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-4 py-2 rounded-lg"
|
|
>
|
|
{channel.label}
|
|
</span>
|
|
))}
|
|
{availableChannels.length === 0 && (
|
|
<div className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1">
|
|
<Check className="w-3 h-3" />
|
|
所有支持的渠道已配置
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* External Link Notice */}
|
|
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
|
<div className="flex items-start gap-2">
|
|
<ExternalLink className="w-4 h-4 text-blue-500 mt-0.5" />
|
|
<div className="text-xs text-blue-700 dark:text-blue-300">
|
|
<p className="font-medium mb-1">高级配置</p>
|
|
<p>账号绑定、消息路由等高级功能需要在 Gateway 配置文件中完成。</p>
|
|
<p className="mt-1">配置文件路径: <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">~/.zclaw/zclaw.toml</code></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Config Modal */}
|
|
<ChannelConfigModal
|
|
channel={selectedChannel}
|
|
channelType={newChannelType}
|
|
isOpen={isModalOpen}
|
|
onClose={() => {
|
|
setIsModalOpen(false);
|
|
setSelectedChannel(null);
|
|
setNewChannelType(null);
|
|
}}
|
|
onSave={handleSaveConfig}
|
|
isSaving={isSaving}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|