refactor(frontend): 优化 Providers 功能模块

- 改进 ProviderFormDialog, KeyFormDialog, EndpointFormDialog 等组件
- 优化 ModelsTab 组件
This commit is contained in:
fawney19
2025-12-12 20:22:03 +08:00
parent 0e1de65eb3
commit 18ce6637b6
4 changed files with 28 additions and 30 deletions

View File

@@ -155,19 +155,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import { Dialog } from '@/components/ui' import {
import Button from '@/components/ui/button.vue' Dialog,
import Input from '@/components/ui/input.vue' Button,
import Label from '@/components/ui/label.vue' Input,
import Select from '@/components/ui/select.vue' Label,
import SelectTrigger from '@/components/ui/select-trigger.vue' Select,
import SelectValue from '@/components/ui/select-value.vue' SelectTrigger,
import SelectContent from '@/components/ui/select-content.vue' SelectValue,
import SelectItem from '@/components/ui/select-item.vue' SelectContent,
SelectItem,
} from '@/components/ui'
import { Link, SquarePen } from 'lucide-vue-next' import { Link, SquarePen } from 'lucide-vue-next'
import { useToast } from '@/composables/useToast' import { useToast } from '@/composables/useToast'
import { useFormDialog } from '@/composables/useFormDialog' import { useFormDialog } from '@/composables/useFormDialog'
import { parseNumberInput } from '@/utils/form' import { parseNumberInput } from '@/utils/form'
import { log } from '@/utils/logger'
import { import {
createEndpoint, createEndpoint,
updateEndpoint, updateEndpoint,
@@ -184,8 +187,8 @@ const props = defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
'update:modelValue': [value: boolean] 'update:modelValue': [value: boolean]
'endpoint-created': [] 'endpointCreated': []
'endpoint-updated': [] 'endpointUpdated': []
}>() }>()
const { success, error: showError } = useToast() const { success, error: showError } = useToast()
@@ -216,7 +219,7 @@ const loadApiFormats = async () => {
const response = await adminApi.getApiFormats() const response = await adminApi.getApiFormats()
apiFormats.value = response.formats apiFormats.value = response.formats
} catch (error) { } catch (error) {
console.error('加载API格式失败:', error) log.error('加载API格式失败:', error)
if (!isEditMode.value) { if (!isEditMode.value) {
showError('加载API格式失败', '错误') showError('加载API格式失败', '错误')
} }
@@ -298,7 +301,7 @@ const handleSubmit = async () => {
}) })
success('端点已更新', '保存成功') success('端点已更新', '保存成功')
emit('endpoint-updated') emit('endpointUpdated')
} else if (props.provider) { } else if (props.provider) {
// 创建端点 // 创建端点
await createEndpoint(props.provider.id, { await createEndpoint(props.provider.id, {
@@ -314,7 +317,7 @@ const handleSubmit = async () => {
}) })
success('端点创建成功', '成功') success('端点创建成功', '成功')
emit('endpoint-created') emit('endpointCreated')
resetForm() resetForm()
} }

View File

@@ -248,15 +248,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import { Dialog } from '@/components/ui' import { Dialog, Button, Input, Label } from '@/components/ui'
import Button from '@/components/ui/button.vue'
import Input from '@/components/ui/input.vue'
import Label from '@/components/ui/label.vue'
import { Key, SquarePen } from 'lucide-vue-next' import { Key, SquarePen } from 'lucide-vue-next'
import { useToast } from '@/composables/useToast' import { useToast } from '@/composables/useToast'
import { useFormDialog } from '@/composables/useFormDialog' import { useFormDialog } from '@/composables/useFormDialog'
import { parseApiError } from '@/utils/errorParser' import { parseApiError } from '@/utils/errorParser'
import { parseNumberInput } from '@/utils/form' import { parseNumberInput } from '@/utils/form'
import { log } from '@/utils/logger'
import { import {
addEndpointKey, addEndpointKey,
updateEndpointKey, updateEndpointKey,
@@ -316,7 +314,7 @@ async function loadCapabilities() {
try { try {
availableCapabilities.value = await getAllCapabilities() availableCapabilities.value = await getAllCapabilities()
} catch (err) { } catch (err) {
console.error('Failed to load capabilities:', err) log.error('Failed to load capabilities:', err)
} }
} }

View File

@@ -68,7 +68,7 @@
variant="ghost" variant="ghost"
size="icon" size="icon"
:title="provider.is_active ? '点击停用' : '点击启用'" :title="provider.is_active ? '点击停用' : '点击启用'"
@click="$emit('toggle-status', provider)" @click="$emit('toggleStatus', provider)"
> >
<Power class="w-4 h-4" /> <Power class="w-4 h-4" />
</Button> </Button>
@@ -699,7 +699,7 @@ const props = defineProps<Props>()
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:open', value: boolean): void (e: 'update:open', value: boolean): void
(e: 'edit', provider: any): void (e: 'edit', provider: any): void
(e: 'toggle-status', provider: any): void (e: 'toggleStatus', provider: any): void
(e: 'refresh'): void (e: 'refresh'): void
}>() }>()
@@ -1107,9 +1107,6 @@ async function handleDrop(event: DragEvent, targetKey: EndpointAPIKey, endpoint:
return return
} }
const draggedKey = keys[draggedIndex]
const draggedKeyOriginalPriority = draggedKey.internal_priority ?? draggedIndex
// 记录原始优先级分组(排除被拖动的密钥) // 记录原始优先级分组(排除被拖动的密钥)
// key: 原始优先级值, value: 密钥ID数组 // key: 原始优先级值, value: 密钥ID数组
const originalGroups = new Map<number, string[]>() const originalGroups = new Map<number, string[]>()
@@ -1251,7 +1248,7 @@ async function copyToClipboard(text: string) {
try { try {
await navigator.clipboard.writeText(text) await navigator.clipboard.writeText(text)
showSuccess('已复制到剪贴板') showSuccess('已复制到剪贴板')
} catch (err) { } catch {
showError('复制失败', '错误') showError('复制失败', '错误')
} }
} }
@@ -1287,7 +1284,7 @@ async function loadEndpoints() {
try { try {
const keys = await getEndpointKeys(endpoint.id) const keys = await getEndpointKeys(endpoint.id)
return { ...endpoint, keys } return { ...endpoint, keys }
} catch (err) { } catch {
// 如果获取密钥失败,返回空数组 // 如果获取密钥失败,返回空数组
return { ...endpoint, keys: [] } return { ...endpoint, keys: [] }
} }

View File

@@ -209,8 +209,8 @@ const props = defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
'update:modelValue': [value: boolean] 'update:modelValue': [value: boolean]
'provider-created': [] 'providerCreated': []
'provider-updated': [] 'providerUpdated': []
}>() }>()
const { success, error: showError } = useToast() const { success, error: showError } = useToast()
@@ -319,12 +319,12 @@ const handleSubmit = async () => {
// 更新提供商 // 更新提供商
await updateProvider(props.provider.id, payload) await updateProvider(props.provider.id, payload)
success('提供商更新成功') success('提供商更新成功')
emit('provider-updated') emit('providerUpdated')
} else { } else {
// 创建提供商 // 创建提供商
await createProvider(payload) await createProvider(payload)
success('提供商已创建,请继续添加端点和密钥,或在优先级管理中调整顺序', '创建成功') success('提供商已创建,请继续添加端点和密钥,或在优先级管理中调整顺序', '创建成功')
emit('provider-created') emit('providerCreated')
} }
emit('update:modelValue', false) emit('update:modelValue', false)