feat: 重构 Settings 页面样式
- 拆分 Settings 页面样式到独立 CSS 文件 - 新增 modelSettings、settings-parsing、settings 等样式文件 - 添加 TypeScript 类型定义 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
214
web/src/views/settings/useModelSettings.ts
Normal file
214
web/src/views/settings/useModelSettings.ts
Normal file
@@ -0,0 +1,214 @@
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { ModelInfo, ModelForm, ModelTypeOption, ProviderOption } from './types'
|
||||
|
||||
// API 基础 URL
|
||||
const API_BASE = 'http://localhost:8082'
|
||||
|
||||
export function useModelSettings() {
|
||||
// Model 列表
|
||||
const models = ref<ModelInfo[]>([])
|
||||
const modelsLoading = ref(false)
|
||||
|
||||
// Model Type 选项
|
||||
const modelTypeOptions: ModelTypeOption[] = [
|
||||
{ value: 'chat', label: 'Chat' },
|
||||
{ value: 'embedding', label: 'Embedding' },
|
||||
{ value: 'rerank', label: 'Rerank' },
|
||||
{ value: 'vlm', label: 'VLM' },
|
||||
]
|
||||
|
||||
// Provider 选项
|
||||
const providerOptions: ProviderOption[] = [
|
||||
{ value: 'OpenAI', label: 'OpenAI' },
|
||||
{ value: 'Ollama', label: 'Ollama' },
|
||||
]
|
||||
|
||||
// 是否显示新增模型表单
|
||||
const showAddModelForm = ref(false)
|
||||
|
||||
// 新增模型表单
|
||||
const newModelForm = ref<ModelForm>({
|
||||
name: '',
|
||||
apiKey: '',
|
||||
apiEndpoint: '',
|
||||
baseUrl: '',
|
||||
provider: '',
|
||||
model: '',
|
||||
modelType: '',
|
||||
})
|
||||
|
||||
// 测试连接状态
|
||||
const testingConnection = ref(false)
|
||||
const connectionStatus = ref<'idle' | 'success' | 'error'>('idle')
|
||||
|
||||
// 获取模型列表
|
||||
const fetchModels = async () => {
|
||||
modelsLoading.value = true
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model/list`)
|
||||
const result = await response.json()
|
||||
models.value = result.list || []
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch models:', error)
|
||||
ElMessage.error('Failed to load models')
|
||||
} finally {
|
||||
modelsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 测试连接
|
||||
const testConnection = async () => {
|
||||
if (!newModelForm.value.apiKey || !newModelForm.value.baseUrl) {
|
||||
ElMessage.warning('Please enter API Key and Base URL')
|
||||
return
|
||||
}
|
||||
|
||||
testingConnection.value = true
|
||||
connectionStatus.value = 'idle'
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model/test`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
provider: newModelForm.value.provider,
|
||||
model: newModelForm.value.model,
|
||||
api_key: newModelForm.value.apiKey,
|
||||
base_url: newModelForm.value.baseUrl,
|
||||
api_endpoint: newModelForm.value.apiEndpoint,
|
||||
}),
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
connectionStatus.value = 'success'
|
||||
ElMessage.success(result.message || 'Connection successful!')
|
||||
} else {
|
||||
connectionStatus.value = 'error'
|
||||
ElMessage.error(result.message || 'Connection failed')
|
||||
}
|
||||
} catch (error: any) {
|
||||
connectionStatus.value = 'error'
|
||||
ElMessage.error('Connection failed: ' + error.message)
|
||||
} finally {
|
||||
testingConnection.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 添加新模型（初始状态为 inactive，需要测试连接后才能激活）
|
||||
const addModel = async () => {
|
||||
if (!newModelForm.value.name || !newModelForm.value.provider || !newModelForm.value.model) {
|
||||
ElMessage.warning('Please fill in required fields')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model/add`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: newModelForm.value.name,
|
||||
model_type: newModelForm.value.modelType || 'chat',
|
||||
provider: newModelForm.value.provider,
|
||||
model: newModelForm.value.model,
|
||||
api_key: newModelForm.value.apiKey,
|
||||
base_url: newModelForm.value.baseUrl,
|
||||
api_endpoint: newModelForm.value.apiEndpoint,
|
||||
status: 'inactive', // 初始状态为未激活
|
||||
}),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json()
|
||||
// 记录测试连接状态
|
||||
const wasConnected = connectionStatus.value === 'success'
|
||||
// 如果测试连接成功，则激活模型；否则保持 inactive
|
||||
if (wasConnected) {
|
||||
// 再次调用更新接口激活模型
|
||||
await fetch(`${API_BASE}/model/${result.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: 'active' }),
|
||||
})
|
||||
result.status = 'active'
|
||||
}
|
||||
models.value.push(result)
|
||||
newModelForm.value = {
|
||||
name: '',
|
||||
apiKey: '',
|
||||
apiEndpoint: '',
|
||||
baseUrl: '',
|
||||
provider: '',
|
||||
model: '',
|
||||
modelType: '',
|
||||
}
|
||||
connectionStatus.value = 'idle'
|
||||
showAddModelForm.value = false
|
||||
ElMessage.success(wasConnected ? 'Model added and activated' : 'Model added successfully')
|
||||
} else {
|
||||
const error = await response.json()
|
||||
ElMessage.error(error.message || 'Failed to add model')
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error('Failed to add model: ' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
// 取消添加
|
||||
const cancelAddModel = () => {
|
||||
newModelForm.value = {
|
||||
name: '',
|
||||
apiKey: '',
|
||||
apiEndpoint: '',
|
||||
baseUrl: '',
|
||||
provider: '',
|
||||
model: '',
|
||||
modelType: '',
|
||||
}
|
||||
connectionStatus.value = 'idle'
|
||||
showAddModelForm.value = false
|
||||
}
|
||||
|
||||
// 删除模型
|
||||
const deleteModel = async (id: string) => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model/${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
models.value = models.value.filter(m => m.id !== id)
|
||||
ElMessage.success('Model deleted successfully')
|
||||
} else {
|
||||
ElMessage.error('Failed to delete model')
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error('Failed to delete model: ' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
models,
|
||||
modelsLoading,
|
||||
modelTypeOptions,
|
||||
providerOptions,
|
||||
showAddModelForm,
|
||||
newModelForm,
|
||||
testingConnection,
|
||||
connectionStatus,
|
||||
|
||||
// Methods
|
||||
fetchModels,
|
||||
testConnection,
|
||||
addModel,
|
||||
cancelAddModel,
|
||||
deleteModel,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user