Skip to content

Commit cdc5b4e

Browse files
kermanxkermanx
committed
refactor: decouple siliconflow
1 parent 8d31ceb commit cdc5b4e

18 files changed

+882
-1120
lines changed

‎frontend/src/components/AddKeyDialog.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang="ts">
22
import { useI18n } from 'vue-i18n'
33
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
4+
import { useProvidersStore } from '@/stores'
45
import ManualConfigCard from './ManualConfigCard.vue'
5-
import SiliconFlowCard from './SiliconFlowCard.vue'
6+
import ProviderCard from './ProviderCard.vue'
67
78
const emit = defineEmits<{
89
configured: [key: string]
@@ -11,6 +12,7 @@ const emit = defineEmits<{
1112
const open = defineModel<boolean>('open')
1213
1314
const { t } = useI18n()
15+
const providersStore = useProvidersStore()
1416
1517
async function handleConfigured(key: string) {
1618
emit('configured', key)
@@ -29,7 +31,7 @@ async function handleConfigured(key: string) {
2931
</DialogHeader>
3032

3133
<div class="mt-6 space-y-6">
32-
<SiliconFlowCard show-title @configured="handleConfigured" />
34+
<ProviderCard v-for="provider in providersStore.list" :key="provider.id" :provider="provider" @configured="handleConfigured" />
3335
<ManualConfigCard @configured="handleConfigured" />
3436
</div>
3537
</DialogContent>

‎frontend/src/components/KeySelector.vue‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
<script setup lang="ts">
2+
import type { Provider } from '@/lib/providers'
23
import { Plus } from 'lucide-vue-next'
3-
import { onMounted, ref, watchEffect } from 'vue'
4+
import { onMounted, ref, shallowRef, watchEffect } from 'vue'
45
import { useI18n } from 'vue-i18n'
56
import { Badge } from '@/components/ui/badge'
67
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
7-
import { useKeysStore } from '@/stores'
8+
import { useKeysStore, useProvidersStore } from '@/stores'
89
import AddKeyDialog from './AddKeyDialog.vue'
910
import ManualConfigCard from './ManualConfigCard.vue'
10-
import SiliconFlowConfigDialog from './SiliconFlowConfigDialog.vue'
11+
import ProviderConfigDialog from './ProviderConfigDialog.vue'
1112
import Button from './ui/button/Button.vue'
1213
1314
const props = defineProps<{
1415
compact?: boolean
1516
}>()
1617
const selectedKeyId = defineModel<string>()
17-
const { t } = useI18n()
18+
19+
const providersStore = useProvidersStore()
1820
const keysStore = useKeysStore()
21+
const { t } = useI18n()
1922
2023
const openAddKeyDialog = ref(false)
21-
const showSiliconFlowConfig = ref(false)
24+
const showProviderDialog = shallowRef<Provider | null>(null)
2225
2326
onMounted(() => keysStore.loadKeys())
2427
@@ -50,11 +53,11 @@ watchEffect(() => {
5053
<template v-else>
5154
<div class="grid gap-4 grid-cols-2 mb-4">
5255
<!-- SiliconFlow configuration card (if not configured) -->
53-
<Card class="relative gap-2">
56+
<Card v-for="provider in providersStore.list" :key="provider.id" class="relative gap-2">
5457
<CardHeader>
5558
<div class="flex items-center justify-between">
5659
<CardTitle class="text-lg">
57-
{{ t('siliconFlow') }}
60+
{{ provider.name }}
5861
</CardTitle>
5962
</div>
6063
</CardHeader>
@@ -72,8 +75,8 @@ watchEffect(() => {
7275
</CardContent>
7376

7477
<CardFooter>
75-
<Button class="w-full" @click="showSiliconFlowConfig = true">
76-
{{ t('configureSiliconFlow') }}
78+
<Button class="w-full" @click="showProviderDialog = provider">
79+
{{ t('configure', [provider.name]) }}
7780
</Button>
7881
</CardFooter>
7982
</Card>
@@ -113,9 +116,10 @@ watchEffect(() => {
113116
</div>
114117
</div>
115118

116-
<SiliconFlowConfigDialog
117-
v-model:open="showSiliconFlowConfig"
118-
@configured="selectedKeyId = $event"
119+
<ProviderConfigDialog
120+
v-if="showProviderDialog != null"
121+
:provider="showProviderDialog"
122+
@close="showProviderDialog = null"
119123
/>
120124
<AddKeyDialog v-model:open="openAddKeyDialog" @configured="selectedKeyId = $event" />
121125
</div>
@@ -126,19 +130,17 @@ en-US:
126130
loadingKeys: Loading...
127131
noKeysAvailable: No providers configured
128132
addNewKey: Add Provider
129-
siliconFlow: SiliconFlow
130133
siliconFlowDescription1: Purchase and configure API through
131134
siliconFlowDescription2: ' '
132-
configureSiliconFlow: Configure SiliconFlow
135+
configure: Configure {0}
133136
selectKey: Provider
134137
135138
zh-CN:
136139
loadingKeys: 加载中
137140
noKeysAvailable: 未配置提供商
138141
addNewKey: 添加提供商
139-
siliconFlow: 硅基流动
140142
siliconFlowDescription1: 通过
141143
siliconFlowDescription2: 购买和配置 API
142-
configureSiliconFlow: 配置 硅基流动
144+
configure: 配置 {0}
143145
selectKey: 提供商
144146
</i18n>

‎frontend/src/components/KeysSection.vue‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
<script setup lang="ts">
2+
import type { Provider } from '@/lib/providers'
23
import type { APIKey } from '@/stores'
34
import { Edit } from 'lucide-vue-next'
4-
import { onMounted, ref } from 'vue'
5+
import { onMounted, ref, shallowRef } from 'vue'
56
import { VueDraggable } from 'vue-draggable-plus'
67
import { useI18n } from 'vue-i18n'
78
import EditKeyDialog from '@/components/EditKeyDialog.vue'
89
import ManualConfigCard from '@/components/ManualConfigCard.vue'
9-
import SiliconFlowConfigDialog from '@/components/SiliconFlowConfigDialog.vue'
10+
import ProviderConfigDialog from '@/components/ProviderConfigDialog.vue'
1011
import { Badge } from '@/components/ui/badge'
1112
import { Button } from '@/components/ui/button'
1213
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
1314
import { Skeleton } from '@/components/ui/skeleton'
14-
import { useKeysStore, useSiliconFlowStore } from '@/stores'
15+
import { useKeysStore, useProvidersStore } from '@/stores'
1516
1617
const { t } = useI18n()
1718
const keysStore = useKeysStore()
18-
const siliconFlowStore = useSiliconFlowStore()
19-
const showSiliconFlowConfig = ref(false)
19+
const providersStore = useProvidersStore()
20+
21+
const showProviderDialog = shallowRef<Provider | null>(null)
2022
const showEditDialog = ref(false)
2123
const editingKey = ref<APIKey | null>(null)
2224
2325
function editKey(key: APIKey) {
24-
if (key.type === 'siliconflow') {
25-
showSiliconFlowConfig.value = true
26+
if (providersStore.map[key.type]) {
27+
showProviderDialog.value = providersStore.map[key.type]
2628
return
2729
}
2830
editingKey.value = key
@@ -36,7 +38,6 @@ function formatUrl(url: string): string {
3638
3739
onMounted(() => {
3840
keysStore.loadKeys()
39-
siliconFlowStore.checkLoginStatus()
4041
})
4142
</script>
4243

@@ -65,21 +66,21 @@ onMounted(() => {
6566
<!-- Static cards for configuration (not draggable) -->
6667
<div class="grid gap-4 grid-cols-2 mb-4">
6768
<!-- SiliconFlow configuration card (if not configured) -->
68-
<Card class="relative gap-2">
69+
<Card v-for="provider in providersStore.list" :key="provider.id" class="relative gap-2">
6970
<CardHeader>
7071
<div class="flex items-center justify-between">
7172
<CardTitle class="text-lg">
7273
{{ t('siliconFlow') }}
7374
</CardTitle>
74-
<div v-show="!siliconFlowStore.isLoading" class="flex items-center gap-2">
75+
<div v-show="provider.user !== undefined" class="flex items-center gap-2">
7576
<span
7677
class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium text-accent-foreground"
7778
:class="{
78-
'bg-emerald-200 dark:bg-green-500/60': siliconFlowStore.isLoggedIn,
79-
'bg-accent': !siliconFlowStore.isLoggedIn,
79+
'bg-emerald-200 dark:bg-green-500/60': !!provider.user,
80+
'bg-accent': !provider.user,
8081
}"
8182
>
82-
{{ siliconFlowStore.isLoggedIn ? t('loggedIn') : t('loggedOut') }}
83+
{{ provider.user ? t('loggedIn') : t('loggedOut') }}
8384
</span>
8485
</div>
8586
</div>
@@ -98,7 +99,7 @@ onMounted(() => {
9899
</CardContent>
99100

100101
<CardFooter>
101-
<Button class="w-full" @click="showSiliconFlowConfig = true">
102+
<Button class="w-full" @click="showProviderDialog = provider">
102103
{{ t('configureSiliconFlow') }}
103104
</Button>
104105
</CardFooter>
@@ -158,9 +159,10 @@ onMounted(() => {
158159
</VueDraggable>
159160
</div>
160161

161-
<!-- Dialog Components -->
162-
<SiliconFlowConfigDialog
163-
v-model:open="showSiliconFlowConfig"
162+
<ProviderConfigDialog
163+
v-if="showProviderDialog != null"
164+
:provider="showProviderDialog"
165+
@close="showProviderDialog = null"
164166
/>
165167

166168
<EditKeyDialog

0 commit comments

Comments
 (0)