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

CHANGELOG.md

@@ -4,6 +4,17 @@
 
 ## [Unreleased]
 
+## [1.2.7] - 2026-09-03
+
+### 新增
+
+- 登录/注册人机验证：本地滑块、Cloudflare Turnstile、Cap；管理员在「设置 → 访问控制」中切换
+- 运维 CLI `slider`：将登录验证重置为本地滑块（`docker exec pichost slider`）
+
+### 改进
+
+- 登出后登录页验证码可正常重新加载
+
 ## [1.2.6] - 2026-09-01
 
 ### 新增

Dockerfile

@@ -25,6 +25,7 @@ ENV NODE_ENV=production \
 COPY --from=build /app/.output ./.output
 COPY server/cli/reset-password.mjs ./server/cli/reset-password.mjs
 COPY server/cli/migrate-to-single-images.mjs ./server/cli/migrate-to-single-images.mjs
+COPY server/cli/slider.mjs ./server/cli/slider.mjs
 COPY docker-entrypoint.sh /docker-entrypoint.sh
 RUN chmod +x /docker-entrypoint.sh
 

app/components/AdminLoginGate.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import logoLight from '~/assets/image/logo-light.png'
 import logoDark from '~/assets/image/logo-dark.png'
+import type { LoginVerificationPayload } from '~/types/auth'
 
 const router = useRouter()
 const { login, fetchStatus, authStatus } = useAuth()
@@ -11,45 +12,53 @@ const username = ref('')
 const password = ref('')
 const secret = ref('')
 const loading = ref(false)
-const captchaRef = ref<{ reset: () => Promise<void> } | null>(null)
+const verificationRef = ref<{ reset: () => Promise<void> } | null>(null)
-const captchaPayload = ref<{ captchaId: string, captchaPosition: number } | null>(null)
+const verificationPayload = ref<LoginVerificationPayload | null>(null)
+const verificationMountKey = ref(0)
 
 const legacyMode = computed(() => authStatus.value?.legacyMode ?? false)
 const allowRegistration = computed(() => authStatus.value?.allowRegistration ?? false)
+const loginVerification = computed(() =>
+  authStatus.value?.loginVerification ?? { method: 'slider' as const }
+)
 
 const canSubmit = computed(() =>
-  Boolean(captchaPayload.value)
+  Boolean(verificationPayload.value)
   && (legacyMode.value ? Boolean(secret.value) : Boolean(username.value && password.value))
 )
 
