664 lines
17 KiB
Vue
664 lines
17 KiB
Vue
<template>
|
||
<div class="api-config-section">
|
||
<n-button
|
||
class="toggle-button"
|
||
size="small"
|
||
@click="toggleConfig"
|
||
:quaternary="true"
|
||
:type="expanded ? 'primary' : 'default'"
|
||
>
|
||
<template #icon>
|
||
<n-icon :component="expanded ? ChevronUpIcon : ChevronDownIcon" />
|
||
</template>
|
||
<span class="toggle-text">API配置 {{ expanded ? '收起' : '展开' }}</span>
|
||
</n-button>
|
||
|
||
<n-collapse-transition :show="expanded">
|
||
<n-card class="api-config-card" :bordered="false">
|
||
<n-alert title="OpenAI API配置" type="info" v-if="isApiInfoVisible" class="api-info-alert">
|
||
<template #icon>
|
||
<n-icon :component="InformationCircleIcon" />
|
||
</template>
|
||
<p>您可以配置自己的API，也可以使用系统默认配置。API密钥仅在您的浏览器中使用，不会发送到服务器存储。</p>
|
||
<div class="alert-actions">
|
||
<n-button text @click="isApiInfoVisible = false">
|
||
<template #icon>
|
||
<n-icon :component="CloseIcon" />
|
||
</template>
|
||
</n-button>
|
||
</div>
|
||
</n-alert>
|
||
|
||
<n-grid :cols="24" :x-gap="16" :y-gap="16">
|
||
<n-grid-item :span="24" :lg-span="14">
|
||
<n-form-item label="API URL" path="apiUrl">
|
||
<n-input
|
||
v-model:value="apiConfig.apiUrl"
|
||
placeholder="https://api.openai.com/v1/chat/completions"
|
||
@update:value="handleConfigChange"
|
||
round
|
||
>
|
||
<template #prefix>
|
||
<n-icon :component="GlobeIcon" />
|
||
</template>
|
||
</n-input>
|
||
<template #feedback>
|
||
<div class="url-feedback">
|
||
<span class="formatted-url">实际请求地址: {{ formattedUrl }}</span>
|
||
<div class="url-tips">
|
||
<div>提示: URL以/结尾将忽略v1路径</div>
|
||
<div>URL以#结尾将使用原始地址</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</n-form-item>
|
||
</n-grid-item>
|
||
|
||
<n-grid-item :span="24" :lg-span="10">
|
||
<n-form-item label="API Key" path="apiKey">
|
||
<n-input
|
||
v-model:value="apiConfig.apiKey"
|
||
type="password"
|
||
placeholder="sk-..."
|
||
show-password-on="click"
|
||
@update:value="handleConfigChange"
|
||
round
|
||
>
|
||
<template #prefix>
|
||
<n-icon :component="KeyIcon" />
|
||
</template>
|
||
</n-input>
|
||
</n-form-item>
|
||
</n-grid-item>
|
||
|
||
<n-grid-item :span="12" :lg-span="12">
|
||
<n-form-item label="模型" path="apiModel">
|
||
<n-input
|
||
v-model:value="apiConfig.apiModel"
|
||
placeholder="输入或选择模型名称"
|
||
@update:value="handleConfigChange"
|
||
round
|
||
>
|
||
<template #prefix>
|
||
<n-icon :component="CodeIcon" />
|
||
</template>
|
||
<template #suffix>
|
||
<n-dropdown
|
||
trigger="click"
|
||
:options="modelOptions"
|
||
@select="selectModel"
|
||
placement="bottom-end"
|
||
>
|
||
<n-button quaternary circle size="small" class="model-dropdown-btn">
|
||
<template #icon>
|
||
<n-icon :component="ChevronDownIcon" />
|
||
</template>
|
||
</n-button>
|
||
</n-dropdown>
|
||
</template>
|
||
</n-input>
|
||
<template #feedback>
|
||
<div class="model-suggestions">
|
||
<div class="model-tip">您可以直接输入模型名称，或点击右侧按钮从下拉菜单选择</div>
|
||
<span>常用模型:</span>
|
||
<div class="model-chips">
|
||
<n-tag
|
||
v-for="model in commonModels"
|
||
:key="model.key"
|
||
size="small"
|
||
round
|
||
clickable
|
||
@click="selectModel(model.key)"
|
||
>
|
||
{{ model.label }}
|
||
</n-tag>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</n-form-item>
|
||
</n-grid-item>
|
||
|
||
<n-grid-item :span="12" :lg-span="12">
|
||
<n-form-item label="超时时间(秒)" path="apiTimeout">
|
||
<n-input-number
|
||
v-model:value="apiTimeout"
|
||
placeholder="60"
|
||
:min="1"
|
||
:max="300"
|
||
@update:value="handleTimeoutChange"
|
||
:show-button="false"
|
||
class="timeout-input"
|
||
>
|
||
<template #suffix>
|
||
<div class="timeout-controls">
|
||
<n-button size="tiny" quaternary @click="decreaseTimeout">
|
||
<template #icon><n-icon :component="RemoveIcon" /></template>
|
||
</n-button>
|
||
<n-button size="tiny" quaternary @click="increaseTimeout">
|
||
<template #icon><n-icon :component="AddIcon" /></template>
|
||
</n-button>
|
||
</div>
|
||
</template>
|
||
</n-input-number>
|
||
</n-form-item>
|
||
</n-grid-item>
|
||
</n-grid>
|
||
|
||
<div class="api-actions">
|
||
<div class="api-save-option">
|
||
<n-button
|
||
tertiary
|
||
size="small"
|
||
@click="saveConfig"
|
||
round
|
||
>
|
||
<template #icon>
|
||
<n-icon :component="SaveIcon" />
|
||
</template>
|
||
保存配置到本地
|
||
</n-button>
|
||
</div>
|
||
|
||
<div class="api-buttons">
|
||
<n-button
|
||
type="primary"
|
||
:loading="testingConnection"
|
||
:disabled="!isConfigValid"
|
||
@click="testConnection"
|
||
round
|
||
>
|
||
<template #icon>
|
||
<n-icon :component="CheckmarkIcon" />
|
||
</template>
|
||
测试连接
|
||
</n-button>
|
||
|
||
<n-button @click="resetConfig" round>
|
||
<template #icon>
|
||
<n-icon :component="RefreshIcon" />
|
||
</template>
|
||
重置
|
||
</n-button>
|
||
</div>
|
||
</div>
|
||
|
||
<n-divider v-if="connectionStatus" style="margin: 16px 0 12px" />
|
||
|
||
<div v-if="connectionStatus" class="connection-status" :class="connectionStatus.type">
|
||
<n-icon :component="connectionStatus.icon" class="status-icon" />
|
||
<span class="status-message">{{ connectionStatus.message }}</span>
|
||
</div>
|
||
</n-card>
|
||
</n-collapse-transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, markRaw } from 'vue';
|
||
import {
|
||
NButton,
|
||
NIcon,
|
||
NCard,
|
||
NCollapseTransition,
|
||
NGrid,
|
||
NGridItem,
|
||
NFormItem,
|
||
NInput,
|
||
NInputNumber,
|
||
NSwitch,
|
||
NAlert,
|
||
NDivider,
|
||
NDropdown,
|
||
NTag,
|
||
useMessage
|
||
} from 'naive-ui';
|
||
import {
|
||
ChevronDown as ChevronDownIcon,
|
||
ChevronUp as ChevronUpIcon,
|
||
InformationCircleOutline as InformationCircleIcon,
|
||
Close as CloseIcon,
|
||
Globe as GlobeIcon,
|
||
Key as KeyIcon,
|
||
CheckmarkCircleOutline as CheckmarkIcon,
|
||
RefreshOutline as RefreshIcon,
|
||
AddOutline as AddIcon,
|
||
RemoveOutline as RemoveIcon,
|
||
CheckmarkCircle as SuccessIcon,
|
||
CloseCircle as ErrorIcon,
|
||
CodeSlashOutline as CodeIcon,
|
||
SaveOutline as SaveIcon
|
||
} from '@vicons/ionicons5';
|
||
import { apiService } from '@/services/api';
|
||
import { saveApiConfigToLocalStorage, loadApiConfig } from '@/utils';
|
||
import type { ApiConfig } from '@/types';
|
||
|
||
// 出于安全考虑，API KEY不会显示在前端
|
||
const props = defineProps<{
|
||
defaultApiUrl?: string;
|
||
defaultApiModel?: string;
|
||
defaultApiTimeout?: string;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'update:apiConfig', value: ApiConfig): void;
|
||
}>();
|
||
|
||
const message = useMessage();
|
||
const expanded = ref(false);
|
||
const testingConnection = ref(false);
|
||
const isApiInfoVisible = ref(true);
|
||
|
||
// 连接状态
|
||
const connectionStatus = ref<{
|
||
type: 'success' | 'error';
|
||
message: string;
|
||
icon: any;
|
||
} | null>(null);
|
||
|
||
// 模型选项
|
||
const modelOptions = [
|
||
{ label: 'GPT-3.5', key: 'gpt-3.5-turbo' },
|
||
{ label: 'GPT-4o', key: 'gpt-4o' },
|
||
{ label: 'DeepSeek V3', key: 'deepseek-chat' },
|
||
{ label: 'DeepSeek R1', key: 'deepseek-reasoner' },
|
||
{ label: 'Claude 3.5 Sonnet', key: 'claude-3-5-sonnet' },
|
||
{ label: 'Claude 3.5 Sonnet 20241022', key: 'claude-3-5-sonnet-20241022' },
|
||
{ label: 'Gemini 1.5 Pro', key: 'gemini-1.5-pro' },
|
||
{ label: 'Gemini 1.5 Flash', key: 'gemini-1.5-flash' },
|
||
{ label: 'Gemini 2.0 Pro', key: 'gemini-2.0-pro' },
|
||
{ label: 'Gemini 2.0 Flash', key: 'gemini-2.0-flash' }
|
||
];
|
||
|
||
// 常用模型（用于快速选择）
|
||
const commonModels = [
|
||
{ label: 'GPT-3.5', key: 'gpt-3.5-turbo' },
|
||
{ label: 'GPT-4o', key: 'gpt-4o' },
|
||
{ label: 'Claude 3.5', key: 'claude-3-5-sonnet' },
|
||
{ label: 'Gemini 2.0', key: 'gemini-2.0-flash' },
|
||
{ label: 'DeepSeek V3', key: 'deepseek-chat' },
|
||
];
|
||
|
||
// API配置
|
||
const apiConfig = ref<ApiConfig>({
|
||
apiUrl: props.defaultApiUrl || '',
|
||
apiKey: '',
|
||
apiModel: props.defaultApiModel || '',
|
||
apiTimeout: props.defaultApiTimeout || '60',
|
||
saveApiConfig: true // 默认启用保存配置
|
||
});
|
||
|
||
const apiTimeout = computed({
|
||
get: () => parseInt(apiConfig.value.apiTimeout) || 60,
|
||
set: (val: number) => {
|
||
apiConfig.value.apiTimeout = val.toString();
|
||
}
|
||
});
|
||
|
||
const isConfigValid = computed(() => {
|
||
return apiConfig.value.apiUrl && apiConfig.value.apiKey;
|
||
});
|
||
|
||
const formattedUrl = computed(() => {
|
||
return formatApiUrl(apiConfig.value.apiUrl);
|
||
});
|
||
|
||
function toggleConfig() {
|
||
expanded.value = !expanded.value;
|
||
}
|
||
|
||
function handleConfigChange() {
|
||
console.log('API配置变更:', apiConfig.value);
|
||
|
||
// 不再在每次配置变更时自动保存
|
||
// 仅向父组件发送更新事件
|
||
emit('update:apiConfig', { ...apiConfig.value });
|
||
}
|
||
|
||
function handleTimeoutChange(value: number | null) {
|
||
if (value !== null) {
|
||
apiConfig.value.apiTimeout = value.toString();
|
||
|
||
// 仅通知父组件更新，不自动保存
|
||
emit('update:apiConfig', { ...apiConfig.value });
|
||
}
|
||
}
|
||
|
||
function increaseTimeout() {
|
||
if (apiTimeout.value < 300) {
|
||
apiTimeout.value += 10;
|
||
|
||
// 通知父组件
|
||
emit('update:apiConfig', { ...apiConfig.value });
|
||
}
|
||
}
|
||
|
||
function decreaseTimeout() {
|
||
if (apiTimeout.value > 10) {
|
||
apiTimeout.value -= 10;
|
||
|
||
// 通知父组件
|
||
emit('update:apiConfig', { ...apiConfig.value });
|
||
}
|
||
}
|
||
|
||
function formatApiUrl(url: string): string {
|
||
if (!url) return '';
|
||
|
||
try {
|
||
// 使用与后端一致的URL格式化逻辑
|
||
if (url.endsWith('/')) {
|
||
return `${url}chat/completions`;
|
||
} else if (url.endsWith('#')) {
|
||
return url.replace('#', '');
|
||
} else {
|
||
return `${url}/v1/chat/completions`;
|
||
}
|
||
} catch (e) {
|
||
// 如果URL格式错误，则返回原始字符串
|
||
return url;
|
||
}
|
||
}
|
||
|
||
async function testConnection() {
|
||
if (!isConfigValid.value) {
|
||
message.error('请填写完整的API配置信息');
|
||
return;
|
||
}
|
||
|
||
testingConnection.value = true;
|
||
connectionStatus.value = null;
|
||
|
||
try {
|
||
const response = await apiService.testApiConnection({
|
||
api_url: apiConfig.value.apiUrl,
|
||
api_key: apiConfig.value.apiKey,
|
||
api_model: apiConfig.value.apiModel,
|
||
api_timeout: apiConfig.value.apiTimeout
|
||
});
|
||
|
||
if (response.success) {
|
||
message.success('API连接测试成功');
|
||
connectionStatus.value = {
|
||
type: 'success',
|
||
message: '连接成功！API配置有效。',
|
||
icon: markRaw(SuccessIcon)
|
||
};
|
||
} else {
|
||
message.error(`API连接测试失败: ${response.message}`);
|
||
connectionStatus.value = {
|
||
type: 'error',
|
||
message: `连接失败: ${response.message}`,
|
||
icon: markRaw(ErrorIcon)
|
||
};
|
||
}
|
||
} catch (error: any) {
|
||
message.error(`测试连接出错: ${error.message || '未知错误'}`);
|
||
connectionStatus.value = {
|
||
type: 'error',
|
||
message: `连接错误: ${error.message || '未知错误'}`,
|
||
icon: markRaw(ErrorIcon)
|
||
};
|
||
} finally {
|
||
testingConnection.value = false;
|
||
}
|
||
}
|
||
|
||
function resetConfig() {
|
||
apiConfig.value = {
|
||
apiUrl: props.defaultApiUrl || '',
|
||
apiKey: '',
|
||
apiModel: props.defaultApiModel || '',
|
||
apiTimeout: props.defaultApiTimeout || '60',
|
||
saveApiConfig: true
|
||
};
|
||
|
||
// 清除本地存储
|
||
if (window.localStorage) {
|
||
localStorage.removeItem('apiConfig');
|
||
message.success('已重置API配置并清除本地存储');
|
||
} else {
|
||
message.success('已重置API配置');
|
||
}
|
||
|
||
connectionStatus.value = null;
|
||
emit('update:apiConfig', { ...apiConfig.value });
|
||
}
|
||
|
||
// 选择模型
|
||
function selectModel(key: string) {
|
||
console.log('选择模型:', key);
|
||
apiConfig.value.apiModel = key;
|
||
|
||
// 通知父组件
|
||
emit('update:apiConfig', { ...apiConfig.value });
|
||
}
|
||
|
||
// 显式保存配置的函数
|
||
function saveConfig() {
|
||
saveApiConfigToLocalStorage({
|
||
apiUrl: apiConfig.value.apiUrl,
|
||
apiKey: apiConfig.value.apiKey,
|
||
apiModel: apiConfig.value.apiModel,
|
||
apiTimeout: apiConfig.value.apiTimeout,
|
||
saveApiConfig: true
|
||
});
|
||
message.success('已将配置保存到本地');
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 加载保存的配置
|
||
const savedConfig = loadApiConfig();
|
||
|
||
if (savedConfig.saveApiConfig) {
|
||
apiConfig.value = {
|
||
apiUrl: savedConfig.apiUrl || props.defaultApiUrl || '',
|
||
apiKey: savedConfig.apiKey || '',
|
||
apiModel: savedConfig.apiModel || props.defaultApiModel || '',
|
||
apiTimeout: savedConfig.apiTimeout || props.defaultApiTimeout || '60',
|
||
saveApiConfig: true
|
||
};
|
||
|
||
// 通知父组件配置已加载
|
||
emit('update:apiConfig', { ...apiConfig.value });
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.api-config-section {
|
||
margin-bottom: 1.5rem;
|
||
position: relative;
|
||
}
|
||
|
||
.toggle-button {
|
||
margin-bottom: 0.75rem;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
border-radius: 16px;
|
||
padding: 4px 12px;
|
||
}
|
||
|
||
.toggle-button:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.toggle-text {
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.api-config-card {
|
||
margin-bottom: 1rem;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||
background: linear-gradient(to bottom, rgba(240, 240, 245, 0.5), rgba(250, 250, 252, 0.8));
|
||
padding: 16px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.api-info-alert {
|
||
margin-bottom: 16px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.url-feedback {
|
||
padding: 6px 0;
|
||
}
|
||
|
||
.formatted-url {
|
||
color: var(--n-text-color-info);
|
||
font-size: 0.85rem;
|
||
display: block;
|
||
margin-bottom: 0.25rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.url-tips {
|
||
color: var(--n-text-color-info);
|
||
font-size: 0.75rem;
|
||
opacity: 0.8;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.alert-actions {
|
||
margin-top: 0.5rem;
|
||
text-align: right;
|
||
}
|
||
|
||
.api-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 1.5rem;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
.api-save-option {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 6px 12px;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.api-save-option button {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 16px;
|
||
font-weight: 500;
|
||
background-color: rgba(0, 0, 0, 0.02);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.api-save-option button:hover {
|
||
background-color: rgba(32, 128, 240, 0.08);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.api-save-option button .n-icon {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.api-buttons {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.timeout-input {
|
||
width: 100%;
|
||
}
|
||
|
||
.timeout-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.connection-status {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px 16px;
|
||
border-radius: 8px;
|
||
margin-top: 8px;
|
||
font-weight: 500;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
.connection-status.success {
|
||
background-color: rgba(24, 160, 88, 0.1);
|
||
color: var(--n-success-color);
|
||
}
|
||
|
||
.connection-status.error {
|
||
background-color: rgba(208, 48, 80, 0.1);
|
||
color: var(--n-error-color);
|
||
}
|
||
|
||
.status-icon {
|
||
margin-right: 8px;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.status-message {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(5px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.api-actions {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.api-buttons {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.model-suggestions {
|
||
margin-top: 6px;
|
||
font-size: 0.75rem;
|
||
color: var(--n-text-color-3);
|
||
}
|
||
|
||
.model-chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.model-chips :deep(.n-tag) {
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.model-chips :deep(.n-tag:hover) {
|
||
background-color: rgba(32, 128, 240, 0.1);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.model-tip {
|
||
margin-bottom: 6px;
|
||
font-size: 0.75rem;
|
||
color: var(--n-text-color-3);
|
||
font-style: italic;
|
||
}
|
||
|
||
.model-dropdown-btn {
|
||
background-color: rgba(32, 128, 240, 0.1);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.model-dropdown-btn:hover {
|
||
background-color: rgba(32, 128, 240, 0.2);
|
||
transform: translateY(-1px);
|
||
}
|
||
</style>
|