446 lines
13 KiB
TypeScript
446 lines
13 KiB
TypeScript
import React, { useEffect, useState, useCallback, useRef } from 'react';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
import { useApiMutation } from '../../hooks/useApiMutation';
|
||
import { validateResponse } from '../../utils/validate';
|
||
import { aiConfigEnvelopeSchema } from '../../api/schemas';
|
||
import { App, Alert, Button, Form, Space, Spin, Steps, Tag } from 'antd';
|
||
import api from '../../api';
|
||
import { message } from '../../ui/app-message';
|
||
import { usePermission } from '../../hooks/usePermission';
|
||
import type { AiProvider } from './helpers';
|
||
import {
|
||
PROVIDER_DEFAULTS,
|
||
FIXED_PROVIDERS,
|
||
sourceLabel,
|
||
sourceColor,
|
||
shouldAutoSwapBaseUrl,
|
||
} from './helpers';
|
||
import { getErrorMessage } from '../../utils/error';
|
||
import {
|
||
ProviderStep,
|
||
KeyStep,
|
||
ModelStep,
|
||
SaveTestStep,
|
||
} from './AiConfigSteps';
|
||
import type { AiConfigData, FormValues, TestResult } from './AiConfigSteps';
|
||
import styles from './index.module.css';
|
||
|
||
interface ApiResponse<T> {
|
||
success: boolean;
|
||
data: T;
|
||
message?: string;
|
||
}
|
||
|
||
interface FetchModelsResult {
|
||
success: boolean;
|
||
models: Array<{ id: string }>;
|
||
message?: string;
|
||
}
|
||
|
||
const DEFAULT_FORM_VALUES: FormValues = {
|
||
provider: 'DEEPSEEK',
|
||
baseUrl: PROVIDER_DEFAULTS['DEEPSEEK'],
|
||
apiKey: '',
|
||
defaultModel: '',
|
||
timeoutMs: 30000,
|
||
supportsVision: false,
|
||
reasoningEffort: '',
|
||
};
|
||
|
||
const STEP_ITEMS = [
|
||
{ title: '服务商', description: '选择 AI 服务商' },
|
||
{ title: '密钥', description: '配置 API 密钥' },
|
||
{ title: '模型', description: '获取并选择模型' },
|
||
{ title: '完成', description: '保存并测试连接' },
|
||
];
|
||
|
||
const AiConfigPage: React.FC = () => {
|
||
const { hasPermission } = usePermission();
|
||
const { modal } = App.useApp();
|
||
const [form] = Form.useForm();
|
||
|
||
const [currentStep, setCurrentStep] = useState(0);
|
||
const [saving, setSaving] = useState(false);
|
||
const [testing, setTesting] = useState(false);
|
||
const [fetchingModels, setFetchingModels] = useState(false);
|
||
const [testResult, setTestResult] = useState<TestResult | null>(null);
|
||
const [modelOptions, setModelOptions] = useState<Array<{ value: string; label: string }>>([]);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
// Central form state — survives Step transitions when Form.Items unmount
|
||
const [formValues, setFormValues] = useState<FormValues>(DEFAULT_FORM_VALUES);
|
||
|
||
const lastProviderRef = useRef<AiProvider | null>(null);
|
||
const skipNextSyncRef = useRef(false);
|
||
const appliedConfigRef = useRef<AiConfigData | null>(null);
|
||
|
||
const {
|
||
data: config,
|
||
isLoading: configLoading,
|
||
isFetching: configFetching,
|
||
refetch: refetchConfig,
|
||
} = useQuery<AiConfigData | null>({
|
||
queryKey: ['ai', 'config'],
|
||
queryFn: async () => {
|
||
try {
|
||
const res = await api.get<ApiResponse<AiConfigData>>('/ai/config');
|
||
return validateResponse<ApiResponse<AiConfigData>>(aiConfigEnvelopeSchema, res).data;
|
||
} catch (err: unknown) {
|
||
setError(getErrorMessage(err, '加载配置失败'));
|
||
return null;
|
||
}
|
||
},
|
||
});
|
||
const loading = configLoading || configFetching;
|
||
const refreshConfig = useCallback(() => {
|
||
skipNextSyncRef.current = true;
|
||
return refetchConfig();
|
||
}, [refetchConfig]);
|
||
const saveMutation = useApiMutation(
|
||
async (body: Record<string, unknown>) => api.put('/ai/config', body),
|
||
{ invalidate: [['ai', 'config']] },
|
||
);
|
||
const clearKeyMutation = useApiMutation(
|
||
async () => api.post('/ai/config/clear-key'),
|
||
{ invalidate: [['ai', 'config']] },
|
||
);
|
||
|
||
const canWrite = hasPermission('ai:config:write');
|
||
const canTest = hasPermission('ai:config:test');
|
||
const canRead = hasPermission('ai:config:read');
|
||
|
||
// ── Sync form → state ──
|
||
|
||
const handleFormChange = useCallback(
|
||
(_changed: Partial<FormValues>, all: Partial<FormValues>) => {
|
||
setFormValues((prev) => ({ ...prev, ...all }));
|
||
},
|
||
[],
|
||
);
|
||
|
||
// 配置数据到位后同步进表单（antd Form 属于外部系统）；
|
||
// refreshConfig（测试/拉模型后）只刷新展示，不覆盖用户表单输入。
|
||
useEffect(() => {
|
||
if (!config) return;
|
||
if (skipNextSyncRef.current) {
|
||
skipNextSyncRef.current = false;
|
||
appliedConfigRef.current = config;
|
||
return;
|
||
}
|
||
if (appliedConfigRef.current === config) return;
|
||
appliedConfigRef.current = config;
|
||
const initial: FormValues = {
|
||
provider: config.provider,
|
||
baseUrl: config.baseUrl,
|
||
apiKey: '',
|
||
defaultModel: config.defaultModel ?? '',
|
||
timeoutMs: config.timeoutMs,
|
||
supportsVision: config.supportsVision,
|
||
reasoningEffort: config.reasoningEffort ?? '',
|
||
};
|
||
form.setFieldsValue(initial);
|
||
setFormValues(initial);
|
||
lastProviderRef.current = config.provider;
|
||
if (config.defaultModel) {
|
||
setModelOptions([{ value: config.defaultModel, label: config.defaultModel }]);
|
||
}
|
||
setError(null);
|
||
}, [config, form]);
|
||
|
||
// ── Provider change → swap baseUrl ──
|
||
|
||
const handleProviderChange = useCallback(
|
||
(provider: AiProvider) => {
|
||
const result = shouldAutoSwapBaseUrl(provider, formValues.baseUrl, lastProviderRef.current);
|
||
if (result.shouldSwap) {
|
||
form.setFieldValue('baseUrl', result.baseUrl);
|
||
}
|
||
lastProviderRef.current = provider;
|
||
},
|
||
[form, formValues.baseUrl],
|
||
);
|
||
|
||
const currentProvider = formValues.provider;
|
||
const isFixedProvider = FIXED_PROVIDERS.includes(currentProvider);
|
||
|
||
// ── Fetch models from provider ──
|
||
|
||
const handleFetchModels = useCallback(async () => {
|
||
setFetchingModels(true);
|
||
try {
|
||
await form.validateFields(['provider', 'baseUrl']);
|
||
|
||
const { provider, baseUrl, apiKey: formKey } = formValues;
|
||
const body: Record<string, unknown> = { provider };
|
||
if (baseUrl) body.baseUrl = baseUrl;
|
||
if (formKey && formKey !== '••••') body.apiKey = formKey;
|
||
|
||
const res = await api.post<FetchModelsResult>('/ai/config/models', body);
|
||
if (res.success && res.models.length > 0) {
|
||
const options = res.models.map((m) => ({ value: m.id, label: m.id }));
|
||
setModelOptions(options);
|
||
message.success(`获取到 ${res.models.length} 个模型`);
|
||
} else {
|
||
message.warning(res.message || '未获取到可用模型');
|
||
}
|
||
} catch (err: unknown) {
|
||
message.error(getErrorMessage(err, '获取模型列表失败'));
|
||
} finally {
|
||
setFetchingModels(false);
|
||
}
|
||
}, [form, formValues]);
|
||
|
||
// ── Save ──
|
||
|
||
const handleSave = useCallback(async () => {
|
||
try {
|
||
// Validate fields (for UI error display) — actual values come from state
|
||
await form.validateFields(['provider', 'baseUrl', 'timeoutMs']);
|
||
|
||
const {
|
||
provider,
|
||
baseUrl,
|
||
defaultModel,
|
||
apiKey,
|
||
timeoutMs,
|
||
supportsVision,
|
||
reasoningEffort,
|
||
} = formValues;
|
||
|
||
if (provider === 'OPENAI_COMPATIBLE' && !baseUrl) {
|
||
message.error('OPENAI_COMPATIBLE 模式必须填写 Base URL');
|
||
return;
|
||
}
|
||
|
||
setSaving(true);
|
||
|
||
const resolvedBaseUrl = baseUrl || PROVIDER_DEFAULTS[provider] || '';
|
||
|
||
const body: Record<string, unknown> = {
|
||
provider,
|
||
baseUrl: resolvedBaseUrl,
|
||
defaultModel: defaultModel || undefined,
|
||
enabled: true,
|
||
supportsVision,
|
||
timeoutMs,
|
||
reasoningEffort: reasoningEffort || null,
|
||
};
|
||
|
||
if (apiKey && apiKey !== '••••') {
|
||
body.apiKey = apiKey;
|
||
}
|
||
|
||
await saveMutation.mutateAsync(body);
|
||
message.success('配置已保存');
|
||
form.setFieldValue('apiKey', '');
|
||
setFormValues((prev) => ({ ...prev, apiKey: '' }));
|
||
} catch {
|
||
// 错误提示由 useApiMutation 统一处理
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}, [formValues, form, saveMutation]);
|
||
|
||
// ── Test connection ──
|
||
|
||
const handleTest = useCallback(async () => {
|
||
try {
|
||
const fieldsToValidate = ['provider', 'timeoutMs'] as string[];
|
||
if (currentProvider === 'OPENAI_COMPATIBLE') {
|
||
fieldsToValidate.push('baseUrl');
|
||
}
|
||
await form.validateFields(fieldsToValidate);
|
||
|
||
setTesting(true);
|
||
setTestResult(null);
|
||
|
||
const { provider, baseUrl, defaultModel, apiKey, timeoutMs, reasoningEffort } = formValues;
|
||
const body: Record<string, unknown> = { provider, timeoutMs };
|
||
if (baseUrl) body.baseUrl = baseUrl;
|
||
if (defaultModel) body.defaultModel = defaultModel;
|
||
if (apiKey && apiKey !== '••••') body.apiKey = apiKey;
|
||
if (reasoningEffort) body.reasoningEffort = reasoningEffort;
|
||
|
||
const res = await api.post<TestResult>('/ai/config/test', body);
|
||
setTestResult(res);
|
||
await refreshConfig();
|
||
} catch (err: unknown) {
|
||
setTestResult({
|
||
success: false,
|
||
latencyMs: null,
|
||
modelCount: null,
|
||
modelAvailable: false,
|
||
testedAt: new Date().toISOString(),
|
||
message: getErrorMessage(err, '测试请求失败'),
|
||
});
|
||
} finally {
|
||
setTesting(false);
|
||
}
|
||
}, [formValues, form, currentProvider]);
|
||
|
||
// ── Clear key ──
|
||
|
||
const handleClearKey = useCallback(() => {
|
||
const isEnv = config?.keySource === 'environment';
|
||
modal.confirm({
|
||
title: '确认清除密钥',
|
||
content: isEnv
|
||
? '数据库中的密钥将被清除，但环境变量 AI_API_KEY 仍可使用。确定继续？'
|
||
: '密钥将被永久清除，之后将无法使用 AI 功能。确定继续？',
|
||
okText: '确认清除',
|
||
okType: 'danger',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
try {
|
||
await clearKeyMutation.mutateAsync();
|
||
message.success('密钥已清除');
|
||
} catch {
|
||
// 错误提示由 useApiMutation 统一处理
|
||
}
|
||
},
|
||
});
|
||
}, [config, modal]);
|
||
|
||
// ── Step navigation ──
|
||
|
||
const goNext = useCallback(async () => {
|
||
try {
|
||
if (currentStep === 0) {
|
||
await form.validateFields(['provider', 'baseUrl', 'timeoutMs']);
|
||
} else if (currentStep === 2) {
|
||
await form.validateFields(['defaultModel']);
|
||
}
|
||
setCurrentStep((s) => Math.min(s + 1, STEP_ITEMS.length - 1));
|
||
} catch {
|
||
// Validation failed — form will show errors
|
||
}
|
||
}, [currentStep, form]);
|
||
|
||
const goPrev = useCallback(() => {
|
||
setCurrentStep((s) => Math.max(s - 1, 0));
|
||
}, []);
|
||
|
||
// ── No read permission ──
|
||
|
||
if (!canRead) {
|
||
return (
|
||
<div className={styles.container}>
|
||
<Alert type="error" title="您没有查看 AI 配置的权限" showIcon />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className={styles.container} style={{ textAlign: 'center', paddingTop: 80 }}>
|
||
<Spin size="large" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error && !config) {
|
||
return (
|
||
<div className={styles.container}>
|
||
<Alert type="error" title={error} showIcon />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const renderStepContent = () => {
|
||
switch (currentStep) {
|
||
case 0:
|
||
return (
|
||
<ProviderStep
|
||
canWrite={canWrite}
|
||
isFixedProvider={isFixedProvider}
|
||
config={config}
|
||
onProviderChange={handleProviderChange}
|
||
/>
|
||
);
|
||
case 1:
|
||
return <KeyStep canWrite={canWrite} config={config} onClearKey={handleClearKey} />;
|
||
case 2:
|
||
return (
|
||
<ModelStep
|
||
canWrite={canWrite}
|
||
config={config}
|
||
onFetchModels={handleFetchModels}
|
||
fetchingModels={fetchingModels}
|
||
modelOptions={modelOptions}
|
||
/>
|
||
);
|
||
case 3:
|
||
return (
|
||
<SaveTestStep
|
||
canWrite={canWrite}
|
||
canTest={canTest}
|
||
config={config}
|
||
currentProvider={currentProvider}
|
||
formValues={formValues}
|
||
onSave={handleSave}
|
||
saving={saving}
|
||
onTest={handleTest}
|
||
testing={testing}
|
||
testResult={testResult}
|
||
/>
|
||
);
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
// ── Render ──
|
||
|
||
return (
|
||
<div className={styles.container}>
|
||
<div className={styles.header}>
|
||
<h2>AI 模型配置</h2>
|
||
<p className={styles.headerDesc}>密钥仅保存在服务器端，浏览器无法读取明文</p>
|
||
<div className={styles.statusRow}>
|
||
<Space size="small">
|
||
<Tag color={config?.enabled ? 'green' : 'default'}>
|
||
{config?.enabled ? '已启用' : '未启用'}
|
||
</Tag>
|
||
{config?.verified && <Tag color="blue">已验证</Tag>}
|
||
{config?.hasApiKey && (
|
||
<Tag color={sourceColor(config?.keySource || 'none')}>
|
||
密钥: {sourceLabel(config?.keySource || 'none')}
|
||
</Tag>
|
||
)}
|
||
</Space>
|
||
</div>
|
||
</div>
|
||
|
||
<Steps
|
||
current={currentStep}
|
||
items={STEP_ITEMS}
|
||
onChange={setCurrentStep}
|
||
className={styles.steps}
|
||
size="small"
|
||
/>
|
||
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
initialValues={{ timeoutMs: 30000 }}
|
||
onValuesChange={handleFormChange}
|
||
>
|
||
<div className={styles.stepContent}>{renderStepContent()}</div>
|
||
|
||
<div className={styles.stepNav}>
|
||
<Button onClick={goPrev} disabled={currentStep === 0} icon={<span>←</span>}>
|
||
上一步
|
||
</Button>
|
||
{currentStep < STEP_ITEMS.length - 1 ? (
|
||
<Button type="primary" onClick={goNext} icon={<span>→</span>}>
|
||
下一步
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AiConfigPage;
|