update

packages/frontend/src/main.ts

@@ -12,8 +12,8 @@ import './style.css';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 // 导入 splitpanes CSS
 import 'splitpanes/dist/splitpanes.css';
-// 导入 reCAPTCHA v3
-import { VueReCaptcha } from 'vue-recaptcha-v3';
+// 导入 vue-recaptcha (用于 v2)
+import VueRecaptchaPlugin from 'vue-recaptcha';
 
 const pinia = createPinia(); // 创建 Pinia 实例
 pinia.use(piniaPluginPersistedstate); // 使用持久化插件
@@ -24,14 +24,8 @@ app.use(pinia); // 使用配置好的 Pinia 实例
 // 注意：在状态初始化完成前，暂时不 use(router)
 app.use(i18n); // 使用 i18n
 
-// 初始化 reCAPTCHA v3
-// 重要提示：请将 'YOUR_RECAPTCHA_V3_SITE_KEY' 替换为您从 Google reCAPTCHA 获取的实际 Site Key
-app.use(VueReCaptcha, {
-  siteKey: 'YOUR_RECAPTCHA_V3_SITE_KEY', // <-- 在此处替换您的 Site Key
-  loaderOptions: {
-    autoHideBadge: true // 可选：自动隐藏 reCAPTCHA 徽章
-  }
-});
+// 注册 vue-recaptcha 插件，传递一个空选项对象
+app.use(VueRecaptchaPlugin, {});
 
 // --- 应用初始化逻辑 ---
 // 使用 async IIFE 来允许顶层 await

packages/frontend/src/views/LoginView.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../stores/auth.store';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha'; // <-- Import hCaptcha component
 // import { useReCaptcha } from 'vue-recaptcha-v3'; // <-- v3 hook, not needed for v2 widget
-// TODO: Import a reCAPTCHA v2 component, e.g., import VueRecaptchaV2 from 'vue-recaptcha-v2';
+import TheVueRecaptcha from 'vue-recaptcha'; // <-- Use a different name for import
 
 const { t } = useI18n();
 const authStore = useAuthStore();
@@ -21,9 +21,9 @@ const twoFactorToken = ref(''); // 用于存储 2FA 验证码
 const rememberMe = ref(false); // 新增：记住我状态，默认为 false
 const captchaToken = ref<string | null>(null); // NEW: Store CAPTCHA token
 const captchaError = ref<string | null>(null); // NEW: Store CAPTCHA specific error
-const hcaptchaWidget = ref<InstanceType<typeof VueHcaptcha> | null>(null); // NEW: Ref for hCaptcha component instance
+const hcaptchaWidget = ref<InstanceType<typeof VueHcaptcha> | null>(null); // Ref for hCaptcha component instance
 // const recaptchaInstance = useReCaptcha(); // v3 instance, not needed for v2 widget
-const recaptchaV2Widget = ref<any | null>(null); // NEW: Ref for reCAPTCHA v2 component instance (replace 'any' with actual type)
+// No specific ref needed for VueRecaptcha v2 component usually, events handle token
 
 
 // --- CAPTCHA Event Handlers ---
@@ -46,8 +46,7 @@ const resetCaptchaWidget = () => {
   captchaToken.value = null;
   // Reset hCaptcha if it exists
   hcaptchaWidget.value?.reset();
-  // Reset reCAPTCHA v2 if it exists and component supports it
-  // recaptchaV2Widget.value?.reset(); // Assuming the component has a reset method
+  // vue-recaptcha v2 component might reset automatically or not have an explicit method easily accessible via ref
 };
 // --- End CAPTCHA Event Handlers ---
 
@@ -164,21 +163,17 @@ onMounted(() => {
                  theme="auto"
                ></VueHcaptcha>
             </div>
-            <!-- reCAPTCHA v2 Component Placeholder -->
+            <!-- Google reCAPTCHA v2 Component -->
             <div v-else-if="publicCaptchaConfig?.provider === 'recaptcha' && publicCaptchaConfig.recaptchaSiteKey">
-                <!-- TODO: Replace this with an actual reCAPTCHA v2 component -->
-                <!-- Example using a hypothetical VueRecaptchaV2 component:
-                <VueRecaptchaV2
-                  ref="recaptchaV2Widget"
+                <!-- @ts-ignore - Bypassing type check due to potential library type definition issues -->
+                <TheVueRecaptcha
                   :sitekey="publicCaptchaConfig.recaptchaSiteKey"
                   @verify="handleCaptchaVerified"
                   @expired="handleCaptchaExpired"
                   @error="handleCaptchaError"
-                ></VueRecaptchaV2>
-                -->
-                <div class="p-4 border border-dashed border-warning text-warning bg-warning/10 rounded">
-                  此处需要集成 Google reCAPTCHA v2 组件。
-                </div>
+                  theme="light"
+                  size="normal"
+                ></TheVueRecaptcha>
                  <p class="text-xs text-text-secondary italic mt-1">
                   {{ t('login.recaptchaV3Notice') }} <!-- Keep the notice -->
                 </p>