1 line
62 KiB
JSON
1 line
62 KiB
JSON
{"repo": "352727664/codexbridge", "files": {"webui/src/pages/ProviderForm.jsx": {"ad38e3f5e781aa726e6a36e681f4a25c05493081": {"t": 1785595171.932739, "n": 19377, "h": "dde539c81afe7228", "c": "import { useState, useEffect } from 'react'\nimport { api } from '../lib/api'\nimport LanguageSwitcher from '../components/LanguageSwitcher'\nimport { useTranslation } from '../i18n'\n\nconst PRESETS = [\n { id: 'deepseek', name: 'DeepSeek', base_url: 'https://api.deepseek.com', model: 'deepseek-chat', has_reasoning: true },\n { id: 'qwen', name: 'Qwen', base_url: 'https://dashscope.aliyuncs.com/compatible-mode/v1', model: 'qwen-max', has_reasoning: true },\n { id: 'kimi', name: 'Kimi', base_url: 'https://api.moonshot.cn/v1', model: 'moonshot-v1-128k', has_reasoning: false },\n { id: 'glm', name: 'GLM', base_url: 'https://open.bigmodel.cn/api/paas/v4', model: 'glm-4-plus', has_reasoning: false },\n { id: 'mimo', name: 'MiMo', base_url: 'https://api.xiaomimimo.com/v1', model: 'mimo-v2.5-pro', has_reasoning: true },\n { id: 'minimax', name: 'MiniMax', base_url: 'https://api.minimax.chat/v1', model: 'MiniMax-Text-01', has_reasoning: false },\n { id: 'baichuan', name: 'Baichuan', base_url: 'https://api.baichuan-ai.com/v1', model: 'Baichuan4', has_reasoning: false },\n { id: 'yi', name: 'Yi', base_url: 'https://api.lingyiwanwu.com/v1', model: 'yi-lightning', has_reasoning: false },\n { id: 'doubao', name: 'Doubao', base_url: 'https://ark.cn-beijing.volces.com/api/v3', model: 'doubao-1.5-pro-256k', has_reasoning: true },\n { id: 'stepfun', name: 'StepFun', base_url: 'https://api.stepfun.com/v1', model: 'step-2-16k', has_reasoning: false },\n { id: 'siliconflow', name: 'SiliconFlow', base_url: 'https://api.siliconflow.cn/v1', model: 'deepseek-ai/DeepSeek-V3', has_reasoning: true },\n { id: 'anthropic', name: 'Anthropic', base_url: 'https://api.anthropic.com', model: 'claude-sonnet-4-20250514', has_reasoning: true, api_format: 'anthropic' },\n]\n\nexport default function ProviderForm({ provider, onBack }) {\n const { t } = useTranslation()\n const isEdit = !!provider?.id\n\n const [form, setForm] = useState({\n name: '', api_format: 'openai', base_url: '', api_key: '', model: '', has_reasoning: false, note: '', website: '',\n })\n const [testing, setTesting] = useState(false)\n const [testResult, setTestResult] = useState(null)\n const [showKey, setShowKey] = useState(false)\n const [fetchingModels, setFetchingModels] = useState(false)\n const [fetchedModels, setFetchedModels] = useState([])\n const [showModelDropdown, setShowModelDropdown] = useState(false)\n const [toast, setToast] = useState(null)\n const [showPresets, setShowPresets] = useState(!isEdit)\n const [configText, setConfigText] = useState('')\n const [configError, setConfigError] = useState(null)\n\n useEffect(() => {\n if (provider?.id) {\n const models = provider.models || []\n setForm({\n name: provider.name || '', api_format: provider.api_format || 'openai', base_url: provider.base_url || '',\n api_key: provider.api_key || '', model: models[0] || '', has_reasoning: provider.has_reasoning || false,\n note: provider.note || '', website: provider.website || '',\n })\n }\n }, [provider])\n\n useEffect(() => {\n const preview = {\n name: form.name || 'provider', api_format: form.api_format, base_url: form.base_url,\n api_key: form.api_key ? 'sk-***' : '', models: form.model ? [form.model] : [], has_reasoning: form.has_reasoning,\n }\n setConfigText(JSON.stringify(preview, null, 2))\n setConfigError(null)\n }, [form.name, form.api_format, form.base_url, form.api_key, form.model, form.has_reasoning])\n\n const showToast = (msg, type = 'success') => {\n setToast({ msg, type })\n setTimeout(() => setToast(null), 2500)\n }\n\n const update = (key, val) => setForm(prev => ({ ...prev, [key]: val }))\n\n const applyPreset = (preset) => {\n setForm(prev => ({ ...prev, name: preset.name, base_url: preset.base_url, model: preset.model, has_reasoning: preset.has_reasoning, api_format: preset.api_format || 'openai' }))\n setShowPresets(false)\n }\n\n const handleTest = async () => {\n setTesting(true)\n setTestResult(null)\n try {\n const res = await api.testConnection({ base_url: form.base_url, api_key: form.api_key, api_format: form.api_format, model: form.model || '' })\n setTestResult(res)\n } catch (e) {\n setTestResult({ status: 'error', message: e.message })\n }\n setTesting(false)\n }\n\n const handleFetchModels = async () => {\n setFetchingModels(true)\n try {\n const res = await api.fetchModels({ base_url: form.base_url, api_key: form.api_key, api_format: form.api_format })\n if (res.status === 'ok' && res.models?.length) {\n setFetchedModels(res.models)\n setShowModelDropdown(true)\n showToast(t('providerForm.toastModelsFetched', { count: res.models.length }))\n } else {\n showToast(res.message || t('providerForm.toastNoModels'), 'error')\n }\n } catch (e) {\n showToast(t('providerForm.toastFetchErr') + e.message, 'error')\n }\n setFetchingModels(false)\n }\n\n const handleSave = async () => {\n if (!form.name.trim()) { showToast(t('providerForm.errNoName'), 'error'); return }\n if (!form.model.trim()) { showToast(t('providerForm.errNoModel'), 'error'); return }\n\n let configData\n try { configData = JSON.parse(configText) } catch { showToast(t('providerForm.errBadJson'), 'error'); return }\n\n const data = {\n name: configData.name || form.name.trim(), api_format: form.api_format, base_url: form.base_url.trim(),\n api_key: form.api_key.trim(), models: Array.isArray(configData.models) ? configData.models : [form.model],\n has_reasoning: configData.has_reasoning !== undefined ? configData.has_reasoning : form.has_reasoning,\n note: form.note.trim(), website: form.website.trim(),\n }\n\n try {\n if (isEdit) { await api.updateProvider(provider.id, data); showToast(t('providerForm.toastUpdated')) }\n else { await api.createProvider(data); showToast(t('providerForm.toastAdded')) }\n onBack()\n } catch (e) {\n showToast(t('providerForm.toastSaveErr') + e.message, 'error')\n }\n }\n\n const handleConfigChange = (e) => {\n const val = e.target.value\n setConfigText(val)\n try {\n const parsed = JSON.parse(val)\n setConfigError(null)\n if (parsed.name !== undefined) setForm(prev => ({ ...prev, name: parsed.name }))\n if (parsed.models && Array.isArray(parsed.models) && parsed.models.length > 0) setForm(prev => ({ ...prev, model: parsed.models[0] }))\n if (parsed.has_reasoning !== undefined) setForm(prev => ({ ...prev, has_reasoning: parsed.has_reasoning }))\n } catch { setConfigError(t('providerForm.errInvalidJson')) }\n }\n\n return (\n <div className=\"min-h-screen bg-canvas\">\n {toast && <div className={`fixed top-4 right-4 z-50 px-4 py-2.5 rounded-xl text-sm font-medium shadow-lg animate-fade-in ${toast.type === 'error' ? 'bg-error text-on-primary' : 'bg-surface-dark text-on-dark'}`}>{toast.msg}</div>}\n\n <header className=\"border-b border-hairline bg-canvas/80 backdrop-blur-md sticky top-0 z-40\">\n <div className=\"max-w-2xl mx-auto px-6 h-14 flex items-center gap-4\">\n <button onClick={onBack} className=\"w-8 h-8 flex items-center justify-center rounded-lg text-muted hover:text-ink hover:bg-surface transition-colors cursor-pointer\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M19 12H5m7-7l-7 7 7 7\"/></svg>\n </button>\n <h1 className=\"text-base font-semibold text-ink\">{isEdit ? t('providerForm.editTitle') : t('providerForm.addTitle')}</h1>\n <div className=\"flex-1\" />\n <LanguageSwitcher />\n </div>\n </header>\n\n <main className=\"max-w-2xl mx-auto px-6 py-8\">\n {showPresets && !isEdit && (\n <div className=\"mb-8 animate-fade-in\">\n <h2 className=\"text-sm font-medium text-muted mb-3\">{t('providerForm.presetHint')}</h2>\n <div className=\"grid grid-cols-2 sm:grid-cols-3 gap-2\">\n {PRESETS.map(p => (\n <button key={p.id} onClick={() => applyPreset(p)} className=\"flex items-center gap-2 px-3 py-2.5 bg-surface rounded-xl text-left hover:bg-surface-hover transition-colors cursor-pointer\">\n <div className=\"w-7 h-7 rounded-lg bg-coral-bg text-coral flex items-center justify-center text-[10px] font-bold shrink-0\">{p.name.charAt(0)}</div>\n <span className=\"text-xs font-medium text-ink truncate\">{p.name}</span>\n </button>\n ))}\n <button onClick={() => setShowPresets(false)} className=\"flex items-center gap-2 px-3 py-2.5 border border-dashed border-hairline rounded-xl text-left hover:bg-surface transition-colors cursor-pointer\">\n <div className=\"w-7 h-7 rounded-lg bg-surface flex items-center justify-center text-muted\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n </div>\n <span className=\"text-xs font-medium text-muted\">{t('providerForm.custom')}</span>\n </button>\n </div>\n </div>\n )}\n\n <div className=\"space-y-6\">\n <div className=\"flex items-start gap-4\">\n <div className=\"w-16 h-16 rounded-2xl bg-surface flex items-center justify-center text-xl font-bold text-muted shrink-0 mt-1\">{form.name ? form.name.charAt(0).toUpperCase() : '?'}</div>\n <div className=\"flex-1 grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.name')}</label>\n <input type=\"text\" value={form.name} onChange={e => update('name', e.target.value)} placeholder={t('providerForm.namePlaceholder')} className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\" />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.note')}</label>\n <input type=\"text\" value={form.note} onChange={e => update('note', e.target.value)} placeholder={t('providerForm.notePlaceholder')} className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\" />\n </div>\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.website')}</label>\n <input type=\"url\" value={form.website} onChange={e => update('website', e.target.value)} placeholder=\"https://example.com\" className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\" />\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.apiFormat')}</label>\n <div className=\"flex gap-2\">\n {['openai', 'anthropic'].map(fmt => (\n <button key={fmt} onClick={() => update('api_format', fmt)} className={`px-4 py-2 rounded-xl text-sm font-medium transition-colors cursor-pointer ${form.api_format === fmt ? 'bg-coral text-on-primary' : 'bg-surface text-muted hover:bg-surface-hover'}`}>\n {fmt === 'openai' ? t('providerForm.openaiCompat') : 'Anthropic'}\n </button>\n ))}\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.apiKey')}</label>\n <div className=\"relative\">\n <input type={showKey ? 'text' : 'password'} value={form.api_key} onChange={e => update('api_key', e.target.value)} placeholder=\"sk-...\" className=\"w-full px-3 py-2 pr-10 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors font-mono\" />\n <button type=\"button\" onClick={() => setShowKey(!showKey)} className=\"absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 flex items-center justify-center rounded-lg text-muted hover:text-ink transition-colors cursor-pointer\">\n {showKey ? <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg> : <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24\"/><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/></svg>}\n </button>\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.baseUrl')}</label>\n <input type=\"url\" value={form.base_url} onChange={e => update('base_url', e.target.value)} placeholder=\"https://api.example.com/v1\" className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\" />\n <p className=\"text-xs text-muted mt-1\">{t('providerForm.baseUrlHelp')}</p>\n </div>\n\n <div>\n <div className=\"flex items-center justify-between mb-1.5\">\n <label className=\"text-sm font-medium text-ink\">{t('providerForm.model')}</label>\n <button onClick={handleFetchModels} disabled={fetchingModels || !form.base_url || !form.api_key} className=\"flex items-center gap-1 text-xs text-coral hover:text-coral-active transition-colors disabled:opacity-40 cursor-pointer\">\n {fetchingModels ? <svg className=\"animate-spin\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M12 2v4m0 12v4m-7.07-3.93l2.83-2.83m8.48-8.48l2.83-2.83M2 12h4m12 0h4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83\"/></svg> : <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/></svg>}\n {t('providerForm.fetchModels')}\n </button>\n </div>\n <div className=\"relative\">\n <input type=\"text\" value={form.model} onChange={e => { update('model', e.target.value); setShowModelDropdown(false) }} onFocus={() => { if (fetchedModels.length) setShowModelDropdown(true) }} placeholder=\"deepseek-chat\" className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\" />\n {showModelDropdown && fetchedModels.length > 0 && (\n <div className=\"absolute z-10 w-full mt-1 bg-canvas border border-hairline rounded-xl shadow-lg max-h-48 overflow-y-auto\">\n <button onClick={() => setShowModelDropdown(false)} className=\"absolute top-2 right-2 w-6 h-6 flex items-center justify-center rounded text-muted hover:text-ink cursor-pointer\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>\n </button>\n {fetchedModels.map(m => (\n <button key={m} onClick={() => { update('model', m); setShowModelDropdown(false) }} className={`w-full text-left px-3 py-2 text-sm hover:bg-surface transition-colors cursor-pointer ${form.model === m ? 'bg-coral-bg text-coral font-medium' : 'text-ink'}`}>{m}</button>\n ))}\n </div>\n )}\n </div>\n <p className=\"text-xs text-muted mt-1\">{t('providerForm.modelHelp')}</p>\n </div>\n\n <div className=\"flex items-center gap-3\">\n <button onClick={() => update('has_reasoning', !form.has_reasoning)} className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${form.has_reasoning ? 'bg-coral' : 'bg-hairline'}`}>\n <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow-sm transition-all ${form.has_reasoning ? 'left-5' : 'left-1'}`} />\n </button>\n <span className=\"text-sm font-medium text-ink\">{t('providerForm.reasoning')}</span>\n </div>\n\n <div className=\"bg-surface rounded-xl p-4\">\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-sm font-medium text-ink\">{t('providerForm.testSection')}</span>\n <button onClick={handleTest} disabled={testing || !form.base_url || !form.api_key} className=\"flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-coral text-on-primary rounded-lg hover:bg-coral-active transition-colors disabled:opacity-40 cursor-pointer\">\n {testing ? <>{t('providerForm.testing')}</> : <>{t('providerForm.testBtn')}</>}\n </button>\n </div>\n {testResult && (\n <div className={`px-3 py-2 rounded-lg text-xs ${testResult.status === 'ok' ? 'bg-success-bg text-success' : 'bg-error-bg text-error'}`}>\n <span className=\"font-medium\">{testResult.status === 'ok' ? t('providerForm.testOk') : t('providerForm.testFail')}</span>\n {testResult.latency_ms && <span className=\"ml-2 opacity-70\">{testResult.latency_ms}ms</span>}\n {testResult.message && <span className=\"ml-2\">{testResult.message}</span>}\n </div>\n )}\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.configPreview')}</label>\n <textarea value={configText} onChange={handleConfigChange} spellCheck={false} className=\"w-full bg-surface-dark rounded-xl p-4 text-xs text-on-dark/80 font-mono leading-relaxed overflow-x-auto border border-hairline focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors resize-y min-h-[180px]\" rows={12} />\n {configError && <p className=\"text-xs text-error mt-1\">{configError}</p>}\n </div>\n\n <div className=\"flex justify-end pt-4 pb-8\">\n <button onClick={handleSave} className=\"flex items-center gap-2 px-6 py-2.5 bg-coral text-on-primary rounded-xl text-sm font-medium hover:bg-coral-active transition-colors cursor-pointer\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z\"/><polyline points=\"17 21 17 13 7 13 7 21\"/><polyline points=\"7 3 7 8 15 8\"/></svg>\n {t('providerForm.save')}\n </button>\n </div>\n </div>\n </main>\n </div>\n )\n}\n"}, "68ec8644cd46f2d31bb5e6ea2422216af67142ee": {"t": 1785764163.7334774, "n": 19377, "h": "dde539c81afe7228", "c": "import { useState, useEffect } from 'react'\nimport { api } from '../lib/api'\nimport LanguageSwitcher from '../components/LanguageSwitcher'\nimport { useTranslation } from '../i18n'\n\nconst PRESETS = [\n { id: 'deepseek', name: 'DeepSeek', base_url: 'https://api.deepseek.com', model: 'deepseek-chat', has_reasoning: true },\n { id: 'qwen', name: 'Qwen', base_url: 'https://dashscope.aliyuncs.com/compatible-mode/v1', model: 'qwen-max', has_reasoning: true },\n { id: 'kimi', name: 'Kimi', base_url: 'https://api.moonshot.cn/v1', model: 'moonshot-v1-128k', has_reasoning: false },\n { id: 'glm', name: 'GLM', base_url: 'https://open.bigmodel.cn/api/paas/v4', model: 'glm-4-plus', has_reasoning: false },\n { id: 'mimo', name: 'MiMo', base_url: 'https://api.xiaomimimo.com/v1', model: 'mimo-v2.5-pro', has_reasoning: true },\n { id: 'minimax', name: 'MiniMax', base_url: 'https://api.minimax.chat/v1', model: 'MiniMax-Text-01', has_reasoning: false },\n { id: 'baichuan', name: 'Baichuan', base_url: 'https://api.baichuan-ai.com/v1', model: 'Baichuan4', has_reasoning: false },\n { id: 'yi', name: 'Yi', base_url: 'https://api.lingyiwanwu.com/v1', model: 'yi-lightning', has_reasoning: false },\n { id: 'doubao', name: 'Doubao', base_url: 'https://ark.cn-beijing.volces.com/api/v3', model: 'doubao-1.5-pro-256k', has_reasoning: true },\n { id: 'stepfun', name: 'StepFun', base_url: 'https://api.stepfun.com/v1', model: 'step-2-16k', has_reasoning: false },\n { id: 'siliconflow', name: 'SiliconFlow', base_url: 'https://api.siliconflow.cn/v1', model: 'deepseek-ai/DeepSeek-V3', has_reasoning: true },\n { id: 'anthropic', name: 'Anthropic', base_url: 'https://api.anthropic.com', model: 'claude-sonnet-4-20250514', has_reasoning: true, api_format: 'anthropic' },\n]\n\nexport default function ProviderForm({ provider, onBack }) {\n const { t } = useTranslation()\n const isEdit = !!provider?.id\n\n const [form, setForm] = useState({\n name: '', api_format: 'openai', base_url: '', api_key: '', model: '', has_reasoning: false, note: '', website: '',\n })\n const [testing, setTesting] = useState(false)\n const [testResult, setTestResult] = useState(null)\n const [showKey, setShowKey] = useState(false)\n const [fetchingModels, setFetchingModels] = useState(false)\n const [fetchedModels, setFetchedModels] = useState([])\n const [showModelDropdown, setShowModelDropdown] = useState(false)\n const [toast, setToast] = useState(null)\n const [showPresets, setShowPresets] = useState(!isEdit)\n const [configText, setConfigText] = useState('')\n const [configError, setConfigError] = useState(null)\n\n useEffect(() => {\n if (provider?.id) {\n const models = provider.models || []\n setForm({\n name: provider.name || '', api_format: provider.api_format || 'openai', base_url: provider.base_url || '',\n api_key: provider.api_key || '', model: models[0] || '', has_reasoning: provider.has_reasoning || false,\n note: provider.note || '', website: provider.website || '',\n })\n }\n }, [provider])\n\n useEffect(() => {\n const preview = {\n name: form.name || 'provider', api_format: form.api_format, base_url: form.base_url,\n api_key: form.api_key ? 'sk-***' : '', models: form.model ? [form.model] : [], has_reasoning: form.has_reasoning,\n }\n setConfigText(JSON.stringify(preview, null, 2))\n setConfigError(null)\n }, [form.name, form.api_format, form.base_url, form.api_key, form.model, form.has_reasoning])\n\n const showToast = (msg, type = 'success') => {\n setToast({ msg, type })\n setTimeout(() => setToast(null), 2500)\n }\n\n const update = (key, val) => setForm(prev => ({ ...prev, [key]: val }))\n\n const applyPreset = (preset) => {\n setForm(prev => ({ ...prev, name: preset.name, base_url: preset.base_url, model: preset.model, has_reasoning: preset.has_reasoning, api_format: preset.api_format || 'openai' }))\n setShowPresets(false)\n }\n\n const handleTest = async () => {\n setTesting(true)\n setTestResult(null)\n try {\n const res = await api.testConnection({ base_url: form.base_url, api_key: form.api_key, api_format: form.api_format, model: form.model || '' })\n setTestResult(res)\n } catch (e) {\n setTestResult({ status: 'error', message: e.message })\n }\n setTesting(false)\n }\n\n const handleFetchModels = async () => {\n setFetchingModels(true)\n try {\n const res = await api.fetchModels({ base_url: form.base_url, api_key: form.api_key, api_format: form.api_format })\n if (res.status === 'ok' && res.models?.length) {\n setFetchedModels(res.models)\n setShowModelDropdown(true)\n showToast(t('providerForm.toastModelsFetched', { count: res.models.length }))\n } else {\n showToast(res.message || t('providerForm.toastNoModels'), 'error')\n }\n } catch (e) {\n showToast(t('providerForm.toastFetchErr') + e.message, 'error')\n }\n setFetchingModels(false)\n }\n\n const handleSave = async () => {\n if (!form.name.trim()) { showToast(t('providerForm.errNoName'), 'error'); return }\n if (!form.model.trim()) { showToast(t('providerForm.errNoModel'), 'error'); return }\n\n let configData\n try { configData = JSON.parse(configText) } catch { showToast(t('providerForm.errBadJson'), 'error'); return }\n\n const data = {\n name: configData.name || form.name.trim(), api_format: form.api_format, base_url: form.base_url.trim(),\n api_key: form.api_key.trim(), models: Array.isArray(configData.models) ? configData.models : [form.model],\n has_reasoning: configData.has_reasoning !== undefined ? configData.has_reasoning : form.has_reasoning,\n note: form.note.trim(), website: form.website.trim(),\n }\n\n try {\n if (isEdit) { await api.updateProvider(provider.id, data); showToast(t('providerForm.toastUpdated')) }\n else { await api.createProvider(data); showToast(t('providerForm.toastAdded')) }\n onBack()\n } catch (e) {\n showToast(t('providerForm.toastSaveErr') + e.message, 'error')\n }\n }\n\n const handleConfigChange = (e) => {\n const val = e.target.value\n setConfigText(val)\n try {\n const parsed = JSON.parse(val)\n setConfigError(null)\n if (parsed.name !== undefined) setForm(prev => ({ ...prev, name: parsed.name }))\n if (parsed.models && Array.isArray(parsed.models) && parsed.models.length > 0) setForm(prev => ({ ...prev, model: parsed.models[0] }))\n if (parsed.has_reasoning !== undefined) setForm(prev => ({ ...prev, has_reasoning: parsed.has_reasoning }))\n } catch { setConfigError(t('providerForm.errInvalidJson')) }\n }\n\n return (\n <div className=\"min-h-screen bg-canvas\">\n {toast && <div className={`fixed top-4 right-4 z-50 px-4 py-2.5 rounded-xl text-sm font-medium shadow-lg animate-fade-in ${toast.type === 'error' ? 'bg-error text-on-primary' : 'bg-surface-dark text-on-dark'}`}>{toast.msg}</div>}\n\n <header className=\"border-b border-hairline bg-canvas/80 backdrop-blur-md sticky top-0 z-40\">\n <div className=\"max-w-2xl mx-auto px-6 h-14 flex items-center gap-4\">\n <button onClick={onBack} className=\"w-8 h-8 flex items-center justify-center rounded-lg text-muted hover:text-ink hover:bg-surface transition-colors cursor-pointer\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M19 12H5m7-7l-7 7 7 7\"/></svg>\n </button>\n <h1 className=\"text-base font-semibold text-ink\">{isEdit ? t('providerForm.editTitle') : t('providerForm.addTitle')}</h1>\n <div className=\"flex-1\" />\n <LanguageSwitcher />\n </div>\n </header>\n\n <main className=\"max-w-2xl mx-auto px-6 py-8\">\n {showPresets && !isEdit && (\n <div className=\"mb-8 animate-fade-in\">\n <h2 className=\"text-sm font-medium text-muted mb-3\">{t('providerForm.presetHint')}</h2>\n <div className=\"grid grid-cols-2 sm:grid-cols-3 gap-2\">\n {PRESETS.map(p => (\n <button key={p.id} onClick={() => applyPreset(p)} className=\"flex items-center gap-2 px-3 py-2.5 bg-surface rounded-xl text-left hover:bg-surface-hover transition-colors cursor-pointer\">\n <div className=\"w-7 h-7 rounded-lg bg-coral-bg text-coral flex items-center justify-center text-[10px] font-bold shrink-0\">{p.name.charAt(0)}</div>\n <span className=\"text-xs font-medium text-ink truncate\">{p.name}</span>\n </button>\n ))}\n <button onClick={() => setShowPresets(false)} className=\"flex items-center gap-2 px-3 py-2.5 border border-dashed border-hairline rounded-xl text-left hover:bg-surface transition-colors cursor-pointer\">\n <div className=\"w-7 h-7 rounded-lg bg-surface flex items-center justify-center text-muted\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n </div>\n <span className=\"text-xs font-medium text-muted\">{t('providerForm.custom')}</span>\n </button>\n </div>\n </div>\n )}\n\n <div className=\"space-y-6\">\n <div className=\"flex items-start gap-4\">\n <div className=\"w-16 h-16 rounded-2xl bg-surface flex items-center justify-center text-xl font-bold text-muted shrink-0 mt-1\">{form.name ? form.name.charAt(0).toUpperCase() : '?'}</div>\n <div className=\"flex-1 grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.name')}</label>\n <input type=\"text\" value={form.name} onChange={e => update('name', e.target.value)} placeholder={t('providerForm.namePlaceholder')} className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\" />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.note')}</label>\n <input type=\"text\" value={form.note} onChange={e => update('note', e.target.value)} placeholder={t('providerForm.notePlaceholder')} className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\" />\n </div>\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.website')}</label>\n <input type=\"url\" value={form.website} onChange={e => update('website', e.target.value)} placeholder=\"https://example.com\" className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\" />\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.apiFormat')}</label>\n <div className=\"flex gap-2\">\n {['openai', 'anthropic'].map(fmt => (\n <button key={fmt} onClick={() => update('api_format', fmt)} className={`px-4 py-2 rounded-xl text-sm font-medium transition-colors cursor-pointer ${form.api_format === fmt ? 'bg-coral text-on-primary' : 'bg-surface text-muted hover:bg-surface-hover'}`}>\n {fmt === 'openai' ? t('providerForm.openaiCompat') : 'Anthropic'}\n </button>\n ))}\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.apiKey')}</label>\n <div className=\"relative\">\n <input type={showKey ? 'text' : 'password'} value={form.api_key} onChange={e => update('api_key', e.target.value)} placeholder=\"sk-...\" className=\"w-full px-3 py-2 pr-10 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors font-mono\" />\n <button type=\"button\" onClick={() => setShowKey(!showKey)} className=\"absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 flex items-center justify-center rounded-lg text-muted hover:text-ink transition-colors cursor-pointer\">\n {showKey ? <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg> : <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24\"/><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/></svg>}\n </button>\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.baseUrl')}</label>\n <input type=\"url\" value={form.base_url} onChange={e => update('base_url', e.target.value)} placeholder=\"https://api.example.com/v1\" className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\" />\n <p className=\"text-xs text-muted mt-1\">{t('providerForm.baseUrlHelp')}</p>\n </div>\n\n <div>\n <div className=\"flex items-center justify-between mb-1.5\">\n <label className=\"text-sm font-medium text-ink\">{t('providerForm.model')}</label>\n <button onClick={handleFetchModels} disabled={fetchingModels || !form.base_url || !form.api_key} className=\"flex items-center gap-1 text-xs text-coral hover:text-coral-active transition-colors disabled:opacity-40 cursor-pointer\">\n {fetchingModels ? <svg className=\"animate-spin\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M12 2v4m0 12v4m-7.07-3.93l2.83-2.83m8.48-8.48l2.83-2.83M2 12h4m12 0h4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83\"/></svg> : <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/></svg>}\n {t('providerForm.fetchModels')}\n </button>\n </div>\n <div className=\"relative\">\n <input type=\"text\" value={form.model} onChange={e => { update('model', e.target.value); setShowModelDropdown(false) }} onFocus={() => { if (fetchedModels.length) setShowModelDropdown(true) }} placeholder=\"deepseek-chat\" className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\" />\n {showModelDropdown && fetchedModels.length > 0 && (\n <div className=\"absolute z-10 w-full mt-1 bg-canvas border border-hairline rounded-xl shadow-lg max-h-48 overflow-y-auto\">\n <button onClick={() => setShowModelDropdown(false)} className=\"absolute top-2 right-2 w-6 h-6 flex items-center justify-center rounded text-muted hover:text-ink cursor-pointer\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>\n </button>\n {fetchedModels.map(m => (\n <button key={m} onClick={() => { update('model', m); setShowModelDropdown(false) }} className={`w-full text-left px-3 py-2 text-sm hover:bg-surface transition-colors cursor-pointer ${form.model === m ? 'bg-coral-bg text-coral font-medium' : 'text-ink'}`}>{m}</button>\n ))}\n </div>\n )}\n </div>\n <p className=\"text-xs text-muted mt-1\">{t('providerForm.modelHelp')}</p>\n </div>\n\n <div className=\"flex items-center gap-3\">\n <button onClick={() => update('has_reasoning', !form.has_reasoning)} className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${form.has_reasoning ? 'bg-coral' : 'bg-hairline'}`}>\n <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow-sm transition-all ${form.has_reasoning ? 'left-5' : 'left-1'}`} />\n </button>\n <span className=\"text-sm font-medium text-ink\">{t('providerForm.reasoning')}</span>\n </div>\n\n <div className=\"bg-surface rounded-xl p-4\">\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-sm font-medium text-ink\">{t('providerForm.testSection')}</span>\n <button onClick={handleTest} disabled={testing || !form.base_url || !form.api_key} className=\"flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-coral text-on-primary rounded-lg hover:bg-coral-active transition-colors disabled:opacity-40 cursor-pointer\">\n {testing ? <>{t('providerForm.testing')}</> : <>{t('providerForm.testBtn')}</>}\n </button>\n </div>\n {testResult && (\n <div className={`px-3 py-2 rounded-lg text-xs ${testResult.status === 'ok' ? 'bg-success-bg text-success' : 'bg-error-bg text-error'}`}>\n <span className=\"font-medium\">{testResult.status === 'ok' ? t('providerForm.testOk') : t('providerForm.testFail')}</span>\n {testResult.latency_ms && <span className=\"ml-2 opacity-70\">{testResult.latency_ms}ms</span>}\n {testResult.message && <span className=\"ml-2\">{testResult.message}</span>}\n </div>\n )}\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">{t('providerForm.configPreview')}</label>\n <textarea value={configText} onChange={handleConfigChange} spellCheck={false} className=\"w-full bg-surface-dark rounded-xl p-4 text-xs text-on-dark/80 font-mono leading-relaxed overflow-x-auto border border-hairline focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors resize-y min-h-[180px]\" rows={12} />\n {configError && <p className=\"text-xs text-error mt-1\">{configError}</p>}\n </div>\n\n <div className=\"flex justify-end pt-4 pb-8\">\n <button onClick={handleSave} className=\"flex items-center gap-2 px-6 py-2.5 bg-coral text-on-primary rounded-xl text-sm font-medium hover:bg-coral-active transition-colors cursor-pointer\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z\"/><polyline points=\"17 21 17 13 7 13 7 21\"/><polyline points=\"7 3 7 8 15 8\"/></svg>\n {t('providerForm.save')}\n </button>\n </div>\n </div>\n </main>\n </div>\n )\n}\n"}, "d2030da84f65ed15a1e87915e48ab3ecb9e36a85": {"t": 1785764165.2528746, "n": 22237, "h": "b1581063c9a94678", "c": "import { useState, useEffect } from 'react'\nimport { api } from '../lib/api'\n\nconst PRESETS = [\n { id: 'deepseek', name: 'DeepSeek', base_url: 'https://api.deepseek.com', model: 'deepseek-chat', has_reasoning: true },\n { id: 'qwen', name: 'Qwen (通义千问)', base_url: 'https://dashscope.aliyuncs.com/compatible-mode/v1', model: 'qwen-max', has_reasoning: true },\n { id: 'kimi', name: 'Kimi (月之暗面)', base_url: 'https://api.moonshot.cn/v1', model: 'moonshot-v1-128k', has_reasoning: false },\n { id: 'glm', name: 'GLM (智谱)', base_url: 'https://open.bigmodel.cn/api/paas/v4', model: 'glm-4-plus', has_reasoning: false },\n { id: 'mimo', name: 'MiMo (小米)', base_url: 'https://api.xiaomimimo.com/v1', model: 'mimo-v2.5-pro', has_reasoning: true },\n { id: 'minimax', name: 'MiniMax', base_url: 'https://api.minimax.chat/v1', model: 'MiniMax-Text-01', has_reasoning: false },\n { id: 'baichuan', name: 'Baichuan (百川)', base_url: 'https://api.baichuan-ai.com/v1', model: 'Baichuan4', has_reasoning: false },\n { id: 'yi', name: 'Yi (零一万物)', base_url: 'https://api.lingyiwanwu.com/v1', model: 'yi-lightning', has_reasoning: false },\n { id: 'doubao', name: 'Doubao (豆包)', base_url: 'https://ark.cn-beijing.volces.com/api/v3', model: 'doubao-1.5-pro-256k', has_reasoning: true },\n { id: 'stepfun', name: 'StepFun (阶跃星辰)', base_url: 'https://api.stepfun.com/v1', model: 'step-2-16k', has_reasoning: false },\n { id: 'siliconflow', name: 'SiliconFlow (硅基流动)', base_url: 'https://api.siliconflow.cn/v1', model: 'deepseek-ai/DeepSeek-V3', has_reasoning: true },\n { id: 'anthropic', name: 'Anthropic (Claude)', base_url: 'https://api.anthropic.com', model: 'claude-sonnet-4-20250514', has_reasoning: true, api_format: 'anthropic' },\n]\n\nexport default function ProviderForm({ provider, onBack }) {\n const isEdit = !!provider?.id\n\n const [form, setForm] = useState({\n name: '',\n api_format: 'openai',\n base_url: '',\n api_key: '',\n model: '',\n has_reasoning: false,\n note: '',\n website: '',\n })\n\n const [testing, setTesting] = useState(false)\n const [testResult, setTestResult] = useState(null)\n const [showKey, setShowKey] = useState(false)\n const [fetchingModels, setFetchingModels] = useState(false)\n const [fetchedModels, setFetchedModels] = useState([])\n const [showModelDropdown, setShowModelDropdown] = useState(false)\n const [toast, setToast] = useState(null)\n const [showPresets, setShowPresets] = useState(!isEdit)\n\n // Config preview - editable\n const [configText, setConfigText] = useState('')\n const [configError, setConfigError] = useState(null)\n\n useEffect(() => {\n if (provider?.id) {\n const models = provider.models || []\n setForm({\n name: provider.name || '',\n api_format: provider.api_format || 'openai',\n base_url: provider.base_url || '',\n api_key: provider.api_key || '',\n model: models[0] || '',\n has_reasoning: provider.has_reasoning || false,\n note: provider.note || '',\n website: provider.website || '',\n })\n }\n }, [provider])\n\n // Keep config preview in sync\n useEffect(() => {\n const preview = {\n name: form.name || 'provider',\n api_format: form.api_format,\n base_url: form.base_url,\n api_key: form.api_key ? 'sk-***' : '',\n models: form.model ? [form.model] : [],\n has_reasoning: form.has_reasoning,\n }\n setConfigText(JSON.stringify(preview, null, 2))\n setConfigError(null)\n }, [form.name, form.api_format, form.base_url, form.api_key, form.model, form.has_reasoning])\n\n const showToast = (msg, type = 'success') => {\n setToast({ msg, type })\n setTimeout(() => setToast(null), 2500)\n }\n\n const update = (key, val) => setForm(prev => ({ ...prev, [key]: val }))\n\n const applyPreset = (preset) => {\n setForm(prev => ({\n ...prev,\n name: preset.name,\n base_url: preset.base_url,\n model: preset.model,\n has_reasoning: preset.has_reasoning,\n api_format: preset.api_format || 'openai',\n }))\n setShowPresets(false)\n }\n\n const handleTest = async () => {\n setTesting(true)\n setTestResult(null)\n try {\n const res = await api.testConnection({\n base_url: form.base_url,\n api_key: form.api_key,\n api_format: form.api_format,\n model: form.model || '',\n })\n setTestResult(res)\n } catch (e) {\n setTestResult({ status: 'error', message: e.message })\n }\n setTesting(false)\n }\n\n const handleFetchModels = async () => {\n setFetchingModels(true)\n try {\n const res = await api.fetchModels({\n base_url: form.base_url,\n api_key: form.api_key,\n api_format: form.api_format,\n })\n if (res.status === 'ok' && res.models?.length) {\n setFetchedModels(res.models)\n setShowModelDropdown(true)\n showToast(`获取到 ${res.models.length} 个模型`)\n } else {\n showToast(res.message || '未获取到模型', 'error')\n }\n } catch (e) {\n showToast('获取失败: ' + e.message, 'error')\n }\n setFetchingModels(false)\n }\n\n const handleSave = async () => {\n if (!form.name.trim()) {\n showToast('请输入供应商名称', 'error')\n return\n }\n if (!form.model.trim()) {\n showToast('请输入模型名称', 'error')\n return\n }\n\n // Parse config from the editable preview\n let configData\n try {\n configData = JSON.parse(configText)\n } catch {\n showToast('配置 JSON 格式错误，请检查', 'error')\n return\n }\n\n const data = {\n name: configData.name || form.name.trim(),\n api_format: form.api_format,\n base_url: form.base_url.trim(),\n api_key: form.api_key.trim(),\n models: Array.isArray(configData.models) ? configData.models : [form.model],\n has_reasoning: configData.has_reasoning !== undefined ? configData.has_reasoning : form.has_reasoning,\n note: form.note.trim(),\n website: form.website.trim(),\n }\n\n try {\n if (isEdit) {\n await api.updateProvider(provider.id, data)\n showToast('已更新')\n } else {\n await api.createProvider(data)\n showToast('已添加')\n }\n onBack()\n } catch (e) {\n showToast('保存失败: ' + e.message, 'error')\n }\n }\n\n const handleConfigChange = (e) => {\n const val = e.target.value\n setConfigText(val)\n try {\n const parsed = JSON.parse(val)\n setConfigError(null)\n // Sync form fields from edited config\n if (parsed.name !== undefined) setForm(prev => ({ ...prev, name: parsed.name }))\n if (parsed.models && Array.isArray(parsed.models) && parsed.models.length > 0) {\n setForm(prev => ({ ...prev, model: parsed.models[0] }))\n }\n if (parsed.has_reasoning !== undefined) setForm(prev => ({ ...prev, has_reasoning: parsed.has_reasoning }))\n } catch {\n setConfigError('JSON 格式无效')\n }\n }\n\n return (\n <div className=\"min-h-screen bg-canvas\">\n {toast && (\n <div className={`fixed top-4 right-4 z-50 px-4 py-2.5 rounded-xl text-sm font-medium shadow-lg animate-fade-in ${\n toast.type === 'error' ? 'bg-error text-on-primary' : 'bg-surface-dark text-on-dark'\n }`}>\n {toast.msg}\n </div>\n )}\n\n {/* Header */}\n <header className=\"border-b border-hairline bg-canvas/80 backdrop-blur-md sticky top-0 z-40\">\n <div className=\"max-w-2xl mx-auto px-6 h-14 flex items-center gap-4\">\n <button\n onClick={onBack}\n className=\"w-8 h-8 flex items-center justify-center rounded-lg text-muted hover:text-ink hover:bg-surface transition-colors cursor-pointer\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M19 12H5m7-7l-7 7 7 7\"/></svg>\n </button>\n <h1 className=\"text-base font-semibold text-ink\">{isEdit ? '编辑供应商' : '添加供应商'}</h1>\n </div>\n </header>\n\n <main className=\"max-w-2xl mx-auto px-6 py-8\">\n {/* Preset Selector (only for new) */}\n {showPresets && !isEdit && (\n <div className=\"mb-8 animate-fade-in\">\n <h2 className=\"text-sm font-medium text-muted mb-3\">选择预设模板快速添加</h2>\n <div className=\"grid grid-cols-2 sm:grid-cols-3 gap-2\">\n {PRESETS.map(p => (\n <button\n key={p.id}\n onClick={() => applyPreset(p)}\n className=\"flex items-center gap-2 px-3 py-2.5 bg-surface rounded-xl text-left hover:bg-surface-hover transition-colors cursor-pointer\"\n >\n <div className=\"w-7 h-7 rounded-lg bg-coral-bg text-coral flex items-center justify-center text-[10px] font-bold shrink-0\">\n {p.name.charAt(0)}\n </div>\n <span className=\"text-xs font-medium text-ink truncate\">{p.name}</span>\n </button>\n ))}\n <button\n onClick={() => setShowPresets(false)}\n className=\"flex items-center gap-2 px-3 py-2.5 border border-dashed border-hairline rounded-xl text-left hover:bg-surface transition-colors cursor-pointer\"\n >\n <div className=\"w-7 h-7 rounded-lg bg-surface flex items-center justify-center text-muted\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n </div>\n <span className=\"text-xs font-medium text-muted\">自定义</span>\n </button>\n </div>\n </div>\n )}\n\n <div className=\"space-y-6\">\n {/* Avatar + Name */}\n <div className=\"flex items-start gap-4\">\n <div className=\"w-16 h-16 rounded-2xl bg-surface flex items-center justify-center text-xl font-bold text-muted shrink-0 mt-1\">\n {form.name ? form.name.charAt(0).toUpperCase() : '?'}\n </div>\n <div className=\"flex-1 grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">供应商名称 *</label>\n <input\n type=\"text\"\n value={form.name}\n onChange={e => update('name', e.target.value)}\n placeholder=\"例如: DeepSeek\"\n className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\"\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">备注</label>\n <input\n type=\"text\"\n value={form.note}\n onChange={e => update('note', e.target.value)}\n placeholder=\"例如: 公司专用账号\"\n className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\"\n />\n </div>\n </div>\n </div>\n\n {/* Website */}\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">官网链接</label>\n <input\n type=\"url\"\n value={form.website}\n onChange={e => update('website', e.target.value)}\n placeholder=\"https://example.com\"\n className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\"\n />\n </div>\n\n {/* API Format */}\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">API 格式</label>\n <div className=\"flex gap-2\">\n {['openai', 'anthropic'].map(fmt => (\n <button\n key={fmt}\n onClick={() => update('api_format', fmt)}\n className={`px-4 py-2 rounded-xl text-sm font-medium transition-colors cursor-pointer ${\n form.api_format === fmt\n ? 'bg-coral text-on-primary'\n : 'bg-surface text-muted hover:bg-surface-hover'\n }`}\n >\n {fmt === 'openai' ? 'OpenAI 兼容' : 'Anthropic'}\n </button>\n ))}\n </div>\n </div>\n\n {/* API Key */}\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">API Key</label>\n <div className=\"relative\">\n <input\n type={showKey ? 'text' : 'password'}\n value={form.api_key}\n onChange={e => update('api_key', e.target.value)}\n placeholder=\"sk-...\"\n className=\"w-full px-3 py-2 pr-10 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors font-mono\"\n />\n <button\n type=\"button\"\n onClick={() => setShowKey(!showKey)}\n className=\"absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 flex items-center justify-center rounded-lg text-muted hover:text-ink transition-colors cursor-pointer\"\n >\n {showKey ? (\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\n ) : (\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24\"/><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/></svg>\n )}\n </button>\n </div>\n </div>\n\n {/* API Base URL */}\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">API 请求地址</label>\n <input\n type=\"url\"\n value={form.base_url}\n onChange={e => update('base_url', e.target.value)}\n placeholder=\"https://api.example.com/v1\"\n className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\"\n />\n <p className=\"text-xs text-muted mt-1\">请填写完整请求 URL，代理会自动拼接 /chat/completions 路径</p>\n </div>\n\n {/* Model Name - Single input */}\n <div>\n <div className=\"flex items-center justify-between mb-1.5\">\n <label className=\"text-sm font-medium text-ink\">模型名称 *</label>\n <button\n onClick={handleFetchModels}\n disabled={fetchingModels || !form.base_url || !form.api_key}\n className=\"flex items-center gap-1 text-xs text-coral hover:text-coral-active transition-colors disabled:opacity-40 cursor-pointer\"\n >\n {fetchingModels ? (\n <svg className=\"animate-spin\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M12 2v4m0 12v4m-7.07-3.93l2.83-2.83m8.48-8.48l2.83-2.83M2 12h4m12 0h4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83\"/></svg>\n ) : (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/></svg>\n )}\n 获取模型列表\n </button>\n </div>\n <div className=\"relative\">\n <input\n type=\"text\"\n value={form.model}\n onChange={e => {\n update('model', e.target.value)\n setShowModelDropdown(false)\n }}\n onFocus={() => { if (fetchedModels.length) setShowModelDropdown(true) }}\n placeholder=\"例如: deepseek-chat\"\n className=\"w-full px-3 py-2 bg-canvas border border-hairline rounded-xl text-sm text-ink placeholder:text-muted/50 focus:outline-none focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors\"\n />\n {showModelDropdown && fetchedModels.length > 0 && (\n <div className=\"absolute z-10 w-full mt-1 bg-canvas border border-hairline rounded-xl shadow-lg max-h-48 overflow-y-auto\">\n <button\n onClick={() => { setShowModelDropdown(false) }}\n className=\"absolute top-2 right-2 w-6 h-6 flex items-center justify-center rounded text-muted hover:text-ink cursor-pointer\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>\n </button>\n {fetchedModels.map(m => (\n <button\n key={m}\n onClick={() => {\n update('model', m)\n setShowModelDropdown(false)\n }}\n className={`w-full text-left px-3 py-2 text-sm hover:bg-surface transition-colors cursor-pointer ${\n form.model === m ? 'bg-coral-bg text-coral font-medium' : 'text-ink'\n }`}\n >\n {m}\n </button>\n ))}\n </div>\n )}\n </div>\n <p className=\"text-xs text-muted mt-1\">填写一个模型名称，代理会转发给对应 API</p>\n </div>\n\n {/* Reasoning Toggle */}\n <div className=\"flex items-center gap-3\">\n <button\n onClick={() => update('has_reasoning', !form.has_reasoning)}\n className={`relative w-10 h-6 rounded-full transition-colors cursor-pointer ${\n form.has_reasoning ? 'bg-coral' : 'bg-hairline'\n }`}\n >\n <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow-sm transition-all ${\n form.has_reasoning ? 'left-5' : 'left-1'\n }`} />\n </button>\n <div>\n <span className=\"text-sm font-medium text-ink\">支持推理内容</span>\n <span className=\"text-xs text-muted ml-2\">（reasoning_content / thinking 字段）</span>\n </div>\n </div>\n\n {/* Test Connection */}\n <div className=\"bg-surface rounded-xl p-4\">\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-sm font-medium text-ink\">测试连接</span>\n <button\n onClick={handleTest}\n disabled={testing || !form.base_url || !form.api_key}\n className=\"flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-coral text-on-primary rounded-lg hover:bg-coral-active transition-colors disabled:opacity-40 cursor-pointer\"\n >\n {testing ? (\n <>\n <svg className=\"animate-spin\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M12 2v4m0 12v4m-7.07-3.93l2.83-2.83m8.48-8.48l2.83-2.83M2 12h4m12 0h4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83\"/></svg>\n 测试中...\n </>\n ) : (\n <>\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M13 10V3L4 14h7v7l9-11h-7z\"/></svg>\n 发送测试请求\n </>\n )}\n </button>\n </div>\n {testResult && (\n <div className={`px-3 py-2 rounded-lg text-xs ${\n testResult.status === 'ok'\n ? 'bg-success-bg text-success'\n : 'bg-error-bg text-error'\n }`}>\n <span className=\"font-medium\">\n {testResult.status === 'ok' ? '连接成功' : '连接失败'}\n </span>\n {testResult.latency_ms && <span className=\"ml-2 opacity-70\">{testResult.latency_ms}ms</span>}\n {testResult.message && <span className=\"ml-2\">{testResult.message}</span>}\n </div>\n )}\n </div>\n\n {/* Config Preview - Editable */}\n <div>\n <label className=\"block text-sm font-medium text-ink mb-1.5\">配置预览</label>\n <textarea\n value={configText}\n onChange={handleConfigChange}\n spellCheck={false}\n className=\"w-full bg-surface-dark rounded-xl p-4 text-xs text-on-dark/80 font-mono leading-relaxed overflow-x-auto border border-hairline focus:border-coral/50 focus:ring-1 focus:ring-coral/20 transition-colors resize-y min-h-[180px]\"\n rows={12}\n />\n {configError && (\n <p className=\"text-xs text-error mt-1\">{configError}</p>\n )}\n </div>\n\n {/* Save Button */}\n <div className=\"flex justify-end pt-4 pb-8\">\n <button\n onClick={handleSave}\n className=\"flex items-center gap-2 px-6 py-2.5 bg-coral text-on-primary rounded-xl text-sm font-medium hover:bg-coral-active transition-colors cursor-pointer\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z\"/><polyline points=\"17 21 17 13 7 13 7 21\"/><polyline points=\"7 3 7 8 15 8\"/></svg>\n 保存\n </button>\n </div>\n </div>\n </main>\n </div>\n )\n}\n"}}}} |