release: v1.2.7 — 登录人机验证（滑块 / Turnstile / Cap）

app/components/CapCaptcha.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import 'cap-widget'
+
+const props = defineProps<{
+  apiEndpoint: string
+}>()
+
+const emit = defineEmits<{
+  verified: [payload: { capToken: string }]
+  cleared: []
+}>()
+
+const { t } = useI18n()
+
+const widgetRef = ref<HTMLElement | null>(null)
+
+function onSolve(event: Event) {
+  const token = (event as CustomEvent<{ token: string }>).detail?.token
+  if (token) {
+    emit('verified', { capToken: token })
+  }
+}
+
+function onError() {
+  emit('cleared')
+}
+
+function reset() {
+  const widget = widgetRef.value as (HTMLElement & { reset?: () => void }) | null
+  widget?.reset?.()
+  emit('cleared')
+}
+
+defineExpose({ reset })
+</script>
+
+<template>
+  <ClientOnly>
+    <cap-widget
+      ref="widgetRef"
+      :data-cap-api-endpoint="props.apiEndpoint"
+      :data-cap-i18n-initial-state="t('auth.capInitialState')"
+      :data-cap-i18n-verifying-label="t('auth.capVerifying')"
+      :data-cap-i18n-solved-label="t('auth.capSolved')"
+      :data-cap-i18n-error-label="t('auth.capError')"
+      @solve="onSolve"
+      @error="onError"
+    />
+  </ClientOnly>
+</template>