Merge branch 'jxxghp:v2' into v2

2026-07-05 14:31:31 +08:00 · 2026-01-12 00:52:28 +00:00
parent 53efdc2802 9644076463
commit c691cdaa0e
49 changed files with 2677 additions and 997 deletions
--- a/src/@core/scss/_mixins.scss
+++ b/src/@core/scss/_mixins.scss
@@ -1,5 +1,5 @@
@use "sass:map";
-@use "vuetify/lib/styles/settings" as vuetify_settings;
+@use "vuetify/lib/styles/settings/_index.sass" as vuetify_settings;
@use "@styles/variables/_vuetify.scss" as vuetify;

@mixin themed($property, $light-value, $dark-value) {
--- a/src/@core/utils/navigator.ts
+++ b/src/@core/utils/navigator.ts
@@ -35,6 +35,19 @@ export function urlBase64ToUint8Array(base64String: string) {
  return outputArray
 }

+// Uint8Array 转 Base64URL
+export function bufferToBase64Url(buffer: ArrayBuffer): string {
+  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '')
+}
+
+// Base64URL 转 Uint8Array
+export function base64UrlToUint8Array(base64Url: string): Uint8Array {
+  return Uint8Array.from(atob(base64Url.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0))
+}
+
 // 判断是否为PWA
 export const isPWA = async (): Promise<boolean> => {
  if ('serviceWorker' in navigator) {
--- a/src/@validators/index.ts
+++ b/src/@validators/index.ts
@@ -1,4 +1,4 @@
-import type { ValidationRule } from 'vuetify/types/services/validation'
+type ValidationRule = (value: any) => string | boolean

 // 必输校验
 export const requiredValidator: ValidationRule = (value: any) => {
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,7 @@ import { themeManager } from '@/utils/themeManager'

 // 生效主题
 const { global: globalTheme } = useTheme()
-let themeValue = localStorage.getItem('theme') || 'light'
+let themeValue = localStorage.getItem('theme') || 'auto'
 const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
 globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue

@@ -237,6 +237,14 @@ async function loadBackgroundImages(retryCount = 0) {
 }

 onMounted(async () => {
+  // 移除URL中的时间戳参数
+  const url = new URL(window.location.href)
+  if (url.searchParams.has('_t')) {
+    url.searchParams.delete('_t')
+    const newUrl = url.pathname + url.search + url.hash
+    window.history.replaceState(null, '', newUrl)
+  }
+
  // 配置 ApexCharts
  configureApexCharts()

--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -861,6 +861,16 @@ export interface User {
  nickname?: string
 }

+// 通行密钥
+export interface PassKey {
+  id: number
+  name: string
+  created_at: string
+  last_used_at?: string
+  aaguid?: string
+  transports?: string
+}
+
 // 存储空间
 export interface Storage {
  // 总空间
@@ -1429,3 +1439,10 @@ export interface SubscribeShareStatistics {
  // 总复用人次
  total_reuse_count?: number
 }
+
+// 通用API响应
+export interface ApiResponse<T = any> {
+  success: boolean
+  message?: string
+  data: T
+}
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -4,6 +4,7 @@ import FileToolbar from './filebrowser/FileToolbar.vue'
 import FileNavigator from './filebrowser/FileNavigator.vue'
 import type { EndPoints, FileItem, StorageConf } from '@/api/types'
 import { storageIconDict } from '@/api/constants'
+import type { AxiosInstance } from 'axios'

 // LocalStorage keys
 const SORT_KEY = 'fileBrowser.sort'
@@ -16,7 +17,7 @@ const props = defineProps({
  tree: Boolean,
  endpoints: Object as PropType<EndPoints>,
  axios: {
-    type: Function,
+    type: Object as PropType<AxiosInstance>,
    required: true,
  },
  axiosconfig: Object,
--- a/src/components/cards/MessageCard.vue
+++ b/src/components/cards/MessageCard.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import MarkdownIt from 'markdown-it'
+import mdLinkAttributes from 'markdown-it-link-attributes'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import type { Message } from '@/api/types'
 import { formatDateDifference } from '@core/utils/formatters'
@@ -19,6 +21,21 @@ const isImageLoaded = ref(false)
 // 图片是否加载失败
 const imageLoadError = ref(false)

+// 初始化 markdown-it
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+})
+
+// 插件：链接在新窗口打开
+md.use(mdLinkAttributes, {
+  attrs: {
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+})
+
 // 图片加载完成
 async function imageLoaded() {
  isImageLoaded.value = true
@@ -42,10 +59,10 @@ function noteToJson() {
  return {}
 }

-// 将\n转换为html属性的换行符
-function replaceNewLine(value: string) {
+// 渲染 Markdown
+function renderMarkdown(value: string) {
  if (!value) return ''
-  return value.replace(/\n/g, '<br/>')
+  return md.render(value)
 }
 </script>

@@ -85,19 +102,23 @@ function replaceNewLine(value: string) {
    </VCardTitle>
    <div
      v-if="props.message?.text && props.message?.action === 0"
-      class="rounded-md text-body-1 py-2 px-4 elevation-2 bg-primary text-white chat-right mb-1"
+      class="rounded-md text-body-1 py-1 px-4 elevation-2 bg-primary text-white chat-right mb-1"
    >
-      <p class="mb-0">{{ props.message?.text }}</p>
+      <div class="markdown-body" v-html="renderMarkdown(props.message?.text)" />
    </div>
-    <VCardText v-if="props.message?.text && props.message?.action === 1" v-html="replaceNewLine(props.message?.text)" />
+    <VCardText
+      v-if="props.message?.text && props.message?.action === 1"
+      class="markdown-body"
+      v-html="renderMarkdown(props.message?.text)"
+    />
    <VCardText v-if="!isNullOrEmptyObject(props.message?.note)">
      <VList>
        <VListItem v-for="(value, key) in noteToJson()" :key="key" two-line>
          <VListItemTitle v-if="value.title_year" class="font-bold break-words whitespace-break-spaces">
-            {{ key + 1 }}. {{ value.title_year }}
+            {{ Number(key) + 1 }}. {{ value.title_year }}
          </VListItemTitle>
          <VListItemTitle v-if="value.enclosure" class="font-bold break-words whitespace-break-spaces">
-            {{ key + 1 }}. {{ value.title }} {{ value.volume_factor }} ↑{{ value.seeders }}
+            {{ Number(key) + 1 }}. {{ value.title }} {{ value.volume_factor }} ↑{{ value.seeders }}
          </VListItemTitle>
          <VListItemSubtitle v-if="value.type">
            类型：{{ value.type }} 评分：{{ value.vote_average }}
@@ -116,3 +137,78 @@ function replaceNewLine(value: string) {
    }}</span>
  </div>
 </template>
+
+<style lang="scss">
+.markdown-body {
+  word-break: break-all;
+
+  p {
+    margin-block-end: 0.5rem;
+  }
+
+  p:last-child {
+    margin-block-end: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+
+  ul,
+  ol {
+    margin-block-end: 0.5rem;
+    padding-inline-start: 1.5rem;
+  }
+
+  code {
+    border-radius: 4px;
+    background-color: rgba(var(--v-border-color), 0.1);
+    font-family: monospace;
+    padding-block: 0.2rem;
+    padding-inline: 0.4rem;
+  }
+
+  pre {
+    overflow: auto;
+    padding: 1rem;
+    border-radius: 8px;
+    background-color: rgba(var(--v-border-color), 0.1);
+    margin-block-end: 0.5rem;
+
+    code {
+      padding: 0;
+      background-color: transparent;
+    }
+  }
+
+  blockquote {
+    border-inline-start: 4px solid rgba(var(--v-border-color), 0.2);
+    font-style: italic;
+    margin-block-end: 0.5rem;
+    padding-inline-start: 1rem;
+  }
+
+  table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    margin-block-end: 1rem;
+
+    th,
+    td {
+      padding: 0.5rem;
+      border: 1px solid rgba(var(--v-border-color), 0.1);
+      text-align: start;
+    }
+
+    th {
+      background-color: rgba(var(--v-border-color), 0.05);
+    }
+  }
+
+  img {
+    block-size: auto;
+    max-inline-size: 100%;
+  }
+}
+</style>
--- a/src/components/dialog/AboutDialog.vue
+++ b/src/components/dialog/AboutDialog.vue
@@ -1,12 +1,16 @@
 <script lang="ts" setup>
 import { formatDateDifference } from '@/@core/utils/formatters'
 import api from '@/api'
+import { clearCachesAndServiceWorker, reloadWithTimestamp } from '@/composables/useVersionChecker'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'

 // 国际化
 const { t } = useI18n()

+// APP版本
+const appVersion = __APP_VERSION__
+
 // 定义事件
 const emit = defineEmits(['close'])

@@ -115,6 +119,13 @@ function releaseTime(releaseDate: string) {
  return formatDateDifference(releaseDate)
 }

+// 强制清除缓存
+async function clearCache() {
+  await clearCachesAndServiceWorker()
+  // 刷新页面，添加时间戳参数以强制更新
+  reloadWithTimestamp()
+}
+
 onMounted(() => {
  querySystemEnv()
  queryAllRelease()
@@ -170,6 +181,27 @@ onMounted(() => {
                    </dd>
                  </div>
                </div>
+                <div>
+                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+                    <dt class="block text-sm font-bold">{{ t('setting.about.browserVersion') }}</dt>
+                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                      <span class="flex-grow flex flex-row items-center truncate">
+                        <code class="truncate">{{ appVersion }}</code>
+                        <VBtn
+                          size="x-small"
+                          variant="tonal"
+                          class="ms-2"
+                          @click="clearCache"
+                        >
+                          <template #prepend>
+                            <VIcon icon="mdi-refresh" size="14" />
+                          </template>
+                          {{ t('setting.about.clearCache') }}
+                        </VBtn>
+                      </span>
+                    </dd>
+                  </div>
+                </div>
                <div>
                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
                    <dt class="block text-sm font-bold">{{ t('setting.about.authVersion') }}</dt>
@@ -194,7 +226,7 @@ onMounted(() => {
                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
                    <dt class="block text-sm font-bold">{{ t('setting.about.configDir') }}</dt>
                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                      <span class="flex-grow undefined">
+                      <span class="flex-grow break-all">
                        <code>{{ systemEnv.CONFIG_DIR }}</code>
                      </span>
                    </dd>
@@ -202,7 +234,7 @@ onMounted(() => {
                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
                    <dt class="block text-sm font-bold">{{ t('setting.about.dataDir') }}</dt>
                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                      <span class="flex-grow undefined"
+                      <span class="flex-grow break-all"
                        ><code>{{ t('setting.about.dataDirectory') }}</code></span
                      >
                    </dd>
@@ -212,7 +244,7 @@ onMounted(() => {
                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
                    <dt class="block text-sm font-bold">{{ t('setting.about.timezone') }}</dt>
                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                      <span class="flex-grow undefined">
+                      <span class="flex-grow break-all">
                        <code>{{ systemEnv.TZ }}</code>
                      </span>
                    </dd>
@@ -261,7 +293,7 @@ onMounted(() => {
                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
                    <dt class="block text-sm font-bold">{{ t('setting.about.documentation') }}</dt>
                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                      <span class="flex-grow undefined">
+                      <span class="flex-grow break-all">
                        <a
                          href="https://movie-pilot.org"
                          target="_blank"
@@ -278,7 +310,7 @@ onMounted(() => {
                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
                    <dt class="block text-sm font-bold">{{ t('setting.about.feedback') }}</dt>
                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                      <span class="flex-grow undefined">
+                      <span class="flex-grow break-all">
                        <a
                          href="https://github.com/jxxghp/MoviePilot/issues/new/choose"
                          target="_blank"
@@ -295,7 +327,7 @@ onMounted(() => {
                  <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
                    <dt class="block text-sm font-bold">{{ t('setting.about.channel') }}</dt>
                    <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-                      <span class="flex-grow undefined">
+                      <span class="flex-grow break-all">
                        <a
                          href="https://t.me/moviepilot_channel"
                          target="_blank"
--- a/src/components/dialog/OTPAuthDialog.vue
+++ b/src/components/dialog/OTPAuthDialog.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toastification'
+import QRCode from 'qrcode'
+import { useDisplay } from 'vuetify'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import type { ApiResponse, PassKey } from '@/api/types'
+
+interface Props {
+  modelValue: boolean
+  isOtp: boolean
+  passkeyList?: PassKey[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  passkeyList: () => [],
+})
+
+const emit = defineEmits(['update:modelValue', 'update:isOtp', 'verifyPassword'])
+
+const { t } = useI18n()
+const display = useDisplay()
+const $toast = useToast()
+
+// 内部状态
+const show = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+// otp uri
+const otpUri = ref('')
+
+// otp secret
+const secret = ref('')
+
+// 确认双重验证密码
+const otpPassword = ref('')
+
+// 二维码图片 base64
+const qrCodeImage = ref('')
+
+// 二维码信息
+const qrCode = ref('')
+
+// 为当前用户获取Otp Uri
+async function getOtpUri() {
+  // 如果已经启用OTP，只打开对话框，不生成新的二维码
+  if (props.isOtp) {
+    qrCode.value = '' // 清空二维码，这样对话框会显示清除界面
+    qrCodeImage.value = ''
+    return
+  }
+
+  // 未启用OTP，生成新的二维码
+  try {
+    const result = (await api.post('mfa/otp/generate')) as ApiResponse<{
+      uri: string
+      secret: string
+    }>
+    if (result.success) {
+      otpUri.value = result.data.uri
+      secret.value = result.data.secret
+      qrCode.value = result.data.uri
+      // 生成二维码图片
+      qrCodeImage.value = await QRCode.toDataURL(result.data.uri, {
+        width: 200,
+        margin: 1,
+      })
+    } else {
+      $toast.error(t('profile.otpGenerateFailed', { message: result.message }))
+    }
+  } catch (error) {
+    console.error(error)
+    $toast.error(t('profile.otpGenerateFailed', { message: error instanceof Error ? error.message : String(error) }))
+  }
+}
+
+// 启用Otp
+async function judgeOtpPassword() {
+  if (!otpPassword.value) {
+    $toast.error(t('profile.otpCodeRequired'))
+    return
+  }
+  try {
+    const result = (await api.post('mfa/otp/verify', {
+      uri: otpUri.value,
+      otpPassword: otpPassword.value,
+    })) as ApiResponse
+
+    if (result.success) {
+      $toast.success(t('profile.otpEnableSuccess'))
+      show.value = false
+      emit('update:isOtp', true)
+    } else {
+      $toast.error(t('profile.otpEnableFailed', { message: result.message }))
+    }
+  } catch (error) {
+    console.error(error)
+    $toast.error(t('profile.otpEnableFailed', { message: error instanceof Error ? error.message : String(error) }))
+  }
+}
+
+// 关闭当前用户的双重验证
+function disableOtp() {
+  // 如果已绑定PassKey，不允许关闭OTP
+  if (props.passkeyList && props.passkeyList.length > 0) {
+    $toast.error(t('profile.disableOtpWithPasskeyError'))
+    return
+  }
+
+  emit('verifyPassword', {
+    title: t('profile.disableTwoFactor'),
+    text: t('profile.confirmToDisableOtp'),
+    callback: async (password: string) => {
+      try {
+        const result = (await api.post('mfa/otp/disable', {
+          password,
+        })) as ApiResponse
+        if (result.success) {
+          emit('update:isOtp', false)
+          $toast.success(t('profile.otpDisableSuccess'))
+          show.value = false
+        } else {
+          $toast.error(t('profile.otpDisableFailed', { message: result.message }))
+        }
+      } catch (error) {
+        console.error(error)
+        $toast.error(t('profile.otpDisableFailed', { message: error instanceof Error ? error.message : String(error) }))
+      }
+    },
+  })
+}
+
+// 监听弹窗打开，自动获取 URI
+watch(
+  () => props.modelValue,
+  val => {
+    if (val) {
+      getOtpUri()
+      otpPassword.value = ''
+    } else {
+      // 弹窗关闭时，清空数据
+      qrCodeImage.value = ''
+      qrCode.value = ''
+      otpUri.value = ''
+      secret.value = ''
+      otpPassword.value = ''
+    }
+  },
+)
+</script>
+
+<template>
+  <VDialog v-model="show" max-width="45rem" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-cellphone-key" class="me-2" />
+          {{ props.isOtp && !qrCode ? t('profile.authenticatorManagement') : t('profile.setupAuthenticator') }}
+        </VCardTitle>
+        <VDialogCloseBtn @click="show = false" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <p class="mb-6">
+          {{ t('profile.authenticatorAppDescription') }}
+        </p>
+        <!-- 如果已启用OTP，显示清除界面 -->
+        <template v-if="props.isOtp && !qrCode">
+          <VAlert type="success" variant="tonal" class="mb-4">
+            {{ t('profile.authenticatorEnabled') }}
+          </VAlert>
+          <p class="mb-6">
+            {{ t('profile.clearAuthenticatorTip') }}
+          </p>
+          <div class="d-flex justify-end flex-wrap gap-4">
+            <VBtn variant="outlined" color="secondary" @click="show = false">
+              {{ t('common.cancel') }}
+            </VBtn>
+            <VBtn color="error" @click="disableOtp">
+              <template #prepend>
+                <VIcon icon="mdi-delete" />
+              </template>
+              {{ t('profile.clearAuthenticator') }}
+            </VBtn>
+          </div>
+        </template>
+
+        <!-- 设置新的OTP -->
+        <template v-else>
+          <div class="my-6 rounded text-center p-3 border" style="width: fit-content; margin: 0 auto">
+            <VImg class="mx-auto" :src="qrCodeImage" width="200" height="200">
+              <template #placeholder>
+                <div class="w-full h-full">
+                  <VSkeletonLoader class="object-cover aspect-w-1 aspect-h-1" />
+                </div>
+              </template>
+            </VImg>
+          </div>
+          <VAlert :title="secret" variant="tonal" type="warning" class="my-4" :text="t('profile.secretKeyTip')">
+            <template #prepend />
+          </VAlert>
+          <VForm @submit.prevent="judgeOtpPassword">
+            <VTextField
+              v-model="otpPassword"
+              type="text"
+              inputmode="numeric"
+              autocomplete="one-time-code"
+              :label="t('profile.enterVerificationCode')"
+              class="mb-8"
+              variant="outlined"
+              prepend-inner-icon="mdi-shield-key"
+            />
+            <div class="d-flex justify-end flex-wrap gap-4">
+              <VBtn variant="outlined" color="secondary" @click="show = false">
+                {{ t('common.cancel') }}
+              </VBtn>
+              <VBtn type="submit">
+                <template #prepend>
+                  <VIcon icon="mdi-check" />
+                </template>
+                {{ t('common.confirm') }}
+              </VBtn>
+            </div>
+          </VForm>
+        </template>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
--- a/src/components/dialog/PasskeyDialog.vue
+++ b/src/components/dialog/PasskeyDialog.vue
@@ -0,0 +1,312 @@
+<script lang="ts" setup>
+import { bufferToBase64Url, base64UrlToUint8Array } from '@/@core/utils/navigator'
+import { useToast } from 'vue-toastification'
+import { useDisplay } from 'vuetify'
+import { useI18n } from 'vue-i18n'
+import { formatDateDifference } from '@core/utils/formatters'
+import api from '@/api'
+import type { ApiResponse, PassKey } from '@/api/types'
+
+interface Props {
+  modelValue: boolean
+  isOtp: boolean
+}
+
+// WebAuthn 相关接口定义
+interface PublicKeyCredentialDescriptorJSON {
+  id: string
+  type: 'public-key'
+  transports?: AuthenticatorTransport[]
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue', 'update:passkeyList', 'verifyPassword'])
+
+const { t, locale } = useI18n()
+const display = useDisplay()
+const $toast = useToast()
+
+// 内部状态
+const show = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+// PassKey列表
+const passkeyList = ref<PassKey[]>([])
+
+// PassKey注册loading
+const passkeyRegistering = ref(false)
+
+// PassKey名称
+const passkeyName = ref('')
+
+// PassKey challenge
+const passkeyChallenge = ref('')
+
+// 格式化日期
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString(locale.value)
+}
+
+// 获取PassKey列表
+async function fetchPassKeyList() {
+  try {
+    const result = (await api.get('mfa/passkey/list')) as ApiResponse<PassKey[]>
+    if (result.success) {
+      passkeyList.value = result.data || []
+      emit('update:passkeyList', passkeyList.value)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 注册PassKey
+async function registerPassKey() {
+  if (!passkeyName.value) {
+    $toast.error(t('profile.passkeyNameRequired'))
+    return
+  }
+
+  // 检查浏览器环境
+  if (!window.PublicKeyCredential) {
+    if (!window.isSecureContext) {
+      $toast.error(t('login.passkeySecureContextRequired'))
+      return
+    }
+    $toast.error(t('login.passkeyNotSupported'))
+    return
+  }
+
+  passkeyRegistering.value = true
+  try {
+    // 1. 开始注册
+    const startResult = (await api.post('mfa/passkey/register/start', {
+      name: passkeyName.value,
+    })) as ApiResponse<{ options: string; challenge: string }>
+
+    if (!startResult.success) {
+      $toast.error(startResult.message || t('profile.passkeyRegisterFailed'))
+      return
+    }
+
+    const { options, challenge } = startResult.data
+    const publicKeyOptions = JSON.parse(options)
+    passkeyChallenge.value = challenge
+
+    // 2. 调用WebAuthn API
+    const credential = (await navigator.credentials.create({
+      publicKey: {
+        ...publicKeyOptions,
+        challenge: base64UrlToUint8Array(publicKeyOptions.challenge),
+        user: {
+          ...publicKeyOptions.user,
+          id: base64UrlToUint8Array(publicKeyOptions.user.id),
+        },
+        excludeCredentials: publicKeyOptions.excludeCredentials?.map((cred: PublicKeyCredentialDescriptorJSON) => ({
+          ...cred,
+          id: base64UrlToUint8Array(cred.id),
+        })),
+      },
+    })) as PublicKeyCredential
+
+    if (!credential) {
+      $toast.error(t('profile.passkeyRegisterCancelled'))
+      return
+    }
+
+    // 3. 转换credential为可传输格式
+    const response = credential.response as AuthenticatorAttestationResponse
+    const credentialJSON = {
+      id: credential.id,
+      rawId: bufferToBase64Url(credential.rawId),
+      type: credential.type,
+      response: {
+        attestationObject: bufferToBase64Url(response.attestationObject),
+        clientDataJSON: bufferToBase64Url(response.clientDataJSON),
+        transports: typeof response.getTransports === 'function' ? response.getTransports() : [],
+      },
+    }
+
+    // 4. 完成注册
+    const finishResult = (await api.post('mfa/passkey/register/finish', {
+      credential: credentialJSON,
+      challenge: passkeyChallenge.value,
+      name: passkeyName.value,
+    })) as ApiResponse
+
+    if (finishResult.success) {
+      $toast.success(t('profile.passkeyRegisterSuccess'))
+      passkeyName.value = ''
+      await fetchPassKeyList()
+    } else {
+      $toast.error(finishResult.message || t('profile.passkeyRegisterFailed'))
+    }
+  } catch (error: any) {
+    console.error('PassKey注册失败:', error)
+    if (error.name === 'NotAllowedError') {
+      $toast.error(t('profile.passkeyRegisterCancelled'))
+    } else if (error.response) {
+      $toast.error(error.response.data?.detail || t('profile.passkeyRegisterFailed'))
+    } else {
+      $toast.error(error.message || t('profile.passkeyRegisterFailed'))
+    }
+  } finally {
+    passkeyRegistering.value = false
+  }
+}
+
+// 删除PassKey
+async function deletePassKey(passkeyId: number) {
+  emit('verifyPassword', {
+    title: t('profile.deletePasskey'),
+    text: t('profile.confirmToDeletePasskey'),
+    callback: async (password: string) => {
+      try {
+        const result = (await api.post('mfa/passkey/delete', {
+          passkey_id: passkeyId,
+          password,
+        })) as ApiResponse
+        if (result.success) {
+          $toast.success(t('profile.passkeyDeleteSuccess'))
+          await fetchPassKeyList()
+        } else {
+          $toast.error(result.message || t('profile.passkeyDeleteFailed'))
+        }
+      } catch (error) {
+        console.error(error)
+        $toast.error(t('profile.passkeyDeleteFailed'))
+      }
+    },
+  })
+}
+
+// 监听弹窗打开，自动加载列表
+watch(
+  () => props.modelValue,
+  val => {
+    if (val) {
+      fetchPassKeyList()
+      passkeyName.value = ''
+    } else {
+      // 弹窗关闭时，清空数据
+      passkeyName.value = ''
+      passkeyChallenge.value = ''
+      passkeyList.value = []
+    }
+  },
+)
+</script>
+
+<template>
+  <VDialog v-model="show" max-width="45rem" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="material-symbols:passkey" class="me-2" />
+          {{ t('profile.passkeyManagement') }}
+        </VCardTitle>
+        <VDialogCloseBtn @click="show = false" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <p class="mb-6">
+          {{ t('profile.passkeyAppDescription') }}
+        </p>
+
+        <!-- 安全警告 -->
+        <VAlert type="warning" variant="tonal" class="mb-6" icon="mdi-alert">
+          <i18n-t keypath="profile.passkeyDomainWarning" tag="span">
+            <template #domain>
+              <b>{{ t('profile.accessDomain') }}</b>
+            </template>
+          </i18n-t>
+        </VAlert>
+
+        <!-- 注册新通行密钥 -->
+        <VCard v-if="props.isOtp" variant="tonal" class="mb-6">
+          <VCardText>
+            <h5 class="text-h5 font-weight-medium mb-2">{{ t('profile.registerNewPasskey') }}</h5>
+            <p class="mb-4">{{ t('profile.passkeyDescription') }}</p>
+            <VForm @submit.prevent="registerPassKey">
+              <VTextField
+                v-model="passkeyName"
+                :label="t('profile.passkeyName')"
+                :placeholder="t('profile.passkeyNamePlaceholder')"
+                class="mb-4"
+                variant="outlined"
+                prepend-inner-icon="mdi-form-textbox"
+              />
+              <VBtn color="primary" type="submit" :loading="passkeyRegistering" prepend-icon="mdi-plus">
+                {{ t('profile.registerPasskey') }}
+              </VBtn>
+            </VForm>
+          </VCardText>
+        </VCard>
+
+        <!-- 未启用 OTP 提示 -->
+        <VAlert v-else type="error" variant="tonal" class="mb-6" icon="mdi-shield-lock">
+          <i18n-t keypath="profile.otpRequiredForPasskey" tag="span">
+            <template #otp>
+              <b>{{ t('profile.otpAuthenticator') }}</b>
+            </template>
+          </i18n-t>
+        </VAlert>
+
+        <!-- 已注册的通行密钥列表 -->
+        <div v-if="passkeyList.length > 0" class="mt-6 px-4">
+          <div
+            v-for="passkey in passkeyList"
+            :key="passkey.id"
+            class="py-4 d-flex align-center justify-space-between border-b last:border-0"
+          >
+            <div>
+              <div class="text-body-1 font-weight-bold mb-1">{{ passkey.name }}</div>
+              <div class="text-caption text-disabled d-flex flex-wrap gap-x-3">
+                <span>{{ t('profile.createdAt') }} {{ formatDate(passkey.created_at) }}</span>
+                <span v-if="passkey.last_used_at">
+                  {{ t('profile.lastUsedAt') }} {{ formatDateDifference(passkey.last_used_at) }}
+                </span>
+              </div>
+            </div>
+            <div>
+              <VBtn
+                variant="flat"
+                color="error"
+                size="small"
+                class="rounded delete-btn"
+                @click="deletePassKey(passkey.id)"
+              >
+                <VIcon icon="mdi-trash-can-outline" size="20" />
+              </VBtn>
+            </div>
+          </div>
+        </div>
+        <VAlert v-else type="info" variant="tonal" class="mt-6">
+          {{ t('profile.noPasskeys') }}
+        </VAlert>
+      </VCardText>
+
+      <VCardActions class="justify-end px-6 pb-4">
+        <VBtn variant="outlined" @click="show = false">{{ t('common.close') }}</VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.v-btn.delete-btn {
+  min-width: 45px;
+  padding: 0;
+  background-color: rgba(var(--v-theme-error), 0.1);
+  color: rgb(var(--v-theme-error));
+  transition: all 0.2s ease;
+}
+
+.v-btn.delete-btn:hover {
+  background-color: rgba(var(--v-theme-error), 0.2);
+  color: rgb(var(--v-theme-error));
+}
+</style>
--- a/src/components/dialog/SearchBarDialog.vue
+++ b/src/components/dialog/SearchBarDialog.vue
@@ -122,7 +122,7 @@ function loadRecentSearches() {
 function getMenus(): NavMenu[] {
  let menus: NavMenu[] = []
  // 导航菜单
-  getNavMenus().forEach(
+  getNavMenus(t).forEach(
    item =>
      item &&
      menus.push({
@@ -134,7 +134,7 @@ function getMenus(): NavMenu[] {
      }),
  )
  // 设置标签页
-  getSettingTabs().forEach(
+  getSettingTabs(t).forEach(
    item =>
      item &&
      menus.push({
--- a/src/components/dialog/U115AuthDialog.vue
+++ b/src/components/dialog/U115AuthDialog.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import api from '@/api'
-import QrcodeVue from 'qrcode.vue'
+import QRCode from 'qrcode'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'

@@ -24,6 +24,9 @@ const emit = defineEmits(['done', 'close'])
 // 二维码内容
 const qrCodeContent = ref('')

+// 二维码图片 base64
+const qrCodeImage = ref('')
+
 // 下方的提示信息
 const text = ref(t('dialog.u115Auth.scanQrCode'))

@@ -61,6 +64,11 @@ async function getQrcode() {
    const result: { [key: string]: any } = await api.get('/storage/qrcode/u115')
    if (result.success && result.data) {
      qrCodeContent.value = result.data.codeContent
+      // 生成二维码图片
+      qrCodeImage.value = await QRCode.toDataURL(result.data.codeContent, {
+        width: 200,
+        margin: 1,
+      })
      timeoutTimer = setTimeout(checkQrcode, 3000)
    } else {
      text.value = result.message
@@ -129,7 +137,13 @@ onUnmounted(() => {
      <VDivider />
      <VCardText class="pt-2 flex flex-col items-center justify-center">
        <div class="mt-6 rounded text-center p-3 border">
-          <QrcodeVue class="mx-auto" :value="qrCodeContent" :size="200" />
+          <VImg class="mx-auto" :src="qrCodeImage" width="200" height="200">
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-1 aspect-h-1" />
+              </div>
+            </template>
+          </VImg>
        </div>
        <div>
          <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { AxiosRequestConfig } from 'axios'
+import type { AxiosRequestConfig, AxiosInstance } from 'axios'
 import type { PropType } from 'vue'
 import { useConfirm } from '@/composables/useConfirm'
 import { useToast } from 'vue-toastification'
@@ -28,7 +28,7 @@ const inProps = defineProps({
  icons: Object,
  endpoints: Object as PropType<EndPoints>,
  axios: {
-    type: Function,
+    type: Object as PropType<AxiosInstance>,
    required: true,
  },
  refreshpending: Boolean,
@@ -196,7 +196,7 @@ async function list_files() {
  }

  // 加载数据
-  const data = (await inProps.axios.request(config)) ?? []
+  const data = ((await inProps.axios.request<FileItem[], FileItem[]>(config))) ?? []
  // 如果当前路径已经变化，则放弃此次加载结果
  if (prevURI !== takeURISnapshot()) {
    return;
@@ -300,7 +300,7 @@ async function download(item: FileItem) {
    responseType: 'blob',
  }
  // 加载数据
-  const result: Blob = await inProps.axios.request(config)
+  const result: Blob = (await inProps.axios.request<Blob, Blob>(config))
  if (result) {
    const downloadUrl = URL.createObjectURL(result)
    window.open(downloadUrl, '_blank')
@@ -318,7 +318,7 @@ async function getImgLink(item: FileItem) {
    responseType: 'blob',
  }
  // 加载二进制数据
-  const result: Blob = await inProps.axios.request(config)
+  const result: Blob = (await inProps.axios.request<Blob, Blob>(config))
  if (result) {
    // 创建图片地址
    currentImgLink.value = URL.createObjectURL(result)
@@ -395,7 +395,7 @@ async function rename() {
    method: inProps.endpoints?.rename.method || 'post',
    data: currentItem.value,
  }
-  const result: { [key: string]: any } = await inProps.axios?.request(config)
+  const result: { [key: string]: any } = (await inProps.axios?.request<any, { [key: string]: any }>(config))
  if (!result.success) {
    $toast.error(result.message)
  }
--- a/src/components/filebrowser/FileNavigator.vue
+++ b/src/components/filebrowser/FileNavigator.vue
@@ -2,7 +2,7 @@
 import type { PropType } from 'vue'
 import type { FileItem } from '@/api/types'
 import { useDisplay } from 'vuetify'
-import type { AxiosRequestConfig } from 'axios'
+import type { AxiosRequestConfig, AxiosInstance } from 'axios'
 import { useI18n } from 'vue-i18n'
 import { usePWA } from '@/composables/usePWA'

@@ -54,7 +54,7 @@ const props = defineProps({
  },
  endpoints: Object,
  axios: {
-    type: Function,
+    type: Object as PropType<AxiosInstance>,
    required: true,
  },
 })
@@ -131,7 +131,7 @@ async function loadSubdirectories(path: string) {
      data: fakeItem,
    }

-    const result = await props.axios?.request(config)
+    const result = (await props.axios?.request(config))
    if (result && Array.isArray(result)) {
      // 过滤出目录项
      const dirs = result.filter(item => item.type === 'dir')
--- a/src/components/filebrowser/FileToolbar.vue
+++ b/src/components/filebrowser/FileToolbar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { AxiosRequestConfig } from 'axios'
+import type { AxiosRequestConfig, AxiosInstance } from 'axios'
 import type { EndPoints, FileItem } from '@/api/types'
 import { useDisplay } from 'vuetify'
 import { useI18n } from 'vue-i18n'
@@ -23,7 +23,7 @@ const inProps = defineProps({
  },
  endpoints: Object as PropType<EndPoints>,
  axios: {
-    type: Function,
+    type: Object as PropType<AxiosInstance>,
    required: true,
  },
  sort: {
--- a/src/components/toast/VersionUpdateToast.vue
+++ b/src/components/toast/VersionUpdateToast.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="version-update-toast">
+    <span class="message">{{ message }}</span>
+    <button v-if="refreshText" class="refresh-button" @click="handleRefresh">
+      {{ refreshText }}
+    </button>
+    <div v-else class="spinner"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 接收 props
+interface Props {
+  message: string
+  refreshText?: string
+  onRefresh?: () => void
+}
+
+const props = defineProps<Props>()
+
+const handleRefresh = () => {
+  if (props.onRefresh) {
+    props.onRefresh()
+  } else {
+    window.location.reload()
+  }
+}
+</script>
+
+<style scoped>
+.version-update-toast {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.message {
+  flex: 1;
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.refresh-button {
+  padding: 6px 16px;
+  background-color: #fff;
+  color: #333;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: all 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.refresh-button:hover {
+  background-color: #f5f5f5;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.refresh-button:active {
+  transform: scale(0.98);
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
--- a/src/composables/usePWA.ts
+++ b/src/composables/usePWA.ts
@@ -12,6 +12,16 @@ const globalPwaStatus = ref<{
 const globalLoading = ref(false)
 let initPromise: Promise<void> | null = null

+// UI模式设置
+export type UIMode = 'auto' | 'desktop' | 'app'
+const uiMode = ref<UIMode>((localStorage.getItem('ui-mode') as UIMode) || 'auto')
+
+// 设置UI模式
+function setUIMode(mode: UIMode) {
+  uiMode.value = mode
+  localStorage.setItem('ui-mode', mode)
+}
+
 // 全局初始化函数
 async function initializePWAGlobally() {
  if (initPromise) return initPromise
@@ -50,6 +60,8 @@ export function usePWA() {
  })

  const appMode = computed(() => {
+    if (uiMode.value === 'app') return true
+    if (uiMode.value === 'desktop') return false
    return pwaMode.value && display.mdAndDown.value
  })

@@ -70,6 +82,8 @@ export function usePWA() {
    pwaMode,
    appMode,
    pwaStatus,
+    uiMode,
+    setUIMode,
    loading: globalLoading,
    initializePWA: initializePWAGlobally,
  }
--- a/src/composables/usePullDownGesture.ts
+++ b/src/composables/usePullDownGesture.ts
@@ -236,16 +236,15 @@ export function usePullDownGesture(options: PullDownOptions = {}) {
    }
  }

-  // PWA状态确定后，一次性决定是否添加事件监听器
+  // 监听 appMode 变化动态添加/移除事件监听器
  onMounted(() => {
-    // 等待PWA检测完成后添加事件监听器
-    const stopWatcher = watch(
+    watch(
      appMode,
      newValue => {
        if (newValue) {
          addEventListeners()
-          // PWA状态确定后停止监听
-          stopWatcher()
+        } else {
+          removeEventListeners()
        }
      },
      { immediate: true },
--- a/src/composables/useVersionChecker.ts
+++ b/src/composables/useVersionChecker.ts
@@ -0,0 +1,174 @@
+import { ref, h } from 'vue'
+import { useToast } from 'vue-toastification'
+import { Workbox } from 'workbox-window'
+import i18n from '@/plugins/i18n'
+import VersionUpdateToast from '@/components/toast/VersionUpdateToast.vue'
+
+// 全局状态
+const currentVersion = ref(__APP_VERSION__)
+let isUpdateToastShown = false
+let wb: Workbox | null = null
+
+/**
+ * 普通刷新页面
+ */
+export const reloadPage = (): void => {
+  window.location.reload()
+}
+
+/**
+ * 刷新页面并添加时间戳
+ */
+export const reloadWithTimestamp = (): void => {
+  const url = new URL(window.location.href)
+  url.searchParams.set('_t', Date.now().toString())
+  window.location.replace(url.pathname + url.search + url.hash)
+}
+
+/**
+ * 清除所有缓存和 Service Worker
+ */
+export const clearCachesAndServiceWorker = async (): Promise<void> => {
+  try {
+    // 1. 清除所有缓存
+    if ('caches' in window) {
+      const cacheNames = await caches.keys()
+      await Promise.all(cacheNames.map(name => caches.delete(name)))
+      console.log('[VersionChecker] 已清除所有缓存')
+    }
+
+    // 2. 注销 Service Worker
+    if ('serviceWorker' in navigator) {
+      const registrations = await navigator.serviceWorker.getRegistrations()
+      await Promise.all(registrations.map(registration => registration.unregister()))
+      console.log('[VersionChecker] 已注销所有 Service Worker')
+    }
+  } catch (error) {
+    console.error('[VersionChecker] 清除缓存失败:', error)
+  }
+}
+
+/**
+ * 清除缓存并刷新
+ */
+const clearCacheAndReload = async (): Promise<void> => {
+  await clearCachesAndServiceWorker()
+  reloadWithTimestamp()
+}
+
+/**
+ * 版本检查 Composable
+ *
+ * 功能：
+ * - 使用 Workbox 监听 Service Worker 更新
+ * - 检查浏览器版本与服务端版本是否一致
+ * - 显示持久化更新通知
+ */
+export function useVersionChecker() {
+  const toast = useToast()
+
+  /**
+   * 显示版本更新通知
+   * @param message 通知消息文本
+   * @param refreshText 按钮文本,不传则不显示按钮
+   * @param onRefresh 按钮点击事件
+   */
+  const showUpdateNotification = (message: string, refreshText?: string, onRefresh?: () => void): void => {
+    if (isUpdateToastShown) return
+    isUpdateToastShown = true
+    const component = h(VersionUpdateToast, {
+      message,
+      refreshText,
+      onRefresh,
+    })
+
+    toast.info(component, {
+      timeout: false, // 不自动消失
+      closeButton: false,
+      closeOnClick: false,
+      draggable: false,
+    })
+  }
+
+  // 初始化 Workbox
+  if (!wb && 'serviceWorker' in navigator) {
+    wb = new Workbox('/service-worker.js')
+
+    // Service Worker 激活事件 (install -> activate)
+    wb.addEventListener('activated', event => {
+      // 只有在更新时才显示通知
+      if (event.isUpdate) {
+        console.log('[VersionChecker] Service Worker 更新已就绪，等待用户刷新')
+
+        showUpdateNotification(i18n.global.t('common.swUpdateReady'), i18n.global.t('common.refresh'), reloadPage)
+      }
+    })
+
+    // 注册 Service Worker
+    wb.register()
+  }
+
+  /**
+   * 检查版本并在需要时显示更新通知
+   * @param latestVersion 服务端返回的最新版本号
+   */
+  const checkVersion = async (latestVersion: string): Promise<void> => {
+    // 如果已经显示过通知,说明已经检查过了
+    if (isUpdateToastShown) return
+
+    // 版本一致，无需操作
+    if (latestVersion === currentVersion.value) {
+      console.log('[VersionChecker] 版本号一致，无需操作')
+      return
+    }
+
+    console.log(`[VersionChecker] 检测到版本不一致: ${currentVersion.value} -> ${latestVersion}`)
+
+    // 尝试触发 Service Worker 更新检查
+    if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
+      try {
+        const registration = await navigator.serviceWorker.getRegistration()
+        if (registration) {
+          console.log('[VersionChecker] 触发 Service Worker 更新检查...')
+
+          // 标记是否发现更新
+          let updateFound = false
+          const onUpdateFound = () => {
+            updateFound = true
+          }
+
+          // 监听 updatefound 事件
+          registration.addEventListener('updatefound', onUpdateFound, { once: true })
+
+          // 等待检查完成
+          await registration.update()
+
+          // 检查是否有更新正在进行
+          // 如果发现更新，或者正在安装/等待中，则直接返回（交由 SW activated 事件处理）
+          if (updateFound || registration.installing || registration.waiting) {
+            console.log('[VersionChecker] Service Worker 更新中...')
+            return
+          }
+
+          console.log('[VersionChecker] SW 无更新，但版本号不一致，可能是缓存问题')
+        }
+      } catch (error) {
+        console.log('[VersionChecker] Service Worker 更新检查失败:', error)
+        // 失败继续向下执行，显示通知
+      }
+    } else {
+      console.log('[VersionChecker] 无 Service Worker, 直接显示通知')
+    }
+
+    // 最终兜底：显示版本不一致通知（清除缓存）
+    showUpdateNotification(
+      i18n.global.t('common.versionMismatch'),
+      i18n.global.t('common.clearCache'),
+      clearCacheAndReload,
+    )
+  }
+
+  return {
+    checkVersion,
+  }
+}
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -197,7 +197,7 @@ const {
 // 根据分类获取菜单列表
 const getMenuList = (header: string) => {
  // 使用国际化菜单
-  const menus = getNavMenus()
+  const menus = getNavMenus(t)
  const filteredMenus = filterMenusByPermission(menus, userPermissions.value)
  return filteredMenus.filter((item: NavMenu) => item.header === header)
 }
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -15,7 +15,6 @@ defineProps({
  },
 })

-
 const display = useDisplay()
 // PWA模式检测
 const { appMode } = usePWA()
@@ -50,7 +49,7 @@ const userPermissions = computed(() => {

 // 获取导航菜单
 const navMenus = computed(() => {
-  const allMenus = getNavMenus()
+  const allMenus = getNavMenus(t)
  return filterMenusByPermission(allMenus, userPermissions.value)
 })

@@ -171,51 +170,57 @@ const showDynamicButton = computed(() => {
 <template>
  <Teleport v-if="appMode && showNav" to="body">
    <div class="footer-nav-container">
-      <VCard elevation="3" class="footer-nav-card border" rounded="pill" :class="{ 'shift-left': showDynamicButton }">
-        <VCardText class="footer-card-content">
-          <!-- 添加指示器 -->
-          <div ref="indicator" class="nav-indicator"></div>
-          <VBtnToggle class="footer-btn-group" :mandatory="true" v-model="currentMenu">
-            <!-- 遍历底部菜单项 -->
-            <VBtn
-              v-for="menu in footerMenus"
-              :key="menu.to"
-              :to="menu.to"
-              :variant="currentMenu === menu.to ? 'text' : 'plain'"
-              color="primary"
-              :ripple="false"
-              class="footer-nav-btn"
-              rounded="pill"
-              :class="{ 'footer-nav-btn-active': currentMenu === menu.to }"
-              :value="menu.to"
-            >
-              <div class="btn-content">
-                <VIcon :icon="menu.icon" size="32"></VIcon>
-                <span v-if="!isEnglish" class="text-xs">{{ menu.title }}</span>
-              </div>
-            </VBtn>
+      <TransitionGroup name="footer-nav" tag="div" class="footer-nav-group">
+        <VCard key="main-nav" elevation="3" class="footer-nav-card border" rounded="pill">
+          <VCardText class="footer-card-content">
+            <!-- 添加指示器 -->
+            <div ref="indicator" class="nav-indicator"></div>
+            <VBtnToggle class="footer-btn-group" :mandatory="true" v-model="currentMenu">
+              <!-- 遍历底部菜单项 -->
+              <VBtn
+                v-for="menu in footerMenus"
+                :key="menu.to"
+                :to="menu.to"
+                :variant="currentMenu === menu.to ? 'text' : 'plain'"
+                color="primary"
+                :ripple="false"
+                class="footer-nav-btn"
+                rounded="pill"
+                :class="{ 'footer-nav-btn-active': currentMenu === menu.to }"
+                :value="menu.to"
+              >
+                <div class="btn-content">
+                  <VIcon :icon="menu.icon" size="32"></VIcon>
+                  <span v-if="!isEnglish" class="text-xs">{{ menu.title }}</span>
+                </div>
+              </VBtn>

-            <!-- 更多按钮 -->
-            <VBtn
-              :variant="currentMenu === '/apps' ? 'text' : 'plain'"
-              color="primary"
-              :ripple="false"
-              to="/apps"
-              rounded="pill"
-              class="footer-nav-btn"
-              :class="{ 'footer-nav-btn-active': currentMenu === '/apps' }"
-              value="/apps"
-            >
-              <div class="btn-content">
-                <VIcon icon="mdi-dots-horizontal" size="32"></VIcon>
-                <span v-if="!isEnglish" class="text-xs">{{ t('nav.more') }}</span>
-              </div>
-            </VBtn>
-          </VBtnToggle>
-        </VCardText>
-      </VCard>
-      <Transition name="fade-slide">
-        <VCard v-if="showDynamicButton" elevation="3" class="footer-nav-card dynamic-btn-card border" rounded="pill">
+              <!-- 更多按钮 -->
+              <VBtn
+                :variant="currentMenu === '/apps' ? 'text' : 'plain'"
+                color="primary"
+                :ripple="false"
+                to="/apps"
+                rounded="pill"
+                class="footer-nav-btn"
+                :class="{ 'footer-nav-btn-active': currentMenu === '/apps' }"
+                value="/apps"
+              >
+                <div class="btn-content">
+                  <VIcon icon="mdi-dots-horizontal" size="32"></VIcon>
+                  <span v-if="!isEnglish" class="text-xs">{{ t('nav.more') }}</span>
+                </div>
+              </VBtn>
+            </VBtnToggle>
+          </VCardText>
+        </VCard>
+        <VCard
+          v-if="showDynamicButton"
+          key="dynamic-btn"
+          elevation="3"
+          class="footer-nav-card dynamic-btn-card border"
+          rounded="pill"
+        >
          <VCardText class="footer-card-content">
            <!-- 各页面的动态按钮 -->
            <VBtn
@@ -230,7 +235,7 @@ const showDynamicButton = computed(() => {
            </VBtn>
          </VCardText>
        </VCard>
-      </Transition>
+      </TransitionGroup>
    </div>
  </Teleport>
 </template>
@@ -246,6 +251,12 @@ const showDynamicButton = computed(() => {
  inset-inline: 0;
  padding-block-end: calc(6px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
+}
+
+.footer-nav-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;

  // 按钮卡片之间的间距
  > .v-card + .v-card {
@@ -260,6 +271,7 @@ const showDynamicButton = computed(() => {
  background-color: rgba(var(--v-theme-surface), 0.6);
  pointer-events: auto;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
+  will-change: transform, max-width, opacity;

  // 透明主题下的特殊样式
  .v-theme--transparent & {
@@ -267,10 +279,6 @@ const showDynamicButton = computed(() => {
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy, 0.5));
  }

-  &.shift-left {
-    transform: translateX(0);
-  }
-
  .v-btn-toggle {
    block-size: auto;
    min-block-size: 56px;
@@ -328,6 +336,7 @@ const showDynamicButton = computed(() => {
  block-size: auto;
  inline-size: auto;
  min-block-size: 0;
+  max-width: 60px;

  .footer-card-content {
    padding: 3px;
@@ -349,23 +358,25 @@ const showDynamicButton = computed(() => {
  }
 }

-// 淡入滑动动画
-.fade-slide-enter-active {
+// 底部导航动画
+.footer-nav-enter-active,
+.footer-nav-leave-active {
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+  overflow: hidden;
 }

-.fade-slide-leave-active {
-  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
-}
-
-.fade-slide-enter-from {
+.footer-nav-enter-from,
+.footer-nav-leave-to {
  opacity: 0;
+  max-width: 0 !important;
+  margin-inline-start: 0 !important;
+  border-width: 0 !important;
+  padding: 0 !important;
  transform: translateX(20px);
 }

-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateX(20px);
+.footer-nav-move {
+  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
 }

@keyframes fade-in {
--- a/src/layouts/components/UserProfile.vue
+++ b/src/layouts/components/UserProfile.vue
@@ -16,6 +16,7 @@ import { saveLocalTheme } from '@/@core/utils/theme'
 import type { ThemeSwitcherTheme } from '@layouts/types'
 import { useConfirm } from '@/composables/useConfirm'
 import { themeManager } from '@/utils/themeManager'
+import { usePWA, type UIMode } from '@/composables/usePWA'

 // 认证 Store
 const authStore = useAuthStore()
@@ -27,6 +28,8 @@ const globalSettingsStore = useGlobalSettingsStore()
 const { t } = useI18n()
 // 显示器
 const display = useDisplay()
+// PWA
+const { uiMode, setUIMode } = usePWA()

 // 提示框
 const $toast = useToast()
@@ -40,6 +43,9 @@ const siteAuthDialog = ref(false)
 // 自定义CSS弹窗
 const cssDialog = ref(false)

+// UI模式菜单是否显示
+const showUIModeMenu = ref(false)
+
 // 主题菜单是否显示
 const showThemeMenu = ref(false)

@@ -233,9 +239,40 @@ const isAdvancedMode = computed(() => {
  return globalSettingsStore.get('ADVANCED_MODE') !== false
 })

+// UI模式相关
+const uiModes = computed(() => [
+  {
+    name: 'auto',
+    title: t('theme.autoUI'),
+    icon: 'mdi-devices',
+  },
+  {
+    name: 'desktop',
+    title: t('pwa.platforms.desktop'),
+    icon: 'mdi-monitor',
+  },
+  {
+    name: 'app',
+    title: t('pwa.platforms.mobile'),
+    icon: 'mdi-cellphone',
+  },
+])
+
+// 切换UI模式
+function changeUIMode(mode: UIMode) {
+  setUIMode(mode)
+  showUIModeMenu.value = false
+}
+
+// 获取当前UI模式图标
+const getUIModeIcon = computed(() => {
+  const mode = uiModes.value.find(m => m.name === uiMode.value)
+  return mode?.icon || 'mdi-devices'
+})
+
 // 主题相关功能
 const { name: themeName, global: globalTheme } = useTheme()
-const savedTheme = ref(localStorage.getItem('theme') ?? themeName)
+const savedTheme = ref(localStorage.getItem('theme') ?? 'auto')
 const currentThemeName = ref(savedTheme.value)

 const themes: ThemeSwitcherTheme[] = [
@@ -546,6 +583,41 @@ onUnmounted(() => {
            <VListItemTitle>{{ t('user.siteAuth') }}</VListItemTitle>
          </VListItem>

+          <!-- 👉 UI模式设置 - 使用嵌套菜单 -->
+          <VMenu location="end" offset-x min-width="200" v-model="showUIModeMenu" :close-on-content-click="true">
+            <template v-slot:activator="{ props: menuProps }">
+              <VListItem v-bind="menuProps" class="mb-1 rounded-lg" hover>
+                <template #prepend>
+                  <VIcon :icon="getUIModeIcon" />
+                </template>
+                <VListItemTitle>{{ t('common.uiMode') }}</VListItemTitle>
+                <VListItemSubtitle>
+                  {{ uiModes.find(m => m.name === uiMode)?.title || t('theme.autoUI') }}
+                </VListItemSubtitle>
+                <template #append>
+                  <VIcon icon="mdi-chevron-right" size="small" />
+                </template>
+              </VListItem>
+            </template>
+            <VList>
+              <VListItem
+                v-for="mode in uiModes"
+                :key="mode.name"
+                @click="changeUIMode(mode.name as UIMode)"
+                :active="uiMode === mode.name"
+                class="mb-1"
+              >
+                <template #prepend>
+                  <VIcon :icon="mode.icon" />
+                </template>
+                <VListItemTitle>{{ mode.title }}</VListItemTitle>
+                <template #append v-if="uiMode === mode.name">
+                  <VIcon icon="mdi-check" color="primary" size="small" />
+                </template>
+              </VListItem>
+            </VList>
+          </VMenu>
+
          <!-- 👉 主题设置 - 使用嵌套菜单 -->
          <VMenu location="end" offset-x min-width="200" v-model="showThemeMenu" :close-on-content-click="true">
            <template v-slot:activator="{ props: menuProps }">
@@ -553,9 +625,10 @@ onUnmounted(() => {
                <template #prepend>
                  <VIcon :icon="getThemeIcon" />
                </template>
-                <VListItemTitle>
-                  {{ themes.find(t => t.name === currentThemeName)?.title || t('common.theme') }}
-                </VListItemTitle>
+                <VListItemTitle>{{ t('common.theme') }}</VListItemTitle>
+                <VListItemSubtitle>
+                  {{ themes.find(t => t.name === currentThemeName)?.title || t('theme.auto') }}
+                </VListItemSubtitle>
                <template #append>
                  <VIcon icon="mdi-chevron-right" size="small" />
                </template>
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -30,6 +30,7 @@ export default {
    saving: 'Saving',
    reset: 'Reset',
    theme: 'Theme',
+    uiMode: 'UI Layout',
    language: 'Language',
    pleaseWait: 'Please wait...',
    viewDetails: 'View Details',
@@ -66,6 +67,10 @@ export default {
    serviceUnavailable: 'Service Unavailable',
    status: 'Status',
    preset: 'Preset',
+    refresh: 'Refresh',
+    swUpdateReady: 'New version is ready, please refresh the page to get the latest features',
+    versionMismatch: 'Browser cache version does not match server version, please try clearing cache',
+    clearCache: 'Clear Cache',
  },
  mediaType: {
    movie: 'Movie',
@@ -129,6 +134,7 @@ export default {
    light: 'Light',
    dark: 'Dark',
    auto: 'Follow System',
+    autoUI: 'Auto',
    transparent: 'Transparent',
    purple: 'Purple',
    custom: 'Custom Style',
@@ -238,16 +244,32 @@ export default {
    wallpapers: 'Wallpapers',
    username: 'Username',
    password: 'Password',
-    otpCode: 'Two-Factor Code',
+    otpCode: 'Verification Code',
    stayLoggedIn: 'Stay Logged In',
    login: 'Login',
    networkError: 'Login failed, please check your network connection!',
-    authFailure: 'Login failed, please check your username, password or two-factor authentication!',
+    authFailure: 'Login failed, please check your username, password or secondary verification!',
    permissionDenied: 'Login failed, you do not have permission to access!',
    noPermission: 'Login failed, you have no functional permissions, please contact the administrator!',
    serverError: 'Login failed, server error!',
    loginFailed: 'Login Failed',
-    checkCredentials: 'Please check your username, password or two-factor authentication code!',
+    secondaryVerification: 'Secondary Verification',
+    loginWithPasskey: 'Login with Passkey',
+    loginWithOtp: 'Login with OTP',
+    orUsePasskey: 'Or use Passkey for verification',
+    verifyWithPasskey: 'Verify with Passkey',
+    otpPlaceholder: 'Enter 6-digit code',
+    passkeyLoginStartFailed: 'Failed to start Passkey authentication',
+    passkeyNotSelected: 'No Passkey selected',
+    passkeyLoginFailed: 'Passkey login failed',
+    passkeyAuthCanceled: 'Passkey authentication canceled',
+    passkeyNotSupported: 'Current browser does not support Passkeys',
+    passkeySecureContextRequired: 'Passkey requires HTTPS secure connection',
+    passkeyVerifyFailed: 'Passkey verification failed',
+    passkeyVerifyFailedRetry: 'Passkey verification failed, please try again',
+    mfa: {
+      selectVerificationMethod: 'Please select a verification method',
+    },
  },
  menu: {
    start: 'Start',
@@ -380,7 +402,7 @@ export default {
    username: 'Username',
    usernameHint: 'Username for system login',
    password: 'Password',
-    passwordHint: 'Password for system login',
+    passwordHint: 'Please enter your login password',
    confirmPassword: 'Confirm Password',
    confirmPasswordHint: 'Please enter the password again to confirm',
    role: 'Role',
@@ -1209,6 +1231,7 @@ export default {
      title: 'About MoviePilot',
      softwareVersion: 'Software Version',
      frontendVersion: 'Frontend Version',
+      browserVersion: 'Browser Cached Version',
      authVersion: 'Auth Resource Version',
      indexerVersion: 'Indexer Resource Version',
      configDir: 'Config Directory',
@@ -1228,6 +1251,7 @@ export default {
      dataDirectory: '/moviepilot',
      expand: 'Expand',
      collapse: 'Collapse',
+      clearCache: 'Clear Cache',
    },
    system: {
      custom: 'Custom',
@@ -2538,6 +2562,7 @@ export default {
    noRecentPlugins: 'None',
  },
  profile: {
+    disableOtpWithPasskeyError: 'Please delete all Passkeys before clearing the authenticator!',
    personalInfo: 'Personal Information',
    uploadNewAvatar: 'Upload New Avatar',
    avatarFormatError: 'The uploaded file does not meet requirements, please select a new avatar',
@@ -2562,18 +2587,51 @@ export default {
    vocechatUser: 'VoceChat User',
    synologychatUser: 'SynologyChat User',
    doubanUser: 'Douban User',
-    twoFactorAuthentication: 'Two-Factor Authentication',
+    setupAuthenticator: 'Setup Authenticator',
+    authenticatorManagement: 'Authenticator Management',
+    authenticatorEnabled: 'You have enabled authenticator two-factor authentication',
+    clearAuthenticatorTip: 'To set up a new authenticator, please clear the current configuration first.',
+    clearAuthenticator: 'Clear Authenticator',
    enableTwoFactor: 'Enable Two-Factor Authentication',
    disableTwoFactor: 'Disable Two-Factor Authentication',
+    setupMfa: 'Setup Two-Factor Authentication',
+    enableMfa: 'Enable Two-Factor Authentication',
+    useAuthenticator: 'Use Authenticator',
+    usePasskey: 'Use Passkey',
+    enabled: 'Enabled',
+    keysCount: '{count} keys',
+    passkeyManagement: 'Passkey Management',
+    registerNewPasskey: 'Register New Passkey',
+    passkeyDescription: 'Passkeys allow you to sign in quickly and securely without a password.',
+    passkeyAppDescription: 'Passkeys are a simpler, more secure way to sign in, serving as an alternative to passwords. You can authenticate using passkey-supported apps like iCloud Keychain, Bitwarden, or hardware keys.',
+    passkeyName: 'Passkey Name',
+    passkeyNamePlaceholder: 'e.g.: iPhone, Windows Hello',
+    registerPasskey: 'Register Passkey',
+    createdAt: 'Created',
+    lastUsedAt: 'Last used',
+    noPasskeys: 'You haven’t registered any passkeys yet',
+    passkeyNameRequired: 'Please enter a passkey name',
+    passkeyRegisterSuccess: 'Passkey registered successfully',
+    passkeyRegisterFailed: 'Registration failed',
+    passkeyRegisterCancelled: 'Registration cancelled',
+    passkeyDeleteSuccess: 'Passkey deleted',
+    passkeyDeleteFailed: 'Delete failed',
+    deletePasskey: 'Delete Passkey',
+    passkeyDomainWarning: 'The availability of PassKeys is closely related to the {domain}. In a public network environment, please make sure to configure the correct access domain name in "Basic Settings". Domain changes or configuration errors will cause the PassKey to be unusable.',
+    otpRequiredForPasskey: 'For security reasons, you must first enable {otp} before you can register a PassKey. This is to ensure that you can still log in to your account via OTP code if the PassKey becomes invalid due to domain configuration changes.',
+    accessDomain: 'access domain name',
+    otpAuthenticator: 'OTP Authenticator',
    otpGenerateFailed: 'Failed to get OTP URI: {message}!',
    otpDisableSuccess: 'Two-factor authentication disabled successfully!',
    otpDisableFailed: 'Failed to disable OTP: {message}!',
    otpCodeRequired: 'Please enter the 6-digit verification code',
    otpEnableSuccess: 'Two-factor authentication enabled successfully!',
    otpEnableFailed: 'Failed to enable OTP: {message}!',
-    authenticatorApp: 'Authenticator App',
+    otpDisableRestrictedByPasskey: 'You have registered Passkeys. Please delete all Passkeys before disabling OTP verification.',
+    confirmToDisableOtp: 'For security reasons, verifying your login password is required to disable two-factor authentication.',
+    confirmToDeletePasskey: 'For security reasons, verifying your login password is required to delete a Passkey.',
    authenticatorAppDescription:
-      'Use an authenticator app like Google Authenticator, Microsoft Authenticator, Authy, or 1Password to scan the QR code. It will generate a 6-digit code for you to enter below.',
+      'Use an authenticator app like Google Authenticator, Microsoft Authenticator, Authy, or 1Password to scan the QR code and generate a 6-digit code.',
    secretKeyTip:
      "If you're having trouble with the QR code, select manual entry in your app and enter the code above.",
    enterVerificationCode: 'Enter verification code to confirm enabling two-factor authentication',
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -30,6 +30,7 @@ export default {
    saving: '保存中',
    reset: '重置',
    theme: '主题',
+    uiMode: '界面布局',
    language: '语言',
    pleaseWait: '请稍候...',
    viewDetails: '查看详情',
@@ -66,6 +67,10 @@ export default {
    serviceUnavailable: '服务不可用',
    status: '状态',
    preset: '预设',
+    refresh: '刷新',
+    swUpdateReady: '新版本已就绪，请刷新页面以获取最新功能',
+    versionMismatch: '浏览器缓存版本与服务端版本不一致，请尝试清除缓存',
+    clearCache: '清除缓存',
  },
  mediaType: {
    movie: '电影',
@@ -129,6 +134,7 @@ export default {
    light: '浅色',
    dark: '深色',
    auto: '跟随系统',
+    autoUI: '自动',
    transparent: '透明',
    purple: '幻紫',
    custom: '附加样式',
@@ -237,16 +243,32 @@ export default {
    wallpapers: '壁纸',
    username: '用户名',
    password: '密码',
-    otpCode: '双重验证码',
+    otpCode: '验证码',
    stayLoggedIn: '保持登录',
    login: '登录',
    networkError: '登录失败，请检查网络连接！',
-    authFailure: '登录失败，请检查用户名、密码或双重验证是否正确！',
+    authFailure: '登录失败，请检查用户名、密码或二次验证是否正确！',
    permissionDenied: '登录失败，您没有权限访问！',
    noPermission: '登录失败，您没有任何功能权限，请联系管理员！',
    serverError: '登录失败，服务器错误！',
    loginFailed: '登录失败',
-    checkCredentials: '请检查用户名、密码或双重验证码是否正确！',
+    secondaryVerification: '二次验证',
+    loginWithPasskey: '使用通行密钥登录',
+    loginWithOtp: '使用验证码登录',
+    orUsePasskey: '或使用通行密钥进行验证',
+    verifyWithPasskey: '使用通行密钥验证',
+    otpPlaceholder: '请输入6位验证码',
+    passkeyLoginStartFailed: '启动通行密钥认证失败',
+    passkeyNotSelected: '未选择通行密钥',
+    passkeyLoginFailed: '通行密钥登录失败',
+    passkeyAuthCanceled: '通行密钥认证被取消',
+    passkeyNotSupported: '当前浏览器不支持通行密钥',
+    passkeySecureContextRequired: '通行密钥需要 HTTPS 安全连接',
+    passkeyVerifyFailed: '通行密钥验证失败',
+    passkeyVerifyFailedRetry: '通行密钥验证失败，请重试',
+    mfa: {
+      selectVerificationMethod: '请选择验证方式',
+    },
  },
  menu: {
    start: '开始',
@@ -379,7 +401,7 @@ export default {
    username: '用户名',
    usernameHint: '用于登录系统的用户名',
    password: '密码',
-    passwordHint: '用于登录系统的密码',
+    passwordHint: '请输入登录密码',
    confirmPassword: '确认密码',
    confirmPasswordHint: '请再次输入密码以确认',
    role: '角色',
@@ -1206,6 +1228,7 @@ export default {
      title: '关于 MoviePilot',
      softwareVersion: '软件版本',
      frontendVersion: '前端版本',
+      browserVersion: '浏览器缓存版本',
      authVersion: '认证资源版本',
      indexerVersion: '站点资源版本',
      configDir: '配置目录',
@@ -1213,7 +1236,7 @@ export default {
      timezone: '时区',
      latest: '最新',
      supportingSites: '支持站点',
-      support: '支援',
+      support: '支持',
      documentation: '文档',
      feedback: '问题反馈',
      channel: '发布频道',
@@ -1225,6 +1248,7 @@ export default {
      dataDirectory: '/moviepilot',
      expand: '展开',
      collapse: '收起',
+      clearCache: '清除缓存',
    },
    system: {
      custom: '自定义',
@@ -2507,6 +2531,7 @@ export default {
    noRecentPlugins: '无',
  },
  profile: {
+    disableOtpWithPasskeyError: '请先删除所有通行密钥后再清除身份验证器！',
    personalInfo: '个人信息',
    uploadNewAvatar: '上传新头像',
    avatarFormatError: '上传的文件不符合要求，请重新选择头像',
@@ -2531,18 +2556,51 @@ export default {
    vocechatUser: 'VoceChat用户',
    synologychatUser: 'SynologyChat用户',
    doubanUser: '豆瓣用户',
-    twoFactorAuthentication: '登录双重验证',
+    setupAuthenticator: '设置身份验证器',
+    authenticatorManagement: '身份验证器管理',
+    authenticatorEnabled: '您已启用身份验证器双重验证',
+    clearAuthenticatorTip: '如需设置新的身份验证器，请先清除当前配置。',
+    clearAuthenticator: '清除身份验证器',
    enableTwoFactor: '开启双重验证',
    disableTwoFactor: '关闭双重验证',
+    setupMfa: '设置双重验证',
+    enableMfa: '开启双重验证',
+    useAuthenticator: '使用身份验证器',
+    usePasskey: '使用通行密钥',
+    enabled: '已启用',
+    keysCount: '{count} 个密钥',
+    passkeyManagement: '通行密钥管理',
+    registerNewPasskey: '注册新通行密钥',
+    passkeyDescription: '通行密钥可以让您无需密码即可快速安全地登录。',
+    passkeyAppDescription: '通行密钥是一种更简单、更安全的登录方式，可以替代密码进行登录。您可以使用 iCloud 钥匙串、Bitwarden 等支持通行密钥的应用程序或硬件密钥完成验证。',
+    passkeyName: '通行密钥名称',
+    passkeyNamePlaceholder: '例如：iPhone、Windows Hello',
+    registerPasskey: '注册通行密钥',
+    createdAt: '创建于',
+    lastUsedAt: '最后使用时间',
+    noPasskeys: '您还没有注册任何通行密钥',
+    passkeyNameRequired: '请输入通行密钥名称',
+    passkeyRegisterSuccess: '通行密钥注册成功',
+    passkeyRegisterFailed: '注册失败',
+    passkeyRegisterCancelled: '注册被取消',
+    passkeyDeleteSuccess: '通行密钥已删除',
+    passkeyDeleteFailed: '删除失败',
+    deletePasskey: '删除通行密钥',
+    passkeyDomainWarning: '通行密钥（PassKey）的可用性与 {domain} 紧密相关。在公网环境下，请务必在“基础设置”中配置正确的访问域名。域名变更或配置错误将导致通行密钥无法使用。',
+    otpRequiredForPasskey: '为了安全起见，您必须先启用 {otp} 验证码，然后才能注册通行密钥。这是为了防止在域名配置变动导致 PassKey 失效时，您仍能通过 OTP 码登录账户。',
+    accessDomain: '访问域名',
+    otpAuthenticator: 'OTP 身份验证器',
    otpGenerateFailed: '获取otp uri失败：{message}！',
    otpDisableSuccess: '关闭登录双重验证成功！',
    otpDisableFailed: '关闭otp失败：{message}！',
    otpCodeRequired: '请填写6位验证码',
    otpEnableSuccess: '开启登录双重验证成功！',
    otpEnableFailed: '开启otp失败：{message}！',
-    authenticatorApp: '身份验证器',
+    otpDisableRestrictedByPasskey: '您已注册通行密钥，请先删除所有通行密钥再关闭 OTP 验证。',
+    confirmToDisableOtp: '为了安全起见，关闭双重验证需要验证您的登录密码。',
+    confirmToDeletePasskey: '为了安全起见，删除通行密钥需要验证您的登录密码。',
    authenticatorAppDescription:
-      '使用像Google Authenticator、Microsoft Authenticator、Authy或1Password这样的身份验证器应用程序，扫描二维码。它将为您生成一个6位数的代码，供您在下方输入。',
+      '使用 Google Authenticator、Microsoft Authenticator、Authy 或 1Password 等验证器应用扫描二维码，获取 6 位验证码。',
    secretKeyTip: '如果您在使用二维码时遇到困难，请在您的应用程序中选择手动输入以上代码。',
    enterVerificationCode: '输入验证码以确认开启双重验证',
    avatarFormatTip: '允许 JPG、PNG、GIF、WEBP 格式， 最大尺寸 800KB。',
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -30,6 +30,7 @@ export default {
    saving: '保存中',
    reset: '重置',
    theme: '主題',
+    uiMode: '界面佈局',
    language: '語言',
    pleaseWait: '請稍候...',
    viewDetails: '查看詳情',
@@ -66,6 +67,10 @@ export default {
    serviceUnavailable: '服務不可用',
    status: '狀態',
    preset: '預設',
+    refresh: '刷新',
+    swUpdateReady: '新版本已就緒，請刷新頁面以獲取最新功能',
+    versionMismatch: '瀏覽器快取版本與伺服器版本不一致，請嘗試清除快取',
+    clearCache: '清除快取',
  },
  mediaType: {
    movie: '電影',
@@ -129,6 +134,7 @@ export default {
    light: '淺色',
    dark: '深色',
    auto: '跟隨系統',
+    autoUI: '自動',
    transparent: '透明',
    purple: '幻紫',
    custom: '附加樣式',
@@ -238,16 +244,32 @@ export default {
    wallpapers: '壁紙',
    username: '用戶名',
    password: '密碼',
-    otpCode: '雙重驗證碼',
+    otpCode: '驗證碼',
    stayLoggedIn: '保持登錄',
    login: '登錄',
    networkError: '登錄失敗，請檢查網絡連接！',
-    authFailure: '登錄失敗，請檢查用戶名、密碼或雙重驗證是否正確！',
+    authFailure: '登錄失敗，請檢查用戶名、密碼或二次驗證是否正確！',
    permissionDenied: '登錄失敗，您沒有權限訪問！',
    serverError: '登錄失敗，服務器錯誤！',
    noPermission: '登錄失敗，您沒有任何功能權限，請聯繫管理員！',
    loginFailed: '登錄失敗',
-    checkCredentials: '請檢查用戶名、密碼或雙重驗證碼是否正確！',
+    secondaryVerification: '二次驗證',
+    loginWithPasskey: '使用通行密鑰登錄',
+    loginWithOtp: '使用驗證碼登錄',
+    orUsePasskey: '或使用通行密鑰進行驗證',
+    verifyWithPasskey: '使用通行密鑰驗證',
+    otpPlaceholder: '請輸入6位驗證碼',
+    passkeyLoginStartFailed: '啟動通行密鑰驗證失敗',
+    passkeyNotSelected: '未選擇通行密鑰',
+    passkeyLoginFailed: '通行密鑰登錄失敗',
+    passkeyAuthCanceled: '通行密鑰驗證被取消',
+    passkeyNotSupported: '當前瀏覽器不支援通行密鑰',
+    passkeySecureContextRequired: '通行密鑰需要 HTTPS 安全連接',
+    passkeyVerifyFailed: '通行密鑰驗证失敗',
+    passkeyVerifyFailedRetry: '通行密鑰驗证失敗，請重試',
+    mfa: {
+      selectVerificationMethod: '請選擇驗证方式',
+    },
  },
  menu: {
    start: '開始',
@@ -380,7 +402,7 @@ export default {
    username: '用戶名',
    usernameHint: '用於登入系統的用戶名',
    password: '密碼',
-    passwordHint: '用於登入系統的密碼',
+    passwordHint: '請輸入登入密碼',
    confirmPassword: '確認密碼',
    confirmPasswordHint: '請再次輸入密碼以確認',
    role: '角色',
@@ -1194,6 +1216,7 @@ export default {
      title: '關於 MoviePilot',
      softwareVersion: '軟件版本',
      frontendVersion: '前端版本',
+      browserVersion: '瀏覽器緩存版本',
      authVersion: '認證資源版本',
      indexerVersion: '站點資源版本',
      configDir: '配置目錄',
@@ -1213,6 +1236,7 @@ export default {
      dataDirectory: '/moviepilot',
      expand: '展開',
      collapse: '收起',
+      clearCache: '清除快取',
    },
    system: {
      custom: '自定義',
@@ -2493,6 +2517,7 @@ export default {
    noRecentPlugins: '無',
  },
  profile: {
+    disableOtpWithPasskeyError: '請先刪除所有通行密鑰後再清除身份驗證器！',
    personalInfo: '個人信息',
    uploadNewAvatar: '上傳新頭像',
    avatarFormatError: '上傳的文件不符合要求，請重新選擇頭像',
@@ -2517,18 +2542,51 @@ export default {
    vocechatUser: 'VoceChat用戶',
    synologychatUser: 'SynologyChat用戶',
    doubanUser: '豆瓣用戶',
-    twoFactorAuthentication: '登錄雙重驗證',
+    setupAuthenticator: '設置身份驗證器',
+    authenticatorManagement: '身份驗證器管理',
+    authenticatorEnabled: '您已啟用身份驗證器雙重驗證',
+    clearAuthenticatorTip: '如需設置新的身份驗證器，請先清除當前配置。',
+    clearAuthenticator: '清除身份驗證器',
    enableTwoFactor: '開啟雙重驗證',
    disableTwoFactor: '關閉雙重驗證',
+    setupMfa: '設置雙重驗證',
+    enableMfa: '開啟雙重驗證',
+    useAuthenticator: '使用身份驗證器',
+    usePasskey: '使用通行密鑰',
+    enabled: '已啟用',
+    keysCount: '{count} 個密鑰',
+    passkeyManagement: '通行密鑰管理',
+    registerNewPasskey: '註冊新通行密鑰',
+    passkeyDescription: '通行密鑰可以讓您無需密碼即可快速安全地登入。',
+    passkeyAppDescription: '通行密鑰是一種更簡單、更安全的登入方式，可以替代密碼進行登入。您可以使用 iCloud 鑰匙圈、Bitwarden 等支援通行密鑰的應用程式或硬體金鑰完成驗證。',
+    passkeyName: '通行密鑰名稱',
+    passkeyNamePlaceholder: '例如：iPhone、Windows Hello',
+    registerPasskey: '註冊通行密鑰',
+    createdAt: '建立於',
+    lastUsedAt: '最後使用時間',
+    noPasskeys: '您還沒有註冊任何通行密鑰',
+    passkeyNameRequired: '請輸入通行密鑰名稱',
+    passkeyRegisterSuccess: '通行密鑰註冊成功',
+    passkeyRegisterFailed: '註冊失敗',
+    passkeyRegisterCancelled: '註冊被取消',
+    passkeyDeleteSuccess: '通行密鑰已刪除',
+    passkeyDeleteFailed: '刪除失敗',
+    deletePasskey: '刪除通行密鑰',
+    passkeyDomainWarning: '通行密鑰（PassKey）的可用性與 {domain} 緊密相關。在公網環境下，請務必在「基本設定」中配置正確的訪問域名。域名變更或配置錯誤將導致通行密鑰無法使用。',
+    otpRequiredForPasskey: '為了安全起見，您必須先啟用 {otp} 驗證碼，然後才能註冊通行密鑰。這是為了防止在網域配置變動導致 PassKey 失效時，您仍能通過 OTP 碼登入帳戶。',
+    accessDomain: '訪問域名',
+    otpAuthenticator: 'OTP 身份驗證器',
    otpGenerateFailed: '獲取otp uri失敗：{message}！',
    otpDisableSuccess: '關閉登錄雙重驗證成功！',
    otpDisableFailed: '關閉otp失敗：{message}！',
    otpCodeRequired: '請填寫6位驗證碼',
    otpEnableSuccess: '開啟登錄雙重驗證成功！',
    otpEnableFailed: '開啟otp失敗：{message}！',
-    authenticatorApp: '身份驗證器',
+    otpDisableRestrictedByPasskey: '您已註冊通行密鑰，請先刪除所有通行密鑰再關閉 OTP 驗證。',
+    confirmToDisableOtp: '為了安全起見，關閉雙重驗證需要驗證您的登錄密碼。',
+    confirmToDeletePasskey: '為了安全起見，刪除通行密鑰需要驗證您的登錄密碼。',
    authenticatorAppDescription:
-      '使用像Google Authenticator、Microsoft Authenticator、Authy或1Password這樣的身份驗證器應用程序，掃描二維碼。它將為您生成一個6位數的代碼，供您在下方輸入。',
+      '使用 Google Authenticator、Microsoft Authenticator、Authy 或 1Password 等驗證器應用程式掃描 QR Code，取得 6 位數驗證碼。',
    secretKeyTip: '如果您在使用二維碼時遇到困難，請在您的應用程序中選擇手動輸入以上代碼。',
    enterVerificationCode: '輸入驗證碼以確認開啟雙重驗證',
    avatarFormatTip: '允許 JPG、PNG、GIF、WEBP 格式， 最大尺寸 800KB。',
--- a/src/pages/appcenter.vue
+++ b/src/pages/appcenter.vue
@@ -23,7 +23,7 @@ const appGroups = ref<Record<string, NavMenu[]>>({})
 // 根据header属性对应用进行分类
 function categorizeApps() {
  // 获取所有菜单并根据权限过滤
-  const allMenus = getNavMenus()
+  const allMenus = getNavMenus(t)
  const filteredMenus = filterMenusByPermission(allMenus, userPermissions.value)
  const menus = filteredMenus.filter((item: NavMenu) => !item.footer)

--- a/src/pages/discover.vue
+++ b/src/pages/discover.vue
@@ -58,7 +58,7 @@ function initializeColors() {

 // 初始化发现标签
 function initDiscoverTabs() {
-  const tabs = getDiscoverTabs()
+  const tabs = getDiscoverTabs(t)
  for (const tab of tabs) {
    discoverTabs.value.push({
      name: tab.name,
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'lodash-es'
 import { VForm } from 'vuetify/components/VForm'
 import { useAuthStore, useUserStore } from '@/stores'
 import { authState, userState } from '@/stores/types'
@@ -7,12 +6,13 @@ import { requiredValidator } from '@/@validators'
 import api from '@/api'
 import router from '@/router'
 import logo from '@images/logo.png'
-import { urlBase64ToUint8Array } from '@/@core/utils/navigator'
+import { bufferToBase64Url, base64UrlToUint8Array, urlBase64ToUint8Array } from '@/@core/utils/navigator'
 import { SUPPORTED_LOCALES, SupportedLocale } from '@/types/i18n'
 import { getCurrentLocale, setI18nLanguage } from '@/plugins/i18n'
 import { useTheme } from 'vuetify'
 import { getNavMenus } from '@/router/i18n-menu'
 import { filterMenusByPermission } from '@/utils/permission'
+import type { ApiResponse } from '@/api/types'

 // 国际化
 const { t } = useI18n()
@@ -22,7 +22,7 @@ const authStore = useAuthStore()
 const userStore = useUserStore()

 // 获取有权限的菜单
-const navMenus = getNavMenus()
+const navMenus = computed(() => getNavMenus(t))

 // 表单
 const form = ref({
@@ -43,6 +43,12 @@ const errorMessage = ref('')
 // 是否开启双重验证
 const isOTP = ref(false)

+// 二次验证对话框
+const mfaDialog = ref(false)
+
+// MFA PassKey loading
+const mfaPasskeyLoading = ref(false)
+
 // 用户名称输入框
 const usernameInput = ref()

@@ -66,6 +72,217 @@ const locales = Object.values(SUPPORTED_LOCALES)
 // 登录按钮 loading
 const loading = ref(false)

+// PassKey 登录按钮 loading
+const passkeyLoading = ref(false)
+
+// Conditional UI 的 AbortController
+let conditionalAbortController: AbortController | null = null
+
+// 手动模式的 AbortController（用于防止重复点击）
+let manualAbortController: AbortController | null = null
+
+// 标记当前是否有手动模式的 PassKey 请求正在进行
+let isManualPassKeyActive = false
+
+// PassKey 认证核心函数 - 处理 WebAuthn 认证流程
+interface PassKeyAuthOptions {
+  username?: string // 可选的用户名,用于 MFA 场景
+  isConditional?: boolean // 是否为 Conditional UI 模式
+  signal?: AbortSignal // AbortController 信号
+}
+
+// PassKey API 响应类型
+interface PassKeyStartResponse {
+  options: string // JSON 字符串
+  challenge: string
+}
+
+interface PassKeyFinishResponse {
+  access_token: string
+  super_user: boolean
+  user_id: number
+  user_name: string
+  avatar: string
+  level: number
+  permissions: Record<string, boolean>
+  wizard: boolean
+}
+
+async function authenticateWithPassKey(options: PassKeyAuthOptions = {}): Promise<PassKeyFinishResponse> {
+  const { username, isConditional = false, signal } = options
+
+  // 1. 开始认证流程
+  const startResponse = (await api.post(
+    '/mfa/passkey/authenticate/start',
+    username ? { username } : {},
+  )) as ApiResponse<PassKeyStartResponse>
+
+  if (!startResponse.success) {
+    throw new Error(startResponse.message || 'PassKey start failed')
+  }
+
+  const { options: optionsStr, challenge } = startResponse.data
+  const publicKeyOptions = JSON.parse(optionsStr)
+
+  // 2. 调用WebAuthn API
+  const credentialRequestOptions: CredentialRequestOptions = {
+    publicKey: {
+      ...publicKeyOptions,
+      challenge: base64UrlToUint8Array(publicKeyOptions.challenge),
+      allowCredentials: publicKeyOptions.allowCredentials?.map((cred: any) => ({
+        ...cred,
+        id: base64UrlToUint8Array(cred.id),
+      })),
+    },
+  }
+
+  // 如果是 Conditional UI 模式，添加 mediation 和 signal
+  if (isConditional) {
+    credentialRequestOptions.mediation = 'conditional'
+    if (signal) {
+      credentialRequestOptions.signal = signal
+    }
+  }
+
+  const credential = await navigator.credentials.get(credentialRequestOptions)
+
+  // Conditional UI 模式下，用户选择通行密钥后才显示 loading
+  if (isConditional) {
+    passkeyLoading.value = true
+  }
+
+  if (!credential) {
+    throw new Error('No credential selected')
+  }
+
+  // 3. 转换credential为可传输格式
+  const publicKeyCredential = credential as PublicKeyCredential
+  const assertionResponse = publicKeyCredential.response as AuthenticatorAssertionResponse
+  const credentialJSON = {
+    id: publicKeyCredential.id,
+    rawId: bufferToBase64Url(publicKeyCredential.rawId),
+    type: publicKeyCredential.type,
+    response: {
+      authenticatorData: bufferToBase64Url(assertionResponse.authenticatorData),
+      clientDataJSON: bufferToBase64Url(assertionResponse.clientDataJSON),
+      signature: bufferToBase64Url(assertionResponse.signature),
+      userHandle: assertionResponse.userHandle ? bufferToBase64Url(assertionResponse.userHandle) : null,
+    },
+  }
+
+  // 4. 完成认证
+  const finishResponse = (await api.post('/mfa/passkey/authenticate/finish', {
+    credential: credentialJSON,
+    challenge: challenge,
+  })) as PassKeyFinishResponse
+
+  if (!finishResponse || !finishResponse.access_token) {
+    throw new Error('PassKey finish failed: No access token')
+  }
+
+  return finishResponse
+}
+
+// 统一处理 PassKey 认证流程
+async function handlePassKeyAuth(
+  authOptions: PassKeyAuthOptions,
+  setLoading: (loading: boolean) => void,
+  onSuccess: (response: PassKeyFinishResponse) => Promise<void>,
+) {
+  const { isConditional = false } = authOptions
+  errorMessage.value = ''
+
+  // 检查浏览器环境 (仅手动触发时提示)
+  if (!isConditional && !window.PublicKeyCredential) {
+    if (!window.isSecureContext) {
+      errorMessage.value = t('login.passkeySecureContextRequired')
+    } else {
+      errorMessage.value = t('login.passkeyNotSupported')
+    }
+    return
+  }
+
+  // 如果是手动触发(非 Conditional UI)
+  if (!isConditional) {
+    // 取消之前的 Conditional UI 请求
+    if (conditionalAbortController) {
+      conditionalAbortController.abort()
+      conditionalAbortController = null
+    }
+
+    // 取消之前的手动请求（防止重复点击）
+    if (manualAbortController) {
+      manualAbortController.abort()
+    }
+
+    // 创建新的 AbortController
+    manualAbortController = new AbortController()
+
+    // 标记手动请求为活跃状态，并立即设置 loading
+    isManualPassKeyActive = true
+    setLoading(true)
+  }
+
+  try {
+    const finishResponse = await authenticateWithPassKey({
+      ...authOptions,
+      signal:
+        isConditional && conditionalAbortController
+          ? conditionalAbortController.signal
+          : !isConditional && manualAbortController
+          ? manualAbortController.signal
+          : undefined,
+    })
+
+    await onSuccess(finishResponse)
+  } catch (error: any) {
+    // Conditional UI 模式下：
+    // 1. 如果 loading 为 false，说明错误发生在用户选择密钥之前（如初始化失败、用户取消等），此时应静默
+    // 2. 如果是 AbortError，始终静默
+    if (isConditional && (!passkeyLoading.value || error.name === 'AbortError')) {
+      console.warn('[PassKey] Conditional UI silenced error:', error)
+      return
+    }
+
+    // 手动模式下的 AbortError 也应该静默（用户重复点击导致）
+    if (!isConditional && error.name === 'AbortError') {
+      console.warn('[PassKey] Manual request aborted (likely due to rapid clicking):', error)
+      return
+    }
+
+    // 设置错误信息
+    if (error.name === 'NotAllowedError') {
+      errorMessage.value = t('login.passkeyAuthCanceled')
+    } else {
+      errorMessage.value = t('login.authFailure')
+    }
+  } finally {
+    // 清除 loading 状态
+    if (!isConditional) {
+      // 手动模式：始终清除，并取消手动活跃标记
+      isManualPassKeyActive = false
+      setLoading(false)
+      manualAbortController = null
+    } else {
+      // Conditional UI 模式：只有在没有手动请求活跃时才清除
+      if (!isManualPassKeyActive && passkeyLoading.value) {
+        passkeyLoading.value = false
+      }
+    }
+  }
+}
+
+// 使用PassKey登录 (支持 Conditional UI)
+async function loginWithPassKey(isConditional = false) {
+  await handlePassKeyAuth(
+    { isConditional },
+    val => (passkeyLoading.value = val),
+    async response => {
+      await handleLoginSuccess(response)
+    },
+  )
+}
+
 // 切换语言
 async function switchLanguage(locale: SupportedLocale) {
  await setI18nLanguage(locale)
@@ -73,23 +290,6 @@ async function switchLanguage(locale: SupportedLocale) {
  langMenu.value = false
 }

-// 查询是否开启双重验证
-const fetchOTP = debounce(async () => {
-  const userid = usernameInput.value?.value
-  if (!userid) {
-    isOTP.value = false
-    return
-  }
-  api
-    .get(`/user/otp/${userid}`)
-    .then((response: any) => {
-      isOTP.value = response.success
-    })
-    .catch((error: any) => {
-      console.log(error)
-    })
-}, 500)
-
 // 订阅推送通知
 async function subscribeForPushNotifications() {
  if ('serviceWorker' in navigator && 'PushManager' in window) {
@@ -110,7 +310,7 @@ async function subscribeForPushNotifications() {
    try {
      await api.post('/message/webpush/subscribe', subscription)
    } catch (e) {
-      console.log(e)
+      console.error(e)
    }
  }
 }
@@ -132,84 +332,125 @@ async function afterLogin(superuser: boolean, userPayload: userState, filteredMe

  // 订阅推送通知
  if (superuser) await subscribeForPushNotifications()
-  // 登录按钮 loading
-  loading.value = false
+}
+
+// 处理登录成功
+async function handleLoginSuccess(response: any) {
+  const userPayload: userState = {
+    superUser: response.super_user,
+    userID: response.user_id,
+    userName: response.user_name,
+    avatar: response.avatar,
+    level: response.level,
+    permissions: response.permissions,
+    wizard: response.wizard,
+  }
+
+  const userPermissions = {
+    is_superuser: userPayload.superUser,
+    ...userPayload.permissions,
+  }
+
+  const filteredMenus = filterMenusByPermission(navMenus.value, userPermissions)
+  if (filteredMenus.length === 0) {
+    errorMessage.value = t('login.noPermission')
+    return
+  }
+
+  const authPayLoad: authState = {
+    token: response.access_token,
+    remember: form.value.remember,
+  }
+
+  authStore.login(authPayLoad)
+  userStore.loginUser(userPayload)
+
+  await afterLogin(userPayload.superUser, userPayload, filteredMenus)
 }

 // 登录获取token事件
-function login() {
+async function login() {
  errorMessage.value = ''

  // 进行表单校验
-  if (!form.value.username || !form.value.password || (isOTP.value && !form.value.otp_password)) {
+  if (!form.value.username || !form.value.password) {
    return
  }

  // 登录按钮 loading
  loading.value = true

-  // 用户名密码
-  const formData = new FormData()
+  try {
+    // 用户名密码
+    const formData = new FormData()

-  formData.append('username', form.value.username)
-  formData.append('password', form.value.password)
-  formData.append('otp_password', form.value.otp_password)
+    formData.append('username', form.value.username)
+    formData.append('password', form.value.password)
+    formData.append('otp_password', form.value.otp_password)

-  // 请求token
-  api
-    .post('/login/access-token', formData, {
+    // 请求token
+    const response: any = await api.post('/login/access-token', formData, {
      headers: {
        Accept: 'application/json', // 设置 Accept 类型
      },
    })
-    .then((response: any) => {
-      const userPayload: userState = {
-        superUser: response.super_user,
-        userID: response.user_id,
-        userName: response.user_name,
-        avatar: response.avatar,
-        level: response.level,
-        permissions: response.permissions,
-        wizard: response.widzard,
-      }

-      // 在保存用户信息之前检查权限
-      const userPermissions = {
-        is_superuser: userPayload.superUser,
-        ...userPayload.permissions,
-      }
+    await handleLoginSuccess(response)
+  } catch (error: any) {
+    // 登录失败，显示错误提示
+    if (!error.response) {
+      errorMessage.value = t('login.networkError')
+      return
+    }

-      const filteredMenus = filterMenusByPermission(navMenus, userPermissions)
-      // 如果用户没有任何可用菜单，拒绝登录
-      if (filteredMenus.length === 0) {
-        // 显示错误信息
-        errorMessage.value = t('login.noPermission')
-        loading.value = false
-        return
-      }
+    switch (error.response.status) {
+      case 401:
+        // 401错误可能是需要MFA或者认证失败
+        // 检查响应头是否有MFA要求标识
+        if (error.response.headers?.['x-mfa-required'] === 'true' && !form.value.otp_password) {
+          // 需要MFA验证，弹出对话框
+          isOTP.value = true
+          mfaDialog.value = true
+          return
+        }
+        // 不需要MFA或已填写OTP但认证失败
+        errorMessage.value = t('login.authFailure')
+        // 认证失败后清空OTP密码，防止下次点击不弹出对话框
+        form.value.otp_password = ''
+        break
+      case 403:
+        errorMessage.value = t('login.permissionDenied')
+        break
+      case 500:
+        errorMessage.value = t('login.serverError')
+        break
+      default:
+        errorMessage.value = `${t('login.authFailure')} (Status: ${error.response.status})`
+    }
+  } finally {
+    loading.value = false
+  }
+}

-      // 权限检查通过，保存用户信息
-      const authPayLoad: authState = {
-        token: response.access_token,
-        remember: form.value.remember,
-      }
+// 使用OTP码继续登录
+function loginWithOTP() {
+  mfaDialog.value = false
+  login()
+}

-      authStore.login(authPayLoad)
-      userStore.loginUser(userPayload)
+// 使用PassKey进行MFA验证
+async function verifyWithPassKey() {
+  if (!form.value.username) return

-      // 登录后处理
-      afterLogin(userPayload.superUser, userPayload, filteredMenus)
-    })
-    .catch((error: any) => {
-      // 登录失败，显示错误提示
-      if (!error.response) errorMessage.value = t('login.networkError')
-      else if (error.response.status === 401) errorMessage.value = t('login.authFailure')
-      else if (error.response.status === 403) errorMessage.value = t('login.permissionDenied')
-      else if (error.response.status === 500) errorMessage.value = t('login.serverError')
-      else errorMessage.value = `${t('login.loginFailed')} ${error.response.status}，${t('login.checkCredentials')}`
-      // 登录按钮 loading
-      loading.value = false
-    })
+  await handlePassKeyAuth(
+    { username: form.value.username },
+    val => (mfaPasskeyLoading.value = val),
+    async response => {
+      // 关闭MFA对话框
+      mfaDialog.value = false
+      await handleLoginSuccess(response)
+    },
+  )
 }

 // 自动登录
@@ -221,6 +462,51 @@ onMounted(async () => {
  // 如果token存在，且保持登录状态为true，则跳转到首页
  if (token && remember) {
    router.push('/')
+    return
+  }
+
+  // 初始化 Conditional UI 的 PassKey 自动填充
+  await initConditionalPasskey()
+})
+
+// 初始化 Conditional UI 的 PassKey 自动填充
+async function initConditionalPasskey() {
+  // 检查浏览器是否支持 WebAuthn 和 Conditional UI
+  if (!window.PublicKeyCredential || !PublicKeyCredential.isConditionalMediationAvailable) {
+    return
+  }
+
+  try {
+    const available = await PublicKeyCredential.isConditionalMediationAvailable()
+    if (!available) {
+      return
+    }
+
+    // 安全防御：如果已存在 controller，先 abort 掉旧的，防止重复调用产生幽灵请求
+    if (conditionalAbortController) {
+      conditionalAbortController.abort()
+      conditionalAbortController = null
+    }
+
+    // 创建 AbortController 用于取消请求
+    conditionalAbortController = new AbortController()
+
+    // 启动 Conditional UI 模式的 PassKey 认证
+    await loginWithPassKey(true)
+  } catch (error) {
+    console.error('[PassKey] Failed to initialize Conditional UI:', error)
+  }
+}
+
+// 组件卸载时清理
+onUnmounted(() => {
+  if (conditionalAbortController) {
+    conditionalAbortController.abort()
+    conditionalAbortController = null
+  }
+  if (manualAbortController) {
+    manualAbortController.abort()
+    manualAbortController = null
  }
 })
 </script>
@@ -229,7 +515,7 @@ onMounted(async () => {
  <!-- 登录页面容器 -->
  <div class="relative flex min-h-screen flex-col items-center justify-center">
    <!-- 登录表单 -->
-    <div class="auth-wrapper d-flex align-center justify-center">
+    <div v-if="!mfaDialog" class="auth-wrapper d-flex align-center justify-center">
      <VCard
        class="auth-card px-7 py-3 w-full h-full"
        :class="{ 'glass-effect': !isTransparentTheme }"
@@ -274,7 +560,7 @@ onMounted(async () => {
          </template>
        </VCardItem>
        <VCardText>
-          <VForm ref="refForm" autocomplete="on" @submit.prevent="() => {}">
+          <VForm ref="refForm" autocomplete="on" @submit.prevent="login">
            <VRow>
              <!-- username -->
              <VCol cols="12">
@@ -284,9 +570,10 @@ onMounted(async () => {
                  :label="t('login.username')"
                  type="text"
                  name="username"
-                  autocomplete="username"
+                  id="username"
+                  autocomplete="username webauthn"
                  :rules="[requiredValidator]"
-                  @input="fetchOTP"
+                  hide-details
                />
              </VCol>
              <!-- password -->
@@ -295,15 +582,16 @@ onMounted(async () => {
                  v-model="form.password"
                  :label="t('login.password')"
                  :type="isPasswordVisible ? 'text' : 'password'"
-                  name="current-password"
+                  name="password"
+                  id="password"
                  autocomplete="current-password"
                  :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
                  :rules="[requiredValidator]"
+                  hide-details
                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
                />
              </VCol>
              <VCol cols="12">
-                <VTextField v-if="isOTP" v-model="form.otp_password" :label="t('login.otpCode')" type="input" />
                <!-- remember me checkbox -->
                <div class="d-flex align-center justify-space-between flex-wrap">
                  <VCheckbox v-model="form.remember" :label="t('login.stayLoggedIn')" required />
@@ -311,9 +599,21 @@ onMounted(async () => {
              </VCol>
              <VCol cols="12">
                <!-- login button -->
-                <VBtn block type="submit" @click="login" prepend-icon="mdi-login" :loading="loading">
+                <VBtn block type="submit" prepend-icon="mdi-login" :loading="loading">
                  {{ t('login.login') }}
                </VBtn>
+                <!-- passkey login button -->
+                <VBtn
+                  block
+                  variant="tonal"
+                  color="success"
+                  class="mt-3 passkey-btn"
+                  prepend-icon="material-symbols:passkey"
+                  :loading="passkeyLoading"
+                  @click="loginWithPassKey(false)"
+                >
+                  {{ t('login.loginWithPasskey') }}
+                </VBtn>
                <VAlert v-if="errorMessage" type="error" variant="tonal" class="mt-3">
                  {{ errorMessage }}
                </VAlert>
@@ -323,6 +623,64 @@ onMounted(async () => {
        </VCardText>
      </VCard>
    </div>
+
+    <!-- MFA二次验证对话框 -->
+    <VDialog v-model="mfaDialog" max-width="400" persistent>
+      <VCard>
+        <VCardTitle class="text-h5 text-center mt-4 pb-2">{{ t('login.secondaryVerification') }}</VCardTitle>
+        <VCardText class="pt-0">
+          <p class="text-center mb-4">{{ t('login.mfa.selectVerificationMethod') }}</p>
+
+          <!-- TOTP验证 -->
+          <VCard variant="tonal" class="mb-3">
+            <VCardText>
+              <VForm @submit.prevent="loginWithOTP">
+                <VTextField
+                  v-model="form.otp_password"
+                  :label="t('login.otpCode')"
+                  :placeholder="t('login.otpPlaceholder')"
+                  type="text"
+                  name="otp"
+                  id="otp"
+                  autocomplete="one-time-code"
+                  inputmode="numeric"
+                  prepend-inner-icon="mdi-shield-key"
+                  class="mb-2"
+                />
+                <VBtn block type="submit" color="primary" :disabled="!form.otp_password">
+                  {{ t('login.loginWithOtp') }}
+                </VBtn>
+              </VForm>
+            </VCardText>
+          </VCard>
+
+          <!-- PassKey验证 -->
+          <VCard variant="tonal">
+            <VCardText>
+              <p class="text-body-2 mb-2">{{ t('login.orUsePasskey') }}</p>
+              <VBtn
+                block
+                variant="tonal"
+                color="success"
+                class="passkey-btn"
+                prepend-icon="material-symbols:passkey"
+                :loading="mfaPasskeyLoading"
+                @click="verifyWithPassKey"
+              >
+                {{ t('login.verifyWithPasskey') }}
+              </VBtn>
+            </VCardText>
+          </VCard>
+
+          <!-- 错误提示 -->
+          <VAlert v-if="errorMessage" type="error" variant="tonal" class="mt-3">
+            {{ errorMessage }}
+          </VAlert>
+
+          <VBtn block variant="text" class="mt-4" @click="mfaDialog = false">{{ t('common.cancel') }}</VBtn>
+        </VCardText>
+      </VCard>
+    </VDialog>
  </div>
 </template>

@@ -348,4 +706,10 @@ onMounted(async () => {
  backdrop-filter: blur(10px) !important;
  background: rgba(var(--v-theme-surface), 0.7) !important;
 }
+
+.v-theme--light {
+  .passkey-btn.v-btn--variant-tonal {
+    color: rgb(86, 170, 0) !important;
+  }
+}
 </style>
--- a/src/pages/recommend.vue
+++ b/src/pages/recommend.vue
@@ -231,12 +231,23 @@ registerHeaderTab({
  ],
 })

+// 页面是否准备就绪
+const isReady = ref(false)
+
+// 定时器
+let timer: ReturnType<typeof setTimeout>
+
 onBeforeMount(async () => {
  await loadConfig()
  initializeColors()
 })

 onMounted(async () => {
+  // 延迟渲染内容，避免阻塞页面切换动画
+  timer = setTimeout(() => {
+    isReady.value = true
+  }, 400)
+
  await loadExtraRecommendSources()
  // 为新增的数据源也生成颜色
  extraRecommendSources.value.forEach(source => {
@@ -246,6 +257,10 @@ onMounted(async () => {
  })
 })

+onUnmounted(() => {
+  if (timer) clearTimeout(timer)
+})
+
 onActivated(async () => {
  await loadExtraRecommendSources()
 })
@@ -256,10 +271,16 @@ onActivated(async () => {
    <!-- 滚动内容区域 -->
    <div class="recommend-content">
      <TransitionGroup name="fade">
-        <MediaCardSlideView v-for="item in filteredViews" :key="item.title" v-bind="item" class="content-group" />
+        <MediaCardSlideView
+          v-for="item in filteredViews"
+          :key="item.title"
+          v-bind="item"
+          :ready="isReady"
+          class="content-group"
+        />
      </TransitionGroup>

-      <div v-if="filteredViews.length === 0" class="empty-category">
+      <div v-if="isReady && filteredViews.length === 0" class="empty-category">
        <VIcon icon="mdi-alert-circle-outline" size="large" class="empty-icon" />
        <p class="empty-text">{{ t('recommend.noCategoryContent') }}</p>
        <VBtn color="primary" variant="tonal" size="small" @click="dialog = true">
--- a/src/pages/setting.vue
+++ b/src/pages/setting.vue
@@ -12,10 +12,11 @@ import AccountSettingRule from '@/views/setting/AccountSettingRule.vue'
 import { getSettingTabs } from '@/router/i18n-menu'
 import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'

+const { t } = useI18n()
 const route = useRoute()

 const activeTab = ref((route.query.tab as string) || '')
-const settingTabs = computed(() => getSettingTabs())
+const settingTabs = computed(() => getSettingTabs(t))

 // 使用动态标签页
 const { registerHeaderTab } = useDynamicHeaderTab()
--- a/src/pages/subscribe.vue
+++ b/src/pages/subscribe.vue
@@ -22,9 +22,9 @@ const shareViewKey = ref(0)
 // 获取标签页
 const subscribeTabs = computed(() => {
  if (subType === '电影') {
-    return getSubscribeMovieTabs()
+    return getSubscribeMovieTabs(t)
  } else {
-    return getSubscribeTvTabs()
+    return getSubscribeTvTabs(t)
  }
 })

--- a/src/pages/workflow.vue
+++ b/src/pages/workflow.vue
@@ -17,7 +17,7 @@ const listViewKey = ref(0)

 // 获取标签页
 const workflowTabs = computed(() => {
-  return getWorkflowTabs()
+  return getWorkflowTabs(t)
 })

 // 新增工作流对话框
--- a/src/plugins/vuetify/icons.ts
+++ b/src/plugins/vuetify/icons.ts
@@ -1,5 +1,5 @@
 import { Icon } from '@iconify/vue'
-import { aliases } from 'vuetify/lib/iconsets/mdi'
+import { aliases } from 'vuetify/iconsets/mdi'

 const alertTypeIcon = {
  success: 'mdi-check-circle-outline',
--- a/src/router/i18n-menu.ts
+++ b/src/router/i18n-menu.ts
@@ -1,9 +1,8 @@
-import { useI18n } from 'vue-i18n'
 import { useGlobalSettingsStore } from '@/stores'
+import type { Composer } from 'vue-i18n'

 // 构建路由菜单，每次调用时使用当前的语言环境
-export function getNavMenus() {
-  const { t } = useI18n()
+export function getNavMenus(t: Composer['t']) {
  const globalSettingsStore = useGlobalSettingsStore()

  // 检查是否为高级模式
@@ -148,9 +147,7 @@ export function getNavMenus() {
 }

 // 获取设置标签页
-export function getSettingTabs() {
-  const { t } = useI18n()
-
+export function getSettingTabs(t: Composer['t']) {
  return [
    {
      title: t('settingTabs.system.title'),
@@ -204,9 +201,7 @@ export function getSettingTabs() {
 }

 // 获取电影订阅标签页
-export function getSubscribeMovieTabs() {
-  const { t } = useI18n()
-
+export function getSubscribeMovieTabs(t: Composer['t']) {
  return [
    {
      title: t('subscribeTabs.movie.mysub'),
@@ -222,9 +217,7 @@ export function getSubscribeMovieTabs() {
 }

 // 获取电视剧订阅标签页
-export function getSubscribeTvTabs() {
-  const { t } = useI18n()
-
+export function getSubscribeTvTabs(t: Composer['t']) {
  return [
    {
      title: t('subscribeTabs.tv.mysub'),
@@ -245,9 +238,7 @@ export function getSubscribeTvTabs() {
 }

 // 获取插件标签页
-export function getPluginTabs() {
-  const { t } = useI18n()
-
+export function getPluginTabs(t: Composer['t']) {
  return [
    {
      title: t('pluginTabs.installed'),
@@ -263,9 +254,7 @@ export function getPluginTabs() {
 }

 // 获取发现标签页
-export function getDiscoverTabs() {
-  const { t } = useI18n()
-
+export function getDiscoverTabs(t: Composer['t']) {
  return [
    {
      name: t('discoverTabs.themoviedb'),
@@ -286,9 +275,7 @@ export function getDiscoverTabs() {
 }

 // 获取工作流标签页
-export function getWorkflowTabs() {
-  const { t } = useI18n()
-
+export function getWorkflowTabs(t: Composer['t']) {
  return [
    {
      title: t('workflowTabs.list'),
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -1,32 +1,45 @@
 import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching'
+import { registerRoute, setCatchHandler } from 'workbox-routing'
+import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies'
+import { ExpirationPlugin } from 'workbox-expiration'
+import { CacheableResponsePlugin } from 'workbox-cacheable-response'
+import * as navigationPreload from 'workbox-navigation-preload'

 // Service Worker 类型声明
 declare let self: ServiceWorkerGlobalScope & {
-  __WB_MANIFEST: Array<{ url: string; revision?: string }>
+  readonly __WB_MANIFEST: Array<{ url: string; revision?: string }>
 }

 // 缓存版本控制
-const CACHE_VERSION = 'v13'
-const CACHE_NAMES = {
-  appShell: `app-shell-${CACHE_VERSION}`,
-  static: `static-resources-${CACHE_VERSION}`,
-  images: `image-cache-${CACHE_VERSION}`,
-  fonts: `font-cache-${CACHE_VERSION}`,
-  api: `api-cache-${CACHE_VERSION}`,
-  tmdb: `tmdb-image-cache-${CACHE_VERSION}`,
-  pages: `pages-cache-${CACHE_VERSION}`,
-}
+const RESOURCE_VERSION = 'V2'
+const CACHE_VERSION = `${__APP_VERSION__}-${__BUILD_TIME__}` // 开发环境下无法使用此环境变量，生产环境正常

-// 缓存大小限制
-const CACHE_SIZE_LIMITS = {
-  appShell: { maxEntries: 10, maxAgeSeconds: 7 * 24 * 60 * 60 }, // 7天
-  static: { maxEntries: 100, maxAgeSeconds: 30 * 24 * 60 * 60 }, // 30天
-  images: { maxEntries: 200, maxAgeSeconds: 30 * 24 * 60 * 60 }, // 30天
-  fonts: { maxEntries: 50, maxAgeSeconds: 365 * 24 * 60 * 60 }, // 1年
-  api: { maxEntries: 500, maxAgeSeconds: 24 * 60 * 60 }, // 24小时
-  tmdb: { maxEntries: 300, maxAgeSeconds: 7 * 24 * 60 * 60 }, // 7天
-  pages: { maxEntries: 50, maxAgeSeconds: 7 * 24 * 60 * 60 }, // 7天
-}
+// 启用导航预载
+navigationPreload.enable()
+
+// 自动清理旧的预缓存
+cleanupOutdatedCaches()
+
+// 预缓存并路由
+precacheAndRoute(self.__WB_MANIFEST)
+
+// 监听安装事件
+self.addEventListener('install', () => {
+  // 强制等待中的 Service Worker 立即激活
+  self.skipWaiting()
+})
+
+// 监听激活事件
+self.addEventListener('activate', event => {
+  // 让 Service Worker 立即接管页面
+  event.waitUntil(
+    (async () => {
+      await self.clients.claim()
+      // 清理旧版本的运行时缓存
+      await cleanupRuntimeCaches(true)
+    })(),
+  )
+})

 // 通知选项
 const options = {
@@ -38,100 +51,229 @@ const options = {
 // 存储未读消息数量的键名
 const UNREAD_COUNT_KEY = 'mp_unread_count'

-// 从IndexedDB获取未读消息数量
-async function getStoredUnreadCount(): Promise<number> {
-  try {
-    const count = await get(UNREAD_COUNT_KEY)
-    return count || 0
-  } catch (error) {
-    console.error('Failed to get stored unread count:', error)
-    return 0
+// --- 缓存策略配置 ---
+
+// 导航请求与 App Shell - 优先网络
+registerRoute(
+  ({ request, url }) => request.mode === 'navigate' || url.pathname === '/' || url.pathname === '/index.html',
+  new NetworkFirst({
+    cacheName: `app-shell-${CACHE_VERSION}`,
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 10,
+        maxAgeSeconds: 7 * 24 * 60 * 60, // 7天
+      }),
+    ],
+  }),
+)
+
+// 静态资源 (JS, CSS, HTML) - 优先缓存
+registerRoute(
+  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
+  new StaleWhileRevalidate({
+    cacheName: `static-resources-${CACHE_VERSION}`,
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+    ],
+  }),
+)
+
+// 图片资源 - 优先缓存
+registerRoute(
+  ({ request }) => request.destination === 'image',
+  new CacheFirst({
+    cacheName: `image-cache-${RESOURCE_VERSION}`,
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxEntries: 200,
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 30天
+      }),
+    ],
+  }),
+)
+
+// 字体资源 - 优先缓存
+registerRoute(
+  ({ request }) => request.destination === 'font',
+  new CacheFirst({
+    cacheName: `font-cache-${RESOURCE_VERSION}`,
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 365 * 24 * 60 * 60, // 1年
+      }),
+    ],
+  }),
+)
+
+// TMDB 图片 - 优先缓存
+registerRoute(
+  ({ url }) => url.hostname === 'image.tmdb.org',
+  new CacheFirst({
+    cacheName: `tmdb-image-cache-${RESOURCE_VERSION}`,
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxEntries: 300,
+        maxAgeSeconds: 7 * 24 * 60 * 60, // 7天
+      }),
+    ],
+  }),
+)
+
+// API GET 请求 - 优先网络
+registerRoute(
+  ({ url, request }) =>
+    url.pathname.includes('/api/v1/') &&
+    request.method === 'GET' &&
+    !url.pathname.includes('/api/v1/system/message') && // SSE实时消息流
+    !url.pathname.includes('/api/v1/system/progress/') && // SSE实时进度流
+    !url.pathname.includes('/api/v1/system/logging') && // SSE实时日志流
+    !url.pathname.includes('/api/v1/message/') && // 用户消息接口
+    !url.pathname.includes('/api/v1/system/global') && // 系统配置接口
+    !url.pathname.includes('/api/v1/mfa/') && // 多因素认证接口
+    !url.pathname.includes('/api/v1/dashboard/'), // Dashboard实时监控数据
+  new NetworkFirst({
+    cacheName: `api-cache-${CACHE_VERSION}`,
+    networkTimeoutSeconds: 5,
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxEntries: 500,
+        maxAgeSeconds: 24 * 60 * 60, // 24小时
+      }),
+    ],
+  }),
+)
+
+// 设置默认离线页面
+setCatchHandler(async ({ request }) => {
+  if (request?.destination === 'document') {
+    return (await caches.match('/offline.html')) || Response.error()
  }
+  return Response.error()
+})
+
+// --- 辅助函数 (通知与徽章) ---
+
+// 清理运行时缓存
+async function cleanupRuntimeCaches(onlyOld: boolean = false) {
+  const cacheNames = await caches.keys()
+  const runtimeCachePrefixes = [
+    'app-shell',
+    'static-resources',
+    'image-cache',
+    'font-cache',
+    'api-cache',
+    'tmdb-image-cache',
+  ]
+
+  // 当前版本的缓存全名
+  const currentCacheNames = [
+    `app-shell-${CACHE_VERSION}`,
+    `static-resources-${CACHE_VERSION}`,
+    `image-cache-${RESOURCE_VERSION}`,
+    `font-cache-${RESOURCE_VERSION}`,
+    `tmdb-image-cache-${RESOURCE_VERSION}`,
+    `api-cache-${CACHE_VERSION}`,
+  ]
+
+  await Promise.all(
+    cacheNames.map(cacheName => {
+      const isRuntimeCache = runtimeCachePrefixes.some(prefix => cacheName.startsWith(prefix))
+      if (isRuntimeCache) {
+        if (!onlyOld || !currentCacheNames.includes(cacheName)) {
+          console.log('[SW] Deleting runtime cache:', cacheName)
+          return caches.delete(cacheName)
+        }
+      }
+      return Promise.resolve()
+    }),
+  )
 }

-// 保存未读消息数量到IndexedDB
-async function setStoredUnreadCount(count: number): Promise<void> {
-  try {
-    await set(UNREAD_COUNT_KEY, count)
-  } catch (error) {
-    console.error('Failed to set stored unread count:', error)
-  }
-}
-
-// 简单的IndexedDB包装器
+// 简单的 IndexedDB 包装器 (用于未读计数)
 async function openDB(): Promise<IDBDatabase> {
-  // Bump the version to add the new "sync" store while keeping existing data intact
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('mp_badge_db', 2)
-
    request.onerror = () => reject(request.error)
    request.onsuccess = () => resolve(request.result)
-
    request.onupgradeneeded = event => {
      const db = (event.target as IDBOpenDBRequest).result
-
-      // Badge store (existing)
      if (!db.objectStoreNames.contains('badge')) {
        db.createObjectStore('badge')
      }
-
-      // Dedicated store for offline-sync items
-      if (!db.objectStoreNames.contains('sync')) {
-        db.createObjectStore('sync')
-      }
    }
  })
 }

-// 获取IndexedDB中的数据
 async function get(key: string, storeName: string = 'badge'): Promise<any> {
-  const db = await openDB()
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction([storeName], 'readonly')
-    const store = tx.objectStore(storeName)
-    const request = store.get(key)
-
-    request.onerror = () => reject(request.error)
-    request.onsuccess = () => resolve(request.result)
-  })
+  try {
+    const db = await openDB()
+    return new Promise((resolve, reject) => {
+      if (!db.objectStoreNames.contains(storeName)) {
+        resolve(null)
+        return
+      }
+      const tx = db.transaction([storeName], 'readonly')
+      const store = tx.objectStore(storeName)
+      const request = store.get(key)
+      request.onerror = () => reject(request.error)
+      request.onsuccess = () => resolve(request.result)
+    })
+  } catch (e) {
+    return null
+  }
 }

-// 保存数据到IndexedDB
 async function set(key: string, value: any, storeName: string = 'badge'): Promise<void> {
-  const db = await openDB()
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction([storeName], 'readwrite')
-    const store = tx.objectStore(storeName)
-
-    store.put(value, key)
-
-    tx.oncomplete = () => resolve()
-    tx.onerror = () => reject(tx.error)
-  })
+  try {
+    const db = await openDB()
+    return new Promise((resolve, reject) => {
+      if (!db.objectStoreNames.contains(storeName)) {
+        console.warn(`Store ${storeName} not found`)
+        resolve()
+        return
+      }
+      const tx = db.transaction([storeName], 'readwrite')
+      const store = tx.objectStore(storeName)
+      store.put(value, key)
+      tx.oncomplete = () => resolve()
+      tx.onerror = () => reject(tx.error)
+    })
+  } catch (e) {
+    console.error(`[SW] Failed to set IndexedDB key "${key}" in store "${storeName}":`, e)
+  }
 }

-// 删除IndexedDB中的数据（确保事务完成）
-async function del(key: string, storeName: string = 'badge'): Promise<void> {
-  const db = await openDB()
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction([storeName], 'readwrite')
-    const store = tx.objectStore(storeName)
-
-    store.delete(key)
-
-    tx.oncomplete = () => resolve()
-    tx.onerror = () => reject(tx.error)
-  })
+async function getStoredUnreadCount(): Promise<number> {
+  const count = await get(UNREAD_COUNT_KEY)
+  return typeof count === 'number' ? count : 0
+}
+
+async function setStoredUnreadCount(count: number): Promise<void> {
+  await set(UNREAD_COUNT_KEY, count)
 }

-// 更新桌面图标徽章
 async function updateBadge(count: number) {
-  if ('setAppBadge' in navigator) {
+  if ('setAppBadge' in self.navigator) {
    try {
      if (count > 0) {
-        await navigator.setAppBadge!(count)
+        await self.navigator.setAppBadge(count)
      } else {
-        await navigator.clearAppBadge!()
+        await self.navigator.clearAppBadge()
      }
    } catch (error) {
      console.error('Failed to update app badge:', error)
@@ -139,11 +281,10 @@ async function updateBadge(count: number) {
  }
 }

-// 清除桌面图标徽章
 async function clearBadge() {
-  if ('clearAppBadge' in navigator) {
+  if ('clearAppBadge' in self.navigator) {
    try {
-      await navigator.clearAppBadge!()
+      await self.navigator.clearAppBadge()
      await setStoredUnreadCount(0)
    } catch (error) {
      console.error('Failed to clear app badge:', error)
@@ -151,352 +292,91 @@ async function clearBadge() {
  }
 }

-// 清理旧版本缓存
-async function deleteOldCaches() {
-  const cacheWhitelist = Object.values(CACHE_NAMES)
-  const cacheNames = await caches.keys()
-
-  await Promise.all(
-    cacheNames.map(async cacheName => {
-      if (!cacheWhitelist.includes(cacheName)) {
-        console.log('Deleting old cache:', cacheName)
-        return caches.delete(cacheName)
-      }
-    }),
-  )
-}
-
-// 获取缓存大小
-async function getCacheSize(cacheName: string): Promise<number> {
-  if (!('estimate' in navigator.storage)) {
-    return 0
-  }
-
-  try {
-    const cache = await caches.open(cacheName)
-    const keys = await cache.keys()
-    let totalSize = 0
-
-    for (const request of keys) {
-      const response = await cache.match(request)
-      if (response) {
-        const blob = await response.blob()
-        totalSize += blob.size
-      }
-    }
-
-    return totalSize
-  } catch (error) {
-    console.error('Failed to get cache size:', error)
-    return 0
-  }
-}
-
 // 监控缓存大小
 async function monitorCacheSize() {
  const cacheSizes: Record<string, number> = {}
-  let totalSize = 0
+  let calculatedTotalSize = 0

-  for (const [key, cacheName] of Object.entries(CACHE_NAMES)) {
-    const size = await getCacheSize(cacheName)
-    cacheSizes[key] = size
-    totalSize += size
-  }
+  try {
+    const cacheNames = await caches.keys()

-  // 发送缓存统计信息给客户端
-  const clients = await self.clients.matchAll()
-  clients.forEach(client => {
-    client.postMessage({
-      type: 'CACHE_SIZE_UPDATE',
-      data: {
-        cacheSizes,
-        totalSize,
-        totalSizeMB: (totalSize / 1024 / 1024).toFixed(2),
-      },
-    })
-  })
+    // 并行处理所有缓存
+    await Promise.all(
+      cacheNames.map(async cacheName => {
+        const cache = await caches.open(cacheName)
+        const requests = await cache.keys()
+        let cacheSize = 0

-  return { cacheSizes, totalSize }
-}
-
-// 清理过期缓存条目
-async function cleanupExpiredCaches() {
-  for (const [key, cacheName] of Object.entries(CACHE_NAMES)) {
-    const limit = CACHE_SIZE_LIMITS[key as keyof typeof CACHE_SIZE_LIMITS]
-    if (!limit) continue
-
-    try {
-      const cache = await caches.open(cacheName)
-      const keys = await cache.keys()
-
-      // 如果缓存条目超过限制，删除最老的条目
-      if (keys.length > limit.maxEntries) {
-        const deleteCount = keys.length - limit.maxEntries
-        console.log(`Cleaning up ${deleteCount} entries from ${cacheName}`)
-
-        // 删除最老的条目（假设数组开头是最老的）
-        for (let i = 0; i < deleteCount; i++) {
-          await cache.delete(keys[i])
+        // 遍历请求以获取响应头部，避免 matchAll 一次性加载大量响应对象到内存
+        for (const request of requests) {
+          const response = await cache.match(request)
+          if (response) {
+            const contentLength = response.headers.get('content-length')
+            if (contentLength) {
+              cacheSize += parseInt(contentLength, 10)
+            }
+          }
        }
-      }
-    } catch (error) {
-      console.error(`Failed to cleanup cache ${cacheName}:`, error)
+        cacheSizes[cacheName] = cacheSize
+      }),
+    )
+
+    calculatedTotalSize = Object.values(cacheSizes).reduce((acc, size) => acc + size, 0)
+
+    // 获取系统级存储估算
+    let quota = 0
+    let usage = 0
+    if (self.navigator.storage && self.navigator.storage.estimate) {
+      const estimate = await self.navigator.storage.estimate()
+      quota = estimate.quota || 0
+      usage = estimate.usage || 0
    }
-  }
-}

-// 安装事件
-self.addEventListener('install', () => {
-  // 强制等待中的Service Worker立即成为活动的Service Worker
-  self.skipWaiting()
-})
-
-// 激活事件
-self.addEventListener('activate', event => {
-  event.waitUntil(
-    (async () => {
-      // 启用导航预载功能以提高性能
-      if ('navigationPreload' in self.registration) {
-        await self.registration.navigationPreload.enable()
-      }
-
-      // 清理旧版本的缓存
-      await deleteOldCaches()
-
-      // 清理过期的缓存条目
-      await cleanupExpiredCaches()
-
-      // 监控缓存大小
-      await monitorCacheSize()
-    })(),
-  )
-  // 告诉活动的Service Worker立即控制页面
-  self.clients.claim()
-})
-
-// 处理API请求，当离线时发送消息到客户端
-self.addEventListener('fetch', event => {
-  const url = new URL(event.request.url)
-
-  // 处理API请求
-  if (event.request.url.includes('/api/v1/')) {
-    // GET请求：尝试从缓存返回
-    if (event.request.method === 'GET') {
-      event.respondWith(
-        (async () => {
-          try {
-            // 尝试网络请求
-            const networkResponse = await fetch(event.request)
-            return networkResponse
-          } catch (error) {
-            // 网络错误时，通知客户端当前处于离线状态
-            if (self.clients) {
-              self.clients.matchAll().then(clients => {
-                clients.forEach(client => {
-                  client.postMessage({
-                    type: 'OFFLINE_STATUS',
-                    offline: true,
-                  })
-                })
-              })
-            }
-
-            // 尝试返回缓存的响应
-            const cache = await caches.open(CACHE_NAMES.api)
-            const cachedResponse = await cache.match(event.request)
-            if (cachedResponse) {
-              return cachedResponse
-            }
-
-            // 如果没有缓存，抛出错误
-            throw error
-          }
-        })(),
-      )
+    // 构造结果：满足 useCacheManager.ts 的需求
+    const result = {
+      cacheSizes,
+      // 优先使用准确的 usage (真实磁盘占用)，如果不可用则退回到计算值
+      totalSize: usage || calculatedTotalSize,
+      totalSizeMB: ((usage || calculatedTotalSize) / 1024 / 1024).toFixed(2),
+      // 额外信息保留，供未来扩展
+      quota,
+      usage,
+      quotaMB: (quota / 1024 / 1024).toFixed(2),
+      usageMB: (usage / 1024 / 1024).toFixed(2),
+      calculatedTotalSize,
    }
-    // POST/PUT/DELETE请求：离线时加入同步队列
-    else if (['POST', 'PUT', 'DELETE', 'PATCH'].includes(event.request.method)) {
-      event.respondWith(
-        (async () => {
-          try {
-            // 尝试网络请求
-            const networkResponse = await fetch(event.request)
-            return networkResponse
-          } catch (error) {
-            // 网络错误时，加入同步队列
-            await addToSyncQueue(event.request)

-            // 通知客户端请求已加入队列
-            if (self.clients) {
-              self.clients.matchAll().then(clients => {
-                clients.forEach(client => {
-                  client.postMessage({
-                    type: 'REQUEST_QUEUED',
-                    url: event.request.url,
-                    method: event.request.method,
-                  })
-                })
-              })
-            }
-
-            // 返回一个假的成功响应
-            return new Response(
-              JSON.stringify({
-                success: true,
-                queued: true,
-                message: '请求已加入离线队列，将在网络恢复后自动同步',
-              }),
-              {
-                status: 202,
-                headers: { 'Content-Type': 'application/json' },
-              },
-            )
-          }
-        })(),
-      )
-    }
-    return
-  }
-})
-
-// 后台同步队列
-const syncQueue: Array<{
-  id: string
-  url: string
-  method: string
-  data?: any
-  timestamp: number
-}> = []
-
-// 添加请求到同步队列
-async function addToSyncQueue(request: Request) {
-  const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-  const url = request.url
-  const method = request.method
-
-  let data: any = null
-  if (method !== 'GET' && method !== 'HEAD') {
-    try {
-      data = await request.clone().text()
-    } catch (e) {
-      console.error('Failed to read request body:', e)
-    }
-  }
-
-  const syncItem = {
-    id,
-    url,
-    method,
-    data,
-    timestamp: Date.now(),
-  }
-
-  // 保存到IndexedDB (使用专用的 "sync" store)
-  await set(id, syncItem, 'sync')
-  syncQueue.push(syncItem)
-
-  // 注册后台同步
-  if ('sync' in self.registration) {
-    await self.registration.sync.register('sync-data')
-  }
-}
-
-// 执行同步队列中的请求
-async function processSyncQueue() {
-  const db = await openDB()
-
-  // 先用只读事务获取所有同步项
-  const items: Array<any> = await new Promise((resolve, reject) => {
-    const tx = db.transaction(['sync'], 'readonly')
-    const store = tx.objectStore('sync')
-    const req = store.getAll()
-    req.onsuccess = () => resolve(req.result)
-    req.onerror = () => reject(req.error)
-  })
-
-  // 收集需要删除的项目ID
-  const itemsToDelete: string[] = []
-  const itemsToDeleteExpired: string[] = []
-
-  for (const syncItem of items) {
-    const key = syncItem.id
-    try {
-      // 构建请求
-      const init: RequestInit = {
-        method: syncItem.method,
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      }
-
-      if (syncItem.data) {
-        init.body = syncItem.data
-      }
-
-      // 发送请求
-      const response = await fetch(syncItem.url, init)
-
-      if (response.ok) {
-        // 成功后标记为需要删除
-        itemsToDelete.push(key)
-
-        // 通知客户端同步成功
-        const clients = await self.clients.matchAll()
-        clients.forEach(client => {
-          client.postMessage({
-            type: 'SYNC_SUCCESS',
-            syncId: syncItem.id,
-            url: syncItem.url,
-          })
-        })
-      } else {
-        throw new Error(`HTTP ${response.status}`)
-      }
-    } catch (error) {
-      console.error('Sync failed for item:', key, error)
-
-      // 如果该同步项已存在超过 24 小时，则标记为需要删除
-      if (Date.now() - syncItem.timestamp > 24 * 60 * 60 * 1000) {
-        itemsToDeleteExpired.push(key)
-      }
-    }
-  }
-
-  // 批量删除所有成功处理的项目和过期项目
-  const allItemsToDelete = [...itemsToDelete, ...itemsToDeleteExpired]
-  if (allItemsToDelete.length > 0) {
-    await new Promise<void>((resolve, reject) => {
-      const tx = db.transaction(['sync'], 'readwrite')
-      const store = tx.objectStore('sync')
-
-      // 批量删除所有标记的项目
-      allItemsToDelete.forEach(id => {
-        store.delete(id)
+    // 发送缓存统计信息给客户端
+    const clients = await self.clients.matchAll()
+    clients.forEach(client => {
+      client.postMessage({
+        type: 'CACHE_SIZE_UPDATE',
+        data: result,
      })
-
-      tx.oncomplete = () => resolve()
-      tx.onerror = () => reject(tx.error)
    })
+
+    return result
+  } catch (error) {
+    console.error('Failed to monitor cache size:', error)
+    return {
+      cacheSizes: {},
+      totalSize: 0,
+      totalSizeMB: '0.00',
+      quota: 0,
+      usage: 0,
+      quotaMB: '0.00',
+      usageMB: '0.00',
+    }
  }
 }

-// 初始化 Workbox
-cleanupOutdatedCaches()
-precacheAndRoute(self.__WB_MANIFEST)
+// --- 事件监听 ---

-// 监听 sync 事件，处理后台同步
-self.addEventListener('sync', (event: SyncEvent) => {
-  if (event.tag === 'sync-data') {
-    event.waitUntil(processSyncQueue())
-  }
-})
-
-// 监听 push 事件，显示通知
+// 监听 push 事件
 self.addEventListener('push', function (event) {
  if (!event.data) {
    return
  }
-  // 解析获取推送消息
  let payload
  try {
    payload = event.data?.json()
@@ -505,7 +385,7 @@ self.addEventListener('push', function (event) {
      title: event.data?.text(),
    }
  }
-  // 根据推送消息生成桌面通知并展现出来
+
  try {
    const content = {
      body: payload.body || '',
@@ -515,7 +395,6 @@ self.addEventListener('push', function (event) {
      actions: options.actions,
    }

-    // 增加未读消息计数并持久化存储
    event.waitUntil(
      (async () => {
        const currentCount = await getStoredUnreadCount()
@@ -525,11 +404,11 @@ self.addEventListener('push', function (event) {
      })(),
    )
  } catch (e) {
-    // 静默处理错误
+    // 忽略错误
  }
 })

-// 监听通知点击事件
+// 监听通知点击
 self.addEventListener('notificationclick', function (event) {
  const info = event.notification
  if (event.action === 'close') {
@@ -539,10 +418,9 @@ self.addEventListener('notificationclick', function (event) {
  }
 })

-// 监听来自主应用的消息，用于清除徽章或更新徽章数量
+// 监听消息
 self.addEventListener('message', function (event) {
  if (event.data && event.data.type === 'CLEAR_BADGE') {
-    // 清除徽章
    clearBadge()
      .then(() => {
        event.ports[0]?.postMessage({ success: true })
@@ -551,7 +429,6 @@ self.addEventListener('message', function (event) {
        event.ports[0]?.postMessage({ success: false, error: error instanceof Error ? error.message : String(error) })
      })
  } else if (event.data && event.data.type === 'UPDATE_BADGE') {
-    // 更新徽章数量
    const count = event.data.count || 0
    setStoredUnreadCount(count)
      .then(() => updateBadge(count))
@@ -562,25 +439,27 @@ self.addEventListener('message', function (event) {
        event.ports[0]?.postMessage({ success: false, error: error instanceof Error ? error.message : String(error) })
      })
  } else if (event.data && event.data.type === 'GET_UNREAD_COUNT') {
-    // 获取未读消息数量
    getStoredUnreadCount()
      .then(count => {
        event.ports[0]?.postMessage({ count })
      })
-      .catch(error => {
+      .catch(() => {
        event.ports[0]?.postMessage({ count: 0 })
      })
  } else if (event.data && event.data.type === 'CLEANUP_CACHES') {
-    // 手动触发缓存清理
-    Promise.all([deleteOldCaches(), cleanupExpiredCaches(), monitorCacheSize()])
-      .then(([, , cacheInfo]) => {
+    // 手动清理: 清理所有运行时缓存
+    const performCleanup = async () => {
+      await cleanupRuntimeCaches(false)
+      return await monitorCacheSize()
+    }
+    performCleanup()
+      .then(cacheInfo => {
        event.ports[0]?.postMessage({ success: true, cacheInfo })
      })
      .catch(error => {
        event.ports[0]?.postMessage({ success: false, error: error instanceof Error ? error.message : String(error) })
      })
  } else if (event.data && event.data.type === 'GET_CACHE_INFO') {
-    // 获取缓存信息
    monitorCacheSize()
      .then(cacheInfo => {
        event.ports[0]?.postMessage({ success: true, cacheInfo })
@@ -588,5 +467,7 @@ self.addEventListener('message', function (event) {
      .catch(error => {
        event.ports[0]?.postMessage({ success: false, error: error instanceof Error ? error.message : String(error) })
      })
+  } else if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting()
  }
 })
--- a/src/stores/global.ts
+++ b/src/stores/global.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import type { globalSettingsState } from '@/stores/types'
 import { fetchGlobalSettings } from '@/utils/globalSetting'
+import { useVersionChecker } from '@/composables/useVersionChecker'

 export const useGlobalSettingsStore = defineStore('globalSettings', {
  state: (): globalSettingsState => ({
@@ -18,6 +19,12 @@ export const useGlobalSettingsStore = defineStore('globalSettings', {
        const result = await fetchGlobalSettings()
        this.data = result || {}
        this.initialized = true
+
+        // 检查版本更新
+        if (result.FRONTEND_VERSION) {
+          const { checkVersion } = useVersionChecker()
+          await checkVersion(result.FRONTEND_VERSION)
+        }
      } catch (error) {
        console.error('Failed to initialize global settings', error)
      } finally {
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -74,17 +74,17 @@ html.v-overlay-scroll-blocked body {
 // 路由过渡动画
 .fade-slide-leave-active,
 .fade-slide-enter-active {
-  transition: all 0.6s;
+  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .fade-slide-enter-from {
  opacity: 0;
-  transform: translateY(-45px);
+  transform: translateX(20px);
 }

 .fade-slide-leave-to {
  opacity: 0;
-  transform: translateY(45px);
+  transform: translateX(20px);
 }

 // 网格布局样式
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,5 +1,8 @@
 // PWA Badge API 类型定义
 declare global {
+  const __APP_VERSION__: string
+  const __BUILD_TIME__: string
+
  interface Navigator {
    /**
     * 设置应用徽章数量
--- a/src/views/discover/MediaCardSlideView.vue
+++ b/src/views/discover/MediaCardSlideView.vue
@@ -4,6 +4,7 @@ import type { MediaInfo } from '@/api/types'
 import MediaCard from '@/components/cards/MediaCard.vue'
 import SlideView from '@/components/slide/SlideView.vue'
 import { useI18n } from 'vue-i18n'
+import { useIntersectionObserver, until } from '@vueuse/core'

 const { t } = useI18n()

@@ -12,6 +13,10 @@ const props = defineProps({
  apipath: String,
  linkurl: String,
  title: String,
+  ready: {
+    type: Boolean,
+    default: true,
+  },
 })

 // 提供给子组件的属性
@@ -19,38 +24,71 @@ provide('rankingPropsKey', reactive({ ...props }))

 // 组件加载完成
 const componentLoaded = ref(false)
+// 是否已尝试加载
+const hasTriedLoading = ref(false)

 // 数据列表
 const dataList = ref<MediaInfo[]>([])

+// 容器引用
+const containerRef = ref<HTMLElement | null>(null)
+
 // 获取订阅列表数据
 async function fetchData() {
  try {
    if (!props.apipath) return
    dataList.value = await api.get(props.apipath)
-    if (dataList.value.length > 0) componentLoaded.value = true
+    if (dataList.value.length > 0) {
+      // 数据获取后，等待 ready 信号再渲染，避免阻塞动画
+      await until(() => props.ready).toBe(true)
+    }
+    componentLoaded.value = true
  } catch (error) {
    console.error(error)
+    componentLoaded.value = true
+  } finally {
+    hasTriedLoading.value = true
  }
 }

-// 加载时获取数据
-onMounted(() => {
-  fetchData()
-})
+// 使用 IntersectionObserver 实现懒加载
+const { stop } = useIntersectionObserver(
+  containerRef,
+  ([{ isIntersecting }]) => {
+    if (isIntersecting) {
+      fetchData()
+      stop()
+    }
+  },
+  {
+    rootMargin: '300px', // 提前加载距离
+  },
+)
+
 onActivated(() => {
-  if (dataList.value.length == 0) {
+  if (dataList.value.length == 0 && hasTriedLoading.value) {
    fetchData()
  }
 })
 </script>

 <template>
-  <SlideView v-if="componentLoaded">
-    <template #content>
-      <template v-for="data in dataList" :key="data.tmdb_id || data.douban_id || data.bangumi_id">
-        <MediaCard :media="data" width="9rem" />
+  <div ref="containerRef">
+    <SlideView v-if="componentLoaded">
+      <template #content>
+        <template v-for="data in dataList" :key="data.tmdb_id || data.douban_id || data.bangumi_id">
+          <MediaCard :media="data" width="9rem" />
+        </template>
      </template>
-    </template>
-  </SlideView>
+    </SlideView>
+    <SlideView v-else-if="!componentLoaded">
+      <template #content>
+        <div v-for="i in 10" :key="i" style="width: 9rem">
+          <VCard class="outline-none overflow-hidden">
+            <div style="padding-bottom: 150%"></div>
+          </VCard>
+        </div>
+      </template>
+    </SlideView>
+  </div>
 </template>
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -32,7 +32,7 @@ const { appMode } = usePWA()
 const activeTab = ref('installed')

 // 获取插件标签页
-const pluginTabs = computed(() => getPluginTabs())
+const pluginTabs = computed(() => getPluginTabs(t))

 // 使用动态标签页
 const { registerHeaderTab } = useDynamicHeaderTab()
--- a/src/views/setting/AccountSettingNotification.vue
+++ b/src/views/setting/AccountSettingNotification.vue
@@ -45,7 +45,7 @@ const templateTypes = ref([

 // 编辑器主题
 const { name: themeName, global: globalTheme } = useTheme()
-const savedTheme = ref(localStorage.getItem('theme') ?? themeName)
+const savedTheme = ref(localStorage.getItem('theme') ?? 'auto')
 const currentThemeName = ref(savedTheme.value)
 const editorTheme = computed(() => (currentThemeName.value === 'light' ? 'github' : 'monokai'))

--- a/src/views/user/UserProfileView.vue
+++ b/src/views/user/UserProfileView.vue
@@ -1,16 +1,17 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toastification'
-import QrcodeVue from 'qrcode.vue'
 import { VForm } from 'vuetify/lib/components/index.mjs'
 import api from '@/api'
-import type { User } from '@/api/types'
+import type { User, PassKey } from '@/api/types'
 import avatar1 from '@images/avatars/avatar-1.png'
 import { useDisplay } from 'vuetify'
 import { useUserStore } from '@/stores'
 import { useI18n } from 'vue-i18n'
+import OTPAuthDialog from '@/components/dialog/OTPAuthDialog.vue'
+import PasskeyDialog from '@/components/dialog/PasskeyDialog.vue'

 // 国际化
-const { t } = useI18n()
+const { t, locale } = useI18n()

 // 显示器宽度
 const display = useDisplay()
@@ -34,15 +35,6 @@ const isSaving = ref(false)
 // 开启双重验证窗口
 const otpDialog = ref(false)

-// otp uri
-const otpUri = ref('')
-
-// otp secret
-const secret = ref('')
-
-// 确认双重验证密码
-const otpPassword = ref('')
-
 // 当前头像缓存
 const currentAvatar = ref(avatar1)

@@ -64,8 +56,34 @@ const accountInfo = ref<User>({
  nickname: '',
 })

-// 二维码信息
-const qrCode = ref('')
+// PassKey列表
+const passkeyList = ref<PassKey[]>([])
+
+// PassKey对话框
+const passkeyDialog = ref(false)
+
+// 双重验证菜单
+const mfaMenu = ref(false)
+
+// 密码验证对话框
+const verifyPasswordDialog = ref(false)
+
+// 验证密码
+const verifyPassword = ref('')
+
+// 验证后的回调
+const verifyCallback = ref<((password: string) => void) | null>(null)
+
+// 验证对话框标题
+const verifyTitle = ref('')
+
+// 验证对话框提示
+const verifyText = ref('')
+
+// 检查是否已启用任何双重验证
+const hasMfaEnabled = computed(() => {
+  return accountInfo.value.is_otp || passkeyList.value.length > 0
+})

 // 更新头像
 function changeAvatar(file: Event) {
@@ -116,13 +134,15 @@ async function fetchUserInfo() {
      accountInfo.value.avatar = accountInfo.value.avatar ? accountInfo.value.avatar : avatar1
      currentUserName.value = accountInfo.value.name
      currentAvatar.value = accountInfo.value.avatar
+      // 同时加载PassKey列表
+      await fetchPassKeyList()
    }
  } catch (error) {
    console.log(error)
  }
 }

-// 保存用户信息
+// 保存账户信息
 async function saveAccountInfo() {
  if (isSaving.value) {
    $toast.error(t('profile.savingInProgress'))
@@ -195,56 +215,45 @@ async function saveAccountInfo() {
  isSaving.value = false
 }

-// 为当前用户获取Otp Uri
-async function getOtpUri() {
-  try {
-    const result: { [key: string]: any } = await api.post('user/otp/generate')
-    if (result.success) {
-      otpUri.value = result.data.uri
-      secret.value = result.data.secret
-      qrCode.value = result.data.uri
-      otpDialog.value = true
-    } else {
-      $toast.error(t('profile.otpGenerateFailed', { message: result.message }))
-    }
-  } catch (error) {
-    console.log(error)
-  }
+// 验证密码载荷接口
+interface VerifyPasswordPayload {
+  title: string
+  text: string
+  callback: (password: string) => void
 }

-// 关闭当前用户的双重验证
-async function disableOtp() {
-  try {
-    const result: { [key: string]: any } = await api.post('user/otp/disable')
-    if (result.success) {
-      accountInfo.value.is_otp = false
-      $toast.success(t('profile.otpDisableSuccess'))
-    } else {
-      $toast.error(t('profile.otpDisableFailed', { message: result.message }))
-    }
-  } catch (error) {
-    console.log(error)
-  }
+// 密码验证并执行回调
+function withPasswordVerification(title: string, text: string, callback: (password: string) => void) {
+  verifyTitle.value = title
+  verifyText.value = text
+  verifyCallback.value = callback
+  verifyPassword.value = ''
+  verifyPasswordDialog.value = true
 }

-// 启用Otp
-async function judgeOtpPassword() {
-  if (!otpPassword.value) {
-    $toast.error(t('profile.otpCodeRequired'))
+// 弹窗请求密码验证
+function onVerifyPassword({ title, text, callback }: VerifyPasswordPayload) {
+  withPasswordVerification(title, text, callback)
+}
+
+// 确认密码验证
+async function confirmVerifyPassword() {
+  if (!verifyPassword.value) {
+    $toast.error(t('user.passwordHint'))
    return
  }
-  try {
-    const result: { [key: string]: any } = await api.post('user/otp/judge', {
-      uri: otpUri.value,
-      otpPassword: otpPassword.value,
-    })
+  if (verifyCallback.value) {
+    verifyCallback.value(verifyPassword.value)
+  }
+  verifyPasswordDialog.value = false
+}

+// 获取PassKey列表
+async function fetchPassKeyList() {
+  try {
+    const result: { [key: string]: any } = await api.get('mfa/passkey/list')
    if (result.success) {
-      $toast.success(t('profile.otpEnableSuccess'))
-      otpDialog.value = false
-      accountInfo.value.is_otp = true
-    } else {
-      $toast.error(t('profile.otpEnableFailed', { message: result.message }))
+      passkeyList.value = result.data || []
    }
  } catch (error) {
    console.log(error)
@@ -301,16 +310,52 @@ watch(
                  <span v-if="display.mdAndUp.value" class="ms-2">{{ t('common.default') }}</span>
                </VBtn>

-                <VBtn
-                  :color="accountInfo.is_otp ? 'warning' : 'success'"
-                  variant="tonal"
-                  @click.stop="accountInfo.is_otp ? disableOtp() : getOtpUri()"
-                >
-                  <VIcon icon="mdi-account-key" />
-                  <span v-if="display.mdAndUp.value" class="ms-2">{{
-                    accountInfo.is_otp ? t('profile.disableTwoFactor') : t('profile.enableTwoFactor')
-                  }}</span>
-                </VBtn>
+                <!-- 双重验证菜单按钮 -->
+                <VMenu v-model="mfaMenu" :close-on-content-click="false">
+                  <template #activator="{ props }">
+                    <VBtn :color="hasMfaEnabled ? 'warning' : 'success'" variant="tonal" v-bind="props">
+                      <VIcon icon="mdi-shield-key" />
+                      <span v-if="display.mdAndUp.value" class="ms-2">
+                        {{ hasMfaEnabled ? t('profile.setupMfa') : t('profile.enableMfa') }}
+                      </span>
+                      <VIcon icon="mdi-menu-down" class="ms-1" />
+                    </VBtn>
+                  </template>
+                  <VList>
+                    <VListItem
+                      @click="
+                        () => {
+                          otpDialog = true
+                          mfaMenu = false
+                        }
+                      "
+                    >
+                      <template #prepend>
+                        <VIcon icon="mdi-cellphone-key" />
+                      </template>
+                      <VListItemTitle>{{ t('profile.useAuthenticator') }}</VListItemTitle>
+                      <VListItemSubtitle v-if="accountInfo.is_otp" class="text-success">
+                        {{ t('profile.enabled') }}
+                      </VListItemSubtitle>
+                    </VListItem>
+                    <VListItem
+                      @click="
+                        () => {
+                          passkeyDialog = true
+                          mfaMenu = false
+                        }
+                      "
+                    >
+                      <template #prepend>
+                        <VIcon icon="material-symbols:passkey" />
+                      </template>
+                      <VListItemTitle>{{ t('profile.usePasskey') }}</VListItemTitle>
+                      <VListItemSubtitle v-if="passkeyList.length > 0" class="text-success">
+                        {{ t('profile.keysCount', { count: passkeyList.length }) }}
+                      </VListItemSubtitle>
+                    </VListItem>
+                  </VList>
+                </VMenu>
              </div>

              <p class="text-body-1 mb-0">{{ t('profile.avatarFormatTip') }}</p>
@@ -463,38 +508,43 @@ watch(
    </VRow>

    <!-- 双重验证弹窗 -->
-    <VDialog v-if="otpDialog" v-model="otpDialog" max-width="45rem" scrollable>
-      <!-- 开启双重验证弹窗内容 -->
+    <OTPAuthDialog
+      v-model="otpDialog"
+      v-model:is-otp="accountInfo.is_otp"
+      :passkey-list="passkeyList"
+      @verify-password="onVerifyPassword"
+    />
+
+    <!-- PassKey管理对话框 -->
+    <PasskeyDialog
+      v-model="passkeyDialog"
+      :is-otp="accountInfo.is_otp"
+      v-model:passkey-list="passkeyList"
+      @verify-password="onVerifyPassword"
+    />
+
+    <!-- 密码验证对话框 -->
+    <VDialog v-model="verifyPasswordDialog" max-width="30rem">
      <VCard>
-        <VDialogCloseBtn @click="otpDialog = false" />
+        <VCardTitle class="text-h5 text-center mt-4">{{ verifyTitle }}</VCardTitle>
        <VCardText>
-          <h4 class="text-h4 text-center mb-6 mt-5">{{ t('profile.twoFactorAuthentication') }}</h4>
-          <h5 class="text-h5 font-weight-medium mb-2">{{ t('profile.authenticatorApp') }}</h5>
-          <p class="mb-6">
-            {{ t('profile.authenticatorAppDescription') }}
-          </p>
-          <div class="my-6">
-            <QrcodeVue class="mx-auto" :value="qrCode" :size="200" max-width="25rem" />
-          </div>
-          <VAlert :title="secret" variant="tonal" type="warning" class="my-4" :text="t('profile.secretKeyTip')">
-            <template #prepend />
-          </VAlert>
-          <VForm>
+          <p class="mb-4">{{ verifyText }}</p>
+          <VForm @submit.prevent="confirmVerifyPassword">
            <VTextField
-              v-model="otpPassword"
-              type="text"
-              :label="t('profile.enterVerificationCode')"
-              autocomplete=""
-              class="mb-8"
+              v-model="verifyPassword"
+              :type="isConfirmPasswordVisible ? 'text' : 'password'"
+              :label="t('user.password')"
+              :append-inner-icon="isConfirmPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
              variant="outlined"
-              prepend-inner-icon="mdi-shield-key"
+              prepend-inner-icon="mdi-lock"
+              autocomplete="current-password"
+              @click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
            />
-            <div class="d-flex justify-end flex-wrap gap-4">
-              <VBtn variant="outlined" color="secondary" @click="otpDialog = false"> {{ t('common.cancel') }} </VBtn>
-              <VBtn @click="judgeOtpPassword">
-                <template #prepend>
-                  <VIcon icon="mdi-check" />
-                </template>
+            <div class="d-flex justify-end gap-4 mt-4">
+              <VBtn variant="outlined" color="secondary" @click="verifyPasswordDialog = false">
+                {{ t('common.cancel') }}
+              </VBtn>
+              <VBtn type="submit" color="primary">
                {{ t('common.confirm') }}
              </VBtn>
            </div>