aicodeswitch 1.4.1 → 1.5.0

package/src/ui/pages/VendorsPage.tsx

@@ -0,0 +1,490 @@
+import { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { api } from '../api/client';
+import type { Vendor, APIService, SourceType } from '../../types';
+import recommendMd from '../docs/vendors-recommand.md?raw';
+
+// TagInput 组件
+function TagInput({ value = [], onChange, placeholder }: {
+  value: string[];
+  onChange: (tags: string[]) => void;
+  placeholder?: string;
+}) {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault();
+      const newTag = inputValue.trim();
+      if (newTag && !value.includes(newTag)) {
+        onChange([...value, newTag]);
+        setInputValue('');
+      }
+    } else if (e.key === 'Backspace' && !inputValue && value.length > 0) {
+      onChange(value.slice(0, -1));
+    }
+  };
+
+  const removeTag = (indexToRemove: number) => {
+    onChange(value.filter((_, index) => index !== indexToRemove));
+  };
+
+  return (
+    <div style={{
+      border: `1px solid var(--border-primary)`,
+      borderRadius: '4px',
+      padding: '8px',
+      minHeight: '40px',
+      background: 'var(--bg-secondary)'
+    }}>
+      <div style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '4px',
+        alignItems: 'center'
+      }}>
+        {value.map((tag, index) => (
+          <span key={index} style={{
+            backgroundColor: 'var(--accent-light)',
+            color: 'var(--text-primary)',
+            padding: '4px 8px',
+            borderRadius: '4px',
+            fontSize: '12px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px'
+          }}>
+            {tag}
+            <button
+              type="button"
+              onClick={() => removeTag(index)}
+              style={{
+                background: 'none',
+                border: 'none',
+                color: 'var(--text-primary)',
+                cursor: 'pointer',
+                fontSize: '16px',
+                lineHeight: '1',
+                padding: '0',
+                marginLeft: '4px'
+              }}
+              onMouseOver={(e) => e.currentTarget.style.color = 'var(--accent-danger)'}
+              onMouseOut={(e) => e.currentTarget.style.color = 'var(--text-primary)'}
+            >
+              ×
+            </button>
+          </span>
+        ))}
+        <input
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          style={{
+            border: 'none',
+            outline: 'none',
+            flex: '1',
+            minWidth: '120px',
+            fontSize: '14px'
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+const SOURCE_TYPE = {
+  'openai-chat': 'OpenAI Chat',
+  'openai-code': 'OpenAI Code',
+  'openai-responses': 'OpenAI Responses',
+  'claude-chat': 'Claude Chat',
+  'claude-code': 'Claude Code',
+  'deepseek-chat': 'DeepSeek Chat',
+};
+
+function VendorsPage() {
+  const [vendors, setVendors] = useState<Vendor[]>([]);
+  const [services, setServices] = useState<APIService[]>([]);
+  const [selectedVendor, setSelectedVendor] = useState<Vendor | null>(null);
+  const [showVendorModal, setShowVendorModal] = useState(false);
+  const [showServiceModal, setShowServiceModal] = useState(false);
+  const [showRecommendModal, setShowRecommendModal] = useState(false);
+  const [editingVendor, setEditingVendor] = useState<Vendor | null>(null);
+  const [editingService, setEditingService] = useState<APIService | null>(null);
+  const [supportedModels, setSupportedModels] = useState<string[]>([]);
+
+  useEffect(() => {
+    loadVendors();
+  }, []);
+
+  useEffect(() => {
+    if (selectedVendor) {
+      loadServices(selectedVendor.id);
+    }
+  }, [selectedVendor]);
+
+  const loadVendors = async () => {
+    const data = await api.getVendors();
+    setVendors(data);
+    if (data.length > 0 && !selectedVendor) {
+      setSelectedVendor(data[0]);
+    }
+  };
+
+  const loadServices = async (vendorId: string) => {
+    const data = await api.getAPIServices(vendorId);
+    setServices(data);
+  };
+
+  const handleCreateVendor = () => {
+    setEditingVendor(null);
+    setShowVendorModal(true);
+  };
+
+  const handleRecommend = () => {
+    setShowRecommendModal(true);
+  };
+
+  const handleEditVendor = (vendor: Vendor) => {
+    setEditingVendor(vendor);
+    setShowVendorModal(true);
+  };
+
+  const handleDeleteVendor = async (id: string) => {
+    if (confirm('确定要删除此供应商吗')) {
+      await api.deleteVendor(id);
+      loadVendors();
+      if (selectedVendor && selectedVendor.id === id) {
+        setSelectedVendor(null);
+        setServices([]);
+      }
+    }
+  };
+
+  const handleSaveVendor = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const vendor = {
+      name: formData.get('name') as string,
+      description: formData.get('description') as string,
+    };
+
+    if (editingVendor) {
+      await api.updateVendor(editingVendor.id, vendor);
+    } else {
+      await api.createVendor(vendor);
+    }
+
+    setShowVendorModal(false);
+    loadVendors();
+  };
+
+  const handleCreateService = () => {
+    setEditingService(null);
+    setSupportedModels([]);
+    setShowServiceModal(true);
+  };
+
+  const handleEditService = (service: APIService) => {
+    setEditingService(service);
+    setSupportedModels(service.supportedModels || []);
+    setShowServiceModal(true);
+  };
+
+
+
+  const handleDeleteService = async (id: string) => {
+    if (confirm('确定要删除此API服务吗')) {
+      await api.deleteAPIService(id);
+      if (selectedVendor) {
+        loadServices(selectedVendor.id);
+      }
+    }
+  };
+
+  const handleSaveService = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+
+    const service = {
+      vendorId: selectedVendor!.id,
+      name: formData.get('name') as string,
+      apiUrl: formData.get('apiUrl') as string,
+      apiKey: formData.get('apiKey') as string,
+      timeout: parseInt(formData.get('timeout') as string) || 30000,
+      sourceType: formData.get('sourceType') as SourceType,
+      supportedModels: supportedModels.length > 0 ? supportedModels : undefined,
+    };
+
+    if (editingService) {
+      await api.updateAPIService(editingService.id, service);
+    } else {
+      await api.createAPIService(service);
+    }
+
+    setShowServiceModal(false);
+    setSupportedModels([]);
+    if (selectedVendor) {
+      loadServices(selectedVendor.id);
+    }
+  };
+
+  return (
+    <div>
+      <div className="page-header">
+        <h1>供应商管理</h1>
+        <p>管理API供应商和服务配置</p>
+      </div>
+
+      <div style={{ display: 'flex', gap: '20px' }}>
+        <div className="card" style={{ flex: '0 0 33%' }}>
+          <div className="toolbar">
+            <h3>供应商列表</h3>
+            <div style={{ display: 'flex', gap: '10px' }}>
+              <button
+                className="btn btn-secondary"
+                style={{
+                  background: 'linear-gradient(135deg, #2563EB 0%, #F97316 100%)',
+                  color: '#FFFFFF',
+                  boxShadow: '0 4px 12px rgba(37, 99, 235, 0.3)',
+                  border: 'none',
+                  transition: 'all 0.3s ease',
+                  cursor: 'pointer',
+                  fontWeight: '600',
+                  letterSpacing: '0.5px'
+                }}
+                onClick={handleRecommend}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.transform = 'translateY(-2px)';
+                  e.currentTarget.style.boxShadow = '0 8px 20px rgba(37, 99, 235, 0.4)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.transform = 'translateY(0)';
+                  e.currentTarget.style.boxShadow = '0 4px 12px rgba(37, 99, 235, 0.3)';
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.outline = '2px solid #2563EB';
+                  e.currentTarget.style.outlineOffset = '2px';
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.outline = 'none';
+                }}
+              >
+                推荐
+              </button>
+              <button className="btn btn-primary" onClick={handleCreateVendor}>新增</button>
+            </div>
+          </div>
+          {vendors.length === 0 ? (
+            <div className="empty-state"><p>暂无供应商</p></div>
+          ) : (
+            <div style={{ marginTop: '10px' }}>
+              {vendors.map((vendor) => (
+                <div
+                  key={vendor.id}
+                  onClick={() => setSelectedVendor(vendor)}
+                  style={{
+                    padding: '12px',
+                    marginBottom: '8px',
+                    backgroundColor: selectedVendor && selectedVendor.id === vendor.id ? 'var(--accent-light)' : 'var(--bg-secondary)',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    border: `1px solid var(--border-secondary)`,
+                    color: 'var(--text-primary)'
+                  }}
+                >
+                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <div>
+                      <div style={{ fontWeight: 500 }}>{vendor.name}</div>
+                      {vendor.description && (
+                        <div style={{ fontSize: '12px', color: 'var(--text-muted)', marginTop: '4px' }}>
+                          {vendor.description}
+                        </div>
+                      )}
+                    </div>
+                    <div className="action-buttons">
+                      <button
+                        className="btn btn-secondary"
+                        style={{ padding: '4px 8px', fontSize: '12px' }}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleEditVendor(vendor);
+                        }}
+                      >编辑</button>
+                      <button
+                        className="btn btn-danger"
+                        style={{ padding: '4px 8px', fontSize: '12px' }}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteVendor(vendor.id);
+                        }}
+                      >删除</button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="card" style={{ flex: 1 }}>
+           <div className="toolbar">
+             <h3>供应商API服务{selectedVendor && ` - ${selectedVendor.name}`}</h3>
+             {selectedVendor && (
+               <button className="btn btn-primary" onClick={handleCreateService}>新增服务</button>
+             )}
+           </div>
+          {!selectedVendor ? (
+            <div className="empty-state"><p>请先选择一个供应商</p></div>
+          ) : services.length === 0 ? (
+            <div className="empty-state"><p>暂无API服务</p></div>
+          ) : (
+            <table style={{ fontSize: 'smaller' }}>
+              <thead>
+                <tr>
+                  <th style={{ whiteSpace: 'nowrap' }}>服务名称</th>
+                  <th>源类型</th>
+                  <th>API地址</th>
+                  <th>模型列表</th>
+                  <th>操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                {services.map((service) => (
+                  <tr key={service.id}>
+                    <td>{service.name}</td>
+                    <td>{service.sourceType ? SOURCE_TYPE[service.sourceType] : '-'}</td>
+                     <td style={{ maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={service.apiUrl}>{service.apiUrl}</td>
+                    <td>{service.supportedModels?.join(', ') || '-'}</td>
+                    <td>
+                      <div className="action-buttons">
+                        <button className="btn btn-sm btn-secondary" onClick={() => handleEditService(service)}>编辑</button>
+                        <button className="btn btn-sm btn-danger" onClick={() => handleDeleteService(service.id)}>删除</button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+
+      {showVendorModal && (
+        <div className="modal-overlay">
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <div className="modal-header">
+              <h2>{editingVendor ? '编辑供应商' : '新增供应商'}</h2>
+            </div>
+            <form onSubmit={handleSaveVendor}>
+              <div className="form-group">
+                <label>供应商名称</label>
+                <input type="text" name="name" defaultValue={editingVendor ? editingVendor.name : ''} required />
+              </div>
+              <div className="form-group">
+                <label>描述</label>
+                <textarea name="description" rows={3} defaultValue={editingVendor ? editingVendor.description : ''} />
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={() => setShowVendorModal(false)}>取消</button>
+                <button type="submit" className="btn btn-primary">保存</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {showServiceModal && (
+        <div className="modal-overlay">
+          <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <div className="modal-header">
+              <h2>{editingService ? '编辑供应商API服务' : '新增供应商API服务'}</h2>
+            </div>
+            <form onSubmit={handleSaveService}>
+              <div className="form-group">
+                <label>服务名称</label>
+                <input type="text" name="name" defaultValue={editingService ? editingService.name : ''} required />
+              </div>
+              <div className="form-group">
+                <label>源类型 <small>供应商接口返回的数据格式标准类型</small></label>
+                <select name="sourceType" defaultValue={editingService ? editingService.sourceType || '' : ''} required>
+                  <option value="">请选择源类型</option>
+                  <option value="openai-chat">OpenAI Chat</option>
+                  <option value="openai-code">OpenAI Code</option>
+                  <option value="openai-responses">OpenAI Responses</option>
+                  <option value="claude-chat">Claude Chat</option>
+                  <option value="claude-code">Claude Code</option>
+                  <option value="deepseek-chat">DeepSeek Chat</option>
+                </select>
+              </div>
+              <div className="form-group">
+                <label>供应商API地址</label>
+                <input type="url" name="apiUrl" defaultValue={editingService ? editingService.apiUrl : ''} required />
+              </div>
+              <div className="form-group">
+                <label>供应商API密钥</label>
+                <input type="password" name="apiKey" defaultValue={editingService ? editingService.apiKey : ''} required />
+              </div>
+               <div className="form-group">
+                 <label>超时时间(ms)</label>
+                 <input type="number" name="timeout" defaultValue={editingService ? editingService.timeout : 30000} />
+               </div>
+               <div className="form-group">
+                 <label>支持的模型列表</label>
+                  <TagInput
+                    key={editingService?.id || 'new'}
+                    value={supportedModels}
+                    onChange={setSupportedModels}
+                    placeholder="输入模型名，按Enter或逗号添加"
+                  />
+               </div>
+               <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={() => setShowServiceModal(false)}>取消</button>
+                <button type="submit" className="btn btn-primary">保存</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {showRecommendModal && (
+        <div className="modal-overlay">
+          <div className="modal" style={{ maxWidth: '800px' }} onClick={(e) => e.stopPropagation()}>
+            <div className="modal-header">
+              <h2>供应商推荐</h2>
+            </div>
+            <div className="modal-body">
+              <div className="markdown-content">
+                <ReactMarkdown
+                  components={{
+                    a: ({ href, children }) => (
+                      <a
+                        href={href}
+                        style={{
+                          color: '#2563EB',
+                          borderBottom: 'solid 1px #2563EB'
+                        }}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {children}
+                      </a>
+                    )
+                  }}
+                >
+                  {recommendMd}
+                </ReactMarkdown>
+              </div>
+            </div>
+            <div className="modal-footer">
+              <button type="button" className="btn btn-secondary" onClick={() => setShowRecommendModal(false)}>关闭</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default VendorsPage;

package/src/ui/pages/WriteConfigPage.tsx

@@ -0,0 +1,198 @@
+import { useState, useEffect } from 'react';
+import { api } from '../api/client';
+
+type ConfigType = 'claude' | 'codex';
+
+function WriteConfigPage() {
+  const [isWriting, setIsWriting] = useState<{[key in ConfigType]: boolean}>({
+    claude: false,
+    codex: false
+  });
+  const [isRestoring, setIsRestoring] = useState<{[key in ConfigType]: boolean}>({
+    claude: false,
+    codex: false
+  });
+  const [hasBackup, setHasBackup] = useState<{[key in ConfigType]: boolean}>({
+    claude: false,
+    codex: false
+  });
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    checkBackups();
+  }, []);
+
+  const checkBackups = async () => {
+    try {
+      const [claudeBackup, codexBackup] = await Promise.all([
+        api.checkClaudeBackup(),
+        api.checkCodexBackup()
+      ]);
+
+      setHasBackup({
+        claude: claudeBackup.exists,
+        codex: codexBackup.exists
+      });
+    } catch (error) {
+      console.error('Failed to check backups:', error);
+    }
+  };
+
+  const handleWriteConfig = async (type: ConfigType) => {
+    setIsWriting(prev => ({ ...prev, [type]: true }));
+    setMessage('');
+
+    try {
+      const result = type === 'claude'
+        ? await api.writeClaudeConfig()
+        : await api.writeCodexConfig();
+
+      if (result) {
+        setMessage(`${type === 'claude' ? 'Claude Code' : 'Codex'}配置文件写入成功！原始文件已备份为 .bak 文件。`);
+        await checkBackups(); // 重新检查备份状态
+      } else {
+        setMessage(`写入失败: 操作未成功`);
+      }
+    } catch (error: any) {
+      setMessage(`写入失败: ${error.message}`);
+    } finally {
+      setIsWriting(prev => ({ ...prev, [type]: false }));
+    }
+  };
+
+  const handleRestoreConfig = async (type: ConfigType) => {
+    setIsRestoring(prev => ({ ...prev, [type]: true }));
+    setMessage('');
+
+    try {
+      const result = type === 'claude'
+        ? await api.restoreClaudeConfig()
+        : await api.restoreCodexConfig();
+
+      if (result) {
+        setMessage(`${type === 'claude' ? 'Claude Code' : 'Codex'}配置文件已从备份恢复！`);
+        await checkBackups(); // 重新检查备份状态
+      } else {
+        setMessage(`恢复失败: 操作未成功`);
+      }
+    } catch (error: any) {
+      setMessage(`恢复失败: ${error.message}`);
+    } finally {
+      setIsRestoring(prev => ({ ...prev, [type]: false }));
+    }
+  };
+
+  return (
+    <div>
+      <div className="page-header">
+        <h1>写入配置</h1>
+        <p>将Claude Code和Codex的配置文件写入到用户目录</p>
+      </div>
+
+      <div className="card" style={{ marginBottom: '20px' }}>
+        <h3>Claude Code配置</h3>
+        <p style={{ color: '#7f8c8d', marginBottom: '15px' }}>
+          为Claude Code工具写入配置文件。原始文件将被备份为.bak文件。
+        </p>
+
+        <div style={{ marginBottom: '15px' }}>
+          <h4>配置文件：</h4>
+          <ul style={{ color: '#7f8c8d', lineHeight: '1.6' }}>
+            <li><code>~/.claude/settings.json</code> - Claude Code设置</li>
+            <li><code>~/.claude.json</code> - Claude Code初始化设置</li>
+          </ul>
+        </div>
+
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <button
+            className="btn btn-primary"
+            onClick={() => handleWriteConfig('claude')}
+            disabled={isWriting.claude || hasBackup.claude}
+          >
+            {isWriting.claude ? '写入中...' : '写入Claude Code配置'}
+          </button>
+
+          <button
+            className="btn btn-secondary"
+            onClick={() => handleRestoreConfig('claude')}
+            disabled={isRestoring.claude || !hasBackup.claude}
+          >
+            {isRestoring.claude ? '恢复中...' : '恢复Claude Code配置'}
+          </button>
+        </div>
+
+        {!hasBackup.claude && (
+          <p style={{ color: '#95a5a6', fontSize: '12px', marginTop: '10px' }}>
+            没有找到备份文件,恢复功能不可用
+          </p>
+        )}
+
+        {hasBackup.claude && (
+          <p style={{ color: '#e74c3c', fontSize: '12px', marginTop: '10px' }}>
+            ⚠️ 备份文件已存在,为避免覆盖原始备份,请先恢复或手动删除备份文件后再写入
+          </p>
+        )}
+      </div>
+
+      <div className="card">
+        <h3>Codex配置</h3>
+        <p style={{ color: '#7f8c8d', marginBottom: '15px' }}>
+          为Codex工具写入配置文件。原始文件将被备份为.bak文件。
+        </p>
+
+        <div style={{ marginBottom: '15px' }}>
+          <h4>配置文件：</h4>
+          <ul style={{ color: '#7f8c8d', lineHeight: '1.6' }}>
+            <li><code>~/.codex/config.toml</code> - Codex配置</li>
+            <li><code>~/.codex/auth.json</code> - Codex认证信息</li>
+          </ul>
+        </div>
+
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <button
+            className="btn btn-primary"
+            onClick={() => handleWriteConfig('codex')}
+            disabled={isWriting.codex || hasBackup.codex}
+          >
+            {isWriting.codex ? '写入中...' : '写入Codex配置'}
+          </button>
+
+          <button
+            className="btn btn-secondary"
+            onClick={() => handleRestoreConfig('codex')}
+            disabled={isRestoring.codex || !hasBackup.codex}
+          >
+            {isRestoring.codex ? '恢复中...' : '恢复Codex配置'}
+          </button>
+        </div>
+
+        {!hasBackup.codex && (
+          <p style={{ color: '#95a5a6', fontSize: '12px', marginTop: '10px' }}>
+            没有找到备份文件,恢复功能不可用
+          </p>
+        )}
+
+        {hasBackup.codex && (
+          <p style={{ color: '#e74c3c', fontSize: '12px', marginTop: '10px' }}>
+            ⚠️ 备份文件已存在,为避免覆盖原始备份,请先恢复或手动删除备份文件后再写入
+          </p>
+        )}
+      </div>
+
+      {message && (
+        <div style={{
+          marginTop: '20px',
+          padding: '10px',
+          borderRadius: '4px',
+          backgroundColor: message.includes('成功') ? '#d4edda' : '#f8d7da',
+          color: message.includes('成功') ? '#155724' : '#721c24',
+          border: `1px solid ${message.includes('成功') ? '#c3e6cb' : '#f5c6cb'}`
+        }}>
+          {message}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default WriteConfigPage;