feat: 扩展 Settings 页面功能
- 优化模型配置表单 - 添加更多设置选项 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useModelSettings } from './settings/useModelSettings'
|
||||
import FormDialog from '@/components/FormDialog.vue'
|
||||
import './settings/settings.css'
|
||||
import './settings/settings-parsing.css'
|
||||
import './settings/modelSettings.css'
|
||||
@@ -498,22 +499,28 @@ const saveStorageSettings = () => {
|
||||
</table>
|
||||
|
||||
<!-- 新增模型弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showAddModelForm"
|
||||
<FormDialog
|
||||
:model-value="showAddModelForm"
|
||||
@update:model-value="showAddModelForm = $event"
|
||||
title="Add New Model"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
class="add-model-dialog"
|
||||
description="Configure your model settings"
|
||||
icon="fa-solid fa-brain"
|
||||
icon-class="bg-gradient-to-br from-primary-orange to-red-500"
|
||||
>
|
||||
<p class="dialog-desc">Configure your model settings</p>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Model Name</label>
|
||||
<input
|
||||
v-model="newModelForm.name"
|
||||
type="text"
|
||||
placeholder="e.g., My GPT-4 Model"
|
||||
class="input-field"
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-form label-position="top" class="settings-form">
|
||||
<el-form-item label="Model Name">
|
||||
<el-input v-model="newModelForm.name" placeholder="e.g., My GPT-4 Model" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Model Type">
|
||||
<el-select v-model="newModelForm.modelType" placeholder="Select model type">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Model Type</label>
|
||||
<el-select v-model="newModelForm.modelType" placeholder="Select model type" class="w-full" size="large" popper-class="dark-select-dropdown">
|
||||
<el-option
|
||||
v-for="type in modelTypeOptions"
|
||||
:key="type.value"
|
||||
@@ -521,10 +528,11 @@ const saveStorageSettings = () => {
|
||||
:value="type.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="Provider">
|
||||
<el-select v-model="newModelForm.provider" placeholder="Select provider">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Provider</label>
|
||||
<el-select v-model="newModelForm.provider" placeholder="Select provider" class="w-full" size="large" popper-class="dark-select-dropdown">
|
||||
<el-option
|
||||
v-for="provider in providerOptions"
|
||||
:key="provider.value"
|
||||
@@ -532,60 +540,86 @@ const saveStorageSettings = () => {
|
||||
:value="provider.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Model">
|
||||
<el-input v-model="newModelForm.model" placeholder="e.g., gpt-4o (OpenAI) or llama3 (Ollama)" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="API Key">
|
||||
<el-input v-model="newModelForm.apiKey" type="password" placeholder="sk-xxxxx (required for OpenAI)" show-password />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Base URL">
|
||||
<el-input v-model="newModelForm.baseUrl" placeholder="https://api.openai.com/v1 (OpenAI) or http://localhost:11434 (Ollama)" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button text @click="cancelAddModel">Cancel</el-button>
|
||||
<el-button
|
||||
:loading="testingConnection"
|
||||
@click="testConnection"
|
||||
class="test-btn"
|
||||
>
|
||||
<i v-if="!testingConnection" class="fa-solid fa-plug"></i>
|
||||
Test Connection
|
||||
</el-button>
|
||||
<el-button type="primary" @click="addModel">Confirm</el-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Model</label>
|
||||
<input
|
||||
v-model="newModelForm.model"
|
||||
type="text"
|
||||
placeholder="e.g., gpt-4o (OpenAI) or llama3 (Ollama)"
|
||||
class="input-field"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">API Key</label>
|
||||
<input
|
||||
v-model="newModelForm.apiKey"
|
||||
type="password"
|
||||
placeholder="sk-xxxxx (required for OpenAI)"
|
||||
class="input-field"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Base URL</label>
|
||||
<input
|
||||
v-model="newModelForm.baseUrl"
|
||||
type="text"
|
||||
placeholder="https://api.openai.com/v1 (OpenAI) or http://localhost:11434 (Ollama)"
|
||||
class="input-field"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 连接状态提示 -->
|
||||
<div v-if="connectionStatus === 'success'" class="connection-status success">
|
||||
<i class="fa-solid fa-check-circle"></i> Connection successful
|
||||
</div>
|
||||
<div v-else-if="connectionStatus === 'error'" class="connection-status error">
|
||||
<i class="fa-solid fa-xmark-circle"></i> Connection failed
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<button class="btn-secondary" @click="cancelAddModel">Cancel</button>
|
||||
<button
|
||||
:disabled="testingConnection"
|
||||
class="btn-primary"
|
||||
@click="testConnection"
|
||||
>
|
||||
<i class="fa-solid fa-plug"></i>
|
||||
Test Connection
|
||||
</button>
|
||||
<button class="btn-primary" @click="addModel">
|
||||
Confirm
|
||||
</button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</FormDialog>
|
||||
|
||||
<!-- 编辑模型弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showEditModelForm"
|
||||
<FormDialog
|
||||
:model-value="showEditModelForm"
|
||||
@update:model-value="showEditModelForm = $event"
|
||||
title="Edit Model"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
class="add-model-dialog"
|
||||
description="Update your model settings"
|
||||
icon="fa-solid fa-pen-to-square"
|
||||
icon-class="bg-gradient-to-br from-primary-cyan to-blue-500"
|
||||
>
|
||||
<p class="dialog-desc">Update your model settings</p>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Model Name</label>
|
||||
<input
|
||||
v-model="editForm.name"
|
||||
type="text"
|
||||
placeholder="e.g., My GPT-4 Model"
|
||||
class="input-field"
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-form label-position="top" class="settings-form">
|
||||
<el-form-item label="Model Name">
|
||||
<el-input v-model="editForm.name" placeholder="e.g., My GPT-4 Model" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Provider">
|
||||
<el-select v-model="editForm.provider" placeholder="Select provider">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Provider</label>
|
||||
<el-select v-model="editForm.provider" placeholder="Select provider" class="w-full" size="large" popper-class="dark-select-dropdown">
|
||||
<el-option
|
||||
v-for="option in providerOptions"
|
||||
:key="option.value"
|
||||
@@ -593,14 +627,21 @@ const saveStorageSettings = () => {
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="Model">
|
||||
<el-input v-model="editForm.model" placeholder="e.g., gpt-4, llama2" />
|
||||
</el-form-item>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Model</label>
|
||||
<input
|
||||
v-model="editForm.model"
|
||||
type="text"
|
||||
placeholder="e.g., gpt-4, llama2"
|
||||
class="input-field"
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-form-item label="Model Type">
|
||||
<el-select v-model="editForm.modelType" placeholder="Select model type">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Model Type</label>
|
||||
<el-select v-model="editForm.modelType" placeholder="Select model type" class="w-full" size="large" popper-class="dark-select-dropdown">
|
||||
<el-option
|
||||
v-for="option in modelTypeOptions"
|
||||
:key="option.value"
|
||||
@@ -608,38 +649,52 @@ const saveStorageSettings = () => {
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="API Key">
|
||||
<el-input v-model="editForm.apiKey" type="password" placeholder="sk-..." show-password />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Base URL">
|
||||
<el-input v-model="editForm.baseUrl" placeholder="e.g., https://api.openai.com/v1" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<button class="test-btn" @click="cancelEditModel">Cancel</button>
|
||||
<el-button
|
||||
:loading="testingEditConnection"
|
||||
@click="testConnectionEdit"
|
||||
class="test-btn"
|
||||
>
|
||||
<i v-if="!testingEditConnection" class="fa-solid fa-plug"></i>
|
||||
Test Connection
|
||||
</el-button>
|
||||
<el-button type="primary" @click="updateModel">Confirm</el-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">API Key</label>
|
||||
<input
|
||||
v-model="editForm.apiKey"
|
||||
type="password"
|
||||
placeholder="sk-..."
|
||||
class="input-field"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Base URL</label>
|
||||
<input
|
||||
v-model="editForm.baseUrl"
|
||||
type="text"
|
||||
placeholder="e.g., https://api.openai.com/v1"
|
||||
class="input-field"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 连接状态提示 -->
|
||||
<div v-if="editConnectionStatus === 'success'" class="connection-status success">
|
||||
<i class="fa-solid fa-check-circle"></i> Connection successful
|
||||
</div>
|
||||
<div v-if="editConnectionStatus === 'error'" class="connection-status error">
|
||||
<i class="fa-solid fa-xmark-circle"></i> Connection failed
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<button class="btn-secondary" @click="cancelEditModel">Cancel</button>
|
||||
<button
|
||||
:disabled="testingEditConnection"
|
||||
class="btn-primary"
|
||||
@click="testConnectionEdit"
|
||||
>
|
||||
<i class="fa-solid fa-plug"></i>
|
||||
Test Connection
|
||||
</button>
|
||||
<button class="btn-primary" @click="updateModel">
|
||||
Confirm
|
||||
</button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</FormDialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user