refactor: providers directory structure

Author: kermanx

ui/src/components/AddKeyDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { useProvidersStore } from '@/stores'
+import { useProviders } from '@/lib/providers'
 import ManualConfigCard from './ManualConfigCard.vue'
 import ProviderCard from './ProviderCard.vue'
 
@@ -12,7 +12,7 @@ const emit = defineEmits<{
 const open = defineModel<boolean>('open')
 
 const { t } = useI18n()
-const providersStore = useProvidersStore()
+const providers = useProviders()
 
 async function handleConfigured(key: string) {
   emit('configured', key)
@@ -31,7 +31,7 @@ async function handleConfigured(key: string) {
       </DialogHeader>
 
       <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-        <ProviderCard v-for="provider in providersStore.list" :key="provider.id" :provider="provider" @configured="handleConfigured" />
+        <ProviderCard v-for="provider in providers" :key="provider.id" :provider="provider" @configured="handleConfigured" />
         <ManualConfigCard @configured="handleConfigured" />
       </div>
     </DialogContent>

ui/src/components/KeySelector.vue

@@ -5,7 +5,8 @@ import { onMounted, ref, shallowRef, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { useKeysStore, useProvidersStore } from '@/stores'
+import { useProviders } from '@/lib/providers'
+import { useKeysStore } from '@/stores'
 import AddKeyDialog from './AddKeyDialog.vue'
 import ManualConfigCard from './ManualConfigCard.vue'
 import ProviderConfigDialog from './ProviderConfigDialog.vue'
@@ -16,7 +17,7 @@ const props = defineProps<{
 }>()
 const selectedKeyId = defineModel<string>()
 
-const providersStore = useProvidersStore()
+const providers = useProviders()
 const keysStore = useKeysStore()
 const { t } = useI18n()
 
@@ -52,7 +53,7 @@ watchEffect(() => {
       </template>
       <template v-else>
         <div class="grid gap-4 grid-cols-2 mb-4">
-          <Card v-for="provider in providersStore.list" :key="provider.id" class="relative gap-2">
+          <Card v-for="provider in providers" :key="provider.id" class="relative gap-2">
             <CardHeader>
               <div class="flex items-center justify-between">
                 <CardTitle class="text-lg">

ui/src/components/KeysSection.vue

@@ -12,19 +12,20 @@ import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
-import { useKeysStore, useProvidersStore } from '@/stores'
+import { useProviders } from '@/lib/providers'
+import { useKeysStore } from '@/stores'
 
 const { t } = useI18n()
 const keysStore = useKeysStore()
-const providersStore = useProvidersStore()
+const providers = useProviders()
 
 const showProviderDialog = shallowRef<Provider | null>(null)
 const showEditDialog = ref(false)
 const editingKey = ref<APIKey | null>(null)
 
 function editKey(key: APIKey) {
-  if (providersStore.map[key.type]) {
-    showProviderDialog.value = providersStore.map[key.type]
+  if (providers[key.type]) {
+    showProviderDialog.value = providers[key.type]
     return
   }
   editingKey.value = key
@@ -66,7 +67,7 @@ onMounted(() => {
       <!-- Static cards for configuration (not draggable) -->
       <div class="grid gap-4 grid-cols-2 lg:grid-cols-3 mb-4">
         <!-- SiliconFlow configuration card (if not configured) -->
-        <Card v-for="provider in providersStore.list" :key="provider.id" class="relative gap-2">
+        <Card v-for="provider in providers" :key="provider.id" class="relative gap-2">
           <CardHeader>
             <div class="flex items-center justify-between">
               <CardTitle class="text-lg">

ui/src/components/ProvidersSection.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { Provider } from '@/lib/providers'
+import { shallowRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ManualConfigCard from '@/components/ManualConfigCard.vue'
+import ProviderConfigDialog from '@/components/ProviderConfigDialog.vue'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { useProviders } from '@/lib/providers'
+
+const { t } = useI18n()
+const providers = useProviders()
+
+const showProviderDialog = shallowRef<Provider | null>(null)
+</script>
+
+<template>
+  <div class="space-y-6 flex-grow flex flex-col min-h-100">
+    <div class="flex items-center justify-between">
+      <h2 class="text-2xl font-bold">
+        {{ t('title') }}
+      </h2>
+    </div>
+
+    <div class="flex-grow flex flex-col">
+      <!-- Static cards for configuration (not draggable) -->
+      <div class="grid gap-4 grid-cols-2 lg:grid-cols-3 mb-4">
+        <!-- SiliconFlow configuration card (if not configured) -->
+        <Card v-for="provider in providers" :key="provider.id" class="relative gap-2">
+          <CardHeader>
+            <div class="flex items-center justify-between">
+              <CardTitle class="text-lg">
+                {{ provider.name }}
+              </CardTitle>
+              <div v-show="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="{
+                    'bg-emerald-200 dark:bg-green-500/60': !!provider.user,
+                    'bg-accent': !provider.user,
+                  }"
+                >
+                  {{ provider.user ? t('loggedIn') : t('loggedOut') }}
+                </span>
+              </div>
+            </div>
+          </CardHeader>
+
+          <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">
+                  {{ provider.name }}
+                </a>
+                {{ t('description2') }}
+              </p>
+            </div>
+          </CardContent>
+
+          <CardFooter>
+            <Button class="w-full" @click="showProviderDialog = provider">
+              {{ t('configure', [provider.name]) }}
+            </Button>
+          </CardFooter>
+        </Card>
+
+        <!-- Manual Configuration Provider Card -->
+        <ManualConfigCard class="relative gap-2" />
+      </div>
+    </div>
+
+    <ProviderConfigDialog
+      v-if="showProviderDialog != null"
+      :provider="showProviderDialog"
+      @close="showProviderDialog = null"
+    />
+  </div>
+</template>
+
+<i18n lang="yaml">
+zh-CN:
+  title: 模型供应商
+  loadFailed: 加载失败
+  description1: 通过
+  description2: 购买和配置 API
+  loggedIn: 已登录
+  loggedOut: 未登录
+  configure: 配置 {0}
+
+en-US:
+  title: Model Providers
+  loadFailed: Failed to load
+  description1: Purchase and configure API through
+  description2: ''
+  loggedIn: Logged In
+  loggedOut: Logged Out
+  configure: Configure {0}
+</i18n>

ui/src/components/GeetestCaptcha.vue renamed to ui/src/components/captcha/GeetestCaptcha.vue

@@ -3,7 +3,7 @@ import { useScriptTag } from '@vueuse/core'
 import { VisuallyHidden } from 'reka-ui'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from './ui/dialog'
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '../ui/dialog'
 
 const state = ref<'loading' | 'init' | 'pending' | 'success'>('loading')
 

ui/src/components/ShumeiCaptcha.vue renamed to ui/src/components/captcha/ShumeiCaptcha.vue

@@ -2,12 +2,12 @@
 import { computed, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
+import ShumeiCaptcha, { deviceId } from '@/components/captcha/ShumeiCaptcha.vue'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { useDeepSeekProvider } from '@/lib/providers/deepseek'
 import { useKeysStore } from '@/stores'
-import ShumeiCaptcha, { deviceId } from './ShumeiCaptcha.vue'
+import { useDeepSeekProvider } from '.'
 
 const { t, locale } = useI18n()
 const keysStore = useKeysStore()

ui/src/components/DeepSeekLoginCard.vue renamed to ui/src/lib/providers/deepseek/Login.vue

@@ -1,8 +1,8 @@
-import type { ProviderUserInfo } from './index'
+import type { ProviderUserInfo } from '@/lib/providers'
 import { defineAsyncComponent, ref } from 'vue'
+import { useI18n } from '@/lib/locals'
+import { defineProvider, useProviderSession } from '@/lib/providers'
 import { useServiceStore } from '@/stores'
-import { useI18n } from '../locals'
-import { defineProvider, useProviderSession } from './index'
 
 export const useDeepSeekProvider = defineProvider(() => {
   const { t } = useI18n({
@@ -52,6 +52,9 @@ export const useDeepSeekProvider = defineProvider(() => {
     get name() {
       return t('providerName')
     },
+    get logo() {
+      return import.meta.resolve('./logo.png')
+    },
     homepage: 'https://www.deepseek.com/',
 
     get user() {
@@ -90,7 +93,7 @@ export const useDeepSeekProvider = defineProvider(() => {
       }
     },
 
-    Login: defineAsyncComponent(() => import('@/components/DeepSeekLoginCard.vue')),
+    Login: defineAsyncComponent(() => import('@/lib/providers/deepseek/Login.vue')),
     async logout() {
       await session.delete()
       user.value = null

ui/src/lib/providers/deepseek.ts renamed to ui/src/lib/providers/deepseek/index.ts

@@ -1,6 +1,10 @@
 import type { Component } from 'vue'
 import { createSharedComposable } from '@vueuse/core'
+import { markRaw } from 'vue'
 import { defineDbStore } from '@/stores/db'
+import { useDeepSeekProvider } from './deepseek'
+import { useOpenRouterProvider } from './openrouter'
+import { useSiliconFlowProvider } from './siliconflow'
 
 export interface ProviderUserInfo {
   name: string
@@ -17,9 +21,13 @@ export interface ProviderVerificationInfo {
   time?: number
 }
 
-export interface Provider<A> {
+export interface Provider<A = unknown> {
   readonly id: string
   readonly name: string
+  /**
+   * Reference: https://github.com/CherryHQ/cherry-studio/tree/main/src/renderer/src/assets/images/providers
+   */
+  readonly logo: string
   readonly homepage: string
 
   /**
@@ -89,3 +97,18 @@ export function useProviderSession<T>(providerId: string) {
 export function defineProvider<A>(provider: () => Provider<A>): () => Provider<A> {
   return createSharedComposable(provider)
 }
+
+export const useProviders = createSharedComposable(() => {
+  const list = [
+    useSiliconFlowProvider(),
+    useDeepSeekProvider(),
+    useOpenRouterProvider(),
+  ]
+  const map = Object.fromEntries(list.map(p => [p.id, markRaw(p)])) as Record<string, Provider>
+
+  for (const provider of list) {
+    provider.refreshUser()
+  }
+
+  return map
+})