refactor: 清理未使用代码并添加未来功能标记

style: 统一代码格式和注释风格

docs: 更新多个功能文档的完整度和状态

feat(runtime): 添加路径验证工具支持

fix(pipeline): 改进条件判断和变量解析逻辑

test(types): 为ID类型添加全面测试用例

chore: 更新依赖项和Cargo.lock文件

perf(mcp): 优化MCP协议传输和错误处理

desktop/src/components/Settings/IMChannels.tsx

@@ -1,21 +1,208 @@
-import { useEffect } from 'react';
-import { Radio, RefreshCw, MessageCircle, Settings2 } from 'lucide-react';
+/**
+ * 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 } from '../../store/configStore';
+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';
 
@@ -29,20 +216,47 @@ export function IMChannels() {
     loadPluginStatus().then(() => loadChannels());
   };
 
-  const knownChannels = [
-    { id: 'feishu', type: 'feishu', label: '飞书 (Feishu)' },
-    { id: 'qqbot', type: 'qqbot', label: 'QQ 机器人' },
-    { id: 'wechat', type: 'wechat', label: '微信' },
-  ];
+  const handleConfigure = (channel: ChannelInfo) => {
+    setSelectedChannel(channel);
+    setNewChannelType(channel.type);
+    setIsModalOpen(true);
+  };
 
-  const availableChannels = knownChannels.filter(
+  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">IM 频道</h1>
+        <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'}
@@ -58,12 +272,12 @@ export function IMChannels() {
       </div>
 
       {!connected ? (
-        <div className="bg-white rounded-xl border border-gray-200 h-64 flex flex-col items-center justify-center mb-6 shadow-sm text-gray-400">
+        <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 rounded-xl border border-gray-200 mb-6 shadow-sm divide-y divide-gray-100">
+        <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 ${
@@ -71,24 +285,30 @@ export function IMChannels() {
                   ? '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'
+                    : '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">{channel.label}</div>
+                <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'
+                    ? 'text-green-600 dark:text-green-400'
                     : channel.status === 'error'
-                      ? 'text-red-500'
+                      ? '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>
-              <div className="text-xs text-gray-400">{channel.type}</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">
@@ -98,23 +318,88 @@ export function IMChannels() {
         </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 mb-3">规划中的接入渠道</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.id}
-              className="text-xs text-gray-500 bg-gray-100 px-4 py-2 rounded-lg"
+              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>
           ))}
-          <div className="text-xs text-gray-400 flex items-center gap-1">
-            <Settings2 className="w-3 h-3" />
-            当前页面仅展示已识别到的真实频道状态；channel、account、binding 的创建与配置仍需通过 Gateway 或插件侧完成。
+          {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">~/.openfang/openfang.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>
   );
 }