Update components/ModelConfigManager.tsx

components/ModelConfigManager.tsx

@@ -23,7 +23,8 @@ import {
   EyeOff,
   Star,
   StarOff,
-  Shield
+  Shield,
+  Lock
 } from 'lucide-react';
 
 interface ModelConfigManagerProps {
@@ -101,6 +102,19 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
     }));
   };
 
+  // 获取渠道显示的API密钥内容
+  const getDisplayApiKey = (channel: ApiChannel): string => {
+    if (channel.isProtected) {
+      return '●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● (受保护)';
+    }
+    return channel.apiKey || '未设置';
+  };
+
+  // 检查用户是否可以修改此渠道
+  const canEditChannel = (channel: ApiChannel): boolean => {
+    return channel.isCustom || !channel.isProtected;
+  };
+
   // ============ 渠道管理 ============
 
   const handleSaveChannel = () => {
@@ -133,13 +147,6 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
   };
 
   const handleDeleteChannel = (id: string) => {
-    // 检查是否是预置渠道
-    const channel = channels.find(ch => ch.id === id);
-    if (channel?.isPreset) {
-      showMessage('error', '预置渠道不能删除');
-      return;
-    }
-
     // 检查是否有模型使用此渠道
     const modelsUsingChannel = models.filter(model => model.channelId === id);
     if (modelsUsingChannel.length > 0) {
@@ -170,6 +177,18 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
     }
   };
 
