Skip to content

Commit c9433f4

Browse files
kermanxkermanx
committed
refactor: extract siliconflow login card
1 parent 369b98a commit c9433f4

File tree

2 files changed

+76
-62
lines changed

2 files changed

+76
-62
lines changed

‎frontend/src/components/SiliconFlowCard.vue‎

Lines changed: 3 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { onMounted, ref } from 'vue'
33
import { useI18n } from 'vue-i18n'
44
import { toast } from 'vue-sonner'
5-
import Captcha from '@/components/Captcha.vue'
65
import {
76
AlertDialog,
87
AlertDialogAction,
@@ -15,10 +14,10 @@ import {
1514
AlertDialogTrigger,
1615
} from '@/components/ui/alert-dialog'
1716
import { Button } from '@/components/ui/button'
18-
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
19-
import { Input } from '@/components/ui/input'
17+
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
2018
import { Skeleton } from '@/components/ui/skeleton'
2119
import { useSiliconFlowStore } from '@/stores'
20+
import SiliconFlowLoginCard from './SiliconFlowLoginCard.vue'
2221
import SiliconFlowPaymentDialog from './SiliconFlowPaymentDialog.vue'
2322
import SiliconFlowRealName from './SiliconFlowRealName.vue'
2423
@@ -136,65 +135,7 @@ async function handleCreateKey() {
136135
</Card>
137136

138137
<!-- User not logged in state -->
139-
<Card v-else-if="siliconFlowStore.userInfo">
140-
<CardHeader class="pb-4">
141-
<CardTitle class="text-lg">
142-
{{ t('siliconFlow.loginTitle') }}
143-
</CardTitle>
144-
<CardDescription class="text-sm">
145-
{{ t('siliconFlow.loginDescription') }}
146-
</CardDescription>
147-
</CardHeader>
148-
<CardContent class="space-y-4">
149-
<div class="flex rounded-md border border-input bg-background">
150-
<div class="flex items-center px-3 border-r border-input bg-muted/50 rounded-l-md">
151-
<span class="text-sm font-medium text-muted-foreground">+86</span>
152-
</div>
153-
<Input
154-
id="phone" v-model="siliconFlowStore.phoneNumber" :placeholder="t('siliconFlow.phoneNumber')" type="tel"
155-
class="border-0 rounded-l-none focus-visible:ring-0 focus-visible:ring-offset-0 h-10"
156-
/>
157-
</div>
158-
<div class="flex rounded-md border border-input bg-background">
159-
<Input
160-
id="sms" v-model="siliconFlowStore.smsCode" :placeholder="t('siliconFlow.smsCode')" type="text" maxlength="6"
161-
class="w-fit flex-grow border-0 rounded-r-none focus-visible:ring-0 focus-visible:ring-offset-0 h-10"
162-
/>
163-
<div class="border-l border-input">
164-
<Captcha
165-
:enabled="siliconFlowStore.phoneNumber.length > 0" :config="siliconFlowStore.captchaConfig"
166-
class="h-10 px-4 bg-muted/50 rounded-r-md border-0 text-xs text-primary hover:bg-muted/70 transition-colors disabled:opacity-50"
167-
@next="siliconFlowStore.sendSMS"
168-
/>
169-
</div>
170-
</div>
171-
</CardContent>
172-
<CardFooter class="flex flex-col space-y-3 pt-3">
173-
<div class="flex items-center space-x-2 text-xs text-muted-foreground">
174-
<input id="agree" v-model="siliconFlowStore.agreed" type="checkbox" class="h-3 w-3 rounded border border-input">
175-
<label for="agree" class="flex items-center gap-1 cursor-pointer">
176-
<span>{{ t('siliconFlow.agreeToTerms') }}</span>
177-
<a
178-
href="https://docs.siliconflow.cn/docs/user-agreement" target="_blank"
179-
class="text-primary hover:underline"
180-
>{{ t('siliconFlow.userAgreement') }}</a>
181-
<span>{{ t('siliconFlow.and') }}</span>
182-
<a
183-
href="https://docs.siliconflow.cn/docs/privacy-policy" target="_blank"
184-
class="text-primary hover:underline"
185-
>{{ t('siliconFlow.privacyPolicy') }}</a>
186-
</label>
187-
</div>
188-
<Button class="w-full h-10" :disabled="!siliconFlowStore.canLogin" @click="siliconFlowStore.login">
189-
<span v-if="siliconFlowStore.isLoading">{{ t('siliconFlow.loggingIn') }}</span>
190-
<span v-else>{{ t('siliconFlow.registerLogin') }}</span>
191-
</Button>
192-
<div class="flex items-center space-x-2 text-xs text-muted-foreground">
193-
<input id="keep" v-model="siliconFlowStore.keepLogin" type="checkbox" class="h-3 w-3 rounded border border-input" checked>
194-
<label for="keep" class="cursor-pointer">{{ t('siliconFlow.keepLoggedIn30Days') }}</label>
195-
</div>
196-
</CardFooter>
197-
</Card>
138+
<SiliconFlowLoginCard v-else-if="siliconFlowStore.userInfo" />
198139

199140
<!-- Loading state -->
200141
<Skeleton v-else class="h-48 w-full max-w-md mx-auto" />

‎frontend/src/components/SiliconFlowLoginCard.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script setup lang="ts">
2+
import { useI18n } from 'vue-i18n'
3+
import Captcha from '@/components/Captcha.vue'
4+
import { Button } from '@/components/ui/button'
5+
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
6+
import { Input } from '@/components/ui/input'
7+
import { useSiliconFlowStore } from '@/stores'
8+
9+
const { t } = useI18n()
10+
const siliconFlowStore = useSiliconFlowStore()
11+
</script>
12+
13+
<template>
14+
<Card>
15+
<CardHeader class="pb-4">
16+
<CardTitle class="text-lg">
17+
{{ t('siliconFlow.loginTitle') }}
18+
</CardTitle>
19+
<CardDescription class="text-sm">
20+
{{ t('siliconFlow.loginDescription') }}
21+
</CardDescription>
22+
</CardHeader>
23+
<CardContent class="space-y-4">
24+
<div class="flex rounded-md border border-input bg-background">
25+
<div class="flex items-center px-3 border-r border-input bg-muted/50 rounded-l-md">
26+
<span class="text-sm font-medium text-muted-foreground">+86</span>
27+
</div>
28+
<Input
29+
id="phone" v-model="siliconFlowStore.phoneNumber" :placeholder="t('siliconFlow.phoneNumber')" type="tel"
30+
class="border-0 rounded-l-none focus-visible:ring-0 focus-visible:ring-offset-0 h-10"
31+
/>
32+
</div>
33+
<div class="flex rounded-md border border-input bg-background">
34+
<Input
35+
id="sms" v-model="siliconFlowStore.smsCode" :placeholder="t('siliconFlow.smsCode')" type="text" maxlength="6"
36+
class="w-fit flex-grow border-0 rounded-r-none focus-visible:ring-0 focus-visible:ring-offset-0 h-10"
37+
/>
38+
<div class="border-l border-input">
39+
<Captcha
40+
:enabled="siliconFlowStore.phoneNumber.length > 0" :config="siliconFlowStore.captchaConfig"
41+
class="h-10 px-4 bg-muted/50 rounded-r-md border-0 text-xs text-primary hover:bg-muted/70 transition-colors disabled:opacity-50"
42+
@next="siliconFlowStore.sendSMS"
43+
/>
44+
</div>
45+
</div>
46+
</CardContent>
47+
<CardFooter class="flex flex-col space-y-3 pt-3">
48+
<div class="flex items-center space-x-2 text-xs text-muted-foreground">
49+
<input id="agree" v-model="siliconFlowStore.agreed" type="checkbox" class="h-3 w-3 rounded border border-input">
50+
<label for="agree" class="flex items-center gap-1 cursor-pointer">
51+
<span>{{ t('siliconFlow.agreeToTerms') }}</span>
52+
<a
53+
href="https://docs.siliconflow.cn/docs/user-agreement" target="_blank"
54+
class="text-primary hover:underline"
55+
>{{ t('siliconFlow.userAgreement') }}</a>
56+
<span>{{ t('siliconFlow.and') }}</span>
57+
<a
58+
href="https://docs.siliconflow.cn/docs/privacy-policy" target="_blank"
59+
class="text-primary hover:underline"
60+
>{{ t('siliconFlow.privacyPolicy') }}</a>
61+
</label>
62+
</div>
63+
<Button class="w-full h-10" :disabled="!siliconFlowStore.canLogin" @click="siliconFlowStore.login">
64+
<span v-if="siliconFlowStore.isLoading">{{ t('siliconFlow.loggingIn') }}</span>
65+
<span v-else>{{ t('siliconFlow.registerLogin') }}</span>
66+
</Button>
67+
<div class="flex items-center space-x-2 text-xs text-muted-foreground">
68+
<input id="keep" v-model="siliconFlowStore.keepLogin" type="checkbox" class="h-3 w-3 rounded border border-input" checked>
69+
<label for="keep" class="cursor-pointer">{{ t('siliconFlow.keepLoggedIn30Days') }}</label>
70+
</div>
71+
</CardFooter>
72+
</Card>
73+
</template>

0 commit comments

Comments
 (0)