v1.9.17

更新 package.json
2026-05-08 09:12:43 +08:00 · 2024-09-18 17:37:57 +08:00 · 2024-09-08 13:09:25 +08:00 · 2024-09-05 06:59:13 +08:00 · 2024-09-05 06:57:32 +08:00 · 2024-08-16 12:07:18 +08:00
142 changed files with 10400 additions and 8951 deletions
--- a/.env.development
+++ b/.env.development
@@ -1 +1,2 @@
 VITE_API_BASE_URL=http://localhost:3001/api/v1/
+VITE_PUBLIC_VAPID_KEY=BH3w49sZA6jXUnE-yt4jO6VKh73lsdsvwoJ6Hx7fmPIDKoqGiUl2GEoZzy-iJfn4SfQQcx7yQdHf9RknwrL_lSM
--- a/.env.production
+++ b/.env.production
@@ -1 +1,2 @@
 VITE_API_BASE_URL=api/v1/
+VITE_PUBLIC_VAPID_KEY=BH3w49sZA6jXUnE-yt4jO6VKh73lsdsvwoJ6Hx7fmPIDKoqGiUl2GEoZzy-iJfn4SfQQcx7yQdHf9RknwrL_lSM
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -39,6 +39,7 @@ jobs:
        run: |
          yarn
          yarn build
+          echo "$frontend_version" > dist/version.txt
          zip -r dist.zip dist

      - name: Generate Release
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 .DS_Store
 dist
 dist-ssr
+dev-dist
 *.local

 /cypress/videos/
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,9 +6,6 @@
  "[javascript]": {
    "editor.formatOnSave": false
  },
-  "[typescript]": {
-    "editor.formatOnSave": false
-  },
  "[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
  },
@@ -25,7 +22,7 @@
  },
  // Vue
  "[vue]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
  },
  // Extension: Volar
  "volar.preview.port": 3000,
@@ -34,6 +31,10 @@
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  // Extension: Stylelint
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
    DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
    ErrorHeader: typeof import('./src/@core/components/ErrorHeader.vue')['default']
    ExistIcon: typeof import('./src/@core/components/ExistIcon.vue')['default']
+    LoadingBanner: typeof import('./src/@core/components/LoadingBanner.vue')['default']
    MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
--- a/index.html
+++ b/index.html
@@ -15,7 +15,6 @@
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="apple-touch-startup-image" href="/splash/apple-splash.jpg" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-  <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -30,13 +29,14 @@
  <meta name="HandheldFriendly" content="True" />
  <meta name="MobileOptimized" content="320" />
  <link rel="stylesheet" type="text/css" href="/loader.css" />
+  <link rel="preload" href="index.js" as="script">
 </head>

 <body>
  <div id="loading-bg">
    <div class="loading-logo">
      <!-- Logo -->
-      <svg width="100px" height="100px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
+      <svg width="10rem" height="10rem" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
        style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2">
        <g transform="matrix(1,0,0,1,-2606,-236)">
          <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
@@ -159,4 +159,4 @@
  </script>
 </body>

-</html>
+</html>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "moviepilot",
-  "version": "1.8.2",
+  "version": "1.9.17",
  "private": true,
  "bin": "dist/service.js",
  "scripts": {
@@ -19,55 +19,44 @@
    ]
  },
  "dependencies": {
-    "@casl/ability": "^6.2.0",
-    "@casl/vue": "^2.2.0",
-    "@floating-ui/dom": "1.6.3",
-    "@iconify/utils": "^2.1.22",
-    "@vueuse/core": "^10.1.2",
-    "@vueuse/math": "^10.1.2",
-    "ace-builds": "^1.32.6",
-    "apexcharts-clevision": "^3.28.5",
-    "axios": "1.6.8",
-    "axios-mock-adapter": "^1.21.4",
-    "chart.js": "^4.1.2",
-    "colorthief": "^2.4.0",
-    "express": "^4.18.2",
-    "express-http-proxy": "^2.0.0",
-    "jwt-decode": "^4.0.0",
-    "nprogress": "^0.2.0",
-    "postcss-purgecss": "^5.0.0",
-    "prismjs": "^1.29.0",
-    "pull-refresh-vue3": "^0.3.1",
-    "qrcode.vue": "^3.4.1",
-    "roboto-fontface": "^0.10.0",
-    "sass": "^1.59.3",
-    "tailwindcss": "^3.3.2",
-    "unplugin-vue-define-options": "^1.3.5",
-    "vite-plugin-pwa": "^0.19.8",
-    "vue": "^3.3.2",
-    "vue-chartjs": "^5.2.0",
-    "vue-flatpickr-component": "11.0.5",
-    "vue-i18n": "^9.2.2",
-    "vue-prism-component": "^2.0.0",
-    "vue-router": "^4.2.0",
-    "vue-toast-notification": "^3",
-    "vue3-ace-editor": "^2.2.4",
-    "vue3-apexcharts": "^1.4.1",
-    "vue3-perfect-scrollbar": "^2.0.0",
-    "vuetify": "3.5.14",
-    "vuetify-use-dialog": "^0.6.0",
-    "vuex": "^4.1.0",
-    "vuex-persistedstate": "^4.1.0",
-    "webfontloader": "^1.6.28"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config-vue": "^0.43.1",
    "@fullcalendar/core": "^6.1.8",
    "@fullcalendar/daygrid": "^6.1.8",
    "@fullcalendar/interaction": "^6.1.7",
    "@fullcalendar/list": "^6.1.7",
    "@fullcalendar/timegrid": "^6.1.7",
    "@fullcalendar/vue3": "^6.1.8",
+    "@iconify/utils": "^2.1.22",
+    "@vueuse/core": "^10.1.2",
+    "@vueuse/math": "^10.1.2",
+    "ace-builds": "^1.32.6",
+    "apexcharts-clevision": "^3.28.5",
+    "axios": "1.6.8",
+    "colorthief": "^2.4.0",
+    "dayjs": "^1.11.10",
+    "express": "^4.18.2",
+    "express-http-proxy": "^2.0.0",
+    "lodash": "^4.17.21",
+    "mousetrap": "^1.6.5",
+    "nprogress": "^0.2.0",
+    "qrcode.vue": "^3.4.1",
+    "sass": "^1.59.3",
+    "tailwindcss": "^3.3.2",
+    "unplugin-vue-define-options": "^1.3.5",
+    "vue": "^3.3.2",
+    "vue-router": "^4.2.0",
+    "vue-toast-notification": "^3",
+    "vue3-ace-editor": "^2.2.4",
+    "vue3-apexcharts": "^1.4.1",
+    "vue3-perfect-scrollbar": "^2.0.0",
+    "vuedraggable": "^4.1.0",
+    "vuetify": "3.6.8",
+    "vuetify-use-dialog": "^0.6.11",
+    "vuex": "^4.1.0",
+    "vuex-persistedstate": "^4.1.0",
+    "webfontloader": "^1.6.28"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config-vue": "^0.43.1",
    "@iconify-json/mdi": "^1.1.52",
    "@iconify/tools": "^4.0.4",
    "@iconify/vue": "4.1.1",
@@ -81,7 +70,6 @@
    "@vitejs/plugin-vue": "^5.0.4",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "autoprefixer": "^10.4.14",
-    "dayjs": "^1.11.10",
    "eslint": "^9.0.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-import-resolver-typescript": "^3.5.1",
@@ -91,7 +79,6 @@
    "eslint-plugin-sonarjs": "^0.25.1",
    "eslint-plugin-unicorn": "^52.0.0",
    "eslint-plugin-vue": "^9.12.0",
-    "lodash": "^4.17.21",
    "postcss": "8",
    "postcss-html": "^1.5.0",
    "stylelint": "16.3.1",
@@ -104,6 +91,7 @@
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.2.8",
    "vite-plugin-pages": "^0.32.1",
+    "vite-plugin-pwa": "^0.20.0",
    "vite-plugin-vue-layouts": "^0.11.0",
    "vite-plugin-vuetify": "2.0.3",
    "vue-shepherd": "^3.0.0",
--- a/public/loader.css
+++ b/public/loader.css
@@ -3,10 +3,9 @@ body {
 }

 html {
+  overflow: hidden auto;
  background: var(--initial-loader-bg, #fff);
  min-block-size: calc(100% + env(safe-area-inset-top));
-  overflow-x: hidden;
-  overflow-y: auto;
 }

 #loading-bg {
@@ -20,8 +19,8 @@ html {

 .loading-logo {
  position: absolute;
-  inset-block-start: 40%;
-  inset-inline-start: calc(50% - 50px);
+  inset-block-start: 35%;
+  inset-inline-start: calc(50% - 5rem);
 }

 .loading {
@@ -83,4 +82,4 @@ html {
    opacity: 1;
    transform: rotate(1turn);
  }
-}
+}
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,80 +0,0 @@
-{
-  "name": "MoviePilot",
-  "short_name": "MoviePilot",
-  "start_url": "./",
-  "icons": [
-    {
-      "src": "./android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "./android-chrome-192x192_maskable.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "./android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "./android-chrome-512x512_maskable.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ],
-  "theme_color": "#28243D",
-  "background_color": "#28243D",
-  "display": "standalone",
-  "shortcuts": [
-    {
-      "name": "推荐",
-      "url": "./ranking",
-      "icons": [
-        {
-          "src": "./sparkles-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    },
-    {
-      "name": "电影订阅",
-      "url": "./subscribe-movie",
-      "icons": [
-        {
-          "src": "./clock-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    },
-    {
-      "name": "电视剧订阅",
-      "url": "./subscribe-tv",
-      "icons": [
-        {
-          "src": "./clock-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    },
-    {
-      "name": "设置",
-      "url": "./setting",
-      "icons": [
-        {
-          "src": "./cog-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    }
-  ]
-}
--- a/public/nginx.conf
+++ b/public/nginx.conf
@@ -11,6 +11,13 @@ http {

    keepalive_timeout 3600;

+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_proxied any;
+    gzip_min_length 256;
+    gzip_vary on;
+    gzip_comp_level 6;
+
    server {

        include mime.types;
@@ -28,9 +35,16 @@ http {
            try_files $uri $uri/ /index.html;
        }

+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            # 静态资源
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+            root html;
+        }
+
        location /assets {
            # 静态资源
-            expires 7d;
+            expires 1y;
            add_header Cache-Control "public";
            root html;
        }
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
--- a/src/@core/components/DialogCloseBtn.vue
+++ b/src/@core/components/DialogCloseBtn.vue
@@ -1,16 +1,21 @@
 <script lang="ts" setup>
+// 定义输入参数
+const props = defineProps({
+  // 是否显示
+  innerClass: String,
+})
 // 定义触发的自定义事件
-const emit = defineEmits(['click'])
-
+const emit = defineEmits(['click', 'update:modelValue'])
 // 按钮点击
 function onClick() {
+  emit('update:modelValue', false)
  emit('click')
 }
 </script>

 <template>
  <IconBtn
-    class="absolute right-3 top-3"
+    :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3'"
    @click.stop="onClick"
  >
    <VIcon icon="mdi-close" />
--- a/src/@core/components/LoadingBanner.vue
+++ b/src/@core/components/LoadingBanner.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+// 定义输入参数
+const props = defineProps({
+  progress: Number,
+  text: String,
+})
+</script>
+
+<template>
+  <div class="w-full text-center text-gray-500 text-sm flex flex-col items-center">
+    <VProgressCircular v-if="!props.text || !props.progress" class="mb-3" size="64" indeterminate color="primary" />
+    <VProgressCircular v-if="props.progress" class="mb-3" color="primary" :model-value="props.progress" size="64" />
+    <span>{{ props.text }}</span>
+  </div>
+</template>
--- a/src/@core/components/ThemeSwitcher.vue
+++ b/src/@core/components/ThemeSwitcher.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useTheme } from 'vuetify'
+import { useDisplay, useTheme } from 'vuetify'
 import type { ThemeSwitcherTheme } from '@layouts/types'
+import api from '@/api'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
+import { useToast } from 'vue-toast-notification'
+import { VAceEditor } from 'vue3-ace-editor'
+
+// 显示器宽度
+const display = useDisplay()

 const props = defineProps<{
  themes: ThemeSwitcherTheme[]
@@ -11,63 +18,33 @@ const { name: themeName, global: globalTheme } = useTheme()

 const savedTheme = ref(localStorage.getItem('theme') ?? themeName)

-const {
-  state: currentThemeName,
-  next: getNextThemeName,
-  index: currentThemeIndex,
-} = useCycleList(
+const { state: currentThemeName, next: getNextThemeName } = useCycleList(
  props.themes.map(t => t.name),
  { initialValue: savedTheme.value },
 )

-function updateTheme() {
-  const autoTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
-  globalTheme.name.value = theme
-  savedTheme.value = theme
-  // 修改载入时背景色
-  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
-  themeTransition()
-}
+const $toast = useToast()

-// 监听系统主题变化
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+// 自定义CSS弹窗
+const cssDialog = ref(false)

-watch(
-  () => currentThemeName.value,
-  () => updateTheme(),
-)
+// 自定义 CSS
+const customCSS = ref('')

-function changeTheme() {
-  const nextTheme = getNextThemeName()
-  currentThemeName.value = nextTheme
-  localStorage.setItem('theme', nextTheme)
-}
-
-// Apply saved theme on page load
-// onMounted(() => {
-//   globalTheme.name.value = savedTheme.value
-// })
-
-function hasScrollbar(el?: Element | null) {
-  if (!el || el.nodeType !== Node.ELEMENT_NODE)
-    return false
-
-  const style = window.getComputedStyle(el)
-  return style.overflowY === 'scroll' || (style.overflowY === 'auto' && el.scrollHeight > el.clientHeight)
-}
+// 编辑器主题
+const editorTheme = computed(() => (currentThemeName.value === 'light' ? 'github' : 'monokai'))

+// 主题切换动画
 function themeTransition() {
  const x = performance.now()
  for (let i = 0; i++ < 1e7; (i << 9) & ((9 % 9) * 9 + 9));
  const cost = performance.now() - x
-  if (cost > 10)
-    return
+  if (cost > 10) return

  const el: HTMLElement = document.querySelector('[data-v-app]')!
  const children = el.querySelectorAll('*') as NodeListOf<HTMLElement>

-  children.forEach((el) => {
+  children.forEach(el => {
    if (hasScrollbar(el)) {
      el.dataset.scrollX = String(el.scrollLeft)
      el.dataset.scrollY = String(el.scrollTop)
@@ -99,7 +76,7 @@ function themeTransition() {
  })

  document.body.append(copy)
-  ; (copy.querySelectorAll('[data-scroll-x], [data-scroll-y]') as NodeListOf<HTMLElement>).forEach((el) => {
+  ;(copy.querySelectorAll('[data-scroll-x], [data-scroll-y]') as NodeListOf<HTMLElement>).forEach(el => {
    el.scrollLeft = +el.dataset.scrollX!
    el.scrollTop = +el.dataset.scrollY!
  })
@@ -117,12 +94,145 @@ function themeTransition() {
  el.addEventListener('transitionend', onTransitionend)
  el.addEventListener('transitioncancel', onTransitionend)
 }
+
+// 更新主题
+function updateTheme() {
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+  const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
+  globalTheme.name.value = theme
+  savedTheme.value = theme
+  themeTransition()
+  // 保存主题到本地
+  localStorage.setItem('theme', theme)
+  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+}
+
+// 切换主题
+function changeTheme(theme: string) {
+  let nextTheme = theme
+  if (!theme) nextTheme = getNextThemeName()
+  currentThemeName.value = nextTheme
+  // 保存主题到服务端
+  try {
+    api.post('/user/config/theme', nextTheme, {
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+    })
+  } catch (e) {
+    console.error('保存主题到服务端失败')
+  }
+}
+
+// 是否有滚动条
+function hasScrollbar(el?: Element | null) {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
+
+  const style = window.getComputedStyle(el)
+  return style.overflowY === 'scroll' || (style.overflowY === 'auto' && el.scrollHeight > el.clientHeight)
+}
+
+// 监听系统主题变化
+try {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+} catch (e) {
+  console.error('当前设备不支持监听系统主题变化')
+}
+
+// 查询当前主题的图标
+const getThemeIcon = computed(() => {
+  const theme = props.themes.find(t => t.name === currentThemeName.value)
+  return theme?.icon ?? 'mdi-circle'
+})
+
+// 监听设置主题变化
+watch(
+  () => currentThemeName.value,
+  () => updateTheme(),
+)
+
+// 获取自定义 CSS
+async function getCustomCSS() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/UserCustomCSS')
+    if (result && result.success && result.data?.value) {
+      customCSS.value = result.data?.value ?? ''
+      if (customCSS.value) {
+        const style = document.createElement('style')
+        style.innerHTML = result.data?.value ?? ''
+        document.head.appendChild(style)
+      }
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 保存自定义 CSS
+async function saveCustomCSS() {
+  cssDialog.value = false
+  try {
+    const result: { [key: string]: any } = await api.post('system/setting/UserCustomCSS', customCSS.value, {
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+    })
+
+    if (result.success) $toast.success('自定义CSS保存成功！')
+  } catch (e) {
+    console.error('保存自定义 CSS 到服务端失败')
+  }
+}
+
+onMounted(() => {
+  getCustomCSS()
+})
 </script>

 <template>
-  <IconBtn @click="changeTheme">
-    <VIcon :icon="props.themes[currentThemeIndex].icon" />
-  </IconBtn>
+  <VMenu v-if="props.themes">
+    <template v-slot:activator="{ props }">
+      <IconBtn v-bind="props">
+        <VIcon :icon="getThemeIcon" />
+      </IconBtn>
+    </template>
+    <VList>
+      <VListItem v-for="theme in props.themes" :key="theme.name" @click="changeTheme(theme.name)">
+        <template #prepend>
+          <VIcon :icon="theme.icon" />
+        </template>
+        <VListItemTitle>{{ theme.title }}</VListItemTitle>
+      </VListItem>
+      <VListItem @click="cssDialog = true">
+        <template #prepend>
+          <VIcon icon="mdi-palette" />
+        </template>
+        <VListItemTitle>自定义</VListItemTitle>
+      </VListItem>
+    </VList>
+  </VMenu>
+  <!-- 自定义 CSS -- -->
+  <VDialog v-model="cssDialog" persistent max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard title="自定义主题风格">
+      <DialogCloseBtn @click="cssDialog = false" />
+      <VDivider />
+      <VAceEditor
+        v-model:value="customCSS"
+        lang="css"
+        :theme="editorTheme"
+        style="block-size: 100%; min-block-size: 30rem"
+      />
+      <VDivider />
+      <VCardText class="text-center">
+        <VBtn @click="saveCustomCSS" class="w-1/2">
+          <template #prepend>
+            <VIcon icon="mdi-content-save" />
+          </template>
+          保存
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
 </template>

 <style lang="sass">
--- a/src/@core/scss/base/placeholders/_misc.scss
+++ b/src/@core/scss/base/placeholders/_misc.scss
@@ -3,5 +3,5 @@
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* stylelint-enable */
-  background-color: rgb(var(--v-theme-surface), 0.9);
+  background-color: rgb(var(--v-theme-surface), 0.8);
 }
--- a/src/@core/utils/compatibility.ts
+++ b/src/@core/utils/compatibility.ts
@@ -5,14 +5,14 @@
 /**
 * 修复低版本Safari等浏览器数组不支持at函数的问题
 */
-export function fixArrayAt() {
-    if (!Array.prototype.at) {
-        Array.prototype.at = function(index: number) {
-            if (index >= 0) {
-                return this[index]
-            } else {
-                return this[this.length + index]
-            }
-        }
+;(function fixArrayAt() {
+  if (!Array.prototype.at) {
+    Array.prototype.at = function (index: number) {
+      if (index >= 0) {
+        return this[index]
+      } else {
+        return this[this.length + index]
+      }
    }
-}
+  }
+})()
--- a/src/@core/utils/formatters.ts
+++ b/src/@core/utils/formatters.ts
@@ -8,8 +8,7 @@ dayjs.extend(relativeTime)
 dayjs.locale(ZH_CN)

 export function avatarText(value: string) {
-  if (!value)
-    return ''
+  if (!value) return ''
  const nameArray = value.split(' ')

  return nameArray.map(word => word.charAt(0).toUpperCase()).join('')
@@ -19,7 +18,9 @@ export function avatarText(value: string) {
 export function kFormatter(num: number) {
  const regex = /\B(?=(\d{3})+(?!\d))/g

-  return Math.abs(num) > 9999 ? `${Math.sign(num) * +((Math.abs(num) / 1000).toFixed(1))}k` : Math.abs(num).toFixed(0).replace(regex, ',')
+  return Math.abs(num) > 9999
+    ? `${Math.sign(num) * +(Math.abs(num) / 1000).toFixed(1)}k`
+    : Math.abs(num).toFixed(0).replace(regex, ',')
 }

 /**
@@ -29,9 +30,11 @@ export function kFormatter(num: number) {
 * @param {string} value date to format
 * @param {Intl.DateTimeFormatOptions} formatting Intl object to format with
 */
-export function formatDate(value: string, formatting: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' }) {
-  if (!value)
-    return value
+export function formatDate(
+  value: string,
+  formatting: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' },
+) {
+  if (!value) return value

  return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
 }
@@ -46,21 +49,19 @@ export function formatDateToMonthShort(value: string, toTimeForCurrentDay = true
  const date = new Date(value)
  let formatting: Record<string, string> = { month: 'short', day: 'numeric' }

-  if (toTimeForCurrentDay && isToday(date))
-    formatting = { hour: 'numeric', minute: 'numeric' }
+  if (toTimeForCurrentDay && isToday(date)) formatting = { hour: 'numeric', minute: 'numeric' }

  return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
 }

-export const prefixWithPlus = (value: number) => value > 0 ? `+${value}` : value
+export const prefixWithPlus = (value: number) => (value > 0 ? `+${value}` : value)

 // 格式化为Sxx
-export const formatSeason = (value: string) => value ? `S${value.padStart(2, '0')}` : ''
+export const formatSeason = (value: string) => (value ? `S${value.padStart(2, '0')}` : '')

 // 格式化为xx[TGMK]B
 export function formatFileSize(bytes: number) {
-  if (bytes < 0)
-    throw new Error('字节数不能为负数。')
+  if (bytes < 0) throw new Error('字节数不能为负数。')

  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let size = bytes
@@ -82,22 +83,18 @@ export function formatSeconds(seconds: number) {

  let formattedTime = ''

-  if (hours > 0)
-    formattedTime += `${hours}小时`
+  if (hours > 0) formattedTime += `${hours}小时`

-  if (minutes > 0)
-    formattedTime += `${minutes}分`
+  if (minutes > 0) formattedTime += `${minutes}分`

-  if ((remainingSeconds > 0 || formattedTime === '') && hours <= 0)
-    formattedTime += `${remainingSeconds}秒`
+  if ((remainingSeconds > 0 || formattedTime === '') && hours <= 0) formattedTime += `${remainingSeconds}秒`

  return formattedTime
 }

 // YYYY-MM-DD 转化为Date
 export function parseDate(dateString: string): Date | null {
-  if (!dateString)
-    return null
+  if (!dateString) return null
  const [year, month, day] = dateString.split('-').map(Number)

  return new Date(year, month - 1, day)
@@ -105,8 +102,7 @@ export function parseDate(dateString: string): Date | null {

 // 文件大小格式化
 export function formatBytes(bytes: number, decimals = 2) {
-  if (bytes === 0)
-    return '0 bytes'
+  if (bytes === 0) return '0 bytes'

  const k = 1024
  const dm = decimals < 0 ? 0 : decimals
@@ -119,11 +115,9 @@ export function formatBytes(bytes: number, decimals = 2) {

 // 格式化剧集列表
 export function formatEp(nums: number[]): string {
-  if (!nums.length)
-    return ''
+  if (!nums.length) return ''

-  if (nums.length === 1)
-    return nums[0].toString()
+  if (nums.length === 1) return nums[0].toString()

  // 将数组升序排序
  nums.sort((a, b) => a - b)
@@ -134,43 +128,22 @@ export function formatEp(nums: number[]): string {
  for (let i = 1; i < nums.length; i++) {
    if (nums[i] === end + 1) {
      end = nums[i]
-    }
-    else {
-      if (start === end)
-        formattedRanges.push(start.toString())
-
-      else
-        formattedRanges.push(`${start.toString()}-${end.toString()}`)
+    } else {
+      if (start === end) formattedRanges.push(start.toString())
+      else formattedRanges.push(`${start.toString()}-${end.toString()}`)

      start = end = nums[i]
    }
  }

-  if (start === end)
-    formattedRanges.push(start.toString())
-
-  else
-    formattedRanges.push(`${start.toString()}-${end.toString()}`)
+  if (start === end) formattedRanges.push(start.toString())
+  else formattedRanges.push(`${start.toString()}-${end.toString()}`)

  return formattedRanges.join('、')
 }

 // 将yyyy-mm-dd hh:mm:ss转换为时间差，如：1小时前，1天前
 export function formatDateDifference(dateString: string): string {
-  // const timeDifference = dayjs().millisecond() - dayjs(dateString).millisecond()
-  // const secondsDifference = Math.floor(timeDifference / 1000)
-  // const minutesDifference = Math.floor(secondsDifference / 60)
-  // const hoursDifference = Math.floor(minutesDifference / 60)
-  // const daysDifference = Math.floor(hoursDifference / 24)
-
-  // if (daysDifference > 0)
-  //   return `${daysDifference}天前`
-  // else if (hoursDifference > 0)
-  //   return `${hoursDifference}小时前`
-  // else if (minutesDifference > 0)
-  //   return `${minutesDifference}分钟前`
-  // else
-  //   return '刚刚'
-
+  if (!dateString) return ''
  return dayjs(dateString).fromNow()
 }
--- a/src/@core/utils/index.ts
+++ b/src/@core/utils/index.ts
@@ -1,7 +1,6 @@
 // 👉 IsEmpty
 export function isEmpty(value: unknown): boolean {
-  if (value === null || value === undefined || value === '')
-    return true
+  if (value === null || value === undefined || value === '') return true

  return !!(Array.isArray(value) && value.length === 0)
 }
@@ -33,69 +32,6 @@ export function isToday(date: Date) {
  )
 }

-// 计算时间差，返回xx天/xx小时/xx分钟/xx秒
-export function calculateTimeDifference(inputTime: string): string {
-  if (!inputTime)
-    return ''
-
-  const inputDate = new Date(inputTime)
-  const currentDate = new Date()
-
-  const timeDifference = currentDate.getTime() - inputDate.getTime()
-  const secondsDifference = Math.floor(timeDifference / 1000)
-
-  if (secondsDifference < 60) {
-    return `${secondsDifference}秒`
-  }
-  else if (secondsDifference < 3600) {
-    const minutes = Math.floor(secondsDifference / 60)
-
-    return `${minutes}分钟`
-  }
-  else if (secondsDifference < 86400) {
-    const hours = Math.floor(secondsDifference / 3600)
-
-    return `${hours}小时`
-  }
-  else {
-    const days = Math.floor(secondsDifference / 86400)
-
-    return `${days}天`
-  }
-}
-
-// 计算时间差，返回xx天xx小时xx分钟
-export function calculateTimeDiff(inputTime: string): string {
-  if (!inputTime)
-    return ''
-
-  // 使用当前时区
-  const inputDate = new Date(inputTime)
-  const currentDate = new Date()
-
-  const timeDifference = currentDate.getTime() - inputDate.getTime()
-  const secondsDifference = Math.floor(timeDifference / 1000)
-
-  const days = Math.floor(secondsDifference / 86400)
-  const hours = Math.floor(secondsDifference % 86400 / 3600)
-  const minutes = Math.floor(secondsDifference % 86400 % 3600 / 60)
-  const secones = Math.floor(secondsDifference % 60)
-
-  if (days > 0)
-    return `${days}天${hours}小时${minutes}分钟`
-
-  else if (hours > 0)
-    return `${hours}小时${minutes}分钟`
-
-  else if (minutes > 0)
-    return `${minutes}分钟`
-
-  else if (secones > 0)
-    return `${secones}秒`
-
-  return ''
-}
-
 // 判断一个数组subArray是不是在另一个数组mainArray中
 export function isContained(subArray: any[], mainArray: any[]): boolean {
  return subArray.every(element => mainArray.includes(element))
@@ -108,9 +44,24 @@ export function isIntersected(array1: any[], array2: any[]): boolean {

 export function isNullOrEmptyObject(obj: any): boolean {
  // 首先判断是否为 null 或 undefined
-  if (obj === null || obj === undefined)
-    return true
+  if (obj === null || obj === undefined) return true

  // 然后判断是否为空对象
  return !!(typeof obj === 'object' && Object.keys(obj).length === 0)
 }
+
+// 判断系统配置色是否是黑暗的
+export function checkPrefersColorSchemeIsDark(): boolean {
+  try {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  } catch (e) {
+    return false
+  }
+}
+
+// 从URL中获取参数值
+export function getQueryValue(key: string, url = window.location.href): string {
+  const reg = new RegExp(`[?&]${key}=([^&#]*)`, 'i')
+  const res = reg.exec(url)
+  return res ? res[1] : ''
+}
--- a/src/@core/utils/navigator.ts
+++ b/src/@core/utils/navigator.ts
@@ -28,3 +28,17 @@ export async function copyToClipboard(content: string) {
    document.body.removeChild(input)
  }
 }
+
+// VAPID公钥转Uint8Array
+export function urlBase64ToUint8Array(base64String: string) {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
+
+  const rawData = window.atob(base64)
+  const outputArray = new Uint8Array(rawData.length)
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i)
+  }
+  return outputArray
+}
--- a/src/@layouts/components/VerticalNavLink.vue
+++ b/src/@layouts/components/VerticalNavLink.vue
@@ -33,7 +33,10 @@ defineProps<{
  .nav-link a {
    display: flex;
    align-items: center;
+    border-radius: 0 3.125rem 3.125rem 0 !important;
    cursor: pointer;
+    margin-inline-end: 1.125em;
+    padding-inline: 1.375rem 1rem;
  }
 }
 </style>
--- a/src/@layouts/components/VerticalNavSectionTitle.vue
+++ b/src/@layouts/components/VerticalNavSectionTitle.vue
@@ -18,3 +18,12 @@ defineProps<{
    </div>
  </li>
 </template>
+
+<style lang="scss">
+.layout-vertical-nav {
+  .nav-section-title {
+    padding-left: 1.375rem;
+    padding-right: 1rem;
+  }
+}
+</style>
--- a/src/@layouts/types.d.ts
+++ b/src/@layouts/types.d.ts
@@ -6,19 +6,19 @@ export interface UserConfig {
  app: {
    title: Lowercase<string>
    logo: VNode
-    contentWidth: typeof ContentWidth[keyof typeof ContentWidth]
-    contentLayoutNav: typeof AppContentLayoutNav[keyof typeof AppContentLayoutNav]
+    contentWidth: (typeof ContentWidth)[keyof typeof ContentWidth]
+    contentLayoutNav: (typeof AppContentLayoutNav)[keyof typeof AppContentLayoutNav]
    overlayNavFromBreakpoint: number
    enableI18n: boolean
    isRtl: boolean
    iconRenderer?: Component
  }
  navbar: {
-    type: typeof NavbarType[keyof typeof NavbarType]
+    type: (typeof NavbarType)[keyof typeof NavbarType]
    navbarBlur: boolean
  }
  footer: {
-    type:typeof FooterType[keyof typeof FooterType]
+    type: (typeof FooterType)[keyof typeof FooterType]
  }
  verticalNav: {
    isVerticalNavCollapsed: boolean
@@ -120,6 +120,12 @@ export interface NavLink extends NavLinkProps, Partial<AclProperties> {
  disable?: boolean
 }

+export interface NavMenu extends NavLink {
+  header: string
+  admin: boolean
+  description?: string
+}
+
 // 👉 Vertical nav group
 export interface NavGroup extends Partial<AclProperties> {
  title: string
@@ -143,7 +149,7 @@ interface I18nLanguage {
 // avatar | text | icon
 // Thanks: https://stackoverflow.com/a/60617060/10796681
 type Notification = {
-  id:number
+  id: number
  title: string
  subtitle: string
  time: string
@@ -157,5 +163,6 @@ type Notification = {

 interface ThemeSwitcherTheme {
  name: string
+  title: string
  icon: string
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,50 +1,49 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
 import { useTheme } from 'vuetify'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'

-import store from './store'
+const { global: globalTheme } = useTheme()

-import { fixArrayAt } from '@/@core/utils/compatibility'
-
-// 修复低版本Safari等浏览器数组不支持at函数的问题
-fixArrayAt()
-
-// 提示框
-const $toast = useToast()
-
-// 设置主题
-function setTheme() {
-  const { global: globalTheme } = useTheme()
-  let theme = localStorage.getItem('theme') || 'light'
-  if (theme === 'auto')
-    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  globalTheme.name.value = theme
+// 生效主题
+async function setTheme() {
+  let themeValue = localStorage.getItem('theme') || 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+  globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
 }

-// SSE持续接收消息
-function startSSEMessager() {
-  const token = store.state.auth.token
-  if (token) {
-    const eventSource = new EventSource(
-      `${import.meta.env.VITE_API_BASE_URL}system/message?token=${token}`,
-    )
+// ApexCharts 全局配置
+declare global {
+  interface Window {
+    Apex: any
+  }
+}

-    eventSource.addEventListener('message', (event) => {
-      const message = event.data
-      if (message)
-        $toast.info(message)
-    })
-
-    onBeforeUnmount(() => {
-      eventSource.close()
-    })
+if (window.Apex) {
+  // 数据标签
+  window.Apex.dataLabels = {
+    formatter: function (_: number, { seriesIndex, w }: { seriesIndex: number; w: any }) {
+      // 如果有小数点，保留两位小数，否则保留整数
+      const data = w.config.series[seriesIndex]
+      return data.toFixed(data % 1 === 0 ? 0 : 1)
+    },
+  }
+  // 图例
+  window.Apex.legend = {
+    labels: {
+      useSeriesColors: true,
+    },
+  }
+  // 标题
+  window.Apex.title = {
+    style: {
+      color: 'rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))',
+    },
  }
 }

 // 页面加载时，加载当前用户数据
 onBeforeMount(async () => {
  setTheme()
-  startSSEMessager()
 })
 </script>

--- a/src/ace-config.ts
+++ b/src/ace-config.ts
@@ -8,6 +8,10 @@ import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url'

 import modeYamlUrl from 'ace-builds/src-noconflict/mode-yaml?url'

+import modeCssUrl from 'ace-builds/src-noconflict/mode-css?url'
+
+import modePythonUrl from 'ace-builds/src-noconflict/mode-python?url'
+
 import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url'

 import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url'
@@ -24,6 +28,8 @@ import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url'

 import workerYamlUrl from 'ace-builds/src-noconflict/worker-yaml?url'

+import workerCssUrl from 'ace-builds/src-noconflict/worker-css?url'
+
 import snippetsHtmlUrl from 'ace-builds/src-noconflict/snippets/html?url'

 import snippetsJsUrl from 'ace-builds/src-noconflict/snippets/javascript?url'
@@ -32,12 +38,18 @@ import snippetsYamlUrl from 'ace-builds/src-noconflict/snippets/yaml?url'

 import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url'

+import snippertsCssUrl from 'ace-builds/src-noconflict/snippets/css?url'
+
+import snippetsPythonUrl from 'ace-builds/src-noconflict/snippets/python?url'
+
 import 'ace-builds/src-noconflict/ext-language_tools'

 ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
 ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
 ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl)
 ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl)
+ace.config.setModuleUrl('ace/mode/css', modeCssUrl)
+ace.config.setModuleUrl('ace/mode/python', modePythonUrl)
 ace.config.setModuleUrl('ace/theme/github', themeGithubUrl)
 ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl)
 ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl)
@@ -46,9 +58,12 @@ ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl)
 ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl)
 ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl)
 ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl)
+ace.config.setModuleUrl('ace/mode/css_worker', workerCssUrl)
 ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl)
 ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl)
 ace.config.setModuleUrl('ace/snippets/javascript', snippetsYamlUrl)
 ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl)
+ace.config.setModuleUrl('ace/snippets/css', snippertsCssUrl)
+ace.config.setModuleUrl('ace/snippets/python', snippetsPythonUrl)

 ace.require('ace/ext/language_tools')
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -8,32 +8,32 @@ const api = axios.create({
 })

 // 添加请求拦截器
-api.interceptors.request.use((config) => {
+api.interceptors.request.use(config => {
  // 在请求头中添加token
  const token = store.state.auth.token
-  if (token)
-    config.headers.Authorization = `Bearer ${token}`
+  if (token) config.headers.Authorization = `Bearer ${token}`

  return config
 })

 // 添加响应拦截器
-api.interceptors.response.use((response) => {
-  return response.data
-}, (error) => {
-  if (!error.response) {
-    // 请求超时
+api.interceptors.response.use(
+  response => {
+    return response.data
+  },
+  error => {
+    if (!error.response) {
+      // 请求超时
+      return Promise.reject(new Error(error))
+    } else if (error.response.status === 403) {
+      // 清除登录状态信息
+      store.dispatch('auth/logout')
+      // token验证失败，跳转到登录页面
+      router.push('/login')
+    }
+
    return Promise.reject(error)
-  }
-  else if (error.response.status === 403) {
-    // 清除登录状态信息
-    store.dispatch('auth/clearToken')
-
-    // token验证失败，跳转到登录页面
-    router.push('/login')
-  }
-
-  return Promise.reject(error)
-})
+  },
+)

 export default api
--- a/src/api/types.ts
+++ b/src/api/types.ts
--- a/src/assets/images/logos/bangumi.png
+++ b/src/assets/images/logos/bangumi.png
--- a/src/assets/images/logos/douban-black.png
+++ b/src/assets/images/logos/douban-black.png
--- a/src/assets/images/no-data.svg
+++ b/src/assets/images/no-data.svg
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -1,20 +1,28 @@
 <script lang="ts" setup>
 import type { Axios } from 'axios'
-import axios from 'axios'
-import List from './filebrowser/List.vue'
-
-import Toolbar from './filebrowser/Toolbar.vue'
-import type { EndPoints } from '@/api/types'
+import FileList from './filebrowser/FileList.vue'
+import FileToolbar from './filebrowser/FileToolbar.vue'
+import type { EndPoints, FileItem } from '@/api/types'
+import api from '@/api'
+import AliyunAuthDialog from './dialog/AliyunAuthDialog.vue'
+import U115AuthDialog from './dialog/U115AuthDialog.vue'
+import { isNullOrEmptyObject } from '@/@core/utils'

 // 输入参数
 const props = defineProps({
  storages: String,
-  storage: String,
-  path: String,
  tree: Boolean,
  endpoints: Object as PropType<EndPoints>,
-  axios: Object as PropType<Axios>,
+  axios: {
+    type: Object as PropType<Axios>,
+    required: true,
+  },
  axiosconfig: Object,
+  item: {
+    type: Object as PropType<FileItem>,
+    required: true,
+  },
+  itemstack: Array as PropType<FileItem[]>,
 })

 // 对外事件
@@ -26,6 +34,16 @@ const availableStorages = [
    code: 'local',
    icon: 'mdi-folder-multiple-outline',
  },
+  {
+    name: '阿里云盘',
+    code: 'aliyun',
+    icon: 'mdi-cloud-outline',
+  },
+  {
+    name: '115网盘',
+    code: 'u115',
+    icon: 'mdi-cloud-outline',
+  },
 ]

 const fileIcons = {
@@ -58,8 +76,14 @@ const activeStorage = ref('local')
 const refreshPending = ref(false)
 // 排序
 const sort = ref('name')
-// axios实例
-const axiosInstance = ref<Axios>()
+// 阿里云盘认证对话框
+const aliyunAuthDialog = ref(false)
+// 阿里云盘用户信息
+const aliyunUserInfo = ref<{ [key: string]: any }>({})
+// 115网盘认证对话框
+const u115AuthDialog = ref(false)
+// 115网盘用户信息
+const u115UserInfo = ref<{ [key: string]: any }>({})

 // 计算属性
 const storagesArray = computed(() => {
@@ -69,19 +93,56 @@ const storagesArray = computed(() => {

 // 方法
 function loadingChanged(loading: number) {
-  if (loading)
-    loading++
-  else if (loading > 0)
-    loading--
+  if (loading) loading++
+  else if (loading > 0) loading--
 }

-function storageChanged(storage: string) {
+// 查询阿里云
+async function loadAliyunUserInfo() {
+  try {
+    const result: { [key: string]: any } = await api.get('aliyun/userinfo')
+    if (result.success) {
+      aliyunUserInfo.value = result
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 查询115
+async function loadU115UserInfo() {
+  try {
+    const result: { [key: string]: any } = await api.get('u115/storage')
+    if (result.success) {
+      u115UserInfo.value = result
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 存储切换
+async function storageChanged(storage: string) {
+  if (storage == 'aliyun') {
+    await loadAliyunUserInfo()
+    if (isNullOrEmptyObject(aliyunUserInfo.value)) {
+      aliyunAuthDialog.value = true
+      return
+    }
+  } else if (storage == 'u115') {
+    await loadU115UserInfo()
+    if (isNullOrEmptyObject(u115UserInfo.value)) {
+      u115AuthDialog.value = true
+      return
+    }
+  }
  activeStorage.value = storage
+  emit('pathchanged', { path: '/', fileid: 'root' })
 }

 // 路径变化
-function pathChanged(_path: string) {
-  emit('pathchanged', _path)
+function pathChanged(item: FileItem) {
+  emit('pathchanged', item)
 }

 // 排序变化
@@ -90,33 +151,40 @@ function sortChanged(s: string) {
  refreshPending.value = true
 }

-// 初始化
-onMounted(() => {
-  activeStorage.value = props.storage ?? 'local'
-  axiosInstance.value = props.axios ?? axios.create(props.axiosconfig)
-})
+// aliyun认证完成
+function aliyunAuthDone() {
+  aliyunAuthDialog.value = false
+  activeStorage.value = 'aliyun'
+}
+
+// u115认证完成
+function u115AuthDone() {
+  u115AuthDialog.value = false
+  activeStorage.value = 'u115'
+}
 </script>

 <template>
-  <VCard class="mx-auto" :loading="loading > 0 || !path">
-    <div v-if="path">
-      <Toolbar
-        :path="path"
+  <VCard class="mx-auto" :loading="loading > 0">
+    <div v-if="activeStorage && item">
+      <FileToolbar
+        :item="item"
+        :itemstack="itemstack"
        :storages="storagesArray"
        :storage="activeStorage"
        :endpoints="endpoints"
-        :axios="axiosInstance"
+        :axios="axios"
        @storagechanged="storageChanged"
        @pathchanged="pathChanged"
        @foldercreated="refreshPending = true"
        @sortchanged="sortChanged"
      />
-      <List
-        :path="path"
+      <FileList
+        :item="item"
        :storage="activeStorage"
        :icons="fileIcons"
        :endpoints="endpoints"
-        :axios="axiosInstance"
+        :axios="axios"
        :refreshpending="refreshPending"
        :sort="sort"
        @pathchanged="pathChanged"
@@ -127,4 +195,11 @@ onMounted(() => {
      />
    </div>
  </VCard>
+  <AliyunAuthDialog
+    v-if="aliyunAuthDialog"
+    v-model="aliyunAuthDialog"
+    @close="aliyunAuthDialog = false"
+    @done="aliyunAuthDone"
+  />
+  <U115AuthDialog v-if="u115AuthDialog" v-model="u115AuthDialog" @close="u115AuthDialog = false" @done="u115AuthDone" />
 </template>
--- a/src/components/NoDataFound.vue
+++ b/src/components/NoDataFound.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import image from '@images/misc/teamwork.png'
+import image from '@images/no-data.svg'

 const props = defineProps<Props>()

@@ -11,10 +11,7 @@ interface Props {
 </script>

 <template>
-  <VEmptyState
-    :image="image"
-    size="250"
-  >
+  <VEmptyState :image="image" size="250">
    <template #title>
      <div class="mt-8 text-2xl">
        {{ props.errorTitle }}
@@ -22,7 +19,7 @@ interface Props {
    </template>

    <template #text>
-      <div class="text-subtitle">
+      <div class="text-subtitle mt-3">
        {{ props.errorDescription }}
      </div>
    </template>
--- a/src/components/cards/BackdropCard.vue
+++ b/src/components/cards/BackdropCard.vue
@@ -18,23 +18,18 @@ function imageLoadHandler() {

 // 跳转播放
 function goPlay() {
-  if (props.media?.link)
-    window.open(props.media?.link, '_blank')
+  if (props.media?.link) window.open(props.media?.link, '_blank')
 }

 // 计算图片地址
 const getImgUrl = computed(() => {
  const image = props.media?.image || ''
-  return `${import.meta.env.VITE_API_BASE_URL}system/img/0/${encodeURIComponent(image).replace(/%2F/g, '/')}`
+  return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
 })
 </script>

 <template>
-  <VHover
-    v-bind="props"
-    :height="props.height"
-    :width="props.width"
-  >
+  <VHover v-bind="props">
    <template #default="hover">
      <VCard
        v-bind="hover.props"
@@ -48,12 +43,7 @@ const getImgUrl = computed(() => {
        @click="goPlay"
      >
        <template #image>
-          <VImg
-            :src="getImgUrl"
-            aspect-ratio="2/3"
-            cover
-            @load="imageLoadHandler"
-          >
+          <VImg :src="getImgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler">
            <template #placeholder>
              <div class="w-full h-full">
                <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
@@ -62,7 +52,9 @@ const getImgUrl = computed(() => {
            <VCardText
              class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
            >
-              <h1 class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+              <h1
+                class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ..."
+              >
                {{ props.media?.title }}
              </h1>
              <span class="text-shadow">{{ props.media?.subtitle }}</span>
@@ -83,7 +75,7 @@ const getImgUrl = computed(() => {
 </template>

 <style lang="scss">
-.text-shadow{
-  text-shadow:1px 1px #777;
+.text-shadow {
+  text-shadow: 1px 1px #777;
 }
 </style>
--- a/src/components/cards/BangumiPersonCard.vue
+++ b/src/components/cards/BangumiPersonCard.vue
@@ -1,95 +0,0 @@
-<script lang="ts" setup>
-import personIcon from '@images/misc/person-icon.png'
-import type { BangumiPerson } from '@/api/types'
-
-const personProps = defineProps({
-  person: Object as PropType<BangumiPerson>,
-  width: String,
-  height: String,
-})
-
-// 当前人物
-const personInfo = ref(personProps.person)
-
-// 人物图片是否加载
-const isImageLoaded = ref(false)
-
-// 人物图片地址
-function getPersonImage() {
-  if (!personInfo.value?.images)
-    return personIcon
-  return personInfo.value?.images?.medium
-}
-
-// 使用、拼装人物角色
-function getPersonCharacter() {
-  if (!personInfo.value?.career)
-    return ''
-  return personInfo.value?.career.join('、')
-}
-
-// 打开人物详情
-function goPersonDetail() {
-  if (!personInfo.value?.id)
-    return
-  window.open(`https://bangumi.tv/person/${personInfo.value?.id}`, '_blank')
-}
-</script>
-
-<template>
-  <VHover>
-    <template #default="hover">
-      <VCard
-        v-bind="hover.props"
-        :height="personProps.height"
-        :width="personProps.width"
-        class="rounded-lg"
-        :class="{
-          'transition transform-cpu duration-300 scale-105': hover.isHovering,
-        }"
-        @click.stop="goPersonDetail"
-      >
-        <div
-          class="person-card relative transform-gpu cursor-pointer rounded shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
-        >
-          <div style="padding-bottom: 150%;">
-            <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
-              <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
-                <VAvatar
-                  size="120"
-                  :class="{
-                    'ring-1 ring-gray-700': isImageLoaded,
-                  }"
-                >
-                  <VImg
-                    v-img
-                    :src="getPersonImage()"
-                    cover
-                    @load="isImageLoaded = true"
-                  />
-                </VAvatar>
-              </div>
-              <div class="w-full truncate text-center font-bold">
-                {{ personInfo?.name }}
-              </div>
-              <div class="overflow-hidden whitespace-normal text-center text-sm" style=" display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
-                {{ getPersonCharacter() }}
-              </div>
-              <div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" />
-            </div>
-          </div>
-        </div>
-      </VCard>
-    </template>
-  </VHover>
-</template>
-
-<style lang="scss">
-.person-card {
-  background-image: linear-gradient(45deg, rgb(var(--v-theme-background)), rgb(var(--v-theme-surface)) 60%);
-}
-
-.person-card:hover {
-  background-image: linear-gradient(45deg, rgb(var(--v-theme-background)), rgb(var(--v-custom-background)) 60%);
-}
-</style>
--- a/src/components/cards/CardStatisticsHorizontal.vue
+++ b/src/components/cards/CardStatisticsHorizontal.vue
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { kFormatter } from '@core/utils/formatters'
-
-interface Props {
-  title: string
-  color?: string
-  icon: string
-  stats: number
-  change: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: 'primary',
-})
-
-const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
-</script>
-
-<template>
-  <VCard>
-    <VCardText class="d-flex align-center">
-      <VAvatar
-        size="44"
-        rounded
-        :color="props.color"
-        variant="tonal"
-        class="me-4"
-      >
-        <VIcon
-          :icon="props.icon"
-          size="30"
-        />
-      </VAvatar>
-
-      <div>
-        <span class="text-caption">{{ props.title }}</span>
-        <div class="d-flex align-center flex-wrap">
-          <span class="text-h6 font-weight-semibold">{{ kFormatter(props.stats) }}</span>
-          <div
-            v-if="props.change"
-            :class="`${isPositive ? 'text-success' : 'text-error'} mt-1`"
-          >
-            <VIcon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
-            <span class="text-caption font-weight-semibold">{{ Math.abs(props.change) }}%</span>
-          </div>
-        </div>
-      </div>
-    </VCardText>
-  </VCard>
-</template>
--- a/src/components/cards/CardStatisticsVertical.vue
+++ b/src/components/cards/CardStatisticsVertical.vue
@@ -1,56 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title: string
-  color?: string
-  icon: string
-  stats: string
-  change: number
-  subtitle: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: 'primary',
-})
-
-const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
-</script>
-
-<template>
-  <VCard>
-    <VCardText class="d-flex align-center">
-      <VAvatar
-        v-if="props.icon"
-        size="38"
-        :color="props.color"
-      >
-        <VIcon
-          :icon="props.icon"
-          size="24"
-        />
-      </VAvatar>
-
-      <VSpacer />
-
-      <MoreBtn class="me-n3 mt-n1" />
-    </VCardText>
-
-    <VCardText>
-      <h6 class="text-sm font-weight-semibold mb-2">
-        {{ props.title }}
-      </h6>
-      <div
-        v-if="props.change"
-        class="d-flex align-center mb-2"
-      >
-        <span class="font-weight-semibold text-h5 me-2">{{ props.stats }}</span>
-        <span
-          :class="isPositive ? 'text-success' : 'text-error'"
-          class="text-caption"
-        >
-          {{ isPositive ? `+${props.change}` : props.change }}%
-        </span>
-      </div>
-      <span class="text-caption">{{ props.subtitle }}</span>
-    </VCardText>
-  </VCard>
-</template>
--- a/src/components/cards/CardStatisticsWithImages.vue
+++ b/src/components/cards/CardStatisticsWithImages.vue
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title: string
-  subtitle: string
-  stats: string
-  change: number
-  image: string
-  color?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: 'primary',
-})
-
-const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
-</script>
-
-<template>
-  <VCard class="overflow-visible">
-    <div class="d-flex position-relative">
-      <VCardText>
-        <h6 class="text-base font-weight-semibold mb-4">
-          {{ props.title }}
-        </h6>
-        <div class="d-flex align-center flex-wrap mb-4">
-          <h5 class="text-h5 font-weight-semibold me-2">
-            {{ props.stats }}
-          </h5>
-          <span
-            class="text-caption"
-            :class="isPositive ? 'text-success' : 'text-error'"
-          >
-            {{ isPositive ? `+${props.change}` : props.change }}%
-          </span>
-        </div>
-
-        <VChip
-          v-if="props.subtitle"
-          size="small"
-          :color="props.color"
-        >
-          {{ props.subtitle }}
-        </VChip>
-      </VCardText>
-
-      <VSpacer />
-
-      <div class="illustrator-img">
-        <VImg
-          v-if="props.image"
-          :src="props.image"
-          :width="110"
-        />
-      </div>
-    </div>
-  </VCard>
-</template>
-
-<style lang="scss">
-.illustrator-img {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-end: 5%;
-}
-</style>
--- a/src/components/cards/DirectoryCard.vue
+++ b/src/components/cards/DirectoryCard.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { MediaDirectory } from '@/api/types'
+import { VTextField } from 'vuetify/lib/components/index.mjs'
+
+// 输入参数
+const props = defineProps({
+  type: String, // download/library
+  directory: {
+    type: Object as PropType<MediaDirectory>,
+    required: true, // 必填参数
+  },
+  categories: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+  width: String,
+  height: String,
+})
+
+// 路径
+const path = ref<string>('')
+
+// 类型下拉字典
+const typeItems = [
+  { title: '全部', value: '' },
+  { title: '电影', value: '电影' },
+  { title: '电视剧', value: '电视剧' },
+]
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'changed', 'update:modelValue'])
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+
+// 路径更新
+function updatePath(value: string) {
+  path.value = value
+  emit('update:modelValue', value)
+}
+
+// 根据选中的媒体类型，获取对应的媒体类别
+const getCategories = computed(() => {
+  const default_value = [{ title: '全部', value: '' }]
+  if (!props.categories || !props.categories[props.directory?.media_type ?? '']) return default_value
+  return default_value.concat(props.categories[props.directory.media_type ?? ''])
+})
+</script>
+
+<template>
+  <VCard variant="tonal" :width="props.width" :height="props.height">
+    <DialogCloseBtn @click="onClose" />
+    <VCardItem>
+      <VTextField
+        v-model="props.directory.name"
+        variant="underlined"
+        label="别名"
+        class="me-20 text-high-emphasis font-weight-bold"
+      />
+      <span class="absolute top-3 right-12">
+        <IconBtn>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+    </VCardItem>
+    <VCardText>
+      <VForm>
+        <VRow>
+          <VCol>
+            <VPathField @update:modelValue="updatePath">
+              <template #activator="{ menuprops }">
+                <VTextField v-model="props.directory.path" v-bind="menuprops" variant="underlined" label="路径" />
+              </template>
+            </VPathField>
+          </VCol>
+        </VRow>
+        <VRow>
+          <VCol cols="4">
+            <VSelect
+              v-model="props.directory.media_type"
+              variant="underlined"
+              :items="typeItems"
+              label="媒体类型"
+              @update:modelValue="props.directory.category = ''"
+            />
+          </VCol>
+          <VCol>
+            <VSelect v-model="props.directory.category" variant="underlined" :items="getCategories" label="媒体类别" />
+          </VCol>
+        </VRow>
+        <VRow>
+          <VCol v-if="!props.directory.category || props.directory.category === ''">
+            <VSwitch v-model="props.directory.auto_category" label="自动分类"></VSwitch>
+          </VCol>
+          <VCol v-if="type === 'library'">
+            <VSwitch v-model="props.directory.scrape" label="刮削元数据"></VSwitch>
+          </VCol>
+        </VRow>
+      </VForm>
+    </VCardText>
+  </VCard>
+</template>
--- a/src/components/cards/DoubanPersonCard.vue
+++ b/src/components/cards/DoubanPersonCard.vue
@@ -1,88 +0,0 @@
-<script lang="ts" setup>
-import personIcon from '@images/misc/person-icon.png'
-import type { DoubanPerson } from '@/api/types'
-
-const personProps = defineProps({
-  person: Object as PropType<DoubanPerson>,
-  width: String,
-  height: String,
-})
-
-// 当前人物
-const personInfo = ref(personProps.person)
-
-// 人物图片是否加载
-const isImageLoaded = ref(false)
-
-// 人物图片地址
-function getPersonImage() {
-  if (!personInfo.value?.avatar)
-    return personIcon
-  return personInfo.value?.avatar?.large
-}
-
-// 打开人物详情
-function goPersonDetail() {
-  if (!personInfo.value?.id)
-    return
-  window.open(`https://movie.douban.com/celebrity/${personInfo.value?.id}/`, '_blank')
-}
-</script>
-
-<template>
-  <VHover>
-    <template #default="hover">
-      <VCard
-        v-bind="hover.props"
-        :height="personProps.height"
-        :width="personProps.width"
-        class="rounded-lg"
-        :class="{
-          'transition transform-cpu duration-300 scale-105': hover.isHovering,
-        }"
-        @click.stop="goPersonDetail"
-      >
-        <div
-          class="person-card relative transform-gpu cursor-pointer rounded shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
-        >
-          <div style="padding-bottom: 150%;">
-            <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
-              <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
-                <VAvatar
-                  size="120"
-                  :class="{
-                    'ring-1 ring-gray-700': isImageLoaded,
-                  }"
-                >
-                  <VImg
-                    v-img
-                    :src="getPersonImage()"
-                    cover
-                    @load="isImageLoaded = true"
-                  />
-                </VAvatar>
-              </div>
-              <div class="w-full truncate text-center font-bold">
-                {{ personInfo?.name }}
-              </div>
-              <div class="overflow-hidden whitespace-normal text-center text-sm" style=" display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
-                {{ personInfo?.character }}
-              </div>
-              <div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" />
-            </div>
-          </div>
-        </div>
-      </VCard>
-    </template>
-  </VHover>
-</template>
-
-<style lang="scss">
-.person-card {
-  background-image: linear-gradient(45deg, rgb(var(--v-theme-background)), rgb(var(--v-theme-surface)) 60%);
-}
-
-.person-card:hover {
-  background-image: linear-gradient(45deg, rgb(var(--v-theme-background)), rgb(var(--v-custom-background)) 60%);
-}
-</style>
--- a/src/components/cards/FilterRuleCard.vue
+++ b/src/components/cards/FilterRuleCard.vue
@@ -9,28 +9,26 @@ const props = defineProps({
 })

 // 定义触发的自定义事件
-const emit = defineEmits(['close', 'changed', 'levelup', 'leveldown'])
+const emit = defineEmits(['close', 'changed'])

 // 按钮点击
 function onClose() {
  emit('close')
 }

-// 上升优先级
-function onLevelUp() {
-  emit('levelup', props.pri)
-}
-
-// 下降优先级
-function onLevelDown() {
-  emit('leveldown', props.pri)
-}
-
 // 选项变化
 function filtersChanged(value: string[]) {
  emit('changed', props.pri, value)
 }

+// 清洗规则中的换行符和多余空格，并在前后添加空格
+const cleanedRules = computed(() => {
+  return props.rules.map(rule => {
+    rule = rule ?? ''
+    return ` ${rule.replace(/[\r\n]/g, '').replace(/\s+/g, '')} `
+  })
+})
+
 // 过滤规则下拉框
 const selectFilterOptions = ref<{ [key: string]: string }[]>([
  { title: '特效字幕', value: ' SPECSUB ' },
@@ -76,18 +74,9 @@ const selectFilterOptions = ref<{ [key: string]: string }[]>([

 <template>
  <VCard variant="tonal" :width="props.width" :height="props.height">
-    <span class="absolute top-3 right-14">
-      <IconBtn
-        v-if="props.pri !== '1'"
-        @click.stop="onLevelUp"
-      >
-        <VIcon icon="mdi-arrow-up" />
-      </IconBtn>
-      <IconBtn
-        v-if="props.pri !== props.maxpri"
-        @click.stop="onLevelDown"
-      >
-        <VIcon icon="mdi-arrow-down" />
+    <span class="absolute top-3 right-12">
+      <IconBtn>
+        <VIcon class="cursor-move" icon="mdi-drag" />
      </IconBtn>
    </span>
    <DialogCloseBtn @click="onClose" />
@@ -96,8 +85,7 @@ const selectFilterOptions = ref<{ [key: string]: string }[]>([
      <VRow>
        <VCol>
          <VSelect
-            :key="props.pri"
-            v-model="props.rules"
+            v-model="cleanedRules"
            variant="underlined"
            :items="selectFilterOptions"
            chips
--- a/src/components/cards/LibraryCard.vue
+++ b/src/components/cards/LibraryCard.vue
@@ -35,45 +35,36 @@ function imageErrorHandler() {

 // 默认图片
 function getDefaultImage() {
-  if (props.media?.server === 'plex')
-    return plex
-  else if (props.media?.server === 'emby')
-    return emby
-  else if (props.media?.server === 'jellyfin')
-    return jellyfin
-  else
-    return plex
+  if (props.media?.server === 'plex') return plex
+  else if (props.media?.server === 'emby') return emby
+  else if (props.media?.server === 'jellyfin') return jellyfin
+  else return plex
 }

 // 跳转播放
 function goPlay() {
-  if (props.media?.link)
-    window.open(props.media?.link, '_blank')
+  if (props.media?.link) window.open(props.media?.link, '_blank')
 }

 // 生成图片代理路径
 function getImgUrl(url: string) {
-  if (!url)
-    return getDefaultImage()
-  else
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/0/${encodeURIComponent(url).replace(/%2F/g, '/')}`
+  if (!url) return getDefaultImage()
+  else return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(url)}`
 }

 // 根据多张图片生成媒体库封面
 async function drawImages(imageList: string[]) {
  // 图片
  const IMAGES = imageList
-  if (IMAGES.length === 0)
-    return getDefaultImage()
+  if (IMAGES.length === 0) return getDefaultImage()

  // 为所有图片添加system/img前缀
  for (let i = 0; i < IMAGES.length; i++)
-    IMAGES[i] = `${import.meta.env.VITE_API_BASE_URL}system/img/0/${encodeURIComponent(IMAGES[i]).replace(/%2F/g, '/')}`
+    IMAGES[i] = `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(IMAGES[i])}`

  // canvas
  const canvas = canvasRef.value
-  if (!canvas)
-    return getDefaultImage()
+  if (!canvas) return getDefaultImage()

  // 画布参数
  const POSTER_WIDTH = (canvas.width - 32) / 4
@@ -85,8 +76,7 @@ async function drawImages(imageList: string[]) {

  // 获取画布上下文
  const ctx = canvas.getContext('2d')
-  if (!ctx)
-    return getDefaultImage()
+  if (!ctx) return getDefaultImage()

  // 设置背景色为黑色
  ctx.fillStyle = '#000000'
@@ -94,16 +84,14 @@ async function drawImages(imageList: string[]) {

  // 绘制图片
  async function drawImageWithReflection(imgSrc: string, index: number) {
-    if (!canvas)
-      return
+    if (!canvas) return

-    if (!ctx)
-      return
+    if (!ctx) return

    const img = new Image()
    img.setAttribute('crossorigin', 'anonymous')
    img.src = imgSrc
-    await new Promise(resolve => img.onload = resolve)
+    await new Promise(resolve => (img.onload = resolve))

    const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1)
    const y = MARGIN_HEIGHT
@@ -125,12 +113,7 @@ async function drawImages(imageList: string[]) {
      REFLECTION_HEIGHT,
    )

-    const gradient = ctx.createLinearGradient(
-      0,
-      REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT,
-      0,
-      REFLECTION_HEIGHT,
-    )
+    const gradient = ctx.createLinearGradient(0, REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT, 0, REFLECTION_HEIGHT)

    gradient.addColorStop(0, 'rgba(0, 0, 0, 1)')
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.3)')
@@ -142,8 +125,7 @@ async function drawImages(imageList: string[]) {

  // 绘制多张图片
  const loopCount = Math.min(4, IMAGES.length)
-  for (let i = 0; i < loopCount; i++)
-    await drawImageWithReflection(IMAGES[i], i + 1)
+  for (let i = 0; i < loopCount; i++) await drawImageWithReflection(IMAGES[i], i + 1)

  // 转换为图片地址
  return canvas.toDataURL('image/png')
@@ -152,17 +134,12 @@ async function drawImages(imageList: string[]) {
 onMounted(async () => {
  if (props.media?.image_list && props.media?.image_list.length > 0)
    imgUrl.value = await drawImages(props.media?.image_list || [])
-  else
-    imgUrl.value = getImgUrl(props.media?.image || '')
+  else imgUrl.value = getImgUrl(props.media?.image || '')
 })
 </script>

 <template>
-  <VHover
-    v-bind="props"
-    :height="props.height"
-    :width="props.width"
-  >
+  <VHover v-bind="props" :height="props.height" :width="props.width">
    <template #default="hover">
      <VCard
        v-bind="hover.props"
@@ -175,13 +152,7 @@ onMounted(async () => {
      >
        <template #image>
          <canvas ref="canvasRef" class="w-full h-full hidden" />
-          <VImg
-            :src="imgUrl"
-            aspect-ratio="2/3"
-            cover
-            @load="imageLoadHandler"
-            @error="imageErrorHandler"
-          >
+          <VImg :src="imgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler" @error="imageErrorHandler">
            <template #placeholder>
              <div class="w-full h-full">
                <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
@@ -190,7 +161,7 @@ onMounted(async () => {
            <VCardText
              class="w-full flex flex-col flex-wrap justify-end align-center text-white absolute bottom-0 cursor-pointer pa-2"
            >
-              <h1 class="mb-1 text-white font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
+              <h1 class="mb-1 text-white text-shadow font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
                {{ props.media?.name }}
              </h1>
            </VCardText>
@@ -200,3 +171,9 @@ onMounted(async () => {
    </template>
  </VHover>
 </template>
+
+<style lang="scss">
+.text-shadow {
+  text-shadow: 1px 1px #777;
+}
+</style>
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import type { PropType, Ref } from 'vue'
 import { useToast } from 'vue-toast-notification'
-import SubscribeEditForm from '../form/SubscribeEditForm.vue'
+import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
 import { formatSeason } from '@/@core/utils/formatters'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import type { MediaInfo, NotExistMediaInfo, Subscribe, TmdbSeason } from '@/api/types'
 import router from '@/router'
 import noImage from '@images/no-image.jpeg'
+import tmdbImage from '@images/logos/tmdb.png'
+import doubanImage from '@images/logos/douban-black.png'
+import bangumiImage from '@images/logos/bangumi.png'

 // 输入参数
 const props = defineProps({
@@ -16,6 +19,8 @@ const props = defineProps({
  height: String,
 })

+const store = useStore()
+
 // 提示框
 const $toast = useToast()

@@ -52,31 +57,33 @@ const seasonInfos = ref<TmdbSeason[]>([])
 // 选中的订阅季
 const seasonsSelected = ref<TmdbSeason[]>([])

+// 来源角标字典
+const sourceIconDict: { [key: string]: any } = {
+  themoviedb: tmdbImage,
+  douban: doubanImage,
+  bangumi: bangumiImage,
+}
+
 // 获得mediaid
 function getMediaId() {
-  return props.media?.tmdb_id
-    ? `tmdb:${props.media?.tmdb_id}`
-    : props.media?.douban_id
-      ? `douban:${props.media?.douban_id}`
-      : `bangumi:${props.media?.bangumi_id}`
+  if (props.media?.tmdb_id) return `tmdb:${props.media?.tmdb_id}`
+  else if (props.media?.douban_id) return `douban:${props.media?.douban_id}`
+  else return `bangumi:${props.media?.bangumi_id}`
 }

 // 订阅弹窗选择的多季
 function subscribeSeasons() {
  subscribeSeasonDialog.value = false
-  seasonsSelected.value.forEach((season) => {
+  seasonsSelected.value.forEach(season => {
    addSubscribe(season.season_number)
  })
 }

 // 角标颜色
 function getChipColor(type: string) {
-  if (type === '电影')
-    return 'border-blue-500 bg-blue-600'
-  else if (type === '电视剧')
-    return ' bg-indigo-500 border-indigo-600'
-  else
-    return 'border-purple-600 bg-purple-600'
+  if (type === '电影') return 'border-blue-500 bg-blue-600'
+  else if (type === '电视剧') return ' bg-indigo-500 border-indigo-600'
+  else return 'border-purple-600 bg-purple-600'
 }

 // 添加订阅处理
@@ -90,29 +97,24 @@ async function handleAddSubscribe() {
      $toast.error(`${props.media?.title} 查询剧集信息失败！`)
      return
    }
-
    // 检查各季的缺失状态
    await checkSeasonsNotExists()
-    if (!tmdbFlag.value)
-      return
+    if (!tmdbFlag.value) return

    if (seasonInfos.value.length === 1) {
      // 添加订阅
      addSubscribe(1)
-    }
-    else {
+    } else {
      // 弹出季选择列表，支持多选
      seasonsSelected.value = []
      subscribeSeasonDialog.value = true
    }
-  }
-  else if (props.media?.type === '电视剧') {
+  } else if (props.media?.type === '电视剧') {
    // 豆瓣电视剧，只会有一季
    const season = props.media?.season ?? 1
    // 添加订阅
    addSubscribe(season)
-  }
-  else {
+  } else {
    // 电影
    addSubscribe()
  }
@@ -147,24 +149,17 @@ async function addSubscribe(season = 0) {
    }

    // 提示
-    showSubscribeAddToast(
-      result.success,
-      props.media?.title ?? '',
-      season,
-      result.message,
-      best_version,
-    )
+    showSubscribeAddToast(result.success, props.media?.title ?? '', season, result.message, best_version)

    // 弹出订阅编辑弹窗
    if (result.success && seasonsSelected.value.length <= 1) {
-      const show_edit_dialog = await querySubscribeRules()
+      const show_edit_dialog = await queryDefaultSubscribeConfig()
      if (show_edit_dialog) {
        subscribeId.value = result.data.id
        subscribeEditDialog.value = true
      }
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  } finally {
    doneNProgress()
@@ -172,22 +167,14 @@ async function addSubscribe(season = 0) {
 }

 // 弹出添加订阅提示
-function showSubscribeAddToast(result: boolean,
-  title: string,
-  season: number,
-  message: string,
-  best_version: number) {
-  if (season)
-    title = `${title} ${formatSeason(season.toString())}`
+function showSubscribeAddToast(result: boolean, title: string, season: number, message: string, best_version: number) {
+  if (season) title = `${title} ${formatSeason(season.toString())}`

  let subname = '订阅'
-  if (best_version > 0)
-    subname = '洗版订阅'
+  if (best_version > 0) subname = '洗版订阅'

-  if (result && seasonsSelected.value.length > 1)
-    $toast.success(`${title} 添加${subname}成功！`)
-  else if (!result)
-    $toast.error(`${title} 添加${subname}失败：${message}！`)
+  if (result) $toast.success(`${title} 添加${subname}成功！`)
+  else if (!result) $toast.error(`${title} 添加${subname}失败：${message}！`)
 }

 // 调用API取消订阅
@@ -197,37 +184,31 @@ async function removeSubscribe() {
  try {
    const mediaid = getMediaId()

-    const result: { [key: string]: any } = await api.delete(
-      `subscribe/media/${mediaid}`,
-      {
-        params: {
-          season: props.media?.season,
-        },
+    const result: { [key: string]: any } = await api.delete(`subscribe/media/${mediaid}`, {
+      params: {
+        season: props.media?.season,
      },
-    )
+    })

    if (result.success) {
      isSubscribed.value = false
      $toast.success(`${props.media?.title} 已取消订阅！`)
-    }
-    else {
+    } else {
      $toast.error(`${props.media?.title} 取消订阅失败：${result.message}！`)
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
+  } finally {
+    doneNProgress()
  }
-  doneNProgress()
 }

 // 查询当前媒体是否已订阅
 async function handleCheckSubscribe() {
  try {
    const result = await checkSubscribe(props.media?.season)
-    if (result)
-      isSubscribed.value = true
-  }
-  catch (error) {
+    if (result) isSubscribed.value = true
+  } catch (error) {
    console.error(error)
  }
 }
@@ -245,10 +226,8 @@ async function handleCheckExists() {
      },
    })

-    if (result.success)
-      isExists.value = true
-  }
-  catch (error) {
+    if (result.success) isExists.value = true
+  } catch (error) {
    console.error(error)
  }
 }
@@ -266,62 +245,60 @@ async function checkSubscribe(season = 0) {
    })

    return result.id || null
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }

  return null
 }

-// 检查所有季的缺失状态
+// 检查所有季的缺失状态（数据库）
 async function checkSeasonsNotExists() {
  // 开始处理
  startNProgress()
  try {
    const result: NotExistMediaInfo[] = await api.post('mediaserver/notexists', props.media)
    if (result) {
-      result.forEach((item) => {
+      result.forEach(item => {
        // 0-已入库 1-部分缺失 2-全部缺失
        let state = 0
-        if (item.episodes.length === 0)
-          state = 2
-        else if (item.episodes.length < item.total_episode)
-          state = 1
+        if (item.episodes.length === 0) state = 2
+        else if (item.episodes.length < item.total_episode) state = 1

        seasonsNotExisted.value[item.season] = state
      })
    }
-  }
-  catch (error) {
+  } catch (error) {
    $toast.error(`${props.media?.title}无法识别TMDB媒体信息！`)
    tmdbFlag.value = false
+  } finally {
+    // 处理完成
+    doneNProgress()
  }
-
-  // 处理完成
-  doneNProgress()
 }

 // 查询TMDB的所有季信息
 async function getMediaSeasons() {
  try {
    seasonInfos.value = await api.get(`tmdb/seasons/${props.media?.tmdb_id}`)
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }

 // 查询订阅弹窗规则
-async function querySubscribeRules() {
+async function queryDefaultSubscribeConfig() {
+  // 非管理员不显示
+  if (!store.state.auth.superUser) return false
  try {
-    const result: { [key: string]: any } = await api.get(
-      'system/setting/DefaultFilterRules',
-    )
-    if (result.data?.value)
-      return result.data.value.show_edit_dialog
-  }
-  catch (error) {
+    let subscribe_config_url = ''
+    if (props.media?.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+
+    const result: { [key: string]: any } = await api.get(subscribe_config_url)
+
+    if (result.data?.value) return result.data.value.show_edit_dialog
+  } catch (error) {
    console.log(error)
  }
  return false
@@ -329,49 +306,41 @@ async function querySubscribeRules() {

 // 爱心订阅按钮响应
 function handleSubscribe() {
-  if (isSubscribed.value)
-    removeSubscribe()
-  else
-    handleAddSubscribe()
+  if (isSubscribed.value) removeSubscribe()
+  else handleAddSubscribe()
 }

 // 计算存在状态的颜色
 function getExistColor(season: number) {
  const state = seasonsNotExisted.value[season]
-  if (!state)
-    return 'success'
+  if (!state) return 'success'

-  if (state === 1)
-    return 'warning'
-  else if (state === 2)
-    return 'error'
-  else
-    return 'success'
+  if (state === 1) return 'warning'
+  else if (state === 2) return 'error'
+  else return 'success'
 }

 // 计算存在状态的文本
 function getExistText(season: number) {
  const state = seasonsNotExisted.value[season]
-  if (!state)
-    return '已入库'
+  if (!state) return '已入库'

-  if (state === 1)
-    return '部分缺失'
-  else if (state === 2)
-    return '缺失'
-  else
-    return '已入库'
+  if (state === 1) return '部分缺失'
+  else if (state === 2) return '缺失'
+  else return '已入库'
 }

 // 打开详情页
-function goMediaDetail() {
-  router.push({
-    path: '/media',
-    query: {
-      mediaid: getMediaId(),
-      type: props.media?.type,
-    },
-  })
+function goMediaDetail(isHovering = false) {
+  if (isHovering) {
+    router.push({
+      path: '/media',
+      query: {
+        mediaid: getMediaId(),
+        type: props.media?.type,
+      },
+    })
+  }
 }

 // 开始搜索
@@ -395,35 +364,31 @@ onBeforeMount(() => {

 // 计算图片地址
 const getImgUrl: Ref<string> = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
  const url = props.media?.poster_path?.replace('original', 'w500') ?? noImage
  // 如果地址中包含douban则使用中转代理
  if (url.includes('doubanio.com'))
-    return `${import.meta.env.VITE_API_BASE_URL}douban/img/${encodeURIComponent(url)}`
+    return `${import.meta.env.VITE_API_BASE_URL}douban/img?imgurl=${encodeURIComponent(url)}`

  return url
 })

 // 拼装季图片地址
 function getSeasonPoster(posterPath: string) {
-  if (!posterPath)
-    return ''
+  if (!posterPath) return ''
  return `https://image.tmdb.org/t/p/w500${posterPath}`
 }

 // 将yyyy-mm-dd转换为yyyy年mm月dd日
 function formatAirDate(airDate: string) {
-  if (!airDate)
-    return ''
-  const date = new Date(airDate)
+  if (!airDate) return ''
+  const date = new Date(airDate.replaceAll(/-/g, '/'))
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
 }
 // 从yyyy-mm-dd中提取年份
 function getYear(airDate: string) {
-  if (!airDate)
-    return ''
-  const date = new Date(airDate)
+  if (!airDate) return ''
+  const date = new Date(airDate.replaceAll(/-/g, '/'))
  return date.getFullYear()
 }
 </script>
@@ -440,7 +405,7 @@ function getYear(airDate: string) {
          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
          'ring-1': isImageLoaded,
        }"
-        @click.stop="goMediaDetail"
+        @click.stop="goMediaDetail(hover.isHovering)"
      >
        <VImg
          aspect-ratio="2/3"
@@ -468,10 +433,10 @@ function getYear(airDate: string) {
          {{ props.media?.type }}
        </VChip>
        <!-- 本地存在标识 -->
-        <ExistIcon v-if="isExists" />
+        <ExistIcon v-if="isExists && !hover.isHovering" />
        <!-- 评分角标 -->
        <VChip
-          v-if="isImageLoaded && props.media?.vote_average && !isExists"
+          v-if="isImageLoaded && props.media?.vote_average && !(isExists && !hover.isHovering)"
          variant="elevated"
          size="small"
          :class="getChipColor('rating')"
@@ -492,43 +457,33 @@ function getYear(airDate: string) {
            {{ props.media?.overview }}
          </p>
          <div class="flex align-center justify-between">
-            <IconBtn
-              icon="mdi-magnify"
-              color="white"
-              @click.stop="handleSearch"
-            />
-            <IconBtn
-              icon="mdi-heart"
-              :color="isSubscribed ? 'error' : 'white'"
-              @click.stop="handleSubscribe"
-            />
+            <IconBtn icon="mdi-magnify" color="white" @click.stop="handleSearch" />
+            <IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
          </div>
        </VCardText>
+        <VAvatar
+          size="24"
+          density="compact"
+          class="absolute bottom-1 right-1"
+          tile
+          v-if="!hover.isHovering && isImageLoaded && props.media?.source"
+        >
+          <VImg cover :src="sourceIconDict[props.media?.source]" class="shadow-lg" />
+        </VAvatar>
      </VCard>
    </template>
  </VHover>
  <!-- 订阅季弹窗 -->
-  <VBottomSheet
-    v-if="subscribeSeasonDialog"
-    v-model="subscribeSeasonDialog"
-    inset
-    scrollable
-  >
+  <VBottomSheet v-if="subscribeSeasonDialog" v-model="subscribeSeasonDialog" inset scrollable>
    <VCard class="rounded-t">
      <DialogCloseBtn @click="subscribeSeasonDialog = false" />
-      <VCardTitle class="pe-10">
-        订阅 - {{ props.media?.title }}
-      </VCardTitle>
+      <VCardItem>
+        <VCardTitle class="pe-10"> 订阅 - {{ props.media?.title }} </VCardTitle>
+      </VCardItem>
+      <VDivider />
      <VCardText>
-        <VList
-          v-model:selected="seasonsSelected"
-          lines="three"
-          select-strategy="classic"
-        >
-          <VListItem
-            v-for="(item, i) in seasonInfos" :key="i"
-            :value="item"
-          >
+        <VList v-model:selected="seasonsSelected" lines="three" select-strategy="classic">
+          <VListItem v-for="(item, i) in seasonInfos" :key="i" :value="item">
            <template #prepend>
              <VImg
                height="90"
@@ -545,16 +500,9 @@ function getYear(airDate: string) {
                </template>
              </VImg>
            </template>
-            <VListItemTitle>
-              第 {{ item.season_number }} 季
-            </VListItemTitle>
+            <VListItemTitle> 第 {{ item.season_number }} 季 </VListItemTitle>
            <VListItemSubtitle class="mt-1 me-2">
-              <VChip
-                v-if="item.vote_average"
-                color="primary"
-                size="small"
-                class="mb-1"
-              >
+              <VChip v-if="item.vote_average" color="primary" size="small" class="mb-1">
                <VIcon icon="mdi-star" /> {{ item.vote_average }}
              </VChip>
              {{ getYear(item.air_date || '') }} • {{ item.episode_count }} 集
@@ -563,12 +511,7 @@ function getYear(airDate: string) {
              《{{ media?.title }}》第 {{ item.season_number }} 季于 {{ formatAirDate(item.air_date || '') }} 首播。
            </VListItemSubtitle>
            <VListItemSubtitle>
-              <VChip
-                v-if="seasonsNotExisted"
-                class="mt-2"
-                size="small"
-                :color="getExistColor(item.season_number || 0)"
-              >
+              <VChip v-if="seasonsNotExisted" class="mt-2" size="small" :color="getExistColor(item.season_number || 0)">
                {{ getExistText(item.season_number || 0) }}
              </VChip>
            </VListItemSubtitle>
@@ -581,24 +524,25 @@ function getYear(airDate: string) {
        </VList>
      </VCardText>
      <div class="my-2 text-center">
-        <VBtn
-          :disabled="seasonsSelected.length === 0"
-          width="30%"
-          @click="subscribeSeasons"
-        >
+        <VBtn :disabled="seasonsSelected.length === 0" width="30%" @click="subscribeSeasons">
          {{ seasonsSelected.length === 0 ? '请选择订阅季' : '提交订阅' }}
        </VBtn>
      </div>
    </VCard>
  </VBottomSheet>
  <!-- 订阅编辑弹窗 -->
-  <SubscribeEditForm
+  <SubscribeEditDialog
    v-if="subscribeEditDialog"
    v-model="subscribeEditDialog"
    :subid="subscribeId"
    @close="subscribeEditDialog = false"
    @save="subscribeEditDialog = false"
-    @remove="() => { subscribeEditDialog = false; handleCheckSubscribe(); }"
+    @remove="
+      () => {
+        subscribeEditDialog = false
+        handleCheckSubscribe()
+      }
+    "
  />
 </template>

--- a/src/components/cards/MediaInfoCard.vue
+++ b/src/components/cards/MediaInfoCard.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import type { Context } from '@/api/types'
+import { isNullOrEmptyObject } from '@/@core/utils'

 // 输入参数
 const props = defineProps({
@@ -9,15 +10,13 @@ const props = defineProps({

 // TMDB图片转换为w500大小
 function getW500Image(url = '') {
-  if (!url)
-    return ''
+  if (!url) return ''
  return url.replace('original', 'w500')
 }

 // 打开TMDB详情页面
 function openTmdbPage(type: string, tmdbId: number) {
-  if (!type || !tmdbId)
-    return
+  if (!type || !tmdbId) return

  const url = `https://www.themoviedb.org/${type === '电影' ? 'movie' : 'tv'}/${tmdbId}`
  window.open(url, '_blank')
@@ -31,10 +30,7 @@ function openTmdbPage(type: string, tmdbId: number) {
        v-if="context?.meta_info?.name"
        class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row"
      >
-        <div
-          v-if="context?.media_info?.poster_path"
-          class="ma-auto"
-        >
+        <div v-if="context?.media_info?.poster_path" class="ma-auto">
          <VImg
            width="10rem"
            aspect-ratio="2/3"
@@ -75,16 +71,10 @@ function openTmdbPage(type: string, tmdbId: number) {
              variant="elevated"
              class="me-1 mb-1 text-white bg-blue-500"
            >
-              {{
-                context?.media_info?.type || context?.meta_info?.type
-              }}
+              {{ context?.media_info?.type || context?.meta_info?.type }}
            </VChip>
            <!-- 二级分类 -->
-            <VChip
-              v-if="context?.media_info?.category"
-              variant="elevated"
-              class="me-1 mb-1 text-white bg-blue-500"
-            >
+            <VChip v-if="context?.media_info?.category" variant="elevated" class="me-1 mb-1 text-white bg-blue-500">
              {{ context?.media_info?.category }}
            </VChip>
            <!-- TMDBID -->
@@ -98,18 +88,10 @@ function openTmdbPage(type: string, tmdbId: number) {
              {{ context?.media_info?.tmdb_id }}
            </VChip>
            <!-- meta_info -->
-            <VChip
-              v-if="context?.meta_info?.edition"
-              variant="elevated"
-              class="me-1 mb-1 text-white bg-red-500"
-            >
+            <VChip v-if="context?.meta_info?.edition" variant="elevated" class="me-1 mb-1 text-white bg-red-500">
              {{ context?.meta_info?.edition }}
            </VChip>
-            <VChip
-              v-if="context?.meta_info?.resource_pix"
-              variant="elevated"
-              class="me-1 mb-1 text-white bg-red-500"
-            >
+            <VChip v-if="context?.meta_info?.resource_pix" variant="elevated" class="me-1 mb-1 text-white bg-red-500">
              {{ context?.meta_info?.resource_pix }}
            </VChip>
            <VChip
@@ -126,36 +108,19 @@ function openTmdbPage(type: string, tmdbId: number) {
            >
              {{ context?.meta_info?.audio_encode }}
            </VChip>
-            <VChip
-              v-if="context?.meta_info?.resource_team"
-              variant="elevated"
-              class="me-1 mb-1 text-white bg-cyan-500"
-            >
+            <VChip v-if="context?.meta_info?.resource_team" variant="elevated" class="me-1 mb-1 text-white bg-cyan-500">
              {{ context?.meta_info?.resource_team }}
            </VChip>
          </VCardItem>
        </div>
      </div>
-      <VAlert
-        v-if="!context?.meta_info?.name"
-        icon="mdi-alert-circle-outline"
-      >
-        识别失败，无法识别到有效信息！
-      </VAlert>
+      <VAlert v-if="!context?.meta_info?.name" icon="mdi-alert-circle-outline"> 识别失败，无法识别到有效信息！ </VAlert>
    </VCol>
-    <VExpansionPanels
-      v-show="context?.meta_info?.title !== context?.meta_info.org_string"
-    >
+    <VExpansionPanels v-show="!isNullOrEmptyObject(context?.meta_info.apply_words)">
      <VExpansionPanel>
-        <VExpansionPanelTitle>
-          识别词应用详情
-        </VExpansionPanelTitle>
+        <VExpansionPanelTitle> 识别词应用详情 </VExpansionPanelTitle>
        <VExpansionPanelText>
-          <VChip
-            variant="elevated"
-            class="me-1 mb-1 break-all"
-            color="primary"
-          >
+          <VChip variant="elevated" class="me-1 mb-1 break-all" color="primary">
            {{ context?.meta_info.org_string }}
          </VChip>
          <VChip
--- a/src/components/cards/TmdbPersonCard.vue
+++ b/src/components/cards/TmdbPersonCard.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import personIcon from '@images/misc/person-icon.png'
-import type { TmdbPerson } from '@/api/types'
+import type { Person } from '@/api/types'
 import router from '@/router'

 const personProps = defineProps({
-  person: Object as PropType<TmdbPerson>,
+  person: Object as PropType<Person>,
  width: String,
  height: String,
 })
@@ -17,19 +17,47 @@ const isImageLoaded = ref(false)

 // 人物图片地址
 function getPersonImage() {
-  if (!personInfo.value?.profile_path)
+  if (personProps.person?.source === 'themoviedb') {
+    if (!personInfo.value?.profile_path) return personIcon
+    return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+  } else if (personProps.person?.source === 'douban') {
+    if (!personInfo.value?.avatar) return personIcon
+    if (typeof personInfo.value?.avatar === 'object') {
+      return personInfo.value?.avatar?.normal
+    } else {
+      return personInfo.value?.avatar
+    }
+  } else if (personProps.person?.source === 'bangumi') {
+    if (!personInfo.value?.images) return personIcon
+    return personInfo.value?.images?.medium
+  } else {
    return personIcon
-  return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+  }
+}
+
+// 人物姓名
+function getPersonName() {
+  return personInfo.value?.name
+}
+
+// 人物角色
+function getPersonCharacter() {
+  if (personProps.person?.source === 'bangumi') {
+    if (!personInfo.value?.career) return ''
+    return personInfo.value?.career.join('、')
+  } else {
+    return personInfo.value?.character
+  }
 }

 // 人物详情
 function goPersonDetail() {
-  if (!personInfo.value?.id)
-    return
+  if (!personInfo.value?.id) return
  router.push({
    path: '/person',
    query: {
      personid: personInfo.value?.id,
+      source: personInfo.value?.source,
    },
  })
 }
@@ -49,9 +77,9 @@ function goPersonDetail() {
        @click.stop="goPersonDetail"
      >
        <div
-          class="person-card relative transform-gpu cursor-pointer rounded shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
+          class="person-card relative transform-gpu cursor-pointer rounded shadow transition duration-150 ease-in-out scale-100 ring-gray-700"
        >
-          <div style="padding-bottom: 150%;">
+          <div style="padding-block-end: 150%">
            <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
              <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
                <VAvatar
@@ -60,18 +88,17 @@ function goPersonDetail() {
                    'ring-1 ring-gray-700': isImageLoaded,
                  }"
                >
-                  <VImg
-                    :src="getPersonImage()"
-                    cover
-                    @load="isImageLoaded = true"
-                  />
+                  <VImg :src="getPersonImage()" cover @load="isImageLoaded = true" />
                </VAvatar>
              </div>
              <div class="w-full truncate text-center font-bold">
-                {{ personInfo?.name }}
+                {{ getPersonName() }}
              </div>
-              <div class="overflow-hidden whitespace-normal text-center text-sm" style=" display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
-                {{ personInfo?.character }}
+              <div
+                class="overflow-hidden whitespace-normal text-center text-sm"
+                style="display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2"
+              >
+                {{ getPersonCharacter() }}
              </div>
              <div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" />
            </div>
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -6,6 +6,7 @@ import type { Plugin } from '@/api/types'
 import noImage from '@images/logos/plugin.png'
 import { getDominantColor } from '@/@core/utils/image'
 import { isNullOrEmptyObject } from '@/@core/utils'
+import ProgressDialog from '@/components/dialog/ProgressDialog.vue'

 // 输入参数
 const props = defineProps({
@@ -42,6 +43,12 @@ const imageLoadError = ref(false)
 // 更新日志弹窗
 const releaseDialog = ref(false)

+// 计算插件标签
+const pluginLabels = computed(() => {
+  if (!props.plugin?.plugin_label) return []
+  return props.plugin.plugin_label.split(',')
+})
+
 // 图片加载完成
 async function imageLoaded() {
  isImageLoaded.value = true
@@ -57,15 +64,12 @@ async function installPlugin() {
    progressDialog.value = true
    progressText.value = `正在安装 ${props.plugin?.plugin_name} v${props?.plugin?.plugin_version} ...`

-    const result: { [key: string]: any } = await api.get(
-      `plugin/install/${props.plugin?.id}`,
-      {
-        params: {
-          repo_url: props.plugin?.repo_url,
-          force: props.plugin?.has_update,
-        },
+    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
+      params: {
+        repo_url: props.plugin?.repo_url,
+        force: props.plugin?.has_update,
      },
-    )
+    })

    // 隐藏等待提示框
    progressDialog.value = false
@@ -75,23 +79,20 @@ async function installPlugin() {

      // 通知父组件刷新
      emit('install')
-    }
-    else {
+    } else {
      $toast.error(`插件 ${props.plugin?.plugin_name} 安装失败：${result.message}`)
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }

 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
  // 如果是网络图片则使用代理后返回
  if (props.plugin?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/1/${encodeURIComponent(props.plugin?.plugin_icon).replace(/%2F/g, '/')}`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`

  return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
@@ -102,22 +103,18 @@ function visitPluginPage() {
  let repoUrl = props.plugin?.repo_url
  if (repoUrl) {
    if (repoUrl.includes('raw.githubusercontent.com')) {
-      if (!repoUrl.endsWith('/'))
-        repoUrl += '/'
+      if (!repoUrl.endsWith('/')) repoUrl += '/'

-      if (repoUrl.split('/').length < 6)
-        repoUrl = `${repoUrl}main/`
+      if (repoUrl.split('/').length < 6) repoUrl = `${repoUrl}main/`

      try {
        const [user, repo] = repoUrl.split('/').slice(-4, -2)
        repoUrl = `https://github.com/${user}/${repo}`
-      }
-      catch (error) {
+      } catch (error) {
        return
      }
    }
-  }
-  else {
+  } else {
    repoUrl = props.plugin?.author_url
  }
  window.open(repoUrl, '_blank')
@@ -138,7 +135,8 @@ const dropdownItems = ref([
      prependIcon: 'mdi-github',
      click: visitPluginPage,
    },
-  }, {
+  },
+  {
    title: '更新说明',
    value: 2,
    show: !isNullOrEmptyObject(props.plugin?.history || {}),
@@ -151,68 +149,63 @@ const dropdownItems = ref([
 </script>

 <template>
-  <VCard
-    :width="props.width"
-    :height="props.height"
-    @click="installPlugin"
-  >
+  <VCard :width="props.width" :height="props.height" @click="installPlugin" class="flex flex-col">
+    <div class="me-n3 absolute bottom-0 right-3">
+      <IconBtn>
+        <VIcon icon="mdi-dots-vertical" />
+        <VMenu activator="parent" close-on-content-click>
+          <VList>
+            <VListItem
+              v-for="(item, i) in dropdownItems"
+              v-show="item.show"
+              :key="i"
+              variant="plain"
+              @click="item.props.click"
+            >
+              <template #prepend>
+                <VIcon :icon="item.props.prependIcon" />
+              </template>
+              <VListItemTitle v-text="item.title" />
+            </VListItem>
+          </VList>
+        </VMenu>
+      </IconBtn>
+    </div>
    <div
-      class="relative pa-4 text-center card-cover-blurred"
+      class="relative flex flex-row items-start pa-3 justify-between grow"
      :style="{ background: `${backgroundColor}` }"
    >
-      <div class="me-n3 absolute top-0 right-3">
-        <IconBtn>
-          <VIcon icon="mdi-dots-vertical" class="text-white" />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
-            <VList>
-              <VListItem
-                v-for="(item, i) in dropdownItems"
-                v-show="item.show"
-                :key="i"
-                variant="plain"
-                @click="item.props.click"
-              >
-                <template #prepend>
-                  <VIcon :icon="item.props.prependIcon" />
-                </template>
-                <VListItemTitle v-text="item.title" />
-              </VListItem>
-            </VList>
-          </VMenu>
-        </IconBtn>
+      <div
+        class="absolute inset-0 bg-cover bg-center"
+        :style="{ background: `${backgroundColor}`, filter: 'brightness(0.7)' }"
+      ></div>
+      <div class="relative flex-1 min-w-0">
+        <VCardTitle class="text-white px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis">
+          {{ props.plugin?.plugin_name }}
+          <span class="text-sm text-gray-200">v{{ props.plugin?.plugin_version }}</span>
+        </VCardTitle>
+        <VCardText class="text-white px-2 py-1 text-shadow line-clamp-3">
+          {{ props.plugin?.plugin_desc }}
+        </VCardText>
+      </div>
+      <div class="relative flex-shrink-0 self-center">
+        <VAvatar size="64">
+          <VImg
+            ref="imageRef"
+            :src="iconPath"
+            aspect-ratio="4/3"
+            cover
+            :class="{ shadow: isImageLoaded }"
+            @load="imageLoaded"
+            @error="imageLoadError = true"
+          />
+        </VAvatar>
      </div>
-      <VAvatar
-        size="8rem"
-      >
-        <VImg
-          ref="imageRef"
-          :src="iconPath"
-          aspect-ratio="4/3"
-          cover
-          :class="{ shadow: isImageLoaded }"
-          @load="imageLoaded"
-          @error="imageLoadError = true"
-        />
-      </VAvatar>
    </div>
-    <VCardTitle>
-      {{ props.plugin?.plugin_name }}
-      <span class="text-sm text-gray-500">v{{ props.plugin?.plugin_version }}</span>
-    </VCardTitle>
-    <VCardText class="pb-2">
-      {{ props.plugin?.plugin_desc }}
-    </VCardText>
-    <VCardText class="flex items-center justify-start pb-2">
+    <VCardText class="flex flex-none align-self-baseline py-3 w-full align-end">
      <span>
-        <VIcon icon="mdi-account" class="me-1" />
-        <a
-          :href="props.plugin?.author_url"
-          target="_blank"
-          @click.stop
-        >
+        <VIcon icon="mdi-github" class="me-1" />
+        <a :href="props.plugin?.author_url" target="_blank" @click.stop>
          {{ props.plugin?.plugin_author }}
        </a>
      </span>
@@ -223,47 +216,13 @@ const dropdownItems = ref([
    </VCardText>
  </VCard>
  <!-- 安装插件进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
-      </VCardText>
-    </VCard>
-  </VDialog>
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
  <!-- 更新日志 -->
-  <VDialog
-    v-if="releaseDialog"
-    v-model="releaseDialog"
-    width="600"
-    scrollable
-  >
-    <VCard>
+  <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
+    <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
      <DialogCloseBtn @click="releaseDialog = false" />
-      <VCardTitle>{{ props.plugin?.plugin_name }} 更新说明</VCardTitle>
+      <VDivider />
      <VersionHistory :history="props.plugin?.history" />
    </VCard>
  </VDialog>
 </template>
-
-<style lang="scss" scoped>
-.card-cover-blurred::before {
-  position: absolute;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-  background: rgba(29, 39, 59, 48%);
-  content: "";
-  inset: 0;
-}
-</style>
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -11,6 +11,11 @@ import { isNullOrEmptyObject } from '@core/utils'
 import noImage from '@images/logos/plugin.png'
 import { getDominantColor } from '@/@core/utils/image'
 import store from '@/store'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()

 // 输入参数
 const props = defineProps({
@@ -58,7 +63,7 @@ const pluginInfoDialog = ref(false)
 const progressText = ref('正在更新插件...')

 // 插件数据页面配置项
-let pluginPageItems = reactive([])
+let pluginPageItems = ref([])

 // 图片是否加载完成
 const isImageLoaded = ref(false)
@@ -70,12 +75,15 @@ const imageLoadError = ref(false)
 const releaseDialog = ref(false)

 // 监听动作标识，如为true则打开详情
-watch(() => props.action, (newAction, oldAction) => {
-  if (newAction && !oldAction) {
-    openPluginDetail()
-    emit('actionDone')
-  }
-})
+watch(
+  () => props.action,
+  (newAction, oldAction) => {
+    if (newAction && !oldAction) {
+      openPluginDetail()
+      emit('actionDone')
+    }
+  },
+)

 // 图片加载完成
 async function imageLoaded() {
@@ -90,7 +98,7 @@ function showUpdateHistory() {
  // 检查当前版本是否有更新日志
  if (isNullOrEmptyObject(props.plugin?.history)) {
    updatePlugin()
-  } else{
+  } else {
    releaseDialog.value = true
  }
 }
@@ -100,21 +108,12 @@ async function uninstallPlugin() {
  const isConfirmed = await createConfirm({
    title: '确认',
    content: `是否确认卸载插件 ${props.plugin?.plugin_name} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
  })

-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return

  try {
-  // 显示等待提示框
+    // 显示等待提示框
    progressDialog.value = true
    progressText.value = `正在卸载 ${props.plugin?.plugin_name} ...`
    const result: { [key: string]: any } = await api.delete(`plugin/${props.plugin?.id}`)
@@ -125,12 +124,10 @@ async function uninstallPlugin() {

      // 通知父组件刷新
      emit('remove')
-    }
-    else {
+    } else {
      $toast.error(`插件 ${props.plugin?.plugin_name} 卸载失败：${result.message}}`)
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }
@@ -141,11 +138,9 @@ async function loadPluginForm() {
    const result: { [key: string]: any } = await api.get(`plugin/form/${props.plugin?.id}`)
    if (result) {
      pluginFormItems = result.conf
-      if (result.model)
-        pluginConfigForm.value = result.model
+      if (result.model) pluginConfigForm.value = result.model
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }
@@ -154,10 +149,8 @@ async function loadPluginForm() {
 async function loadPluginPage() {
  try {
    const result: [] = await api.get(`plugin/page/${props.plugin?.id}`)
-    if (result)
-      pluginPageItems = result
-  }
-  catch (error) {
+    if (result) pluginPageItems.value = result
+  } catch (error) {
    console.error(error)
  }
 }
@@ -166,10 +159,8 @@ async function loadPluginPage() {
 async function loadPluginConf() {
  try {
    const result: { [key: string]: any } = await api.get(`plugin/${props.plugin?.id}`)
-    if (!isNullOrEmptyObject(result))
-      pluginConfigForm.value = result
-  }
-  catch (error) {
+    if (!isNullOrEmptyObject(result)) pluginConfigForm.value = result
+  } catch (error) {
    console.error(error)
  }
 }
@@ -187,13 +178,11 @@ async function savePluginConf() {
      $toast.success(`插件 ${props.plugin?.plugin_name} 配置已保存`)
      // 通知父组件刷新
      emit('save')
-    }
-    else {
+    } else {
      progressDialog.value = false
      $toast.error(`插件 ${props.plugin?.plugin_name} 配置保存失败：${result.message}}`)
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }
@@ -219,11 +208,10 @@ async function showPluginConfig() {

 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
  // 如果是网络图片则使用代理后返回
  if (props.plugin?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/1/${encodeURIComponent(props.plugin?.plugin_icon).replace(/%2F/g, '/')}`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`

  return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
@@ -233,18 +221,9 @@ async function resetPlugin() {
  const isConfirmed = await createConfirm({
    title: '确认',
    content: `是否确认重置插件 ${props.plugin?.plugin_name} 的配置数据?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
  })

-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return

  try {
    const result: { [key: string]: any } = await api.get(`plugin/reset/${props.plugin?.id}`)
@@ -252,12 +231,10 @@ async function resetPlugin() {
      $toast.success(`插件 ${props.plugin?.plugin_name} 数据已重置`)
      // 通知父组件刷新
      emit('save')
-    }
-    else {
+    } else {
      $toast.error(`插件 ${props.plugin?.plugin_name} 重置失败：${result.message}}`)
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }
@@ -270,15 +247,12 @@ async function updatePlugin() {
    progressDialog.value = true
    progressText.value = `正在更新 ${props.plugin?.plugin_name} ...`

-    const result: { [key: string]: any } = await api.get(
-      `plugin/install/${props.plugin?.id}`,
-      {
-        params: {
-          repo_url: props.plugin?.repo_url,
-          force: true,
-        },
+    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
+      params: {
+        repo_url: props.plugin?.repo_url,
+        force: true,
      },
-    )
+    })

    // 隐藏等待提示框
    progressDialog.value = false
@@ -288,12 +262,10 @@ async function updatePlugin() {

      // 通知父组件刷新
      emit('save')
-    }
-    else {
+    } else {
      $toast.error(`插件 ${props.plugin?.plugin_name} 更新失败：${result.message}`)
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }
@@ -306,16 +278,16 @@ function visitAuthorPage() {
 // 查看日志URL
 function openLoggerWindow() {
  const token = store.state.auth.token
-  const url = `${import.meta.env.VITE_API_BASE_URL}system/logging?token=${token}&length=-1&logfile=plugins/${props.plugin?.id?.toLowerCase()}.log`
+  const url = `${
+    import.meta.env.VITE_API_BASE_URL
+  }system/logging?token=${token}&length=-1&logfile=plugins/${props.plugin?.id?.toLowerCase()}.log`
  window.open(url, '_blank')
 }

 // 打开插件详情
 function openPluginDetail() {
-  if (props.plugin?.has_page)
-    showPluginInfo()
-  else
-    showPluginConfig()
+  if (props.plugin?.has_page) showPluginInfo()
+  else showPluginConfig()
 }

 // 弹出菜单
@@ -391,190 +363,138 @@ const dropdownItems = ref([
 ])

 // 监听插件状态变化
-watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
-  const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
-  if (updateItemIndex !== -1)
-    dropdownItems.value[updateItemIndex].show = newHasUpdate
-})
+watch(
+  () => props.plugin?.has_update,
+  (newHasUpdate, _) => {
+    const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
+    if (updateItemIndex !== -1) dropdownItems.value[updateItemIndex].show = newHasUpdate
+  },
+)
+
+// 监听插件窗口状态变化
+watch(
+  () => props.plugin?.page_open,
+  (newOpenState, _) => {
+    if (newOpenState) openPluginDetail()
+  },
+)
 </script>

 <template>
  <!-- 插件卡片 -->
-  <VCard
-    v-if="isVisible"
-    :width="props.width"
-    :height="props.height"
-    @click="openPluginDetail"
-  >
+  <VCard v-if="isVisible" :width="props.width" :height="props.height" @click="openPluginDetail" class="flex flex-col">
+    <div class="me-n3 absolute bottom-0 right-3">
+      <IconBtn>
+        <VIcon icon="mdi-dots-vertical" />
+        <VMenu activator="parent" close-on-content-click>
+          <VList>
+            <VListItem
+              v-for="(item, i) in dropdownItems"
+              v-show="item.show"
+              :key="i"
+              variant="plain"
+              :base-color="item.props.color"
+              @click="item.props.click"
+            >
+              <template #prepend>
+                <VIcon :icon="item.props.prependIcon" />
+              </template>
+              <VListItemTitle v-text="item.title" />
+            </VListItem>
+          </VList>
+        </VMenu>
+      </IconBtn>
+    </div>
    <div
-      class="relative pa-4 text-center card-cover-blurred"
+      class="relative flex flex-row items-start pa-3 justify-between grow"
      :style="{ background: `${backgroundColor}` }"
    >
      <div
-        v-if="props.plugin?.has_update"
-        class="me-n3 absolute top-0 left-1"
-      >
-        <VIcon
-          icon="mdi-new-box"
-          class="text-white"
-        />
+        class="absolute inset-0 bg-cover bg-center"
+        :style="{ background: `${backgroundColor}`, filter: 'brightness(0.7)' }"
+      />
+      <div class="relative flex-1 min-w-0">
+        <VCardTitle class="text-white px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis">
+          <VBadge v-if="props.plugin?.state" dot inline color="success" />
+          {{ props.plugin?.plugin_name }}
+          <span class="text-sm mt-1 text-gray-200">v{{ props.plugin?.plugin_version }}</span>
+        </VCardTitle>
+        <VCardText class="px-2 py-1 text-white text-shadow line-clamp-3">
+          {{ props.plugin?.plugin_desc }}
+        </VCardText>
      </div>
-      <div class="me-n3 absolute top-0 right-3">
-        <IconBtn>
-          <VIcon icon="mdi-dots-vertical" class="text-white" />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
-            <VList>
-              <VListItem
-                v-for="(item, i) in dropdownItems"
-                v-show="item.show"
-                :key="i"
-                variant="plain"
-                :base-color="item.props.color"
-                @click="item.props.click"
-              >
-                <template #prepend>
-                  <VIcon :icon="item.props.prependIcon" />
-                </template>
-                <VListItemTitle v-text="item.title" />
-              </VListItem>
-            </VList>
-          </VMenu>
-        </IconBtn>
+      <div class="relative flex-shrink-0 self-center">
+        <VAvatar size="64">
+          <VImg
+            ref="imageRef"
+            :src="iconPath"
+            aspect-ratio="4/3"
+            cover
+            :class="{ shadow: isImageLoaded }"
+            @load="imageLoaded"
+            @error="imageLoadError = true"
+          />
+        </VAvatar>
      </div>
-      <VAvatar
-        size="8rem"
-      >
-        <VImg
-          ref="imageRef"
-          :src="iconPath"
-          aspect-ratio="4/3"
-          cover
-          :class="{ shadow: isImageLoaded }"
-          @load="imageLoaded"
-          @error="imageLoadError = true"
-        />
-      </VAvatar>
    </div>
-    <span v-if="props.count" class="absolute bottom-1 right-2 flex items-center">
-      <VIcon icon="mdi-fire" />
-      <span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
-    </span>
-    <VCardItem class="py-2">
-      <VCardTitle class="flex items-center flex-row">
-        <VBadge v-if="props.plugin?.state" dot inline color="success" class="me-1 mb-1" />
-        {{ props.plugin?.plugin_name }}<span class="text-sm ms-2 mt-1 text-gray-500">v{{ props.plugin?.plugin_version }}</span>
-      </VCardTitle>
-    </VCardItem>
-    <VCardText>
-      {{ props.plugin?.plugin_desc }}
+    <VCardText class="flex flex-none align-self-baseline py-3 w-full align-end">
+      <span>
+        <VIcon icon="mdi-github" class="me-1" />
+        <a :href="props.plugin?.author_url" target="_blank" @click.stop>
+          {{ props.plugin?.plugin_author }}
+        </a>
+      </span>
+      <span v-if="props.count" class="ms-3">
+        <VIcon icon="mdi-download" />
+        <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
+      </span>
    </VCardText>
+    <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 right-5">
+      <VIcon icon="mdi-new-box" class="text-white" />
+    </div>
  </VCard>
+
  <!-- 插件配置页面 -->
-  <VDialog
-    v-model="pluginConfigDialog"
-    scrollable
-    max-width="60rem"
-  >
-    <VCard
-      :title="`${props.plugin?.plugin_name} - 配置`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn @click="pluginConfigDialog = false" />
+  <VDialog v-model="pluginConfigDialog" scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="`${props.plugin?.plugin_name} - 配置`" class="rounded-t">
+      <DialogCloseBtn v-model="pluginConfigDialog" />
+      <VDivider />
      <VCardText>
-        <FormRender
-          v-for="(item, index) in pluginFormItems"
-          :key="index"
-          :config="item"
-          :form="pluginConfigForm"
-        />
+        <FormRender v-for="(item, index) in pluginFormItems" :key="index" :config="item" :form="pluginConfigForm" />
      </VCardText>
-      <VCardActions>
-        <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo">
+      <VCardActions class="pt-3">
+        <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo" variant="outlined" color="info">
          查看数据
        </VBtn>
        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="savePluginConf"
-        >
-          保存
-        </VBtn>
+        <VBtn @click="savePluginConf" variant="elevated" prepend-icon="mdi-content-save" class="px-5"> 保存 </VBtn>
      </VCardActions>
    </VCard>
  </VDialog>

  <!-- 插件数据页面 -->
-  <VDialog
-    v-model="pluginInfoDialog"
-    scrollable
-    max-width="80rem"
-  >
-    <VCard
-      :title="`${props.plugin?.plugin_name}`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn @click="pluginInfoDialog = false" />
-      <VCardText>
-        <PageRender
-          v-for="(item, index) in pluginPageItems"
-          :key="index"
-          :config="item"
-        />
-      </VCardText>
-      <VCardActions>
-        <VBtn
-          @click="showPluginConfig"
-        >
-          配置
-        </VBtn>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="pluginInfoDialog = false"
-        >
-          关闭
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-  <!-- 更新插件进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
+  <VDialog v-model="pluginInfoDialog" scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="`${props.plugin?.plugin_name}`" class="rounded-t">
+      <DialogCloseBtn v-model="pluginInfoDialog" />
+      <VCardText class="min-h-40">
+        <PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
      </VCardText>
+      <VFab icon="mdi-cog" location="bottom" size="x-large" fixed app appear @click="showPluginConfig" />
    </VCard>
  </VDialog>
+
+  <!-- 进度框 -->
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+
  <!-- 更新日志 -->
-  <VDialog
-    v-if="releaseDialog"
-    v-model="releaseDialog"
-    width="600"
-    scrollable
-  >
-    <VCard>
+  <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
+    <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
      <DialogCloseBtn @click="releaseDialog = false" />
-      <VCardTitle>{{ props.plugin?.plugin_name }} 更新说明</VCardTitle>
+      <VDivider />
      <VersionHistory :history="props.plugin?.history" />
+      <VDivider />
      <VCardText>
-        <VBtn
-          @click="updatePlugin"
-          block
-        >
+        <VBtn @click="updatePlugin" block>
          <template #prepend>
            <VIcon icon="mdi-arrow-up-circle-outline" />
          </template>
@@ -592,7 +512,7 @@ watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: rgba(29, 39, 59, 48%);
-  content: "";
+  content: '';
  inset: 0;
 }
 </style>
--- a/src/components/cards/PosterCard.vue
+++ b/src/components/cards/PosterCard.vue
@@ -18,26 +18,21 @@ const imageLoadError = ref(false)

 // 角标颜色
 function getChipColor(type: string) {
-  if (type === '电影')
-    return 'border-blue-500 bg-blue-600'
-  else if (type === '电视剧')
-    return ' bg-indigo-500 border-indigo-600'
-  else
-    return 'border-purple-600 bg-purple-600'
+  if (type === '电影') return 'border-blue-500 bg-blue-600'
+  else if (type === '电视剧') return ' bg-indigo-500 border-indigo-600'
+  else return 'border-purple-600 bg-purple-600'
 }

 // 计算图片地址
 const getImgUrl = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
  const image = props.media?.image || ''
-  return `${import.meta.env.VITE_API_BASE_URL}system/img/0/${encodeURIComponent(image).replace(/%2F/g, '/')}`
+  return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
 })

 // 跳转播放
-function goPlay() {
-  if (props.media?.link)
-    window.open(props.media?.link, '_blank')
+function goPlay(isHovering = false) {
+  if (props.media?.link && isHovering) window.open(props.media?.link, '_blank')
 }
 </script>

@@ -53,7 +48,7 @@ function goPlay() {
          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
          'ring-1': isImageLoaded,
        }"
-        @click.stop="goPlay"
+        @click.stop="goPlay(hover.isHovering)"
      >
        <VImg
          aspect-ratio="2/3"
@@ -72,24 +67,24 @@ function goPlay() {
        </VImg>
        <!-- 类型角标 -->
        <VChip
-            v-show="isImageLoaded"
-            variant="elevated"
-            size="small"
-            :class="getChipColor(props.media?.type || '')"
-            class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
-          >
-            {{ props.media?.type }}
-          </VChip>
-          <!-- 详情 -->
-          <VCardText
-            v-show="hover.isHovering || imageLoadError"
-            class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
-          >
-            <span class="font-bold">{{ props.media?.subtitle }}</span>
-            <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
-              {{ props.media?.title }}
-            </h1>
-          </VCardText>
+          v-show="isImageLoaded"
+          variant="elevated"
+          size="small"
+          :class="getChipColor(props.media?.type || '')"
+          class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
+        >
+          {{ props.media?.type }}
+        </VChip>
+        <!-- 详情 -->
+        <VCardText
+          v-show="hover.isHovering || imageLoadError"
+          class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
+        >
+          <span class="font-bold">{{ props.media?.subtitle }}</span>
+          <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+            {{ props.media?.title }}
+          </h1>
+        </VCardText>
      </VCard>
    </template>
  </VHover>
--- a/src/components/cards/SiteCard.vue
+++ b/src/components/cards/SiteCard.vue
@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import { useToast } from 'vue-toast-notification'
-import SiteAddEditForm from '../form/SiteAddEditForm.vue'
+import SiteAddEditDialog from '../dialog/SiteAddEditDialog.vue'
 import SiteTorrentTable from '../table/SiteTorrentTable.vue'
 import { requiredValidator } from '@/@validators'
 import api from '@/api'
 import type { Site, SiteStatistic } from '@/api/types'
-import ExistIcon from '@core/components/ExistIcon.vue'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()

 // 输入参数
 const cardProps = defineProps({
@@ -65,8 +70,7 @@ const siteStats = ref<SiteStatistic>({})
 async function getSiteIcon() {
  try {
    siteIcon.value = (await api.get(`site/icon/${cardProps.site?.id}`)).data.icon
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }
@@ -78,17 +82,14 @@ async function testSite() {
    testButtonDisable.value = true

    const result: { [key: string]: any } = await api.get(`site/test/${cardProps.site?.id}`)
-    if (result.success)
-      $toast.success(`${cardProps.site?.name} 连通性测试成功，可正常使用！`)
-    else
-      $toast.error(`${cardProps.site?.name} 连通性测试失败：${result.message}`)
+    if (result.success) $toast.success(`${cardProps.site?.name} 连通性测试成功，可正常使用！`)
+    else $toast.error(`${cardProps.site?.name} 连通性测试失败：${result.message}`)

    testButtonText.value = '测试'
    testButtonDisable.value = false

    getSiteStats()
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }
@@ -96,9 +97,8 @@ async function testSite() {
 // 查询站点使用统计
 async function getSiteStats() {
  try {
-    siteStats.value = (await api.get(`site/statistic/${cardProps.site?.domain}`))
-  }
-  catch (error) {
+    siteStats.value = await api.get(`site/statistic/${cardProps.site?.domain}`)
+  } catch (error) {
    console.error(error)
  }
 }
@@ -116,8 +116,7 @@ async function handleResourceBrowse() {
 // 调用API，更新站点Cookie UA
 async function updateSiteCookie() {
  try {
-    if (!userPwForm.value.username || !userPwForm.value.password)
-      return
+    if (!userPwForm.value.username || !userPwForm.value.password) return

    // 更新按钮状态
    siteCookieDialog.value = false
@@ -126,26 +125,20 @@ async function updateSiteCookie() {
    progressDialog.value = true
    progressText.value = `正在更新 ${cardProps.site?.name} Cookie & UA ...`

-    const result: { [key: string]: any } = await api.get(
-      `site/cookie/${cardProps.site?.id}`,
-      {
-        params: {
-          username: userPwForm.value.username,
-          password: userPwForm.value.password,
-          code: userPwForm.value.code,
-        },
+    const result: { [key: string]: any } = await api.get(`site/cookie/${cardProps.site?.id}`, {
+      params: {
+        username: userPwForm.value.username,
+        password: userPwForm.value.password,
+        code: userPwForm.value.code,
      },
-    )
+    })

-    if (result.success)
-      $toast.success(`${cardProps.site?.name} 更新Cookie & UA 成功！`)
-    else
-      $toast.error(`${cardProps.site?.name} 更新失败：${result.message}`)
+    if (result.success) $toast.success(`${cardProps.site?.name} 更新Cookie & UA 成功！`)
+    else $toast.error(`${cardProps.site?.name} 更新失败：${result.message}`)

    progressDialog.value = false
    updateButtonDisable.value = false
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }
@@ -157,18 +150,29 @@ function openSitePage() {

 // 根据站点状态显示不同的状态图标
 const statColor = computed(() => {
-  if (siteStats.value?.lst_state == 1){
-    return 'error'
+  if (isNullOrEmptyObject(siteStats.value)) {
+    return 'secondary'
  }
-  else if (siteStats.value?.lst_state == 0){
-    if (!siteStats.value?.seconds)
-      return 'secondary'
-     if (siteStats.value?.seconds >= 10)
-      return 'warning'
+  if (siteStats.value?.lst_state == 1) {
+    return 'error'
+  } else if (siteStats.value?.lst_state == 0) {
+    if (!siteStats.value?.seconds) return 'secondary'
+    if (siteStats.value?.seconds >= 5) return 'warning'
    return 'success'
  }
 })

+// 监听resourceDialog，如果为false则重新查询站点使用统计
+watch(resourceDialog, value => {
+  if (!value) getSiteStats()
+})
+
+// 保存站点
+function saveSite() {
+  siteEditDialog.value = false
+  emit('update')
+}
+
 // 装载时查询站点图标
 onMounted(() => {
  getSiteIcon()
@@ -177,230 +181,142 @@ onMounted(() => {
 </script>

 <template>
-  <VCard
-    :height="cardProps.height"
-    :width="cardProps.width"
-    :variant="cardProps.site?.is_active ? 'elevated' : 'outlined'"
-    class="overflow-hidden"
-    @click="siteEditDialog = true"
-  >
-    <template #image>
-      <VAvatar
-        class="absolute right-2 bottom-2 rounded"
-        variant="flat"
-        rounded="0"
-      >
-        <VImg :src="siteIcon" />
-      </VAvatar>
-    </template>
-
-    <VCardItem>
-      <VCardTitle class="font-bold">
-        <span @click.stop="openSitePage">{{ cardProps.site?.name }}</span>
-      </VCardTitle>
-      <VCardSubtitle>
-        <span @click.stop="openSitePage">{{ cardProps.site?.url }}</span>
-      </VCardSubtitle>
-    </VCardItem>
-
-    <StatIcon v-if="cardProps.site?.is_active" :color="statColor" />
-
-    <VCardText class="py-2">
-      <VTooltip
-        v-if="cardProps.site?.render === 1"
-        text="浏览器仿真"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-apple-safari"
-          />
-        </template>
-      </VTooltip>
-
-      <VTooltip
-        v-if="cardProps.site?.proxy === 1"
-        text="代理"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-network-outline"
-          />
-        </template>
-      </VTooltip>
-
-      <VTooltip
-        v-if="cardProps.site?.limit_interval"
-        text="流控"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-speedometer"
-          />
-        </template>
-      </VTooltip>
-
-      <VTooltip
-        v-if="cardProps.site?.filter"
-        text="过滤"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-filter-cog-outline"
-          />
-        </template>
-      </VTooltip>
-    </VCardText>
-
-    <VDivider
-      class="opacity-75"
-      style="border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));"
-    />
-
-    <VCardActions>
-      <VBtn
-        v-if="!cardProps.site?.public"
-        :disabled="updateButtonDisable"
-        @click.stop="handleSiteUpdate"
-      >
-        <template #prepend>
-          <VIcon icon="mdi-refresh" />
-        </template>
-        更新
-      </VBtn>
-      <VBtn
-        :disabled="testButtonDisable"
-        @click.stop="testSite"
-      >
-        <template #prepend>
-          <VIcon icon="mdi-link" />
-        </template>
-        {{ testButtonText }}
-      </VBtn>
-      <VBtn @click.stop="handleResourceBrowse">
-        <template #prepend>
-          <VIcon icon="mdi-web" />
-        </template>
-        浏览
-      </VBtn>
-    </VCardActions>
-  </VCard>
-  <!-- 更新站点Cookie & UA弹窗 -->
-  <VDialog
-    v-model="siteCookieDialog"
-    max-width="50rem"
-  >
-    <!-- Dialog Content -->
-    <VCard title="更新站点Cookie & UA">
-      <VCardText>
-        <VForm @submit.prevent="() => {}">
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="userPwForm.username"
-                label="用户名"
-                :rules="[requiredValidator]"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="userPwForm.password"
-                label="密码"
-                :type="isPasswordVisible ? 'text' : 'password'"
-                :append-inner-icon="
-                  isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
-                "
-                :rules="[requiredValidator]"
-                @click:append-inner="isPasswordVisible = !isPasswordVisible"
-                @keydown.enter="updateSiteCookie"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="userPwForm.code"
-                label="两步验证"
-              />
-            </VCol>
-          </VRow>
-        </VForm>
+  <div>
+    <VCard
+      :height="cardProps.height"
+      :width="cardProps.width"
+      :variant="cardProps.site?.is_active ? 'elevated' : 'outlined'"
+      class="overflow-hidden"
+      @click="siteEditDialog = true"
+    >
+      <template #image>
+        <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
+          <VImg :src="siteIcon" />
+        </VAvatar>
+      </template>
+      <VCardItem style="padding-block-end: 0;">
+        <VCardTitle class="font-bold">
+          <span @click.stop="openSitePage">{{ cardProps.site?.name }}</span>
+        </VCardTitle>
+        <VCardSubtitle>
+          <span @click.stop="openSitePage">{{ cardProps.site?.url }}</span>
+        </VCardSubtitle>
+      </VCardItem>
+      <VCardText class="py-2" style="block-size: 36px;">
+        <VTooltip v-if="cardProps.site?.limit_interval" text="流控">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-speedometer" />
+          </template>
+        </VTooltip>
+        <VTooltip v-if="cardProps.site?.proxy === 1" text="代理">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-network-outline" />
+          </template>
+        </VTooltip>
+        <VTooltip v-if="cardProps.site?.render === 1" text="浏览器仿真">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-apple-safari" />
+          </template>
+        </VTooltip>
+        <VTooltip v-if="cardProps.site?.filter" text="过滤">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-filter-cog-outline" />
+          </template>
+        </VTooltip>
      </VCardText>
-
+      <VDivider />
      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="updateSiteCookie"
-        >
-          开始更新
+        <VBtn v-if="!cardProps.site?.public" :disabled="updateButtonDisable" @click.stop="handleSiteUpdate">
+          <template #prepend>
+            <VIcon icon="mdi-refresh" />
+          </template>
+          更新
+        </VBtn>
+        <VBtn :disabled="testButtonDisable" @click.stop="testSite">
+          <template #prepend>
+            <VIcon icon="mdi-link" />
+          </template>
+          {{ testButtonText }}
+        </VBtn>
+        <VBtn @click.stop="handleResourceBrowse">
+          <template #prepend>
+            <VIcon icon="mdi-web" />
+          </template>
+          浏览
        </VBtn>
      </VCardActions>
+      <StatIcon v-if="cardProps.site?.is_active" :color="statColor" />
+      <span class="absolute top-1 right-8">
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </span>
    </VCard>
-  </VDialog>
-  <SiteAddEditForm
-    v-if="siteEditDialog"
-    v-model="siteEditDialog"
-    :siteid="cardProps.site?.id"
-    @save="siteEditDialog = false; emit('update')"
-    @remove="emit('remove')"
-    @close="siteEditDialog = false"
-  />
-  <!-- 站点资源弹窗 -->
-  <VDialog
-    v-if="resourceDialog"
-    v-model="resourceDialog"
-    max-width="80rem"
-    scrollable
-    z-index="1010"
-  >
-    <!-- Dialog Content -->
-    <VCard :title="`浏览站点 - ${cardProps.site?.name}`">
-      <DialogCloseBtn @click="resourceDialog = false" />
-      <VCardText class="pt-2">
-        <SiteTorrentTable :site="cardProps.site?.id" />
-      </VCardText>
-    </VCard>
-  </VDialog>
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
+    <!-- 更新站点Cookie & UA弹窗 -->
+    <VDialog v-model="siteCookieDialog" max-width="50rem">
+      <!-- Dialog Content -->
+      <VCard title="更新站点Cookie & UA">
+        <DialogCloseBtn @click="siteCookieDialog = false" />
+        <VCardText>
+          <VForm @submit.prevent="() => {}">
+            <VRow>
+              <VCol cols="12" md="4">
+                <VTextField v-model="userPwForm.username" label="用户名" :rules="[requiredValidator]" />
+              </VCol>
+              <VCol cols="12" md="4">
+                <VTextField
+                  v-model="userPwForm.password"
+                  label="密码"
+                  :type="isPasswordVisible ? 'text' : 'password'"
+                  :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                  :rules="[requiredValidator]"
+                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                  @keydown.enter="updateSiteCookie"
+                />
+              </VCol>
+              <VCol cols="12" md="4">
+                <VTextField v-model="userPwForm.code" label="两步验证" />
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+
+        <VCardActions>
+          <VSpacer />
+          <VBtn variant="elevated" @click="updateSiteCookie" prepend-icon="mdi-refresh" class="px-5"> 开始更新 </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+    <!-- 站点编辑弹窗 -->
+    <SiteAddEditDialog
+      v-if="siteEditDialog"
+      v-model="siteEditDialog"
+      :siteid="cardProps.site?.id"
+      @save="saveSite"
+      @remove="emit('remove')"
+      @close="siteEditDialog = false"
+    />
+    <!-- 站点资源弹窗 -->
+    <VDialog
+      v-if="resourceDialog"
+      v-model="resourceDialog"
+      max-width="80rem"
+      scrollable
+      z-index="1010"
+      :fullscreen="!display.mdAndUp.value"
    >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
-      </VCardText>
-    </VCard>
-  </VDialog>
+      <VCard :title="`浏览站点 - ${cardProps.site?.name}`">
+        <DialogCloseBtn @click="resourceDialog = false" />
+        <VDivider />
+        <VCardText class="pt-2">
+          <SiteTorrentTable :site="cardProps.site?.id" />
+        </VCardText>
+      </VCard>
+    </VDialog>
+    <!-- 进度框 -->
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+  </div>
 </template>

-<style lang="scss">
+<style lang="scss" scoped>
 .v-table th {
  white-space: nowrap;
 }
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -1,7 +1,8 @@
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
-import SubscribeEditForm from '../form/SubscribeEditForm.vue'
-import { calculateTimeDifference } from '@/@core/utils'
+import { useConfirm } from 'vuetify-use-dialog'
+import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
+import { formatDateDifference } from '@/@core/utils/formatters'
 import { formatSeason } from '@/@core/utils/formatters'
 import api from '@/api'
 import type { Subscribe } from '@/api/types'
@@ -15,6 +16,9 @@ const props = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['remove', 'save'])

+// 确认框
+const createConfirm = useConfirm()
+
 // 提示框
 const $toast = useToast()

@@ -25,13 +29,7 @@ const imageLoaded = ref(false)
 const subscribeEditDialog = ref(false)

 // 上一次更新时间
-const lastUpdateText = ref(
-  `${
-    props.media?.last_update
-      ? `${calculateTimeDifference(props.media?.last_update || '')}前`
-      : ''
-  }`,
-)
+const lastUpdateText = ref(props.media && props.media.last_update ? formatDateDifference(props.media.last_update) : '')

 // 图片加载完成响应
 function imageLoadHandler() {
@@ -40,49 +38,30 @@ function imageLoadHandler() {

 // 根据 type 返回不同的图标
 function getIcon() {
-  if (props.media?.type === '电影')
-    return 'mdi-movie'
-  else if (props.media?.type === '电视剧')
-    return 'mdi-television-classic'
-  else
-    return 'mdi-help-circle'
+  if (props.media?.type === '电影') return 'mdi-movie-open'
+  else if (props.media?.type === '电视剧') return 'mdi-television-play'
+  else return 'mdi-help-circle'
 }

 // 计算百分比
 function getPercentage() {
-  if (props.media?.total_episode === 0)
-    return 0
+  if (props.media?.total_episode === 0) return 0

  return Math.round(
-    (((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0))
-      / (props.media?.total_episode ?? 1))
-    * 100,
+    (((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0)) / (props.media?.total_episode ?? 1)) * 100,
  )
 }

-// 计算文本颜色
-function getTextColor() {
-  return imageLoaded.value ? 'white' : ''
-}
-
-// 计算文本类
-function getTextClass() {
-  return imageLoaded.value ? 'text-white' : ''
-}
-
 // 删除订阅
 async function removeSubscribe() {
  try {
-    const result: { [key: string]: any } = await api.delete(
-      `subscribe/${props.media?.id}`,
-    )
+    const result: { [key: string]: any } = await api.delete(`subscribe/${props.media?.id}`)

    if (result.success) {
      // 通知父组件刷新
      emit('remove')
    }
-  }
-  catch (e) {
+  } catch (e) {
    console.log(e)
  }
 }
@@ -90,15 +69,32 @@ async function removeSubscribe() {
 // 搜索订阅
 async function searchSubscribe() {
  try {
-    const result: { [key: string]: any } = await api.get(
-      `subscribe/search/${props.media?.id}`,
-    )
+    const result: { [key: string]: any } = await api.get(`subscribe/search/${props.media?.id}`)

    // 提示
-    if (result.success)
-      $toast.success(`${props.media?.name} 提交搜索请求成功！`)
+    if (result.success) $toast.success(`${props.media?.name} 提交搜索请求成功！`)
+  } catch (e) {
+    console.log(e)
  }
-  catch (e) {
+}
+
+// 重置订阅
+async function resetSubscribe() {
+  // 确认
+  try {
+    const isConfirmed = await createConfirm({
+      title: '确认',
+      content: `重置后 ${props.media?.name} 已下载记录将被清除，未入库的剧集将会重新下载，是否确认？`,
+    })
+    if (!isConfirmed) return
+    // 重置
+    const result: { [key: string]: any } = await api.get(`subscribe/reset/${props.media?.id}`)
+    // 提示
+    if (result.success) {
+      $toast.success(`${props.media?.name} 重置成功！`)
+      emit('save')
+    } else $toast.error(`${props.media?.name} 重置失败：${result.message}`)
+  } catch (e) {
    console.log(e)
  }
 }
@@ -108,6 +104,17 @@ async function editSubscribeDialog() {
  subscribeEditDialog.value = true
 }

+// 查看详情
+async function viewMediaDetail() {
+  router.push({
+    path: '/media',
+    query: {
+      mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
+      type: props.media?.type,
+    },
+  })
+}
+
 // 弹出菜单
 const dropdownItems = ref([
  {
@@ -131,24 +138,22 @@ const dropdownItems = ref([
    value: 3,
    props: {
      prependIcon: 'mdi-open-in-new',
-      click: () => {
-        router.push({
-          path: '/media',
-          query: {
-            mediaid: `${
-              props.media?.tmdbid
-                ? `tmdb:${props.media?.tmdbid}`
-                : `douban:${props.media?.doubanid}`
-            }`,
-            type: props.media?.type,
-          },
-        })
-      },
+      click: viewMediaDetail,
    },
  },
  {
-    title: '取消订阅',
+    title: '重置',
    value: 4,
+    props: {
+      prependIcon: 'mdi-restore-alert',
+      click: resetSubscribe,
+      color: 'warning',
+    },
+    show: props.media?.type === '电视剧',
+  },
+  {
+    title: '取消订阅',
+    value: 5,
    props: {
      prependIcon: 'mdi-trash-can-outline',
      color: 'error',
@@ -156,140 +161,144 @@ const dropdownItems = ref([
    },
  },
 ])
+
+// 监听插件窗口状态变化
+watch(
+  () => props.media?.page_open,
+  (newOpenState, _) => {
+    if (newOpenState) editSubscribeDialog()
+  },
+)
 </script>

 <template>
-  <VCard
-    :key="props.media?.id"
-    :class="`${props.media?.best_version ? 'outline-dashed outline-1' : ''}`"
-    @click="editSubscribeDialog"
-  >
-    <template #image>
-      <VImg
-        :src="props.media?.backdrop || props.media?.poster"
-        aspect-ratio="2/3"
-        cover
-        class="brightness-50"
-        @load="imageLoadHandler"
-      />
-    </template>
-    <VCardItem>
-      <template #prepend>
-        <VIcon
-          size="1.9rem"
-          :color="getTextColor()"
-          :icon="getIcon()"
-        />
-      </template>
-      <VCardTitle :class="getTextClass()">
-        {{ props.media?.name }}
-        {{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }}
-      </VCardTitle>
-      <template #append>
-        <div class="me-n3">
+  <VHover>
+    <template #default="hover">
+      <VCard
+        v-bind="hover.props"
+        :key="props.media?.id"
+        class="flex flex-col rounded-lg"
+        :class="{
+          'outline-dashed outline-1': props.media?.best_version && imageLoaded,
+          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+        }"
+        min-height="170"
+        @click="editSubscribeDialog"
+      >
+        <div class="me-n3 absolute top-1 right-2">
          <IconBtn>
-            <VIcon
-              icon="mdi-dots-vertical"
-              :color="getTextColor()"
-            />
-            <VMenu
-              activator="parent"
-              close-on-content-click
-            >
+            <VIcon icon="mdi-dots-vertical" color="white" />
+            <VMenu activator="parent" close-on-content-click>
              <VList>
-                <VListItem
-                  v-for="(item, i) in dropdownItems"
-                  :key="i"
-                  variant="plain"
-                  :base-color="item.props.color"
-                  @click="item.props.click"
-                >
-                  <template #prepend>
-                    <VIcon :icon="item.props.prependIcon" />
-                  </template>
-                  <VListItemTitle v-text="item.title" />
-                </VListItem>
+                <template v-for="(item, i) in dropdownItems" :key="i">
+                  <VListItem
+                    v-if="item.show !== false"
+                    variant="plain"
+                    :base-color="item.props.color"
+                    @click="item.props.click"
+                  >
+                    <template #prepend>
+                      <VIcon :icon="item.props.prependIcon" />
+                    </template>
+                    <VListItemTitle v-text="item.title" />
+                  </VListItem>
+                </template>
              </VList>
            </VMenu>
          </IconBtn>
        </div>
-      </template>
-    </VCardItem>
-
-    <VCardText>
-      <p
-        class="clamp-text mb-0"
-        :class="getTextClass()"
-      >
-        {{ props.media?.description }}
-      </p>
-    </VCardText>
-
-    <VCardText class="d-flex justify-space-between align-center flex-wrap">
-      <div class="d-flex align-center">
-        <IconBtn
-          icon="mdi-star"
-          :color="getTextColor()"
-          class="me-1"
-        />
-        <span
-          class="text-subtitle-2 me-4"
-          :class="getTextClass()"
-        >{{
-          props.media?.vote
-        }}</span>
-        <IconBtn
-          v-if="props.media?.total_episode"
-          v-bind="props"
-          icon="mdi-progress-clock"
-          :color="getTextColor()"
-          class="me-1"
-        />
-        <span
-          v-if="props.media?.season"
-          class="text-subtitle-2 me-4"
-          :class="getTextClass()"
-        >{{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
-          {{ props.media?.total_episode }}</span>
-        <IconBtn
-          v-if="props.media?.username"
-          icon="mdi-account"
-          :color="getTextColor()"
-          class="me-1"
-        />
-        <span
-          v-if="props.media?.username"
-          class="text-subtitle-2 me-4"
-          :class="getTextClass()"
-        >
-          {{ props.media?.username }}
-        </span>
-      </div>
-    </VCardText>
-    <VCardText
-      v-if="lastUpdateText"
-      class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300"
-    >
-      <VIcon
-        icon="mdi-download"
-        class="me-1"
-      />
-      {{ lastUpdateText }}
-    </VCardText>
-    <VProgressLinear
-      v-if="getPercentage() > 0"
-      :model-value="getPercentage()"
-      bg-color="success"
-      color="success"
-    />
-  </VCard>
+        <template #image>
+          <VImg
+            :src="props.media?.backdrop || props.media?.poster"
+            aspect-ratio="3/2"
+            cover
+            @load="imageLoadHandler"
+            position="top"
+          >
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+              </div>
+            </template>
+            <div class="absolute inset-0 subscribe-card-background"></div>
+          </VImg>
+        </template>
+        <div>
+          <VCardText class="flex items-center">
+            <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md shadow-lg" v-if="imageLoaded">
+              <VImg :src="props.media?.poster" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
+                <template #placeholder>
+                  <div class="w-full h-full">
+                    <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                  </div>
+                </template>
+              </VImg>
+            </div>
+            <div class="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
+              <div class="text-sm font-medium text-white sm:pt-1">{{ props.media?.year }}</div>
+              <div class="mr-2 min-w-0 text-lg font-bold text-white">
+                {{ props.media?.name }}
+                {{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }}
+              </div>
+            </div>
+          </VCardText>
+          <VCardText class="flex justify-space-between align-center flex-wrap">
+            <div class="flex align-center">
+              <IconBtn
+                v-if="props.media?.total_episode"
+                v-bind="props"
+                icon="mdi-progress-download"
+                color="white"
+                class="me-1"
+              />
+              <div v-if="props.media?.season" class="text-subtitle-2 me-4 text-white">
+                {{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
+                {{ props.media?.total_episode }}
+              </div>
+              <IconBtn v-if="props.media?.username" icon="mdi-account" color="white" class="me-1" />
+              <span v-if="props.media?.username" class="text-subtitle-2 me-4 text-white">
+                {{ props.media?.username }}
+              </span>
+            </div>
+          </VCardText>
+          <VCardText v-if="lastUpdateText" class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
+            <VIcon icon="mdi-download" class="me-1" />
+            {{ lastUpdateText }}
+          </VCardText>
+          <div class="w-full absolute bottom-0">
+            <VProgressLinear
+              v-if="getPercentage() > 0"
+              :model-value="getPercentage()"
+              bg-color="success"
+              color="success"
+            />
+          </div>
+        </div>
+      </VCard>
+    </template>
+  </VHover>
  <!-- 订阅编辑弹窗 -->
-  <SubscribeEditForm
+  <SubscribeEditDialog
    v-if="subscribeEditDialog"
    v-model="subscribeEditDialog"
    :subid="props.media?.id"
-    @remove="() => { emit('remove');subscribeEditDialog = false; }"
-    @save="() => { emit('save');subscribeEditDialog = false; }"
+    @remove="
+      () => {
+        emit('remove')
+        subscribeEditDialog = false
+      }
+    "
+    @save="
+      () => {
+        emit('save')
+        subscribeEditDialog = false
+      }
+    "
    @close="subscribeEditDialog = false"
  />
 </template>
+<style lang="scss">
+.subscribe-card-background {
+  background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+}
+</style>
--- a/src/components/cards/TorrentCard.vue
+++ b/src/components/cards/TorrentCard.vue
@@ -43,16 +43,13 @@ const downloaded = ref<String[]>([])
 async function getSiteIcon() {
  try {
    siteIcon.value = (await api.get(`site/icon/${torrent?.value?.site}`)).data.icon
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }

 // 询问并添加下载
-async function handleAddDownload(_site: any = undefined,
-  _media: any = undefined,
-  _torrent: any = undefined) {
+async function handleAddDownload(_site: any = undefined, _media: any = undefined, _torrent: any = undefined) {
  if (!_media || !_torrent || !_site) {
    _site = torrent.value?.site_name
    _media = media.value
@@ -62,18 +59,9 @@ async function handleAddDownload(_site: any = undefined,
  const isConfirmed = await createConfirm({
    title: '确认',
    content: `是否确认下载【${_site}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
  })

-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return

  addDownload(_media, _torrent)
 }
@@ -82,22 +70,26 @@ async function handleAddDownload(_site: any = undefined,
 async function addDownload(_media: MediaInfo, _torrent: TorrentInfo) {
  startNProgress()
  try {
-    const result: { [key: string]: any } = await api.post('download/', {
-      media_in: _media,
-      torrent_in: _torrent,
-    })
+    let result: { [key: string]: any }

-    if (result.success) {
+    if (_media) {
+      result = await api.post('download/', {
+        media_in: _media,
+        torrent_in: _torrent,
+      })
+    } else {
+      result = await api.post('download/add', _torrent)
+    }
+
+    if (result && result.success) {
      // 添加下载成功
-      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
+      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 下载成功！`)
      downloaded.value.push(_torrent?.enclosure || '')
-    }
-    else {
+    } else {
      // 添加下载失败
-      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败！`)
+      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 下载失败：${result?.message}！`)
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
  doneNProgress()
@@ -115,14 +107,10 @@ async function downloadTorrentFile() {

 // 促销Chip类
 function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
-  if (downloadVolume === 0)
-    return 'text-white bg-lime-500'
-  else if (downloadVolume < 1)
-    return 'text-white bg-green-500'
-  else if (uploadVolume !== 1)
-    return 'text-white bg-sky-500'
-  else
-    return 'text-white bg-gray-500'
+  if (downloadVolume === 0) return 'text-white bg-lime-500'
+  else if (downloadVolume < 1) return 'text-white bg-green-500'
+  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
+  else return 'text-white bg-gray-500'
 }

 // 装载时查询站点图标
@@ -138,39 +126,24 @@ onMounted(() => {
    :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'elevated'"
    @click="handleAddDownload"
  >
-    <template
-      v-if="!showMoreTorrents"
-      #image
-    >
-      <VAvatar
-        class="absolute right-2 bottom-2 rounded"
-        variant="flat"
-        rounded="0"
-      >
+    <template v-if="!showMoreTorrents" #image>
+      <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
        <VImg :src="siteIcon" />
      </VAvatar>
    </template>
    <VCardItem class="py-1">
      <VCardTitle class="break-words overflow-visible whitespace-break-spaces">
-        {{ media?.title }} {{ meta?.season_episode }}
+        {{ media?.title ?? meta?.name }} {{ meta?.season_episode }}
        <span class="text-green-700 ms-2 text-sm">↑{{ torrent?.seeders }}</span>
        <span class="text-orange-700 ms-2 text-sm">↓{{ torrent?.peers }}</span>
      </VCardTitle>
      <template #append>
        <div class="me-n3">
          <IconBtn>
-            <VIcon
-              icon="mdi-dots-vertical"
-            />
-            <VMenu
-              activator="parent"
-              close-on-content-click
-            >
+            <VIcon icon="mdi-dots-vertical" />
+            <VMenu activator="parent" close-on-content-click>
              <VList>
-                <VListItem
-                  variant="plain"
-                  @click="openTorrentDetail()"
-                >
+                <VListItem variant="plain" @click="openTorrentDetail()">
                  <template #prepend>
                    <VIcon icon="mdi-information" />
                  </template>
@@ -196,25 +169,11 @@ onMounted(() => {
      {{ torrent?.title }}
    </VCardText>
    <VCardText>{{ torrent?.description }}</VCardText>
-    <VCardItem
-      v-if="torrent?.labels"
-      class="pb-3 pt-0 pe-12"
-    >
-      <VChip
-        v-if="torrent?.hit_and_run"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-black"
-      >
+    <VCardItem v-if="torrent?.labels" class="pb-3 pt-0 pe-12">
+      <VChip v-if="torrent?.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
        H&R
      </VChip>
-      <VChip
-        v-if="torrent?.freedate_diff"
-        variant="elevated"
-        color="secondary"
-        size="small"
-        class="me-1 mb-1"
-      >
+      <VChip v-if="torrent?.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
        {{ torrent?.freedate_diff }}
      </VChip>
      <VChip
@@ -227,51 +186,24 @@ onMounted(() => {
      >
        {{ label }}
      </VChip>
-      <VChip
-        v-if="meta?.edition"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
+      <VChip v-if="meta?.edition" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
        {{ meta?.edition }}
      </VChip>
-      <VChip
-        v-if="meta?.resource_pix"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
+      <VChip v-if="meta?.resource_pix" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
        {{ meta?.resource_pix }}
      </VChip>
-      <VChip
-        v-if="meta?.video_encode"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-orange-500"
-      >
+      <VChip v-if="meta?.video_encode" variant="elevated" size="small" class="me-1 mb-1 text-white bg-orange-500">
        {{ meta?.video_encode }}
      </VChip>
-      <VChip
-        v-if="torrent?.size"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-yellow-500"
-      >
+      <VChip v-if="torrent?.size" variant="elevated" size="small" class="me-1 mb-1 text-white bg-yellow-500">
        {{ formatFileSize(torrent?.size) }}
      </VChip>
-      <VChip
-        v-if="meta?.resource_team"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-cyan-500"
-      >
+      <VChip v-if="meta?.resource_team" variant="elevated" size="small" class="me-1 mb-1 text-white bg-cyan-500">
        {{ meta?.resource_team }}
      </VChip>
      <VChip
        v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
-        :class="
-          getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)
-        "
+        :class="getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
        variant="elevated"
        size="small"
        class="me-1 mb-1"
@@ -280,10 +212,7 @@ onMounted(() => {
      </VChip>
    </VCardItem>
    <VCardActions>
-      <VBtn
-        v-if="props.more && props.more.length > 0"
-        @click.stop="showMoreTorrents = !showMoreTorrents"
-      >
+      <VBtn v-if="props.more && props.more.length > 0" @click.stop="showMoreTorrents = !showMoreTorrents">
        <template #append>
          <VIcon :icon="showMoreTorrents ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
        </template>
@@ -293,30 +222,16 @@ onMounted(() => {
    <VExpandTransition>
      <div v-show="showMoreTorrents">
        <VDivider />
-        <VChipGroup class="p-3">
+        <VChipGroup class="p-3" column>
          <VChip
            v-for="(item, index) in props.more"
            :key="index"
-            @click.stop="
-              handleAddDownload(
-                item.torrent_info?.site_name,
-                item.media_info,
-                item.torrent_info,
-              )
-            "
+            @click.stop="handleAddDownload(item.torrent_info?.site_name, item.media_info, item.torrent_info)"
          >
            <template #append>
+              <VBadge color="primary" :content="`↑${item.torrent_info?.seeders}`" inline size="small" />
              <VBadge
-                color="primary"
-                :content="`↑${item.torrent_info?.seeders}`"
-                inline
-                size="small"
-              />
-              <VBadge
-                v-if="
-                  item.torrent_info?.downloadvolumefactor !== 1
-                    || item.torrent_info?.uploadvolumefactor !== 1
-                "
+                v-if="item.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
                :content="item.torrent_info?.volume_factor"
                inline
                size="small"
--- a/src/components/cards/TorrentItem.vue
+++ b/src/components/cards/TorrentItem.vue
@@ -5,7 +5,7 @@ import { useConfirm } from 'vuetify-use-dialog'
 import { formatFileSize } from '@/@core/utils/formatters'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
-import type { Context, MediaInfo, TorrentInfo  } from '@/api/types'
+import type { Context, MediaInfo, TorrentInfo } from '@/api/types'

 // 输入参数
 const props = defineProps({
@@ -40,16 +40,13 @@ const downloaded = ref<String[]>([])
 async function getSiteIcon() {
  try {
    siteIcon.value = (await api.get(`site/icon/${torrent?.value?.site}`)).data.icon
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }

 // 询问并添加下载
-async function handleAddDownload(_site: any = undefined,
-  _media: any = undefined,
-  _torrent: any = undefined) {
+async function handleAddDownload(_site: any = undefined, _media: any = undefined, _torrent: any = undefined) {
  if (!_media || !_torrent || !_site) {
    _site = torrent.value?.site_name
    _media = media.value
@@ -59,18 +56,9 @@ async function handleAddDownload(_site: any = undefined,
  const isConfirmed = await createConfirm({
    title: '确认',
    content: `是否确认下载【${_site}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
  })

-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return

  addDownload(_media, _torrent)
 }
@@ -79,22 +67,26 @@ async function handleAddDownload(_site: any = undefined,
 async function addDownload(_media: MediaInfo, _torrent: TorrentInfo) {
  startNProgress()
  try {
-    const result: { [key: string]: any } = await api.post('download/', {
-      media_in: _media,
-      torrent_in: _torrent,
-    })
+    let result: { [key: string]: any }

-    if (result.success) {
+    if (_media) {
+      result = await api.post('download/', {
+        media_in: _media,
+        torrent_in: _torrent,
+      })
+    } else {
+      result = await api.post('download/add', _torrent)
+    }
+
+    if (result && result.success) {
      // 添加下载成功
-      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
+      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 下载成功！`)
      downloaded.value.push(_torrent?.enclosure || '')
-    }
-    else {
+    } else {
      // 添加下载失败
-      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败！`)
+      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 下载失败：${result?.message}！`)
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
  doneNProgress()
@@ -112,14 +104,10 @@ async function downloadTorrentFile() {

 // 促销Chip类
 function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
-  if (downloadVolume === 0)
-    return 'text-white bg-lime-500'
-  else if (downloadVolume < 1)
-    return 'text-white bg-green-500'
-  else if (uploadVolume !== 1)
-    return 'text-white bg-sky-500'
-  else
-    return 'text-white bg-gray-500'
+  if (downloadVolume === 0) return 'text-white bg-lime-500'
+  else if (downloadVolume < 1) return 'text-white bg-green-500'
+  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
+  else return 'text-white bg-gray-500'
 }

 // 装载时查询站点图标
@@ -129,19 +117,9 @@ onMounted(() => {
 </script>

 <template>
-  <VListItem 
-    @click="handleAddDownload"
-    :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'"
-  >
-    <template
-      v-if="!showMoreTorrents"
-      #prepend
-    >
-      <VAvatar
-        class="rounded"
-        variant="flat"
-        @click.stop="openTorrentDetail"
-      >
+  <VListItem @click="handleAddDownload" :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'">
+    <template v-if="!showMoreTorrents" #prepend>
+      <VAvatar class="rounded" variant="flat" @click.stop="openTorrentDetail">
        <VImg :src="siteIcon" />
      </VAvatar>
    </template>
@@ -153,25 +131,11 @@ onMounted(() => {
    <VListItemSubtitle>
      {{ torrent?.description }}
    </VListItemSubtitle>
-    <div
-      v-if="torrent?.labels"
-      class="pt-2"
-    >
-      <VChip
-        v-if="torrent?.hit_and_run"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-black"
-      >
+    <div v-if="torrent?.labels" class="pt-2">
+      <VChip v-if="torrent?.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
        H&R
      </VChip>
-      <VChip
-        v-if="torrent?.freedate_diff"
-        variant="elevated"
-        color="secondary"
-        size="small"
-        class="me-1 mb-1"
-      >
+      <VChip v-if="torrent?.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
        {{ torrent?.freedate_diff }}
      </VChip>
      <VChip
@@ -184,51 +148,24 @@ onMounted(() => {
      >
        {{ label }}
      </VChip>
-      <VChip
-        v-if="meta?.edition"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
+      <VChip v-if="meta?.edition" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
        {{ meta?.edition }}
      </VChip>
-      <VChip
-        v-if="meta?.resource_pix"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
+      <VChip v-if="meta?.resource_pix" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
        {{ meta?.resource_pix }}
      </VChip>
-      <VChip
-        v-if="meta?.video_encode"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-orange-500"
-      >
+      <VChip v-if="meta?.video_encode" variant="elevated" size="small" class="me-1 mb-1 text-white bg-orange-500">
        {{ meta?.video_encode }}
      </VChip>
-      <VChip
-        v-if="torrent?.size"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-yellow-500"
-      >
+      <VChip v-if="torrent?.size" variant="elevated" size="small" class="me-1 mb-1 text-white bg-yellow-500">
        {{ formatFileSize(torrent?.size) }}
      </VChip>
-      <VChip
-        v-if="meta?.resource_team"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-cyan-500"
-      >
+      <VChip v-if="meta?.resource_team" variant="elevated" size="small" class="me-1 mb-1 text-white bg-cyan-500">
        {{ meta?.resource_team }}
      </VChip>
      <VChip
        v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
-        :class="
-          getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)
-        "
+        :class="getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
        variant="elevated"
        size="small"
        class="me-1 mb-1"
@@ -239,18 +176,10 @@ onMounted(() => {
    <template #append>
      <div class="me-n3">
        <IconBtn>
-          <VIcon
-            icon="mdi-dots-vertical"
-          />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
+          <VIcon icon="mdi-dots-vertical" />
+          <VMenu activator="parent" close-on-content-click>
            <VList>
-              <VListItem
-                variant="plain"
-                @click="openTorrentDetail()"
-              >
+              <VListItem variant="plain" @click="openTorrentDetail()">
                <template #prepend>
                  <VIcon icon="mdi-information" />
                </template>
--- a/src/components/dialog/AliyunAuthDialog.vue
+++ b/src/components/dialog/AliyunAuthDialog.vue
@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import QrcodeVue from 'qrcode.vue'
+import api from '@/api'
+
+// 定义事件
+const emit = defineEmits(['done', 'close'])
+
+// 二维码内容
+const qrCodeContent = ref('')
+
+// ck参数
+const ck = ref('')
+
+// t参数
+const t = ref('')
+
+// 下方的提示信息
+const text = ref('请用阿里云盘 App 扫码')
+
+// 提醒类型
+const alertType = ref<'success' | 'info' | 'error' | 'warning' | undefined>('info')
+
+// timeout定时器
+let timeoutTimer: NodeJS.Timeout | undefined = undefined
+
+// 完成
+async function handleDone() {
+  emit('done')
+}
+
+// 调用/aliyun/qrcode api生成二维码
+async function getQrcode() {
+  try {
+    const result: { [key: string]: any } = await api.get('/aliyun/qrcode')
+    if (result.success && result.data) {
+      qrCodeContent.value = result.data.codeContent
+      ck.value = result.data.ck
+      t.value = result.data.t
+    } else {
+      text.value = result.message
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+// 调用/aliyun/check api验证二维码
+async function checkQrcode() {
+  try {
+    const result: { [key: string]: any } = await api.get('/aliyun/check', {
+      params: {
+        ck: ck.value,
+        t: t.value,
+      },
+    })
+    if (result.success && result.data) {
+      const qrCodeStatus = result.data.qrCodeStatus
+      text.value = result.data.tip
+      if (qrCodeStatus == 'CONFIRMED') {
+        // 已确认完成
+        alertType.value = 'success'
+        handleDone()
+      } else if (qrCodeStatus == 'NEW' || qrCodeStatus == 'SCANED') {
+        alertType.value = 'info'
+        // 新建、待扫码
+        clearTimeout(timeoutTimer)
+        timeoutTimer = setTimeout(checkQrcode, 3000)
+      } else {
+        // 过期或者已取消
+        alertType.value = 'error'
+      }
+    } else {
+      alertType.value = 'error'
+      text.value = result.message
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+onMounted(async () => {
+  await getQrcode()
+  timeoutTimer = setTimeout(checkQrcode, 3000)
+})
+
+onUnmounted(() => {
+  if (timeoutTimer) clearTimeout(timeoutTimer)
+})
+</script>
+
+<template>
+  <VDialog width="40rem" scrollable max-height="85vh">
+    <VCard title="阿里云盘登录" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText class="pt-2 flex flex-col items-center">
+        <div class="my-6 shadow-lg rounded text-center p-3 border">
+          <QrcodeVue class="mx-auto" :value="qrCodeContent" :size="200" />
+        </div>
+        <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
+          <template #prepend />
+        </VAlert>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn variant="elevated" @click="handleDone" prepend-icon="mdi-check" class="px-5 me-3"> 完成 </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
--- a/src/components/dialog/ImportCodeDialog.vue
+++ b/src/components/dialog/ImportCodeDialog.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+// 输入参数
+const props = defineProps({
+  title: String,
+})
+
+// 定义事件
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// 代码
+const codeString = ref('')
+
+// 导入
+function handleImport() {
+  emit('update:modelValue', codeString.value)
+  emit('close')
+}
+</script>
+
+<template>
+  <VDialog width="40rem" scrollable max-height="85vh">
+    <VCard :title="props.title" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText class="pt-2">
+        <VTextarea v-model="codeString" />
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn variant="elevated" @click="handleImport" prepend-icon="mdi-import" class="px-5 me-3"> 导入 </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
--- a/src/components/dialog/ProgressDialog.vue
+++ b/src/components/dialog/ProgressDialog.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps({
+  value: Number,
+  text: String,
+})
+</script>
+<template>
+  <!-- 手动整理进度框 -->
+  <VDialog :scrim="false" width="25rem">
+    <VCard color="primary">
+      <VCardText class="text-center">
+        {{ props.text }}
+        <VProgressLinear color="white" class="mb-0 mt-1" :model-value="props.value" indeterminate />
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
--- a/src/components/dialog/ReorganizeDialog.vue
+++ b/src/components/dialog/ReorganizeDialog.vue
@@ -0,0 +1,387 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import MediaIdSelector from '../misc/MediaIdSelector.vue'
+import store from '@/store'
+import api from '@/api'
+import { numberValidator } from '@/@validators'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from './ProgressDialog.vue'
+import { FileItem, MediaDirectory } from '@/api/types'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  storage: {
+    type: String,
+    default: () => 'local',
+  },
+  logids: Array<number>,
+  items: Array<FileItem>,
+  target: String,
+})
+
+// 定义事件
+const emit = defineEmits(['done', 'close'])
+
+// 生成1到100季的下拉框选项
+const seasonItems = ref(
+  Array.from({ length: 101 }, (_, i) => i).map(item => ({
+    title: `第 ${item} 季`,
+    value: item,
+  })),
+)
+
+// 当前识别类型
+const mediaSource = ref('themoviedb')
+
+// 提示框
+const $toast = useToast()
+
+// TMDB选择对话框
+const mediaSelectorDialog = ref(false)
+
+// 加载进度SSE
+const progressEventSource = ref<EventSource>()
+
+// 整理进度条
+const progressDialog = ref(false)
+
+// 整理进度文本
+const progressText = ref('请稍候 ...')
+
+// 整理进度
+const progressValue = ref(0)
+
+// 标题
+const dialogTitle = computed(() => {
+  if (props.items) {
+    if (props.items.length > 1) return `整理 - 共 ${props.items.length} 项`
+    return `整理 - ${props.items[0].path}`
+  } else if (props.logids) {
+    return `整理 - 共 ${props.logids.length} 项`
+  }
+  return '手动整理'
+})
+
+// 表单
+const transferForm = reactive({
+  storage: props.storage,
+  logid: 0,
+  path: '',
+  drive_id: '',
+  fileid: '',
+  filetype: '',
+  target: props.target ?? null,
+  tmdbid: null,
+  doubanid: null,
+  season: null,
+  type_name: '',
+  transfer_type: '',
+  episode_format: '',
+  episode_detail: '',
+  episode_part: '',
+  episode_offset: null,
+  min_filesize: 0,
+  scrape: false,
+})
+
+// 所有媒体库目录
+const libraryDirectories = ref<MediaDirectory[]>([])
+
+// 目的目录下拉框
+const targetDirectories = computed(() => {
+  const directories = libraryDirectories.value.map(item => item.path)
+  return [...new Set(directories)]
+})
+
+// 监听目的路径变化，自动查询目录的刮削配置
+watch(transferForm, async () => {
+  if (transferForm.target) {
+    const directory = libraryDirectories.value.find(item => item.path === transferForm.target)
+    if (directory) {
+      transferForm.scrape = directory.scrape ?? false
+    }
+  }
+})
+
+// 使用SSE监听加载进度
+function startLoadingProgress() {
+  progressText.value = '请稍候 ...'
+
+  const token = store.state.auth.token
+
+  progressEventSource.value = new EventSource(
+    `${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer?token=${token}`,
+  )
+  progressEventSource.value.onmessage = event => {
+    const progress = JSON.parse(event.data)
+    if (progress) {
+      progressText.value = progress.text
+      progressValue.value = progress.value
+    }
+  }
+}
+
+// 停止监听加载进度
+function stopLoadingProgress() {
+  progressEventSource.value?.close()
+}
+
+// 整理文件
+async function transfer() {
+  if (!props.logids && !props.items) return
+
+  // 显示进度条
+  progressDialog.value = true
+  // 开始监听进度
+  startLoadingProgress()
+
+  // 文件整理
+  if (props.items) {
+    for (const item of props.items) {
+      await handleTransfer(item)
+    }
+  }
+
+  // 日志整理
+  if (props.logids) {
+    for (const logid of props.logids) {
+      await handleTransferLog(logid)
+    }
+  }
+
+  // 停止监听进度
+  stopLoadingProgress()
+  // 关闭进度条
+  progressDialog.value = false
+  // 重新加载
+  emit('done')
+}
+
+// 整理文件
+async function handleTransfer(item: FileItem) {
+  transferForm.path = item.path
+  transferForm.fileid = item.fileid || ''
+  transferForm.drive_id = item.drive_id || ''
+  transferForm.filetype = item.type || 'dir'
+
+  try {
+    const result: { [key: string]: any } = await api.post('transfer/manual', {}, { params: transferForm })
+    if (!result.success) $toast.error(`文件 ${item.path} 整理失败：${result.message}！`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 整理日志
+async function handleTransferLog(logid: number) {
+  transferForm.logid = logid
+  try {
+    const result: { [key: string]: any } = await api.post('transfer/manual', {}, { params: transferForm })
+    if (!result.success) $toast.error(`历史记录 ${logid} 重新整理失败：${result.message}！`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 调用API，加载当前系统环境设置
+async function loadSystemSettings() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/env')
+    if (result) mediaSource.value = result.data?.RECOGNIZE_SOURCE || 'themoviedb'
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+// 查询媒体库目录
+async function loadLibraryDirectories() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/LibraryDirectories')
+    if (result.success && result.data?.value) {
+      libraryDirectories.value = result.data.value
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+onMounted(() => {
+  loadSystemSettings()
+  loadLibraryDirectories()
+})
+</script>
+
+<template>
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="dialogTitle" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VDivider />
+      <VCardText>
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <VCol v-if="props.storage == 'local'" cols="12" md="8">
+              <VCombobox
+                v-model="transferForm.target"
+                :items="targetDirectories"
+                label="目的路径"
+                placeholder="留空自动"
+                hint="整理目的路径，留空将自动匹配"
+                persistent-hint
+              />
+            </VCol>
+            <VCol v-if="props.storage == 'local'" cols="12" md="4">
+              <VSelect
+                v-model="transferForm.transfer_type"
+                label="整理方式"
+                :items="[
+                  { title: '默认', value: '' },
+                  { title: '移动', value: 'move' },
+                  { title: '复制', value: 'copy' },
+                  { title: '硬链接', value: 'link' },
+                  { title: '软链接', value: 'softlink' },
+                  { title: 'Rclone复制', value: 'rclone_copy' },
+                  { title: 'Rclone移动', value: 'rclone_move' },
+                ]"
+                hint="文件操作整理方式"
+                persistent-hint
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12" md="4">
+              <VSelect
+                v-model="transferForm.type_name"
+                label="类型"
+                :items="[
+                  { title: '自动', value: '' },
+                  { title: '电影', value: '电影' },
+                  { title: '电视剧', value: '电视剧' },
+                ]"
+                hint="文件的媒体类型"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-if="mediaSource === 'themoviedb'"
+                v-model="transferForm.tmdbid"
+                :disabled="transferForm.type_name === ''"
+                label="TheMovieDb编号"
+                placeholder="留空自动识别"
+                :rules="[numberValidator]"
+                append-inner-icon="mdi-magnify"
+                hint="按名称查询媒体编号，留空自动识别"
+                persistent-hint
+                @click:append-inner="mediaSelectorDialog = true"
+              />
+              <VTextField
+                v-else
+                v-model="transferForm.doubanid"
+                :disabled="transferForm.type_name === ''"
+                label="豆瓣编号"
+                placeholder="留空自动识别"
+                :rules="[numberValidator]"
+                append-inner-icon="mdi-magnify"
+                hint="按名称查询媒体编号，留空自动识别"
+                persistent-hint
+                @click:append-inner="mediaSelectorDialog = true"
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VSelect
+                v-show="transferForm.type_name === '电视剧'"
+                v-model.number="transferForm.season"
+                label="季"
+                :items="seasonItems"
+                hint="指定季数"
+                persistent-hint
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12" md="8">
+              <VTextField
+                v-model="transferForm.episode_format"
+                label="集数定位"
+                placeholder="使用{ep}定位集数"
+                hint="使用{ep}定位文件名中的集数部分以辅助识别"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model="transferForm.episode_detail"
+                label="指定集数"
+                placeholder="起始集,终止集，如1或1,2"
+                hint="指定集数或范围，如1或1,2"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model="transferForm.episode_part"
+                label="指定Part"
+                placeholder="如part1"
+                hint="指定Part，如part1"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model.number="transferForm.episode_offset"
+                label="集数偏移"
+                placeholder="如-10"
+                hint="集数偏移运算，如-10或EP*2"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model.number="transferForm.min_filesize"
+                label="最小文件大小（MB）"
+                :rules="[numberValidator]"
+                placeholder="0"
+                hint="只整理大于最小文件大小的文件"
+                persistent-hint
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12" md="6">
+              <VSwitch
+                v-model="transferForm.scrape"
+                label="刮削元数据"
+                hint="整理完成后自动刮削元数据"
+                persistent-hint
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VSpacer />
+        <VBtn variant="elevated" @click="transfer" prepend-icon="mdi-arrow-right-bold" class="px-5"> 开始整理 </VBtn>
+      </VCardActions>
+    </VCard>
+    <!-- 手动整理进度框 -->
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
+    <!-- TMDB ID搜索框 -->
+    <VDialog v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
+      <MediaIdSelector
+        v-if="mediaSource === 'themoviedb'"
+        v-model="transferForm.tmdbid"
+        @close="mediaSelectorDialog = false"
+        :type="mediaSource"
+      />
+      <MediaIdSelector
+        v-else
+        v-model="transferForm.doubanid"
+        @close="mediaSelectorDialog = false"
+        :type="mediaSource"
+      />
+    </VDialog>
+  </VDialog>
+</template>
--- a/src/components/dialog/SiteAddEditDialog.vue
+++ b/src/components/dialog/SiteAddEditDialog.vue
@@ -4,6 +4,14 @@ import type { Site } from '@/api/types'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { numberValidator, requiredValidator } from '@/@validators'
 import api from '@/api'
+import { useDisplay } from 'vuetify'
+import { useConfirm } from 'vuetify-use-dialog'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 确认框
+const createConfirm = useConfirm()

 // 输入参数
 const props = defineProps({
@@ -40,7 +48,7 @@ const statusItems = [

 // 生成1到50的优先级下拉框选项
 const priorityItems = ref(
-  Array.from({ length: 50 }, (_, i) => i + 1).map(item => ({
+  Array.from({ length: 100 }, (_, i) => i + 1).map(item => ({
    title: item,
    value: item,
  })),
@@ -48,8 +56,7 @@ const priorityItems = ref(

 // 监控输入参数
 watchEffect(async () => {
-  if (props.siteid)
-    fetchSiteInfo()
+  if (props.siteid) fetchSiteInfo()
 })

 // 查询站点信息
@@ -58,27 +65,24 @@ async function fetchSiteInfo() {
    siteForm.value = await api.get(`site/${props.siteid}`)
    siteForm.value.proxy = siteForm.value.proxy === 1
    siteForm.value.render = siteForm.value.render === 1
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }

 // 调用API 新增站点
 async function addSite() {
-  if (!siteForm.value?.url)
-    return
+  if (!siteForm.value?.url) return
  startNProgress()
  try {
    const result: { [key: string]: string } = await api.post('site/', siteForm.value)
    if (result.success) {
      $toast.success('新增站点成功')
      emit('save')
+    } else {
+      $toast.error(`新增站点失败：${result.message}`)
    }
-
-    else { $toast.error(`新增站点失败：${result.message}`) }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
  doneNProgress()
@@ -86,14 +90,18 @@ async function addSite() {

 // 调用API删除站点信息
 async function deleteSiteInfo() {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认删除站点？`,
+  })
+
+  if (!isConfirmed) return
+
  try {
    const result: { [key: string]: any } = await api.delete(`site/${siteForm.value?.id}`)
-    if (result.success)
-      emit('remove')
-
+    if (result.success) emit('remove')
    else $toast.error(`${siteForm.value?.name} 删除失败：${result.message}`)
-  }
-  catch (error) {
+  } catch (error) {
    $toast.error(`${siteForm.value?.name} 删除失败！`)
    console.error(error)
  }
@@ -107,10 +115,10 @@ async function updateSiteInfo() {
    if (result.success) {
      $toast.success(`${siteForm.value?.name} 更新成功！`)
      emit('save')
+    } else {
+      $toast.error(`${siteForm.value?.name} 更新失败：${result.message}`)
    }
-    else { $toast.error(`${siteForm.value?.name} 更新失败：${result.message}`) }
-  }
-  catch (error) {
+  } catch (error) {
    $toast.error(`${siteForm.value?.name} 更新失败！`)
    console.error(error)
  }
@@ -119,165 +127,146 @@ async function updateSiteInfo() {
 </script>

 <template>
-  <VDialog
-    scrollable
-    :close-on-back="false"
-    persistent
-    eager
-    max-width="60rem"
-  >
+  <VDialog scrollable :close-on-back="false" persistent eager max-width="50rem" :fullscreen="!display.mdAndUp.value">
    <VCard
      :title="`${props.oper === 'add' ? '新增' : '编辑'}站点${props.oper !== 'add' ? ` - ${siteForm.name}` : ''}`"
      class="rounded-t"
    >
      <DialogCloseBtn @click="emit('close')" />
-      <VCardText class="pt-2">
+      <VDivider />
+      <VCardText>
        <VForm @submit.prevent="() => {}">
          <VRow>
-            <VCol
-              cols="12"
-              md="6"
-            >
+            <VCol cols="12" md="6">
              <VTextField
                v-model="siteForm.url"
                label="站点地址"
                :rules="[requiredValidator]"
                hint="格式：http://www.example.com/"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              cols="12"
-              md="3"
-            >
+            <VCol cols="6" md="3">
              <VSelect
                v-model="siteForm.pri"
                label="优先级"
                :items="priorityItems"
                :rules="[requiredValidator]"
-                hint="站点资源下载优先级，优先级数字越小越优先下载"
+                hint="优先级越小越优先"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              cols="12"
-              md="3"
-            >
+            <VCol cols="6" md="3">
              <VSelect
                v-model="siteForm.is_active"
                :items="statusItems"
                label="状态"
+                hint="站点启用/停用"
+                persistent-hint
              />
            </VCol>
          </VRow>
          <VRow>
-            <VCol cols="12">
+            <VCol cols="12" md="9">
              <VTextField
                v-model="siteForm.rss"
                label="RSS地址"
-                hint="订阅模式为站点RSS时，将会使用此地址获取站点种子资源，该地址一般会自动获取，也可手动补充"
+                hint="订阅模式为`站点RSS`时使用的订阅链接，如未自动获取需手动补充"
+                persistent-hint
              />
            </VCol>
+            <VCol cols="12" md="3">
+              <VTextField v-model="siteForm.timeout" label="超时时间（秒）" hint="站点请求超时时间" persistent-hint />
+            </VCol>
            <VCol cols="12">
-              <VTextarea
-                v-model="siteForm.cookie"
-                label="站点Cookie"
-                hint="浏览器打开站点首页，打开开发人员工具，刷新页面后在网络选项中找到首页地址，在请求头中获取Cookie信息"
+              <VTextarea v-model="siteForm.cookie" label="站点Cookie" hint="站点请求头中的Cookie信息" persistent-hint />
+            </VCol>
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="siteForm.token"
+                label="请求头（Authorization）"
+                hint="站点请求头中的Authorization信息，特殊站点需要"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="siteForm.apikey"
+                label="令牌（API Key）"
+                hint="站点的访问API Key，特殊站点需要"
+                persistent-hint
              />
            </VCol>
            <VCol cols="12">
              <VTextField
                v-model="siteForm.ua"
                label="站点User-Agent"
-                hint="在开发人员工具，网络请求头中获取User-Agent信息，需与站点Cookie配套使用"
+                hint="获取Cookie的浏览器对应的User-Agent"
+                persistent-hint
              />
            </VCol>
          </VRow>
          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VTextField
                v-model="siteForm.limit_interval"
                label="单位周期（秒）"
                :rules="[numberValidator]"
-                hint="设定站点限流的单位周期，单位为秒，0为不限流"
+                hint="限流控制的单位周期时长"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VTextField
                v-model="siteForm.limit_count"
-                label="访问次数"
+                label="周期内访问次数"
                :rules="[numberValidator]"
-                hint="设定单位周期内站点允许的访问次数，0为不限制"
+                hint="单位周期内允许的访问次数"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VTextField
                v-model="siteForm.limit_seconds"
                label="访问间隔（秒）"
                :rules="[numberValidator]"
-                hint="设定单位周期内每次站点访问需间隔时间，单位为秒，0为不限制"
+                hint="每次访问需要间隔的最小时间"
+                persistent-hint
              />
            </VCol>
          </VRow>
          <VRow>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VSwitch
-                v-model="siteForm.proxy"
-                label="代理"
-                hint="站点是否需要代理访问，需要设置好代理服务器信息"
-              />
+            <VCol cols="12" md="6">
+              <VSwitch v-model="siteForm.proxy" label="代理" hint="使用代理服务器访问该站点" persistent-hint />
            </VCol>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VSwitch
-                v-model="siteForm.render"
-                label="仿真"
-                hint="站点是否需要使用浏览器模拟访问，开启可以一定程度上提升连通性，但会大大增加站点请求时间"
-              />
+            <VCol cols="12" md="6">
+              <VSwitch v-model="siteForm.render" label="仿真" hint="使用浏览器模拟真实访问该站点" persistent-hint />
            </VCol>
          </VRow>
        </VForm>
      </VCardText>
-      <VCardActions>
-        <VBtn
-          v-if="props.oper === 'add'"
-          @click="emit('close')"
-        >
-          取消
-        </VBtn>
-        <VBtn
-          v-else
-          color="error"
-          @click="deleteSiteInfo"
-        >
+      <VCardActions class="pt-3">
+        <VBtn v-if="props.oper !== 'add'" color="error" @click="deleteSiteInfo" variant="outlined" class="me-3">
          删除
        </VBtn>
        <VSpacer />
        <VBtn
          v-if="props.oper === 'add'"
          color="primary"
-          variant="tonal"
+          variant="elevated"
          @click="addSite"
+          prepend-icon="mdi-plus"
+          class="px-5"
        >
          新增
        </VBtn>
        <VBtn
          v-else
          color="primary"
-          variant="tonal"
+          variant="elevated"
          @click="updateSiteInfo"
+          prepend-icon="mdi-content-save"
+          class="px-5"
        >
          保存
        </VBtn>
--- a/src/components/dialog/SubscribeEditDialog.vue
+++ b/src/components/dialog/SubscribeEditDialog.vue
@@ -2,7 +2,15 @@
 import { useToast } from 'vue-toast-notification'
 import { numberValidator } from '@/@validators'
 import api from '@/api'
-import type { Site, Subscribe } from '@/api/types'
+import type { MediaDirectory, Site, Subscribe } from '@/api/types'
+import { useDisplay } from 'vuetify'
+import { useConfirm } from 'vuetify-use-dialog'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 确认框
+const createConfirm = useConfirm()

 // 输入参数
 const props = defineProps({
@@ -17,6 +25,9 @@ const emit = defineEmits(['remove', 'save', 'close'])
 // 站点数据列表
 const siteList = ref<Site[]>([])

+// 下载目录列表
+const downloadDirectories = ref<MediaDirectory[]>([])
+
 // 站点选择下载框
 const selectSitesOptions = ref<{ [key: number]: string }[]>([])

@@ -42,7 +53,9 @@ const subscribeForm = ref<Subscribe>({
  last_update: '',
  username: '',
  current_priority: 0,
-  save_path: '',
+  save_path: undefined,
+  date: '',
+  show_edit_dialog: false,
 })

 // 提示框
@@ -57,10 +70,10 @@ async function updateSubscribeInfo() {
      $toast.success(`${subscribeForm.value.name} 更新成功！`)
      // 通知父组件刷新
      emit('save')
+    } else {
+      $toast.error(`${subscribeForm.value.name} 更新失败：${result.message}！`)
    }
-    else { $toast.error(`${subscribeForm.value.name} 更新失败：${result.message}！`) }
-  }
-  catch (e) {
+  } catch (e) {
    console.log(e)
  }
 }
@@ -69,23 +82,16 @@ async function updateSubscribeInfo() {
 async function saveDefaultSubscribeConfig() {
  try {
    let subscribe_config_url = ''
-    if (props.type === '电影')
-      subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
-    else
-      subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+    if (props.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'

-    const result: { [key: string]: any } = await api.post(
-      subscribe_config_url,
-      subscribeForm.value)
-    if (result.success)
-      $toast.success(`${props.type}订阅默认规则保存成功`)
-    else
-      $toast.error(`${props.type}订阅默认规则保存失败！`)
+    const result: { [key: string]: any } = await api.post(subscribe_config_url, subscribeForm.value)
+    if (result.success) $toast.success(`${props.type}订阅默认规则保存成功`)
+    else $toast.error(`${props.type}订阅默认规则保存失败！`)

    // 通知父组件刷新
    emit('save')
-  }
-  catch (error) {
+  } catch (error) {
    console.log(error)
  }
 }
@@ -94,17 +100,13 @@ async function saveDefaultSubscribeConfig() {
 async function queryDefaultSubscribeConfig() {
  try {
    let subscribe_config_url = ''
-    if (props.type === '电影')
-      subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
-    else
-      subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+    if (props.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'

    const result: { [key: string]: any } = await api.get(subscribe_config_url)

-    if (result.data.value)
-      subscribeForm.value = result.data?.value ?? ''
-  }
-  catch (error) {
+    if (result.data.value) subscribeForm.value = result.data?.value ?? ''
+  } catch (error) {
    console.log(error)
  }
 }
@@ -116,8 +118,7 @@ async function loadSites() {

    // 过滤站点，只有启用的站点才显示
    siteList.value = data.filter(item => item.is_active)
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }
@@ -125,10 +126,9 @@ async function loadSites() {
 // 获取站点列表选择框数据
 async function getSiteList() {
  // 加载订阅站点列表
-  if (!siteList.value.length)
-    await loadSites()
+  if (!siteList.value.length) await loadSites()

-  const maps = siteList.value.map((item) => {
+  const maps = siteList.value.map(item => {
    return {
      title: item.name,
      value: item.id,
@@ -141,35 +141,54 @@ async function getSiteList() {
 // 获取订阅信息
 async function getSubscribeInfo() {
  try {
-    const result: Subscribe = await api.get(
-      `subscribe/${props.subid}`,
-    )
+    const result: Subscribe = await api.get(`subscribe/${props.subid}`)
    subscribeForm.value = result
    subscribeForm.value.best_version = subscribeForm.value.best_version === 1
    subscribeForm.value.search_imdbid = subscribeForm.value.search_imdbid === 1
-  }
-  catch (e) {
+  } catch (e) {
    console.log(e)
  }
 }

 // 删除订阅
 async function removeSubscribe() {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认取消订阅？`,
+  })
+
+  if (!isConfirmed) return
  try {
-    const result: { [key: string]: any } = await api.delete(
-      `subscribe/${props.subid}`,
-    )
+    const result: { [key: string]: any } = await api.delete(`subscribe/${props.subid}`)

    if (result.success) {
      // 通知父组件刷新
      emit('remove')
    }
-  }
-  catch (e) {
+  } catch (e) {
    console.log(e)
  }
 }

+// 查询下载目录
+async function loadDownloadDirectories() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/DownloadDirectories')
+    if (result.success && result.data?.value) {
+      downloadDirectories.value = result.data.value
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 保存目录下拉框
+const targetDirectories = computed(() => {
+  // 去重后的下载目录
+  const directories = downloadDirectories.value.map(item => item.path)
+  return [...new Set(directories)]
+})
+
 // 质量选择框数据
 const qualityOptions = ref([
  {
@@ -255,175 +274,163 @@ const effectOptions = ref([
 ])

 onMounted(() => {
+  loadDownloadDirectories()
  getSiteList()
-  if (props.subid)
-    getSubscribeInfo()
-
-  if (props.default)
-    queryDefaultSubscribeConfig()
+  if (props.subid) getSubscribeInfo()
+  if (props.default) queryDefaultSubscribeConfig()
 })
 </script>

 <template>
-  <VDialog
-    scrollable
-    max-width="60rem"
-  >
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
    <VCard
-      :title="`${props.default ? `设置${props.type}默认订阅规则` : `编辑订阅 - ${subscribeForm.name} ${subscribeForm.season ? `第 ${subscribeForm.season} 季` : ''}`}`"
+      :title="`${
+        props.default
+          ? `${props.type}默认订阅规则`
+          : `编辑订阅 - ${subscribeForm.name} ${subscribeForm.season ? `第 ${subscribeForm.season} 季` : ''}`
+      }`"
      class="rounded-t"
    >
-      <VCardText class="pt-2">
+      <VDivider />
+      <VCardText>
        <DialogCloseBtn @click="emit('close')" />
        <VForm @submit.prevent="() => {}">
          <VRow>
-            <VCol
-              cols="12"
-              md="8"
-            >
+            <VCol cols="12" md="8">
              <VTextField
                v-if="!props.default"
                v-model="subscribeForm.keyword"
                label="搜索关键词"
-                hint="设定搜索关键词后，将使用此关键词搜索站点资源，否则自动使用themoviedb中的名称搜索"
+                hint="指定搜索站点时使用的关键词"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              v-if="subscribeForm.type === '电视剧'"
-              cols="12"
-              md="2"
-            >
+            <VCol v-if="subscribeForm.type === '电视剧'" cols="12" md="2">
              <VTextField
                v-model="subscribeForm.total_episode"
                label="总集数"
                :rules="[numberValidator]"
-                hint="设定剧集的总集数，以应对themoviedb中剧集信息未维护完整，导致提前结束订阅的情况"
+                hint="剧集总集数"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              v-if="subscribeForm.type === '电视剧'"
-              cols="12"
-              md="2"
-            >
+            <VCol v-if="subscribeForm.type === '电视剧'" cols="12" md="2">
              <VTextField
                v-model="subscribeForm.start_episode"
                label="开始集数"
                :rules="[numberValidator]"
-                hint="只订阅下载此集数及之后的剧集"
+                hint="开始订阅集数"
+                persistent-hint
              />
            </VCol>
          </VRow>
          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VSelect
                v-model="subscribeForm.quality"
                label="质量"
                :items="qualityOptions"
+                hint="订阅资源质量"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VSelect
                v-model="subscribeForm.resolution"
                label="分辨率"
                :items="resolutionOptions"
+                hint="订阅资源分辨率"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VSelect
                v-model="subscribeForm.effect"
                label="特效"
                :items="effectOptions"
+                hint="订阅资源特效"
+                persistent-hint
              />
            </VCol>
          </VRow>
          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VTextField
                v-model="subscribeForm.include"
                label="包含（关键字、正则式）"
-                hint="支持正则表达式，多个关键字用 | 分隔表示或"
+                hint="包含规则，支持正则表达式"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VTextField
                v-model="subscribeForm.exclude"
                label="排除（关键字、正则式）"
-                hint="支持正则表达式，多个关键字用 | 分隔表示或"
+                hint="排除规则，支持正则表达式"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VSelect
                v-model="subscribeForm.sites"
                :items="selectSitesOptions"
                chips
                label="订阅站点"
                multiple
-                hint="只订阅选中的订阅站点，不选则订阅所有可订阅站点"
+                hint="订阅的站点范围，不选使用系统设置"
+                persistent-hint
              />
            </VCol>
          </VRow>
          <VRow>
-            <VCol
-              cols="12"
-            >
-              <VTextField
+            <VCol cols="12">
+              <VCombobox
                v-model="subscribeForm.save_path"
+                :items="targetDirectories"
                label="保存路径"
                hint="指定该订阅的下载保存路径，留空自动使用设定的下载目录"
+                persistent-hint
              />
            </VCol>
          </VRow>
          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VSwitch
                v-model="subscribeForm.best_version"
                label="洗版"
-                hint="开启后不管媒体库是否存在，均会根据洗版优先级进行过滤下载，直到下载到了最高优先级的资源为止"
+                hint="根据洗版优先级进行洗版订阅"
+                persistent-hint
              />
            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
              <VSwitch
                v-model="subscribeForm.search_imdbid"
                label="使用 ImdbID 搜索"
-                hint="开启后将使用 ImdbID 搜索资源，搜索结果更精确，但不是所有站点都支持"
+                hint="开使用 ImdbID 精确搜索资源"
+                persistent-hint
+              />
+            </VCol>
+            <VCol v-if="props.default" cols="12" md="4">
+              <VSwitch
+                v-model="subscribeForm.show_edit_dialog"
+                label="订阅时编辑更多规则"
+                hint="添加订阅时显示此编辑订阅对话框"
+                persistent-hint
              />
            </VCol>
          </VRow>
        </VForm>
      </VCardText>
-
-      <VCardActions>
-        <VBtn v-if="!props.default" color="error" @click="removeSubscribe">
+      <VCardActions class="pt-3">
+        <VBtn v-if="!props.default" color="error" @click="removeSubscribe" variant="outlined" class="me-3">
          取消订阅
        </VBtn>
        <VSpacer />
        <VBtn
-          variant="tonal"
-          @click="`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`"
+          variant="elevated"
+          @click=";`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`"
+          prepend-icon="mdi-content-save"
+          class="px-5"
        >
          保存
        </VBtn>
--- a/src/components/dialog/SubscribeHistoryDialog.vue
+++ b/src/components/dialog/SubscribeHistoryDialog.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import api from '@/api'
+import { Subscribe } from '@/api/types'
+import { formatDateDifference } from '@core/utils/formatters'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from './ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  type: String,
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'save'])
+
+// 订阅历史列表
+const historyList = ref<Subscribe[]>([])
+
+// 当前加载数据
+const currData = ref<Subscribe[]>([])
+
+// 当前页
+const currentPage = ref(1)
+
+// 每页数量
+const pageSize = ref(30)
+
+// 是否加载中
+const loading = ref(false)
+
+// 是否加载完成
+const isRefreshed = ref(false)
+
+// 进度框
+const progressDialog = ref(false)
+
+// 进度文字
+const progressText = ref('正在重新订阅...')
+
+// 调用API查询列表
+async function loadHistory({ done }: { done: any }) {
+  // 如果正在加载中，直接返回
+  if (loading.value) {
+    done('ok')
+    return
+  }
+
+  // 调用API查询列表
+  try {
+    // 设置加载中
+    loading.value = true
+    currData.value = await api.get(`subscribe/history/${props.type}`, {
+      params: {
+        page: currentPage.value,
+        count: pageSize.value,
+      },
+    })
+    // 标计为已请求完成
+    isRefreshed.value = true
+    if (currData.value.length === 0) {
+      // 如果没有数据，跳出
+      done('empty')
+    } else {
+      // 合并数据
+      historyList.value = [...historyList.value, ...currData.value]
+      // 页码+1
+      currentPage.value++
+      // 返回加载成功
+      done('ok')
+    }
+    // 取消加载中
+    loading.value = false
+  } catch (e) {
+    console.error(e)
+    // 返回加载失败
+    done('error')
+  }
+}
+
+// 重新订阅
+async function reSubscribe(item: Subscribe) {
+  if (item.type === '电影') progressText.value = `正在重新订阅 ${item.name} ...`
+  else progressText.value = `正在重新订阅 ${item.name} 第 ${item.season} 季 ...`
+  progressDialog.value = true
+  try {
+    const result: { [key: string]: any } = await api.post('subscribe', item)
+    if (result.success) {
+      emit('save')
+    }
+  } catch (e) {
+    console.error(e)
+  }
+  progressDialog.value = false
+}
+
+// 删除记录
+async function deleteHistory(item: Subscribe) {
+  try {
+    const result: { [key: string]: any } = await api.delete(`subscribe/history/${item.id}`)
+    if (result.success) {
+      historyList.value = historyList.value.filter(i => i.id !== item.id)
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+// 弹出菜单
+const dropdownItems = ref([
+  {
+    title: '重新订阅',
+    value: 1,
+    color: '',
+    props: {
+      prependIcon: 'mdi-redo',
+      click: reSubscribe,
+    },
+  },
+  {
+    title: '删除',
+    value: 2,
+    color: 'error',
+    props: {
+      prependIcon: 'mdi-delete',
+      click: deleteHistory,
+    },
+  },
+])
+</script>
+
+<template>
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+    <VCard class="mx-auto" width="100%">
+      <VCardItem>
+        <VCardTitle>{{ props.type + '订阅历史' }}</VCardTitle>
+      </VCardItem>
+      <VDivider />
+      <DialogCloseBtn
+        @click="
+          () => {
+            emit('close')
+          }
+        "
+      />
+      <VList lines="two">
+        <VInfiniteScroll mode="intersect" side="end" :items="historyList" class="overflow-hidden" @load="loadHistory">
+          <template #loading>
+            <LoadingBanner />
+          </template>
+          <template #empty />
+          <template v-for="(item, i) in historyList" :key="i">
+            <VListItem>
+              <template #prepend>
+                <VImg
+                  height="75"
+                  width="50"
+                  :src="item.poster"
+                  aspect-ratio="2/3"
+                  class="object-cover rounded shadow ring-gray-500 me-3"
+                  cover
+                >
+                  <template #placeholder>
+                    <div class="w-full h-full">
+                      <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                    </div>
+                  </template>
+                </VImg>
+              </template>
+              <VListItemTitle v-if="item.type == '电视剧'">
+                {{ item.name }} <span class="text-sm">第 {{ item.season }} 季</span>
+              </VListItemTitle>
+              <VListItemTitle v-else>
+                {{ item.name }}
+              </VListItemTitle>
+              <VListItemSubtitle class="mt-2">{{ formatDateDifference(item.date) }}</VListItemSubtitle>
+              <VListItemSubtitle class="mt-2">{{ item.description }}</VListItemSubtitle>
+              <template #append>
+                <div class="me-n3">
+                  <IconBtn>
+                    <VIcon icon="mdi-dots-vertical" />
+                    <VMenu activator="parent" close-on-content-click>
+                      <VList>
+                        <VListItem
+                          v-for="(menu, i) in dropdownItems"
+                          :key="i"
+                          variant="plain"
+                          :base-color="menu.color"
+                          @click="menu.props.click(item)"
+                        >
+                          <template #prepend>
+                            <VIcon :icon="menu.props.prependIcon" />
+                          </template>
+                          <VListItemTitle v-text="menu.title" />
+                        </VListItem>
+                      </VList>
+                    </VMenu>
+                  </IconBtn>
+                </div>
+              </template>
+            </VListItem>
+          </template>
+        </VInfiniteScroll>
+      </VList>
+    </VCard>
+    <!-- 进度框 -->
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+  </VDialog>
+</template>
--- a/src/components/dialog/U115AuthDialog.vue
+++ b/src/components/dialog/U115AuthDialog.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import QrcodeVue from 'qrcode.vue'
+import api from '@/api'
+
+// 定义事件
+const emit = defineEmits(['done', 'close'])
+
+// 二维码内容
+const qrCodeContent = ref('')
+
+// 下方的提示信息
+const text = ref('请使用微信或115客户端扫码')
+
+// 提醒类型
+const alertType = ref<'success' | 'info' | 'error' | 'warning' | undefined>('info')
+
+// timeout定时器
+let timeoutTimer: NodeJS.Timeout | undefined = undefined
+
+// 完成
+async function handleDone() {
+  emit('done')
+}
+
+// 调用/aliyun/qrcode api生成二维码
+async function getQrcode() {
+  try {
+    const result: { [key: string]: any } = await api.get('/u115/qrcode')
+    if (result.success && result.data) {
+      qrCodeContent.value = result.data.codeContent
+    } else {
+      text.value = result.message
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+// 调用/aliyun/check api验证二维码
+async function checkQrcode() {
+  try {
+    const result: { [key: string]: any } = await api.get('/u115/check')
+    if (result.success && result.data) {
+      const status = result.data.status
+      text.value = result.data.tip
+      if (status == 1) {
+        // 已确认完成
+        alertType.value = 'success'
+        handleDone()
+      } else if (status == 0) {
+        alertType.value = 'info'
+        // 新建、待扫码
+        clearTimeout(timeoutTimer)
+        timeoutTimer = setTimeout(checkQrcode, 3000)
+      } else {
+        // 过期或者已取消
+        alertType.value = 'error'
+      }
+    } else {
+      alertType.value = 'error'
+      text.value = result.message
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+onMounted(async () => {
+  await getQrcode()
+  timeoutTimer = setTimeout(checkQrcode, 3000)
+})
+
+onUnmounted(() => {
+  if (timeoutTimer) clearTimeout(timeoutTimer)
+})
+</script>
+
+<template>
+  <VDialog width="40rem" scrollable max-height="85vh">
+    <VCard title="115网盘登录" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText class="pt-2 flex flex-col items-center">
+        <div class="my-6 shadow-lg rounded border">
+          <VImg class="mx-auto" :src="qrCodeContent" style="block-size: 200px; inline-size: 200px">
+            <VSkeletonLoader v-if="!qrCodeContent" class="w-full h-full" />
+          </VImg>
+        </div>
+        <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
+          <template #prepend />
+        </VAlert>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn variant="elevated" @click="handleDone" prepend-icon="mdi-check" class="px-5 me-3"> 完成 </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -0,0 +1,738 @@
+<script lang="ts" setup>
+import type { Axios, AxiosRequestConfig } from 'axios'
+import type { PropType } from 'vue'
+import { useConfirm } from 'vuetify-use-dialog'
+import { useToast } from 'vue-toast-notification'
+import ReorganizeDialog from '../dialog/ReorganizeDialog.vue'
+import { formatBytes } from '@core/utils/formatters'
+import type { Context, EndPoints, FileItem } from '@/api/types'
+import store from '@/store'
+import api from '@/api'
+import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+
+// APP
+const appMode = computed(() => {
+  return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
+})
+
+// 输入参数
+const inProps = defineProps({
+  icons: Object,
+  storage: String,
+  endpoints: Object as PropType<EndPoints>,
+  axios: {
+    type: Object as PropType<Axios>,
+    required: true,
+  },
+  refreshpending: Boolean,
+  item: {
+    type: Object as PropType<FileItem>,
+    required: true,
+  },
+  sort: String,
+})
+
+// 对外事件
+const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted', 'renamed'])
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 提示框
+const $toast = useToast()
+
+// 是否选择模式
+const selectMode = ref(false)
+
+// 是否正在加载
+const loading = ref(true)
+
+// 重命名loading
+const renameLoading = ref(false)
+
+// 识别进度条
+const progressDialog = ref(false)
+
+// 识别进度文本
+const progressText = ref('请稍候 ...')
+
+// 识别进度
+const progressValue = ref(0)
+
+// 内容列表
+const items = ref<FileItem[]>([])
+
+// 过滤条件
+const filter = ref('')
+
+// 重命名弹窗
+const renamePopper = ref(false)
+
+// 整理弹窗
+const transferPopper = ref(false)
+
+// 新名称
+const newName = ref('')
+
+// 处理目录内所有文件
+const renameAll = ref(false)
+
+// 当前操作项
+const currentItem = ref<FileItem>()
+
+// 选中的项目
+const selected = ref<FileItem[]>([])
+
+// 识别结果
+const nameTestResult = ref<Context>()
+
+// 识别结果对话框
+const nameTestDialog = ref(false)
+
+// 弹出菜单
+const dropdownItems = ref<{ [key: string]: any }[]>([])
+
+// 加载进度SSE
+const progressEventSource = ref<EventSource>()
+
+// 目录过滤
+const dirs = computed(() => items.value.filter(item => item.type === 'dir' && item.name.includes(filter.value)))
+
+// 文件过滤
+const files = computed(() => items.value.filter(item => item.type === 'file' && item.name.includes(filter.value)))
+// 是否目录
+const isDir = computed(() => inProps.item.path?.endsWith('/'))
+
+// 是否文件
+const isFile = computed(() => !isDir.value)
+
+// 需要整理的文件项
+const transferItems = ref<FileItem[]>([])
+
+// 大小控制
+const scrollStyle = computed(() => {
+  return appMode.value
+    ? 'height: calc(100vh - 15.5rem - env(safe-area-inset-bottom) - 3.5rem)'
+    : 'height: calc(100vh - 14.5rem - env(safe-area-inset-bottom)'
+})
+
+// 是否为图片文件
+const isImage = computed(() => {
+  const ext = inProps.item.path?.split('.').pop()?.toLowerCase()
+  return ['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(ext ?? '')
+})
+
+// 调整选择模式
+function changeSelectMode() {
+  selectMode.value = !selectMode.value
+  if (!selectMode.value) selected.value = []
+}
+
+// 调API加载文件夹内的内容
+async function list_files() {
+  loading.value = true
+  emit('loading', true)
+
+  // 参数
+  const url = inProps.endpoints?.list.url
+    .replace(/{storage}/g, inProps.storage)
+    .replace(/{sort}/g, inProps.sort || 'name')
+
+  const config: AxiosRequestConfig<FileItem> = {
+    url,
+    method: inProps.endpoints?.list.method || 'get',
+    data: inProps.item,
+  }
+
+  // 加载数据
+  items.value = (await inProps.axios.request(config)) ?? []
+  emit('loading', false)
+  loading.value = false
+}
+
+// 删除项目
+async function deleteItem(item: FileItem, confirm: boolean = true) {
+  if (confirm) {
+    const confirmed = await createConfirm({
+      title: '确认',
+      content: `是否确认删除${item.type === 'dir' ? '目录' : '文件'} ${item.name}？`,
+    })
+    if (!confirmed) return
+  }
+
+  // 加载中
+  emit('loading', true)
+
+  // 请求API
+  const url = inProps.endpoints?.delete.url.replace(/{storage}/g, inProps.storage)
+  const config: AxiosRequestConfig<FileItem> = {
+    url,
+    method: inProps.endpoints?.delete.method || 'post',
+    data: item,
+  }
+  await inProps.axios.request(config)
+
+  // 删除完成
+  emit('loading', false)
+  emit('filedeleted')
+
+  // 重新加载
+  list_files()
+}
+
+// 批量删除
+async function batchDelete() {
+  const confirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认删除选中的 ${selected.value.length} 个项目？`,
+  })
+
+  if (!confirmed) return
+
+  // 显示进度条
+  progressDialog.value = true
+  progressValue.value = 0
+
+  // 删除选中的项目
+  selected.value.every(async item => {
+    progressText.value = `正在删除 ${item.name} ...`
+    await deleteItem(item, false)
+  })
+
+  // 关闭进度条
+  progressDialog.value = false
+
+  // 重新加载
+  list_files()
+}
+
+// 切换路径
+function changePath(item: FileItem) {
+  item.path = inProps.item.path + item.name + (item.type === 'dir' ? '/' : '')
+  emit('pathchanged', item)
+}
+
+// 点击列表项
+function listItemClick(item: FileItem) {
+  if (selectMode.value) {
+    if (selected.value.includes(item)) {
+      selected.value = selected.value.filter(i => i !== item)
+    } else {
+      selected.value.push(item)
+    }
+    // 去重
+    selected.value = Array.from(new Set(selected.value))
+    return false
+  }
+  changePath(item)
+}
+
+// 新窗口中下载文件
+async function download(item: FileItem) {
+  const url = inProps.endpoints?.download.url.replace(/{storage}/g, inProps.storage)
+  const filterEntries = Object.entries(item).filter(([key, value]) => !['children', 'thumbnail'].includes(key) && value)
+  const queryParams = filterEntries.map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&')
+  window.open(
+    `${import.meta.env.VITE_API_BASE_URL}${url.slice(1)}?${queryParams}&token=${store.state.auth.token}`,
+    '_blank',
+  )
+}
+
+// 获取图片地址
+function getImgLink(item: FileItem) {
+  let url = inProps.endpoints?.image.url.replace(/{storage}/g, inProps.storage)
+  const filterEntries = Object.entries(item).filter(([key, value]) => !['children', 'thumbnail'].includes(key) && value)
+  const queryParams = filterEntries.map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&')
+  return `${import.meta.env.VITE_API_BASE_URL}${url.slice(1)}?${queryParams}&token=${store.state.auth.token}`
+}
+
+// 显示重命名弹窗
+function showRenmae(item: FileItem) {
+  currentItem.value = item
+  newName.value = item.name
+  renameAll.value = false
+  renamePopper.value = true
+}
+
+// 调用API获取新名称
+async function get_recommend_name() {
+  renameLoading.value = true
+  try {
+    const result: { [key: string]: any } = await api.get('transfer/name', {
+      params: {
+        path: `${inProps.item.path}${currentItem.value?.name}`,
+        filetype: currentItem.value?.type ?? 'file',
+      },
+    })
+    if (result.success && result.data) {
+      newName.value = result.data.name
+    } else {
+      $toast.error(result.message)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  renameLoading.value = false
+}
+
+// 重命名
+async function rename() {
+  emit('loading', true)
+
+  // 关闭弹窗
+  renamePopper.value = false
+
+  // 显示进度条
+  progressDialog.value = true
+  progressValue.value = 0
+  if (renameAll.value) {
+    progressText.value = `正在重命名 ${currentItem.value?.path} 及目录内所有文件 ...`
+  } else {
+    progressText.value = `正在重命名 ${currentItem.value?.name} ...`
+  }
+  if (renameAll.value) {
+    startLoadingProgress()
+  }
+
+  // 调API
+  let url = inProps.endpoints?.rename.url
+    .replace(/{storage}/g, inProps.storage)
+    .replace(/{newname}/g, encodeURIComponent(newName.value))
+  if (renameAll.value) {
+    url += '&recursive=true'
+  }
+
+  const config: AxiosRequestConfig<FileItem> = {
+    url,
+    method: inProps.endpoints?.rename.method || 'post',
+    data: currentItem.value,
+  }
+  const result: { [key: string]: any } = await inProps.axios?.request(config)
+  if (!result.success) {
+    $toast.error(result.message)
+  }
+
+  // 关闭进度条
+  if (renameAll.value) {
+    stopLoadingProgress()
+  }
+  progressDialog.value = false
+
+  // 通知重新加载
+  newName.value = ''
+  renameAll.value = false
+  emit('loading', false)
+  emit('renamed')
+}
+
+// 显示整理对话框
+function showTransfer(item: FileItem) {
+  transferItems.value = [item]
+  transferPopper.value = true
+}
+
+// 显示批量整理对话框
+function showBatchTransfer() {
+  transferItems.value = selected.value
+  transferPopper.value = true
+}
+
+// 整理完成
+function transferDone() {
+  transferPopper.value = false
+  list_files()
+}
+
+// 将文件修改时间（timestape）转换为本地时间
+function formatTime(timestape: number) {
+  return new Date(timestape * 1000).toLocaleString()
+}
+
+// 监听refreshPending变化
+watch(
+  () => inProps.refreshpending,
+  async () => {
+    if (inProps.refreshpending) {
+      await list_files()
+      emit('refreshed')
+    }
+  },
+)
+
+// 监听item变化或者storage变化
+watch(
+  [() => inProps.item, () => inProps.storage],
+  async () => {
+    // 清空列表
+    items.value = []
+    // 关闭弹窗
+    nameTestResult.value = undefined
+    nameTestDialog.value = false
+    // 重置菜单
+    dropdownItems.value = [
+      {
+        title: '识别',
+        value: 1,
+        show: true,
+        props: {
+          prependIcon: 'mdi-text-recognition',
+          click: (_item: FileItem) => {
+            recognize(_item.path || '')
+          },
+        },
+      },
+      {
+        title: '刮削',
+        value: 2,
+        show: true,
+        props: {
+          prependIcon: 'mdi-auto-fix',
+          click: (_item: FileItem) => {
+            scrape(_item)
+          },
+        },
+      },
+      {
+        title: '重命名',
+        value: 3,
+        show: true,
+        props: {
+          prependIcon: 'mdi-rename',
+          click: showRenmae,
+        },
+      },
+      {
+        title: '整理',
+        value: 4,
+        show: true,
+        props: {
+          prependIcon: 'mdi-folder-arrow-right',
+          click: showTransfer,
+        },
+      },
+      {
+        title: '删除',
+        value: 5,
+        show: true,
+        props: {
+          prependIcon: 'mdi-delete-outline',
+          color: 'error',
+          click: deleteItem,
+        },
+      },
+    ]
+    await list_files()
+  },
+  { immediate: true },
+)
+
+// 调用API识别
+async function recognize(path: string) {
+  try {
+    // 显示进度条
+    progressDialog.value = true
+    progressText.value = `正在识别 ${path} ...`
+    progressValue.value = 0
+    nameTestResult.value = await api.get('media/recognize_file', {
+      params: {
+        path,
+      },
+    })
+    // 关闭进度条
+    progressDialog.value = false
+    if (!nameTestResult.value) $toast.error(`${path} 识别失败！`)
+    nameTestDialog.value = !!nameTestResult.value?.meta_info?.name
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 调用API刮削
+async function scrape(item: FileItem, confirm: boolean = true) {
+  try {
+    if (confirm) {
+      // 确认
+      const confirmed = await createConfirm({
+        title: '确认',
+        content: `是否确认刮削 ${item.path}？`,
+      })
+      if (!confirmed) return
+    }
+
+    // 显示进度条
+    progressDialog.value = true
+    progressText.value = `正在刮削 ${item.path} ...`
+
+    const result: { [key: string]: any } = await api.post(`media/scrape/${inProps.storage}`, item)
+
+    // 关闭进度条
+    progressDialog.value = false
+    if (!result.success) $toast.error(result.message)
+    else $toast.success(`${item.path} 削刮完成！`)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 批量刮削
+async function batchScrape() {
+  // 确认
+  const confirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认刮削选中的 ${selected.value.length} 项？`,
+  })
+  if (!confirmed) return
+
+  selected.value.map(item => {
+    scrape(item, false)
+  })
+}
+
+// 使用SSE监听加载进度
+function startLoadingProgress() {
+  progressText.value = '请稍候 ...'
+
+  const token = store.state.auth.token
+
+  progressEventSource.value = new EventSource(
+    `${import.meta.env.VITE_API_BASE_URL}system/progress/batchrename?token=${token}`,
+  )
+  progressEventSource.value.onmessage = event => {
+    const progress = JSON.parse(event.data)
+    if (progress) {
+      progressText.value = progress.text
+      progressValue.value = progress.value
+    }
+  }
+}
+
+// 停止监听加载进度
+function stopLoadingProgress() {
+  progressEventSource.value?.close()
+}
+
+onMounted(() => {
+  list_files()
+})
+</script>
+
+<template>
+  <VCard class="d-flex flex-column">
+    <VToolbar v-if="!loading" density="compact" flat color="gray">
+      <VTextField
+        v-if="!isFile"
+        v-model="filter"
+        hide-details
+        flat
+        density="compact"
+        variant="solo-filled"
+        placeholder="搜索 ..."
+        prepend-inner-icon="mdi-filter-outline"
+        class="me-2"
+        rounded="0"
+      />
+      <VSpacer v-if="isFile" />
+      <IconBtn v-if="!isFile" @click="changeSelectMode">
+        <VIcon color="primary" v-if="selectMode"> mdi-selection-remove </VIcon>
+        <VIcon color="primary" v-else>mdi-select</VIcon>
+      </IconBtn>
+      <IconBtn v-if="isFile" @click="recognize(inProps.item.path || '')">
+        <VIcon color="primary"> mdi-text-recognition </VIcon>
+      </IconBtn>
+      <IconBtn v-if="isFile && items.length > 0" @click="download(items[0])">
+        <VIcon color="primary"> mdi-download </VIcon>
+      </IconBtn>
+      <IconBtn v-if="!isFile" @click="list_files">
+        <VIcon color="primary"> mdi-refresh </VIcon>
+      </IconBtn>
+      <!-- 批量操作按钮 -->
+      <span v-if="selected.length > 0">
+        <IconBtn @click.stop="batchScrape">
+          <VIcon color="primary" icon="mdi-auto-fix" />
+        </IconBtn>
+        <IconBtn @click.stop="showBatchTransfer">
+          <VIcon color="primary" icon="mdi-folder-arrow-right" />
+        </IconBtn>
+        <IconBtn @click.stop="batchDelete">
+          <VIcon icon="mdi-delete-outline" color="error" />
+        </IconBtn>
+      </span>
+    </VToolbar>
+    <VCardText v-if="loading" class="text-center flex flex-col items-center">
+      <VProgressCircular size="48" indeterminate color="primary" />
+    </VCardText>
+    <!-- 文件详情 -->
+    <VCardText v-else-if="isFile && !isImage && items.length > 0" class="text-center break-all">
+      <div v-if="items[0]?.thumbnail" class="flex justify-center">
+        <VImg max-width="15rem" cover :src="items[0]?.thumbnail" class="rounded border shadow-lg">
+          <template #placeholder>
+            <VSkeletonLoader class="object-cover w-full h-full" />
+          </template>
+        </VImg>
+      </div>
+      <div class="text-xl text-high-emphasis mt-3">{{ items[0]?.name }}</div>
+      <p class="mt-2" v-if="items[0]?.size && items[0].modify_time">
+        大小：{{ formatBytes(items[0]?.size || 0) }}<br />
+        修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
+      </p>
+    </VCardText>
+    <!-- 图片 -->
+    <VCardText v-else-if="isFile && isImage && items.length > 0" class="grow d-flex justify-center align-center">
+      <VImg :src="getImgLink(items[0])" max-width="100%" max-height="100%" />
+    </VCardText>
+    <!-- 目录和文件列表 -->
+    <VCardText v-else-if="dirs.length || files.length" class="p-0">
+      <VList subheader>
+        <VVirtualScroll :items="[...dirs, ...files]" :style="scrollStyle">
+          <template #default="{ item }">
+            <VHover>
+              <template #default="hover">
+                <VListItem v-bind="hover.props" class="px-3 pe-1" @click="listItemClick(item)">
+                  <template #prepend>
+                    <VListItemAction v-if="selectMode">
+                      <VCheckbox v-model="selected" :value="item" />
+                    </VListItemAction>
+                    <template v-else>
+                      <VIcon
+                        v-if="inProps.icons && item.extension"
+                        :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other"
+                      />
+                      <VIcon v-else icon="mdi-folder-outline" />
+                    </template>
+                  </template>
+                  <VListItemTitle v-text="item.name" />
+                  <VListItemSubtitle v-if="item.size">
+                    {{ formatBytes(item.size) }}
+                  </VListItemSubtitle>
+                  <template #append>
+                    <IconBtn v-if="display.smAndDown.value && !selectMode">
+                      <VIcon icon="mdi-dots-vertical" />
+                      <VMenu activator="parent" close-on-content-click>
+                        <VList>
+                          <template v-for="(menu, i) in dropdownItems" :key="i">
+                            <VListItem
+                              v-if="menu.show"
+                              variant="plain"
+                              :base-color="menu.props.color"
+                              @click="menu.props.click(item)"
+                            >
+                              <template #prepend>
+                                <VIcon :icon="menu.props.prependIcon" />
+                              </template>
+                              <VListItemTitle v-text="menu.title" />
+                            </VListItem>
+                          </template>
+                        </VList>
+                      </VMenu>
+                    </IconBtn>
+                    <span v-if="hover.isHovering && display.mdAndUp.value && !selectMode" class="flex">
+                      <VTooltip text="识别">
+                        <template #activator="{ props }">
+                          <IconBtn v-bind="props" @click.stop="recognize(item.path)">
+                            <VIcon icon="mdi-text-recognition" />
+                          </IconBtn>
+                        </template>
+                      </VTooltip>
+                      <VTooltip text="刮削">
+                        <template #activator="{ props }">
+                          <IconBtn v-bind="props" @click.stop="scrape(item)">
+                            <VIcon icon="mdi-auto-fix" />
+                          </IconBtn>
+                        </template>
+                      </VTooltip>
+                      <VTooltip text="重命名">
+                        <template #activator="{ props }">
+                          <IconBtn v-bind="props" @click.stop="showRenmae(item)">
+                            <VIcon icon="mdi-rename" />
+                          </IconBtn>
+                        </template>
+                      </VTooltip>
+                      <VTooltip text="整理">
+                        <template #activator="{ props }">
+                          <IconBtn v-bind="props" @click.stop="showTransfer(item)">
+                            <VIcon icon="mdi-folder-arrow-right" />
+                          </IconBtn>
+                        </template>
+                      </VTooltip>
+                      <VTooltip text="删除">
+                        <template #activator="{ props }">
+                          <IconBtn v-bind="props" @click.stop="deleteItem(item)">
+                            <VIcon icon="mdi-delete-outline" color="error" />
+                          </IconBtn>
+                        </template>
+                      </VTooltip>
+                    </span>
+                  </template>
+                </VListItem>
+              </template>
+            </VHover>
+          </template>
+        </VVirtualScroll>
+      </VList>
+    </VCardText>
+    <VCardText v-else-if="filter" class="grow d-flex justify-center align-center grey--text py-5">
+      没有目录或文件
+    </VCardText>
+    <VCardText v-else-if="!loading" class="grow d-flex justify-center align-center grey--text py-5"> 空目录 </VCardText>
+  </VCard>
+  <!-- 重命名弹窗 -->
+  <VDialog v-if="renamePopper" v-model="renamePopper" max-width="50rem">
+    <VCard title="重命名">
+      <DialogCloseBtn @click="renamePopper = false" />
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VTextField v-model="newName" label="新名称" :loading="renameLoading" />
+          </VCol>
+          <VCol cols="12" md="6" v-if="currentItem && currentItem.type == 'dir'">
+            <VSwitch v-model="renameAll" label="自动重命名目录内所有媒体文件" />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <VCardActions>
+        <VBtn color="success" variant="elevated" @click="get_recommend_name" prepend-icon="mdi-magic" class="px-5 me-3">
+          自动识别名称
+        </VBtn>
+        <VBtn :disabled="!newName" variant="elevated" @click="rename" prepend-icon="mdi-check" class="px-5 me-3">
+          确定
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+  <!-- 文件整理弹窗 -->
+  <ReorganizeDialog
+    v-if="transferPopper"
+    v-model="transferPopper"
+    :storage="inProps.storage"
+    :items="transferItems"
+    @done="transferDone"
+    @close="transferPopper = false"
+  />
+  <!-- 进度框 -->
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
+  <!-- 识别结果对话框 -->
+  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" width="50rem">
+    <VCard>
+      <DialogCloseBtn @click="nameTestDialog = false" />
+      <VCardItem>
+        <MediaInfoCard :context="nameTestResult" />
+      </VCardItem>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss" scoped>
+.v-card {
+  block-size: 100%;
+}
+
+.v-toolbar {
+  background: rgb(var(--v-table-header-background));
+}
+</style>
--- a/src/components/filebrowser/FileToolbar.vue
+++ b/src/components/filebrowser/FileToolbar.vue
@@ -1,14 +1,28 @@
 <script lang="ts" setup>
-import type { Axios } from 'axios'
-import type { EndPoints } from '@/api/types'
+import type { Axios, AxiosRequestConfig } from 'axios'
+import type { EndPoints, FileItem } from '@/api/types'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()

 // 输入参数
 const inProps = defineProps({
  storages: Array as PropType<any[]>,
  storage: String,
-  path: String,
+  item: {
+    type: Object as PropType<FileItem>,
+    required: true,
+  },
+  itemstack: {
+    type: Array as PropType<FileItem[]>,
+    required: true,
+  },
  endpoints: Object as PropType<EndPoints>,
-  axios: Object as PropType<Axios>,
+  axios: {
+    type: Object as PropType<Axios>,
+    required: true,
+  },
 })

 // 对外事件
@@ -25,10 +39,8 @@ const sort = ref('name')

 // 调整排序方式
 function changeSort() {
-  if (sort.value === 'name')
-    sort.value = 'time'
-  else
-    sort.value = 'name'
+  if (sort.value === 'name') sort.value = 'time'
+  else sort.value = 'name'

  emit('sortchanged', sort.value)
 }
@@ -36,18 +48,20 @@ function changeSort() {
 // 计算PATH面包屑
 const pathSegments = computed(() => {
  let path_str = ''
-  const isFolder = inProps.path?.endsWith('/')
-  const segments = inProps.path?.split('/').filter(item => item)
-
-  return segments?.map((item, index) => {
-    path_str += item + ((index < segments.length - 1 || isFolder) ? '/' : '')
-    return {
-      name: item,
-      path: path_str,
-    }
-  }) ?? []
+  const isFolder = inProps.item.path?.endsWith('/')
+  const segments = inProps.item.path?.split('/').filter(item => item)
+  return (
+    segments?.map((item, index) => {
+      path_str += item + (index < segments.length - 1 || isFolder ? '/' : '')
+      return {
+        name: item,
+        path: path_str,
+      }
+    }) ?? []
+  )
 })

+// 当前存储
 const storageObject = computed(() => {
  return inProps.storages?.find(item => item.code === inProps.storage)
 })
@@ -56,20 +70,19 @@ const storageObject = computed(() => {
 function changeStorage(code: string) {
  if (inProps.storage !== code) {
    emit('storagechanged', code)
-    emit('pathchanged', '')
  }
 }

 // 路径变化
-function changePath(_path: string) {
-  emit('pathchanged', _path)
+function changePath(item: FileItem) {
+  emit('pathchanged', item)
 }

 // 返回上一级
 function goUp() {
  const segments = pathSegments.value ?? []
-  const path = segments?.length === 1 ? '/' : segments[segments.length - 2].path
-  changePath(path)
+  const fileitem = inProps.itemstack[segments.length - 1]
+  changePath(fileitem)
 }

 // 创建目录
@@ -77,15 +90,16 @@ async function mkdir() {
  emit('loading', true)
  const url = inProps.endpoints?.mkdir.url
    .replace(/{storage}/g, inProps.storage)
-    .replace(/{path}/g, encodeURIComponent(inProps.path + newFolderName.value))
+    .replace(/{name}/g, newFolderName.value)

-  const config = {
+  const config: AxiosRequestConfig<FileItem> = {
    url,
    method: inProps.endpoints?.mkdir.method || 'post',
+    data: inProps.item,
  }

  // 调API
-  await inProps.axios?.request(config)
+  await inProps.axios.request(config)

  newFolderPopper.value = false
  newFolderName.value = ''
@@ -97,10 +111,8 @@ async function mkdir() {

 // 计算排序图标
 const sortIcon = computed(() => {
-  if (sort.value === 'time')
-    return 'mdi-sort-clock-ascending-outline'
-  else
-    return 'mdi-sort-alphabetical-ascending'
+  if (sort.value === 'time') return 'mdi-sort-clock-ascending-outline'
+  else return 'mdi-sort-alphabetical-ascending'
 })
 </script>

@@ -127,16 +139,17 @@ const sortIcon = computed(() => {
          </VListItem>
        </VList>
      </VMenu>
-      <VBtn variant="text" :input-value="path === '/'" class="px-1" @click="changePath('/')">
+      <VBtn variant="text" :input-value="item.path === '/'" class="px-1" @click="changePath(inProps.itemstack[0])">
        <VIcon :icon="storageObject?.icon" class="mr-2" />
        {{ storageObject?.name }}
      </VBtn>
      <template v-for="(segment, index) in pathSegments" :key="index">
        <VBtn
+          v-if="display.mdAndUp.value"
          variant="text"
          :input-value="index === pathSegments.length - 1"
-          class="px-1 d-none d-md-block"
-          @click="changePath(segment.path)"
+          class="px-1"
+          @click="changePath(inProps.itemstack[index + 1])"
        >
          <VIcon icon=" mdi-chevron-right" />
          {{ segment.name }}
@@ -158,10 +171,7 @@ const sortIcon = computed(() => {
        </IconBtn>
      </template>
    </VTooltip>
-    <VDialog
-      v-model="newFolderPopper"
-      max-width="50rem"
-    >
+    <VDialog v-model="newFolderPopper" max-width="50rem">
      <template #activator="{ props }">
        <IconBtn v-bind="props">
          <VTooltip text="新建文件夹">
@@ -172,20 +182,14 @@ const sortIcon = computed(() => {
        </IconBtn>
      </template>
      <VCard title="新建文件夹">
+        <DialogCloseBtn @click="newFolderPopper = false" />
+        <VDivider />
        <VCardText>
          <VTextField v-model="newFolderName" label="名称" />
        </VCardText>
        <VCardActions>
          <div class="flex-grow-1" />
-          <VBtn depressed @click="newFolderPopper = false">
-            取消
-          </VBtn>
-          <VBtn
-            :disabled="!newFolderName"
-            depressed
-            variant="tonal"
-            @click="mkdir"
-          >
+          <VBtn :disabled="!newFolderName" variant="elevated" @click="mkdir" prepend-icon="mdi-check" class="px-5 me-3">
            新建
          </VBtn>
        </VCardActions>
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -1,599 +0,0 @@
-<script lang="ts" setup>
-import type { Axios } from 'axios'
-import type { PropType } from 'vue'
-import { useConfirm } from 'vuetify-use-dialog'
-import axios from 'axios'
-import { useToast } from 'vue-toast-notification'
-import ReorganizeForm from '../form/ReorganizeForm.vue'
-import { formatBytes } from '@core/utils/formatters'
-import type { Context, EndPoints, FileItem } from '@/api/types'
-import store from '@/store'
-import api from '@/api'
-import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
-
-// 输入参数
-const inProps = defineProps({
-  icons: Object,
-  storage: String,
-  path: String,
-  endpoints: Object as PropType<EndPoints>,
-  axios: Object as PropType<Axios>,
-  refreshpending: Boolean,
-  sort: String,
-})
-
-// 对外事件
-const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted', 'renamed'])
-
-// 提示框
-const $toast = useToast()
-
-// 是否正在加载
-const loading = ref(true)
-
-// 识别进度条
-const progressDialog = ref(false)
-
-// 识别进度文本
-const progressText = ref('请稍候 ...')
-
-// 识别进度
-const progressValue = ref(0)
-
-// 确认框
-const createConfirm = useConfirm()
-
-// 存储空间类型
-const storage = ref(inProps.storage ?? '')
-
-// axios实例
-const axiosInstance = ref<Axios>(inProps.axios ?? axios)
-
-// 内容列表
-const items = ref<FileItem[]>([])
-
-// 过滤条件
-const filter = ref('')
-
-// 重命名弹窗
-const renamePopper = ref(false)
-
-// 整理弹窗
-const transferPopper = ref(false)
-
-// 新名称
-const newName = ref('')
-
-// 当前名称
-const currentItem = ref<FileItem>()
-
-// 识别结果
-const nameTestResult = ref<Context>()
-
-// 识别结果对话框
-const nameTestDialog = ref(false)
-
-// 延迟加载
-const defer = (_: number) => true
-
-// 目录过滤
-const dirs = computed(() =>
-  items.value.filter(item => item.type === 'dir' && item.basename.includes(filter.value)),
-)
-
-// 文件过滤
-const files = computed(() =>
-  items.value.filter(item => item.type === 'file' && item.basename.includes(filter.value)),
-)
-
-// 是否目录
-const isDir = computed(() => inProps.path?.endsWith('/'))
-
-// 是否文件
-const isFile = computed(() => !isDir.value)
-
-// 是否为图片文件
-const isImage = computed(() => {
-  const ext = inProps.path?.split('.').pop()?.toLowerCase()
-  return ['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(ext ?? '')
-})
-
-// 调API加载内容
-async function load() {
-  loading.value = true
-  emit('loading', true)
-  // 参数
-  const url = inProps.endpoints?.list.url
-    .replace(/{storage}/g, storage.value)
-    .replace(/{path}/g, encodeURIComponent(inProps.path || ''))
-    .replace(/{sort}/g, inProps.sort || 'name')
-
-  const config = {
-    url,
-    method: inProps.endpoints?.list.method || 'get',
-  }
-  // 加载数据
-  items.value = await axiosInstance.value.request(config) ?? []
-  emit('loading', false)
-  loading.value = false
-}
-
-// 删除项目
-async function deleteItem(item: FileItem) {
-  const confirmed = await createConfirm({
-    title: '确认',
-    content: `是否确认删除${
-                item.type === 'dir' ? '目录' : '文件'
-            } ${item.basename}？`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    cancellationButtonProps: {
-      variant: 'tonal',
-    },
-  })
-
-  if (confirmed) {
-    emit('loading', true)
-    const url = inProps.endpoints?.delete.url
-      .replace(/{storage}/g, storage.value)
-      .replace(/{path}/g, encodeURIComponent(item.path))
-
-    const config = {
-      url,
-      method: inProps.endpoints?.delete.method || 'post',
-    }
-
-    await axiosInstance.value.request(config)
-    emit('filedeleted')
-    emit('loading', false)
-    // 重新加载
-    load()
-  }
-}
-
-// 切换路径
-function changePath(_path: string) {
-  emit('pathchanged', _path)
-}
-
-// 新窗口中下载文件
-function download(path: string) {
-  if (!path)
-    return
-  const token = store.state.auth.token
-  const url_path = inProps.endpoints?.download.url
-    .replace(/{storage}/g, storage.value)
-    .replace(/{path}/g, encodeURIComponent(path))
-  const url = `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
-  // 下载文件
-  window.open(url, '_blank')
-}
-
-// 显示图片
-function getImgLink(path: string) {
-  if (!path)
-    return ''
-  const token = store.state.auth.token
-  const url_path = inProps.endpoints?.image.url
-    .replace(/{storage}/g, storage.value)
-    .replace(/{path}/g, encodeURIComponent(path))
-  return `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
-}
-
-// 显示重命名弹窗
-function showRenmae(item: FileItem) {
-  currentItem.value = item
-  newName.value = item.name
-  renamePopper.value = true
-}
-
-// 重命名
-async function rename() {
-  emit('loading', true)
-  const url = inProps.endpoints?.rename.url
-    .replace(/{storage}/g, inProps.storage)
-    .replace(/{path}/g, encodeURIComponent(currentItem.value?.path || ''))
-    .replace(/{newname}/g, encodeURIComponent(newName.value))
-
-  const config = {
-    url,
-    method: inProps.endpoints?.mkdir.method || 'post',
-  }
-
-  // 调API
-  await inProps.axios?.request(config)
-
-  renamePopper.value = false
-  newName.value = ''
-  emit('loading', false)
-
-  // 通知重新加载
-  emit('renamed')
-}
-
-// 显示整理对话框
-function showTransfer(item: FileItem) {
-  currentItem.value = item
-  transferPopper.value = true
-}
-
-// 将文件修改时间（timestape）转换为本地时间
-function formatTime(timestape: number) {
-  return new Date(timestape * 1000).toLocaleString()
-}
-
-// 监听path变化
-watch(
-  () => inProps.path,
-  async () => {
-    items.value = []
-    nameTestResult.value = undefined
-    nameTestDialog.value = false
-    await load()
-  },
-)
-
-// 监听refreshPending变化
-watch(
-  () => inProps.refreshpending,
-  async () => {
-    if (inProps.refreshpending) {
-      await load()
-      emit('refreshed')
-    }
-  },
-)
-
-// 调用API识别
-async function recognize(path: string) {
-  try {
-    // 显示进度条
-    progressDialog.value = true
-    progressText.value = `正在识别 ${path} ...`
-    progressValue.value = 0
-    nameTestResult.value = await api.get('media/recognize_file', {
-      params: {
-        path,
-      },
-    })
-    // 关闭进度条
-    progressDialog.value = false
-    if (!nameTestResult.value)
-      $toast.error(`${path} 识别失败！`)
-    nameTestDialog.value = !!nameTestResult.value?.meta_info?.name
-  }
-  catch (error) {
-    console.error(error)
-  }
-}
-
-// 调用API刮削
-async function scrape(path: string) {
-  try {
-    // 显示进度条
-    progressDialog.value = true
-    progressText.value = `正在刮削 ${path} ...`
-    const result: { [key: string]: any } = await api.get('media/scrape', {
-      params: {
-        path,
-      },
-    })
-    // 关闭进度条
-    progressDialog.value = false
-    if (!result.success)
-      $toast.error(result.message)
-    else
-      $toast.success(`${path}削刮完成！`)
-  }
-  catch (error) {
-    console.error(error)
-  }
-}
-// 弹出菜单
-const dropdownItems = ref([
-  {
-    title: '识别',
-    value: 1,
-    props: {
-      prependIcon: 'mdi-text-recognition',
-      click: (_item: FileItem) => {
-        recognize(_item.path || '')
-      },
-    },
-  }, {
-    title: '刮削',
-    value: 2,
-    props: {
-      prependIcon: 'mdi-auto-fix',
-      click: (_item: FileItem) => {
-        scrape(_item.path || '')
-      },
-    },
-  }, {
-    title: '重命名',
-    value: 3,
-    props: {
-      prependIcon: 'mdi-rename',
-      click: showRenmae,
-    },
-  },
-  {
-    title: '整理',
-    value: 4,
-    props: {
-      prependIcon: 'mdi-folder-arrow-right',
-      click: showTransfer,
-    },
-  },
-  {
-    title: '删除',
-    value: 5,
-    props: {
-      prependIcon: 'mdi-delete-outline',
-      color: 'error',
-      click: deleteItem,
-    },
-  },
-])
-
-onMounted(() => {
-  load()
-})
-</script>
-
-<template>
-  <VCard class="d-flex flex-column">
-    <VToolbar v-if="!loading" density="compact" flat color="gray">
-      <VTextField
-        v-if="!isFile"
-        v-model="filter"
-        hide-details
-        flat
-        density="compact"
-        variant="solo-filled"
-        placeholder="搜索 ..."
-        prepend-inner-icon="mdi-filter-outline"
-        class="me-2"
-        rounded="0"
-      />
-      <VSpacer v-if="isFile" />
-      <IconBtn v-if="isFile" @click="recognize(inProps.path || '')">
-        <VIcon color="primary">
-          mdi-text-recognition
-        </VIcon>
-      </IconBtn>
-      <IconBtn v-if="isFile" @click="download(inProps.path || '')">
-        <VIcon color="primary">
-          mdi-download
-        </VIcon>
-      </IconBtn>
-      <IconBtn v-if="!isFile" @click="load">
-        <VIcon color="primary">
-          mdi-refresh
-        </VIcon>
-      </IconBtn>
-    </VToolbar>
-    <VCardText
-      v-if="loading"
-      class="text-center flex flex-col items-center"
-    >
-      <VProgressCircular
-        size="48"
-        indeterminate
-        color="primary"
-      />
-    </VCardText>
-    <VCardText
-      v-if="!path"
-      class="grow d-flex justify-center align-center grey--text"
-    >
-      选择目录或文件
-    </VCardText>
-    <VCardText
-      v-else-if="isFile && !isImage"
-      class="text-center break-all"
-    >
-      <strong>{{ items[0]?.name }}</strong><br>
-      大小：{{ formatBytes(items[0]?.size || 0) }}<br>
-      修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
-    </VCardText>
-    <VCardText
-      v-else-if="isFile && isImage"
-      class="grow d-flex justify-center align-center"
-    >
-      <VImg :src="getImgLink(path)" max-width="100%" max-height="100%" />
-    </VCardText>
-    <VCardText v-else-if="dirs.length || files.length" class="p-0">
-      <VList subheader>
-        <VVirtualScroll class="virtual-scroll-div" :items="[...dirs, ...files]">
-          <template #default="{ item }">
-            <VHover>
-              <template #default="hover">
-                <VListItem
-                  v-bind="hover.props"
-                  class="px-3 pe-1"
-                  @click="changePath(item.path)"
-                >
-                  <template #prepend>
-                    <VIcon v-if="inProps.icons && item.extension" :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other" />
-                    <VIcon v-else icon="mdi-folder-outline" />
-                  </template>
-                  <VListItemTitle v-text="item.name" />
-                  <VListItemSubtitle v-if="item.size">
-                    {{ formatBytes(item.size) }}
-                  </VListItemSubtitle>
-                  <template #append>
-                    <IconBtn class="d-sm-none">
-                      <VIcon
-                        icon="mdi-dots-vertical"
-                      />
-                      <VMenu
-                        activator="parent"
-                        close-on-content-click
-                      >
-                        <VList>
-                          <VListItem
-                            v-for="(menu, i) in dropdownItems"
-                            :key="i"
-                            variant="plain"
-                            :base-color="menu.props.color"
-                            @click="menu.props.click(item)"
-                          >
-                            <template #prepend>
-                              <VIcon :icon="menu.props.prependIcon" />
-                            </template>
-                            <VListItemTitle v-text="menu.title" />
-                          </VListItem>
-                        </VList>
-                      </VMenu>
-                    </IconBtn>
-                    <span v-if="hover.isHovering" class="flex">
-                      <VTooltip text="识别">
-                        <template #activator="{ props }">
-                          <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="recognize(item.path)">
-                            <VIcon icon="mdi-text-recognition" />
-                          </IconBtn>
-                        </template>
-                      </VTooltip>
-                      <VTooltip text="刮削">
-                        <template #activator="{ props }">
-                          <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="scrape(item.path)">
-                            <VIcon icon="mdi-auto-fix" />
-                          </IconBtn>
-                        </template>
-                      </VTooltip>
-                      <VTooltip text="重命名">
-                        <template #activator="{ props }">
-                          <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="showRenmae(item)">
-                            <VIcon icon="mdi-rename" />
-                          </IconBtn>
-                        </template>
-                      </VTooltip>
-                      <VTooltip text="整理">
-                        <template #activator="{ props }">
-                          <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="showTransfer(item)">
-                            <VIcon icon="mdi-folder-arrow-right" />
-                          </IconBtn>
-                        </template>
-                      </VTooltip>
-                      <VTooltip text="删除">
-                        <template #activator="{ props }">
-                          <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="deleteItem(item)">
-                            <VIcon icon="mdi-delete-outline" color="error" />
-                          </IconBtn>
-                        </template>
-                      </VTooltip>
-                    </span>
-                  </template>
-                </VListItem>
-              </template>
-            </VHover>
-          </template>
-        </VVirtualScroll>
-      </VList>
-    </VCardText>
-    <VCardText
-      v-else-if="filter"
-      class="grow d-flex justify-center align-center grey--text py-5"
-    >
-      没有目录或文件
-    </VCardText>
-    <VCardText
-      v-else-if="!loading"
-      class="grow d-flex justify-center align-center grey--text py-5"
-    >
-      空目录
-    </VCardText>
-  </VCard>
-  <!-- 重命名弹窗 -->
-  <VDialog
-    v-if="renamePopper"
-    v-model="renamePopper"
-    max-width="50rem"
-  >
-    <VCard title="重命名">
-      <VCardText>
-        <VTextField v-model="newName" label="名称" />
-      </VCardText>
-      <VCardActions>
-        <VBtn depressed @click="renamePopper = false">
-          取消
-        </VBtn>
-        <VSpacer />
-        <VBtn
-          :disabled="!newName"
-          depressed
-          variant="tonal"
-          @click="rename"
-        >
-          重命名
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-  <!-- 文件整理弹窗 -->
-  <ReorganizeForm
-    v-if="transferPopper"
-    v-model="transferPopper"
-    :path="currentItem?.path"
-    @done="transferPopper = false; load()"
-    @close="transferPopper = false"
-  />
-  <!-- 手动整理进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          v-if="progressValue"
-          color="white"
-          class="mb-0 mt-1"
-          :model-value="progressValue"
-        />
-      </VCardText>
-    </VCard>
-  </VDialog>
-  <!-- 识别结果对话框 -->
-  <VDialog
-    v-if="nameTestDialog"
-    v-model="nameTestDialog"
-    width="50rem"
-  >
-    <VCard>
-      <DialogCloseBtn @click="nameTestDialog = false" />
-      <VCardItem>
-        <MediaInfoCard :context="nameTestResult" />
-      </VCardItem>
-    </VCard>
-  </VDialog>
-</template>
-
-<style lang="scss" scoped>
-.v-card {
-    block-size: 100%;
-}
-
-.v-toolbar{
-  background: rgb(var(--v-table-header-background));
-}
-
-.virtual-scroll-div {
-  block-size: calc(100vh - 14rem);
-}
-
-@media (width <= 768px) {
-  .virtual-scroll-div {
-    block-size: calc(100vh - 16rem);
-  }
-}
-
-</style>
--- a/src/components/form/ImportCodeForm.vue
+++ b/src/components/form/ImportCodeForm.vue
@@ -1,39 +0,0 @@
-<script lang="ts" setup>
-// 输入参数
-const props = defineProps({
-  title: String,
-})
-
-// 定义事件
-const emit = defineEmits(['update:modelValue', 'close'])
-
-// 代码
-const codeString = ref('')
-
-// 导入
-function handleImport() {
-  emit('update:modelValue', codeString.value)
-  emit('close')
-}
-</script>
-
-<template>
-  <VCard
-    :title="props.title"
-    class="rounded-t"
-  >
-    <DialogCloseBtn @click="emit('close')" />
-    <VCardText class="pt-2">
-      <VTextarea v-model="codeString" />
-    </VCardText>
-    <VCardActions>
-      <VSpacer />
-      <VBtn
-        variant="tonal"
-        @click="handleImport"
-      >
-        导入
-      </VBtn>
-    </VCardActions>
-  </VCard>
-</template>
--- a/src/components/form/ReorganizeForm.vue
+++ b/src/components/form/ReorganizeForm.vue
@@ -1,315 +0,0 @@
-<script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
-import TmdbSelectorCard from '../cards/TmdbSelectorCard.vue'
-import store from '@/store'
-import api from '@/api'
-import { numberValidator } from '@/@validators'
-
-// 输入参数
-const props = defineProps({
-  path: String,
-  target: String,
-  logids: Array<number>,
-})
-
-// 定义事件
-const emit = defineEmits(['done', 'close'])
-
-// 生成1到50季的下拉框选项
-const seasonItems = ref(
-  Array.from({ length: 51 }, (_, i) => i).map(item => ({
-    title: `第 ${item} 季`,
-    value: item,
-  })),
-)
-
-// 提示框
-const $toast = useToast()
-
-// TMDB选择对话框
-const tmdbSelectorDialog = ref(false)
-
-// 加载进度SSE
-const progressEventSource = ref<EventSource>()
-
-// 整理进度条
-const progressDialog = ref(false)
-
-// 整理进度文本
-const progressText = ref('请稍候 ...')
-
-// 整理进度
-const progressValue = ref(0)
-
-// 文件转移表单
-const transferForm = reactive({
-  logid: 0,
-  path: '',
-  target: props.target ?? '',
-  tmdbid: null,
-  season: null,
-  type_name: '',
-  transfer_type: '',
-  episode_format: '',
-  episode_detail: '',
-  episode_part: '',
-  episode_offset: null,
-  min_filesize: 0,
-
-})
-
-watchEffect(() => {
-  transferForm.path = props.path ?? ''
-  transferForm.target = props.target ?? ''
-})
-
-// 使用SSE监听加载进度
-function startLoadingProgress() {
-  progressText.value = '请稍候 ...'
-
-  const token = store.state.auth.token
-
-  progressEventSource.value = new EventSource(
-    `${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer?token=${token}`,
-  )
-  progressEventSource.value.onmessage = (event) => {
-    const progress = JSON.parse(event.data)
-    if (progress) {
-      progressText.value = progress.text
-      progressValue.value = progress.value
-    }
-  }
-}
-
-// 停止监听加载进度
-function stopLoadingProgress() {
-  progressEventSource.value?.close()
-}
-
-// 整理文件
-// eslint-disable-next-line sonarjs/cognitive-complexity
-async function transfer() {
-  if (!props.logids && !props.path)
-    return
-
-  // 显示进度条
-  progressDialog.value = true
-  // 开始监听进度
-  startLoadingProgress()
-
-  if (props.path) {
-    // 文件整理
-    try {
-      const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
-        params: transferForm,
-      })
-      // 显示结果
-      if (result.success)
-        $toast.success(`${props.path} 整理完成！`)
-
-      else
-        $toast.error(`${props.path} 整理失败：${result.message}！`)
-    }
-    catch (e) {
-      console.log(e)
-    }
-  }
-  else if (props.logids) {
-    // 日志整理
-    for (const logid of props.logids) {
-      transferForm.logid = logid
-      try {
-        const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
-          params: transferForm,
-        })
-        if (!result.success)
-          $toast.error(`历史记录 ${logid} 重新整理失败：${result.message}！`)
-      }
-      catch (e) {
-        console.log(e)
-      }
-    }
-  }
-
-  // 停止监听进度
-  stopLoadingProgress()
-  // 关闭进度条
-  progressDialog.value = false
-  // 重新加载
-  emit('done')
-}
-</script>
-
-<template>
-  <VDialog
-    scrollable
-    max-width="60rem"
-  >
-    <VCard
-      :title="`${props.path ? `整理 - ${props.path}` : `整理 - 共 ${props.logids?.length} 条记录`}`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn @click="emit('close')" />
-      <VCardText class="pt-2">
-        <VForm @submit.prevent="() => {}">
-          <VRow>
-            <VCol
-              cols="12"
-              md="8"
-            >
-              <VTextField
-                v-model="transferForm.target"
-                label="目的路径"
-                placeholder="留空自动"
-                hint="留空将自动整理到媒体库目录"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="transferForm.transfer_type"
-                label="整理方式"
-                :items="[
-                  { title: '默认', value: '' },
-                  { title: '移动', value: 'move' },
-                  { title: '复制', value: 'copy' },
-                  { title: '硬链接', value: 'link' },
-                  { title: '软链接', value: 'softlink' },
-                  { title: 'Rclone复制', value: 'rclone_copy' },
-                  { title: 'Rclone移动', value: 'rclone_move' },
-                ]"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="transferForm.type_name"
-                label="类型"
-                :items="[{ title: '自动', value: '' }, { title: '电影', value: '电影' }, { title: '电视剧', value: '电视剧' }]"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="transferForm.tmdbid"
-                :disabled="transferForm.type_name === ''"
-                label="TMDBID"
-                placeholder="留空自动识别"
-                :rules="[numberValidator]"
-                append-inner-icon="mdi-magnify"
-                hint="点击图标按名称搜索，留空将自动重新识别"
-                @click:append-inner="tmdbSelectorDialog = true"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-show="transferForm.type_name === '电视剧'"
-                v-model.number="transferForm.season"
-                label="季"
-                :items="seasonItems"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol cols="12" md="8">
-              <VTextField
-                v-model="transferForm.episode_format"
-                label="集数定位"
-                placeholder="使用{ep}定位集数"
-                hint="使用{ep}定位文件名中的集数部分，其余相同部分直接填写，不同部分使用{a}进行忽略，例如：{a}葬送的芙莉莲_Sousou no Frieren 第{ep}话{b}"
-              />
-            </VCol>
-            <VCol cols="12" md="4">
-              <VTextField
-                v-model="transferForm.episode_detail"
-                label="指定集数"
-                placeholder="起始集,终止集，如1或1,2"
-                hint="直接指定集数或者范围，格式：起始集,终止集，如1或1,2"
-              />
-            </VCol>
-            <VCol cols="12" md="4">
-              <VTextField
-                v-model="transferForm.episode_part"
-                label="指定Part"
-                placeholder="如part1"
-                hint="指定集数的Part，如part1"
-              />
-            </VCol>
-            <VCol cols="12" md="4">
-              <VTextField
-                v-model.number="transferForm.episode_offset"
-                label="集数偏移"
-                placeholder="如-10"
-                hint="对集数进行偏移运算，如-10表示文件名中的集数减10为整理后集数"
-              />
-            </VCol>
-            <VCol cols="12" md="4">
-              <VTextField
-                v-model.number="transferForm.min_filesize"
-                label="最小文件大小（MB）"
-                :rules="[numberValidator]"
-                placeholder="0"
-                hint="最小文件大小，小于此大小的文件将被忽略不进行整理"
-              />
-            </VCol>
-          </VRow>
-        </VForm>
-      </VCardText>
-      <VCardActions>
-        <VBtn depressed @click="emit('close')">
-          取消
-        </VBtn>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="transfer"
-        >
-          开始整理
-        </VBtn>
-      </VCardActions>
-    </VCard>
-    <!-- 手动整理进度框 -->
-    <VDialog
-      v-model="progressDialog"
-      :scrim="false"
-      width="25rem"
-    >
-      <VCard
-        color="primary"
-      >
-        <VCardText class="text-center">
-          {{ progressText }}
-          <VProgressLinear
-            v-if="progressValue"
-            color="white"
-            class="mb-0 mt-1"
-            :model-value="progressValue"
-          />
-        </VCardText>
-      </VCard>
-    </VDialog>
-    <!-- TMDB ID搜索框 -->
-    <VDialog
-      v-model="tmdbSelectorDialog"
-      width="40rem"
-      scrollable
-      max-height="85vh"
-    >
-      <TmdbSelectorCard
-        v-model="transferForm.tmdbid"
-        @close="tmdbSelectorDialog = false"
-      />
-    </VDialog>
-  </VDialog>
-</template>
--- a/src/components/input/PathField.vue
+++ b/src/components/input/PathField.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import api from '@/api'
+import { FileItem } from '@/api/types'
+import { VTreeview } from 'vuetify/labs/VTreeview'
+
+// 输入变量为默认路径
+const props = defineProps({
+  root: {
+    type: String,
+    default: '/',
+  },
+})
+
+// update:modelValue 事件
+const emit = defineEmits(['update:modelValue'])
+
+// 激活的目录
+const activedDirs = ref<string[]>([])
+
+// 打开的目录
+const openedDirs = ref<string[]>([])
+
+// 目录列表
+const treeItems = ref<FileItem[]>([
+  {
+    name: '/',
+    path: props.root,
+    children: [],
+    type: '',
+    basename: props.root,
+    extension: '',
+    size: 0,
+    modify_time: 0,
+    fileid: '',
+    parent_fileid: '',
+  },
+])
+
+// 拉取子目录
+async function fetchDirs(item: any) {
+  return api
+    .get('/local/listdir?path=' + item.path)
+    .then((data: any) => {
+      item.children.push(...data)
+    })
+    .catch(err => console.warn(err))
+}
+
+// 获取选择的目录路径
+const selectedPath = computed(() => {
+  if (activedDirs.value.length > 0) {
+    return activedDirs.value[0]
+  }
+  return ''
+})
+
+// 监听目录变化
+watch(activedDirs, newVal => {
+  if (!newVal.length) return
+  emit('update:modelValue', selectedPath)
+})
+
+onMounted(() => {
+  fetchDirs(treeItems.value[0])
+})
+</script>
+
+<template>
+  <VMenu :close-on-content-click="false" content-class="cursor-default">
+    <template v-slot:activator="{ props }">
+      <slot name="activator" :menuprops="props" />
+    </template>
+    <VTreeview
+      v-model:activated="activedDirs"
+      v-model:opened="openedDirs"
+      :items="treeItems"
+      :load-children="fetchDirs"
+      item-key="path"
+      item-title="name"
+      item-value="path"
+      item-type="unknown"
+      activatable
+      return-object
+      max-height="20rem"
+      expand-icon="mdi-folder"
+      collapse-icon="mdi-folder-open"
+    >
+    </VTreeview>
+  </VMenu>
+</template>
--- a/src/components/misc/DashboardElement.vue
+++ b/src/components/misc/DashboardElement.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { DashboardItem } from '@/api/types'
+import AnalyticsMediaStatistic from '@/views/dashboard/AnalyticsMediaStatistic.vue'
+import AnalyticsScheduler from '@/views/dashboard/AnalyticsScheduler.vue'
+import AnalyticsSpeed from '@/views/dashboard/AnalyticsSpeed.vue'
+import AnalyticsStorage from '@/views/dashboard/AnalyticsStorage.vue'
+import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
+import AnalyticsCpu from '@/views/dashboard/AnalyticsCpu.vue'
+import AnalyticsMemory from '@/views/dashboard/AnalyticsMemory.vue'
+import MediaServerLatest from '@/views/dashboard/MediaServerLatest.vue'
+import MediaServerLibrary from '@/views/dashboard/MediaServerLibrary.vue'
+import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
+import DashboardRender from '@/components/render/DashboardRender.vue'
+import { isNullOrEmptyObject } from '@/@core/utils'
+
+// 输入参数
+const props = defineProps({
+  // 仪表板配置
+  config: Object as PropType<DashboardItem>,
+  // 刷新状态
+  refreshStatus: Boolean,
+  // 是否允许刷新数据
+  allowRefresh: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits(['update:refreshStatus'])
+
+onUnmounted(() => {
+  // 组件卸载时禁用刷新状态
+  emit('update:refreshStatus', false)
+})
+</script>
+<template>
+  <!-- 系统内置的仪表板 -->
+  <AnalyticsStorage v-if="config?.id === 'storage'" />
+  <AnalyticsMediaStatistic v-else-if="config?.id === 'mediaStatistic'" />
+  <AnalyticsWeeklyOverview v-else-if="config?.id === 'weeklyOverview'" />
+  <AnalyticsSpeed v-else-if="config?.id === 'speed'" :allowRefresh="props.allowRefresh" />
+  <AnalyticsScheduler v-else-if="config?.id === 'scheduler'" :allowRefresh="props.allowRefresh" />
+  <AnalyticsCpu v-else-if="config?.id === 'cpu'" :allowRefresh="props.allowRefresh" />
+  <AnalyticsMemory v-else-if="config?.id === 'memory'" :allowRefresh="props.allowRefresh" />
+  <MediaServerLibrary v-else-if="config?.id === 'library'" />
+  <MediaServerPlaying v-else-if="config?.id === 'playing'" />
+  <MediaServerLatest v-else-if="config?.id === 'latest'" />
+  <!-- 插件仪表板 -->
+  <VHover v-else-if="!isNullOrEmptyObject(props.config)">
+    <template #default="hover">
+      <!-- 无边框 -->
+      <div v-if="props.config?.attrs.border === false">
+        <VCard v-bind="hover.props">
+          <VCardText class="p-0">
+            <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
+          </VCardText>
+          <div v-if="hover.isHovering" class="absolute right-5 top-5">
+            <VIcon class="cursor-move">mdi-drag</VIcon>
+          </div>
+        </VCard>
+      </div>
+      <!-- 有边框 -->
+      <VCard v-else v-bind="hover.props">
+        <VCardItem v-if="props.config?.attrs.border !== false">
+          <template #append>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle>
+            {{ props.config?.attrs?.title ?? props.config?.name }}
+          </VCardTitle>
+          <VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
+        </VCardItem>
+        <VCardText>
+          <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
+        </VCardText>
+      </VCard>
+    </template>
+  </VHover>
+</template>
--- a/src/components/cards/TmdbSelectorCard.vue
+++ b/src/components/cards/TmdbSelectorCard.vue
@@ -2,10 +2,16 @@
 import api from '@/api'
 import type { MediaInfo } from '@/api/types'

+// 定义输入变量
+const props = defineProps({
+  type: String, // 来源 themoviedb | douban
+})
+
 interface TmdbItem {
  title: string
  overview: string
  tmdbid: number
+  doubanid: string
  poster: string
 }

@@ -21,25 +27,23 @@ const keyword = ref('')
 const loading = ref(false)

 // ref
-const tmdbKeyword = ref<HTMLElement | null>(null)
+const inputKeyword = ref<HTMLElement | null>(null)

 // 选中条目
 function selectMedia(item: TmdbItem) {
-  emit('update:modelValue', item.tmdbid)
+  emit('update:modelValue', item.tmdbid || item.doubanid)
  emit('close')
 }

 // TMDB图片转换为w500大小
 function getW500Image(url = '') {
-  if (!url)
-    return ''
+  if (!url) return ''
  return url.replace('original', 'w500')
 }

 // 搜索词条
 async function searchMedias() {
-  if (!keyword)
-    return
+  if (!keyword) return

  // 调用API搜索词条
  try {
@@ -57,16 +61,17 @@ async function searchMedias() {

    // 赋值
    for (const item of result) {
+      if (props.type && props.type !== item.source) continue
      items.value.push({
        tmdbid: item.tmdb_id || 0,
+        doubanid: item.douban_id || '',
        poster: getW500Image(item.poster_path),
        title: `${item.title}（${item.year}）`,
        overview: `<span class="text-primary">${item.type}</span> ${item.overview}`,
      })
    }
    loading.value = false
-  }
-  catch (e) {
+  } catch (e) {
    console.error(e)
  }
 }
@@ -75,19 +80,16 @@ async function searchMedias() {
 onMounted(() => {
  // 500ms后聚焦
  setTimeout(() => {
-    tmdbKeyword.value?.focus()
+    inputKeyword.value?.focus()
  }, 500)
 })
 </script>

 <template>
-  <VCard
-    class="mx-auto"
-    width="100%"
-  >
+  <VCard class="mx-auto" width="100%">
    <VToolbar flat class="p-0">
      <VTextField
-        ref="tmdbKeyword"
+        ref="inputKeyword"
        v-model="keyword"
        label="输入名称搜索"
        single-line
@@ -101,15 +103,17 @@ onMounted(() => {
        @keydown.enter="searchMedias"
      />
    </VToolbar>
-    <DialogCloseBtn @click="() => { emit('close') }" />
-    <VList
-      v-if="items.length > 0"
-      lines="three"
-    >
+    <DialogCloseBtn
+      @click="
+        () => {
+          emit('close')
+        }
+      "
+    />
+    <VDivider />
+    <VList v-if="items.length > 0" lines="three">
      <template v-for="(item, i) in items" :key="i">
-        <VListItem
-          @click="selectMedia(item)"
-        >
+        <VListItem @click="selectMedia(item)">
          <template #prepend>
            <VImg
              height="75"
--- a/src/components/misc/VersionHistory.vue
+++ b/src/components/misc/VersionHistory.vue
@@ -8,17 +8,16 @@ const props = defineProps({
 </script>

 <template>
-  <VCardItem>
+  <VCardText>
    <VList>
-      <VListItem
-        v-for="(value, key) in props.history"
-        :key="key"
-      >
-        <VListItemTitle>{{ key }}</VListItemTitle>
+      <VListItem v-for="(value, key) in props.history" :key="key">
+        <VListItemTitle class="font-bold text-lg">
+          {{ key }}
+        </VListItemTitle>
        <div class="text-gray-500">
          {{ value }}
        </div>
      </VListItem>
    </VList>
-  </VCardItem>
+  </VCardText>
 </template>
--- a/src/components/render/DashboardRender.vue
+++ b/src/components/render/DashboardRender.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { RenderProps } from '@/api/types'
+import { type PropType } from 'vue'
+
+// 输入参数
+const elementProps = defineProps({
+  config: Object as PropType<RenderProps>,
+})
+</script>
+
+<template>
+  <Component :is="elementProps.config?.component" v-if="!elementProps.config?.html" v-bind="elementProps.config?.props">
+    {{ elementProps.config?.text }}
+    <template v-for="(content, name) in elementProps.config?.slots || []" :key="name" v-slot:[name]="{ _props }">
+      <slot :name="name" v-bind="_props">
+        <DashboardRender v-for="(slotItem, slotIndex) in content || []" :key="slotIndex" :config="slotItem" />
+      </slot>
+    </template>
+    <DashboardRender
+      v-for="(innerItem, innerIndex) in elementProps.config?.content || []"
+      :key="innerIndex"
+      :config="innerItem"
+    />
+  </Component>
+  <Component
+    :is="elementProps.config?.component"
+    v-if="elementProps.config?.html"
+    v-bind="elementProps.config?.props"
+    v-html="elementProps.config?.html"
+  />
+</template>
--- a/src/components/render/FormRender.vue
+++ b/src/components/render/FormRender.vue
@@ -1,15 +1,7 @@
 <script lang="ts" setup>
+import { RenderProps } from '@/api/types'
 import { type PropType, ref } from 'vue'

-// 组件接口
-interface RenderProps {
-  component: string
-  text: string
-  html: string
-  content?: any
-  props?: any
-}
-
 // 输入参数
 const elementProps = defineProps({
  config: Object as PropType<RenderProps>,
@@ -17,13 +9,15 @@ const elementProps = defineProps({
 })

 // 配置元素
-const formItem = ref<RenderProps>(elementProps.config ?? {
-  component: 'div',
-  text: '',
-  html: '',
-  props: {},
-  content: [],
-})
+const formItem = ref<RenderProps>(
+  elementProps.config ?? {
+    component: 'div',
+    text: '',
+    html: '',
+    props: {},
+    content: [],
+  },
+)

 // 配置数据
 const formData = ref<any>(elementProps.form || {})
@@ -37,53 +31,27 @@ const formData = ref<any>(elementProps.form || {})
    v-model:value="formData[formItem.props?.modelvalue]"
  >
    {{ formItem.text }}
-    <template
-      v-for="(innerItem, innerIndex) in (formItem.content || [])"
-      :key="innerIndex"
-    >
+    <template v-for="(innerItem, innerIndex) in formItem.content || []" :key="innerIndex">
      <FormRender
        v-if="!!innerItem.props?.modelvalue"
        v-model:value="formData[innerItem.props?.modelvalue]"
        :config="innerItem"
        :form="formData"
      />
-      <FormRender
-        v-else
-        v-model="formData[innerItem.props?.model]"
-        :config="innerItem"
-        :form="formData"
-      />
+      <FormRender v-else v-model="formData[innerItem.props?.model]" :config="innerItem" :form="formData" />
    </template>
  </Component>
-  <Component
-    :is="formItem.component"
-    v-else-if="formItem.html"
-    v-bind="formItem.props"
-    v-html="formItem.html"
-  />
-  <Component
-    :is="formItem.component"
-    v-else
-    v-bind="formItem.props"
-    v-model="formData[formItem.props?.model]"
-  >
+  <Component :is="formItem.component" v-else-if="formItem.html" v-bind="formItem.props" v-html="formItem.html" />
+  <Component :is="formItem.component" v-else v-bind="formItem.props" v-model="formData[formItem.props?.model]">
    {{ formItem.text }}
-    <template
-      v-for="(innerItem, innerIndex) in (formItem.content || [])"
-      :key="innerIndex"
-    >
+    <template v-for="(innerItem, innerIndex) in formItem.content || []" :key="innerIndex">
      <FormRender
        v-if="!!innerItem.props?.modelvalue"
        v-model:value="formData[innerItem.props?.modelvalue]"
        :config="innerItem"
        :form="formData"
      />
-      <FormRender
-        v-else
-        v-model="formData[innerItem.props?.model]"
-        :config="innerItem"
-        :form="formData"
-      />
+      <FormRender v-else v-model="formData[innerItem.props?.model]" :config="innerItem" :form="formData" />
    </template>
  </Component>
 </template>
--- a/src/components/render/PageRender.vue
+++ b/src/components/render/PageRender.vue
@@ -1,47 +1,90 @@
 <script lang="ts" setup>
-import { type PropType, ref } from 'vue'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import api from '@/api'
+import { type PropType } from 'vue'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+import { RenderProps } from '@/api/types'

-// 组件接口
-interface RenderProps {
-  component: string
-  text: string
-  html: string
-  content?: any
-  props?: any
-}
+// 定议外部事件
+const emit = defineEmits(['action'])

 // 输入参数
 const elementProps = defineProps({
  config: Object as PropType<RenderProps>,
 })

-// 配置元素
-const formItem = ref<RenderProps>(elementProps.config ?? {
-  component: 'div',
-  text: '',
-  html: '',
-  props: {},
-  content: [],
+// 进度框
+const progressDialog = ref(false)
+
+// 进度框文本
+const progressText = ref('正在处理...')
+
+// 元素API事件响应
+async function commonAction(api_path: string, method: string, params = {}) {
+  if (!api_path || !method) return
+  progressDialog.value = true
+  try {
+    if (method.toUpperCase() === 'GET') {
+      await api.get(api_path, {
+        params: params,
+      })
+    } else {
+      await api.post(api_path, params)
+    }
+    emit('action')
+  } catch (error) {
+    console.error(error)
+  }
+  progressDialog.value = false
+}
+
+// 组装事件
+let componentEvents = reactive<{ [key: string]: any }>({})
+watchEffect(() => {
+  if (!isNullOrEmptyObject(elementProps.config?.events)) {
+    for (const key in elementProps.config?.events) {
+      const attr = elementProps.config?.events[key]
+      const func = async () => {
+        await commonAction(attr['api'], attr['method'], attr['params'])
+      }
+      componentEvents[key] = func
+    }
+  }
 })
 </script>

 <template>
  <Component
-    :is="formItem.component"
-    v-if="!formItem.html"
-    v-bind="formItem.props"
+    :is="elementProps.config?.component"
+    v-if="!elementProps.config?.html"
+    v-bind="elementProps.config?.props"
+    v-on="componentEvents"
  >
-    {{ formItem.text }}
+    {{ elementProps.config?.text }}
+    <template v-for="(content, name) in elementProps.config?.slots || []" :key="name" v-slot:[name]="{ _props }">
+      <slot :name="name" v-bind="_props">
+        <PageRender
+          v-for="(slotItem, slotIndex) in content || []"
+          :key="slotIndex"
+          :config="slotItem"
+          @action="emit('action')"
+        />
+      </slot>
+    </template>
    <PageRender
-      v-for="(innerItem, innerIndex) in (formItem.content || [])"
+      v-for="(innerItem, innerIndex) in elementProps.config?.content || []"
      :key="innerIndex"
      :config="innerItem"
+      @action="emit('action')"
    />
  </Component>
  <Component
-    :is="formItem.component"
-    v-if="formItem.html"
-    v-bind="formItem.props"
-    v-html="formItem.html"
+    :is="elementProps.config?.component"
+    v-if="elementProps.config?.html"
+    v-bind="elementProps.config?.props"
+    v-html="elementProps.config?.html"
+    v-on="componentEvents"
  />
+  <!-- 进度框 -->
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
 </template>
--- a/src/components/slide/SlideView.vue
+++ b/src/components/slide/SlideView.vue
@@ -1,5 +1,9 @@
 <script lang="ts" setup>
 import SlideViewTitle from '@/components/slide/SlideViewTitle.vue'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()

 // 元素
 const slideview_content = ref()
@@ -27,12 +31,10 @@ function slideNext(next: boolean) {
    if (run_to_left_px >= slideview_content.value.scrollWidth - slideview_content.value.clientWidth)
      run_to_left_px = slideview_content.value.scrollWidth - slideview_content.value.clientWidth
    // console.log(`最多显示: ${card_max} 当前起点: ${card_current} 目标起点: ${card_index} 卡片宽度: ${card_width}`)
-  }
-  else {
+  } else {
    const card_index = card_current - card_max
    run_to_left_px = card_index * card_width
-    if (run_to_left_px <= 0)
-      run_to_left_px = 0
+    if (run_to_left_px <= 0) run_to_left_px = 0
    // console.log(`最多显示: ${card_max} 当前起点: ${card_current} 目标起点: ${card_index} 卡片宽度: ${card_width}`)
  }
  slideview_content.value.scrollTo({
@@ -46,7 +48,7 @@ function slideNext(next: boolean) {
 function countMaxNumber() {
  slide_card_length = slideview_content.value.children.length
  card_width = slideview_content.value.firstElementChild.getBoundingClientRect().width
-  slide_gap_px = (slideview_content.value.scrollWidth / slide_card_length) - card_width
+  slide_gap_px = slideview_content.value.scrollWidth / slide_card_length - card_width
  card_width += slide_gap_px
  card_max = Math.trunc(slideview_content.value.clientWidth / card_width)
  countDisabled()
@@ -55,16 +57,18 @@ function countMaxNumber() {
 // 修改分页切换按钮状态
 function countDisabled() {
  slideview_scrollLeft.value = slideview_content.value.scrollLeft
-  card_current = slideview_content.value.scrollLeft === 0 ? 0 : Math.trunc((slideview_content.value.scrollLeft + card_width / 2) / card_width)
-  if (slide_card_length * card_width <= slideview_content.value.clientWidth)
-    disabled.value = 3
-  else if (slideview_content.value.scrollLeft === 0)
-    disabled.value = 0
-  else if (slideview_content.value.scrollLeft >= slideview_content.value.scrollWidth - slideview_content.value.clientWidth - 2)
+  card_current =
+    slideview_content.value.scrollLeft === 0
+      ? 0
+      : Math.trunc((slideview_content.value.scrollLeft + card_width / 2) / card_width)
+  if (slide_card_length * card_width <= slideview_content.value.clientWidth) disabled.value = 3
+  else if (slideview_content.value.scrollLeft === 0) disabled.value = 0
+  else if (
+    slideview_content.value.scrollLeft >=
+    slideview_content.value.scrollWidth - slideview_content.value.clientWidth - 2
+  )
    disabled.value = 2
-
-  else
-    disabled.value = 1
+  else disabled.value = 1
 }

 // 组件加载完成
@@ -91,7 +95,7 @@ onActivated(() => {
    <slot name="title">
      <SlideViewTitle />
    </slot>
-    <div v-if="disabled !== 3" class="me-1 d-none d-md-flex">
+    <div v-if="disabled !== 3 && display.mdAndUp.value" class="me-1 d-flex">
      <VBtn
        class="rounded-circle"
        variant="text"
@@ -122,9 +126,8 @@ onActivated(() => {

 <style lang="scss" scoped>
 .slideview_content {
+  overflow: scroll hidden !important;
  -ms-overflow-style: none !important;
-  overflow-x: scroll !important;
-  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
 }
--- a/src/components/slide/SlideViewTitle.vue
+++ b/src/components/slide/SlideViewTitle.vue
@@ -1,22 +1,13 @@
 <script lang="ts" setup>
 // 输入参数
-const props = inject('rankingPropsKey')
-
+const props: any = inject('rankingPropsKey')
 </script>

 <template>
-  <div
-    class="ms-1"
-  >
-    <RouterLink
-      :to="props.linkurl ? props.linkurl : ''"
-      class="slider-title"
-    >
-      <span>{{ props.title }}</span>
-      <VIcon
-        icon="mdi-arrow-right-circle-outline"
-        class="ms-1"
-      />
+  <div class="ms-1">
+    <RouterLink :to="props?.linkurl ? props?.linkurl : ''" class="slider-title">
+      <span>{{ props?.title }}</span>
+      <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
    </RouterLink>
  </div>
 </template>
--- a/src/components/table/SiteTorrentTable.vue
+++ b/src/components/table/SiteTorrentTable.vue
@@ -60,22 +60,17 @@ async function getResourceList() {
  try {
    resourceDataList.value = await api.get(`site/resource/${props.site}`)
    resourceLoading.value = false
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
 }

 // 促销Chip类
 function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
-  if (downloadVolume === 0)
-    return 'text-white bg-lime-500'
-  else if (downloadVolume < 1)
-    return 'text-white bg-green-500'
-  else if (uploadVolume !== 1)
-    return 'text-white bg-sky-500'
-  else
-    return 'text-white bg-gray-500'
+  if (downloadVolume === 0) return 'text-white bg-lime-500'
+  else if (downloadVolume < 1) return 'text-white bg-green-500'
+  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
+  else return 'text-white bg-gray-500'
 }

 // 添加下载
@@ -83,18 +78,9 @@ async function addDownload(_torrent: any) {
  const isConfirmed = await createConfirm({
    title: '确认',
    content: `是否确认下载【${_torrent.site_name}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
  })

-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return

  startNProgress()
  try {
@@ -103,13 +89,11 @@ async function addDownload(_torrent: any) {
    if (result.success) {
      // 添加下载成功
      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
-    }
-    else {
+    } else {
      // 添加下载失败
      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败：${result.message || '未知错误'}`)
    }
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
  }
  doneNProgress()
@@ -146,21 +130,10 @@ onMounted(() => {
        <div class="text-sm my-1">
          {{ item.description }}
        </div>
-        <VChip
-          v-if="item.hit_and_run"
-          variant="elevated"
-          size="small"
-          class="me-1 mb-1 text-white bg-black"
-        >
+        <VChip v-if="item.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
          H&R
        </VChip>
-        <VChip
-          v-if="item.freedate_diff"
-          variant="elevated"
-          color="secondary"
-          size="small"
-          class="me-1 mb-1"
-        >
+        <VChip v-if="item.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
          {{ item.freedate_diff }}
        </VChip>
        <VChip
@@ -175,9 +148,7 @@ onMounted(() => {
        </VChip>
        <VChip
          v-if="item.downloadvolumefactor !== 1 || item.uploadvolumefactor !== 1"
-          :class="
-            getVolumeFactorClass(item.downloadvolumefactor, item.uploadvolumefactor)
-          "
+          :class="getVolumeFactorClass(item.downloadvolumefactor, item.uploadvolumefactor)"
          variant="elevated"
          size="small"
          class="me-1 mb-1"
@@ -206,18 +177,10 @@ onMounted(() => {
    <template #item.actions="{ item }">
      <div class="me-n3">
        <IconBtn>
-          <VIcon
-            icon="mdi-dots-vertical"
-          />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
+          <VIcon icon="mdi-dots-vertical" />
+          <VMenu activator="parent" close-on-content-click>
            <VList>
-              <VListItem
-                variant="plain"
-                @click="openTorrentDetail(item.page_url || '')"
-              >
+              <VListItem variant="plain" @click="openTorrentDetail(item.page_url || '')">
                <template #prepend>
                  <VIcon icon="mdi-information" />
                </template>
@@ -238,8 +201,6 @@ onMounted(() => {
        </IconBtn>
      </div>
    </template>
-    <template #no-data>
-      没有数据
-    </template>
+    <template #no-data> 没有数据 </template>
  </VDataTable>
 </template>
--- a/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -2,17 +2,34 @@
 import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue'
 import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue'
 import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'
-
-// Components
 import Footer from '@/layouts/components/Footer.vue'
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
+import UserNofification from '@/layouts/components/UserNotification.vue'
 import SearchBar from '@/layouts/components/SearchBar.vue'
 import ShortcutBar from '@/layouts/components/ShortcutBar.vue'
 import UserProfile from '@/layouts/components/UserProfile.vue'
 import store from '@/store'
+import { SystemNavMenus } from '@/router/menu'
+import { NavMenu } from '@/@layouts/types'
+import { useDisplay } from 'vuetify'
+
+const display = useDisplay()
+const appMode = computed(() => {
+  return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
+})

 // 从Vuex Store中获取superuser信息
 const superUser = store.state.auth.superUser
+
+// 根据分类获取菜单列表
+const getMenuList = (header: string) => {
+  return SystemNavMenus.filter((item: NavMenu) => item.header === header && (!item.admin || superUser))
+}
+
+// 返回上一页
+function goBack() {
+  history.back()
+}
 </script>

 <template>
@@ -21,126 +38,51 @@ const superUser = store.state.auth.superUser
    <template #navbar="{ toggleVerticalOverlayNavActive }">
      <div class="d-flex h-100 align-center mx-1">
        <!-- 👉 Vertical Nav Toggle -->
-        <IconBtn
-          class="ms-n2 d-lg-none"
-          @click="toggleVerticalOverlayNavActive(true)"
-        >
+        <IconBtn v-if="!appMode && display.mdAndDown.value" class="ms-n2" @click="toggleVerticalOverlayNavActive(true)">
          <VIcon icon="mdi-menu" />
        </IconBtn>
-
+        <!-- 👉 Back Button -->
+        <IconBtn v-if="appMode" class="ms-n2" @click="goBack">
+          <VIcon icon="mdi-arrow-left" size="32" />
+        </IconBtn>
        <!-- 👉 Search Bar -->
        <SearchBar />
-
+        <!-- 👉 Spacer -->
        <VSpacer />
-
-        <!-- 👉 Github -->
-        <IconBtn
-          class="me-2"
-          href="https://github.com/jxxghp/MoviePilot"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <VIcon icon="mdi-github" />
-        </IconBtn>
-
        <!-- 👉 Shortcuts -->
        <ShortcutBar v-if="superUser" />
-
        <!-- 👉 Theme -->
-        <NavbarThemeSwitcher class="me-2" />
-
+        <NavbarThemeSwitcher />
+        <!-- 👉 Notification -->
+        <UserNofification />
        <!-- 👉 UserProfile -->
        <UserProfile />
      </div>
    </template>

    <template #vertical-nav-content>
-      <VerticalNavLink
-        :item="{
-          title: '仪表板',
-          icon: 'mdi-home-outline',
-          to: '/dashboard',
-        }"
-      />
-
+      <VerticalNavLink v-for="item in getMenuList('开始')" :item="item" />
      <!-- 👉 发现 -->
      <VerticalNavSectionTitle
        :item="{
          heading: '发现',
        }"
      />
-      <VerticalNavLink
-        :item="{
-          title: '推荐',
-          icon: 'mdi-table-star',
-          to: '/ranking',
-        }"
-      />
-      <VerticalNavLink
-        :item="{
-          title: '资源搜索',
-          icon: 'mdi-magnify',
-          to: '/resource',
-        }"
-      />
-
+      <VerticalNavLink v-for="item in getMenuList('发现')" :item="item" />
      <!-- 👉 订阅 -->
      <VerticalNavSectionTitle
        :item="{
          heading: '订阅',
        }"
      />
-      <VerticalNavLink
-        :item="{
-          title: '电影',
-          icon: 'mdi-movie-check-outline',
-          to: '/subscribe-movie',
-        }"
-      />
-      <VerticalNavLink
-        :item="{
-          title: '电视剧',
-          icon: 'mdi-television-classic',
-          to: '/subscribe-tv',
-        }"
-      />
-      <VerticalNavLink
-        :item="{
-          title: '日历',
-          icon: 'mdi-calendar',
-          to: '/calendar',
-        }"
-      />
+      <VerticalNavLink v-for="item in getMenuList('订阅')" :item="item" />
      <!-- 👉 整理 -->
      <VerticalNavSectionTitle
        :item="{
          heading: '整理',
        }"
      />
-      <VerticalNavLink
-        :item="{
-          title: '正在下载',
-          icon: 'mdi-download-outline',
-          to: '/downloading',
-        }"
-      />
-      <VerticalNavLink
-        v-if="superUser"
-        :item="{
-          title: '历史记录',
-          icon: 'mdi-history',
-          to: '/history',
-        }"
-      />
-      <VerticalNavLink
-        v-if="superUser"
-        :item="{
-          title: '文件管理',
-          icon: 'mdi-folder-multiple-outline',
-          to: '/filemanager',
-        }"
-      />
-
+      <VerticalNavLink v-for="item in getMenuList('整理')" :item="item" />
      <!-- 👉 系统 -->
      <VerticalNavSectionTitle
        v-if="superUser"
@@ -148,37 +90,12 @@ const superUser = store.state.auth.superUser
          heading: '系统',
        }"
      />
-      <VerticalNavLink
-        v-if="superUser"
-        :item="{
-          title: '插件',
-          icon: 'mdi-apps',
-          to: '/plugins',
-        }"
-      />
-      <VerticalNavLink
-        v-if="superUser"
-        :item="{
-          title: '站点管理',
-          icon: 'mdi-web',
-          to: '/site',
-        }"
-      />
-      <VerticalNavLink
-        v-if="superUser"
-        :item="{
-          title: '设定',
-          icon: 'mdi-cog',
-          to: '/setting',
-        }"
-      />
+      <VerticalNavLink v-for="item in getMenuList('系统')" :item="item" />
    </template>

    <template #after-vertical-nav-items />
-
    <!-- 👉 Pages -->
    <slot />
-
    <!-- 👉 Footer -->
    <template #footer>
      <Footer />
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -1,3 +1,69 @@
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+
+const display = useDisplay()
+const appMode = computed(() => {
+  return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
+})
+
+const route = useRoute()
+
+// 各按钮活动状态
+const activeState = computed(() => {
+  return {
+    home: route.path === '/dashboard',
+    ranking: route.path === '/ranking',
+    movie: route.path === '/subscribe/movie',
+    tv: route.path === '/subscribe/tv',
+    apps: route.path === '/apps',
+  }
+})
+</script>
+
 <template>
-  <div class="h-100 d-flex align-center justify-space-between" />
+  <div v-if="appMode" class="w-100" style="block-size: calc(3.5rem + env(safe-area-inset-bottom))">
+    <VBottomNavigation
+      grow
+      horizontal
+      color="primary"
+      class="footer-nav border-t"
+      style="block-size: calc(3.5rem + env(safe-area-inset-bottom))"
+    >
+      <VBtn to="/dashboard" :ripple="false">
+        <VIcon v-if="activeState.home" size="28">mdi-home</VIcon>
+        <VIcon v-else size="28">mdi-home-outline</VIcon>
+      </VBtn>
+      <VBtn to="/ranking" :ripple="false">
+        <VIcon v-if="activeState.ranking" size="28">mdi-star</VIcon>
+        <VIcon v-else size="28">mdi-star-outline</VIcon>
+      </VBtn>
+      <VBtn to="/subscribe/movie" :ripple="false">
+        <VIcon v-if="activeState.movie" size="28">mdi-movie-open</VIcon>
+        <VIcon v-else size="28">mdi-movie-open-outline</VIcon>
+      </VBtn>
+      <VBtn to="/subscribe/tv" :ripple="false">
+        <VIcon v-if="activeState.tv" size="28">mdi-television-play</VIcon>
+        <VIcon v-else size="28">mdi-television</VIcon>
+      </VBtn>
+      <VBtn to="/apps" :ripple="false">
+        <VIcon v-if="activeState.apps" size="28">mdi-dots-horizontal-circle</VIcon>
+        <VIcon v-else size="28">mdi-dots-horizontal</VIcon>
+      </VBtn>
+    </VBottomNavigation>
+  </div>
 </template>
+
+<style lang="scss">
+.footer-nav {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  background-color: rgb(var(--v-theme-surface), 0.8);
+  padding-block-end: env(safe-area-inset-bottom);
+}
+
+.footer-nav .v-btn--variant-text .v-btn__overlay {
+  background-color: transparent !important;
+}
+</style>
+}
--- a/src/layouts/components/NavbarThemeSwitcher.vue
+++ b/src/layouts/components/NavbarThemeSwitcher.vue
@@ -2,25 +2,29 @@
 import type { ThemeSwitcherTheme } from '@layouts/types'

 const themes: ThemeSwitcherTheme[] = [
+  {
+    name: 'auto',
+    title: '跟随系统',
+    icon: 'mdi-laptop',
+  },
  {
    name: 'light',
+    title: '明亮',
    icon: 'mdi-weather-sunny',
  },
  {
    name: 'dark',
+    title: '暗黑',
    icon: 'mdi-weather-night',
  },
  {
    name: 'purple',
+    title: '紫韵幽兰',
    icon: 'mdi-brightness-4',
  },
-  {
-    name: 'auto',
-    icon: 'mdi-brightness-auto',
-  },
 ]
 </script>

 <template>
-  <ThemeSwitcher :themes="themes" />
+  <ThemeSwitcher class="ms-2" :themes="themes" />
 </template>
--- a/src/layouts/components/SearchBar.vue
+++ b/src/layouts/components/SearchBar.vue
@@ -1,106 +1,52 @@
 <script lang="ts" setup>
-// 路由
-const router = useRouter()
+import * as Mousetrap from 'mousetrap'
+import SearchBarView from '@/views/system/SearchBarView.vue'
+import { useDisplay } from 'vuetify'
+import { ref, computed } from 'vue'

-// 搜索词
-const searchWord = ref<string>('')
+const display = useDisplay()

-// 搜索弹窗
 const searchDialog = ref(false)

-// ref
-const searchWordInput = ref<HTMLElement | null>(null)
-
-// Search
-function search() {
-  if (!searchWord.value)
-    return
-
-  searchDialog.value = false
-  router.push({
-    path: '/browse/media/search',
-    query: {
-      title: searchWord.value,
-    },
-  })
-}
+// 注册快捷键
+Mousetrap.bind(['command+k', 'ctrl+k'], openSearchDialog)

 // 打开搜索弹窗
 function openSearchDialog() {
  searchDialog.value = true
-  nextTick(() => {
-    searchWordInput.value?.focus()
-  })
+  return false
 }
+
+// 检测操作系统是否是Mac
+function isMac() {
+  return navigator.platform.toUpperCase().indexOf('MAC') >= 0
+}
+
+// 计算属性：根据操作系统显示不同的按键提示
+const metaKey = computed(() => (isMac() ? '⌘+K' : 'Ctrl+K'))
 </script>

 <template>
-  <!-- 👉 Search Button -->
-  <div
-    class="d-flex align-center cursor-pointer"
-    style="user-select: none;"
-  >
-    <VDialog
-      v-model="searchDialog"
-      max-width="50rem"
-      transition="dialog-top-transition"
-    >
-      <!-- Dialog Content -->
-      <VCard title="搜索">
-        <VCardText>
-          <VRow>
-            <VCol cols="12">
-              <VTextField
-                ref="searchWordInput"
-                v-model="searchWord"
-                label="电影、电视剧名称"
-                @keydown.enter="search"
-              />
-            </VCol>
-          </VRow>
-        </VCardText>
-
-        <VCardActions>
-          <VSpacer />
-          <VBtn
-            variant="tonal"
-            @click="search"
-          >
-            搜索
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-  </div>
  <!-- 👉 Search Icon -->
-  <IconBtn
-    class="d-lg-none"
-    @click="openSearchDialog"
-  >
-    <VIcon icon="mdi-magnify" />
-  </IconBtn>
-  <!-- 👉 Search Textfield -->
-  <span class="w-1/5">
-    <VTextField
-      key="search_navbar"
-      v-model="searchWord"
-      class="d-none d-lg-block text-disabled search-box"
-      density="compact"
-      variant="solo"
-      label="搜索电影、电视剧"
-      append-inner-icon="mdi-magnify"
-      single-line
-      hide-details
-      flat
-      rounded
-      @click:append-inner="search"
-      @keydown.enter="search"
-    />
-  </span>
+  <div class="d-flex align-center cursor-pointer ms-lg-n2" style="user-select: none">
+    <IconBtn @click="openSearchDialog">
+      <VIcon icon="ri-search-line" />
+    </IconBtn>
+    <span v-if="display.lgAndUp.value" class="flex align-center text-disabled ms-2" @click="openSearchDialog">
+      <span class="me-3">搜索</span>
+      <span class="meta-key">{{ metaKey }}</span>
+    </span>
+  </div>
+  <!-- 搜索弹窗 -->
+  <SearchBarView v-model="searchDialog" v-if="searchDialog" @close="searchDialog = false" />
 </template>

-<style lang="scss">
-.search-box div.v-input__control div[role="textbox"] {
-  border: 1px solid rgb(var(--v-theme-background));
+<style type="scss" scoped>
+.meta-key {
+  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 6px;
+  block-size: 1.75rem;
+  padding-block: 0.1rem;
+  padding-inline: 0.25rem;
 }
-</style>
+</style>
--- a/src/layouts/components/ShortcutBar.vue
+++ b/src/layouts/components/ShortcutBar.vue
@@ -7,6 +7,11 @@ import ModuleTestView from '@/views/system/ModuleTestView.vue'
 import MessageView from '@/views/system/MessageView.vue'
 import store from '@/store'
 import api from '@/api'
+import { useDisplay } from 'vuetify'
+import { getQueryValue } from '@/@core/utils'
+
+// 显示器宽度
+const display = useDisplay()

 // App捷径
 const appsMenu = ref(false)
@@ -63,8 +68,7 @@ async function sendMessage() {
      user_message.value = ''
      sendButtonDisabled.value = false
      scrollMessageToEnd()
-    }
-    catch (error) {
+    } catch (error) {
      console.error(error)
    }
  }
@@ -72,6 +76,29 @@ async function sendMessage() {

 onMounted(() => {
  scrollMessageToEnd()
+  const shortcut = getQueryValue('shortcut')
+  if (shortcut) {
+    switch (shortcut) {
+      case 'nameTest':
+        nameTestDialog.value = true
+        break
+      case 'netTest':
+        netTestDialog.value = true
+        break
+      case 'logging':
+        loggingDialog.value = true
+        break
+      case 'ruleTest':
+        ruleTestDialog.value = true
+        break
+      case 'systemTest':
+        systemTestDialog.value = true
+        break
+      case 'message':
+        messageDialog.value = true
+        break
+    }
+  }
 })
 </script>

@@ -88,10 +115,7 @@ onMounted(() => {
  >
    <!-- Menu Activator -->
    <template #activator="{ props }">
-      <IconBtn
-        class="me-2"
-        v-bind="props"
-      >
+      <IconBtn class="ms-2" v-bind="props">
        <VIcon icon="mdi-checkbox-multiple-blank-outline" />
      </IconBtn>
    </template>
@@ -107,132 +131,61 @@ onMounted(() => {
      </VCardItem>
      <div class="ps ps--active-y">
        <VRow class="ma-0 mt-n1">
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-          >
-            <VListItem
-              class="pa-4"
-              @click="nameTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e">
+            <VListItem class="pa-4" @click="nameTestDialog = true">
+              <VAvatar size="48" variant="tonal">
                <VIcon icon="mdi-text-recognition" />
              </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                识别
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">识别</h6>
              <span class="text-sm">名称识别测试</span>
            </VListItem>
          </VCol>
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="ruleTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="ruleTestDialog = true">
+              <VAvatar size="48" variant="tonal">
                <VIcon icon="mdi-filter-cog-outline" />
              </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                优先级
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">优先级</h6>
              <span class="text-sm">优先级规则测试</span>
            </VListItem>
          </VCol>
        </VRow>
        <VRow class="ma-0 mt-n1 border-t">
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="loggingDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="loggingDialog = true">
+              <VAvatar size="48" variant="tonal">
                <VIcon icon="mdi-file-document-outline" />
              </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                日志
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">日志</h6>
              <span class="text-sm">实时日志</span>
            </VListItem>
          </VCol>
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="netTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon" @click="() => {}">
+            <VListItem class="pa-4" @click="netTestDialog = true">
+              <VAvatar size="48" variant="tonal">
                <VIcon icon="mdi-network-outline" />
              </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                网络
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">网络</h6>
              <span class="text-sm">网速连通性测试</span>
            </VListItem>
          </VCol>
        </VRow>
        <VRow class="ma-0 mt-n1 border-t">
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="systemTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="systemTestDialog = true">
+              <VAvatar size="48" variant="tonal">
                <VIcon icon="mdi-cog-outline" />
              </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                系统
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">系统</h6>
              <span class="text-sm">健康检查</span>
            </VListItem>
          </VCol>
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="messageDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="messageDialog = true">
+              <VAvatar size="48" variant="tonal">
                <VIcon icon="mdi-message-outline" />
              </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                消息
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">消息</h6>
              <span class="text-sm">消息中心</span>
            </VListItem>
          </VCol>
@@ -241,37 +194,30 @@ onMounted(() => {
    </VCard>
  </VMenu>
  <!-- 名称测试弹窗 -->
-  <VDialog
-    v-if="nameTestDialog"
-    v-model="nameTestDialog"
-    max-width="50rem"
-  >
+  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="50rem" scrollable>
    <VCard title="名称识别测试">
      <DialogCloseBtn @click="nameTestDialog = false" />
-      <VCardItem>
+      <VCardText>
        <NameTestView />
-      </VCardItem>
+      </VCardText>
    </VCard>
  </VDialog>
  <!-- 网络测试弹窗 -->
-  <VDialog
-    v-if="netTestDialog"
-    v-model="netTestDialog"
-    max-width="35rem"
-  >
+  <VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable>
    <VCard title="网络测试">
      <DialogCloseBtn @click="netTestDialog = false" />
-      <VCardItem>
+      <VCardText>
        <NetTestView />
-      </VCardItem>
+      </VCardText>
    </VCard>
  </VDialog>
  <!-- 实时日志弹窗 -->
  <VDialog
    v-if="loggingDialog"
    v-model="loggingDialog"
-    class="w-full lg:w-4/5"
    scrollable
+    max-width="70rem"
+    :fullscreen="!display.mdAndUp.value"
  >
    <VCard>
      <DialogCloseBtn @click="loggingDialog = false" />
@@ -279,7 +225,9 @@ onMounted(() => {
        <VCardTitle class="inline-flex">
          实时日志
          <a class="mx-2 inline-flex items-center justify-center" :href="allLoggingUrl()" target="_blank">
-            <div class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700">
+            <div
+              class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
+            >
              <VIcon icon="mdi-open-in-new" />
              <span class="ms-1">在新窗口中打开</span>
            </div>
@@ -292,12 +240,7 @@ onMounted(() => {
    </VCard>
  </VDialog>
  <!-- 规则测试弹窗 -->
-  <VDialog
-    v-if="ruleTestDialog"
-    v-model="ruleTestDialog"
-    max-width="50rem"
-    scrollable
-  >
+  <VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="50rem" scrollable>
    <VCard title="优先级测试">
      <DialogCloseBtn @click="ruleTestDialog = false" />
      <VCardText>
@@ -306,12 +249,7 @@ onMounted(() => {
    </VCard>
  </VDialog>
  <!-- 系统健康检查弹窗 -->
-  <VDialog
-    v-if="systemTestDialog"
-    v-model="systemTestDialog"
-    max-width="50rem"
-    scrollable
-  >
+  <VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" max-height="85vh" scrollable>
    <VCard title="系统健康检查">
      <DialogCloseBtn @click="systemTestDialog = false" />
      <VCardText>
@@ -325,6 +263,7 @@ onMounted(() => {
    v-model="messageDialog"
    max-width="60rem"
    scrollable
+    :fullscreen="!display.mdAndUp.value"
  >
    <VCard title="消息中心">
      <DialogCloseBtn @click="messageDialog = false" />
@@ -345,13 +284,7 @@ onMounted(() => {
          @keydown.enter="sendMessage"
        >
          <template #append>
-            <VBtn
-              color="primary"
-              :disabled="sendButtonDisabled"
-              @click="sendMessage"
-            >
-              发送
-            </VBtn>
+            <VBtn color="primary" :disabled="sendButtonDisabled" @click="sendMessage"> 发送 </VBtn>
          </template>
        </VTextField>
      </VCardItem>
--- a/src/layouts/components/UserNotification.vue
+++ b/src/layouts/components/UserNotification.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import store from '@/store'
+import { formatDateDifference } from '@core/utils/formatters'
+import { SystemNotification } from '@/api/types'
+
+// 是否有新消息
+const hasNewMessage = ref(false)
+
+// 通知列表
+const notificationList = ref<SystemNotification[]>([])
+
+// 事件源
+let eventSource: EventSource | null = null
+
+// 弹窗
+const appsMenu = ref(false)
+
+// SSE持续接收消息
+function startSSEMessager() {
+  const token = store.state.auth.token
+  if (token) {
+    eventSource = new EventSource(`${import.meta.env.VITE_API_BASE_URL}system/message?token=${token}`)
+    eventSource.addEventListener('message', event => {
+      if (event.data) {
+        const noti: SystemNotification = JSON.parse(event.data)
+        notificationList.value.unshift(noti)
+        hasNewMessage.value = true
+        // TODO 在顶部显示消息汽泡
+      }
+    })
+  }
+}
+
+// 页面加载时，加载当前用户数据
+onBeforeMount(async () => {
+  startSSEMessager()
+})
+
+// 页面卸载时，关闭事件源
+onBeforeUnmount(() => {
+  if (eventSource) eventSource.close()
+})
+</script>
+<template>
+  <VMenu v-model="appsMenu" width="400" transition="scale-transition" close-on-content-click>
+    <!-- Menu Activator -->
+    <template #activator="{ props }">
+      <VBadge v-if="hasNewMessage" dot color="error" :offset-x="5" :offset-y="5" v-bind="props">
+        <IconBtn>
+          <VIcon icon="mdi-bell-outline" />
+        </IconBtn>
+      </VBadge>
+      <IconBtn v-else v-bind="props">
+        <VIcon icon="mdi-bell-outline" />
+      </IconBtn>
+    </template>
+    <!-- Menu Content -->
+    <VCard>
+      <VCardItem class="border-b">
+        <VCardTitle>通知</VCardTitle>
+        <template #append>
+          <VTooltip text="设为已读">
+            <template #activator="{ props }">
+              <IconBtn
+                v-bind="props"
+                @click="
+                  () => {
+                    hasNewMessage = false
+                    appsMenu = false
+                  }
+                "
+              >
+                <VIcon icon="mdi-email-mark-as-unread" />
+              </IconBtn>
+            </template>
+          </VTooltip>
+        </template>
+      </VCardItem>
+      <VList lines="two" v-if="notificationList.length > 0" max-height="600">
+        <VListItem v-for="(item, i) in notificationList" :key="i">
+          <template #prepend>
+            <VAvatar rounded>
+              <VIcon v-if="item.type === 'user'" icon="mdi-account-alert" size="large"></VIcon>
+              <VIcon v-else-if="item.type === 'plugin'" icon="mdi-robot-happy" size="large"></VIcon>
+              <VIcon v-else icon="mdi-laptop" size="large"></VIcon>
+            </VAvatar>
+          </template>
+          <VListItemTitle class="overflow-visiable break-words whitespace-break-spaces">
+            {{ item.title }}
+          </VListItemTitle>
+          <VListItemSubtitle class="mt-2">{{ item.text }}</VListItemSubtitle>
+          <VListItemSubtitle class="mt-2">{{ formatDateDifference(item.date) }}</VListItemSubtitle>
+        </VListItem>
+      </VList>
+      <VList v-else>
+        <VListItem>
+          <VListItemTitle class="text-center">暂无通知</VListItemTitle>
+        </VListItem>
+      </VList>
+    </VCard>
+  </VMenu>
+</template>
--- a/src/layouts/components/UserProfile.vue
+++ b/src/layouts/components/UserProfile.vue
@@ -5,6 +5,10 @@ import { useToast } from 'vue-toast-notification'
 import router from '@/router'
 import avatar1 from '@images/avatars/avatar-1.png'
 import api from '@/api'
+import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
+import { useDisplay } from 'vuetify'
+
+const display = useDisplay()

 // Vuex Store
 const store = useStore()
@@ -21,8 +25,7 @@ const progressDialog = ref(false)
 // 执行注销操作
 function logout() {
  // 清除登录状态信息
-  store.dispatch('auth/clearToken')
-
+  store.dispatch('auth/logout')
  // 重定向到登录页面或其他适当的页面
  router.push('/login')
 }
@@ -33,14 +36,6 @@ async function restart() {
  const confirmed = await createConfirm({
    title: '确认',
    content: '确认重启系统吗？',
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '30rem',
-    },
-    cancellationButtonProps: {
-      variant: 'tonal',
-    },
  })

  if (confirmed) {
@@ -56,8 +51,7 @@ async function restart() {
        $toast.error(result.message)
        return
      }
-    }
-    catch (error) {
+    } catch (error) {
      console.error(error)
    }
    // 注销
@@ -65,132 +59,95 @@ async function restart() {
  }
 }

+// 是否精简模式
+const isCompactMode = ref(localStorage.getItem('MP_APPMODE') != '0')
+
 // 从Vuex Store中获取信息
 const superUser = store.state.auth.superUser
 const userName = store.state.auth.userName
 const avatar = store.state.auth.avatar
+
+// 监听精简模式切换
+watch(isCompactMode, value => {
+  localStorage.setItem('MP_APPMODE', value ? '1' : '0')
+  //刷新页面
+  location.reload()
+})
 </script>

 <template>
-  <VAvatar
-    class="cursor-pointer"
-    color="primary"
-    variant="tonal"
-  >
+  <VAvatar class="cursor-pointer ms-3" color="primary" variant="tonal">
    <VImg :src="avatar ?? avatar1" />

    <!-- SECTION Menu -->
-    <VMenu
-      activator="parent"
-      width="230"
-      location="bottom end"
-      offset="14px"
-    >
+    <VMenu activator="parent" width="230" location="bottom end" offset="14px">
      <VList>
        <!-- 👉 User Avatar & Name -->
        <VListItem>
          <template #prepend>
            <VListItemAction start>
-              <VAvatar
-                color="primary"
-                variant="tonal"
-              >
+              <VAvatar color="primary" variant="tonal">
                <VImg :src="avatar ?? avatar1" />
              </VAvatar>
            </VListItemAction>
          </template>

          <VListItemTitle class="font-weight-semibold">
-            {{ superUser ? "管理员" : "普通用户" }}
+            {{ superUser ? '管理员' : '普通用户' }}
          </VListItemTitle>
          <VListItemSubtitle>{{ userName }}</VListItemSubtitle>
        </VListItem>
+
+        <!-- Divider -->
+        <VDivider v-if="display.mdAndDown.value" class="my-2" />
+
+        <!-- 👉 AppMode -->
+        <VListItem v-if="display.mdAndDown.value">
+          <template #prepend>
+            <VSwitch class="me-2" v-model="isCompactMode"></VSwitch>
+          </template>
+          <VListItemTitle>App模式</VListItemTitle>
+        </VListItem>
        <VDivider class="my-2" />

        <!-- 👉 Profile -->
-        <VListItem
-          v-if="superUser"
-          link
-          to="setting"
-        >
+        <VListItem v-if="superUser" link @click="router.push('/setting?tab=account')">
          <template #prepend>
-            <VIcon
-              class="me-2"
-              icon="mdi-account-outline"
-              size="22"
-            />
+            <VIcon class="me-2" icon="mdi-account-outline" size="22" />
          </template>
-
          <VListItemTitle>设定</VListItemTitle>
        </VListItem>

-        <!-- Divider -->
-        <VDivider class="my-2" />
-
-        <!-- 👉 restart -->
-        <VListItem
-          v-if="superUser"
-          @click="restart"
-        >
+        <!-- 👉 FAQ -->
+        <VListItem href="https://wiki.movie-pilot.org" target="_blank">
          <template #prepend>
-            <VIcon
-              class="me-2"
-              icon="mdi-restart"
-              size="22"
-            />
+            <VIcon class="me-2" icon="mdi-help-circle-outline" size="22" />
          </template>
-
-          <VListItemTitle>重启</VListItemTitle>
+          <VListItemTitle>帮助</VListItemTitle>
        </VListItem>

-        <!-- 👉 FAQ -->
-        <VListItem
-          href="https://github.com/jxxghp/MoviePilot/blob/main/README.md"
-          target="_blank"
-        >
-          <template #prepend>
-            <VIcon
-              class="me-2"
-              icon="mdi-help-circle-outline"
-              size="22"
-            />
-          </template>
+        <!-- Divider -->
+        <VDivider v-if="superUser" class="my-2" />

-          <VListItemTitle>帮助</VListItemTitle>
+        <!-- 👉 restart -->
+        <VListItem v-if="superUser" @click="restart">
+          <template #prepend>
+            <VIcon class="me-2" icon="mdi-restart" size="22" />
+          </template>
+          <VListItemTitle>重启</VListItemTitle>
        </VListItem>

        <!-- 👉 Logout -->
        <VListItem @click="logout">
-          <template #prepend>
-            <VIcon
-              class="me-2"
-              icon="mdi-logout"
-              size="22"
-            />
-          </template>
-
-          <VListItemTitle>注销</VListItemTitle>
+          <VBtn color="error" block>
+            <template #append> <VIcon size="small" icon="mdi-logout" /> </template>
+            退出登录
+          </VBtn>
        </VListItem>
      </VList>
    </VMenu>
    <!-- !SECTION -->
  </VAvatar>
  <!-- 重启进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        正在重启 ...
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
-      </VCardText>
-    </VCard>
-  </VDialog>
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" text="正在重启 ..." />
 </template>
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,17 +1,7 @@
 <script lang="ts" setup>
 import DefaultLayoutWithVerticalNav from './components/DefaultLayoutWithVerticalNav.vue'
-import api from '@/api'

-const router = useRouter()
 const route = useRoute()
-document.addEventListener('visibilitychange', () => {
-  if (document.visibilityState === 'visible') {
-    api.get('user/current')
-      .catch(() => {
-        router.replace('/login')
-      })
-  }
-})
 </script>

 <template>
@@ -27,5 +17,5 @@ document.addEventListener('visibilitychange', () => {

 <style lang="scss">
 // As we are using `layouts` plugin we need its styles to be imported
-@use "@layouts/styles/default-layout";
+@use '@layouts/styles/default-layout';
 </style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,31 +1,51 @@
-import { VAceEditor } from 'vue3-ace-editor'
-import { createApp } from 'vue'
-import '@/@iconify/icons-bundle'
-import ToastPlugin from 'vue-toast-notification'
-import VuetifyUseDialog from 'vuetify-use-dialog'
+import '@/@core/utils/compatibility'
 import './ace-config'
-import VueApexCharts from 'vue3-apexcharts'
-import { removeEl } from './@core/utils/dom'
+import '@/@iconify/icons-bundle'
+import '@/plugins/webfontloader'
 import App from '@/App.vue'
 import vuetify from '@/plugins/vuetify'
-import { loadFonts } from '@/plugins/webfontloader'
 import router from '@/router'
 import store from '@/store'
+import { VAceEditor } from 'vue3-ace-editor'
+import { createApp } from 'vue'
+import { removeEl } from './@core/utils/dom'
+import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar'
+import { VTreeview } from 'vuetify/labs/VTreeview'
+import ToastPlugin from 'vue-toast-notification'
+import VuetifyUseDialog from 'vuetify-use-dialog'
+import VueApexCharts from 'vue3-apexcharts'
+import DialogCloseBtn from '@/@core/components/DialogCloseBtn.vue'
+import MediaCard from './components/cards/MediaCard.vue'
+import PosterCard from './components/cards/PosterCard.vue'
+import BackdropCard from './components/cards/BackdropCard.vue'
+import PersonCard from './components/cards/PersonCard.vue'
+import MediaInfoCard from './components/cards/MediaInfoCard.vue'
+import TorrentCard from './components/cards/TorrentCard.vue'
+import MediaIdSelector from './components/misc/MediaIdSelector.vue'
+import PathField from './components/input/PathField.vue'
 import '@core/scss/template/index.scss'
 import '@layouts/styles/index.scss'
 import '@styles/styles.scss'
 import 'vue-toast-notification/dist/theme-bootstrap.css'
-import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar';
-import 'vue3-perfect-scrollbar/style.css';
-
-loadFonts()
+import 'vue3-perfect-scrollbar/style.css'

 // 创建Vue实例
 const app = createApp(App)

 // 注册全局组件
-app.component('VAceEditor', VAceEditor)
+app
+  .component('VAceEditor', VAceEditor)
  .component('VApexChart', VueApexCharts)
+  .component('VDialogCloseBtn', DialogCloseBtn)
+  .component('VMediaCard', MediaCard)
+  .component('VPosterCard', PosterCard)
+  .component('VBackdropCard', BackdropCard)
+  .component('VPersonCard', PersonCard)
+  .component('VMediaInfoCard', MediaInfoCard)
+  .component('VTorrentCard', TorrentCard)
+  .component('VMediaIdSelector', MediaIdSelector)
+  .component('VTreeview', VTreeview)
+  .component('VPathField', PathField)

 // 注册插件
 app
@@ -35,7 +55,27 @@ app
  .use(ToastPlugin, {
    position: 'bottom-right',
  })
-  .use(VuetifyUseDialog)
+  .use(VuetifyUseDialog, {
+    confirmDialog: {
+      dialogProps: {
+        maxWidth: '40rem',
+      },
+      confirmationButtonProps: {
+        variant: 'elevated',
+        color: 'primary',
+        class: 'me-3 px-5',
+        'prepend-icon': 'mdi-check',
+      },
+      cancellationButtonProps: {
+        variant: 'outlined',
+        color: 'secondary',
+        class: 'me-3',
+      },
+      confirmationText: '确认',
+      cancellationText: '取消',
+    },
+  })
  .use(PerfectScrollbarPlugin)
+  .use(VueApexCharts)
  .mount('#app')
  .$nextTick(() => removeEl('#loading-bg'))
--- a/src/pages/appcenter.vue
+++ b/src/pages/appcenter.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { NavMenu } from '@/@layouts/types'
+import { SystemNavMenus } from '@/router/menu'
+import store from '@/store'
+import draggable from 'vuedraggable'
+
+// 从Vuex Store中获取superuser信息
+const superUser = store.state.auth.superUser
+
+// APP图标顺序
+const appOrder = ref<string[]>([])
+
+// 根据分类获取菜单列表
+const getMenuList = () => {
+  return SystemNavMenus.filter((item: NavMenu) => !item.admin || superUser)
+}
+
+// APP列表
+const appList = ref<NavMenu[]>(getMenuList())
+
+// 保存APP图标顺序到localStorage
+function saveAppsOrder() {
+  appOrder.value = appList.value.map(app => app.title)
+  localStorage.setItem('MP_APPS_ORDER', JSON.stringify(appOrder.value))
+}
+
+onMounted(() => {
+  const localOrder = localStorage.getItem('MP_APPS_ORDER')
+  if (localOrder) {
+    appOrder.value = JSON.parse(localOrder)
+    // 对appList进行排序
+    appList.value.sort((a, b) => {
+      const aIndex = appOrder.value.findIndex(item => item === a.title)
+      const bIndex = appOrder.value.findIndex(item => item === b.title)
+      return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex)
+    })
+  }
+})
+</script>
+<template>
+  <div class="ps ps--active-y mx-3 appcenter-grid" tabindex="0">
+    <draggable
+      v-model="appList"
+      item-key="title"
+      tag="VRow"
+      delay="300"
+      @end="saveAppsOrder"
+      :component-data="{ 'class': 'ma-0 mt-n1' }"
+    >
+      <template #item="{ element }">
+        <VCol cols="6" md="4" lg="3" class="text-center cursor-pointer shortcut-icon select-none">
+          <VCard class="pa-4" :to="element.to" variant="flat">
+            <VAvatar size="64" variant="text">
+              <VIcon size="48" :icon="element.icon" color="primary" />
+            </VAvatar>
+            <h6 class="text-base font-weight-medium mt-2 mb-0">{{ element.full_title || element.title }}</h6>
+          </VCard>
+        </VCol>
+      </template>
+    </draggable>
+  </div>
+</template>
+
+<style type="scss">
+.appcenter-grid .v-card {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  background-color: rgb(var(--v-theme-surface), 0.8);
+}
+</style>
--- a/src/pages/browse.vue
+++ b/src/pages/browse.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import api from '@/api'
 import MediaCardListView from '@/views/discover/MediaCardListView.vue'
+import PersonCardListView from '@/views/discover/PersonCardListView.vue'

 // 输入参数
 const props = defineProps({
@@ -11,14 +13,16 @@ const props = defineProps({
 const route = useRoute()

 // 标题
-const title = route.query?.title?.toString()
+let title = route.query?.title?.toString()
+
+// 类型
+const type = route.query?.type?.toString()
+if (type === 'person') title = '演员：' + title

 // 计算API路径
 function getApiPath(paths: string[] | string) {
-  if (Array.isArray(paths))
-    return paths.join('/')
-  else
-    return paths
+  if (Array.isArray(paths)) return paths.join('/')
+  else return paths
 }
 </script>

@@ -26,14 +30,15 @@ function getApiPath(paths: string[] | string) {
  <div>
    <div v-if="title" class="mt-3 md:flex md:items-center md:justify-between">
      <div class="min-w-0 flex-1 mx-0">
-        <h2 class="mb-4 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0" data-testid="page-header">
+        <h2
+          class="mb-4 ms-3 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0"
+          data-testid="page-header"
+        >
          <span class="text-moviepilot">{{ title }}</span>
        </h2>
      </div>
    </div>
-    <MediaCardListView
-      :apipath="getApiPath(props.paths || '')"
-      :params="route.query"
-    />
+    <PersonCardListView v-if="type === 'person'" :apipath="getApiPath(props.paths || '')" :params="route.query" />
+    <MediaCardListView v-else :apipath="getApiPath(props.paths || '')" :params="route.query" />
  </div>
 </template>
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -1,34 +1,40 @@
 <script setup lang="ts">
-import AnalyticsMediaStatistic from '@/views/dashboard/AnalyticsMediaStatistic.vue'
-import AnalyticsScheduler from '@/views/dashboard/AnalyticsScheduler.vue'
-import AnalyticsSpeed from '@/views/dashboard/AnalyticsSpeed.vue'
-import AnalyticsStorage from '@/views/dashboard/AnalyticsStorage.vue'
-import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
-import AnalyticsCpu from '@/views/dashboard/AnalyticsCpu.vue'
-import AnalyticsMemory from '@/views/dashboard/AnalyticsMemory.vue'
-import MediaServerLatest from '@/views/dashboard/MediaServerLatest.vue'
-import MediaServerLibrary from '@/views/dashboard/MediaServerLibrary.vue'
-import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
+import draggable from 'vuedraggable'
+import api from '@/api'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import { DashboardItem } from '@/api/types'
+import store from '@/store'
+import DashboardElement from '@/components/misc/DashboardElement.vue'
+import { useDisplay } from 'vuetify'

-// 仪表盘配置
-const dashboard_names = {
-  storage: '存储空间',
-  mediaStatistic: '媒体统计',
-  weeklyOverview: '最近入库',
-  speed: '实时速率',
-  scheduler: '后台任务',
-  cpu: 'CPU',
-  memory: '内存',
-  library: '我的媒体库',
-  playing: '继续观看',
-  latest: '最近添加',
-}
+// APP
+const display = useDisplay()
+const appMode = computed(() => {
+  return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
+})

-// 弹窗
-const dialog = ref(false)
+// 从Vuex Store中获取superuser信息
+const superUser = store.state.auth.superUser

-// 从localStorage中获取数据
-const default_config = {
+// 是否拉升高度
+const isElevated = ref(true)
+
+// 是否发送请求的总开关
+const isRequest = ref(true)
+
+// 计算属性，控制是否拉升高度
+const elevatedConf = controlledComputed(
+  () => isElevated.value,
+  () => ({
+    class: { 'match-height': isElevated.value },
+  }),
+)
+
+// 所有组件刷新定时器的句柄
+const refreshTimers = ref<{ [key: string]: NodeJS.Timeout }>({})
+
+// 仪表板启用配置
+const enableConfig = ref<{ [key: string]: boolean }>({
  mediaStatistic: true,
  scheduler: false,
  speed: false,
@@ -39,147 +45,345 @@ const default_config = {
  library: true,
  playing: true,
  latest: true,
+})
+
+// 仪表板顺序配置
+const orderConfig = ref<{ id: string; key: string }[]>([])
+
+// 仪表板配置
+const dashboardConfigs = ref<DashboardItem[]>([
+  {
+    id: 'storage',
+    name: '存储空间',
+    key: '',
+    attrs: {},
+    cols: { cols: 12, md: 4 },
+    elements: [],
+  },
+  {
+    id: 'mediaStatistic',
+    name: '媒体统计',
+    key: '',
+    attrs: {},
+    cols: { cols: 12, md: 8 },
+    elements: [],
+  },
+  {
+    id: 'weeklyOverview',
+    name: '最近入库',
+    key: '',
+    attrs: {},
+    cols: { cols: 12, md: 4 },
+    elements: [],
+  },
+  {
+    id: 'speed',
+    name: '实时速率',
+    key: '',
+    attrs: {},
+    cols: { cols: 12, md: 4 },
+    elements: [],
+  },
+  {
+    id: 'scheduler',
+    name: '后台任务',
+    key: '',
+    attrs: {},
+    cols: { cols: 12, md: 4 },
+    elements: [],
+  },
+  {
+    id: 'cpu',
+    name: 'CPU',
+    key: '',
+    attrs: {},
+    cols: { cols: 12, md: 6 },
+    elements: [],
+  },
+  {
+    id: 'memory',
+    name: '内存',
+    key: '',
+    attrs: {},
+    cols: { cols: 12, md: 6 },
+    elements: [],
+  },
+  {
+    id: 'library',
+    name: '我的媒体库',
+    key: '',
+    attrs: {},
+    cols: { cols: 12 },
+    elements: [],
+  },
+  {
+    id: 'playing',
+    name: '继续观看',
+    key: '',
+    attrs: {},
+    cols: { cols: 12 },
+    elements: [],
+  },
+  {
+    id: 'latest',
+    name: '最近添加',
+    key: '',
+    attrs: {},
+    cols: { cols: 12 },
+    elements: [],
+  },
+])
+
+// 插件的仪表板元信息
+const pluginDashboardMeta = ref<any[]>([])
+
+// 插件仪表板的刷新状态
+const pluginDashboardRefreshStatus = ref<{ [key: string]: boolean }>({})
+
+// 弹窗
+const dialog = ref(false)
+
+// 加载用户监控面板配置（本地无配置时才加载）
+async function loadDashboardConfig() {
+  // 显示配置
+  const local_enable = localStorage.getItem('MP_DASHBOARD')
+  if (local_enable) {
+    enableConfig.value = JSON.parse(local_enable)
+  } else {
+    const response = await api.get('/user/config/Dashboard')
+    if (response && response.data && response.data.value) {
+      enableConfig.value = response.data.value
+      localStorage.setItem('MP_DASHBOARD', JSON.stringify(response.data.value))
+    }
+  }
+  // 顺序配置
+  const local_order = localStorage.getItem('MP_DASHBOARD_ORDER')
+  if (local_order) {
+    orderConfig.value = JSON.parse(local_order)
+  } else {
+    const response2 = await api.get('/user/config/DashboardOrder')
+    if (response2 && response2.data && response2.data.value) {
+      orderConfig.value = response2.data.value
+      localStorage.setItem('MP_DASHBOARD_ORDER', JSON.stringify(orderConfig.value))
+    }
+  }
+  // 是否拉升高度
+  const local_elevated = localStorage.getItem('MP_DASHBOARD_ELEVATED')
+  if (local_elevated) isElevated.value = local_elevated === 'true'
+  // 排序
+  if (orderConfig.value) {
+    sortDashboardConfigs()
+  }
 }
-const config = ref(JSON.parse(localStorage.getItem('MP_DASHBOARD') || '{}'))
-if (Object.keys(config.value).length === 0) {
-  config.value = default_config
-  localStorage.setItem('MP_DASHBOARD', JSON.stringify(config.value))
+
+// 按order的顺序对dashboardConfigs进行排序
+function sortDashboardConfigs() {
+  dashboardConfigs.value.sort((a, b) => {
+    const aIndex = orderConfig.value.findIndex(
+      (item: { id: string; key: string }) => item.id === a.id && item.key === a.key,
+    )
+    const bIndex = orderConfig.value.findIndex(
+      (item: { id: string; key: string }) => item.id === b.id && item.key === b.key,
+    )
+    return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex)
+  })
 }

 // 设置项目
-function setDashboardConfig() {
-  localStorage.setItem('MP_DASHBOARD', JSON.stringify(config.value))
+async function saveDashboardConfig() {
+  // 启用配置
+  const data = JSON.stringify(enableConfig.value)
+  localStorage.setItem('MP_DASHBOARD', data)
+  // 顺序配置，从dashboardConfigs中提取
+  const order = JSON.stringify(dashboardConfigs.value.map(item => ({ id: item.id, key: item.key })))
+  localStorage.setItem('MP_DASHBOARD_ORDER', order)
+  // 是否拉升高度
+  localStorage.setItem('MP_DASHBOARD_ELEVATED', isElevated.value.toString())
+  // 保存到服务端
+  try {
+    await api.post('/user/config/Dashboard', data, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    await api.post('/user/config/DashboardOrder', order, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  } catch (error) {
+    console.error(error)
+  }
+  // 保存后重新获取插件仪表板
+  getPluginDashboardMeta()
  dialog.value = false
 }
+
+// 构造插件仪表板主ID
+function buildPluginDashboardId(plugin_id: string, key: string) {
+  if (!key) return plugin_id
+  return plugin_id + ':' + key
+}
+
+// 调用API获取所有插件的仪表板元信息
+async function getPluginDashboardMeta() {
+  // 只有超级用户才能获取
+  if (!superUser) return
+  pluginDashboardMeta.value = await api.get('/plugin/dashboard/meta')
+  try {
+    if (!isNullOrEmptyObject(pluginDashboardMeta.value)) {
+      // 下载插件仪表板配置
+      pluginDashboardMeta.value.forEach(async (pluginDashboard: { id: string; key: string }) => {
+        const pluginDashboardId = buildPluginDashboardId(pluginDashboard.id, pluginDashboard.key)
+        // 初始化插件仪表板的刷新状态
+        pluginDashboardRefreshStatus.value[pluginDashboardId] = true
+        await getPluginDashboard(pluginDashboard.id, pluginDashboard.key)
+      })
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 获取一个插件的仪表板配置项
+async function getPluginDashboard(id: string, key: string) {
+  try {
+    const url = key ? `/plugin/dashboard/${id}/${key}` : `/plugin/dashboard/${id}`
+    api.get(url).then((res: any) => {
+      if (res) {
+        // 名称替换为元信息的名称
+        const meta = pluginDashboardMeta.value.find(
+          (item: { id: string; key: string }) => item.id === id && item.key === key,
+        )
+        if (meta) res.name = meta.name
+        // 保存到仪表板配置中，如果已经存在则替换
+        const index = dashboardConfigs.value.findIndex(
+          (item: { id: string; key: string }) => item.id === id && item.key === key,
+        )
+        if (index !== -1) {
+          dashboardConfigs.value[index] = res
+        } else {
+          dashboardConfigs.value.push(res)
+          // 排序
+          sortDashboardConfigs()
+        }
+        const pluginDashboardId = buildPluginDashboardId(id, key)
+        // 定时刷新
+        if (
+          res.attrs?.refresh &&
+          pluginDashboardRefreshStatus.value[pluginDashboardId] &&
+          enableConfig.value[pluginDashboardId] &&
+          isRequest.value
+        ) {
+          // 清除之前的定时器
+          if (refreshTimers.value[pluginDashboardId]) {
+            clearTimeout(refreshTimers.value[pluginDashboardId])
+          }
+          // 设置新的定时器
+          let timer = setTimeout(() => {
+            getPluginDashboard(id, key)
+          }, res.attrs.refresh * 1000)
+          refreshTimers.value[pluginDashboardId] = timer
+        }
+      }
+    })
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 拖动排序结束
+function dragOrderEnd() {
+  // 保存数据
+  saveDashboardConfig()
+}
+
+onBeforeMount(async () => {
+  await loadDashboardConfig()
+  getPluginDashboardMeta()
+})
+
+onActivated(async () => {
+  isRequest.value = true
+})
+
+onDeactivated(() => {
+  isRequest.value = false
+})
 </script>

 <template>
+  <!-- 仪表板 -->
+  <draggable
+    v-model="dashboardConfigs"
+    @end="dragOrderEnd"
+    handle=".cursor-move"
+    item-key="id"
+    tag="VRow"
+    :component-data="elevatedConf"
+  >
+    <template #item="{ element }">
+      <VCol v-if="enableConfig[buildPluginDashboardId(element.id, element.key)] && element.cols" v-bind:="element.cols">
+        <DashboardElement
+          :config="element"
+          :allow-refresh="isRequest"
+          v-model:refreshStatus="pluginDashboardRefreshStatus[buildPluginDashboardId(element.id, element.key)]"
+        />
+      </VCol>
+    </template>
+  </draggable>
+
  <!-- 底部操作按钮 -->
  <VFab
    icon="mdi-view-dashboard-edit"
-    location="bottom end"
+    location="bottom"
    size="x-large"
    fixed
    app
    appear
    @click="dialog = true"
+    :class="{ 'mb-12': appMode }"
  />
-  <VRow class="match-height">
-    <VCol
-      v-if="config.storage"
-      cols="12"
-      md="4"
-    >
-      <AnalyticsStorage />
-    </VCol>

-    <VCol
-      v-if="config.mediaStatistic"
-      cols="12"
-      md="8"
-    >
-      <AnalyticsMediaStatistic />
-    </VCol>
-
-    <VCol
-      v-if="config.weeklyOverview"
-      cols="12"
-      md="4"
-    >
-      <AnalyticsWeeklyOverview />
-    </VCol>
-
-    <VCol
-      v-if="config.speed"
-      cols="12"
-      md="4"
-    >
-      <AnalyticsSpeed />
-    </VCol>
-
-    <VCol
-      v-if="config.scheduler"
-      cols="12"
-      md="4"
-    >
-      <AnalyticsScheduler />
-    </VCol>
-
-    <VCol
-      v-if="config.cpu"
-      cols="12"
-      md="6"
-    >
-      <AnalyticsCpu />
-    </VCol>
-
-    <VCol
-      v-if="config.memory"
-      cols="12"
-      md="6"
-    >
-      <AnalyticsMemory />
-    </VCol>
-
-    <VCol
-      v-if="config.library"
-      cols="12"
-    >
-      <MediaServerLibrary />
-    </VCol>
-
-    <VCol
-      v-if="config.playing"
-      cols="12"
-    >
-      <MediaServerPlaying />
-    </VCol>
-
-    <VCol
-      v-if="config.latest"
-      cols="12"
-    >
-      <MediaServerLatest />
-    </VCol>
-  </VRow>
  <!-- 弹窗，根据配置生成选项 -->
-  <VDialog
-    v-model="dialog"
-    max-width="600"
-    scrollable
-  >
-    <VCard title="设置仪表板">
+  <VDialog v-model="dialog" max-width="35rem" scrollable>
+    <VCard>
+      <VCardItem>
+        <VCardTitle>设置仪表板</VCardTitle>
+      </VCardItem>
+      <VDivider />
      <VCardText>
        <VRow>
          <VCol
-            v-for="(item, key) in dashboard_names"
-            :key="key"
-            cols="12"
+            v-for="item in dashboardConfigs"
+            :key="buildPluginDashboardId(item.id, item.key)"
+            cols="6"
            md="4"
+            sm="4"
          >
            <VCheckbox
-              v-model="config[key]"
-              :label="dashboard_names[key]"
+              v-model="enableConfig[buildPluginDashboardId(item.id, item.key)]"
+              :label="item.attrs?.title ?? item.name"
            />
          </VCol>
        </VRow>
+        <VRow>
+          <VCol cols="12" md="6">
+            <VSwitch v-model="isElevated" label="自适应组件高度" />
+          </VCol>
+        </VRow>
      </VCardText>
-      <VCardActions>
-        <VBtn
-          color="primary"
-          @click="dialog = false"
-        >
-          取消
-        </VBtn>
+      <VDivider />
+      <VCardText class="pt-5 text-end">
        <VSpacer />
-        <VBtn
-          color="primary"
-          variant="tonal"
-          @click="setDashboardConfig"
-        >
+        <VBtn variant="outlined" color="secondary" class="me-4" @click="dialog = false"> 关闭 </VBtn>
+        <VBtn @click="saveDashboardConfig">
+          <template #prepend>
+            <VIcon icon="mdi-content-save" />
+          </template>
          保存
        </VBtn>
-      </VCardActions>
+      </VCardText>
    </VCard>
-  </vdialog>
+  </VDialog>
 </template>
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { debounce } from 'lodash'
 import { VForm } from 'vuetify/components/VForm'
 import { useStore } from 'vuex'
 import { requiredValidator } from '@/@validators'
 import api from '@/api'
 import router from '@/router'
 import logo from '@images/logo.png'
+import { useTheme } from 'vuetify'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
+import { urlBase64ToUint8Array } from '@/@core/utils/navigator'
+
+const { global: globalTheme } = useTheme()

 // Vuex Store
 const store = useStore()
@@ -28,6 +34,9 @@ const errorMessage = ref('')
 // 背景图片
 const backgroundImageUrl = ref('')

+// 所有的背景图片
+const backgroundImages = ref<string[]>([])
+
 // 背景图片加载状态
 const isImageLoaded = ref(false)

@@ -37,20 +46,23 @@ const isOTP = ref(false)
 // 用户名称输入框
 const usernameInput = ref()

+// Interval定时器
+let intervalTimer: NodeJS.Timeout | null = null
+
 // 获取背景图片
 async function fetchBackgroundImage() {
-  api
-    .get('/login/wallpaper')
-    .then((response: any) => {
-      backgroundImageUrl.value = response.message
-    })
-    .catch((error: any) => {
-      console.log(error)
-    })
+  try {
+    backgroundImages.value = await api.get('/login/wallpapers')
+    if (backgroundImages.value && backgroundImages.value.length > 0) {
+      backgroundImageUrl.value = backgroundImages.value[0]
+    }
+  } catch (e) {
+    console.log(e)
+  }
 }

 // 查询是否开启双重验证
-async function fetchOTP() {
+const fetchOTP = debounce(async () => {
  const userid = usernameInput.value?.value
  if (!userid) {
    isOTP.value = false
@@ -64,6 +76,60 @@ async function fetchOTP() {
    .catch((error: any) => {
      console.log(error)
    })
+}, 500)
+
+// 获取用户主题配置
+async function fetchThemeConfig() {
+  const response = await api.get('/user/config/theme')
+  if (response && response.data && response.data.value) {
+    return response.data.value
+  }
+  return null
+}
+
+// 生效主题
+async function setTheme() {
+  let themeValue = (await fetchThemeConfig()) || localStorage.getItem('theme') || 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+  globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
+  // 存储主题到本地
+  localStorage.setItem('theme', themeValue)
+  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+}
+
+// 订阅推送通知
+async function subscribeForPushNotifications() {
+  if ('serviceWorker' in navigator && 'PushManager' in window) {
+    const registration = await navigator.serviceWorker.ready
+    // 获取订阅信息
+    const subscription = await registration.pushManager.getSubscription().then(function (subscription) {
+      if (subscription === null) {
+        const convertedVapidKey = urlBase64ToUint8Array(import.meta.env.VITE_PUBLIC_VAPID_KEY)
+        return registration.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: convertedVapidKey,
+        })
+      } else {
+        return subscription
+      }
+    })
+    // 发送订阅请求
+    try {
+      await api.post('/message/webpush/subscribe', subscription)
+    } catch (e) {
+      console.log(e)
+    }
+  }
+}
+
+// 登录后处理
+async function afterLogin(superuser: boolean) {
+  // 生效主题配置
+  await setTheme()
+  // 跳转到首页或回原始页面
+  router.push(store.state.auth.originalPath ?? '/')
+  // 订阅推送通知
+  if (superuser) await subscribeForPushNotifications()
 }

 // 登录获取token事件
@@ -92,37 +158,30 @@ function login() {
    .then((response: any) => {
      // 获取token
      const token = response.access_token
-      const superuser = response.super_user
-      const username = response.user_name
+      const superUser = response.super_user
+      const userName = response.user_name
      const avatar = response.avatar
+      const level = response.level
+      const remember = form.value.remember

      // 更新token和remember状态到Vuex Store
-      store.dispatch('auth/updateToken', token)
-      store.dispatch('auth/updateRemember', form.value.remember)
-      store.dispatch('auth/updateSuperUser', superuser)
-      store.dispatch('auth/updateUserName', username)
-      store.dispatch('auth/updateAvatar', avatar)
+      store.dispatch('auth/login', { token, remember, superUser, userName, avatar, level })

-      // 跳转到首页或回原始页面
-      router.push(store.state.auth.originalPath ?? '/')
+      // 登录后处理
+      afterLogin(superUser)
    })
    .catch((error: any) => {
      // 登录失败，显示错误提示
-      if (!error.response)
-        errorMessage.value = '登录失败，请检查网络连接'
-      else if (error.response.status === 401)
-        errorMessage.value = '登录失败，请检查用户名、密码或双重验证是否正确'
-      else if (error.response.status === 403)
-        errorMessage.value = '登录失败，您没有权限访问'
-      else if (error.response.status === 500)
-        errorMessage.value = '登录失败，服务器错误'
-      else
-        errorMessage.value = `登录失败 ${error.response.status}，请检查用户名、密码或双重验证码是否正确`
+      if (!error.response) errorMessage.value = '登录失败，请检查网络连接'
+      else if (error.response.status === 401) errorMessage.value = '登录失败，请检查用户名、密码或双重验证是否正确'
+      else if (error.response.status === 403) errorMessage.value = '登录失败，您没有权限访问'
+      else if (error.response.status === 500) errorMessage.value = '登录失败，服务器错误'
+      else errorMessage.value = `登录失败 ${error.response.status}，请检查用户名、密码或双重验证码是否正确`
    })
 }

 // 自动登录
-onMounted(() => {
+onMounted(async () => {
  // 从Vuex Store中获取token和remember状态
  const token = store.state.auth.token
  const remember = store.state.auth.remember
@@ -130,113 +189,103 @@ onMounted(() => {
  // 如果token存在，且保持登录状态为true，则跳转到首页
  if (token && remember) {
    router.push('/')
-  }
-  else {
+  } else {
    // 获取背景图片
-    fetchBackgroundImage()
+    await fetchBackgroundImage()
+
+    // 每隔5秒更换一次背景图片
+    intervalTimer = setInterval(() => {
+      if (backgroundImages.value.length > 0) {
+        const index = Math.floor(Math.random() * backgroundImages.value.length)
+        backgroundImageUrl.value = backgroundImages.value[index]
+      }
+    }, 5000)
  }
 })
+
+onUnmounted(() => {
+  if (intervalTimer) clearInterval(intervalTimer)
+})
 </script>

 <template>
-  <VImg
-    aspect-ratio="4/3"
-    :src="backgroundImageUrl"
-    class="w-full h-full overflow-hidden"
-    cover
-    @load="isImageLoaded = true"
-  >
-    <div class="auth-wrapper d-flex align-center justify-center pa-4">
-      <VCard
-        class="auth-card pa-7 w-full h-full"
-        :class="isImageLoaded ? 'backdrop-blur-xl bg-white/50' : ''"
-        max-width="25rem"
-        :theme="isImageLoaded ? 'light' : ''"
-      >
-        <VCardItem class="justify-center mb-7">
-          <template #prepend>
-            <div class="d-flex pe-0">
-              <VImg :src="logo" width="64" height="64" />
-            </div>
-          </template>
-
-          <VCardTitle class="font-weight-semibold text-2xl text-uppercase">
-            MoviePilot
-          </VCardTitle>
-        </VCardItem>
-
-        <VCardText>
-          <VForm
-            ref="refForm"
-            @submit.prevent="() => {}"
-          >
-            <VRow>
-              <!-- username -->
-              <VCol cols="12">
-                <VTextField
-                  ref="usernameInput"
-                  v-model="form.username"
-                  label="用户名"
-                  type="text"
-                  :rules="[requiredValidator]"
-                  @input="fetchOTP"
-                />
-              </VCol>
-              <!-- password -->
-              <VCol cols="12">
-                <VTextField
-                  v-model="form.password"
-                  label="密码"
-                  :type="isPasswordVisible ? 'text' : 'password'"
-                  :append-inner-icon="
-                    isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
-                  "
-                  :rules="[requiredValidator]"
-                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  v-if="isOTP"
-                  v-model="form.otp_password"
-                  label="双重验证码"
-                  type="input"
-                />
-                <!-- remember me checkbox -->
-                <div class="d-flex align-center justify-space-between flex-wrap">
-                  <VCheckbox
-                    v-model="form.remember"
-                    label="保持登录"
-                    required
-                  />
-                </div>
-              </VCol>
-              <VCol cols="12">
-                <!-- login button -->
-                <VBtn
-                  block
-                  type="submit"
-                  @click="login"
-                >
-                  登录
-                </VBtn>
-                <div
-                  v-if="errorMessage"
-                  class="text-error mt-2 text-shadow"
-                >
-                  {{ errorMessage }}
-                </div>
-              </VCol>
-            </VRow>
-          </VForm>
-        </VCardText>
-      </VCard>
+  <template v-for="image in backgroundImages">
+    <div v-if="backgroundImageUrl == image" class="absolute inset-0">
+      <VImg :src="image" class="w-full h-full" cover position="center top" @load="isImageLoaded = true">
+        <template #placeholder>
+          <VSkeletonLoader v-if="!isImageLoaded" class="object-cover" />
+        </template>
+        <div
+          class="absolute inset-0"
+          style="background-image: linear-gradient(rgba(45, 55, 72, 33%) 0%, rgb(26, 32, 46) 100%)"
+        />
+      </VImg>
    </div>
-  </VImg>
+  </template>
+  <div class="auth-wrapper d-flex align-center justify-center pa-4">
+    <VCard
+      class="auth-card px-7 py-3 w-full h-full rounded-lg"
+      :class="{ 'opacity-85': isImageLoaded }"
+      max-width="24rem"
+    >
+      <VCardItem class="justify-center">
+        <template #prepend>
+          <div class="d-flex pe-0">
+            <VImg :src="logo" width="64" height="64" />
+          </div>
+        </template>
+
+        <VCardTitle class="font-weight-semibold text-2xl text-uppercase"> MoviePilot </VCardTitle>
+      </VCardItem>
+
+      <VCardText>
+        <VForm ref="refForm" @submit.prevent="() => {}">
+          <VRow>
+            <!-- username -->
+            <VCol cols="12">
+              <VTextField
+                ref="usernameInput"
+                v-model="form.username"
+                label="用户名"
+                type="text"
+                :rules="[requiredValidator]"
+                @input="fetchOTP"
+              />
+            </VCol>
+            <!-- password -->
+            <VCol cols="12">
+              <VTextField
+                v-model="form.password"
+                label="密码"
+                :type="isPasswordVisible ? 'text' : 'password'"
+                :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                :rules="[requiredValidator]"
+                @click:append-inner="isPasswordVisible = !isPasswordVisible"
+              />
+            </VCol>
+            <VCol cols="12">
+              <VTextField v-if="isOTP" v-model="form.otp_password" label="双重验证码" type="input" />
+              <!-- remember me checkbox -->
+              <div class="d-flex align-center justify-space-between flex-wrap">
+                <VCheckbox v-model="form.remember" label="保持登录" required />
+              </div>
+            </VCol>
+            <VCol cols="12">
+              <!-- login button -->
+              <VBtn block type="submit" @click="login"> 登录 </VBtn>
+              <div v-if="errorMessage" class="text-error mt-2 text-shadow">
+                {{ errorMessage }}
+              </div>
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+    </VCard>
+  </div>
 </template>

 <style lang="scss">
-@use "@core/scss/pages/page-auth.scss";
+@use '@core/scss/pages/page-auth.scss';

 .v-card-item__prepend {
  padding-inline-end: 0 !important;
--- a/src/pages/person.vue
+++ b/src/pages/person.vue
@@ -7,15 +7,15 @@ const route = useRoute()
 // Person Id
 const personid = route.query?.personid?.toString()

+// 来源
+const source = route.query?.source?.toString()
+
 // 类型
 const type = route.query?.type?.toString()
 </script>

 <template>
  <div>
-    <PersonDetailView
-      :personid="personid"
-      :type="type"
-    />
+    <PersonDetailView :personid="personid" :type="type" :source="source" />
  </div>
 </template>
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -1,82 +1,77 @@
 <script setup lang="ts">
 import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'

-const viewList = reactive<{apipath: string, linkurl: string, title: string}[]>([
+const viewList = reactive<{ apipath: string; linkurl: string; title: string }[]>([
  {
    apipath: 'tmdb/trending',
-    linkurl: "/browse/tmdb/trending?title=流行趋势",
-    title: "流行趋势",
+    linkurl: '/browse/tmdb/trending?title=流行趋势',
+    title: '流行趋势',
  },
  {
-     apipath: "douban/showing",
-      linkurl: "/browse/douban/showing?title=正在热映",
-      title: "正在热映"
+    apipath: 'douban/showing',
+    linkurl: '/browse/douban/showing?title=正在热映',
+    title: '正在热映',
  },
  {
-    apipath: "bangumi/calendar",
-      linkurl: "/browse/bangumi/calendar?title=Bangumi每日放送",
-      title: "Bangumi每日放送"
+    apipath: 'bangumi/calendar',
+    linkurl: '/browse/bangumi/calendar?title=Bangumi每日放送',
+    title: 'Bangumi每日放送',
  },
  {
-    apipath: "tmdb/movies",
-      linkurl: "/browse/tmdb/movies?title=热门电影",
-      title: "热门电影"
+    apipath: 'tmdb/movies',
+    linkurl: '/browse/tmdb/movies?title=TMDB热门电影',
+    title: 'TMDB热门电影',
  },
  {
-     apipath: "tmdb/tvs?with_original_language=zh|en|ja|ko",
-      linkurl: "/browse/tmdb/tvs??with_original_language=zh|en|ja|ko&title=热门电视剧",
-      title: "热门电视剧"
+    apipath: 'tmdb/tvs?with_original_language=zh|en|ja|ko',
+    linkurl: '/browse/tmdb/tvs??with_original_language=zh|en|ja|ko&title=TMDB热门电视剧',
+    title: 'TMDB热门电视剧',
  },
  {
-    apipath: "douban/movie_hot",
-      linkurl: "/browse/douban/movie_hot?title=热门电影",
-      title: "热门电影"
+    apipath: 'douban/movie_hot',
+    linkurl: '/browse/douban/movie_hot?title=豆瓣热门电影',
+    title: '豆瓣热门电影',
  },
  {
-     apipath: "douban/tv_hot",
-      linkurl: "/browse/douban/tv_hot?title=热门电视剧",
-      title: "热门电视剧"
+    apipath: 'douban/tv_hot',
+    linkurl: '/browse/douban/tv_hot?title=豆瓣热门电视剧',
+    title: '豆瓣热门电视剧',
  },
  {
-    apipath: "douban/tv_animation",
-      linkurl: "/browse/douban/tv_animation?title=热门动漫",
-      title: "热门动漫"
+    apipath: 'douban/tv_animation',
+    linkurl: '/browse/douban/tv_animation?title=豆瓣热门动漫',
+    title: '豆瓣热门动漫',
  },
  {
-    apipath: "douban/movies",
-      linkurl: "/browse/douban/movies?title=最新电影",
-      title: "最新电影"
+    apipath: 'douban/movies',
+    linkurl: '/browse/douban/movies?title=豆瓣最新电影',
+    title: '豆瓣最新电影',
  },
  {
-    apipath: "douban/tvs",
-      linkurl: "/browse/douban/tvs?title=最新电视剧",
-      title: "最新电视剧"
+    apipath: 'douban/tvs',
+    linkurl: '/browse/douban/tvs?title=豆瓣最新电视剧',
+    title: '豆瓣最新电视剧',
  },
  {
-    apipath: "douban/movie_top250",
-      linkurl: "/browse/douban/movie_top250?title=电影TOP250",
-      title: "电影TOP250"
+    apipath: 'douban/movie_top250',
+    linkurl: '/browse/douban/movie_top250?title=电影TOP250',
+    title: '豆瓣电影TOP250',
  },
  {
-    apipath: "douban/tv_weekly_chinese",
-      linkurl: "/browse/douban/tv_weekly_chinese?title=国产剧集榜",
-      title: "国产剧集榜"
+    apipath: 'douban/tv_weekly_chinese',
+    linkurl: '/browse/douban/tv_weekly_chinese?title=豆瓣国产剧集榜',
+    title: '豆瓣国产剧集榜',
  },
  {
-    apipath: "douban/tv_weekly_global",
-      linkurl: "/browse/douban/tv_weekly_global?title=全球剧集榜",
-      title: "全球剧集榜"
-  }
+    apipath: 'douban/tv_weekly_global',
+    linkurl: '/browse/douban/tv_weekly_global?title=豆瓣全球剧集榜',
+    title: '豆瓣全球剧集榜',
+  },
 ])
-
 </script>

 <template>
  <div>
-    <MediaCardSlideView 
-      v-for="item in viewList" 
-      :key="item.apipath"
-      v-bind="item"
-    />
+    <MediaCardSlideView v-for="(item, index) in viewList" :key="index" v-bind="item" />
  </div>
 </template>
--- a/src/pages/resource.vue
+++ b/src/pages/resource.vue
@@ -5,6 +5,13 @@ import type { Context } from '@/api/types'
 import store from '@/store'
 import TorrentCardListView from '@/views/discover/TorrentCardListView.vue'
 import TorrentRowListView from '@/views/discover/TorrentRowListView.vue'
+import { useDisplay } from 'vuetify'
+
+// APP
+const display = useDisplay()
+const appMode = computed(() => {
+  return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
+})

 // 路由参数
 const route = useRoute()
@@ -54,7 +61,7 @@ function startLoadingProgress() {
  progressEventSource.value = new EventSource(
    `${import.meta.env.VITE_API_BASE_URL}system/progress/search?token=${token}`,
  )
-  progressEventSource.value.onmessage = (event) => {
+  progressEventSource.value.onmessage = event => {
    const progress = JSON.parse(event.data)
    if (progress) {
      progressText.value = progress.text
@@ -65,7 +72,7 @@ function startLoadingProgress() {

 // 停止监听加载进度
 function stopLoadingProgress() {
-  progressEventSource.value?.close()
+  if (progressEventSource.value) progressEventSource.value?.close()
 }

 // 设置视图类型
@@ -80,34 +87,38 @@ async function fetchData() {
    if (!keyword) {
      // 查询上次搜索结果
      dataList.value = await api.get('search/last')
-    }
-    else {
+    } else {
      startLoadingProgress()
+      let result: { [key: string]: any }
      // 优先按TMDBID精确查询
      if (keyword?.startsWith('tmdb:') || keyword?.startsWith('douban:') || keyword?.startsWith('bangumi:')) {
-        const result: {[key: string]: any} = await api.get(`search/media/${keyword}`, {
+        result = await api.get(`search/media/${keyword}`, {
          params: {
            mtype: type,
            area,
            season,
          },
        })
-        if (result.success){
-          dataList.value = result.data
-        } else {
-          errorDescription.value = result.message
-        }
-      }
-      else {
+      } else {
        // 按标题模糊查询
-        dataList.value = await api.get(`search/title/${keyword}`)
+        result = await api.get(`search/title`, {
+          params: {
+            keyword,
+          },
+        })
+      }
+      if (result && result.success) {
+        dataList.value = result.data
+      } else if (result && result.message) {
+        errorDescription.value = result.message
      }
      stopLoadingProgress()
+      // 从浏览器历史中删除当前搜索
+      window.history.replaceState(null, '', window.location.pathname)
    }
    // 标记已刷新
    isRefreshed.value = true
-  }
-  catch (error) {
+  } catch (error) {
    console.error(error)
    return Promise.reject(error)
  }
@@ -117,48 +128,46 @@ async function fetchData() {
 onMounted(() => {
  fetchData()
 })
+
+// 卸载时停止加载进度
+onUnmounted(() => {
+  stopLoadingProgress()
+})
 </script>

 <template>
-  <div v-if="!isRefreshed" class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center">
-    <VProgressCircular v-if="!keyword" size="48" indeterminate color="primary" />
-    <VProgressCircular v-if="keyword" class="mb-3" color="primary" :model-value="progressValue" size="64" />
-    <span>{{ progressText }}</span>
-  </div>
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" :text="progressText" :progress="progressValue" />
  <NoDataFound
    v-if="dataList.length === 0 && isRefreshed"
    :error-title="errorTitle"
    :error-description="errorDescription"
  />
  <div v-if="dataList.length > 0">
-    <TorrentRowListView
-      v-if="viewType === 'list'"
-      :items="dataList"
-    />
-    <TorrentCardListView
-      v-else
-      :items="dataList"
-    />
+    <TorrentRowListView v-if="viewType === 'list'" :items="dataList" />
+    <TorrentCardListView v-else :items="dataList" />
  </div>
  <!-- 视图切换 -->
  <VFab
    v-if="viewType === 'list'"
+    class="mb-12"
    icon="mdi-view-grid"
-    location="bottom end"
+    location="bottom"
    size="x-large"
-    fixed
+    absolute
    app
    appear
    @click="setViewType('card')"
+    :class="{ 'mb-12': appMode }"
  />
  <VFab
    v-else
    icon="mdi-view-list"
-    location="bottom end"
+    location="bottom"
    size="x-large"
    fixed
    app
    appear
    @click="setViewType('list')"
+    :class="{ 'mb-12': appMode }"
  />
 </template>
--- a/src/pages/setting.vue
+++ b/src/pages/setting.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router'
+import router from '@/router'
 import AccountSettingAccount from '@/views/setting/AccountSettingAccount.vue'
 import AccountSettingNotification from '@/views/setting/AccountSettingNotification.vue'
 import AccountSettingSite from '@/views/setting/AccountSettingSite.vue'
@@ -9,137 +10,123 @@ import AccountSettingSearch from '@/views/setting/AccountSettingSearch.vue'
 import AccountSettingSubscribe from '@/views/setting/AccountSettingSubscribe.vue'
 import AccountSettingService from '@/views/setting/AccountSettingService.vue'
 import AccountSettingSystem from '@/views/setting/AccountSettingSystem.vue'
+import AccountSettingDirectory from '@/views/setting/AccountSettingDirectory.vue'
+import { SettingTabs } from '@/router/menu'

 const route = useRoute()

-const activeTab = ref(route.params.tab)
+const activeTab = ref(route.query.tab)

-// tabs
-const tabs = [
-  {
-    title: '用户',
-    icon: 'mdi-account',
-    tab: 'account',
-  },
-  {
-    title: '系统',
-    icon: 'mdi-cog',
-    tab: 'system',
-  },
-  {
-    title: '站点',
-    icon: 'mdi-web',
-    tab: 'site',
-  },
-  {
-    title: '搜索',
-    icon: 'mdi-magnify',
-    tab: 'search',
-  },
-  {
-    title: '订阅',
-    icon: 'mdi-rss',
-    tab: 'subscribe',
-  },
-  {
-    title: '服务',
-    icon: 'mdi-list-box',
-    tab: 'service',
-  },
-  {
-    title: '通知',
-    icon: 'mdi-bell',
-    tab: 'notification',
-  },
-  {
-    title: '词表',
-    icon: 'mdi-file-word-box',
-    tab: 'words',
-  },
-  {
-    title: '关于',
-    icon: 'mdi-information',
-    tab: 'about',
-  },
-]
+function jumpTab(tab: string) {
+  router.push('/setting?tab=' + tab)
+}
 </script>

 <template>
  <div>
-    <VTabs
-      v-model="activeTab"
-      show-arrows
-    >
-      <VTab v-for="item in tabs" :key="item.icon" :value="item.tab">
-        <VIcon size="20" start :icon="item.icon" />
-        {{ item.title }}
+    <VTabs v-model="activeTab" show-arrows class="v-tabs-pill">
+      <VTab
+        v-for="item in SettingTabs"
+        :key="item.icon"
+        :value="item.tab"
+        @click="jumpTab(item.tab)"
+        selected-class="v-slide-group-item--active v-tab--selected"
+      >
+        <div>
+          <VIcon size="20" start :icon="item.icon" />
+          {{ item.title }}
+        </div>
      </VTab>
    </VTabs>
-    <VDivider />

-    <VWindow
-      v-model="activeTab"
-      class="mt-5 disable-tab-transition"
-      :touch="false"
-    >
+    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
      <!-- 用户 -->
      <VWindowItem value="account">
        <transition name="fade-slide" appear>
-          <AccountSettingAccount />
+          <div>
+            <AccountSettingAccount />
+          </div>
        </transition>
      </VWindowItem>

-      <!-- 系统 -->
+      <!-- 连接 -->
      <VWindowItem value="system">
        <transition name="fade-slide" appear>
-          <AccountSettingSystem />
+          <div>
+            <AccountSettingSystem />
+          </div>
+        </transition>
+      </VWindowItem>
+
+      <!-- 目录 -->
+      <VWindowItem value="directory">
+        <transition name="fade-slide" appear>
+          <div>
+            <AccountSettingDirectory />
+          </div>
        </transition>
      </VWindowItem>

      <!-- 站点 -->
      <VWindowItem value="site">
        <transition name="fade-slide" appear>
-          <AccountSettingSite />
+          <div>
+            <AccountSettingSite />
+          </div>
        </transition>
      </VWindowItem>

      <!-- 搜索 -->
      <VWindowItem value="search">
        <transition name="fade-slide" appear>
-          <AccountSettingSearch />
+          <div>
+            <AccountSettingSearch />
+          </div>
        </transition>
      </VWindowItem>

      <!-- 订阅 -->
      <VWindowItem value="subscribe">
        <transition name="fade-slide" appear>
-          <AccountSettingSubscribe />
+          <div>
+            <AccountSettingSubscribe />
+          </div>
        </transition>
      </VWindowItem>

      <!-- 服务 -->
      <VWindowItem value="service">
        <transition name="fade-slide" appear>
-          <AccountSettingService />
+          <div>
+            <AccountSettingService />
+          </div>
        </transition>
      </VWindowItem>

      <!-- 通知 -->
      <VWindowItem value="notification">
        <transition name="fade-slide" appear>
-          <AccountSettingNotification />
+          <div>
+            <AccountSettingNotification />
+          </div>
        </transition>
      </VWindowItem>
+
      <!-- 词表 -->
      <VWindowItem value="words">
        <transition name="fade-slide" appear>
-          <AccountSettingWords />
+          <div>
+            <AccountSettingWords />
+          </div>
        </transition>
      </VWindowItem>
+
      <!-- 关于 -->
      <VWindowItem value="about">
        <transition name="fade-slide" appear>
-          <AccountSettingAbout />
+          <div>
+            <AccountSettingAbout />
+          </div>
        </transition>
      </VWindowItem>
    </VWindow>
--- a/src/pages/subscribe-movie.vue
+++ b/src/pages/subscribe-movie.vue
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import SubscribeListView from '@/views/subscribe/SubscribeListView.vue'
-</script>
-
-<template>
-  <div>
-    <SubscribeListView type="电影" />
-  </div>
-</template>
--- a/src/pages/subscribe-tv.vue
+++ b/src/pages/subscribe-tv.vue
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import SubscribeListView from '@/views/subscribe/SubscribeListView.vue'
-</script>
-
-<template>
-  <div>
-    <SubscribeListView type="电视剧" />
-  </div>
-</template>
--- a/src/pages/subscribe.vue
+++ b/src/pages/subscribe.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import SubscribeListView from '@/views/subscribe/SubscribeListView.vue'
+import SubscribePopularView from '@/views/subscribe/SubscribePopularView.vue'
+import { SubscribeMovieTabs } from '@/router/menu'
+import router from '@/router'
+
+const route = useRoute()
+
+const subType = route.meta.subType?.toString()
+const subId = ref(route.query.id as string)
+const activeTab = ref(route.query.tab)
+
+function jumpTab(tab: string) {
+  router.push('/subscribe/movie?tab=' + tab)
+}
+</script>
+
+<template>
+  <div>
+    <VTabs v-model="activeTab">
+      <VTab v-for="item in SubscribeMovieTabs" :value="item.tab" @to="jumpTab(item.tab)">
+        <span class="mx-5">{{ item.title }}</span>
+      </VTab>
+    </VTabs>
+
+    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
+      <VWindowItem value="mysub">
+        <transition name="fade-slide" appear>
+          <SubscribeListView :type="subType" :subid="subId" />
+        </transition>
+      </VWindowItem>
+      <VWindowItem value="popular">
+        <transition name="fade-slide" appear>
+          <SubscribePopularView :type="subType" />
+        </transition>
+      </VWindowItem>
+    </VWindow>
+  </div>
+</template>
--- a/src/plugins/webfontloader.ts
+++ b/src/plugins/webfontloader.ts
@@ -4,12 +4,12 @@
 * webfontloader documentation: https://github.com/typekit/webfontloader
 */

-export async function loadFonts() {
-  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+;(async function loadFonts() {
+  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */ 'webfontloader')

  webFontLoader.load({
    google: {
      families: ['Inter:100,200,300,400,500,600,700&display=swap'],
    },
  })
-}
+})()
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { configureNProgress, doneNProgress, startNProgress } from '@/api/nprogress'
+import { configureNProgress } from '@/api/nprogress'
 import store from '@/store'

 // Nprogress
@@ -10,8 +10,7 @@ const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  scrollBehavior(to, from, savedPosition) {
    // 如果页面有缓存那么恢复其位置, 否则始终滚动到顶部
-    if (to.meta.keepAlive && savedPosition)
-      return savedPosition
+    if (to.meta.keepAlive && savedPosition) return savedPosition
    return { top: 0 }
  },
  routes: [
@@ -21,14 +20,15 @@ const router = createRouter({
      component: () => import('../layouts/default.vue'),
      children: [
        {
-          path: 'dashboard',
+          path: '/dashboard',
          component: () => import('../pages/dashboard.vue'),
          meta: {
+            keepAlive: true,
            requiresAuth: true,
          },
        },
        {
-          path: 'ranking',
+          path: '/ranking',
          component: () => import('../pages/ranking.vue'),
          meta: {
            keepAlive: true,
@@ -36,63 +36,70 @@ const router = createRouter({
          },
        },
        {
-          path: 'resource',
+          path: '/resource',
          component: () => import('../pages/resource.vue'),
          meta: {
            requiresAuth: true,
          },
        },
        {
-          path: 'subscribe-movie',
-          component: () => import('../pages/subscribe-movie.vue'),
+          path: '/subscribe/movie',
+          component: () => import('../pages/subscribe.vue'),
          meta: {
+            keepAlive: true,
            requiresAuth: true,
+            subType: '电影',
          },
        },
        {
-          path: 'subscribe-tv',
-          component: () => import('../pages/subscribe-tv.vue'),
+          path: '/subscribe/tv',
+          component: () => import('../pages/subscribe.vue'),
          meta: {
+            keepAlive: true,
            requiresAuth: true,
+            subType: '电视剧',
          },
        },
        {
-          path: 'calendar',
+          path: '/calendar',
          component: () => import('../pages/calendar.vue'),
          meta: {
+            keepAlive: true,
            requiresAuth: true,
          },
        },
        {
-          path: 'downloading',
+          path: '/downloading',
          component: () => import('../pages/downloading.vue'),
          meta: {
            requiresAuth: true,
          },
        },
        {
-          path: 'history',
+          path: '/history',
          component: () => import('../pages/history.vue'),
          meta: {
            requiresAuth: true,
          },
        },
        {
-          path: 'site',
+          path: '/site',
          component: () => import('../pages/site.vue'),
          meta: {
+            keepAlive: true,
            requiresAuth: true,
          },
        },
        {
-          path: 'plugins',
+          path: '/plugins',
          component: () => import('../pages/plugin.vue'),
          meta: {
+            keepAlive: true,
            requiresAuth: true,
          },
        },
        {
-          path: 'setting',
+          path: '/setting',
          component: () => import('../pages/setting.vue'),
          meta: {
            requiresAuth: true,
@@ -121,6 +128,7 @@ const router = createRouter({
          component: () => import('../pages/person.vue'),
          props: true,
          meta: {
+            keepAlive: true,
            requiresAuth: true,
          },
        },
@@ -128,12 +136,21 @@ const router = createRouter({
          path: '/media',
          component: () => import('../pages/media.vue'),
          meta: {
+            keepAlive: true,
            requiresAuth: true,
          },
        },
        {
          path: '/filemanager',
          component: () => import('../pages/filemanager.vue'),
+          meta: {
+            keepAlive: true,
+            requiresAuth: true,
+          },
+        },
+        {
+          path: '/apps',
+          component: () => import('../pages/appcenter.vue'),
          meta: {
            requiresAuth: true,
          },
@@ -159,20 +176,14 @@ const router = createRouter({

 // 路由导航守卫
 router.beforeEach((to, from, next) => {
+  // 总是记录非login路由
+  if (to.fullPath != '/login') store.state.auth.originalPath = to.fullPath
  const isAuthenticated = store.state.auth.token !== null
-
  if (to.meta.requiresAuth && !isAuthenticated) {
-    store.state.auth.originalPath = to.fullPath
    next('/login')
-  }
-  else {
-    startNProgress()
+  } else {
    next()
  }
 })

-router.afterEach(() => {
-  doneNProgress()
-})
-
 export default router
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -0,0 +1,224 @@
+// 导般菜单
+export const SystemNavMenus = [
+  {
+    title: '仪表板',
+    icon: 'mdi-home-outline',
+    to: '/dashboard',
+    header: '开始',
+    admin: false,
+  },
+  {
+    title: '推荐',
+    icon: 'mdi-star-outline',
+    to: '/ranking',
+    header: '发现',
+    admin: false,
+  },
+  {
+    title: '资源搜索',
+    icon: 'mdi-magnify',
+    to: '/resource',
+    header: '发现',
+    admin: false,
+  },
+  {
+    title: '电影',
+    full_title: '电影订阅',
+    icon: 'mdi-movie-open-outline',
+    to: '/subscribe/movie',
+    header: '订阅',
+    admin: false,
+  },
+  {
+    title: '电视剧',
+    full_title: '电视剧订阅',
+    icon: 'mdi-television',
+    to: '/subscribe/tv',
+    header: '订阅',
+    admin: false,
+  },
+  {
+    title: '日历',
+    full_title: '订阅日历',
+    icon: 'mdi-calendar',
+    to: '/calendar',
+    header: '订阅',
+    admin: false,
+  },
+  {
+    title: '正在下载',
+    icon: 'mdi-download-outline',
+    to: '/downloading',
+    header: '整理',
+    admin: false,
+  },
+  {
+    title: '历史记录',
+    icon: 'mdi-history',
+    to: '/history',
+    header: '整理',
+    admin: true,
+  },
+  {
+    title: '文件管理',
+    icon: 'mdi-folder-multiple-outline',
+    to: '/filemanager',
+    header: '整理',
+    admin: true,
+  },
+  {
+    title: '插件',
+    icon: 'mdi-apps',
+    to: '/plugins',
+    header: '系统',
+    admin: true,
+  },
+  {
+    title: '站点管理',
+    icon: 'mdi-web',
+    to: '/site',
+    header: '系统',
+    admin: true,
+  },
+  {
+    title: '设定',
+    icon: 'mdi-cog',
+    to: '/setting',
+    header: '系统',
+    admin: true,
+  },
+]
+
+// 常用菜单功能
+export const UserfulMenus = [
+  {
+    title: '搜索设置',
+    icon: 'mdi-magnify',
+    to: 'setting?tab=search',
+  },
+  {
+    title: '订阅设置',
+    icon: 'mdi-rss',
+    to: 'setting?tab=subscribe',
+  },
+  {
+    title: '服务',
+    icon: 'mdi-list-box',
+    to: 'setting?tab=service',
+  },
+  {
+    title: '词表',
+    icon: 'mdi-file-word-box',
+    to: 'setting?tab=words',
+  },
+  {
+    title: '历史记录',
+    icon: 'mdi-history',
+    to: 'history',
+  },
+]
+
+// 设定标签页
+export const SettingTabs = [
+  {
+    title: '用户',
+    icon: 'mdi-account',
+    tab: 'account',
+    description: '个人信息、用户管理、修改密码、双重认证',
+  },
+  {
+    title: '连接',
+    icon: 'mdi-server-network',
+    tab: 'system',
+    description: '下载器（Qbittorrent、Transmission）、媒体服务器（Emby、Jellyfin、Plex）',
+  },
+  {
+    title: '目录',
+    icon: 'mdi-folder',
+    tab: 'directory',
+    description: '下载目录、媒体库目录、整理模式',
+  },
+  {
+    title: '站点',
+    icon: 'mdi-web',
+    tab: 'site',
+    description: '站点同步、下载优先规则、站点重置',
+  },
+  {
+    title: '搜索',
+    icon: 'mdi-magnify',
+    tab: 'search',
+    description: '媒体数据源（TheMovieDb、豆瓣、Bangumi）、搜索站点、搜索优先级、默认过滤规则',
+  },
+  {
+    title: '订阅',
+    icon: 'mdi-rss',
+    tab: 'subscribe',
+    description: '订阅站点、订阅模式、订阅优先级、洗版优先级、默认过滤规则',
+  },
+  {
+    title: '服务',
+    icon: 'mdi-list-box',
+    tab: 'service',
+    description: '定时作业',
+  },
+  {
+    title: '通知',
+    icon: 'mdi-bell',
+    tab: 'notification',
+    description: '通知渠道（微信、Telegram、Slack、SynologyChat、VoceChat）、消息类型',
+  },
+  {
+    title: '词表',
+    icon: 'mdi-file-word-box',
+    tab: 'words',
+    description: '自定义识别词、自定义制作组/字幕组、自定义占位符、文件整理屏蔽词',
+  },
+  {
+    title: '关于',
+    icon: 'mdi-information',
+    tab: 'about',
+  },
+]
+
+// 电影订阅标签页
+export const SubscribeMovieTabs = [
+  {
+    title: '我的订阅',
+    tab: 'mysub',
+    icon: 'mdi-movie-open-outline',
+  },
+  {
+    title: '热门订阅',
+    tab: 'popular',
+    icon: 'mdi-movie-open-outline',
+  },
+]
+
+// 电视剧订阅标签页
+export const SubscribeTvTabs = [
+  {
+    title: '我的订阅',
+    tab: 'mysub',
+    icon: 'mdi-television',
+  },
+  {
+    title: '热门订阅',
+    tab: 'popular',
+    icon: 'mdi-television',
+  },
+]
+
+// 插件标签页
+export const PluginTabs = [
+  {
+    title: '我的插件',
+    tab: 'installed',
+    icon: 'mdi-puzzle',
+  },
+  {
+    title: '插件市场',
+    tab: 'market',
+    icon: 'mdi-store',
+  },
+]
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -0,0 +1,74 @@
+import { createHandlerBoundToURL, cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching'
+import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { clientsClaim } from 'workbox-core'
+
+declare let self: ServiceWorkerGlobalScope
+
+cleanupOutdatedCaches()
+
+// self.__WB_MANIFEST is default injection point
+precacheAndRoute(self.__WB_MANIFEST)
+
+// to allow work offline
+registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html'), { denylist: [/^(\/[\w-]+)*\/api/] }))
+
+// 通知选项
+const options = {
+  icon: '/logo.png',
+  vibrate: [100, 50, 100],
+  actions: [{ action: 'close', title: '关闭' }],
+}
+
+// 监听 push 事件，显示通知
+self.addEventListener('push', function (event) {
+  console.log('notification push')
+  if (!event.data) {
+    return
+  }
+  // 解析获取推送消息
+  let payload
+  try {
+    payload = event.data?.json()
+  } catch (err) {
+    console.log(err)
+    payload = {
+      title: event.data?.text(),
+    }
+  }
+  // 根据推送消息生成桌面通知并展现出来
+  try {
+    const content = {
+      body: payload.body || '',
+      icon: payload.icon || options.icon,
+      vibrate: [100, 50, 100],
+      data: { url: payload.url },
+      actions: options.actions,
+    }
+    event.waitUntil(self.registration.showNotification(payload.title, content))
+  } catch (e) {
+    console.error(e)
+  }
+})
+
+// 安装
+self.addEventListener('install', function (e) {
+  console.log('worker install')
+  self.skipWaiting()
+})
+
+// 激活
+self.addEventListener('activate', function (e) {
+  console.log('worker activate')
+  e.waitUntil(self.clients.claim())
+})
+
+// 监听通知点击事件
+self.addEventListener('notificationclick', function (event) {
+  console.log('notification click')
+  const info = event.notification
+  if (event.action === 'close') {
+    info.close()
+  } else if (info.data?.url) {
+    event.waitUntil(self.clients.openWindow(info.data?.url))
+  }
+})
--- a/src/store/auth.ts
+++ b/src/store/auth.ts
@@ -8,6 +8,7 @@ interface AuthState {
  userName: string
  avatar: string
  originalPath: string | null
+  level: number
 }

 // 定义根状态类型
@@ -25,6 +26,7 @@ const authModule: Module<AuthState, RootState> = {
    userName: '',
    avatar: '',
    originalPath: null,
+    level: 1,
  },
  mutations: {
    setToken(state, token: string) {
@@ -45,25 +47,25 @@ const authModule: Module<AuthState, RootState> = {
    setAvatar(state, avatar: string) {
      state.avatar = avatar
    },
+    setOriginalPath(state, originalPath: string) {
+      state.originalPath = originalPath
+    },
+    setLevel(state, level: number) {
+      state.level = level
+    },
  },
  actions: {
-    updateToken({ commit }, token: string) {
+    login({ commit }, { token, remember, superUser, userName, avatar, level }) {
      commit('setToken', token)
-    },
-    clearToken({ commit }) {
-      commit('clearToken')
-    },
-    updateRemember({ commit }, remember: boolean) {
      commit('setRemember', remember)
-    },
-    updateSuperUser({ commit }, superUser: boolean) {
      commit('setSuperUser', superUser)
-    },
-    updateUserName({ commit }, userName: string) {
      commit('setUserName', userName)
-    },
-    updateAvatar({ commit }, avatar: string) {
      commit('setAvatar', avatar)
+      commit('setLevel', level)
+    },
+    logout({ commit }) {
+      commit('clearToken')
+      commit('setOriginalPath', null)
    },
  },
  getters: {
@@ -72,6 +74,8 @@ const authModule: Module<AuthState, RootState> = {
    getSuperUser: state => state.superUser,
    getUserName: state => state.userName,
    getAvatar: state => state.avatar,
+    getOriginalPath: state => state.originalPath,
+    getLevel: state => state.level,
  },
 }

--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -24,14 +24,11 @@
 }

 .v-dialog > .v-overlay__content {
+  inline-size: calc(100% - 1rem);
  margin-block-start: calc(env(safe-area-inset-top) + 1rem);
  max-block-size: calc(100% - env(safe-area-inset-top) - 1rem);
 }

-.v-dialog > .v-overlay__content{
-  inline-size: calc(100% - 1rem);
-}
-
 .v-dialog--fullscreen > .v-overlay__content{
  inline-size: 100%;
  margin-block-start: env(safe-area-inset-top);
@@ -65,7 +62,6 @@
  color: transparent;

  --tw-gradient-from: #818cf8;
-  --tw-gradient-to: rgba(129,140,248,0%);
  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
  --tw-gradient-to: #c084fc;
 }
@@ -130,3 +126,86 @@
 .v-toast {
  z-index: 2500 !important;
 }
+
+ .v-divider {
+  border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));
+  opacity:0.75;
+ }
+
+ .apexcharts-title-text {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+ }
+
+ .grid-site-card {
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  padding-block-end: 1rem;
+}
+
+.grid-media-card {
+  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
+}
+
+.grid-backdrop-card {
+  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+  padding-block-end: 1rem;
+}
+
+.grid-torrent-card {
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  padding-block-end: 1rem;
+}
+
+.grid-plugin-card {
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  padding-block-end: 1rem;
+}
+
+.grid-downloading-card {
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  padding-block-end: 1rem;
+}
+
+.grid-directory-card {
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  padding-block-end: 1rem;
+}
+
+
+.grid-filterrule-card {
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  padding-block-end: 1rem;
+}
+
+.grid-subscribe-card {
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  padding-block-end: 1rem;
+}
+
+.v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
+  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.v-fab__container {
+  padding-block-end: env(safe-area-inset-bottom);
+}
+
+.v-overlay__content .v-list{
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  background-color: rgb(var(--v-theme-surface), 0.9) !important;
+}
+
+.v-overlay__content .v-card:not(.bg-primary){
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  background-color: rgb(var(--v-theme-surface), 0.95) !important;
+
+  .v-list, .v-table {
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background-color: transparent !important;
+  }
+}
--- a/Show More
+++ b/Show More