+  const handleEditChannel = (channel: ApiChannel) => {
+    if (channel.isProtected && !channel.isCustom) {
+      // 对于受保护的预置渠道，创建一个编辑副本，但不显示真实的API密钥
+      setEditingChannel({
+        ...channel,
+        apiKey: '' // 不显示受保护的密钥
+      });
+    } else {
+      setEditingChannel(channel);
+    }
+  };
+
   // ============ 模型管理 ============
 
   const handleSaveModel = () => {
@@ -310,7 +329,7 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
   };
 
   const handleReset = () => {
-    if (window.confirm('确定要重置为默认配置吗？这将删除所有自定义配置，但会保留预置渠道。')) {
+    if (window.confirm('确定要重置为默认配置吗？这将删除所有自定义配置。')) {
       try {
         ModelConfigManager.resetToDefaults();
         loadConfig();
@@ -489,6 +508,7 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                       onClick={() => setEditingChannel({ 
                         isNew: true, 
                         isDefault: false,
+                        isProtected: false,
                         timeout: 30000,
                         baseUrl: 'https://api.openai.com/v1'
                       })}
@@ -509,32 +529,39 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                               {channel.isDefault && (
                                 <Star size={16} className="text-yellow-400" title="默认渠道" />
                               )}
-                              {channel.isPreset && (
-                                <Shield size={16} className="text-green-400" title="预置渠道" />
+                              {channel.isProtected && (
+                                <Shield size={16} className="text-green-400" title="受保护配置" />
                               )}
                             </div>
                             <p className="text-gray-400 text-sm">{channel.baseUrl}</p>
                             <div className="flex items-center space-x-2 mt-2">
                               <Key size={12} className="text-gray-500" />
                               <span className="text-gray-500 text-xs">
-                                {showApiKeys[channel.id] 
+                                {channel.isProtected ? (
+                                  <span className="flex items-center space-x-1">
+                                    <Lock size={12} />
+                                    <span>受保护密钥 (已预置)</span>
+                                  </span>
+                                ) : showApiKeys[channel.id] 
                                   ? channel.apiKey || '未设置'
                                   : '••••••••••••••••••••••••••••••••••••••••'
                                 }
                               </span>
-                              <button
-                                onClick={() => toggleApiKeyVisibility(channel.id)}
-                                className="text-gray-500 hover:text-gray-300"
-                              >
-                                {showApiKeys[channel.id] ? <EyeOff size={12} /> : <Eye size={12} />}
-                              </button>
+                              {!channel.isProtected && (
+                                <button
+                                  onClick={() => toggleApiKeyVisibility(channel.id)}
+                                  className="text-gray-500 hover:text-gray-300"
+                                >
+                                  {showApiKeys[channel.id] ? <EyeOff size={12} /> : <Eye size={12} />}
+                                </button>
+                              )}
                             </div>
                             {channel.description && (
                               <p className="text-gray-500 text-xs mt-1">{channel.description}</p>
                             )}
                           </div>
                           <div className="flex space-x-1">
-                            {!channel.isDefault && !channel.isPreset && (
+                            {!channel.isDefault && !channel.isProtected && (
                               <button
                                 onClick={() => handleSetDefaultChannel(channel.id)}
                                 className="p-1 text-gray-400 hover:text-yellow-400"
@@ -543,14 +570,16 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                                 <StarOff size={16} />
                               </button>
                             )}
-                            <button
-                              onClick={() => setEditingChannel(channel)}
-                              className="p-1 text-gray-400 hover:text-sky-400"
-                              title="编辑"
-                            >
-                              <Edit3 size={16} />
-                            </button>
-                            {channel.isCustom && !channel.isPreset && (
+                            {canEditChannel(channel) && (
+                              <button
+                                onClick={() => handleEditChannel(channel)}
+                                className="p-1 text-gray-400 hover:text-sky-400"
+                                title="编辑"
+                              >
+                                <Edit3 size={16} />
+                              </button>
+                            )}
+                            {channel.isCustom && (
                               <button
                                 onClick={() => handleDeleteChannel(channel.id)}
                                 className="p-1 text-gray-400 hover:text-red-400"
@@ -573,7 +602,6 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                   <div className="p-4">
                     <h3 className="text-lg font-medium text-white mb-4">
                       {editingChannel.isNew ? '添加新渠道' : '编辑渠道'}
-                      {editingChannel.isPreset && <span className="ml-2 text-sm text-green-400">(预置渠道)</span>}
                     </h3>
                     
                     {validationErrors.length > 0 && (
@@ -588,6 +616,19 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                       </div>
                     )}
 
+                    {/* 受保护渠道的提示 */}
+                    {editingChannel.isProtected && !editingChannel.isNew && (
+                      <div className="mb-4 p-3 bg-blue-600 rounded">
+                        <div className="flex items-center space-x-2 mb-2">
+                          <Shield size={16} className="text-white" />
+                          <span className="text-white font-medium">受保护配置</span>
+                        </div>
+                        <p className="text-white text-sm">
+                          此渠道的API密钥已预置且受到保护，您无法查看或修改密钥内容。如需使用自定义密钥，请创建新的渠道。
+                        </p>
+                      </div>
+                    )}
+
                     <div className="space-y-4">
                       <div>
                         <label className="block text-gray-300 text-sm mb-1">渠道名称</label>
@@ -608,28 +649,32 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                           onChange={(e) => setEditingChannel({ ...editingChannel, baseUrl: e.target.value })}
                           className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                           placeholder="https://api.openai.com/v1"
-                          disabled={editingChannel.isPreset}
                         />
-                        {editingChannel.isPreset && (
-                          <p className="text-gray-500 text-xs mt-1">预置渠道的URL不能修改</p>
-                        )}
                       </div>
 
                       <div>
-                        <label className="block text-gray-300 text-sm mb-1">API密钥</label>
+                        <label className="block text-gray-300 text-sm mb-1">
+                          API密钥
+                          {editingChannel.isProtected && (
+                            <span className="ml-2 text-xs text-blue-400">(受保护，无法修改)</span>
+                          )}
+                        </label>
                         <div className="relative">
-                          <input
-                            type="password"
-                            value={editingChannel.apiKey || ''}
-                            onChange={(e) => setEditingChannel({ ...editingChannel, apiKey: e.target.value })}
-                            className="w-full bg-gray-700 text-white p-2 rounded text-sm"
-                            placeholder="输入API密钥"
-                            disabled={editingChannel.isPreset}
-                          />
+                          {editingChannel.isProtected ? (
+                            <div className="w-full bg-gray-600 text-gray-400 p-2 rounded text-sm flex items-center space-x-2">
+                              <Lock size={16} />
+                              <span>●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● (受保护)</span>
+                            </div>
+                          ) : (
+                            <input
+                              type="password"
+                              value={editingChannel.apiKey || ''}
+                              onChange={(e) => setEditingChannel({ ...editingChannel, apiKey: e.target.value })}
+                              className="w-full bg-gray-700 text-white p-2 rounded text-sm"
+                              placeholder="输入API密钥"
+                            />
+                          )}
                         </div>
-                        {editingChannel.isPreset && (
-                          <p className="text-gray-500 text-xs mt-1">预置渠道的密钥不能修改</p>
-                        )}
                       </div>
 
                       <div>
@@ -654,19 +699,17 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                         />
                       </div>
 
-                      {!editingChannel.isPreset && (
-                        <div className="space-y-2">
-                          <label className="flex items-center space-x-2">
-                            <input
-                              type="checkbox"
-                              checked={editingChannel.isDefault || false}
-                              onChange={(e) => setEditingChannel({ ...editingChannel, isDefault: e.target.checked })}
-                              className="rounded"
-                            />
-                            <span className="text-gray-300 text-sm">设为默认渠道</span>
-                          </label>
-                        </div>
-                      )}
+                      <div className="space-y-2">
+                        <label className="flex items-center space-x-2">
+                          <input
+                            type="checkbox"
+                            checked={editingChannel.isDefault || false}
+                            onChange={(e) => setEditingChannel({ ...editingChannel, isDefault: e.target.checked })}
+                            className="rounded"
+                          />
+                          <span className="text-gray-300 text-sm">设为默认渠道</span>
+                        </label>
+                      </div>
 
                       <div className="flex justify-end space-x-2 pt-4">
                         <button
@@ -710,7 +753,7 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                         category: 'GPT-4系列',
                         maxTokens: 4096,
                         temperature: 0.7,
-                        channelId: channels.find(ch => !ch.isPreset)?.id || channels[0]?.id || ''
+                        channelId: channels.length > 0 ? channels[0].id : ''
                       })}
                       className="px-3 py-1 bg-sky-600 hover:bg-sky-700 text-white rounded text-sm flex items-center space-x-1"
                     >
@@ -731,7 +774,6 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                               <p className="text-gray-500 text-xs">{model.category}</p>
                               <p className="text-gray-500 text-xs">
                                 渠道: {channel?.name || '未找到渠道'}
-                                {channel?.isPreset && <span className="ml-1 text-green-400">(预置)</span>}
                               </p>
                             </div>
                             <div className="flex space-x-1">
@@ -827,7 +869,7 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                           <option value="">选择渠道</option>
                           {channels.map((channel) => (
                             <option key={channel.id} value={channel.id}>
-                              {channel.name}{channel.isPreset && ' (预置)'}
+                              {channel.name} {channel.isProtected && '(受保护)'}
                             </option>
                           ))}
                         </select>
@@ -959,7 +1001,9 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                               </p>
                               <p className="text-gray-500 text-xs">
                                 渠道: {associatedChannel?.name || '未找到渠道'}
-                                {associatedChannel?.isPreset && <span className="ml-1 text-green-400">(预置)</span>}
+                                {associatedChannel?.isProtected && (
+                                  <span className="ml-1 text-green-400">(受保护)</span>
+                                )}
                               </p>
                             </div>
                             <div className="flex space-x-1">
@@ -1033,7 +1077,8 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                             const channel = channels.find(ch => ch.id === model.channelId);
                             return (
                               <option key={model.id} value={model.id}>
-                                {model.name} ({channel?.name || '未知渠道'}{channel?.isPreset ? ' - 预置' : ''})
+                                {model.name} ({channel?.name || '未知渠道'})
+                                {channel?.isProtected && ' - 受保护'}
                               </option>
                             );
                           })}
@@ -1120,7 +1165,7 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                   <div className="space-y-2">
                     <div className="flex justify-between text-sm">
                       <span className="text-gray-300">API渠道:</span>
-                      <span className="text-white">{storageInfo.channels} {channels.some(ch => ch.isPreset) && '(含预置)'}</span>
+                      <span className="text-white">{storageInfo.channels}</span>
                     </div>
                     <div className="flex justify-between text-sm">
                       <span className="text-gray-300">模型数量:</span>
@@ -1140,17 +1185,9 @@ const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({
                   <p className="text-gray-300 text-sm">
                     所有配置数据存储在浏览器的localStorage中。清除浏览器数据可能会导致配置丢失。建议定期导出配置进行备份。
                   </p>
-                  {channels.some(ch => ch.isPreset) && (
-                    <div className="bg-green-800 p-3 rounded">
-                      <div className="flex items-center space-x-2">
-                        <Shield size={16} className="text-green-400" />
-                        <span className="text-green-300 font-medium">预置渠道说明</span>
-                      </div>
-                      <p className="text-green-200 text-sm mt-2">
-                        系统包含预置的默认服务渠道，提供开箱即用的体验。预置渠道不会被导出，重置时会自动恢复。
-                      </p>
-                    </div>
-                  )}
+                  <p className="text-blue-300 text-sm">
+                    注意：受保护的预置API密钥不会包含在导出的配置中，以确保安全性。
+                  </p>
                   <div className="flex space-x-3">
                     <button
                       onClick={handleReset}