feat: improve models ux

Author: kermanx

ui/src/components/KeysSection.vue

@@ -1,34 +1,20 @@
 <script setup lang="ts">
-import type { ManualConfig } from '@/components/ManualConfigDialog.vue'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { toast } from 'vue-sonner'
 import ManualConfigDialog from '@/components/ManualConfigDialog.vue'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { useKeysStore } from '@/stores'
 
 const emit = defineEmits<{
   configured: [key: string]
 }>()
 
 const { t } = useI18n()
-const keysStore = useKeysStore()
 
 const showEditDialog = ref(false)
 
-async function handleManualConfigSave(config: ManualConfig) {
-  const key = await keysStore.addKey({
-    name: config.name,
-    type: 'manual',
-    protocol: config.protocol,
-    baseUrl: config.baseUrl,
-    token: config.token,
-  })
-
-  emit('configured', key.id)
-  showEditDialog.value = false
-  toast.success(t('success'))
+async function handleManualConfigSave(config: string) {
+  emit('configured', config)
 }
 </script>
 

ui/src/components/ManualConfigCard.vue

@@ -1,26 +1,21 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { toast } from 'vue-sonner'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
-
-export interface ManualConfig {
-  name: string
-  protocol: 'openai'
-  baseUrl: string
-  token: string
-}
+import { useKeysStore } from '@/stores'
 
 const emit = defineEmits<{
-  save: [config: ManualConfig]
+  configured: [id: string]
 }>()
 const { t } = useI18n()
+const keysStore = useKeysStore()
 const open = defineModel<boolean>('open')
 
-const config = ref<ManualConfig>({
+const config = ref({
   name: '',
-  protocol: 'openai',
   baseUrl: '',
   token: '',
 })
@@ -29,17 +24,25 @@ const isConfigValid = computed(() => {
   return config.value.name && config.value.baseUrl && config.value.token
 })
 
-function handleSave() {
+async function handleSave() {
   if (isConfigValid.value) {
-    emit('save', { ...config.value })
+    const key = await keysStore.addKey({
+      name: config.value.name,
+      type: 'manual',
+      protocol: 'openai',
+      baseUrl: config.value.baseUrl,
+      token: config.value.token,
+    })
+    toast.success(t('success'))
+    emit('configured', key.id)
+    open.value = false
     resetConfig()
   }
 }
 
 function resetConfig() {
   config.value = {
     name: '',
-    protocol: 'openai',
     baseUrl: '',
     token: '',
   }
@@ -113,21 +116,23 @@ watch(open, (newValue) => {
 zh-CN:
   title: 手动配置 API
   description: 请输入您的 API 配置信息
-  providerName: 提供商名称
+  providerName: 名称
   providerNamePlaceholder: 例如：OpenAI、Claude 等
   baseUrl: Base URL
   baseUrlPlaceholder: 例如：https://api.openai.com/v1
   apiKey: API Key
   apiKeyPlaceholder: 输入您的 API Key
   save: 保存配置
+  success: 配置成功
 en-US:
   title: Manual API Configuration
   description: Please enter your API configuration information
-  providerName: Provider Name
+  providerName: Name
   providerNamePlaceholder: e.g., OpenAI, Claude, etc.
   baseUrl: Base URL
   baseUrlPlaceholder: e.g., https://api.openai.com/v1
   apiKey: API Key
   apiKeyPlaceholder: Enter your API Key
   save: Save Configuration
+  success: Configured
 </i18n>

ui/src/components/ManualConfigDialog.vue

@@ -6,7 +6,6 @@ import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { Skeleton } from '@/components/ui/skeleton'
 import ProviderPaymentDialog from './ProviderPaymentDialog.vue'
 import ProviderRealNameDialog from './ProviderRealNameDialog.vue'
 
@@ -46,8 +45,7 @@ function handleRecharge() {
 </script>
 
 <template>
-  <Skeleton v-if="userInfo === undefined" class="h-48 w-full max-w-md mx-auto" />
-  <component :is="provider.Login" v-else-if="userInfo === null" />
+ <component :is="provider.Login" v-if="userInfo === null" />
   <Card v-else>
     <CardHeader>
       <CardTitle class="flex items-center gap-2">
@@ -63,11 +61,11 @@ function handleRecharge() {
     </CardHeader>
     <CardContent class="flex-grow">
       <div class="space-y-2">
-        <div v-if="userInfo.name" class="flex justify-between items-center text-sm">
+        <div v-if="userInfo?.name" class="flex justify-between items-center text-sm">
           <span class="text-muted-foreground">{{ t('userName') }}</span>
           <span class="font-medium text-ellipsis max-w-24 text-nowrap overflow-hidden" :title="userInfo.name">{{ userInfo.name }}</span>
         </div>
-        <div v-if="userInfo.verified != null" class="flex justify-between items-center text-sm">
+        <div v-if="userInfo?.verified != null" class="flex justify-between items-center text-sm">
           <span class="text-muted-foreground">{{ t('realname') }}</span>
           <button
             class="font-medium border-b border-dashed border-primary text-primary hover:bg-muted/50 transition-colors"
@@ -76,17 +74,17 @@ function handleRecharge() {
             {{ userInfo.verified ? t('verified') : t('unverified') }}
           </button>
         </div>
-        <div v-if="userInfo.phone" class="flex justify-between items-center text-sm">
+        <div v-if="userInfo?.phone" class="flex justify-between items-center text-sm">
           <span class="text-muted-foreground">{{ t('phone') }}</span>
           <span class="font-medium">{{ userInfo.phone }}</span>
         </div>
-        <div v-if="userInfo.balance != null" class="flex justify-between items-center text-sm">
+        <div v-if="userInfo?.balance != null" class="flex justify-between items-center text-sm">
           <span class="text-muted-foreground">{{ t('balance') }}</span>
           <span class="font-medium">
             {{ userInfo.balance.currency === 'USD' ? '$' : '' }}{{ userInfo.balance.amount }}
             {{ userInfo.balance.currency === 'CNY' ? t('yuan') : userInfo.balance.currency === 'USD' ? '' : `(${userInfo.balance.currency})` }}
           </span>
-        </div>
+        </div>  
       </div>
     </CardContent>
     <CardFooter class="pt-2 flex gap-2">

ui/src/components/ProviderCard.vue

@@ -39,11 +39,7 @@ const showProviderDialog = shallowRef<Provider | null>(null)
       <CardContent>
         <div class="text-sm text-muted-foreground">
           <p>
-            {{ t('description1') }}
-            <a :href="provider.homepage" target="_blank" class="text-blue-900 dark:text-blue-200 hover:underline" @click.stop>
-              {{ provider.name }}
-            </a>
-            {{ t('description2') }}
+            {{ provider.description }}
           </p>
         </div>
       </CardContent>