-function onCaptchaVerified(payload: { id: string, positionPercent: number }) {
+function onVerificationVerified(payload: LoginVerificationPayload) {
-  captchaPayload.value = {
+  verificationPayload.value = payload
-    captchaId: payload.id,
-    captchaPosition: payload.positionPercent
-  }
 }
 
-async function resetCaptcha() {
+function onVerificationCleared() {
-  captchaPayload.value = null
+  verificationPayload.value = null
-  await captchaRef.value?.reset()
+}
+
+async function resetVerification() {
+  verificationPayload.value = null
+  await verificationRef.value?.reset()
 }
 
 onMounted(async () => {
+  verificationPayload.value = null
+  verificationMountKey.value += 1
   const status = await fetchStatus()
   if (!status.initialized && !status.legacyMode) {
     await router.replace('/setup')
+    return
   }
 })
 
 async function submit() {
-  if (!canSubmit.value || loading.value || !captchaPayload.value) return
+  if (!canSubmit.value || loading.value || !verificationPayload.value) return
   loading.value = true
 
   try {
-    const captcha = captchaPayload.value
+    const verification = verificationPayload.value
     const result = legacyMode.value
-      ? await login({ secret: secret.value }, captcha)
+      ? await login({ secret: secret.value }, verification)
-      : await login({ username: username.value.trim(), password: password.value }, captcha)
+      : await login({ username: username.value.trim(), password: password.value }, verification)
 
     if (result.ok) {
       if (result.needsMigration) {
@@ -59,10 +68,10 @@ async function submit() {
       username.value = ''
       password.value = ''
       secret.value = ''
-      await resetCaptcha()
+      await resetVerification()
       toast.add({ title: t('auth.loginSuccess'), color: 'success' })
     } else {
-      await resetCaptcha()
+      await resetVerification()
       toast.add({
         title: result.error ?? (legacyMode.value ? t('auth.loginFailedSecret') : t('auth.loginFailedCredentials')),
         color: 'error'
@@ -170,9 +179,14 @@ async function submit() {
           </div>
         </template>
 
-        <SliderCaptcha
+        <LoginVerification
-          ref="captchaRef"
+          :key="verificationMountKey"
-          @verified="onCaptchaVerified"
+          ref="verificationRef"
+          :method="loginVerification.method"
+          :turnstile-site-key="loginVerification.turnstileSiteKey"
+          :cap-api-endpoint="loginVerification.capApiEndpoint"
+          @verified="onVerificationVerified"
+          @cleared="onVerificationCleared"
         />
 
         <UButton

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>

app/components/ImageCard.vue

@@ -10,12 +10,14 @@ const props = withDefaults(defineProps<{
   showStorage?: boolean
   compact?: boolean
   gallery?: boolean
+  allowDelete?: boolean
 }>(), {
   selectable: true,
   showKey: true,
   showStorage: false,
   compact: false,
-  gallery: false
+  gallery: false,
+  allowDelete: true
 })
 
 const emit = defineEmits<{
@@ -251,6 +253,7 @@ async function copyGalleryUrl() {
         @click="emit('preview')"
       />
       <UButton
+        v-if="allowDelete"
         icon="i-lucide-trash-2"
         variant="ghost"
         color="neutral"

app/components/ImageGrid.vue

@@ -12,13 +12,15 @@ const props = withDefaults(defineProps<{
   compact?: boolean
   /** 图库：5 列 × 2 行，缩略图略扁 */
   gallery?: boolean
+  allowDelete?: boolean
 }>(), {
   selectable: true,
   showKey: true,
   showStorage: false,
   dense: false,
   compact: false,
-  gallery: false
+  gallery: false,
+  allowDelete: true
 })
 
 const gridClass = computed(() => {
@@ -65,6 +67,7 @@ function updateSelection(key: string, selected: boolean) {
       :show-storage="showStorage"
       :compact="compact"
       :gallery="gallery"
+      :allow-delete="allowDelete"
       @update:selected="updateSelection(image.key, $event)"
       @preview="emit('preview', image)"
       @delete="emit('delete', image)"

app/components/ImagePreviewModal.vue

@@ -10,8 +10,10 @@ const props = withDefaults(defineProps<{
   image: ImageItem | null
   showStorage?: boolean
   deleting?: boolean
+  allowDelete?: boolean
 }>(), {
-  showStorage: false
+  showStorage: false,
+  allowDelete: true
 })
 
 const emit = defineEmits<{
@@ -396,6 +398,7 @@ function onImageLoad(event: Event) {
           @click="copyLink"
         />
         <UButton
+          v-if="allowDelete"
           :label="t('common.delete')"
           icon="i-lucide-trash-2"
           color="error"

app/components/LoginVerification.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type {
+  LoginVerificationMethod,
+  LoginVerificationPayload
+} from '~/types/auth'
+
+const props = defineProps<{
+  method: LoginVerificationMethod
+  turnstileSiteKey?: string
+  capApiEndpoint?: string
+}>()
+
+const emit = defineEmits<{
+  verified: [payload: LoginVerificationPayload]
+  cleared: []
+}>()
+
+const sliderRef = ref<{ reset: () => Promise<void> } | null>(null)
+const turnstileRef = ref<{ reset: () => void } | null>(null)
+const capRef = ref<{ reset: () => void } | null>(null)
+
+function onSliderVerified(payload: { id: string, positionPercent: number }) {
+  emit('verified', {
+    method: 'slider',
+    captchaId: payload.id,
+    captchaPosition: payload.positionPercent
+  })
+}
+
+function onTurnstileVerified(payload: { turnstileToken: string }) {
+  emit('verified', {
+    method: 'turnstile',
+    turnstileToken: payload.turnstileToken
+  })
+}
+
+function onCapVerified(payload: { capToken: string }) {
+  emit('verified', {
+    method: 'cap',
+    capToken: payload.capToken
+  })
+}
+
+function onCleared() {
+  emit('cleared')
+}
+
+async function reset() {
+  emit('cleared')
+  if (props.method === 'slider') {
+    await sliderRef.value?.reset()
+    return
+  }
+  if (props.method === 'turnstile') {
+    turnstileRef.value?.reset()
+    return
+  }
+  capRef.value?.reset()
+}
+
+defineExpose({ reset })
+</script>
+
+<template>
+  <SliderCaptcha
+    v-if="method === 'slider'"
+    ref="sliderRef"
+    @verified="onSliderVerified"
+  />
+  <TurnstileCaptcha
+    v-else-if="method === 'turnstile' && turnstileSiteKey"
+    ref="turnstileRef"
+    :site-key="turnstileSiteKey"
+    @verified="onTurnstileVerified"
+    @cleared="onCleared"
+  />
+  <CapCaptcha
+    v-else-if="method === 'cap' && capApiEndpoint"
+    ref="capRef"
+    :api-endpoint="capApiEndpoint"
+    @verified="onCapVerified"
+    @cleared="onCleared"
+  />
+  <p
+    v-else
+    class="rounded-lg border border-warning/25 bg-warning/5 px-3 py-2 text-xs text-warning"
+  >
+    {{ $t('auth.verificationMisconfigured') }}
+  </p>
+</template>

app/components/TurnstileCaptcha.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+const props = defineProps<{
+  siteKey: string
+}>()
+
+const emit = defineEmits<{
+  verified: [payload: { turnstileToken: string }]
+  cleared: []
+}>()
+
+interface TurnstileRenderOptions {
+  'sitekey': string
+  'action'?: string
+  'callback'?: (token: string) => void
+  'expired-callback'?: () => void
+  'error-callback'?: () => void
+}
+
+interface TurnstileApi {
+  render: (container: HTMLElement, options: TurnstileRenderOptions) => string
+  reset: (widgetId?: string) => void
+  remove: (widgetId: string) => void
+}
+
+declare global {
+  interface Window {
+    turnstile?: TurnstileApi
+    onTurnstileLoad?: () => void
+  }
+}
+
+const containerRef = ref<HTMLElement | null>(null)
+const widgetId = ref<string | null>(null)
+const scriptLoaded = ref(false)
+
+function onVerified(token: string) {
+  if (token) {
+    emit('verified', { turnstileToken: token })
+  }
+}
+
+function onCleared() {
+  emit('cleared')
+}
+
+function renderWidget() {
+  if (!containerRef.value || !window.turnstile || !props.siteKey) return
+  if (widgetId.value) {
+    window.turnstile.remove(widgetId.value)
+    widgetId.value = null
+  }
+  widgetId.value = window.turnstile.render(containerRef.value, {
+    'sitekey': props.siteKey,
+    'action': 'login',
+    'callback': onVerified,
+    'expired-callback': onCleared,
+    'error-callback': onCleared
+  })
+}
+
+function tryRenderWidget() {
+  if (scriptLoaded.value) {
+    renderWidget()
+  }
+}
+
+function loadScript() {
+  if (window.turnstile) {
+    scriptLoaded.value = true
+    tryRenderWidget()
+    return
+  }
+  window.onTurnstileLoad = () => {
+    scriptLoaded.value = true
+    tryRenderWidget()
+  }
+  const existing = document.querySelector('script[data-turnstile]')
+  if (existing) {
+    if (window.turnstile) {
+      scriptLoaded.value = true
+      tryRenderWidget()
+    }
+    return
+  }
+  const script = document.createElement('script')
+  script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onTurnstileLoad'
+  script.async = true
+  script.defer = true
+  script.dataset.turnstile = 'true'
+  document.head.appendChild(script)
+}
+
+function reset() {
+  if (window.turnstile && widgetId.value) {
+    window.turnstile.reset(widgetId.value)
+  }
+  onCleared()
+}
+
+onMounted(async () => {
+  loadScript()
+  await nextTick()
+  tryRenderWidget()
+})
+
+watch([containerRef, () => props.siteKey, scriptLoaded], () => {
+  tryRenderWidget()
+}, { flush: 'post' })
+
+defineExpose({ reset })
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      ref="containerRef"
+      class="flex min-h-16 items-center justify-center"
+    />
+  </ClientOnly>
+</template>

app/components/gallery/GalleryFilterBar.vue

@@ -8,9 +8,11 @@ const props = withDefaults(defineProps<{
   viewMode: 'grid' | 'list'
   selectedCount?: number
   loading?: boolean
+  showBatchDelete?: boolean
 }>(), {
   selectedCount: 0,
-  loading: false
+  loading: false,
+  showBatchDelete: true
 })
 
 const emit = defineEmits<{
@@ -99,6 +101,7 @@ function viewButtonClass(active: boolean) {
     </UButton>
 
     <UButton
+      v-if="showBatchDelete"
       type="button"
       icon="i-lucide-trash-2"
       size="sm"

app/components/gallery/GalleryImageList.vue

@@ -7,9 +7,11 @@ const props = withDefaults(defineProps<{
   selectable?: boolean
   showStorage?: boolean
   emptyText?: string
+  showDelete?: boolean
 }>(), {
   selectable: false,
-  showStorage: false
+  showStorage: false,
+  showDelete: true
 })
 
 const emit = defineEmits<{
@@ -198,6 +200,7 @@ function typeLabel(image: ImageItem) {
                   @click="emit('preview', image)"
                 />
                 <UButton
+                  v-if="showDelete"
                   icon="i-lucide-trash-2"
                   variant="ghost"
                   color="neutral"

app/composables/useAuth.ts

@@ -1,3 +1,5 @@
+import type { LoginVerificationPayload } from '~/types/auth'
+
 export type AuthStatus = 'checking' | 'authenticated' | 'unauthenticated'
 
 export type UserRole = 'admin' | 'user'
@@ -8,11 +10,18 @@ export interface AuthUser {
   role: UserRole
 }
 
+export interface LoginVerificationPublicConfig {
+  method: 'slider' | 'turnstile' | 'cap'
+  turnstileSiteKey?: string
+  capApiEndpoint?: string
+}
+
 export interface AuthStatusResponse {
   initialized: boolean
   allowRegistration: boolean
   legacyMode: boolean
   needsMigration: boolean
+  loginVerification: LoginVerificationPublicConfig
   user: AuthUser | null
 }
 
@@ -66,9 +75,19 @@ export function getFetchErrorMessage(error: unknown, fallback: string): string {
 
 export type AuthActionResult = { ok: true } | { ok: false, error: string }
 
-export interface LoginCaptchaPayload {
+export type { LoginVerificationPayload }
-  captchaId: string
+
-  captchaPosition: number
+function buildVerificationBody(verification: LoginVerificationPayload): Record<string, unknown> {
+  if (verification.method === 'slider') {
+    return {
+      captchaId: verification.captchaId,
+      captchaPosition: verification.captchaPosition
+    }
+  }
+  if (verification.method === 'turnstile') {
+    return { turnstileToken: verification.turnstileToken }
+  }
+  return { capToken: verification.capToken }
 }
 
 export function useAuth() {
@@ -123,7 +142,7 @@ export function useAuth() {
   async function login(
     credentials: { username: string, password: string }
       | { secret: string },
-    captcha: LoginCaptchaPayload
+    verification: LoginVerificationPayload
   ): Promise<{ ok: boolean, needsMigration?: boolean, error?: string }> {
     try {
       const result = await $fetch<{
@@ -135,8 +154,7 @@ export function useAuth() {
         credentials: 'include',
         body: {
           ...credentials,
-          captchaId: captcha.captchaId,
+          ...buildVerificationBody(verification)
-          captchaPosition: captcha.captchaPosition
         }
       })
       if (result.needsMigration) {
@@ -159,7 +177,8 @@ export function useAuth() {
 
   async function register(
     username: string,
-    password: string
+    password: string,
+    verification: LoginVerificationPayload
   ): Promise<AuthActionResult> {
     const validationError = validateAuthInput(username, password)
     if (validationError) {
@@ -172,7 +191,11 @@ export function useAuth() {
         {
           method: 'POST',
           credentials: 'include',
-          body: { username: username.trim(), password }
+          body: {
+            username: username.trim(),
+            password,
+            ...buildVerificationBody(verification)
+          }
         }
       )
       user.value = result.user
@@ -291,15 +314,19 @@ export function useAuth() {
 
   async function logout() {
     try {
-      await $fetch('/api/auth/logout', { method: 'POST' })
+      await $fetch('/api/auth/logout', { method: 'POST', credentials: 'include' })
     } catch {
       // 忽略登出失败
     } finally {
       status.value = 'unauthenticated'
       user.value = null
-      authStatus.value = null
       hasValidatedOnce.value = true
     }
+    try {
+      await fetchStatus()
+    } catch {
+      // 保留既有公开配置（loginVerification 等）
+    }
   }
 
   function handleAuthError(error: unknown) {

app/pages/api.vue

@@ -35,7 +35,9 @@ const baseUrl = computed(() => {
 
 const tokenDisplay = computed(() => settings.value?.apiUploadToken ?? '')
 const hasToken = computed(() => tokenDisplay.value.length > 0)
-const canRegenerate = computed(() => !settings.value?.envTokenOverride && !loading.value)
+const canRegenerate = computed(() =>
+  !settings.value?.envTokenOverride && !loading.value
+)
 
 const authHeader = computed(() =>
   hasToken.value ? tokenDisplay.value : 'YOUR-TOKEN'

app/pages/gallery.vue

@@ -401,6 +401,7 @@ watch(isAuthenticated, async (authed, prev) => {
             :view-mode="viewMode"
             :selected-count="selectedCount"
             :loading="galleryLoading"
+            :show-batch-delete="true"
             @update:storage-backend="handleStorageBackendChange"
             @update:upload-source="handleUploadSourceChange"
             @update:view-mode="viewMode = $event"
@@ -430,7 +431,8 @@ watch(isAuthenticated, async (authed, prev) => {
           show-storage
           :items="items"
           :selected-keys="selectedKeys"
-          selectable
+          :selectable="true"
+          :allow-delete="true"
           @update:selected-keys="updateSelectedKeys"
           @preview="openPreview"
           @delete="(image) => requestDelete(image.key)"
@@ -442,6 +444,7 @@ watch(isAuthenticated, async (authed, prev) => {
           :items="items"
           :selected-keys="selectedKeys"
           :selectable="true"
+          :show-delete="true"
           @update:selected-keys="updateSelectedKeys"
           @preview="openPreview"
           @delete="(image) => requestDelete(image.key)"
@@ -452,6 +455,7 @@ watch(isAuthenticated, async (authed, prev) => {
           :image="previewImage"
           show-storage
           :deleting="previewImage ? deletingKeys.has(previewImage.key) : false"
+          :allow-delete="true"
           @delete="requestPreviewDelete"
         />
 

app/pages/index.vue

@@ -206,6 +206,7 @@ function requestPreviewDelete() {
         v-model:open="previewOpen"
         :image="previewImage"
         :deleting="previewImage ? deletingKeys.has(previewImage.key) : false"
+        :allow-delete="true"
         @delete="requestPreviewDelete"
       />
     </AppShell>

app/pages/register.vue

@@ -2,9 +2,10 @@
 import logoLight from '~/assets/image/logo-light.png'
 import logoDark from '~/assets/image/logo-dark.png'
 import { isPasswordValid } from '~/utils/password-strength'
+import type { LoginVerificationPayload } from '~/types/auth'
 
 const router = useRouter()
-const { register, fetchStatus } = useAuth()
+const { register, fetchStatus, authStatus } = useAuth()
 const toast = useToast()
 const { t } = useI18n()
 
@@ -12,14 +13,34 @@ const username = ref('')
 const password = ref('')
 const confirmPassword = ref('')
 const loading = ref(false)
+const verificationRef = ref<{ reset: () => Promise<void> } | null>(null)
+const verificationPayload = ref<LoginVerificationPayload | null>(null)
+
+const loginVerification = computed(() =>
+  authStatus.value?.loginVerification ?? { method: 'slider' as const }
+)
 
 const canSubmit = computed(() =>
-  Boolean(username.value && password.value && confirmPassword.value)
+  Boolean(verificationPayload.value)
+  && Boolean(username.value && password.value && confirmPassword.value)
   && password.value === confirmPassword.value
   && isPasswordValid(password.value)
   && AUTH_USERNAME_PATTERN.test(username.value.trim())
 )
 
+function onVerificationVerified(payload: LoginVerificationPayload) {
+  verificationPayload.value = payload
+}
+
+function onVerificationCleared() {
+  verificationPayload.value = null
+}
+
+async function resetVerification() {
+  verificationPayload.value = null
+  await verificationRef.value?.reset()
+}
+
 onMounted(async () => {
   const status = await fetchStatus()
   if (!status.initialized && !status.legacyMode) {
@@ -32,7 +53,7 @@ onMounted(async () => {
 })
 
 async function submit() {
-  if (!canSubmit.value || loading.value) return
+  if (!canSubmit.value || loading.value || !verificationPayload.value) return
 
   if (password.value !== confirmPassword.value) {
     toast.add({ title: t('auth.passwordMismatch'), color: 'error' })
@@ -41,11 +62,16 @@ async function submit() {
 
   loading.value = true
   try {
-    const result = await register(username.value.trim(), password.value)
+    const result = await register(
+      username.value.trim(),
+      password.value,
+      verificationPayload.value
+    )
     if (result.ok) {
       toast.add({ title: t('auth.registerSuccess'), color: 'success' })
       await router.replace('/')
     } else {
+      await resetVerification()
       toast.add({ title: result.error, color: 'error' })
     }
   } finally {
@@ -142,6 +168,15 @@ async function submit() {
           />
         </div>
 
+        <LoginVerification
+          ref="verificationRef"
+          :method="loginVerification.method"
+          :turnstile-site-key="loginVerification.turnstileSiteKey"
+          :cap-api-endpoint="loginVerification.capApiEndpoint"
+          @verified="onVerificationVerified"
+          @cleared="onVerificationCleared"
+        />
+
         <UButton
           type="submit"
           :label="t('auth.register')"

app/pages/settings/index.vue

@@ -4,6 +4,7 @@ import { ADMIN_SETTINGS_TABS, USER_SETTINGS_TABS } from '~/types/settings'
 
 type SettingSource = 'env' | 'db' | 'none'
 type WebpQualitySource = 'env' | 'db' | 'default'
+type LoginVerificationMethod = 'slider' | 'turnstile' | 'cap'
 
 interface SettingsResponse {
   apiUploadToken: string
@@ -33,6 +34,11 @@ interface SettingsResponse {
   storageUseDatePath: boolean
   storageUseDatePathSource: SettingSource
   allowRegistration: boolean
+  loginVerificationMethod: LoginVerificationMethod
+  turnstileSiteKey: string
+  turnstileSecretKey: string
+  capApiEndpoint: string
+  capSecret: string
   appVersion: string
 }
 
@@ -98,6 +104,11 @@ const imageBaseUrlDraft = ref('')
 const hideFolderInUrlDraft = ref(false)
 const storageUseDatePathDraft = ref(true)
 const allowRegistrationDraft = ref(false)
+const loginVerificationMethodDraft = ref<LoginVerificationMethod>('slider')
+const turnstileSiteKeyDraft = ref('')
+const turnstileSecretKeyDraft = ref('')
+const capApiEndpointDraft = ref('')
+const capSecretDraft = ref('')
 const domainSeparationDraft = ref(false)
 const disableDomainSeparationOpen = ref(false)
 const pendingDomainSeparationDisable = ref(false)
@@ -120,6 +131,11 @@ const hasServerChanges = computed(() => {
     || hideFolderInUrlDraft.value !== settings.value.hideFolderInUrl
     || storageUseDatePathDraft.value !== settings.value.storageUseDatePath
     || allowRegistrationDraft.value !== settings.value.allowRegistration
+    || loginVerificationMethodDraft.value !== settings.value.loginVerificationMethod
+    || turnstileSiteKeyDraft.value !== settings.value.turnstileSiteKey
+    || turnstileSecretKeyDraft.value !== settings.value.turnstileSecretKey
+    || capApiEndpointDraft.value !== settings.value.capApiEndpoint
+    || capSecretDraft.value !== settings.value.capSecret
 })
 
 function sourceBadge(source: SettingSource | WebpQualitySource) {
@@ -150,6 +166,11 @@ function applySettings(data: SettingsResponse) {
   hideFolderInUrlDraft.value = data.hideFolderInUrl
   storageUseDatePathDraft.value = data.storageUseDatePath
   allowRegistrationDraft.value = data.allowRegistration
+  loginVerificationMethodDraft.value = data.loginVerificationMethod
+  turnstileSiteKeyDraft.value = data.turnstileSiteKey
+  turnstileSecretKeyDraft.value = data.turnstileSecretKey
+  capApiEndpointDraft.value = data.capApiEndpoint
+  capSecretDraft.value = data.capSecret
   domainSeparationDraft.value = data.domainSeparation
 }
 
@@ -221,7 +242,12 @@ async function saveServerSettings() {
       imageBaseUrl: imageBaseUrlDraft.value,
       hideFolderInUrl: hideFolderInUrlDraft.value,
       storageUseDatePath: storageUseDatePathDraft.value,
-      allowRegistration: allowRegistrationDraft.value
+      allowRegistration: allowRegistrationDraft.value,
+      loginVerificationMethod: loginVerificationMethodDraft.value,
+      turnstileSiteKey: turnstileSiteKeyDraft.value,
+      turnstileSecretKey: turnstileSecretKeyDraft.value,
+      capApiEndpoint: capApiEndpointDraft.value,
+      capSecret: capSecretDraft.value
     })
     toast.add({ title: t('settings.saved'), color: 'success' })
   } catch (error: unknown) {
@@ -279,9 +305,27 @@ async function checkLatestRelease(options: { notify?: boolean, refresh?: boolean
   }
 }
 
+const loginVerificationOptions = computed(() => [
+  { value: 'slider' as const, label: t('settings.loginVerificationSlider') },
+  { value: 'turnstile' as const, label: t('settings.loginVerificationTurnstile') },
+  { value: 'cap' as const, label: t('settings.loginVerificationCap') }
+])
+
+const loginVerificationHint = computed(() => {
+  switch (loginVerificationMethodDraft.value) {
+    case 'turnstile':
+      return t('settings.loginVerificationTurnstileHint')
+    case 'cap':
+      return t('settings.loginVerificationCapHint')
+    default:
+      return t('settings.loginVerificationSliderHint')
+  }
+})
+
 async function loadPage() {
   if (isAdmin.value) {
-    await Promise.all([loadSettings(), checkLatestRelease()])
+    await loadSettings()
+    await checkLatestRelease()
   }
 }
 
@@ -382,7 +426,10 @@ watch(isAdmin, () => {
                     :title="t('settings.systemInfo')"
                     :hint="t('settings.systemInfoHint')"
                   >
-                    <template #action>
+                    <template
+                      v-if="isAdmin"
+                      #action
+                    >
                       <UButton
                         :label="t('settings.checkUpdate')"
                         icon="i-lucide-refresh-cw"
@@ -712,6 +759,75 @@ watch(isAdmin, () => {
                       </div>
                     </div>
                   </div>
+
+                  <SettingsSection
+                    :title="t('settings.loginVerification')"
+                    :hint="t('settings.loginVerificationHint')"
+                  >
+                    <SettingsGroup>
+                      <div class="space-y-4 px-4 py-4 sm:px-5">
+                        <URadioGroup
+                          v-model="loginVerificationMethodDraft"
+                          :items="loginVerificationOptions"
+                        />
+                        <p class="text-xs leading-relaxed text-muted">
+                          {{ loginVerificationHint }}
+                        </p>
+                        <div
+                          v-if="loginVerificationMethodDraft === 'turnstile'"
+                          class="space-y-3 rounded-xl border border-default bg-muted/20 p-4"
+                        >
+                          <div class="space-y-2">
+                            <label class="text-sm font-medium text-highlighted">
+                              {{ t('settings.turnstileSiteKey') }}
+                            </label>
+                            <UInput
+                              v-model="turnstileSiteKeyDraft"
+                              :placeholder="t('settings.turnstileSiteKeyPlaceholder')"
+                              class="w-full font-mono text-sm"
+                            />
+                          </div>
+                          <div class="space-y-2">
+                            <label class="text-sm font-medium text-highlighted">
+                              {{ t('settings.turnstileSecretKey') }}
+                            </label>
+                            <UInput
+                              v-model="turnstileSecretKeyDraft"
+                              type="password"
+                              :placeholder="t('settings.turnstileSecretKeyPlaceholder')"
+                              class="w-full font-mono text-sm"
+                            />
+                          </div>
+                        </div>
+                        <div
+                          v-else-if="loginVerificationMethodDraft === 'cap'"
+                          class="space-y-3 rounded-xl border border-default bg-muted/20 p-4"
+                        >
+                          <div class="space-y-2">
+                            <label class="text-sm font-medium text-highlighted">
+                              {{ t('settings.capApiEndpoint') }}
+                            </label>
+                            <UInput
+                              v-model="capApiEndpointDraft"
+                              :placeholder="t('settings.capApiEndpointPlaceholder')"
+                              class="w-full font-mono text-sm"
+                            />
+                          </div>
+                          <div class="space-y-2">
+                            <label class="text-sm font-medium text-highlighted">
+                              {{ t('settings.capSecretKey') }}
+                            </label>
+                            <UInput
+                              v-model="capSecretDraft"
+                              type="password"
+                              :placeholder="t('settings.capSecretKeyPlaceholder')"
+                              class="w-full font-mono text-sm"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </SettingsGroup>
+                  </SettingsSection>
                 </SettingsPanel>
                 <div
                   v-else

app/types/auth.ts

@@ -0,0 +1,19 @@
+export type LoginVerificationMethod = 'slider' | 'turnstile' | 'cap'
+
+export interface LoginVerificationPublicConfig {
+  method: LoginVerificationMethod
+  turnstileSiteKey?: string
+  capApiEndpoint?: string
+}
+
+export type LoginVerificationPayload = {
+  method: 'slider'
+  captchaId: string
+  captchaPosition: number
+} | {
+  method: 'turnstile'
+  turnstileToken: string
+} | {
+  method: 'cap'
+  capToken: string
+}

docker-compose.yml

@@ -10,7 +10,7 @@ services:
       - "6892:6892"
     # 首次访问 Web 引导创建管理员，无需预先配置环境变量
     # 可选：environment 中设置 API_UPLOAD_TOKEN、ALLOWED_REFERER_HOSTS 等
-    # 运维：docker exec pichost reset-password | migrate [--apply]
+    # 运维：docker exec pichost reset-password | migrate [--apply] | slider
     volumes:
       # 冒号左边改成 NAS 上的实际存图目录（飞牛示例：/vol1/1000/pichost-data）
       - ./data:/data

docker-entrypoint.sh

@@ -9,4 +9,8 @@ if [ "$1" = "migrate" ]; then
   exec node /app/server/cli/migrate-to-single-images.mjs "${@:2}"
 fi
 
+if [ "$1" = "slider" ]; then
+  exec node /app/server/cli/slider.mjs "${@:2}"
+fi
+
 exec node /app/.output/server/index.mjs "$@"

docs-site/en/guide/changelog.md

@@ -4,6 +4,17 @@ Version history and notable changes. The full log is also in the repo root [CHAN
 
 ---
 
+## [1.2.7] — 2026-09-03
+
+### Added
+
+- **Login verification**: slider, Cloudflare Turnstile, or Cap on login/register; configure under Settings → Access
+- **Ops CLI**: `slider` resets verification to the local slider (`docker exec pichost slider`)
+
+### Improved
+
+- Login captcha reloads correctly after logout
+
 ## [1.2.6] — 2026-09-01
 
 ### Added

docs-site/guide/changelog.md

@@ -4,6 +4,17 @@ PicHost 版本历史与重要变更说明。完整记录亦见仓库根目录 [C
 
 ---
 
+## [1.2.7] — 2026-09-03
+
+### 新增
+
+- **登录验证**：登录/注册支持本地滑块、Cloudflare Turnstile、Cap；在「设置 → 访问控制」配置
+- **运维 CLI**：`slider` 将验证方式重置为本地滑块（`docker exec pichost slider`）
+
+### 改进
+
+- 登出后登录页验证码可正常重新加载
+
 ## [1.2.6] — 2026-09-01
 
 ### 新增

i18n/locales/en.json

@@ -67,6 +67,11 @@
     "loginFailed": "Sign-in failed. Check username and password",
     "captchaHint": "Drag the slider to the slot",
     "captchaSuccess": "Verified",
+    "verificationMisconfigured": "Human verification is not configured correctly. Contact an administrator.",
+    "capInitialState": "Verify you are human",
+    "capVerifying": "Verifying…",
+    "capSolved": "Verified",
+    "capError": "Verification failed",
     "registerFailed": "Registration failed. Check your input",
     "setupFailed": "Setup failed. Check your input",
     "migrateFailed": "Migration failed. Check your input",
@@ -212,6 +217,22 @@
     "refererScenarioDesc": "Allow your main site and static site to embed images",
     "refererEnabled": "Enabled",
     "refererUnrestricted": "Unrestricted",
+    "loginVerification": "Login verification",
+    "loginVerificationHint": "Human verification for login and registration (choose one)",
+    "loginVerificationSlider": "Local slider",
+    "loginVerificationSliderHint": "Built-in slider puzzle; no third-party service",
+    "loginVerificationTurnstile": "Cloudflare Turnstile",
+    "loginVerificationTurnstileHint": "Create a widget in Cloudflare Dashboard, then enter Site Key and Secret Key",
+    "loginVerificationCap": "Cap POW",
+    "loginVerificationCapHint": "Self-hosted Cap Standalone; enter API Endpoint and Secret Key",
+    "turnstileSiteKey": "Turnstile Site Key",
+    "turnstileSiteKeyPlaceholder": "0x4AAAAAAA…",
+    "turnstileSecretKey": "Turnstile Secret Key",
+    "turnstileSecretKeyPlaceholder": "0x4AAAAAAA…",
+    "capApiEndpoint": "Cap API Endpoint",
+    "capApiEndpointPlaceholder": "https://cap.example.com/your-site-key/",
+    "capSecretKey": "Cap Secret Key",
+    "capSecretKeyPlaceholder": "Secret key from your Cap dashboard",
     "systemInfo": "System",
     "systemInfoHint": "Current version and updates",
     "uploadConvenience": "Upload convenience",

i18n/locales/zh-CN.json

@@ -67,6 +67,11 @@
     "loginFailed": "登录失败，请检查用户名和密码",
     "captchaHint": "拖动滑块对齐缺口",
     "captchaSuccess": "验证通过",
+    "verificationMisconfigured": "人机验证未正确配置，请联系管理员",
+    "capInitialState": "验证你是人类",
+    "capVerifying": "验证中…",
+    "capSolved": "验证通过",
+    "capError": "验证失败",
     "registerFailed": "注册失败，请检查输入",
     "setupFailed": "初始化失败，请检查输入",
     "migrateFailed": "迁移失败，请检查输入",
@@ -212,6 +217,22 @@
     "refererScenarioDesc": "允许主站与静态站点引用图片",
     "refererEnabled": "已开启",
     "refererUnrestricted": "未限制",
+    "loginVerification": "登录验证",
+    "loginVerificationHint": "登录与注册时使用的人机验证方式，三选一",
+    "loginVerificationSlider": "本地滑块",
+    "loginVerificationSliderHint": "内置滑块拼图，无需第三方服务",
+    "loginVerificationTurnstile": "Cloudflare Turnstile",
+    "loginVerificationTurnstileHint": "在 Cloudflare 控制台创建 Widget，填写 Site Key 与 Secret Key",
+    "loginVerificationCap": "Cap POW",
+    "loginVerificationCapHint": "自托管 Cap Standalone，填写 API Endpoint 与 Secret Key",
+    "turnstileSiteKey": "Turnstile Site Key",
+    "turnstileSiteKeyPlaceholder": "0x4AAAAAAA…",
+    "turnstileSecretKey": "Turnstile Secret Key",
+    "turnstileSecretKeyPlaceholder": "0x4AAAAAAA…",
+    "capApiEndpoint": "Cap API Endpoint",
+    "capApiEndpointPlaceholder": "https://cap.example.com/your-site-key/",
+    "capSecretKey": "Cap Secret Key",
+    "capSecretKeyPlaceholder": "在 Cap Dashboard 创建的 Secret Key",
     "systemInfo": "系统信息",
     "systemInfoHint": "当前系统版本与更新",
     "uploadConvenience": "上传便捷功能",

nuxt.config.ts

@@ -21,6 +21,12 @@ export default defineNuxtConfig({
 
   css: ['~/assets/css/main.css'],
 
+  vue: {
+    compilerOptions: {
+      isCustomElement: tag => tag.startsWith('cap-')
+    }
+  },
+
   colorMode: {
     preference: 'system',
     fallback: 'light'

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pichost",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pichost",
-      "version": "1.2.6",
+      "version": "1.2.7",
       "hasInstallScript": true,
       "license": "GPL-3.0-only",
       "dependencies": {
@@ -14,6 +14,7 @@
         "@iconify-json/lucide": "^1.2.114",
         "@nuxt/ui": "^4.9.0",
         "@nuxtjs/i18n": "^10.6.0",
+        "cap-widget": "^0.1.57",
         "nuxt": "^4.4.8",
         "sharp": "^0.35.3",
         "tailwindcss": "^4.3.1"
@@ -10704,6 +10705,12 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cap-widget": {
+      "version": "0.1.57",
+      "resolved": "https://registry.npmmirror.com/cap-widget/-/cap-widget-0.1.57.tgz",
+      "integrity": "sha512-SyIK5XgYIFSDgH683M9KpfBmDSDB0ZfPZQBxL6MggNrjjnbIQYpbsNpj0S7PC/wXp7oJgAuBD2vtJnN9jJghBg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/ccount/-/ccount-2.0.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pichost",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Self-hosted image hosting for your NAS / home server — Nuxt admin UI, local disk or S3-compatible storage, server-side WebP compression, referer protection, Twikoo/EasyImage compatible.",
   "homepage": "https://github.com/O96u/PicHost#readme",
   "repository": {
@@ -35,6 +35,7 @@
     "start": "node .output/server/index.mjs",
     "reset-password": "node server/cli/reset-password.mjs",
     "migrate": "node server/cli/migrate-to-single-images.mjs",
+    "slider": "node server/cli/slider.mjs",
     "docs:prepare": "node docs-site/copy-screenshots.mjs",
     "docs:dev": "npm run docs:prepare && vitepress dev docs-site",
     "docs:build": "npm run docs:prepare && vitepress build docs-site",
@@ -45,6 +46,7 @@
     "@iconify-json/lucide": "^1.2.114",
     "@nuxt/ui": "^4.9.0",
     "@nuxtjs/i18n": "^10.6.0",
+    "cap-widget": "^0.1.57",
     "nuxt": "^4.4.8",
     "sharp": "^0.35.3",
     "tailwindcss": "^4.3.1"

server/api/auth/config.get.ts

@@ -1,5 +1,5 @@
 import { isAllowRegistration } from '../../utils/db'
-import { isAdminSecretConfigured, isApiUploadTokenConfigured } from '../../utils/env'
+import { getLoginVerificationPublicConfig, isAdminSecretConfigured, isApiUploadTokenConfigured } from '../../utils/env'
 import { isInitialized } from '../../utils/auth'
 
 export default defineEventHandler((event) => {
@@ -8,6 +8,7 @@ export default defineEventHandler((event) => {
     allowRegistration: isAllowRegistration(),
     legacyMode: !isInitialized() && isAdminSecretConfigured(event),
     adminSecretConfigured: isAdminSecretConfigured(event),
-    apiUploadTokenConfigured: isApiUploadTokenConfigured(event)
+    apiUploadTokenConfigured: isApiUploadTokenConfigured(event),
+    loginVerification: getLoginVerificationPublicConfig(event)
   }
 })

server/api/auth/login.post.ts

@@ -1,4 +1,3 @@
-import type { H3Event } from 'h3'
 import {
   checkAdminSecret,
   setLegacyAuthCookie
@@ -7,19 +6,18 @@ import { createApiError } from '../../utils/api-error'
 import {
   createSession,
   isInitialized,
+  rowToAuthUser,
   verifyPassword
 } from '../../utils/auth'
 import { findUserByUsername } from '../../utils/db'
 import { getAdminSecret } from '../../utils/env'
-import { verifyLoginCaptcha } from '../../utils/login-captcha'
+import { verifyLoginVerification, type VerificationBody } from '../../utils/login-verification'
 import { clientIp, logInfo, logWarn } from '../../utils/logger'
 
-interface LoginBody {
+interface LoginBody extends VerificationBody {
   username?: string
   password?: string
   secret?: string
-  captchaId?: string
-  captchaPosition?: number
 }
 
 const loginAttempts = new Map<string, { count: number, resetAt: number }>()
@@ -42,20 +40,12 @@ function checkRateLimit(ip: string): void {
   }
 }
 
-function verifyCaptchaOrFail(event: H3Event, body: LoginBody) {
-  const id = body.captchaId?.trim() ?? ''
-  const position = Number(body.captchaPosition)
-  if (!id || !verifyLoginCaptcha(id, position)) {
-    createApiError(event, 'INVALID_REQUEST', '请先完成滑块验证', 400)
-  }
-}
-
 export default defineEventHandler(async (event) => {
   const ip = clientIp(event)
   checkRateLimit(ip)
 
   const body = await readBody<LoginBody>(event)
-  verifyCaptchaOrFail(event, body ?? {})
+  await verifyLoginVerification(event, body ?? {})
   const initialized = isInitialized()
 
   if (!initialized) {
@@ -94,6 +84,6 @@ export default defineEventHandler(async (event) => {
 
   return {
     success: true,
-    user: { id: user.id, username: user.username, role: user.role }
+    user: rowToAuthUser(user)
   }
 })

server/api/auth/me.get.ts

@@ -9,6 +9,10 @@ export default defineEventHandler(async (event) => {
 
   return {
     authenticated: true,
-    user: { id: user.id, username: user.username, role: user.role }
+    user: {
+      id: user.id,
+      username: user.username,
+      role: user.role
+    }
   }
 })

server/api/auth/register.post.ts

@@ -5,9 +5,10 @@ import {
   isInitialized
 } from '../../utils/auth'
 import { isAllowRegistration } from '../../utils/db'
+import { verifyLoginVerification, type VerificationBody } from '../../utils/login-verification'
 import { clientIp, logInfo } from '../../utils/logger'
 
-interface RegisterBody {
+interface RegisterBody extends VerificationBody {
   username?: string
   password?: string
 }
@@ -22,6 +23,8 @@ export default defineEventHandler(async (event) => {
   }
 
   const body = await readBody<RegisterBody>(event)
+  await verifyLoginVerification(event, body ?? {})
+
   const username = body?.username?.trim() ?? ''
   const password = body?.password ?? ''
 
@@ -38,7 +41,11 @@ export default defineEventHandler(async (event) => {
 
     return {
       success: true,
-      user: { id: user.id, username: user.username, role: user.role }
+      user: {
+        id: user.id,
+        username: user.username,
+        role: user.role
+      }
     }
   } catch (error: unknown) {
     if (error instanceof Error) {

server/api/auth/status.get.ts

@@ -1,5 +1,5 @@
 import { isAllowRegistration } from '../../utils/db'
-import { isAdminSecretConfigured } from '../../utils/env'
+import { getLoginVerificationPublicConfig, isAdminSecretConfigured } from '../../utils/env'
 import {
   getCurrentUser,
   isInitialized
@@ -17,8 +17,13 @@ export default defineEventHandler(async (event) => {
     allowRegistration: isAllowRegistration(),
     legacyMode,
     needsMigration,
+    loginVerification: getLoginVerificationPublicConfig(event),
     user: user
-      ? { id: user.id, username: user.username, role: user.role }
+      ? {
+          id: user.id,
+          username: user.username,
+          role: user.role
+        }
       : null
   }
 })

server/api/settings/index.patch.ts

@@ -9,6 +9,11 @@ import {
   SETTINGS_IMAGE_BASE_URL,
   SETTINGS_SITE_BASE_URL,
   SETTINGS_WEBP_QUALITY,
+  SETTINGS_LOGIN_VERIFICATION_METHOD,
+  SETTINGS_TURNSTILE_SITE_KEY,
+  SETTINGS_TURNSTILE_SECRET_KEY,
+  SETTINGS_CAP_API_ENDPOINT,
+  SETTINGS_CAP_SECRET,
   setAllowRegistration
 } from '../../utils/db'
 import {
@@ -16,6 +21,8 @@ import {
   isValidImageBaseUrl,
   isValidRefererHost,
   isValidSiteBaseUrl,
+  normalizeCapApiEndpoint,
+  parseLoginVerificationMethod,
   MAX_AUTO_DELETE_DAYS,
   normalizeImageBaseUrl,
   normalizeRefererHosts,
@@ -23,6 +30,7 @@ import {
   parseAutoDeleteDays,
   parseWebpQuality,
   setGlobalAutoDeletePolicy,
+  validateLoginVerificationSettings,
   validateSettingsDomainPatch
 } from '../../utils/env'
 
@@ -36,6 +44,11 @@ interface SettingsPatchBody {
   storageUseDatePath?: unknown
   autoDeleteDays?: unknown
   allowRegistration?: unknown
+  loginVerificationMethod?: unknown
+  turnstileSiteKey?: unknown
+  turnstileSecretKey?: unknown
+  capApiEndpoint?: unknown
+  capSecret?: unknown
 }
 
 export default defineEventHandler(async (event) => {
@@ -161,5 +174,79 @@ export default defineEventHandler(async (event) => {
     setSetting(SETTINGS_STORAGE_USE_DATE_PATH, body.storageUseDatePath ? 'true' : 'false')
   }
 
+  const currentMethod = parseLoginVerificationMethod(
+    getSetting(SETTINGS_LOGIN_VERIFICATION_METHOD) ?? 'slider'
+  ) ?? 'slider'
+  let nextMethod = currentMethod
+  let nextTurnstileSiteKey = getSetting(SETTINGS_TURNSTILE_SITE_KEY) ?? ''
+  let nextTurnstileSecretKey = getSetting(SETTINGS_TURNSTILE_SECRET_KEY) ?? ''
+  let nextCapApiEndpoint = getSetting(SETTINGS_CAP_API_ENDPOINT) ?? ''
+  let nextCapSecret = getSetting(SETTINGS_CAP_SECRET) ?? ''
+
+  if (body.loginVerificationMethod !== undefined) {
+    const parsed = parseLoginVerificationMethod(String(body.loginVerificationMethod))
+    if (!parsed) {
+      createApiError(event, 'INVALID_REQUEST', '无效的登录验证方式', 400)
+    }
+    nextMethod = parsed
+  }
+
+  if (body.turnstileSiteKey !== undefined) {
+    nextTurnstileSiteKey = typeof body.turnstileSiteKey === 'string'
+      ? body.turnstileSiteKey.trim()
+      : ''
+  }
+
+  if (body.turnstileSecretKey !== undefined) {
+    nextTurnstileSecretKey = typeof body.turnstileSecretKey === 'string'
+      ? body.turnstileSecretKey.trim()
+      : ''
+  }
+
+  if (body.capApiEndpoint !== undefined) {
+    nextCapApiEndpoint = typeof body.capApiEndpoint === 'string'
+      ? normalizeCapApiEndpoint(body.capApiEndpoint)
+      : ''
+  }
+
+  if (body.capSecret !== undefined) {
+    nextCapSecret = typeof body.capSecret === 'string'
+      ? body.capSecret.trim()
+      : ''
+  }
+
+  if (body.loginVerificationMethod !== undefined
+    || body.turnstileSiteKey !== undefined
+    || body.turnstileSecretKey !== undefined
+    || body.capApiEndpoint !== undefined
+    || body.capSecret !== undefined) {
+    const settingsError = validateLoginVerificationSettings(
+      nextMethod,
+      nextTurnstileSiteKey,
+      nextTurnstileSecretKey,
+      nextCapApiEndpoint,
+      nextCapSecret
+    )
+    if (settingsError) {
+      createApiError(event, 'INVALID_REQUEST', settingsError, 400)
+    }
+  }
+
+  if (body.loginVerificationMethod !== undefined) {
+    setSetting(SETTINGS_LOGIN_VERIFICATION_METHOD, nextMethod)
+  }
+  if (body.turnstileSiteKey !== undefined) {
+    setSetting(SETTINGS_TURNSTILE_SITE_KEY, nextTurnstileSiteKey)
+  }
+  if (body.turnstileSecretKey !== undefined) {
+    setSetting(SETTINGS_TURNSTILE_SECRET_KEY, nextTurnstileSecretKey)
+  }
+  if (body.capApiEndpoint !== undefined) {
+    setSetting(SETTINGS_CAP_API_ENDPOINT, nextCapApiEndpoint)
+  }
+  if (body.capSecret !== undefined) {
+    setSetting(SETTINGS_CAP_SECRET, nextCapSecret)
+  }
+
   return getSettingsPayload(event)
 })

server/api/stats.get.ts

@@ -41,7 +41,7 @@ export default defineEventHandler(async (event) => {
   const userFilter = await getImageUserFilter(event)
 
   try {
-    if (user.role === 'admin' && userFilter === 'admin') {
+    if (userFilter === 'admin') {
       const activity = getActivityStats()
       const [storedCount, byFolder, storageUsage] = await Promise.all([
         countImages(),

server/cli/slider.mjs

@@ -0,0 +1,41 @@
+import { mkdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { DatabaseSync } from 'node:sqlite'
+
+const SETTING_KEY = 'login_verification_method'
+const SLIDER = 'slider'
+
+if (process.argv.length > 2) {
+  console.error('Usage: slider')
+  process.exit(1)
+}
+
+const dataDir = process.env.DATA_DIR || join(process.cwd(), 'data')
+mkdirSync(dataDir, { recursive: true })
+const db = new DatabaseSync(join(dataDir, 'pichost.db'))
+
+const row = db.prepare(`
+  SELECT value
+  FROM settings
+  WHERE key = ?
+`).get(SETTING_KEY)
+
+const previous = row?.value ?? null
+const updatedAt = new Date().toISOString()
+
+db.prepare(`
+  INSERT INTO settings (key, value, updated_at)
+  VALUES (?, ?, ?)
+  ON CONFLICT(key) DO UPDATE SET
+    value = excluded.value,
+    updated_at = excluded.updated_at
+`).run(SETTING_KEY, SLIDER, updatedAt)
+
+db.close()
+
+if (previous === SLIDER) {
+  console.log('[PicHost] Login verification is already set to slider.')
+} else {
+  console.log(`[PicHost] Login verification changed: ${previous ?? '(unset)'} → slider`)
+}
+console.log('[PicHost] Refresh the login page to use the local slider captcha.')

server/utils/access.ts

@@ -180,7 +180,10 @@ export async function getImageUserFilter(
   }
 
   const user = await requireUserAuth(event)
-  return user.role === 'admin' ? 'admin' : user.id
+  if (user.role === 'admin') {
+    return 'admin'
+  }
+  return user.id
 }
 
 export async function assertImageOwnership(

server/utils/db.ts

@@ -384,6 +384,11 @@ export const SETTINGS_IMAGE_BASE_URL = 'image_base_url'
 export const SETTINGS_AUTO_DELETE_DAYS = 'auto_delete_days'
 export const SETTINGS_AUTO_DELETE_ENABLED_AT = 'auto_delete_enabled_at'
 export const SETTINGS_ALLOW_REGISTRATION = 'allow_registration'
+export const SETTINGS_LOGIN_VERIFICATION_METHOD = 'login_verification_method'
+export const SETTINGS_TURNSTILE_SITE_KEY = 'turnstile_site_key'
+export const SETTINGS_TURNSTILE_SECRET_KEY = 'turnstile_secret_key'
+export const SETTINGS_CAP_API_ENDPOINT = 'cap_api_endpoint'
+export const SETTINGS_CAP_SECRET = 'cap_secret'
 
 export function isAllowRegistration(): boolean {
   return getSetting(SETTINGS_ALLOW_REGISTRATION) === 'true'

server/utils/env.ts

@@ -11,6 +11,11 @@ import {
   SETTINGS_IMAGE_BASE_URL,
   SETTINGS_SITE_BASE_URL,
   SETTINGS_WEBP_QUALITY,
+  SETTINGS_LOGIN_VERIFICATION_METHOD,
+  SETTINGS_TURNSTILE_SITE_KEY,
+  SETTINGS_TURNSTILE_SECRET_KEY,
+  SETTINGS_CAP_API_ENDPOINT,
+  SETTINGS_CAP_SECRET,
   isAllowRegistration
 } from './db'
 
@@ -257,6 +262,93 @@ export function getApiUploadToken(event: H3Event): string {
   return ''
 }
 
+export const LOGIN_VERIFICATION_METHODS = ['slider', 'turnstile', 'cap'] as const
+export type LoginVerificationMethod = typeof LOGIN_VERIFICATION_METHODS[number]
+
+const DEFAULT_LOGIN_VERIFICATION_METHOD: LoginVerificationMethod = 'slider'
+
+export function parseLoginVerificationMethod(raw: string): LoginVerificationMethod | null {
+  if (raw === 'slider' || raw === 'turnstile' || raw === 'cap') return raw
+  return null
+}
+
+export function getLoginVerificationMethod(_event?: H3Event): LoginVerificationMethod {
+  const fromDb = getSetting(SETTINGS_LOGIN_VERIFICATION_METHOD)
+  if (fromDb !== null) {
+    return parseLoginVerificationMethod(fromDb) ?? DEFAULT_LOGIN_VERIFICATION_METHOD
+  }
+  return DEFAULT_LOGIN_VERIFICATION_METHOD
+}
+
+export function getTurnstileSiteKeyConfigured(_event?: H3Event): string {
+  return getSetting(SETTINGS_TURNSTILE_SITE_KEY)?.trim() ?? ''
+}
+
+export function getTurnstileSecretKey(_event?: H3Event): string {
+  return getSetting(SETTINGS_TURNSTILE_SECRET_KEY)?.trim() ?? ''
+}
+
+export function normalizeCapApiEndpoint(raw: string): string {
+  const trimmed = raw.trim()
+  if (!trimmed) return ''
+  return trimmed.endsWith('/') ? trimmed : `${trimmed}/`
+}
+
+export function getCapApiEndpointConfigured(_event?: H3Event): string {
+  const fromDb = getSetting(SETTINGS_CAP_API_ENDPOINT)
+  return fromDb ? normalizeCapApiEndpoint(fromDb) : ''
+}
+
+export function getCapSecret(_event?: H3Event): string {
+  return getSetting(SETTINGS_CAP_SECRET)?.trim() ?? ''
+}
+
+export interface LoginVerificationPublicConfig {
+  method: LoginVerificationMethod
+  turnstileSiteKey?: string
+  capApiEndpoint?: string
+}
+
+export function getLoginVerificationPublicConfig(event: H3Event): LoginVerificationPublicConfig {
+  const method = getLoginVerificationMethod(event)
+  const config: LoginVerificationPublicConfig = { method }
+  if (method === 'turnstile') {
+    const siteKey = getTurnstileSiteKeyConfigured(event)
+    if (siteKey) config.turnstileSiteKey = siteKey
+  }
+  if (method === 'cap') {
+    const endpoint = getCapApiEndpointConfigured(event)
+    if (endpoint) config.capApiEndpoint = endpoint
+  }
+  return config
+}
+
+export function validateLoginVerificationSettings(
+  method: LoginVerificationMethod,
+  turnstileSiteKey: string,
+  turnstileSecretKey: string,
+  capApiEndpoint: string,
+  capSecret: string
+): string | null {
+  if (method === 'turnstile') {
+    if (!turnstileSiteKey.trim()) {
+      return '请配置 Turnstile Site Key'
+    }
+    if (!turnstileSecretKey.trim()) {
+      return '请配置 Turnstile Secret Key'
+    }
+  }
+  if (method === 'cap') {
+    if (!normalizeCapApiEndpoint(capApiEndpoint)) {
+      return '请配置 Cap API Endpoint'
+    }
+    if (!capSecret.trim()) {
+      return '请配置 Cap Secret Key'
+    }
+  }
+  return null
+}
+
 export const DEFAULT_WEBP_QUALITY = 80
 
 export type WebpQualitySource = 'env' | 'db' | 'default'
@@ -596,6 +688,11 @@ export function getSettingsPayload(event: H3Event) {
     autoDeleteDaysSource: getAutoDeleteDaysSource(),
     autoDeleteEnvFallback: parseAutoDeleteDays(getAutoDeleteDaysFromEnv()) ?? 0,
     allowRegistration: isAllowRegistration(),
+    loginVerificationMethod: getLoginVerificationMethod(event),
+    turnstileSiteKey: getTurnstileSiteKeyConfigured(event),
+    turnstileSecretKey: getTurnstileSecretKey(event),
+    capApiEndpoint: getCapApiEndpointConfigured(event),
+    capSecret: getCapSecret(event),
     appVersion,
     env: {
       webpQuality,

server/utils/login-verification.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+import { verifyTurnstileToken } from './verify-turnstile'
+import { verifyCapToken } from './verify-cap'
+
+describe('verify-turnstile', () => {
+  beforeEach(() => {
+    vi.stubGlobal('fetch', vi.fn())
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('returns true when siteverify succeeds', async () => {
+    vi.mocked(fetch).mockResolvedValue({
+      json: async () => ({ success: true })
+    } as Response)
+
+    await expect(verifyTurnstileToken('secret', 'token', '1.2.3.4')).resolves.toBe(true)
+  })
+
+  it('returns false when siteverify fails', async () => {
+    vi.mocked(fetch).mockResolvedValue({
+      json: async () => ({ success: false })
+    } as Response)
+
+    await expect(verifyTurnstileToken('secret', 'token')).resolves.toBe(false)
+  })
+
+  it('returns false when token is missing', async () => {
+    await expect(verifyTurnstileToken('secret', '')).resolves.toBe(false)
+    expect(fetch).not.toHaveBeenCalled()
+  })
+})
+
+describe('verify-cap', () => {
+  beforeEach(() => {
+    vi.stubGlobal('fetch', vi.fn())
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('posts to endpoint siteverify and returns true on success', async () => {
+    vi.mocked(fetch).mockResolvedValue({
+      json: async () => ({ success: true })
+    } as Response)
+
+    const ok = await verifyCapToken(
+      'https://cap.example.com/site-key/',
+      'secret',
+      'token'
+    )
+    expect(ok).toBe(true)
+    expect(fetch).toHaveBeenCalledWith(
+      'https://cap.example.com/site-key/siteverify',
+      expect.objectContaining({ method: 'POST' })
+    )
+  })
+
+  it('returns false on network error', async () => {
+    vi.mocked(fetch).mockRejectedValue(new Error('network'))
+
+    await expect(verifyCapToken(
+      'https://cap.example.com/site-key/',
+      'secret',
+      'token'
+    )).resolves.toBe(false)
+  })
+})

server/utils/login-verification.ts

@@ -0,0 +1,65 @@
+import type { H3Event } from 'h3'
+import { createApiError } from './api-error'
+import {
+  getCapApiEndpointConfigured,
+  getCapSecret,
+  getLoginVerificationMethod,
+  getTurnstileSecretKey,
+  getTurnstileSiteKeyConfigured
+} from './env'
+import { verifyLoginCaptcha } from './login-captcha'
+import { clientIp } from './logger'
+import { verifyCapToken } from './verify-cap'
+import { verifyTurnstileToken } from './verify-turnstile'
+
+export interface VerificationBody {
+  captchaId?: string
+  captchaPosition?: number
+  turnstileToken?: string
+  capToken?: string
+}
+
+export async function verifyLoginVerification(
+  event: H3Event,
+  body: VerificationBody
+): Promise<void> {
+  const method = getLoginVerificationMethod(event)
+
+  if (method === 'slider') {
+    const id = body.captchaId?.trim() ?? ''
+    const position = Number(body.captchaPosition)
+    if (!id || !verifyLoginCaptcha(id, position)) {
+      createApiError(event, 'INVALID_REQUEST', '请先完成滑块验证', 400)
+    }
+    return
+  }
+
+  if (method === 'turnstile') {
+    if (!getTurnstileSiteKeyConfigured(event) || !getTurnstileSecretKey(event)) {
+      createApiError(event, 'INVALID_REQUEST', '人机验证未正确配置', 400)
+    }
+    const token = body.turnstileToken?.trim() ?? ''
+    const ok = await verifyTurnstileToken(
+      getTurnstileSecretKey(event),
+      token,
+      clientIp(event)
+    )
+    if (!ok) {
+      createApiError(event, 'INVALID_REQUEST', '请先完成人机验证', 400)
+    }
+    return
+  }
+
+  if (!getCapApiEndpointConfigured(event) || !getCapSecret(event)) {
+    createApiError(event, 'INVALID_REQUEST', '人机验证未正确配置', 400)
+  }
+  const token = body.capToken?.trim() ?? ''
+  const ok = await verifyCapToken(
+    getCapApiEndpointConfigured(event),
+    getCapSecret(event),
+    token
+  )
+  if (!ok) {
+    createApiError(event, 'INVALID_REQUEST', '请先完成人机验证', 400)
+  }
+}

server/utils/verify-cap.ts

@@ -0,0 +1,31 @@
+interface CapVerifyResult {
+  success?: boolean
+}
+
+export async function verifyCapToken(
+  endpoint: string,
+  secret: string,
+  token: string
+): Promise<boolean> {
+  if (!endpoint || !secret || !token) return false
+
+  const base = endpoint.endsWith('/') ? endpoint : `${endpoint}/`
+  const url = `${base}siteverify`
+
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), 5000)
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ secret, response: token }),
+      signal: controller.signal
+    })
+    const result = await response.json() as CapVerifyResult
+    return result.success === true
+  } catch {
+    return false
+  } finally {
+    clearTimeout(timeout)
+  }
+}

server/utils/verify-turnstile.ts

@@ -0,0 +1,36 @@
+interface TurnstileVerifyResult {
+  success?: boolean
+}
+
+export async function verifyTurnstileToken(
+  secret: string,
+  token: string,
+  remoteIp?: string
+): Promise<boolean> {
+  if (!secret || !token) return false
+
+  const params = new URLSearchParams({
+    secret,
+    response: token
+  })
+  if (remoteIp) {
+    params.set('remoteip', remoteIp)
+  }
+
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), 5000)
+  try {
+    const response = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: params,
+      signal: controller.signal
+    })
+    const result = await response.json() as TurnstileVerifyResult
+    return result.success === true
+  } catch {
+    return false
+  } finally {
+    clearTimeout(timeout)
+  }
+}