caoxiaozhu/X-Agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 扩展 Settings 页面功能

Browse Source 
- 添加解析设置配置
- 优化模型设置表单
- 添加更多样式配置

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-07 16:21:44 +08:00
parent 329968de7f
commit 650789e934
5 changed files with 325 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/views/settings/modelSettings.css
View File

@@ -233,6 +233,10 @@
color: white;
}
.add-model-dialog :deep(.el-input__inner::placeholder) {
color: #6b7280;
}
.add-model-dialog :deep(.el-select) {
width: 100%;
}
@@ -246,6 +250,10 @@
color: white;
}
.add-model-dialog :deep(.el-select .el-input__inner::placeholder) {
color: #6b7280;
}
.add-model-dialog :deep(.el-select-dropdown) {
background-color: #1a1a24;
border: 1px solid #2a2a3a;

8
web/src/views/settings/settings-parsing.css
View File

@@ -199,6 +199,10 @@
color: white;
}
.add-model-dialog :deep(.el-input__inner::placeholder) {
color: #6b7280;
}
.add-model-dialog :deep(.el-select) {
width: 100%;
}
@@ -212,6 +216,10 @@
color: white;
}
.add-model-dialog :deep(.el-select .el-input__inner::placeholder) {
color: #6b7280;
}
.add-model-dialog :deep(.el-select-dropdown) {
background-color: #1a1a24;
border: 1px solid #2a2a3a;

8
web/src/views/settings/settings.css
View File

@@ -156,6 +156,10 @@ table {
color: white;
}
.settings-form :deep(.el-input__inner::placeholder) {
color: #6b7280;
}
.settings-form :deep(.el-select) {
width: 100%;
}
@@ -165,6 +169,10 @@ table {
border: 1px solid #4b5563;
}
.settings-form :deep(.el-select .el-input__inner::placeholder) {
color: #6b7280;
}
.settings-form :deep(.el-button--primary) {
background-color: #f97316;
border-color: #f97316;

196
web/src/views/settings/useModelSettings.ts
View File

@@ -1,4 +1,4 @@
import { ref } from 'vue'
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { ModelInfo, ModelForm, ModelTypeOption, ProviderOption } from './types'
@@ -22,13 +22,47 @@ export function useModelSettings() {
const providerOptions: ProviderOption[] = [
{ value: 'OpenAI', label: 'OpenAI' },
{ value: 'Ollama', label: 'Ollama' },
{ value: 'ali', label: 'Alibaba Cloud' },
]
// 默认 Base URL 映射
const defaultBaseUrls: Record<string, string> = {
ali: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
}
// 是否显示新增模型表单
const showAddModelForm = ref(false)
// 是否显示编辑模型表单
const showEditModelForm = ref(false)
// 新增模型表单
const newModelForm = ref<ModelForm>({
name: '',
apiKey: '',
apiEndpoint: '',
baseUrl: '',
provider: '',
model: '',
modelType: 'chat',
})
// 监听 provider 变化，自动填充默认 Base URL
watch(() => newModelForm.value.provider, (newProvider) => {
if (newProvider && defaultBaseUrls[newProvider]) {
newModelForm.value.baseUrl = defaultBaseUrls[newProvider]
}
})
// 监听新增弹窗打开，重置连接状态
watch(showAddModelForm, (newVal) => {
if (newVal) {
connectionStatus.value = 'idle'
}
})
// 编辑模型表单
const editForm = ref<ModelForm>({
name: '',
apiKey: '',
apiEndpoint: '',
@@ -38,10 +72,20 @@ export function useModelSettings() {
modelType: '',
})
// 当前编辑的模型ID
const editingModelId = ref<string>('')
// 测试连接状态
const testingConnection = ref(false)
const connectionStatus = ref<'idle' | 'success' | 'error'>('idle')
// 编辑弹窗测试连接状态
const testingEditConnection = ref(false)
const editConnectionStatus = ref<'idle' | 'success' | 'error'>('idle')
// 编辑前模型的状态
const originalStatus = ref<string>('')
// 获取模型列表
const fetchModels = async () => {
modelsLoading.value = true
@@ -99,6 +143,48 @@ export function useModelSettings() {
}
}
// 编辑弹窗测试连接
const testConnectionEdit = async () => {
if (!editForm.value.apiKey || !editForm.value.baseUrl) {
ElMessage.warning('Please enter API Key and Base URL')
return
}
testingEditConnection.value = true
editConnectionStatus.value = 'idle'
try {
const response = await fetch(`${API_BASE}/model/test`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
provider: editForm.value.provider,
model: editForm.value.model,
api_key: editForm.value.apiKey,
base_url: editForm.value.baseUrl,
api_endpoint: editForm.value.apiEndpoint,
}),
})
const result = await response.json()
if (result.success) {
editConnectionStatus.value = 'success'
ElMessage.success(result.message || 'Connection successful!')
} else {
editConnectionStatus.value = 'error'
ElMessage.error(result.message || 'Connection failed')
}
} catch (error: any) {
editConnectionStatus.value = 'error'
ElMessage.error('Connection failed: ' + error.message)
} finally {
testingEditConnection.value = false
}
}
// 添加新模型（初始状态为 inactive，需要测试连接后才能激活）
const addModel = async () => {
if (!newModelForm.value.name || !newModelForm.value.provider || !newModelForm.value.model) {
@@ -120,24 +206,13 @@ export function useModelSettings() {
api_key: newModelForm.value.apiKey,
base_url: newModelForm.value.baseUrl,
api_endpoint: newModelForm.value.apiEndpoint,
status: 'inactive', // 初始状态为未激活
status: connectionStatus.value === 'success' ? 'active' : '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: '',
@@ -146,7 +221,7 @@ export function useModelSettings() {
baseUrl: '',
provider: '',
model: '',
modelType: '',
modelType: 'chat',
}
connectionStatus.value = 'idle'
showAddModelForm.value = false
@@ -193,6 +268,91 @@ export function useModelSettings() {
}
}
// 打开编辑弹窗
const openEditDialog = (model: ModelInfo) => {
editingModelId.value = model.id
editForm.value = {
name: model.name,
apiKey: model.api_key,
apiEndpoint: model.api_endpoint,
baseUrl: model.base_url,
provider: model.provider,
model: model.model,
modelType: model.model_type,
}
originalStatus.value = model.status
editConnectionStatus.value = 'idle'
showEditModelForm.value = true
}
// 更新模型
const updateModel = async () => {
if (!editingModelId.value || !editForm.value.name || !editForm.value.provider || !editForm.value.model) {
ElMessage.warning('Please fill in required fields')
return
}
// 根据测试连接结果设置状态
// 用户测试通过 -> active
// 用户测试失败 -> error
// 用户没有测试 -> inactive
let newStatus = 'inactive'
if (editConnectionStatus.value === 'success') {
newStatus = 'active'
} else if (editConnectionStatus.value === 'error') {
newStatus = 'error'
}
try {
const response = await fetch(`${API_BASE}/model/${editingModelId.value}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: editForm.value.name,
model_type: editForm.value.modelType || 'chat',
provider: editForm.value.provider,
model: editForm.value.model,
api_key: editForm.value.apiKey,
base_url: editForm.value.baseUrl,
api_endpoint: editForm.value.apiEndpoint,
status: newStatus,
}),
})
if (response.ok) {
const result = await response.json()
const index = models.value.findIndex(m => m.id === editingModelId.value)
if (index !== -1) {
models.value[index] = result
}
showEditModelForm.value = false
ElMessage.success('Model updated successfully')
} else {
const error = await response.json()
ElMessage.error(error.message || 'Failed to update model')
}
} catch (error: any) {
ElMessage.error('Failed to update model: ' + error.message)
}
}
// 取消编辑
const cancelEditModel = () => {
editForm.value = {
name: '',
apiKey: '',
apiEndpoint: '',
baseUrl: '',
provider: '',
model: '',
modelType: '',
}
editingModelId.value = ''
showEditModelForm.value = false
}
return {
// State
models,
@@ -200,15 +360,23 @@ export function useModelSettings() {
modelTypeOptions,
providerOptions,
showAddModelForm,
showEditModelForm,
newModelForm,
editForm,
testingConnection,
connectionStatus,
testingEditConnection,
editConnectionStatus,
// Methods
fetchModels,
testConnection,
testConnectionEdit,
addModel,
cancelAddModel,
deleteModel,
openEditDialog,
updateModel,
cancelEditModel,
}
}