feat: improve providers section

Author: kermanx

ui/src/components/KeysSection.vue

@@ -200,7 +200,7 @@ en-US:
   loadFailed: Failed to load
   description1: Purchase and configure API through
   description2: ''
-  loggedIn: Logged In
+  loggedIn: Configured
   loggedOut: Logged Out
   configure: Configure {0}
 </i18n>

ui/src/components/ProviderCard.vue

@@ -127,8 +127,8 @@ zh-CN:
   confirm: 确认
   userName: 用户名
 en-US:
-  loggedIn: Logged in
-  realname: Real Name
+  loggedIn: Configured
+  realname: Legal Name
   verified: Verified
   unverified: Unverified
   phone: Phone

ui/src/components/ProviderRealNameDialog.vue

@@ -119,7 +119,7 @@ async function checkAuthStatus() {
       </DialogHeader>
 
       <div v-if="status" class="space-y-4">
-        <Card>
+        <Card class="gap-y-2">
           <CardHeader class="pb-3">
             <CardTitle class="text-sm flex items-center gap-2 text-green-700">
               <div class="h-2 w-2 bg-green-500 rounded-full" />
@@ -264,7 +264,7 @@ en-US:
     description: As required by SiliconFlow, please complete real name authentication before recharging
     authStatusDescription: Your real name authentication status
     verified: Verified
-    realName: Real Name
+    realName: Legal Name
     realNamePlaceholder: Please enter your real name
     cardType: ID Type
     idCard: ID Card

ui/src/components/ProvidersListCard.vue

@@ -20,14 +20,19 @@ const showProviderDialog = shallowRef<Provider | null>(null)
 <template>
   <Dialog>
     <DialogTrigger>
-      <Card class="relative gap-2 hover:bg-secondary text-left">
+      <Card class="relative gap-2 hover:bg-secondary text-left h-full">
         <CardHeader>
           <CardTitle>
-            {{ t('title') }}
+            <div class="flex gap-2 items-center text-lg">
+              <ListPlusIcon class="w-6 mb-1" />
+              {{ t('title') }}
+            </div>
           </CardTitle>
         </CardHeader>
         <CardContent>
-          123
+          <div class="text-sm text-muted-foreground">
+            {{ t('description') }}
+          </div>
         </CardContent>
       </Card>
     </DialogTrigger>
@@ -67,16 +72,10 @@ const showProviderDialog = shallowRef<Provider | null>(null)
 <i18n lang="yaml">
 zh-CN:
   title: 其他提供商
-  description: 请输入您的 API 配置信息
-  manual: 手动配置
+  description: 选择或自定义您的模型提供商
+  manual: 自定义提供商
 en-US:
-  title: Manual API Configuration
-  description: Please enter your API configuration information
-  providerName: Provider 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
+  title: Other Providers
+  description: Select a provider or customize your own
+  manual: Custom Provider
 </i18n>

ui/src/components/ProvidersSection.vue

@@ -15,16 +15,16 @@ const showProviderDialog = shallowRef<Provider | null>(null)
 </script>
 
 <template>
-  <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+  <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
     <Card v-for="provider in providers" :key="provider.id" class="relative gap-2 hover:bg-secondary" @click="showProviderDialog = provider">
       <CardHeader>
         <div class="flex items-center justify-between flex-wrap gap-2">
-          <CardTitle class="flex text-lg min-w-0">
+          <CardTitle class="flex text-lg min-w-34">
             <ProviderName :provider="provider" />
           </CardTitle>
-          <div v-if="provider.user !== undefined" class="flex items-center gap-2 self-end">
+          <div v-if="provider.user !== undefined" class="flex items-center gap-2">
             <span
-              class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium text-accent-foreground"
+              class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium text-accent-foreground select-none"
               :class="{
                 'bg-emerald-200 dark:bg-green-500/60': !!provider.user,
                 'bg-accent': !provider.user,
@@ -73,6 +73,6 @@ en-US:
   loadFailed: Failed to load
   description1: Purchase and configure API through
   description2: ''
-  loggedIn: Logged In
-  loggedOut: Logged Out
+  loggedIn: Configured
+  loggedOut: Configure
 </i18n>

ui/src/views/Models.vue

@@ -23,5 +23,5 @@ zh-CN:
   title: 模型管理
 
 en-US:
-  title: Models
+  title: Model Providers
 </i18n>

ui/src/views/Usage.vue

@@ -148,11 +148,8 @@ onMounted(() => {
     <div class="space-y-6">
       <div class="flex flex-wrap items-center justify-between gap-3">
         <div>
-          <p class="text-xs uppercase tracking-wide text-muted-foreground">
-            {{ t('title') }}
-          </p>
           <h2 class="text-2xl font-bold">
-            {{ t('overview') }}
+            {{ t('title') }}
           </h2>
         </div>
         <div class="flex items-center gap-2">
@@ -388,8 +385,7 @@ onMounted(() => {
 
 <i18n lang="yaml">
 zh-CN:
-  title: Token 用量统计
-  overview: 用量总览
+  title: 用量统计
   last7Days: 最近7天
   last30Days: 最近30天
   last90Days: 最近90天
@@ -414,8 +410,7 @@ zh-CN:
   statusSuccess: 成功
   statusFailed: 失败
 en-US:
-  title: Token Usage Statistics
-  overview: Overview
+  title: Usage Statistics
   last7Days: Last 7 Days
   last30Days: Last 30 Days
   last90Days: Last 90 Days