Skip to content

Commit f0c9805

Browse files
kermanxkermanx
committed
feat: ProvidersListCard
1 parent eaebcd7 commit f0c9805

File tree

5 files changed

+101
-13
lines changed

5 files changed

+101
-13
lines changed

‎ui/src/components/ManualConfigCard.vue‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,17 @@ async function handleManualConfigSave(config: ManualConfig) {
4949
</CardContent>
5050

5151
<CardFooter>
52-
<Button class="w-full" variant="secondary" @click="showEditDialog = true">
53-
{{ t('add') }}
54-
</Button>
52+
<ManualConfigDialog
53+
v-model:open="showEditDialog"
54+
@save="handleManualConfigSave"
55+
>
56+
<template #trigger>
57+
<Button class="w-full" variant="secondary" @click="showEditDialog = true">
58+
{{ t('add') }}
59+
</Button>
60+
</template>
61+
</ManualConfigDialog>
5562
</CardFooter>
56-
57-
<ManualConfigDialog
58-
v-model:open="showEditDialog"
59-
@save="handleManualConfigSave"
60-
/>
6163
</Card>
6264
</template>
6365

‎ui/src/components/ManualConfigDialog.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { computed, ref, watch } from 'vue'
33
import { useI18n } from 'vue-i18n'
44
import { Button } from '@/components/ui/button'
5-
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
5+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
66
import { Input } from '@/components/ui/input'
77
88
export interface ManualConfig {
@@ -54,6 +54,10 @@ watch(open, (newValue) => {
5454

5555
<template>
5656
<Dialog v-model:open="open">
57+
<DialogTrigger>
58+
<slot name="trigger" />
59+
</DialogTrigger>
60+
5761
<DialogContent class="sm:max-w-lg">
5862
<DialogHeader>
5963
<DialogTitle>{{ t('title') }}</DialogTitle>

‎ui/src/components/ProviderName.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ defineProps<{
77
</script>
88

99
<template>
10-
<div class="flex gap-2 items-center text-lg">
10+
<div class="flex gap-2 items-center">
1111
<img :src="provider.logo" :alt="provider.name" class="w-5 mb-1 rounded">
1212
{{ provider.name }}
1313
</div>

‎ui/src/components/ProvidersListCard.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<script setup lang="ts">
2+
import type { Provider } from '@/lib/providers'
3+
import { ListPlusIcon } from 'lucide-vue-next'
4+
import { shallowRef } from 'vue'
5+
import { useI18n } from 'vue-i18n'
6+
import ProviderName from '@/components/ProviderName.vue'
7+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
8+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
9+
import { useProviders } from '@/lib/providers'
10+
import ManualConfigDialog from './ManualConfigDialog.vue'
11+
import ProviderConfigDialog from './ProviderConfigDialog.vue'
12+
13+
const { t } = useI18n()
14+
15+
const providers = useProviders()
16+
17+
const showProviderDialog = shallowRef<Provider | null>(null)
18+
</script>
19+
20+
<template>
21+
<Dialog>
22+
<DialogTrigger>
23+
<Card class="relative gap-2 hover:bg-secondary text-left">
24+
<CardHeader>
25+
<CardTitle>
26+
{{ t('title') }}
27+
</CardTitle>
28+
</CardHeader>
29+
<CardContent>
30+
123
31+
</CardContent>
32+
</Card>
33+
</DialogTrigger>
34+
<DialogContent class="sm:max-w-lg">
35+
<DialogHeader>
36+
<DialogTitle>{{ t('title') }}</DialogTitle>
37+
<DialogDescription>
38+
{{ t('description') }}
39+
</DialogDescription>
40+
</DialogHeader>
41+
42+
<div class="flex flex-col gap-2">
43+
<div v-for="provider in providers" :key="provider.id" class="p-4 border rounded-lg hover:bg-secondary" @click="showProviderDialog = provider">
44+
<ProviderName :provider="provider" class="font-medium" />
45+
</div>
46+
<ManualConfigDialog>
47+
<template #trigger>
48+
<div class="p-4 border rounded-lg hover:bg-secondary">
49+
<div class="flex gap-2 items-center">
50+
<ListPlusIcon class="w-5 mb-1 rounded" />
51+
{{ t('manual') }}
52+
</div>
53+
</div>
54+
</template>
55+
</ManualConfigDialog>
56+
</div>
57+
</DialogContent>
58+
</Dialog>
59+
60+
<ProviderConfigDialog
61+
v-if="showProviderDialog != null"
62+
:provider="showProviderDialog"
63+
@close="showProviderDialog = null"
64+
/>
65+
</template>
66+
67+
<i18n lang="yaml">
68+
zh-CN:
69+
title: 其他提供商
70+
description: 请输入您的 API 配置信息
71+
manual: 手动配置
72+
en-US:
73+
title: Manual API Configuration
74+
description: Please enter your API configuration information
75+
providerName: Provider Name
76+
providerNamePlaceholder: e.g., OpenAI, Claude, etc.
77+
baseUrl: Base URL
78+
baseUrlPlaceholder: e.g., https://api.openai.com/v1
79+
apiKey: API Key
80+
apiKeyPlaceholder: Enter your API Key
81+
save: Save Configuration
82+
</i18n>

‎ui/src/components/ProvidersSection.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
import type { Provider } from '@/lib/providers'
33
import { shallowRef } from 'vue'
44
import { useI18n } from 'vue-i18n'
5-
import ManualConfigCard from '@/components/ManualConfigCard.vue'
65
import ProviderConfigDialog from '@/components/ProviderConfigDialog.vue'
76
import ProviderName from '@/components/ProviderName.vue'
87
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
98
import { useProviders } from '@/lib/providers'
9+
import ProvidersListCard from './ProvidersListCard.vue'
1010
1111
const { t } = useI18n()
1212
const providers = useProviders()
@@ -19,7 +19,7 @@ const showProviderDialog = shallowRef<Provider | null>(null)
1919
<Card v-for="provider in providers" :key="provider.id" class="relative gap-2 hover:bg-secondary" @click="showProviderDialog = provider">
2020
<CardHeader>
2121
<div class="flex items-center justify-between flex-wrap gap-2">
22-
<CardTitle class="flex ">
22+
<CardTitle class="flex text-lg min-w-0">
2323
<ProviderName :provider="provider" />
2424
</CardTitle>
2525
<div v-if="provider.user !== undefined" class="flex items-center gap-2 self-end">
@@ -49,7 +49,7 @@ const showProviderDialog = shallowRef<Provider | null>(null)
4949
</CardContent>
5050
</Card>
5151

52-
<ManualConfigCard class="relative gap-2" />
52+
<ProvidersListCard />
5353
</div>
5454

5555
<ProviderConfigDialog

0 commit comments

Comments
 (0)