fix: captcha 開關

src/views/Login.vue

@@ -58,6 +58,7 @@ import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import HyakkaouAcademyImage from '@/assets/logo.png'
 import PageLogin from '@/components/PageLogin.vue'
+import { useLoginCaptcha } from '@/composables/useLoginCaptcha'
 import { useAuthStore } from '@/stores/auth'
 import {
   type LoginAnnouncementListItem,
@@ -94,6 +95,7 @@ const formPositionLayout = ref<LayoutType>('side-left')
 
 // 功能開關：是否啟用驗證碼
 const withCaptcha = ref(true)
+const loginCaptcha = useLoginCaptcha({ enabled: withCaptcha })
 
 // 文字內容（i18n）
 const title = computed(() => t('pages.login.title'))
@@ -117,9 +119,6 @@ const forgotPasswordHref = ref('/forgot-password')
 const forgotPasswordTarget = ref<string | undefined>(undefined)
 // 記住帳號的 localStorage key
 const rememberStorageKey = ref('login.remember.username')
-// 驗證碼 API
-const captchaValue = ref('')
-
 // 驗證與對話框狀態
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
@@ -155,16 +154,10 @@ const form = computed(() => ({
   rememberStorageKey: rememberStorageKey.value,
   // 功能開關：是否顯示驗證碼
   withCaptcha: withCaptcha.value,
-  captcha: authStore.captcha
-    ? {
-        imgUrl: authStore.captcha.dntCaptchaImgUrl,
-        id: authStore.captcha.dntCaptchaId,
-        tokenValue: authStore.captcha.dntCaptchaTokenValue,
-      }
-    : undefined,
-  captchaValue: captchaValue.value,
-  captchaLoading: authStore.captchaLoading,
-  captchaErrorMessage: authStore.captchaErrorMessage ?? '',
+  captcha: loginCaptcha.formCaptcha.value,
+  captchaValue: loginCaptcha.captchaValue.value,
+  captchaLoading: loginCaptcha.captchaLoading.value,
+  captchaErrorMessage: loginCaptcha.captchaErrorMessage.value ?? '',
   captchaVerified: false,
   forgotPassword: {
     text: forgotPasswordText.value,
@@ -192,12 +185,11 @@ function handleChangeLocale(nextLocale: string) {
 }
 
 async function handleCaptchaRefresh() {
-  captchaValue.value = ''
-  await authStore.getCaptcha()
+  await loginCaptcha.refreshCaptcha().catch(() => undefined)
 }
 
 function handleCaptchaChange(value: string) {
-  captchaValue.value = value
+  loginCaptcha.setCaptchaValue(value)
 }
 
 function handleToggleLayout() {
@@ -213,7 +205,7 @@ function handleSelectAnnouncement(item: LoginAnnouncementListItem) {
 }
 
 async function onLogin(data: Record<string, unknown>) {
-  if (withCaptcha.value && !captchaValue.value) {
+  if (withCaptcha.value && !loginCaptcha.captchaValue.value) {
     dialogTitle.value = t('common.notice')
     dialogMessage.value = t('pages.login.alert.verifyRequired')
     dialogVisible.value = true
@@ -234,7 +226,7 @@ async function onLogin(data: Record<string, unknown>) {
     await authStore.login({
       UserID: userId,
       Password: password,
-      DNTCaptchaInputText: captchaValue.value,
+      captcha: loginCaptcha.getLoginCaptchaPayload(),
     })
 
     menuStore.getMenu(authStore.user?.id ?? '')
@@ -262,6 +254,6 @@ async function onLogin(data: Record<string, unknown>) {
 onMounted(() => {
   loginAnnouncementsStore.hydrate()
   loginAnnouncementsStore.fetchMobileAnnouncements()
-  authStore.getCaptcha()
+  void loginCaptcha.loadCaptcha().catch(() => undefined)
 })
 </script>