增强消息视图的SSE连接管理

更新 package.json
更新 service-worker.ts
2026-05-09 18:32:40 +08:00 · 2025-08-21 09:22:57 +08:00 · 2025-08-20 10:34:29 +08:00 · 2025-08-20 10:34:10 +08:00 · 2025-08-20 10:33:52 +08:00 · 2025-08-19 13:18:02 +08:00
222 changed files with 16066 additions and 5318 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -57,7 +57,7 @@ jobs:
          name: ${{ env.frontend_version }}
          draft: false
          prerelease: false
-          make_latest: false
+          make_latest: true
          files: |
            dist.zip
        env:
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
  export interface GlobalComponents {
    ConfirmDialog: typeof import('./src/@core/components/ConfirmDialog.vue')['default']
    DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
+    DialogWrapper: typeof import('./src/@core/components/DialogWrapper.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']
--- a/index.html
+++ b/index.html
@@ -1,50 +1,258 @@
 <!DOCTYPE html>
 <html
-  lang="en"
+  lang="zh-CN"
  style="
    overflow: hidden auto;
    min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-top: env(safe-area-inset-top);
    background: var(--initial-loader-bg, #fff);
  "
 >
  <head>
-    <meta http-equiv="pragma" content="no-cache" />
-    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
-    <meta http-equiv="expires" content="0" />
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width, user-scalable=no" />
    <title>MoviePilot</title>
+    <meta charset="UTF-8" />
+    <!-- 核心viewport设置 - 针对PWA优化 -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover, shrink-to-fit=no"
+    />
+
+    <!-- 防止缩放和选择，提供原生应用体验 -->
+    <meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
+
+    <!-- 基础信息 -->
+    <meta name="description" content="MoviePilot - 智能影视媒体库管理工具" />
+    <meta name="author" content="MoviePilot" />
+    <meta name="keywords" content="MoviePilot,影视,媒体库,管理" />
+
+    <!-- 安全和隐私 -->
    <meta name="Robots" content="noindex,nofollow,noarchive" />
-    <meta name="referrer" content="origin" />
-    <link rel="icon" type="image/png" href="/logo.png" />
+    <meta name="referrer" content="no-referrer" />
+
+    <!-- PWA - 基础图标 -->
+    <link rel="icon" type="image/png" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="/logo.png" sizes="any" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+
+    <!-- iOS Safari PWA 优化 -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />
-    <link rel="apple-touch-startup-image" href="/splash/apple-splash.jpg" />
-    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <meta name="mobile-web-app-capable" content="yes" />
+    <link rel="apple-touch-startup-image" href="/splash/apple-splash.png" />
+
+    <!-- iOS Safari 全屏模式 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="MoviePilot" />
-    <meta name="description" content="MoviePilot" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="referrer" content="never" />
-    <meta name="msapplication-TileColor" content="#7D34FD" />
-    <meta name="color-scheme" content="light dark" />
+
+    <!-- iOS Safari 防止自动识别 -->
+    <meta name="apple-mobile-web-app-orientations" content="portrait" />
+
+    <!-- Android Chrome PWA 优化 -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="mobile-web-app-title" content="MoviePilot" />
+
+    <!-- Microsoft Windows PWA -->
+    <meta name="msapplication-TileColor" content="#0E1116" />
+    <meta name="msapplication-TileImage" content="/android-chrome-192x192.png" />
+    <meta name="msapplication-config" content="none" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    <meta name="msapplication-navbutton-color" content="#0E1116" />
+
+    <!-- 主题色彩 - 适配深色和浅色模式 -->
    <meta name="theme-color" content="#0E1116" media="(prefers-color-scheme: dark)" />
    <meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)" />
+    <meta name="color-scheme" content="dark light" />
+
+    <!-- 屏幕方向锁定 -->
+    <meta name="screen-orientation" content="portrait" />
+    <meta name="x5-orientation" content="portrait" />
+    <meta name="x5-fullscreen" content="true" />
+    <meta name="x5-page-mode" content="app" />
+
+    <!-- UC浏览器优化 -->
+    <meta name="browsermode" content="application" />
+    <meta name="wap-font-scale" content="no" />
+
+    <!-- 360浏览器优化 -->
+    <meta name="renderer" content="webkit" />
+
+    <!-- 触摸优化 -->
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320" />
-    <link rel="stylesheet" type="text/css" href="/loader.css" />
+
+    <!-- 缓存控制 -->
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+
+    <!-- DNS预解析和预连接 -->
+    <link rel="dns-prefetch" href="//fonts.googleapis.com" />
+    <link rel="dns-prefetch" href="//cdn.jsdelivr.net" />
+    <link rel="dns-prefetch" href="//image.tmdb.org" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+
+    <!-- 预加载关键资源 -->
+    <link rel="preload" href="/logo.png" as="image" />
+    <link rel="modulepreload" href="/src/main.ts" />
+
+    <!-- 内联关键CSS -->
+    <style>
+      /* 关键路径CSS - 从loader.css内联 */
+      #loading-bg {
+        position: fixed;
+        z-index: 99999;
+        display: block;
+        background: var(--initial-loader-bg, #fff);
+        block-size: 100vh;
+        inline-size: 100vw;
+        transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
+      }
+
+      .loading-logo {
+        position: absolute;
+        inset-block-start: 35%;
+        inset-inline-start: calc(50% - 5rem);
+        transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
+      }
+
+      /* 添加logo完成动画 - 放大虚化效果 */
+      .loading-complete .loading-logo {
+        filter: blur(10px);
+        opacity: 0;
+        transform: scale(1.5);
+      }
+
+      /* 添加加载背景消失动画 - 放大虚化效果 */
+      .loading-complete {
+        filter: blur(15px);
+        opacity: 0;
+        transform: scale(1.2);
+      }
+
+      .loading {
+        position: absolute;
+        box-sizing: border-box;
+        border: 3px solid transparent;
+        border-radius: 50%;
+        block-size: 55px;
+        inline-size: 55px;
+        inset-block-start: 80%;
+        inset-inline-start: calc(50% - 27.5px);
+        transition: opacity 0.6s ease;
+      }
+
+      /* 完成时隐藏加载动画 */
+      .loading-complete .loading {
+        opacity: 0;
+      }
+
+      .loading .effect-1,
+      .loading .effect-2,
+      .loading .effect-3 {
+        position: absolute;
+        box-sizing: border-box;
+        border: 3px solid transparent;
+        border-radius: 50%;
+        block-size: 100%;
+        border-inline-start: 3px solid var(--initial-loader-color, #eee);
+        inline-size: 100%;
+      }
+
+      .loading .effect-1 {
+        animation: rotate 1s ease infinite;
+      }
+
+      .loading .effect-2 {
+        animation: rotate-opacity 1s ease infinite 0.1s;
+      }
+
+      .loading .effect-3 {
+        animation: rotate-opacity 1s ease infinite 0.2s;
+      }
+
+      .loading .effects {
+        transition: all 0.3s ease;
+      }
+
+      @keyframes rotate {
+        0% {
+          transform: rotate(0deg);
+        }
+
+        100% {
+          transform: rotate(1turn);
+        }
+      }
+
+      @keyframes rotate-opacity {
+        0% {
+          opacity: 0.1;
+          transform: rotate(0deg);
+        }
+
+        100% {
+          opacity: 1;
+          transform: rotate(1turn);
+        }
+      }
+    </style>
+
+    <!-- 初始化脚本 -->
    <script>
-      const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
-      if (loaderColor) document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
-      const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
-      if (primaryColor) document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
+      // 检测系统主题是否为深色模式
+      function checkPrefersColorSchemeIsDark() {
+        try {
+          return window.matchMedia('(prefers-color-scheme: dark)').matches
+        } catch (e) {
+          return false
+        }
+      }
+
+      // 主题色彩初始化
+      let loaderColor = localStorage.getItem('materio-initial-loader-bg')
+      let primaryColor = localStorage.getItem('materio-initial-loader-color')
+
+      // 检查主题设置
+      const savedTheme = localStorage.getItem('theme')
+      const isAutoTheme = savedTheme === 'auto'
+
+      // 如果是自动主题或者没有保存的背景色，根据系统主题设置背景色
+      if (isAutoTheme || !loaderColor) {
+        loaderColor = checkPrefersColorSchemeIsDark() ? '#0E1116' : '#FFFFFF'
+      }
+      if (!primaryColor) {
+        primaryColor = '#9155FD'
+      }
+
+      // 应用主题色彩
+      document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
+      document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
+
+      // 状态栏适配
+      if (window.navigator.standalone) {
+        document.documentElement.style.setProperty('--status-bar-height', '20px')
+      }
+
+      // 安全区域适配
+      function updateSafeArea() {
+        const safeAreaTop = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')
+        const safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)',
+        )
+
+        if (safeAreaTop) document.documentElement.style.setProperty('--safe-area-top', safeAreaTop)
+        if (safeAreaBottom) document.documentElement.style.setProperty('--safe-area-bottom', safeAreaBottom)
+      }
+
+      updateSafeArea()
+      window.addEventListener('resize', updateSafeArea)
+      window.addEventListener('orientationchange', updateSafeArea)
    </script>
  </head>

-  <body style="margin: 0">
+  <body style="margin: 0; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch">
    <div id="loading-bg">
      <div class="loading-logo">
        <!-- Logo -->
@@ -56,57 +264,6 @@
          xmlns="http://www.w3.org/2000/svg"
          style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
        >
-          <style>
-            /* 添加SVG内部的动画样式 */
-            @keyframes pulse {
-              0%,
-              100% {
-                opacity: 0.8;
-              }
-
-              50% {
-                opacity: 1;
-              }
-            }
-
-            @keyframes glow {
-              0%,
-              100% {
-                filter: drop-shadow(0 0 3px rgba(141, 81, 249, 0.3));
-              }
-
-              50% {
-                filter: drop-shadow(0 0 6px rgba(141, 81, 249, 0.6));
-              }
-            }
-
-            /* 为各个元素添加动画 */
-            #a2-c {
-              filter: drop-shadow(0 0 5px rgba(141, 81, 249, 0.3));
-              animation: glow 3s ease-in-out infinite;
-            }
-
-            path {
-              animation: pulse 2s ease-in-out infinite;
-            }
-
-            /* 错开不同元素的动画开始时间 */
-            g:nth-child(2) path {
-              animation-delay: 0.3s;
-            }
-
-            g:nth-child(3) path {
-              animation-delay: 0.6s;
-            }
-
-            g:nth-child(4) path {
-              animation-delay: 0.9s;
-            }
-
-            g:nth-child(5) path {
-              animation-delay: 1.2s;
-            }
-          </style>
          <g transform="matrix(1,0,0,1,-2606,-236)">
            <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
              <rect x="0" y="0" width="192" height="192" style="fill: none" />
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "moviepilot",
-  "version": "2.5.7",
+  "version": "2.7.4",
  "private": true,
  "type": "module",
  "bin": "dist/service.js",
@@ -45,6 +45,7 @@
    "dayjs": "^1.11.13",
    "express": "^4.21.2",
    "express-http-proxy": "^2.1.1",
+    "http-proxy-middleware": "^3.0.0",
    "js-cookie": "^3.0.5",
    "lodash-es": "^4.17.21",
    "mousetrap": "^1.6.5",
@@ -56,7 +57,7 @@
    "tailwindcss": "^ 3.4.17",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0",
-    "vue-toast-notification": "^3.1.3",
+    "vue-toastification": "^2.0.0-rc.5",
    "vue3-ace-editor": "^2.2.4",
    "vue3-apexcharts": "^1.8.0",
    "vue3-perfect-scrollbar": "^2.0.0",
@@ -104,6 +105,7 @@
    "vite": "^5.4.11",
    "vite-plugin-pages": "^0.32.1",
    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-top-level-await": "^1.5.0",
    "vite-plugin-vue-layouts": "^0.11.0",
    "vite-plugin-vuetify": "2.0.4",
    "vue-shepherd": "^4.1.0",
@@ -112,4 +114,4 @@
    "workbox-window": "^7.3.0"
  },
  "packageManager": "yarn@1.22.18"
-}
+}
--- a/public/loader.css
+++ b/public/loader.css
@@ -1,97 +0,0 @@
-#loading-bg {
-  position: fixed;
-  z-index: 9999;
-  display: block;
-  background: var(--initial-loader-bg, #fff);
-  block-size: 100vh;
-  inline-size: 100vw;
-  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
-}
-
-.loading-logo {
-  position: absolute;
-  inset-block-start: 35%;
-  inset-inline-start: calc(50% - 5rem);
-  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
-}
-
-/* 添加logo完成动画 - 放大虚化效果 */
-.loading-complete .loading-logo {
-  filter: blur(10px);
-  opacity: 0;
-  transform: scale(1.5);
-}
-
-/* 添加加载背景消失动画 - 放大虚化效果 */
-.loading-complete {
-  filter: blur(15px);
-  opacity: 0;
-  transform: scale(1.2);
-}
-
-.loading {
-  position: absolute;
-  box-sizing: border-box;
-  border: 3px solid transparent;
-  border-radius: 50%;
-  block-size: 55px;
-  inline-size: 55px;
-  inset-block-start: 80%;
-  inset-inline-start: calc(50% - 27.5px);
-  transition: opacity 0.6s ease;
-}
-
-/* 完成时隐藏加载动画 */
-.loading-complete .loading {
-  opacity: 0;
-}
-
-.loading .effect-1,
-.loading .effect-2,
-.loading .effect-3 {
-  position: absolute;
-  box-sizing: border-box;
-  border: 3px solid transparent;
-  border-radius: 50%;
-  block-size: 100%;
-  border-inline-start: 3px solid var(--initial-loader-color, #eee);
-  inline-size: 100%;
-}
-
-.loading .effect-1 {
-  animation: rotate 1s ease infinite;
-}
-
-.loading .effect-2 {
-  animation: rotate-opacity 1s ease infinite 0.1s;
-}
-
-.loading .effect-3 {
-  animation: rotate-opacity 1s ease infinite 0.2s;
-}
-
-.loading .effects {
-  transition: all 0.3s ease;
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(1turn);
-  }
-}
-
-@keyframes rotate-opacity {
-  0% {
-    opacity: 0.1;
-    transform: rotate(0deg);
-  }
-
-  100% {
-    opacity: 1;
-    transform: rotate(1turn);
-  }
-}
--- a/public/offline.html
+++ b/public/offline.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <title>MoviePilot - 离线</title>
+  <link rel="icon" href="/favicon.ico">
+  <style>
+    :root {
+      --primary-color: #9155FD;
+      --surface-color: #FFFFFF;
+      --text-color: #333333;
+      --border-color: rgba(0, 0, 0, 0.12);
+    }
+    
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --surface-color: #0E1116;
+        --text-color: #FFFFFF;
+        --border-color: rgba(255, 255, 255, 0.12);
+      }
+    }
+    
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      background-color: var(--surface-color);
+      color: var(--text-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      padding: 20px;
+    }
+    
+    .offline-container {
+      text-align: center;
+      max-width: 400px;
+      width: 100%;
+      padding: 40px;
+      background: var(--surface-color);
+      border-radius: 24px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border-color);
+    }
+    
+    .icon-wrapper {
+      width: 120px;
+      height: 120px;
+      margin: 0 auto 32px;
+      background: rgba(145, 85, 253, 0.1);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .icon {
+      width: 64px;
+      height: 64px;
+      fill: var(--primary-color);
+    }
+    
+    h1 {
+      font-size: 2rem;
+      margin-bottom: 16px;
+      font-weight: 600;
+    }
+    
+    p {
+      font-size: 1.1rem;
+      line-height: 1.6;
+      opacity: 0.7;
+      margin-bottom: 32px;
+    }
+    
+    .retry-button {
+      background: var(--primary-color);
+      color: white;
+      border: none;
+      padding: 12px 32px;
+      font-size: 1rem;
+      border-radius: 8px;
+      cursor: pointer;
+      font-weight: 500;
+      transition: opacity 0.2s;
+    }
+    
+    .retry-button:hover {
+      opacity: 0.9;
+    }
+    
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 24px;
+      padding: 8px 16px;
+      background: rgba(145, 85, 253, 0.1);
+      border-radius: 20px;
+      font-size: 0.875rem;
+    }
+    
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      background: #EF5350;
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    }
+    
+    @keyframes pulse {
+      0% { opacity: 1; }
+      50% { opacity: 0.5; }
+      100% { opacity: 1; }
+    }
+  </style>
+</head>
+<body>
+  <div class="offline-container">
+    <div class="icon-wrapper">
+      <svg class="icon" viewBox="0 0 24 24">
+        <path d="M12,2.03C17.73,2.5 22,7.08 22,12.75C22,13.84 21.79,14.89 21.4,15.86L19.53,14C19.5,13.83 19.5,13.67 19.5,13.5A2.5,2.5 0 0,0 17,11A2.5,2.5 0 0,0 14.5,13.5A2.5,2.5 0 0,0 17,16A2.5,2.5 0 0,0 19.5,13.5C19.5,13.67 19.5,13.83 19.53,14L21.4,15.86C20.04,19.09 16.9,21.47 13.19,21.97L11.75,20.53C11.83,20.5 11.92,20.5 12,20.5A2.5,2.5 0 0,0 14.5,18A2.5,2.5 0 0,0 12,15.5A2.5,2.5 0 0,0 9.5,18C9.5,18.08 9.5,18.17 9.53,18.25L7.66,16.38C7.25,15.96 6.86,15.5 6.5,15H8.17C8.06,14.7 8,14.35 8,14A3,3 0 0,1 11,11A3,3 0 0,1 14,14C14,14.35 13.94,14.7 13.83,15H15.5C15.14,15.5 14.75,15.96 14.34,16.38L12.47,14.5C12.5,14.42 12.5,14.33 12.47,14.25L10.6,12.38C10.18,11.97 9.72,11.59 9.23,11.25L7.36,9.38C6.94,8.96 6.5,8.61 6,8.31V6.64L4.14,4.78C3.6,5.55 3.17,6.4 2.86,7.31L1,5.45V4.46L2.05,3.41C2.5,2.86 3.05,2.41 3.66,2.06L20,18.4L18.73,19.67L12.47,13.41L11.75,20.53C11.83,20.5 11.92,20.5 12,20.5A2.5,2.5 0 0,0 14.5,18A2.5,2.5 0 0,0 12,15.5A2.5,2.5 0 0,0 9.5,18C9.5,18.08 9.5,18.17 9.53,18.25L7.66,16.38C7.25,15.96 6.86,15.5 6.5,15H8.17C8.06,14.7 8,14.35 8,14A3,3 0 0,1 11,11A3,3 0 0,1 14,14C14,14.35 13.94,14.7 13.83,15H15.5C15.14,15.5 14.75,15.96 14.34,16.38L2.46,4.5C3.5,3.17 4.9,2.15 6.5,1.58V3.25C5.43,3.7 4.47,4.33 3.66,5.11L2.61,6.16V8.03C3.16,7.33 3.82,6.73 4.57,6.25V8.31C3.57,9.14 2.75,10.19 2.21,11.39L1,10.18V8.65C1.5,6.16 3.03,4.03 5.11,2.71L6.39,4C8.97,2.73 12.03,2.24 14.97,3.03L16.84,4.9C18.17,5.86 19.25,7.16 19.94,8.68L18.07,6.81C17.07,5.5 15.66,4.5 14,4.04V5.71C15.93,6.17 17.5,7.53 18.33,9.3L16.46,7.43C15.46,6.61 14.2,6.08 12.82,6V7.67C13.69,7.79 14.47,8.11 15.14,8.58L13.27,6.71C12.94,6.66 12.6,6.63 12.25,6.63L10.38,4.76C10.87,4.66 11.37,4.59 11.88,4.56L10,2.68C10.66,2.56 11.33,2.5 12,2.5V2.03Z" />
+      </svg>
+    </div>
+    
+    <h1>您当前处于离线状态</h1>
+    <p>无法连接到 MoviePilot 服务器。请检查您的网络连接后重试。</p>
+    
+    <button class="retry-button" onclick="window.location.reload()">
+      重新加载
+    </button>
+    
+    <div class="status-badge">
+      <span class="status-dot"></span>
+      <span>离线状态</span>
+    </div>
+  </div>
+  
+  <script>
+    // 监听网络状态变化
+    window.addEventListener('online', function() {
+      window.location.reload();
+    });
+    
+    // Service Worker 消息处理
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.addEventListener('message', function(event) {
+        if (event.data && event.data.type === 'OFFLINE_STATUS' && !event.data.offline) {
+          window.location.reload();
+        }
+      });
+    }
+  </script>
+</body>
+</html>
--- a/src/@core/components/ConfirmDialog.vue
+++ b/src/@core/components/ConfirmDialog.vue
@@ -59,7 +59,7 @@ function handleCancel() {
 </script>

 <template>
-  <VDialog :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" :max-width="width">
+  <DialogWrapper :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" :max-width="width">
    <VCard>
      <VCardItem>
        <div class="d-flex align-center justify-start mt-3">
@@ -82,5 +82,5 @@ function handleCancel() {
      </VCardActions>
      <VDialogCloseBtn @click="handleCancel" />
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/@core/components/DialogWrapper.vue
+++ b/src/@core/components/DialogWrapper.vue
@@ -0,0 +1,70 @@
+<template>
+  <VDialog v-model="dialogModel" v-bind="$attrs" @update:model-value="handleDialogChange">
+    <slot />
+  </VDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, onBeforeUnmount } from 'vue'
+import { useScrollLockWithWatch } from '@/composables/useScrollLock'
+
+// Props
+interface Props {
+  modelValue?: boolean
+  // 滚动锁定配置
+  scrollLock?: boolean
+  preserveScrollPosition?: boolean
+  preventTouchScroll?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  scrollLock: true,
+  preserveScrollPosition: true,
+  preventTouchScroll: true,
+})
+
+// Emits
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+// 计算属性
+const dialogModel = computed({
+  get: () => props.modelValue || false,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+
+// 使用滚动锁定
+const { isLocked, lockScroll, restoreScroll } = useScrollLockWithWatch(dialogModel, {
+  autoRestore: true,
+  preserveScrollPosition: props.preserveScrollPosition,
+  preventTouchScroll: props.preventTouchScroll,
+})
+
+// 处理弹窗状态变化
+const handleDialogChange = (value: boolean) => {
+  emit('update:modelValue', value)
+}
+
+// 监听弹窗状态变化
+watch(
+  dialogModel,
+  newValue => {
+    if (props.scrollLock) {
+      if (newValue) {
+        lockScroll()
+      } else {
+        restoreScroll()
+      }
+    }
+  },
+  { immediate: true },
+)
+
+// 组件卸载时确保恢复滚动
+onBeforeUnmount(() => {
+  if (isLocked.value) {
+    restoreScroll()
+  }
+})
+</script>
--- a/src/@core/components/PageContentTitle.vue
+++ b/src/@core/components/PageContentTitle.vue
@@ -5,7 +5,7 @@ defineProps({
 })
 </script>
 <template>
-  <div v-if="title" class="my-3 md:flex md:items-center md:justify-between">
+  <div v-if="title" class="my-3 mx-3 md:flex md:items-center md:justify-between">
    <div class="min-w-0 flex-1 mx-0">
      <h2
        class="ms-1 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"
--- a/src/@core/components/ScrollToTopBtn.vue
+++ b/src/@core/components/ScrollToTopBtn.vue
@@ -51,8 +51,8 @@ onUnmounted(() => {
  display: flex;
  flex-direction: column;
  gap: 16px;
-  inset-block-end: 30px;
-  inset-inline-end: 30px;
+  inset-block-end: 2rem;
+  inset-inline-end: 2rem;
 }

 .global-action-button {
--- a/src/@core/scss/_components.scss
+++ b/src/@core/scss/_components.scss
@@ -3,6 +3,30 @@
@use "@layouts/styles/_placeholders";
@use "@configured-variables" as variables;

+// 👉 Alert
+.v-alert {
+  .v-alert__close {
+    .v-icon {
+      block-size: 20px !important;
+      font-size: 20px !important;
+      inline-size: 20px !important;
+    }
+  }
+
+  &:not(.v-alert--prominent) .v-alert__prepend {
+    .v-icon {
+      block-size: 1.375rem !important;
+      font-size: 1.375rem !important;
+      inline-size: 1.375rem !important;
+    }
+  }
+
+  .v-alert-title {
+    line-height: 1.5rem;
+    margin-block-end: 0.25rem;
+  }
+}
+
 // 👉 Avatar font-size
 .v-avatar {
  @include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
@@ -33,6 +57,23 @@
  }
 }

+// 👉 Button
+.v-btn {
+  /* stylelint-disable-next-line no-descending-specificity */
+  &:not(.v-btn--icon) .v-icon {
+    --v-icon-size-multiplier: 0.9525 !important;
+  }
+}
+
+// 👉 Chip
+.v-chip.v-chip--size-default .v-avatar {
+  --v-avatar-height: 24px;
+}
+
+.v-chip.v-chip--density-comfortable {
+  line-height: 1;
+}
+
 // Dialog responsive width
 .v-dialog {
  .v-card {
@@ -40,7 +81,7 @@
  }
 }

-@media (min-width: 576px) {
+@media (width >= 576px) {
  .v-dialog {
    &.v-dialog-sm,
    &.v-dialog-lg,
@@ -50,7 +91,7 @@
  }
 }

-@media (min-width: 992px) {
+@media (width >= 992px) {
  .v-dialog {
    &.v-dialog-lg,
    &.v-dialog-xl {
@@ -59,18 +100,32 @@
  }
 }

-@media (min-width: 1200px) {
+@media (width >= 1200px) {
  .v-dialog.v-dialog-xl,
  .v-dialog.v-dialog-xl .v-overlay__content > .v-card {
    inline-size: 1165px !important;
  }
 }

-// v-tab with pill support
+// 👉 Expansion Panel
+.v-expansion-panel {
+  .v-expansion-panel-text {
+    font-size: 1rem;
+  }
+}

+// 👉 Tooltip
+.v-tooltip > .v-overlay__content {
+  font-weight: 500;
+  line-height: 0.875rem;
+}
+
+// 👉 List
+
+//  👉 Tab with pill support
 .v-tabs.v-tabs-pill {
  .v-tab.v-btn {
-    border-radius: 0.375rem !important;
+    border-radius: 6px !important;
    min-inline-size: 8.125rem;
    transition: none;

@@ -94,7 +149,7 @@
  }
 }

-// 👉 added box shadow
+// 👉 Timeline added box shadow
 .v-timeline-item {
  .v-timeline-divider__dot {
    .v-timeline-divider__inner-dot {
@@ -160,7 +215,6 @@
 }

 // 👉 Slider
-
 .v-slider.v-input--horizontal .v-slider-track__fill {
  block-size: var(--v-slider-track-size);
 }
@@ -171,7 +225,19 @@

 .v-slider-thumb {
  .v-slider-thumb__label {
+    background: rgb(117, 117, 117);
    color: rgb(var(--v-theme-on-primary));
+
+    &::before {
+      color: rgb(117, 117, 117);
+    }
+  }
+}
+
+// 👉 Switch
+.v-switch {
+  .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
+    color: #fff;
  }
 }

@@ -179,5 +245,45 @@
 .v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
 .v-table--density-default > .v-table__wrapper > table > thead > tr > td,
 .v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
-  block-size: 50px;
+  block-size: 50px !important;
+}
+
+.v-table {
+  --v-table-header-height: 54px !important;
+
+  th {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+    font-size: 0.75rem;
+
+    .v-data-table-header__content {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .v-selection-control {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
+    font-size: 1rem;
+  }
+}
+
+.v-data-table {
+  th {
+    background: rgb(var(--v-table-header-background)) !important;
+  }
+}
+
+// 👉 Pagination
+.v-pagination {
+  .v-btn {
+    border-radius: 4px;
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 14px;
+    font-weight: 400;
+  }
+}
+
+// 👉 SnackBar
+.v-snackbar--variant-elevated {
+  @include mixins.elevation(6);
 }
--- a/src/@core/scss/template/_default-layout-w-vertical-nav.scss
+++ b/src/@core/scss/template/_default-layout-w-vertical-nav.scss
@@ -1,7 +1,7 @@
@use "@configured-variables" as variables;
@use "placeholders" as *;
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
-@use "../misc";
+@use "misc";
@use "mixins";

 $header: ".layout-navbar";
@@ -16,25 +16,44 @@ $header: ".layout-navbar";
  @if variables.$vertical-nav-navbar-style == "elevated" {
    // Add transition
    #{$header} {
-      transition: padding 0.2s ease, background-color 0.18s ease;
+      transition: padding 0.2s ease;
    }

    // If navbar is contained => Add border radius to header
    @if variables.$layout-vertical-nav-navbar-is-contained {
-      #{$header} {
-        border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
-      }
+      // #{$header} {
+        // border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      // }
    }

    // Scrolled styles for sticky navbar
    @at-root {
-      /* ℹ️ This html selector with not selector is required when:
-        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
+      /* ℹ️ Only apply scrolled styles when window is actually scrolled,
+        not when dialog is opened without scroll
    */
-      html.v-overlay-scroll-blocked .layout-navbar-fixed,
      &.window-scrolled.layout-navbar-fixed {

        #{$header} {
+          padding-inline: 1rem;
+
+          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
+          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+        }
+
+        .navbar-blur#{$header} {
+          @extend %blurry-bg;
+        }
+      }
+
+      /* ℹ️ Ensure header styles are preserved when dialog is opened,
+        regardless of scroll state
+    */
+      html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed,
+      html.dialog-scroll-locked &.layout-navbar-fixed {
+
+        #{$header} {
+          padding-inline: 1rem;
+
          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
        }
--- a/src/@core/scss/_default-layout.scss
+++ b/src/@core/scss/_default-layout.scss
@@ -1,5 +1,5 @@
-@use "@core/scss/placeholders";
-@use "@core/scss/variables" as core-vars;
+@use "placeholders";
+@use "variables" as core-vars;

 .layout-navbar {
  @if core-vars.$navbar-high-emphasis-text {
--- a/src/@core/scss/_misc.scss
+++ b/src/@core/scss/_misc.scss
@@ -11,11 +11,58 @@

 // ℹ️ adding styling for code tag
 code {
-  background: rgba(var(--v-code-background-color), var(--v-focus-opacity));
  border-radius: 3px;
+  background: rgba(var(--v-code-background-color), var(--v-focus-opacity));
  color: currentcolor;
  font-size: 85%;
  font-weight: 400;
  padding-block: 0.2em;
  padding-inline: 0.4em;
 }
+
+%blurry-bg {
+  position: relative;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
+
+  @media (width >= 1280px) and (hover: hover) {
+    background: rgba(var(--v-theme-background), 1);
+
+    .v-theme--transparent & {
+      backdrop-filter: blur(var(--transparent-blur-light, 5px));
+      background: rgba(var(--v-theme-background), var(--transparent-opacity-light, 0.1)) !important;
+    }
+  }
+
+  @media (width < 1280px), (hover: none) {
+    background: transparent;
+
+    &::before {
+      position: absolute;
+      z-index: -1;
+      backdrop-filter: blur(24px);
+      block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-tab-height) + 4rem);
+      content: "";
+      inset-block-start: 0;
+      inset-inline: 0;
+      pointer-events: none;
+      transition: all 0.3s ease-in-out;
+      
+      .v-theme--light & {
+        background: rgba(var(--v-theme-surface), 0.6);
+      }
+      
+      .v-theme--dark & {
+        background: rgba(var(--v-theme-background), 0.5);
+      }
+
+      .v-theme--purple & {
+        background: rgba(var(--v-theme-background), 0.5);
+      }
+
+      .v-theme--transparent & {
+        backdrop-filter: blur(var(--transparent-blur-heavy, 16px));
+        background: rgba(var(--v-theme-background), var(--transparent-opacity-heavy, 0.5));
+      }
+    }
+  }
+}
--- a/src/@core/scss/_mixins.scss
+++ b/src/@core/scss/_mixins.scss
@@ -1,4 +1,6 @@
+@use "sass:map";
@use "vuetify/lib/styles/settings" as vuetify_settings;
+@use "@styles/variables/_vuetify.scss" as vuetify;

@mixin themed($property, $light-value, $dark-value) {
  @at-root {
@@ -17,11 +19,12 @@
 // ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
@mixin before-pseudo() {
  position: relative;
+
  &::before {
    position: absolute;
+    border-radius: inherit;
    background: currentcolor;
    block-size: 100%;
-    border-radius: inherit;
    content: "";
    inline-size: 100%;
    inset: 0;
@@ -43,8 +46,8 @@

    &::before {
      position: absolute;
-      background-color: currentcolor;
      border-radius: inherit;
+      background-color: currentcolor;
      content: "";
      inset: 0;
      opacity: $opacity;
@@ -56,10 +59,81 @@
@mixin avatar-font-sizes($map: $avatar-sizes) {
  @each $sizeName, $multiplier in vuetify_settings.$size-scales {
    /* stylelint-disable-next-line scss/no-global-function-names */
-    $size: map-get($map, $sizeName);
+    $size: map.get($map, $sizeName);

    &.v-avatar--size-#{$sizeName} {
      font-size: #{$size}px;
    }
  }
 }
+
+@mixin elevation($z, $important: false) {
+  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
+}
+
+@mixin bordered-skin($component, $border-property: "border", $important: false) {
+  #{$component} {
+    box-shadow: none !important;
+    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
+  }
+}
+
+@mixin selected-states($selector) {
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:hover
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:focus-visible
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      #{$selector} {
+        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+      }
+    }
+  }
+}
+
+@mixin push-anchors() {
+  :target {
+    scroll-margin-block-start: 90px;
+  }
+}
+
+@mixin xs {
+  @media (width >= 0) and (width <= 599.98px) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media (width >= 600px) and (width <= 959.98px) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media (width >= 960px) and (width <= 1279.98px) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media (width >= 1280px) and (width <= 1919.98px) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media (width >= 1920px) {
+    @content;
+  }
+}
--- a/src/@core/scss/_utilities.scss
+++ b/src/@core/scss/_utilities.scss
@@ -1,73 +1,25 @@
-@use "@configured-variables" as variables;
-
-// 👉 Demo spacers
-// TODO: Use vuetify SCSS variable here
-$card-spacer-content: 16px;
-
-.demo-space-x {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-block-start: -$card-spacer-content;
-
-  & > * {
-    margin-block-start: $card-spacer-content;
-    margin-inline-end: $card-spacer-content;
-  }
-}
-
-.demo-space-y {
-  & > * {
-    margin-block-end: $card-spacer-content;
-
-    &:last-child {
-      margin-block-end: 0;
-    }
-  }
-}
-
-// 👉 Card match height
-.match-height.v-row {
-  .v-card {
-    block-size: 100%;
-  }
-}
-
-// 👉 Whitespace
-.whitespace-no-wrap {
-  white-space: nowrap;
-}
-
-// 👉 Colors
-
-/*
-  ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
-  Moreover, we also use this class in some places
-
-  ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
-
-  ℹ️ We also need !important to get correct color in badge icon
-*/
-.text-white {
-  color: #fff !important;
-}
-
 .bg-var-theme-background {
  background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
 }

-// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
-@each $color-name in variables.$theme-colors-name {
-  .bg-light-#{$color-name} {
-    background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
+// 👉 Pagination small-select dropdown for table
+// TODO: remove this class after vuetify datatable implememtation
+
+.per-page-select {
+  margin-block: auto;
+
+  .v-field__input {
+    align-items: center;
+    padding: 2px;
+    font-size: 14px;
+  }
+
+  .v-field__append-inner {
+    align-items: center;
+    padding: 0;
+
+    .v-icon {
+      margin-inline-start: 0 !important;
+    }
  }
 }
-
-// 👉 Typography
-.font-weight-semibold {
-  font-weight: 600 !important;
-}
-
-.leading-normal {
-  line-height: normal !important;
-}
--- a/src/@core/scss/_variables.scss
+++ b/src/@core/scss/_variables.scss
@@ -9,20 +9,53 @@
    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
 */
@use "sass:map";
-
-// 使用模板中的变量，不再进行配置 
-@use "@layouts/styles/variables" as layouts-vars;
@use "utils";
+@use "vuetify/lib/styles/tools/functions" as *;

-// 👉 Default layout
+// 合并两个文件中的@forward配置
+@forward "@layouts/styles/variables" with (
+  // 来自_variables.scss的配置
+  $layout-vertical-nav-collapsed-width: 68px !default,
+  
+  // 来自template/_variables.scss的配置
+  $layout-vertical-nav-z-index: 1004,
+  $layout-overlay-z-index: 1003
+);

-$navbar-high-emphasis-text: true !default;
+// 使用命名空间来避免变量冲突
+@use "@layouts/styles/variables" as layouts-vars;

-// 移除@forward配置，已合并到template/_variables.scss
-// @forward "@layouts/styles/variables" with (
-//   $layout-vertical-nav-collapsed-width: 68px !default,
-// );
-// @use "@layouts/styles/variables" as *;
+$vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
+
+// ℹ️ We created this SCSS var to extract the start padding
+// Docs: https://sass-lang.com/documentation/modules/string
+// $vertical-nav-horizontal-padding => 0 8px;
+// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
+//   string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
+// string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
+
+$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-custom) !default;
+$vertical-nav-items-icon-margin-inline-end: 0.625rem !default;
+
+// Vertical Nav Configuration
+$vertical-nav-collapsed-width: 68px !default;
+
+// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
+// This is used by nav items & nav header
+$vertical-nav-horizontal-spacing: 0 1.125rem !default;
+$vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default;
+
+// Vertical nav header padding
+$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
+
+// 👉 Custom Variables
+$avatar-font-sizes: (
+  "x-small":12,
+  "small":14,
+  "default":18,
+  "large":20,
+  "x-large":24
+) !default;

 $theme-colors-name: (
  "primary",
@@ -41,31 +74,16 @@ $default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
 $vertical-nav-background-color-rgb: var(--v-theme-background) !default;
 $vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;

-// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
-// This is used by nav items & nav header
-$vertical-nav-horizontal-spacing: 0 1.125rem !default;
-$vertical-nav-horizontal-padding: 1.375rem 1rem !default;
-
-/*
-  ℹ️ We created this SCSS var to extract the start padding
-  Docs: https://sass-lang.com/documentation/modules/string
-  $vertical-nav-horizontal-padding => 0 8px;
-  string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
-    string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
-  string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
-*/
-$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding);
-
 // Vertical nav header height. Mostly we will align it with navbar height;
 $vertical-nav-header-height: layouts-vars.$layout-vertical-nav-navbar-height !default;
-$vertical-nav-navbar-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
+$vertical-nav-navbar-elevation: 3 !default;
+$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
+$vertical-nav-floating-navbar-top: 1rem !default;

-// Vertical nav header padding
-$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
 $vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;

 // Move logo when vertical nav is mini (collapsed but not hovered)
-$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px;
+$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;

 // Space between logo and title
 $vertical-nav-header-logo-title-spacing: 0.9rem !default;
@@ -77,22 +95,130 @@ $vertical-nav-section-title-mt: 1.5rem !default;
 $vertical-nav-section-title-mb: 0.5rem !default;

 // Vertical nav icons
-$vertical-nav-items-icon-size: 1.5rem;
-$vertical-nav-items-icon-margin-inline-end: 0.625rem;
+$vertical-nav-items-icon-size: 1.5rem !default;
+$vertical-nav-items-nested-icon-size: 0.9rem !default;
+
+// Transition duration for nav group arrow
+$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
+
+// Timing function for nav group arrow
+$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
+
+// 👉 Horizontal nav
+
+/*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+*/
+$horizontal-nav-padding: 0.6875rem !default;
+
+// Gap between top level horizontal nav items
+$horizontal-nav-top-level-items-gap: 4px !default;
+
+// Horizontal nav icons
+$horizontal-nav-items-icon-size: 1.5rem !default;
+$horizontal-nav-third-level-icon-size: 0.9rem !default;
+$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
+
+// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
+// 120px is combined height of navbar & horizontal nav
+$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
+
+// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
+$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;

 // 👉 Plugins

-$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35);
+$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;

-// 👉 Custom Variables
-$avatar-font-sizes: () !default;
-$avatar-font-sizes: map.deep-merge(
+// 👉 Vuetify
+
+// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
+$vuetify-reduce-default-compact-button-icon-size: true !default;
+
+// 👉 Custom variables
+// for utility classes
+$font-sizes: () !default;
+$font-sizes: map-deep-merge(
  (
-    "x-small":12,
-    "small":14,
-    "default":18,
-    "large":20,
-    "x-large":24
+    "xs": 0.75rem,
+    "sm": 0.875rem,
+    "base": 1rem,
+    "lg": 1.125rem,
+    "xl": 1.25rem,
+    "2xl": 1.5rem,
+    "3xl": 1.875rem,
+    "4xl": 2.25rem,
+    "5xl": 3rem,
+    "6xl": 3.75rem,
+    "7xl": 4.5rem,
+    "8xl": 6rem,
+    "9xl": 8rem
  ),
-  $avatar-font-sizes
+  $font-sizes
 );
+
+// line height
+$font-line-height: () !default;
+$font-line-height: map-deep-merge(
+  (
+    "xs": 1rem,
+    "sm": 1.25rem,
+    "base": 1.5rem,
+    "lg": 1.75rem,
+    "xl": 1.75rem,
+    "2xl": 2rem,
+    "3xl": 2.25rem,
+    "4xl": 2.5rem,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1
+  ),
+  $font-line-height
+);
+
+// gap utility class
+$gap: () !default;
+$gap: map-deep-merge(
+  (
+    "0": 0,
+    "1": 0.25rem,
+    "2": 0.5rem,
+    "3": 0.75rem,
+    "4": 1rem,
+    "5": 1.25rem,
+    "6":1.5rem,
+    "7": 1.75rem,
+    "8": 2rem,
+    "9": 2.25rem,
+    "10": 2.5rem,
+    "11": 2.75rem,
+    "12": 3rem,
+    "14": 3.5rem,
+    "16": 4rem,
+    "20": 5rem,
+    "24": 6rem,
+    "28": 7rem,
+    "32": 8rem,
+    "36": 9rem,
+    "40": 10rem,
+    "44": 11rem,
+    "48": 12rem,
+    "52": 13rem,
+    "56": 14rem,
+    "60": 15rem,
+    "64": 16rem,
+    "72": 18rem,
+    "80": 20rem,
+    "96": 24rem
+  ),
+  $gap
+);
+
+// 👉 Default layout
+
+$navbar-high-emphasis-text: true !default;
--- a/src/@core/scss/_vertical-nav.scss
+++ b/src/@core/scss/_vertical-nav.scss
@@ -1,6 +1,6 @@
@use "./placeholders";
@use "@configured-variables" as variables;
-@use "@core/scss/mixins" as mixins;
+@use "./mixins" as mixins;
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
@use "vuetify/lib/styles/tools/elevation" as elevation;

--- a/src/@core/scss/index.scss
+++ b/src/@core/scss/index.scss
@@ -1,5 +1,44 @@
@use "sass:map";
-@use "template/index";

-// 保留这个引用以向后兼容，但实际功能已经移至template/index.scss
+// 基础变量和配置
@use "variables";
+@use "mixins";
+@use "utils";
+
+// 布局相关
+@use "default-layout";
+@use "vertical-nav";
+@use "default-layout-w-vertical-nav";
+
+// 组件样式
+@use "components";
+
+// 工具类
+@use "utilities";
+
+// 其他样式
+@use "misc";
+@use "dark";
+
+// 第三方库样式
+@use "libs/perfect-scrollbar";
+@use "libs/apex-chart";
+@use "libs/full-calendar";
+@use "libs/vuetify";
+
+// 全局样式
+a {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+}
+
+// Vuetify 3 don't provide margin bottom style like vuetify 2
+p {
+  margin-block-end: 1rem;
+}
+
+// Iconify icon size
+svg.iconify {
+  block-size: 1em;
+  inline-size: 1em;
+}
--- a/src/@core/scss/libs/apex-chart.scss
+++ b/src/@core/scss/libs/apex-chart.scss
@@ -1,67 +1,88 @@
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
+@use "@configured-variables" as variables;
+@use "../mixins";

+// 👉 Apex chart
 .apexcharts-canvas {
-  &line[stroke="transparent"] {
-    display: "none";
+  // For RTL alignment
+  .apexcharts-yaxis-texts-g {
+    text-align: start;
  }

+  // Tooltip
  .apexcharts-tooltip {
-    @include mixins_elevation.elevation(3);
-
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    background: rgb(var(--v-theme-surface));
+    line-height: 1.5;

    .apexcharts-tooltip-title {
      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
      background: rgb(var(--v-theme-surface));
+      font-weight: 500;
+      margin-block-end: 0.25rem;
+      padding-inline: 1rem;
+    }
+
+    .apexcharts-tooltip-text {
+      display: flex;
+      align-items: center;
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+      font-size: inherit;
+      gap: 0.5rem;
+      line-height: inherit;
+    }
+
+    .apexcharts-tooltip-text-label,
+    .apexcharts-tooltip-text-value {
      font-weight: 600;
+      line-height: 1.5;
+    }
+    
+    .apexcharts-tooltip-series-group {
+      padding-block: 0 0.5rem;
+      padding-inline: 1rem;
+
+      &:last-child {
+        padding-block-end: 1rem;
+      }
+
+      &.active {
+        padding-block-start: 0;
+      }
    }

    &.apexcharts-theme-light {
-      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-    }
-
-    &.apexcharts-theme-dark {
-      color: white;
-    }
-
-    .apexcharts-tooltip-series-group:first-of-type {
-      padding-block-end: 0;
+      border-color: rgb(var(--v-border-color));
+      background: rgb(var(--v-theme-surface));
+      box-shadow: none;
+      
+      .apexcharts-tooltip-text-label,
+      .apexcharts-tooltip-text-value {
+        color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+      }
    }
  }

-  .apexcharts-xaxistooltip {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    background: rgb(var(--v-theme-grey-50));
-    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-
-    &::after {
-      border-block-end-color: rgb(var(--v-theme-grey-50));
-    }
-
-    &::before {
-      border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    }
+  .apexcharts-marker {
+    transition: none;
  }

+  // 👉 stroke-dasharray
+  .apexcharts-radialbar,
+  .apexcharts-radialbar-slice-current {
+    stroke-linecap: round;
+  }
+
+  .apexcharts-xaxistooltip,
  .apexcharts-yaxistooltip {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    background: rgb(var(--v-theme-grey-50));
-
-    &::after {
-      border-inline-start-color: rgb(var(--v-theme-grey-50));
-    }
+    border-color: rgb(var(--v-border-color));
+    background: rgb(var(--v-theme-surface));
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));

+    &::after,
    &::before {
-      border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
+      border-block-end-color: rgb(var(--v-border-color));
    }
  }

-  .apexcharts-xaxistooltip-text,
-  .apexcharts-yaxistooltip-text {
-    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-  }
-
+  // 👉 Text color
  .apexcharts-text,
  .apexcharts-tooltip-text,
  .apexcharts-datalabel-label,
@@ -69,19 +90,16 @@
  .apexcharts-xaxistooltip-text,
  .apexcharts-yaxistooltip-text,
  .apexcharts-legend-text {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
    font-family: inherit !important;
  }

-  .apexcharts-pie-label {
-    fill: white;
-    filter: none;
-  }
-
-  .apexcharts-marker {
-    box-shadow: none;
-  }
-
-  .apexcharts-legend-marker {
-    margin-inline-end: 0.3875rem;
+  // 👉 Annotation Label
+  .apexcharts-annotation-rect {
+    &.apexcharts-xaxis-annotation-rect,
+    &.apexcharts-yaxis-annotation-rect {
+      fill-opacity: 0.05;
+      stroke-opacity: 0;
+    }
  }
 }
--- a/src/@core/scss/template/libs/full-calendar.scss
+++ b/src/@core/scss/template/libs/full-calendar.scss
--- a/src/@core/scss/template/libs/perfect-scrollbar.scss
+++ b/src/@core/scss/template/libs/perfect-scrollbar.scss
--- a/src/@core/scss/libs/vuetify/_overrides.scss
+++ b/src/@core/scss/libs/vuetify/_overrides.scss
@@ -1,5 +1,5 @@
-@use "@core/scss/utils";
@use "@configured-variables" as variables;
+@use "../../utils";

 // 👉 Application
 // ℹ️ We need accurate vh in mobile devices as well
@@ -45,6 +45,17 @@ h6,
  }
 }

+// 👉 Button
+@if variables.$vuetify-reduce-default-compact-button-icon-size {
+  .v-btn--density-compact.v-btn--size-default {
+    .v-btn__content > svg {
+      block-size: 22px;
+      font-size: 22px;
+      inline-size: 22px;
+    }
+  }
+}
+
 // 👉 Card
 // Removes padding-top for immediately placed v-card-text after itself
 .v-card-text {
@@ -71,7 +82,9 @@ h6,
  &.v-checkbox-btn,
  &.v-radio,
  &.v-radio-btn {
-    margin-inline-start: -0.5625rem;
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.5625rem;
+    }
  }
 }

@@ -79,7 +92,9 @@ h6,
  &.v-radio,
  &.v-radio-btn,
  &.v-checkbox-btn {
-    margin-inline-start: -0.3125rem;
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.3125rem;
+    }
  }
 }

@@ -87,7 +102,9 @@ h6,
  &.v-checkbox-btn,
  &.v-radio,
  &.v-radio-btn {
-    margin-inline-start: -0.6875rem;
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.6875rem;
+    }
  }
 }

@@ -154,13 +171,141 @@ h6,
    padding-block: 0 !important;
    padding-inline: 0 !important;

+    > .v-ripple__container {
+      opacity: 0;
+    }
+
    &:not(:last-child) {
      padding-block-end: var(--v-card-list-gap) !important;
    }
  }
+
+  .v-list-item:hover,
+  .v-list-item:focus,
+  .v-list-item:active,
+  .v-list-item.active {
+    > .v-list-item__overlay {
+      opacity: 0 !important;
+    }
+  }
 }

-// 👉 Table
-.v-table {
-  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+// 👉 Divider
+.v-divider {
+  color: rgb(var(--v-border-color));
 }
+
+// 👉 DataTable
+.v-data-table {
+  /* stylelint-disable-next-line no-descending-specificity */
+  .v-checkbox-btn .v-selection-control__wrapper {
+    margin-inline-start: 0 !important;
+  }
+
+  .v-selection-control {
+    display: flex !important;
+  }
+
+  .v-pagination {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  }
+}
+
+// 👉 v-field
+.v-field:hover .v-field__outline {
+  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
+}
+
+// 👉 VLabel
+.v-label {
+  opacity: 1 !important;
+
+  &:not(.v-field-label--floating) {
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+  }
+}
+
+// 👉 Overlay
+.v-overlay__scrim,
+.v-navigation-drawer__scrim {
+  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity));
+  opacity: 1;
+}
+
+// 透明主题下全屏弹窗的overlay背景透明度调整
+html[data-theme="transparent"] .v-dialog--fullscreen .v-overlay__scrim {
+  background: rgba(var(--v-overlay-scrim-background), 0.3);
+}
+
+// 👉 VMessages
+.v-messages {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  opacity: 1;
+}
+
+// 👉 Alert close btn
+.v-alert__close {
+  .v-btn--icon .v-icon {
+    --v-icon-size-multiplier: 1.5;
+  }
+}
+
+// 👉 Badge icon alignment
+.v-badge__badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 👉 Dialog
+.v-dialog--fullscreen {
+  background-color: rgb(var(--v-theme-surface));
+}
+
+// 透明主题下全屏弹窗背景透明
+html[data-theme="transparent"] .v-dialog--fullscreen {
+  background-color: transparent !important;
+}
+
+// For dialog card title
+.v-card-item + .v-card-text {
+  padding-block-start: 0 !important;
+}
+
+// 👉 v-slide-group (List of chips)
+.v-slide-group {
+  .v-slide-group__container {
+    display: flex;
+    flex-wrap: wrap;
+
+    // Spacing between buttons in v-slide-group
+    .v-slide-group-item:not(:last-child) {
+      margin-inline-end: 0.5rem;
+    }
+  }
+}
+
+// 👉 Expansion Panel
+.v-expansion-panels {
+  .v-expansion-panel-title {
+    min-block-size: unset !important;
+    padding-block: 1rem !important;
+  }
+}
+
+// 👉 v-textarea
+.v-textarea {
+  textarea {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+    &:hover,
+    &:focus {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    }
+  }
+}
+
+// 👉 Cursor
+.cursor-pointer {
+  cursor: pointer;
+} 
--- a/src/@core/scss/libs/vuetify/_variables.scss
+++ b/src/@core/scss/libs/vuetify/_variables.scss
@@ -1,22 +1,24 @@
 $shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
 $shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
 $shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
+/* stylelint-disable-next-line max-line-length */
 $font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

 // 👉 Card transition properties
 $card-transition-property-custom: box-shadow, opacity;

@forward "vuetify/settings" with (
-   // 👉 General settings
+  // 👉 General settings
  $color-pack: false !default,
-  $body-font-family: $font-family-custom !default,
-  $border-radius-root: 6px !default,

-    // 👉 Shadow opacity
+  // 👉 Shadow opacity
  $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
  $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
  $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,

+  $body-font-family: $font-family-custom !default,
+  $border-radius-root: 6px !default,
+
  $shadow-key-umbra: (
    0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
    1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
@@ -119,6 +121,18 @@ $card-transition-property-custom: box-shadow, opacity;
    24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
  ) !default,

+  // 👉 Card
+  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $card-elevation: 6 !default,
+  $card-title-line-height: 2rem !default,
+  $card-actions-min-height: unset !default,
+  $card-text-padding: 1.25rem !default,
+  $card-item-padding: 1.25rem !default,
+  $card-actions-padding: 0 12px 12px !default,
+  $card-transition-property: $card-transition-property-custom !default,
+  $card-subtitle-opacity: 1 !default,
+  $card-title-letter-spacing: 0.0094rem !default,
+
  // 👉 Typography
  $typography: (
    "h1": (
@@ -170,29 +184,14 @@ $card-transition-property-custom: box-shadow, opacity;
    )
  ) !default,

-  // 👉 States
-  $states: ("activated": 0.08) !default,
-
-  // 👉 Card
-  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
-  $card-elevation: 6 !default,
-  $card-title-line-height: 1.6 !default,
-  $card-actions-min-height: unset !default,
-  $card-text-padding: 20px !default,
-  $card-item-padding: 15px 20px !default,
-  $card-actions-padding: 0 12px 12px !default,
-  $card-title-letter-spacing: 0.0094rem !default,
-  $card-subtitle-opacity: 1 !default,
-  $card-transition-property: $card-transition-property-custom !default,
-
-  // 👉 Navigation Drawer
-  $navigation-drawer-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
-
-  // 👉 Table
-  $table-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
+  // 👉 List
+  $list-item-icon-margin-end: 16px !default,
+  $list-item-icon-margin-start: 16px !default,
+  $list-item-subtitle-opacity: 1 !default,
+  $list-subheader-text-opacity: 1 !default,

  // 👉 Tooltip
-  $tooltip-background-color:#212121 !default,
+  $tooltip-background-color: #212121 !default,
  $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
  $tooltip-font-size: 0.75rem !default,
  $tooltip-border-radius: 4px !default,
@@ -205,6 +204,8 @@ $card-transition-property-custom: box-shadow, opacity;

  // 👉 Badge
  $badge-border-color:rgb(var(--v-theme-surface)) !default,
+  $badge-dot-height: 0.5rem !default,
+  $badge-dot-width: 0.5rem !default,

  // 👉 Button
  $button-height: 38px !default,
@@ -212,6 +213,7 @@ $card-transition-property-custom: box-shadow, opacity;
  $button-border-radius: 5px !default,
  $button-padding-ratio: 1.7 !default,
  $button-text-letter-spacing: 0.025rem !default,
+  $button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default,

  // 👉 Dialog
  $dialog-card-header-padding: 20px !default,
@@ -220,6 +222,7 @@ $card-transition-property-custom: box-shadow, opacity;

  // 👉 Chip
  $chip-label-border-radius: 4px !default,
+  $chip-close-size: 20px !default,

  // 👉 Expansion panel
  $expansion-panel-title-padding: 16px 20px !default,
@@ -232,9 +235,6 @@ $card-transition-property-custom: box-shadow, opacity;
  // 👉 Menu
  $menu-content-border-radius: 5px !default,

-  // 👉 List
-  $list-subheader-text-opacity: 1 !default,
-
  // 👉 Snackbar
  $snackbar-background:#212121 !default,
  $snackbar-border-radius: 4px !default,
@@ -243,7 +243,12 @@ $card-transition-property-custom: box-shadow, opacity;
  // 👉 Tabs
  $tabs-height: 40px !default,

-  // 👉 Timeline 
+  // 👉 Slider
+  $slider-track-active-size: 4px !default,
+  $slider-thumb-label-padding: 4px 12px !default,
+  $slider-thumb-label-font-size: 0.875rem !default,
+
+  // 👉 Timeline
  $timeline-dot-size: 34px !default,
  $timeline-dot-divider-background: transparent !default,

@@ -252,4 +257,7 @@ $card-transition-property-custom: box-shadow, opacity;

  // 👉 Navigation Drawer
  $navigation-drawer-scrim-opacity:0.5 !default,
+
+  // 👉 Table
+  $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)),
 );
--- a/src/@core/scss/libs/vuetify/index.scss
+++ b/src/@core/scss/libs/vuetify/index.scss
@@ -1 +1,2 @@
+@use "variables";
@use "overrides";
--- a/src/@core/scss/placeholders/_default-layout.scss
+++ b/src/@core/scss/placeholders/_default-layout.scss
@@ -1,3 +1,21 @@
 %layout-navbar {
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
+
+// Vertical nav scrolled sticky elevated nav
+%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
+}
+
+// Floating navbar and sticky elevated navbar scrolled
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
+}
+
+// Floating navbar overlay
+%default-layout-vertical-nav-floating-navbar-overlay {
+  backdrop-filter: blur(8px);
+  background-color: rgba(var(--v-theme-surface), 0.9);
+}
--- a/src/@core/scss/placeholders/_vertical-nav.scss
+++ b/src/@core/scss/placeholders/_vertical-nav.scss
@@ -1,7 +1,7 @@
-@use "@core/scss/mixins";
+@use "../mixins";
@use "@configured-variables" as variables;
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
-@use "@core/scss/utils";
+@use "../utils";

 // Nav items styles (including section title)
 %vertical-nav-item {
--- a/src/@core/scss/template/_components.scss
+++ b/src/@core/scss/template/_components.scss
@@ -1,193 +0,0 @@
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
-@use "@configured-variables" as variables;
-@use "mixins";
-
-// 👉 Alert
-.v-alert {
-  .v-alert__close {
-    .v-icon {
-      block-size: 20px !important;
-      font-size: 20px !important;
-      inline-size: 20px !important;
-    }
-  }
-
-  &:not(.v-alert--prominent) .v-alert__prepend {
-    .v-icon {
-      block-size: 1.375rem !important;
-      font-size: 1.375rem !important;
-      inline-size: 1.375rem !important;
-    }
-  }
-
-  .v-alert-title {
-    line-height: 1.5rem;
-    margin-block-end: 0.25rem;
-  }
-}
-
-// 👉 Avatar font-size
-.v-avatar {
-  @include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
-}
-
-// 👉 Button
-.v-btn {
-  /* stylelint-disable-next-line no-descending-specificity */
-  &:not(.v-btn--icon) .v-icon {
-    --v-icon-size-multiplier: 0.9525 !important;
-  }
-}
-
-// 👉 Chip
-.v-chip.v-chip--size-default .v-avatar {
-  --v-avatar-height: 24px;
-}
-
-.v-chip.v-chip--density-comfortable {
-  line-height: 1;
-}
-
-// 👉 Expansion Panel
-.v-expansion-panel {
-  .v-expansion-panel-text {
-    font-size: 1rem;
-  }
-}
-
-// 👉 Tooltip
-.v-tooltip > .v-overlay__content {
-  font-weight: 500;
-  line-height: 0.875rem;
-}
-
-// 👉 List
-
-//  👉 Tab with pill support
-.v-tabs.v-tabs-pill {
-  .v-tab.v-btn {
-    border-radius: 6px !important;
-  }
-}
-
-// 👉 Timeline added box shadow
-.v-timeline-item {
-  .v-timeline-divider__dot {
-    .v-timeline-divider__inner-dot {
-      box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
-
-      @each $color-name in variables.$theme-colors-name {
-
-        &.bg-#{$color-name} {
-          box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
-        }
-      }
-    }
-  }
-}
-
-// 👉 Timeline Outlined style
-.v-timeline-variant-outlined.v-timeline {
-  .v-timeline-divider__dot {
-    .v-timeline-divider__inner-dot {
-      box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant));
-
-      @each $color-name in variables.$theme-colors-name {
-        background-color: rgb(var(--v-theme-surface)) !important;
-
-        &.bg-#{$color-name} {
-          box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
-        }
-      }
-    }
-  }
-}
-
-// 👉 Expansion panels
-.v-expansion-panel-title,
-.v-expansion-panel-title--active,
-.v-expansion-panel-title:hover,
-.v-expansion-panel-title:focus,
-.v-expansion-panel-title:focus-visible,
-.v-expansion-panel-title--active:focus,
-.v-expansion-panel-title--active:hover {
-  .v-expansion-panel-title__overlay {
-    opacity: 0 !important;
-  }
-}
-
-// 👉 Set Elevation when panel open
-
-.v-expansion-panels:not(.v-expansion-panels--variant-accordion) {
-  .v-expansion-panel.v-expansion-panel--active {
-    .v-expansion-panel__shadow {
-      @include mixins_elevation.elevation(3);
-    }
-  }
-}
-
-// 👉 Slider
-.v-slider-thumb {
-  .v-slider-thumb__label {
-    background: rgb(117, 117, 117);
-    color: rgb(var(--v-theme-on-primary));
-
-    &::before {
-      color: rgb(117, 117, 117);
-    }
-  }
-}
-
-// 👉 Switch
-.v-switch {
-  .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
-    color: #fff;
-  }
-}
-
-// 👉 Table
-.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
-.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
-.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
-  block-size: 50px !important;
-}
-
-.v-table {
-  --v-table-header-height: 54px !important;
-
-  th {
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
-    font-size: 0.75rem;
-
-    .v-data-table-header__content {
-      display: flex;
-      justify-content: space-between;
-    }
-  }
-
-  .v-selection-control {
-    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
-    font-size: 1rem;
-  }
-}
-
-.v-data-table {
-  th {
-    background: rgb(var(--v-table-header-background)) !important;
-  }
-}
-
-// 👉 Pagination
-.v-pagination {
-  .v-btn {
-    border-radius: 4px;
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-    font-size: 14px;
-    font-weight: 400;
-  }
-}
-
-// 👉 SnackBar
-.v-snackbar--variant-elevated {
-  @include mixins.elevation(6);
-}
--- a/src/@core/scss/template/_mixins.scss
+++ b/src/@core/scss/template/_mixins.scss
@@ -1,101 +0,0 @@
-@use "sass:map";
-@use "vuetify/lib/styles/settings" as vuetify_settings;
-@use "@styles/variables/_vuetify.scss" as vuetify;
-
-@mixin avatar-font-sizes($map: $avatar-sizes) {
-  @each $sizeName, $multiplier in vuetify_settings.$size-scales {
-    /* stylelint-disable-next-line scss/no-global-function-names */
-    $size: map.get($map, $sizeName);
-
-    &.v-avatar--size-#{$sizeName} {
-      font-size: #{$size}px;
-    }
-  }
-}
-
-@mixin elevation($z, $important: false) {
-  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
-}
-
-@mixin before-pseudo() {
-  position: relative;
-
-  &::before {
-    position: absolute;
-    border-radius: inherit;
-    background: currentcolor;
-    block-size: 100%;
-    content: "";
-    inline-size: 100%;
-    inset: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-}
-
-@mixin bordered-skin($component, $border-property: "border", $important: false) {
-  #{$component} {
-    box-shadow: none !important;
-    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
-  }
-}
-
-@mixin selected-states($selector) {
-  #{$selector} {
-    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
-  }
-
-  &:hover
-  #{$selector} {
-    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
-  }
-
-  &:focus-visible
-  #{$selector} {
-    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      #{$selector} {
-        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
-      }
-    }
-  }
-}
-
-@mixin push-anchors() {
-  :target {
-    scroll-margin-block-start: 90px;
-  }
-}
-
-@mixin xs {
-  @media (width >= 0) and (width <= 599.98px) {
-    @content;
-  }
-}
-
-@mixin sm {
-  @media (width >= 600px) and (width <= 959.98px) {
-    @content;
-  }
-}
-
-@mixin md {
-  @media (width >= 960px) and (width <= 1279.98px) {
-    @content;
-  }
-}
-
-@mixin lg {
-  @media (width >= 1280px) and (width <= 1919.98px) {
-    @content;
-  }
-}
-
-@mixin xl {
-  @media (width >= 1920px) {
-    @content;
-  }
-}
--- a/src/@core/scss/template/_utilities.scss
+++ b/src/@core/scss/template/_utilities.scss
@@ -1,25 +0,0 @@
-.bg-var-theme-background {
-  background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
-}
-
-// 👉 Pagination small-select dropdown for table
-// TODO: remove this class after vuetify datatable implememtation
-
-.per-page-select {
-  margin-block: auto;
-
-  .v-field__input {
-    align-items: center;
-    padding: 2px;
-    font-size: 14px;
-  }
-
-  .v-field__append-inner {
-    align-items: center;
-    padding: 0;
-
-    .v-icon {
-      margin-inline-start: 0 !important;
-    }
-  }
-}
--- a/src/@core/scss/template/_utils.scss
+++ b/src/@core/scss/template/_utils.scss
@@ -1,41 +0,0 @@
-@use "sass:string";
-
-/*
-  ℹ️ This function is helpful when we have multi dimensional value
-
-  Assume we have padding variable `$nav-padding-horizontal: 10px;`
-  With above variable let's say we use it in some style:
-  ```scss
-  .selector {
-    margin-left: $nav-padding-horizontal;
-  }
-  ```
-
-  Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
-  In this case above style will be invalid.
-
-  This function will extract the left most value from the variable value.
-
-  $nav-padding-horizontal: 10px; => 10px;
-  $nav-padding-horizontal: 10px 15px; => 10px;
-
-  This is safe:
-  ```scss
-  .selector {
-    margin-left: get-first-value($nav-padding-horizontal);
-  }
-  ```
-*/
-@function get-first-value($var) {
-  $start-at: string.index(#{$var}, " ");
-
-  @if $start-at {
-    @return string.slice(
-      #{$var},
-      0,
-      $start-at
-    );
-  } @else {
-    @return $var;
-  }
-}
--- a/src/@core/scss/template/_variables.scss
+++ b/src/@core/scss/template/_variables.scss
@@ -1,227 +0,0 @@
-@use "sass:map";
-@use "utils";
-@use "vuetify/lib/styles/tools/functions" as *;
-
-$vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
-
-// ℹ️ We created this SCSS var to extract the start padding
-// Docs: https://sass-lang.com/documentation/modules/string
-// $vertical-nav-horizontal-padding => 0 8px;
-// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
-//   string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
-// string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
-
-$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-custom) !default;
-$vertical-nav-items-icon-margin-inline-end: 0.625rem !default;
-
-// Vertical Nav Configuration
-$vertical-nav-collapsed-width: 68px !default;
-
-// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
-// This is used by nav items & nav header
-$vertical-nav-horizontal-spacing: 0 1.125rem !default;
-$vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default;
-
-// Vertical nav header padding
-$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
-
-// 👉 Custom Variables
-$avatar-font-sizes: (
-  "x-small":12,
-  "small":14,
-  "default":18,
-  "large":20,
-  "x-large":24
-) !default;
-
-// 合并两个文件中的@forward配置
-@forward "@layouts/styles/variables" with (
-  // 来自_variables.scss的配置
-  $layout-vertical-nav-collapsed-width: 68px !default,
-  
-  // 来自template/_variables.scss的配置
-  $layout-vertical-nav-z-index: 1004,
-  $layout-overlay-z-index: 1003
-);
-
-// 使用命名空间来避免变量冲突
-@use "@layouts/styles/variables" as layouts-vars;
-
-$theme-colors-name: (
-  "primary",
-  "secondary",
-  "error",
-  "info",
-  "success",
-  "warning"
-) !default;
-
-// 👉 Default layout with vertical nav
-
-$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
-
-// 👉 Vertical nav
-$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
-$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
-
-// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
-// This is used by nav items & nav header
-$vertical-nav-horizontal-spacing: 1rem !default;
-$vertical-nav-horizontal-padding: 0.75rem !default;
-
-// Vertical nav header height. Mostly we will align it with navbar height;
-$vertical-nav-header-height: layouts-vars.$layout-vertical-nav-navbar-height !default;
-$vertical-nav-navbar-elevation: 3 !default;
-$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
-$vertical-nav-floating-navbar-top: 1rem !default;
-
-// Vertical nav header padding
-$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
-$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
-
-// Move logo when vertical nav is mini (collapsed but not hovered)
-$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
-
-// Space between logo and title
-$vertical-nav-header-logo-title-spacing: 0.9rem !default;
-
-// Section title margin top (when its not first child)
-$vertical-nav-section-title-mt: 1.5rem !default;
-
-// Section title margin bottom
-$vertical-nav-section-title-mb: 0.5rem !default;
-
-// Vertical nav icons
-$vertical-nav-items-icon-size: 1.5rem !default;
-$vertical-nav-items-nested-icon-size: 0.9rem !default;
-$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
-
-// Transition duration for nav group arrow
-$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
-
-// Timing function for nav group arrow
-$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
-
-// 👉 Horizontal nav
-
-/*
-    ❗ Heads up
-    ==================
-    Here we assume we will always use shorthand property which will apply same padding on four side
-    This is because this have been used as value of top property by `.popper-content`
-*/
-$horizontal-nav-padding: 0.6875rem !default;
-
-// Gap between top level horizontal nav items
-$horizontal-nav-top-level-items-gap: 4px !default;
-
-// Horizontal nav icons
-$horizontal-nav-items-icon-size: 1.5rem !default;
-$horizontal-nav-third-level-icon-size: 0.9rem !default;
-$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
-
-// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
-// 120px is combined height of navbar & horizontal nav
-$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
-
-// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
-$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
-
-// 👉 Plugins
-
-$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
-
-// 👉 Vuetify
-
-// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
-$vuetify-reduce-default-compact-button-icon-size: true !default;
-
-// 👉 Custom variables
-// for utility classes
-$font-sizes: () !default;
-$font-sizes: map-deep-merge(
-  (
-    "xs": 0.75rem,
-    "sm": 0.875rem,
-    "base": 1rem,
-    "lg": 1.125rem,
-    "xl": 1.25rem,
-    "2xl": 1.5rem,
-    "3xl": 1.875rem,
-    "4xl": 2.25rem,
-    "5xl": 3rem,
-    "6xl": 3.75rem,
-    "7xl": 4.5rem,
-    "8xl": 6rem,
-    "9xl": 8rem
-  ),
-  $font-sizes
-);
-
-// line height
-$font-line-height: () !default;
-$font-line-height: map-deep-merge(
-  (
-    "xs": 1rem,
-    "sm": 1.25rem,
-    "base": 1.5rem,
-    "lg": 1.75rem,
-    "xl": 1.75rem,
-    "2xl": 2rem,
-    "3xl": 2.25rem,
-    "4xl": 2.5rem,
-    "5xl": 1,
-    "6xl": 1,
-    "7xl": 1,
-    "8xl": 1,
-    "9xl": 1
-  ),
-  $font-line-height
-);
-
-// gap utility class
-$gap: () !default;
-$gap: map-deep-merge(
-  (
-    "0": 0,
-    "1": 0.25rem,
-    "2": 0.5rem,
-    "3": 0.75rem,
-    "4": 1rem,
-    "5": 1.25rem,
-    "6":1.5rem,
-    "7": 1.75rem,
-    "8": 2rem,
-    "9": 2.25rem,
-    "10": 2.5rem,
-    "11": 2.75rem,
-    "12": 3rem,
-    "14": 3.5rem,
-    "16": 4rem,
-    "20": 5rem,
-    "24": 6rem,
-    "28": 7rem,
-    "32": 8rem,
-    "36": 9rem,
-    "40": 10rem,
-    "44": 11rem,
-    "48": 12rem,
-    "52": 13rem,
-    "56": 14rem,
-    "60": 15rem,
-    "64": 16rem,
-    "72": 18rem,
-    "80": 20rem,
-    "96": 24rem
-  ),
-  $gap
-);
-
-// Avatar sizes map
-$avatar-font-sizes: (
-  "x-small": 0.625rem,
-  "small": 0.75rem,
-  "default": 0.875rem,
-  "large": 1rem,
-  "x-large": 1.125rem,
-) !default;
--- a/src/@core/scss/template/index.scss
+++ b/src/@core/scss/template/index.scss
@@ -1,42 +0,0 @@
-@use "sass:map";
-
-// Layout
-@use "../vertical-nav";
-@use "../default-layout";
-@use "default-layout-w-vertical-nav";
-
-// Components
-@use "components";
-
-// Utilities
-@use "utilities";
-@use "../utils";
-
-// Misc
-@use "../misc";
-
-// Dark
-@use "../dark";
-
-// Variables
-@use "variables";
-
-// libs
-@use "libs/perfect-scrollbar";
-@use "libs/vuetify";
-
-a {
-  color: rgb(var(--v-theme-primary));
-  text-decoration: none;
-}
-
-// Vuetify 3 don't provide margin bottom style like vuetify 2
-p {
-  margin-block-end: 1rem;
-}
-
-// Iconify icon size
-svg.iconify {
-  block-size: 1em;
-  inline-size: 1em;
-}
--- a/src/@core/scss/template/libs/apex-chart.scss
+++ b/src/@core/scss/template/libs/apex-chart.scss
@@ -1,106 +0,0 @@
-@use "@configureTheme" as theme;
-@use "@configured-variables" as variables;
-@use "../mixins";
-
-// 👉 Apex chart
-.apexcharts-canvas {
-  // For RTL alignment
-  .apexcharts-yaxis-texts-g {
-    text-align: start;
-  }
-
-  // Tooltip
-  .apexcharts-tooltip {
-    line-height: 1.5;
-
-    .apexcharts-tooltip-title {
-      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-      background: rgb(var(--v-theme-surface));
-      font-weight: 500;
-      margin-block-end: 0.25rem;
-      padding-inline: 1rem;
-    }
-
-    .apexcharts-tooltip-text {
-      display: flex;
-      align-items: center;
-      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-      font-size: inherit;
-      gap: 0.5rem;
-      line-height: inherit;
-    }
-
-    .apexcharts-tooltip-text-label,
-    .apexcharts-tooltip-text-value {
-      font-weight: 600;
-      line-height: 1.5;
-    }
-    
-    .apexcharts-tooltip-series-group {
-      padding-block: 0 0.5rem;
-      padding-inline: 1rem;
-
-      &:last-child {
-        padding-block-end: 1rem;
-      }
-
-      &.active {
-        padding-block-start: 0;
-      }
-    }
-
-    &.apexcharts-theme-light {
-      border-color: rgb(var(--v-border-color));
-      background: rgb(var(--v-theme-surface));
-      box-shadow: none;
-      
-      .apexcharts-tooltip-text-label,
-      .apexcharts-tooltip-text-value {
-        color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-      }
-    }
-  }
-
-  .apexcharts-marker {
-    transition: none;
-  }
-
-  // 👉 stroke-dasharray
-  .apexcharts-radialbar,
-  .apexcharts-radialbar-slice-current {
-    stroke-linecap: round;
-  }
-
-  .apexcharts-xaxistooltip,
-  .apexcharts-yaxistooltip {
-    border-color: rgb(var(--v-border-color));
-    background: rgb(var(--v-theme-surface));
-    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
-
-    &::after,
-    &::before {
-      border-block-end-color: rgb(var(--v-border-color));
-    }
-  }
-
-  // 👉 Text color
-  .apexcharts-text,
-  .apexcharts-tooltip-text,
-  .apexcharts-datalabel-label,
-  .apexcharts-datalabel,
-  .apexcharts-xaxistooltip-text,
-  .apexcharts-yaxistooltip-text,
-  .apexcharts-legend-text {
-    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
-    font-family: inherit !important;
-  }
-
-  // 👉 Annotation Label
-  .apexcharts-annotation-rect {
-    &.apexcharts-xaxis-annotation-rect,
-    &.apexcharts-yaxis-annotation-rect {
-      fill-opacity: 0.05;
-      stroke-opacity: 0;
-    }
-  }
-}
--- a/src/@core/scss/template/libs/vuetify/_overrides.scss
+++ b/src/@core/scss/template/libs/vuetify/_overrides.scss
@@ -1,301 +0,0 @@
-@use "@configured-variables" as variables;
-@use "../../../utils";
-
-// 👉 Application
-// ℹ️ We need accurate vh in mobile devices as well
-.v-application__wrap {
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  min-height: calc(var(--vh, 1vh) * 100);
-}
-
-// 👉 Typography
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.text-h1,
-.text-h2,
-.text-h3,
-.text-h4,
-.text-h5,
-.text-h6,
-.text-button,
-.text-overline,
-.v-card-title {
-  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-}
-
-.text-body-1,
-.text-body-2,
-.text-subtitle-1,
-.text-subtitle-2 {
-  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
-}
-
-// 👉 Grid
-// Remove margin-bottom of v-input_details inside grid (validation error message)
-.v-row {
-  .v-col,
-  [class^="v-col-*"] {
-    .v-input__details {
-      margin-block-end: 0;
-    }
-  }
-}
-
-// 👉 Button
-@if variables.$vuetify-reduce-default-compact-button-icon-size {
-  .v-btn--density-compact.v-btn--size-default {
-    .v-btn__content > svg {
-      block-size: 22px;
-      font-size: 22px;
-      inline-size: 22px;
-    }
-  }
-}
-
-// 👉 Card
-// Removes padding-top for immediately placed v-card-text after itself
-.v-card-text {
-  & + & {
-    padding-block-start: 0 !important;
-  }
-}
-
-/*
-  👉 Checkbox & Radio Ripple
-
-  TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
-  We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
-  Tested with checkbox & switches
-*/
-.v-checkbox.v-input,
-.v-switch.v-input {
-  --v-input-control-height: auto;
-
-  flex: unset;
-}
-
-.v-selection-control--density-comfortable {
-  &.v-checkbox-btn,
-  &.v-radio,
-  &.v-radio-btn {
-    .v-selection-control__wrapper {
-      margin-inline-start: -0.5625rem;
-    }
-  }
-}
-
-.v-selection-control--density-compact {
-  &.v-radio,
-  &.v-radio-btn,
-  &.v-checkbox-btn {
-    .v-selection-control__wrapper {
-      margin-inline-start: -0.3125rem;
-    }
-  }
-}
-
-.v-selection-control--density-default {
-  &.v-checkbox-btn,
-  &.v-radio,
-  &.v-radio-btn {
-    .v-selection-control__wrapper {
-      margin-inline-start: -0.6875rem;
-    }
-  }
-}
-
-.v-radio-group {
-  .v-selection-control-group {
-    .v-radio:not(:last-child) {
-      margin-inline-end: 0.9rem;
-    }
-  }
-}
-
-/*
-  👉 Tabs
-  Disable tab transition
-
-  This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
-
-  This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
-*/
-.disable-tab-transition {
-  overflow: unset !important;
-
-  .v-window__container {
-    block-size: auto !important;
-  }
-
-  .v-window-item:not(.v-window-item--active) {
-    display: none !important;
-  }
-
-  .v-window__container .v-window-item {
-    transform: none !important;
-  }
-}
-
-// 👉 List
-.v-list {
-  // Set icons opacity to .87
-  .v-list-item__prepend > .v-icon,
-  .v-list-item__append > .v-icon {
-    opacity: var(--v-high-emphasis-opacity);
-  }
-}
-
-// 👉 Card list
-
-/*
-  ℹ️ Custom class
-
-  Remove list spacing inside card
-
-  This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
-*/
-.card-list {
-  --v-card-list-gap: 20px;
-
-  &.v-list {
-    padding-block: 0;
-  }
-
-  .v-list-item {
-    min-block-size: unset;
-    min-block-size: auto !important;
-    padding-block: 0 !important;
-    padding-inline: 0 !important;
-
-    > .v-ripple__container {
-      opacity: 0;
-    }
-
-    &:not(:last-child) {
-      padding-block-end: var(--v-card-list-gap) !important;
-    }
-  }
-
-  .v-list-item:hover,
-  .v-list-item:focus,
-  .v-list-item:active,
-  .v-list-item.active {
-    > .v-list-item__overlay {
-      opacity: 0 !important;
-    }
-  }
-}
-
-// 👉 Divider
-.v-divider {
-  color: rgb(var(--v-border-color));
-}
-
-// 👉 DataTable
-.v-data-table {
-  /* stylelint-disable-next-line no-descending-specificity */
-  .v-checkbox-btn .v-selection-control__wrapper {
-    margin-inline-start: 0 !important;
-  }
-
-  .v-selection-control {
-    display: flex !important;
-  }
-
-  .v-pagination {
-    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  }
-}
-
-// 👉 v-field
-.v-field:hover .v-field__outline {
-  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
-}
-
-// 👉 VLabel
-.v-label {
-  opacity: 1 !important;
-
-  &:not(.v-field-label--floating) {
-    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
-  }
-}
-
-// 👉 Overlay
-.v-overlay__scrim,
-.v-navigation-drawer__scrim {
-  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
-  opacity: 1 !important;
-}
-
-// 👉 VMessages
-.v-messages {
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  opacity: 1;
-}
-
-// 👉 Alert close btn
-.v-alert__close {
-  .v-btn--icon .v-icon {
-    --v-icon-size-multiplier: 1.5;
-  }
-}
-
-// 👉 Badge icon alignment
-.v-badge__badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// 👉 Dialog
-.v-dialog--fullscreen {
-  background-color: rgb(var(--v-theme-surface));
-}
-
-// For dialog card title
-.v-card-item + .v-card-text {
-  padding-block-start: 0 !important;
-}
-
-// 👉 v-slide-group (List of chips)
-.v-slide-group {
-  .v-slide-group__container {
-    display: flex;
-    flex-wrap: wrap;
-
-    // Spacing between buttons in v-slide-group
-    .v-slide-group-item:not(:last-child) {
-      margin-inline-end: 0.5rem;
-    }
-  }
-}
-
-// 👉 Expansion Panel
-.v-expansion-panels {
-  .v-expansion-panel-title {
-    min-block-size: unset !important;
-    padding-block: 1rem !important;
-  }
-}
-
-// 👉 v-textarea
-.v-textarea {
-  textarea {
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-
-    &:hover,
-    &:focus {
-      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-    }
-  }
-}
-
-// 👉 Cursor
-.cursor-pointer {
-  cursor: pointer;
-} 
--- a/src/@core/scss/template/libs/vuetify/_variables.scss
+++ b/src/@core/scss/template/libs/vuetify/_variables.scss
@@ -1,263 +0,0 @@
-$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
-$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
-$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
-/* stylelint-disable-next-line max-line-length */
-$font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-// 👉 Card transition properties
-$card-transition-property-custom: box-shadow, opacity;
-
-@forward "vuetify/settings" with (
-  // 👉 General settings
-  $color-pack: false !default,
-
-  // 👉 Shadow opacity
-  $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
-  $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
-  $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
-
-  $body-font-family: $font-family-custom !default,
-  $border-radius-root: 6px !default,
-
-  $shadow-key-umbra: (
-    0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
-    1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
-    2: (0 3px 1px -2px var(--v-shadow-key-umbra-opacity)),
-
-    // ℹ️ Modified
-    3: (0 4px 14px -4px var(--v-shadow-key-umbra-opacity)),
-
-    4: (0 2px 4px -1px var(--v-shadow-key-umbra-opacity)),
-    5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)),
-
-    // ℹ️ Modified
-    6: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
-
-    7: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
-    8: (0 5px 5px -3px var(--v-shadow-key-umbra-opacity)),
-    9: (0 5px 6px -3px var(--v-shadow-key-umbra-opacity)),
-    10: (0 6px 6px -3px var(--v-shadow-key-umbra-opacity)),
-    11: (0 6px 7px -4px var(--v-shadow-key-umbra-opacity)),
-    12: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
-    13: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
-    14: (0 7px 9px -4px var(--v-shadow-key-umbra-opacity)),
-    15: (0 8px 9px -5px var(--v-shadow-key-umbra-opacity)),
-    16: (0 8px 10px -5px var(--v-shadow-key-umbra-opacity)),
-    17: (0 8px 11px -5px var(--v-shadow-key-umbra-opacity)),
-    18: (0 9px 11px -5px var(--v-shadow-key-umbra-opacity)),
-    19: (0 9px 12px -6px var(--v-shadow-key-umbra-opacity)),
-    20: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
-    21: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
-    22: (0 10px 14px -6px var(--v-shadow-key-umbra-opacity)),
-    23: (0 11px 14px -7px var(--v-shadow-key-umbra-opacity)),
-    24: (0 11px 15px -7px var(--v-shadow-key-umbra-opacity))
-  ) !default,
-
-  $shadow-key-penumbra: (
-    0: (0 0 0 0 $shadow-key-penumbra-opacity-custom),
-    1: (0 1px 1px 0 $shadow-key-penumbra-opacity-custom),
-    2: (0 2px 2px 0 $shadow-key-penumbra-opacity-custom),
-
-    // ℹ️ Modified
-    3: (0 4px 8px -4px $shadow-key-penumbra-opacity-custom),
-
-    4: (0 4px 5px 0 $shadow-key-penumbra-opacity-custom),
-    5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom),
-
-    // ℹ️ Modified
-    6: (0 2px 10px 1px $shadow-key-penumbra-opacity-custom),
-
-    7: (0 7px 10px 1px $shadow-key-penumbra-opacity-custom),
-    8: (0 8px 10px 1px $shadow-key-penumbra-opacity-custom),
-    9: (0 9px 12px 1px $shadow-key-penumbra-opacity-custom),
-    10: (0 10px 14px 1px $shadow-key-penumbra-opacity-custom),
-    11: (0 11px 15px 1px $shadow-key-penumbra-opacity-custom),
-    12: (0 12px 17px 2px $shadow-key-penumbra-opacity-custom),
-    13: (0 13px 19px 2px $shadow-key-penumbra-opacity-custom),
-    14: (0 14px 21px 2px $shadow-key-penumbra-opacity-custom),
-    15: (0 15px 22px 2px $shadow-key-penumbra-opacity-custom),
-    16: (0 16px 24px 2px $shadow-key-penumbra-opacity-custom),
-    17: (0 17px 26px 2px $shadow-key-penumbra-opacity-custom),
-    18: (0 18px 28px 2px $shadow-key-penumbra-opacity-custom),
-    19: (0 19px 29px 2px $shadow-key-penumbra-opacity-custom),
-    20: (0 20px 31px 3px $shadow-key-penumbra-opacity-custom),
-    21: (0 21px 33px 3px $shadow-key-penumbra-opacity-custom),
-    22: (0 22px 35px 3px $shadow-key-penumbra-opacity-custom),
-    23: (0 23px 36px 3px $shadow-key-penumbra-opacity-custom),
-    24: (0 24px 38px 3px $shadow-key-penumbra-opacity-custom)
-  ) !default,
-
-  $shadow-key-ambient: (
-    0: (0 0 0 0 $shadow-key-ambient-opacity-custom),
-    1: (0 1px 3px 0 $shadow-key-ambient-opacity-custom),
-    2: (0 1px 5px 0 $shadow-key-ambient-opacity-custom),
-
-    // ℹ️ Modified
-    3: (0 4px 8px -4px $shadow-key-ambient-opacity-custom),
-
-    4: (0 1px 10px 0 $shadow-key-ambient-opacity-custom),
-    5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom),
-
-    // ℹ️ Modified
-    6: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
-
-    7: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
-    8: (0 3px 14px 2px $shadow-key-ambient-opacity-custom),
-    9: (0 3px 16px 2px $shadow-key-ambient-opacity-custom),
-    10: (0 4px 18px 3px $shadow-key-ambient-opacity-custom),
-    11: (0 4px 20px 3px $shadow-key-ambient-opacity-custom),
-    12: (0 5px 22px 4px $shadow-key-ambient-opacity-custom),
-    13: (0 5px 24px 4px $shadow-key-ambient-opacity-custom),
-    14: (0 5px 26px 4px $shadow-key-ambient-opacity-custom),
-    15: (0 6px 28px 5px $shadow-key-ambient-opacity-custom),
-    16: (0 6px 30px 5px $shadow-key-ambient-opacity-custom),
-    17: (0 6px 32px 5px $shadow-key-ambient-opacity-custom),
-    18: (0 7px 34px 6px $shadow-key-ambient-opacity-custom),
-    19: (0 7px 36px 6px $shadow-key-ambient-opacity-custom),
-    20: (0 8px 38px 7px $shadow-key-ambient-opacity-custom),
-    21: (0 8px 40px 7px $shadow-key-ambient-opacity-custom),
-    22: (0 8px 42px 7px $shadow-key-ambient-opacity-custom),
-    23: (0 9px 44px 8px $shadow-key-ambient-opacity-custom),
-    24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
-  ) !default,
-
-  // 👉 Card
-  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
-  $card-elevation: 6 !default,
-  $card-title-line-height: 2rem !default,
-  $card-actions-min-height: unset !default,
-  $card-text-padding: 1.25rem !default,
-  $card-item-padding: 1.25rem !default,
-  $card-actions-padding: 0 12px 12px !default,
-  $card-transition-property: $card-transition-property-custom !default,
-  $card-subtitle-opacity: 1 !default,
-  $card-title-letter-spacing: 0.0094rem !default,
-
-  // 👉 Typography
-  $typography: (
-    "h1": (
-      "weight": 500,
-      "line-height": 7rem,
-      "letter-spacing": -0.0938rem
-    ),
-    "h2": (
-      "weight": 500,
-      "line-height": 4.5rem,
-      "letter-spacing": -0.0313rem
-    ),
-    "h3": (
-      "weight": 500,
-      "line-height": 3.5rem
-    ),
-    "h4": (
-      "weight": 500,
-      "line-height": 2.625rem,
-      "letter-spacing": 0.0156rem
-    ),
-    "h5": (
-      "weight": 500,
-      "line-height": 2rem
-    ),
-    "h6": (
-      "letter-spacing": 0.0094rem
-    ),
-    "subtitle-1": (
-      "letter-spacing": 0.0094rem
-    ),
-    "subtitle-2": (
-      "line-height": 1.375rem,
-      "letter-spacing": 0.0063rem,
-    ),
-    "body-1": (
-      "letter-spacing": 0.0094rem,
-    ),
-    "body-2": (
-      "letter-spacing": 0.0094rem,
-    ),
-    "caption": (
-      "letter-spacing": 0.025rem,
-    ),
-    "overline": (
-      "weight": 400,
-      "line-height": 1.125rem,
-      "letter-spacing": 0.0625rem,
-    )
-  ) !default,
-
-  // 👉 List
-  $list-item-icon-margin-end: 16px !default,
-  $list-item-icon-margin-start: 16px !default,
-  $list-item-subtitle-opacity: 1 !default,
-  $list-subheader-text-opacity: 1 !default,
-
-  // 👉 Tooltip
-  $tooltip-background-color: #212121 !default,
-  $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
-  $tooltip-font-size: 0.75rem !default,
-  $tooltip-border-radius: 4px !default,
-  $tooltip-padding: 4px 8px !default,
-
-  // 👉 Alert
-  $alert-title-font-size: 1rem !default,
-  $alert-border-radius: 5px !default,
-  $alert-title-letter-spacing: 0.15px !default,
-
-  // 👉 Badge
-  $badge-border-color:rgb(var(--v-theme-surface)) !default,
-  $badge-dot-height: 0.5rem !default,
-  $badge-dot-width: 0.5rem !default,
-
-  // 👉 Button
-  $button-height: 38px !default,
-  $button-elevation: ("default": 3, "hover": 4, "active": 8) !default,
-  $button-border-radius: 5px !default,
-  $button-padding-ratio: 1.7 !default,
-  $button-text-letter-spacing: 0.025rem !default,
-  $button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default,
-
-  // 👉 Dialog
-  $dialog-card-header-padding: 20px !default,
-  $dialog-card-header-text-padding-top: 0 !default,
-  $dialog-card-text-padding: 20px !default,
-
-  // 👉 Chip
-  $chip-label-border-radius: 4px !default,
-  $chip-close-size: 20px !default,
-
-  // 👉 Expansion panel
-  $expansion-panel-title-padding: 16px 20px !default,
-  $expansion-panel-title-font-size: 1rem !default,
-  $expansion-panel-disabled-overlay: 0 !default,
-  $expansion-panel-active-title-min-height: 51px !default,
-  $expansion-panel-title-min-height: 51px !default,
-  $expansion-panel-text-padding: 0 20px 20px !default,
-
-  // 👉 Menu
-  $menu-content-border-radius: 5px !default,
-
-  // 👉 Snackbar
-  $snackbar-background:#212121 !default,
-  $snackbar-border-radius: 4px !default,
-  $snackbar-color: rgb(var(--v-theme-on-primary)) !default,
-
-  // 👉 Tabs
-  $tabs-height: 40px !default,
-
-  // 👉 Slider
-  $slider-track-active-size: 4px !default,
-  $slider-thumb-label-padding: 4px 12px !default,
-  $slider-thumb-label-font-size: 0.875rem !default,
-
-  // 👉 Timeline
-  $timeline-dot-size: 34px !default,
-  $timeline-dot-divider-background: transparent !default,
-
-  // 👉 Overlay
-  $overlay-opacity: 0.5 !default,
-
-  // 👉 Navigation Drawer
-  $navigation-drawer-scrim-opacity:0.5 !default,
-
-  // 👉 Table
-  $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)),
-);
--- a/src/@core/scss/template/libs/vuetify/index.scss
+++ b/src/@core/scss/template/libs/vuetify/index.scss
@@ -1,2 +0,0 @@
-@use "variables";
-@use "overrides";
--- a/src/@core/scss/template/pages/misc.scss
+++ b/src/@core/scss/template/pages/misc.scss
@@ -1,25 +0,0 @@
-.layout-blank {
-  .misc-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 1.25rem;
-    overflow: hidden;
-
-    .misc-footer-img {
-      position: absolute;
-      inline-size: 100%;
-      inset-block-end: 0;
-    }
-
-    .misc-footer-tree {
-      position: absolute;
-      z-index: 1;
-    }
-  }
-
-  .misc-avatar {
-    z-index: 1;
-  }
-}
--- a/src/@core/scss/template/pages/page-auth.scss
+++ b/src/@core/scss/template/pages/page-auth.scss
@@ -1,54 +0,0 @@
-.layout-blank {
-  .auth-wrapper {
-    min-block-size: calc(var(--vh, 1vh) * 100);
-
-    .auth-footer-mask {
-      position: absolute;
-      inset-block-end: 0;
-      min-inline-size: 100%;
-    }
-
-    .auth-footer-start-tree,
-    .auth-footer-end-tree {
-      position: absolute;
-      z-index: 1;
-    }
-
-    .auth-footer-start-tree {
-      inset-block-end: 0;
-      inset-inline-start: 0;
-    }
-
-    .auth-footer-end-tree {
-      inset-block-end: 0;
-      inset-inline-end: 0;
-    }
-
-    .auth-illustration {
-      z-index: 1;
-    }
-  }
-
-  .auth-card {
-    z-index: 1 !important;
-  }
-}
-
-@media (min-width: 960px) {
-  .skin--bordered {
-    .auth-card-v2 {
-      border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-    }
-  }
-}
-
-.auth-logo {
-  position: absolute;
-  z-index: 1;
-  inset-block-start: 2rem;
-  inset-inline-start: 2.3rem;
-}
-
-.auth-card-v2 {
-  background-color: rgb(var(--v-theme-surface));
-}
--- a/src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss
+++ b/src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss
@@ -1,45 +0,0 @@
-@use "@configured-variables" as variables;
-@use "misc";
-@use "../mixins";
-
-%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
-  background-color: rgb(var(--v-theme-surface));
-}
-
-%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
-  // @include mixins.elevation(variables.$vertical-nav-navbar-elevation);
-
-  // If navbar is contained => Squeeze navbar content on scroll
-  @if variables.$layout-vertical-nav-navbar-is-contained {
-    padding-inline: 1rem;
-  }
-}
-
-%default-layout-vertical-nav-floating-navbar-overlay {
-  isolation: isolate;
-
-  &::after {
-    position: absolute;
-    z-index: -1;
-    /* stylelint-disable property-no-vendor-prefix */
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    /* stylelint-enable */
-    background:
-      linear-gradient(
-        180deg,
-        rgba(var(--v-theme-background), 70%) 44%,
-        rgba(var(--v-theme-background), 43%) 73%,
-        rgba(var(--v-theme-background), 0%)
-      );
-    background-repeat: repeat;
-    block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
-    content: "";
-    inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
-    inset-inline: 0;
-    /* stylelint-disable property-no-vendor-prefix */
-    -webkit-mask: linear-gradient(black, black 18%, transparent 100%);
-    mask: linear-gradient(black, black 18%, transparent 100%);
-    /* stylelint-enable */
-  }
-} 
--- a/src/@core/scss/template/placeholders/_default-layout.scss
+++ b/src/@core/scss/template/placeholders/_default-layout.scss
@@ -1,3 +0,0 @@
-%layout-navbar {
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-} 
--- a/src/@core/scss/template/placeholders/_index.scss
+++ b/src/@core/scss/template/placeholders/_index.scss
@@ -1,5 +0,0 @@
-@forward "nav";
-@forward "vertical-nav";
-@forward "default-layout";
-@forward "default-layout-vertical-nav";
-@forward "misc";
--- a/src/@core/scss/template/placeholders/_misc.scss
+++ b/src/@core/scss/template/placeholders/_misc.scss
@@ -1,72 +0,0 @@
-%blurry-bg {
-    position: relative;
-    background: transparent;
-    box-shadow: none;
-
-
-    .v-theme--light & {
-      backdrop-filter: blur(16px);
-      background: rgba(var(--v-theme-surface), 0.9);
-      box-shadow: 0 0 8px 0 rgba(var(--v-theme-on-surface), 0.1);
-    }
-    
-    &::before {
-      position: absolute;
-      z-index: -1;
-      block-size: calc(env(safe-area-inset-top, 0px) + 5rem);
-      content: "";
-      inset-block-start: 0;
-      inset-inline: 0;
-      pointer-events: none;
-      transition: all 0.2s ease-in-out;
-      
-      
-      .v-theme--dark & {
-        background: linear-gradient(
-          to bottom,
-          rgba(var(--v-theme-background), 1) 0%,
-          rgba(var(--v-theme-background), 0.8) 20%,
-          rgba(var(--v-theme-background), 0.6) 40%,
-          rgba(var(--v-theme-background), 0.4) 60%,
-          rgba(var(--v-theme-background), 0.2) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
-        );
-      }
-
-      .v-theme--purple & {
-        background: linear-gradient(
-          to bottom,
-          rgba(var(--v-theme-background), 1) 0%,
-          rgba(var(--v-theme-background), 0.8) 20%,
-          rgba(var(--v-theme-background), 0.6) 40%,
-          rgba(var(--v-theme-background), 0.4) 60%,
-          rgba(var(--v-theme-background), 0.2) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
-        );
-      }
-
-      .v-theme--transparent & {
-        background: linear-gradient(
-          to bottom,
-          rgba(var(--v-theme-background), 0.5) 0%,
-          rgba(var(--v-theme-background), 0.4) 20%,
-          rgba(var(--v-theme-background), 0.3) 40%,
-          rgba(var(--v-theme-background), 0.2) 60%,
-          rgba(var(--v-theme-background), 0.1) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
-        );
-
-        @media (width <= 640px) {
-          background: linear-gradient(
-          to bottom,
-          rgba(var(--v-theme-background), 0.9) 0%,
-          rgba(var(--v-theme-background), 0.7) 20%,
-          rgba(var(--v-theme-background), 0.5) 40%,
-          rgba(var(--v-theme-background), 0.3) 60%,
-          rgba(var(--v-theme-background), 0.1) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
-        );
-        }
-      }
-    }
-}
--- a/src/@core/scss/template/placeholders/_nav.scss
+++ b/src/@core/scss/template/placeholders/_nav.scss
@@ -1,8 +0,0 @@
-%nav-link-active {
-  background:
-    linear-gradient(
-      -72.47deg,
-      rgb(var(--v-theme-primary)) 22.16%,
-      rgba(var(--v-theme-primary), 0.7) 76.47%
-    ) !important;
-}
--- a/src/@core/scss/template/placeholders/_vertical-nav.scss
+++ b/src/@core/scss/template/placeholders/_vertical-nav.scss
@@ -1,64 +0,0 @@
-@use "@configured-variables" as variables;
-
-// ℹ️ Add divider around section title
-%vertical-nav-section-title {
-  /*
-    ℹ️ We will use this to add gap between divider and text.
-    Moreover, we will use this to adjust the `flex-basis` property of left divider
-  */
-  $divider-gap: 0.625rem;
-
-  // Thanks: https://stackoverflow.com/a/62359101/10796681
-  .title-text {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: flex-start;
-    column-gap: $divider-gap;
-
-    &::before,
-    &::after {
-      border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-      content: "";
-    }
-
-    &::after {
-      flex: 1 1 auto;
-    }
-
-    &::before {
-      flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
-      margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
-    }
-  }
-
-  // ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
-  @at-root {
-    .layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
-      margin-inline: 4px 0;
-    }
-  }
-}
-
-%vertical-nav-item-interactive {
-  // Add pill shape styles
-  block-size: 2.625rem !important;
-  border-end-end-radius: 3.125rem !important;
-  border-end-start-radius: 0 !important;
-  border-start-end-radius: 3.125rem !important;
-  border-start-start-radius: 0 !important;
-}
-
-%vertical-nav-item-interactive {
-  // ℹ️ Wobble effect
-  // transition: margin-inline 0.4s ease-in-out;
-  // will-change: margin-inline;
-
-  transition: margin-inline 0.15s ease-in-out;
-  will-change: margin-inline;
-
-  // Reduce margin inline end when vertical nav is in collapsed mode and not hovered
-  .layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) & {
-    margin-inline: 0 5px;
-  }
-}
--- a/src/@core/utils/image.ts
+++ b/src/@core/utils/image.ts
@@ -2,8 +2,7 @@ import ColorThief from 'colorthief'

 // 将 RGB 转换为十六进制
 function rgbStringToHex(rgbArray: number[]): string {
-  if (rgbArray.length !== 3 || rgbArray.some(isNaN))
-    throw new Error('Invalid RGB string format')
+  if (rgbArray.length !== 3 || rgbArray.some(isNaN)) throw new Error('Invalid RGB string format')

  const [r, g, b] = rgbArray

@@ -21,3 +20,27 @@ export async function getDominantColor(image: HTMLImageElement): Promise<string>
  const dominantColor = colorThief.getColor(image)
  return rgbStringToHex(dominantColor)
 }
+
+// 预加载图片
+export async function preloadImage(url: string): Promise<boolean> {
+  return new Promise(resolve => {
+    const img = new Image()
+
+    img.onload = () => resolve(true)
+    img.onerror = () => resolve(false)
+
+    // 设置超时，防止图片长时间加载
+    const timeout = setTimeout(() => {
+      img.src = ''
+      resolve(false)
+    }, 5000) // 5秒超时
+
+    img.src = url
+
+    // 如果图片已经缓存，onload可能不会触发
+    if (img.complete) {
+      clearTimeout(timeout)
+      resolve(true)
+    }
+  })
+}
--- a/src/@core/utils/index.ts
+++ b/src/@core/utils/index.ts
@@ -65,3 +65,6 @@ export function getQueryValue(key: string, url = window.location.href): string {
  const res = reg.exec(url)
  return res ? res[1] : ''
 }
+
+// 导出 navigator 相关函数
+export { isMobileDevice, isIOSDevice, isAndroidDevice } from './navigator'
--- a/src/@core/utils/navigator.ts
+++ b/src/@core/utils/navigator.ts
@@ -43,3 +43,56 @@ export const isPWA = async (): Promise<boolean> => {
  }
  return (window.navigator as any).standalone === true
 }
+
+// 同步检测PWA显示模式
+export const isPWADisplayMode = (): boolean => {
+  return (
+    window.matchMedia('(display-mode: standalone)').matches ||
+    (window.navigator as any).standalone ||
+    document.referrer.includes('android-app://')
+  )
+}
+
+// 全面的PWA检测（推荐使用）
+export const checkPWAStatus = async () => {
+  const hasServiceWorker = await isPWA()
+  const isStandaloneMode = isPWADisplayMode()
+
+  return {
+    // 是否有PWA功能（Service Worker）
+    hasPWAFeatures: hasServiceWorker,
+    // 是否在独立显示模式下运行
+    isStandaloneMode,
+    // 综合判断：更宽松的检测，在移动设备上默认启用PWA功能
+    isPWAEnvironment: hasServiceWorker || isStandaloneMode || isMobileDevice(),
+    // 完整的PWA体验：既有功能又在独立模式下运行
+    isFullPWA: hasServiceWorker && isStandaloneMode,
+  }
+}
+
+// 检测是否为移动设备
+export const isMobileDevice = (): boolean => {
+  // 检查用户代理字符串
+  const userAgent = navigator.userAgent || ''
+  const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i
+
+  // 检查触摸屏支持
+  const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0
+
+  // 检查屏幕尺寸（小于768px认为是移动设备）
+  const isMobileSize = window.innerWidth < 768
+
+  return mobileRegex.test(userAgent) || hasTouchScreen || isMobileSize
+}
+
+// 检测是否为iOS设备
+export const isIOSDevice = (): boolean => {
+  const userAgent = navigator.userAgent.toLowerCase()
+  return /iphone|ipad|ipod/.test(userAgent) && !(window as any).MSStream
+}
+
+// 检测是否为Android设备
+export const isAndroidDevice = (): boolean => {
+  const userAgent = navigator.userAgent.toLowerCase()
+  return /android/.test(userAgent)
+}
--- a/src/@layouts/components/VerticalNavLayout.vue
+++ b/src/@layouts/components/VerticalNavLayout.vue
@@ -38,15 +38,25 @@ export default defineComponent({
      )

      // 👉 Navbar
-      const navbar = h('header', { class: ['layout-navbar navbar-blur'] }, [
-        h(
-          'div',
-          { class: 'navbar-content-container' },
-          slots.navbar?.({
-            toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
-          }),
-        ),
-      ])
+      const navbar = h(
+        'header',
+        { class: ['layout-navbar navbar-blur'] },
+        [
+          h(
+            'div',
+            { class: 'navbar-content-container' },
+            [
+              slots.navbar?.({
+                toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
+              }),
+              // 👉 Dynamic Header Tab in NavBar
+              slots['dynamic-header-tab']?.()
+                ? h('div', { class: 'layout-dynamic-header-tab' }, slots['dynamic-header-tab']?.())
+                : null,
+            ].filter(Boolean),
+          ),
+        ].filter(Boolean),
+      )

      const main = h(
        'main',
@@ -78,6 +88,9 @@ export default defineComponent({
        },
      })

+      // 检查是否有弹窗打开（通过CSS类名判断）
+      const isDialogOpen = document.documentElement.classList.contains('dialog-scroll-locked')
+
      return h(
        'div',
        {
@@ -86,7 +99,7 @@ export default defineComponent({
            'layout-navbar-fixed',
            mdAndDown.value && 'layout-overlay-nav',
            route.meta.layoutWrapperClasses,
-            scrollDistance.value && 'window-scrolled',
+            (scrollDistance.value || isDialogOpen) && 'window-scrolled',
          ],
        },
        [verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay],
@@ -127,7 +140,9 @@ export default defineComponent({
    inset-block-start: 0;

    .navbar-content-container {
-      block-size: calc(env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height);
+      block-size: calc(
+        env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height + var(--navbar-tab-height)
+      );
    }

    @at-root {
@@ -135,10 +150,6 @@ export default defineComponent({
        .layout-navbar {
          @if variables.$layout-vertical-nav-navbar-is-contained {
            @include mixins.boxed-content;
-          } @else {
-            .navbar-content-container {
-              // @include mixins.boxed-content;
-            }
          }
        }
      }
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,10 +3,15 @@ import { useTheme } from 'vuetify'
 import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
 import { ensureRenderComplete, removeEl } from './@core/utils/dom'
 import api from '@/api'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore, useGlobalSettingsStore } from '@/stores'
 import { getBrowserLocale, setI18nLanguage } from './plugins/i18n'
 import { SupportedLocale } from '@/types/i18n'
 import { checkAndEmitUnreadMessages } from '@/utils/badge'
+import { preloadImage } from './@core/utils/image'
+import { globalLoadingStateManager } from '@/utils/loadingStateManager'
+import { addBackgroundTimer, removeBackgroundTimer } from '@/utils/backgroundManager'
+import PWAInstallPrompt from '@/components/PWAInstallPrompt.vue'
+import { themeManager } from '@/utils/themeManager'

 // 生效主题
 const { global: globalTheme } = useTheme()
@@ -18,13 +23,13 @@ globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
 const localeValue = getBrowserLocale()
 setI18nLanguage(localeValue as SupportedLocale)

-// 显示状态
-const show = ref(false)
-
 // 检查是否登录
 const authStore = useAuthStore()
 const isLogin = computed(() => authStore.token)

+// 全局设置store
+const globalSettingsStore = useGlobalSettingsStore()
+
 // 生成背景图片key
 const loginStateKey = computed(() => (isLogin.value ? 'logged-in' : 'logged-out'))

@@ -32,7 +37,6 @@ const loginStateKey = computed(() => (isLogin.value ? 'logged-in' : 'logged-out'
 const backgroundImages = ref<string[]>([])
 const activeImageIndex = ref(0)
 const isTransparentTheme = computed(() => globalTheme.name.value === 'transparent')
-let backgroundRotationTimer: NodeJS.Timeout | null = null

 // ApexCharts 全局配置
 declare global {
@@ -41,182 +45,200 @@ declare global {
  }
 }

-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))',
-    },
+// 配置 ApexCharts 全局选项
+function configureApexCharts() {
+  if (typeof window !== 'undefined' && window.Apex) {
+    try {
+      // 获取当前主题
+      const currentTheme = globalTheme.name.value
+      const isDark = currentTheme === 'dark' || currentTheme === 'transparent'
+
+      // 数据标签
+      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))',
+        },
+      }
+      // 鼠标悬浮提示
+      window.Apex.tooltip = {
+        theme: isDark ? 'dark' : 'light',
+      }
+    } catch (error) {
+      console.warn('ApexCharts 全局配置失败:', error)
+    }
  }
 }

 // 更新data-theme属性以便CSS选择器能正确匹配
 function updateHtmlThemeAttribute(themeName: string) {
  document.documentElement.setAttribute('data-theme', themeName)
-  // 确保body元素也有相同的主题属性，以便更好地选择弹出窗口
  document.body.setAttribute('data-theme', themeName)
 }

 // 获取背景图片
 async function fetchBackgroundImages() {
  try {
-    backgroundImages.value = await api.get(`/login/wallpapers`)
+    const controller = new AbortController()
+    backgroundImages.value = await api.get(`/login/wallpapers`, {
+      signal: controller.signal,
+    })
    activeImageIndex.value = 0
  } catch (e) {
-    console.error(e)
+    throw e
+  }
+}
+
+// 背景图片轮换函数
+function rotateBackgroundImage() {
+  if (backgroundImages.value.length > 1) {
+    // 计算下一个图片索引
+    const nextIndex = (activeImageIndex.value + 1) % backgroundImages.value.length
+    // 预加载下一张图片
+    preloadImage(backgroundImages.value[nextIndex]).then(success => {
+      // 只有图片成功加载才切换
+      if (success) {
+        activeImageIndex.value = nextIndex
+      }
+    })
  }
 }

 // 开始背景图片轮换
 function startBackgroundRotation() {
-  // 清除轮换定时器
-  if (backgroundRotationTimer) clearInterval(backgroundRotationTimer)
+  // 清除现有定时器
+  removeBackgroundTimer('background-rotation')

  if (backgroundImages.value.length > 1) {
-    backgroundRotationTimer = setInterval(() => {
-      // 计算下一个图片索引
-      const nextIndex = (activeImageIndex.value + 1) % backgroundImages.value.length
-      // 预加载下一张图片
-      preloadImage(backgroundImages.value[nextIndex]).then(success => {
-        // 只有图片成功加载才切换
-        if (success) {
-          activeImageIndex.value = nextIndex
-        }
-      })
-    }, 10000) // 每10秒切换一次
+    // 使用优化的定时器管理器，后台时自动暂停
+    addBackgroundTimer(
+      'background-rotation',
+      rotateBackgroundImage,
+      10000, // 每10秒切换一次
+      {
+        runInBackground: false, // 后台时不运行
+        skipInitialRun: true, // 不需要立即执行
+      },
+    )
  }
 }

-// 预加载图片
-function preloadImage(url: string): Promise<boolean> {
-  return new Promise(resolve => {
-    const img = new Image()
-
-    img.onload = () => resolve(true)
-    img.onerror = () => resolve(false)
-
-    // 设置超时，防止图片长时间加载
-    const timeout = setTimeout(() => {
-      img.src = ''
-      resolve(false)
-    }, 5000) // 5秒超时
-
-    img.src = url
-
-    // 如果图片已经缓存，onload可能不会触发
-    if (img.complete) {
-      clearTimeout(timeout)
-      resolve(true)
-    }
-  })
-}
-
 // 添加logo动画效果并延迟移除加载界面
 function animateAndRemoveLoader() {
  const loadingBg = document.querySelector('#loading-bg') as HTMLElement
  if (loadingBg) {
-    // 先添加完成动画类
-    loadingBg.classList.add('loading-complete')
+    removeEl('#loading-bg')
+    document.documentElement.style.removeProperty('background')
+  }
+}

-    // 等待动画完成后再移除元素
-    setTimeout(() => {
-      removeEl('#loading-bg')
-      // 将background属性从html的style中移除
-      document.documentElement.style.removeProperty('background')
-      // 显示页面
-      show.value = true
-    }, 500) // 与CSS动画持续时间匹配
+// 检查PWA状态并移除加载界面
+async function removeLoadingWithStateCheck() {
+  try {
+    // 设置各个组件的加载状态
+    globalLoadingStateManager.setLoadingState('pwa-state', true)
+    globalLoadingStateManager.setLoadingState('global-settings', true)
+    globalLoadingStateManager.setLoadingState('background-images', true)
+
+    // 静默检查PWA状态恢复
+    const pwaController = (window as any).pwaStateController
+    if (pwaController) {
+      await pwaController.waitForStateRestore()
+    }
+    globalLoadingStateManager.setLoadingState('pwa-state', false)
+
+    // 并行加载关键资源
+    await Promise.all([
+      globalSettingsStore.initialize().then(() => {
+        globalLoadingStateManager.setLoadingState('global-settings', false)
+      }),
+      new Promise(resolve => {
+        setTimeout(() => {
+          globalLoadingStateManager.setLoadingState('background-images', false)
+          resolve(void 0)
+        }, 50)
+      }),
+    ])
+
+    // 等待所有加载完成
+    await globalLoadingStateManager.waitForAllComplete()
+
+    // 移除加载界面
+    animateAndRemoveLoader()
+
+    // 检查未读消息
+    checkAndEmitUnreadMessages()
+  } catch (error) {
+    // 即使出错也要移除加载界面
+    globalLoadingStateManager.reset()
+    animateAndRemoveLoader()
  }
 }

 // 加载背景图片
-async function loadBackgroundImages() {
-  await fetchBackgroundImages()
-    .then(() => {
-      startBackgroundRotation()
-    })
-    .catch(() => {
-      // 3秒后重试
+async function loadBackgroundImages(retryCount = 0) {
+  const maxRetries = 3
+  try {
+    await fetchBackgroundImages()
+    startBackgroundRotation()
+  } catch (error: any) {
+    const isAbortError = error.name === 'AbortError' || error.code === 'ERR_CANCELED'
+    if (retryCount < maxRetries) {
+      const baseDelay = isAbortError ? 1000 : 3000
+      const retryDelay = Math.min(baseDelay * Math.pow(2, retryCount), 10000)
      setTimeout(() => {
-        loadBackgroundImages()
-      }, 3000)
-    })
+        loadBackgroundImages(retryCount + 1)
+      }, retryDelay)
+    }
+  }
 }

 onMounted(async () => {
+  // 配置 ApexCharts
+  configureApexCharts()
+
  // 初始化data-theme属性
  updateHtmlThemeAttribute(globalTheme.name.value)

-  // 默认隐藏页面
-  show.value = false
+  // 初始化主题管理器 - 统一处理主题初始化
+  await themeManager.setTheme(themeValue)
+
+  // 监听主题变化
+  watch(
+    () => globalTheme.name.value,
+    newTheme => {
+      // 更新HTML主题属性
+      updateHtmlThemeAttribute(newTheme)
+      // 重新配置ApexCharts以适应新主题
+      configureApexCharts()
+    },
+  )

  // 加载背景图片
-  await loadBackgroundImages()
+  loadBackgroundImages()

-  // 移除加载动画
+  // 使用优化后的加载界面移除逻辑
  ensureRenderComplete(() => {
-    nextTick(() => {
-      setTimeout(() => {
-        // 移除加载动画，显示页面
-        animateAndRemoveLoader()
-
-        // 页面完全显示后，检查未读消息
-        setTimeout(() => {
-          checkAndEmitUnreadMessages()
-        }, 1000)
-      }, 1500)
-    })
-  })
-
-  // 添加页面可见性变化监听
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') {
-      loadBackgroundImages()
-      // 页面恢复可见时检查未读消息
-      setTimeout(() => {
-        checkAndEmitUnreadMessages()
-      }, 500)
-    }
-  })
-
-  // 添加PWA的页面恢复事件监听
-  window.addEventListener('pageshow', event => {
-    // persisted属性为true表示页面是从bfcache中恢复的
-    if (event.persisted) {
-      loadBackgroundImages()
-      // PWA恢复时检查未读消息
-      setTimeout(() => {
-        checkAndEmitUnreadMessages()
-      }, 500)
-    }
+    nextTick(removeLoadingWithStateCheck)
  })
 })

 onUnmounted(() => {
-  // 移除页面可见性监听
-  document.removeEventListener('visibilitychange', () => {})
-  // 移除PWA的页面恢复事件监听
-  window.removeEventListener('pageshow', () => {})
-
-  // 清除轮换定时器
-  if (backgroundRotationTimer) {
-    clearInterval(backgroundRotationTimer)
-    backgroundRotationTimer = null
-  }
+  // 清除背景轮换定时器
+  removeBackgroundTimer('background-rotation')
 })
 </script>

@@ -230,13 +252,15 @@ onUnmounted(() => {
        class="background-image"
        :class="{ 'active': index === activeImageIndex }"
        :style="{ 'backgroundImage': `url(${imageUrl})` }"
-      ></div>
+      />
      <!-- 全局磨砂层 -->
      <div v-if="isLogin && isTransparentTheme" class="global-blur-layer"></div>
    </div>
    <!-- 页面内容 -->
-    <VApp v-show="show" :class="{ 'transparent-app': isTransparentTheme }">
+    <VApp>
      <RouterView />
+      <!-- PWA安装提示 -->
+      <PWAInstallPrompt />
    </VApp>
  </div>
 </template>
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -26,6 +26,11 @@ export const storageAttributes = [
    icon: 'mdi-server-network-outline',
    remote: true,
  },
+  {
+    type: 'smb',
+    icon: 'mdi-folder-network-outline',
+    remote: true,
+  },
 ]

 export const storageIconDict = storageAttributes.reduce((dict, item) => {
@@ -339,6 +344,10 @@ export const actionStepOptions = [
    title: i18n.global.t('actionStep.invokePlugin'),
    value: '调用插件',
  },
+  {
+    title: i18n.global.t('actionStep.note'),
+    value: '备注',
+  },
 ]

 // 操作步骤字典
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,6 +1,8 @@
 import axios from 'axios'
 import router from '@/router'
 import { useAuthStore } from '@/stores'
+import { initializeRequestOptimizer } from '@/utils/requestOptimizer'
+import { useGlobalOfflineStatus } from '@/composables/useOfflineStatus'

 // 创建axios实例
 const api = axios.create({
@@ -17,6 +19,9 @@ declare global {
 // 将 API 实例暴露到全局，供插件使用
 window.MoviePilotAPI = api

+// 初始化请求优化器（必须在其他拦截器之前）
+initializeRequestOptimizer(api)
+
 // 添加请求拦截器
 api.interceptors.request.use(config => {
  // 认证 Store
@@ -28,15 +33,47 @@ api.interceptors.request.use(config => {
  return config
 })

+// 离线状态管理
+const globalOfflineStatus = useGlobalOfflineStatus()
+
 // 添加响应拦截器
 api.interceptors.response.use(
  response => {
+    // 成功响应时，清除应用离线状态并重置连续错误计数
+    globalOfflineStatus.setAppOffline(false)
+    globalOfflineStatus.resetConsecutiveErrors()
    return response.data
  },
  error => {
    if (!error.response) {
-      // 请求超时
-      return Promise.reject(new Error(error))
+      // 网络错误或请求超时 - 通知离线状态管理系统
+      const isNetworkError =
+        error.code === 'NETWORK_ERROR' ||
+        error.code === 'ERR_NETWORK' ||
+        error.code === 'ECONNABORTED' ||
+        error.name === 'NetworkError'
+
+      if (isNetworkError) {
+        let reason = 'Network connection failed'
+        if (error.code === 'ECONNABORTED') {
+          reason = 'Request timeout'
+        }
+        // 记录网络错误，只有连续三次才会设置为离线模式
+        globalOfflineStatus.recordNetworkError(reason)
+      }
+
+      if (error.code === 'NETWORK_ERROR' || error.code === 'ERR_NETWORK') {
+        // 网络连接问题
+        return Promise.reject(new Error('Network connection failed, please check your network status'))
+      } else if (error.code === 'ECONNABORTED') {
+        // 请求超时
+        return Promise.reject(new Error('Request timeout, please try again later'))
+      } else if (error.name === 'AbortError') {
+        // 请求被中止（路由切换等）
+        return Promise.reject(new Error('Request cancelled'))
+      }
+      // 其他网络错误
+      return Promise.reject(new Error(error.message || 'Network error'))
    } else if (error.response.status === 403) {
      // 认证 Store
      const authStore = useAuthStore()
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -144,6 +144,42 @@ export interface SubscribeShare {
  episode_group?: string
 }

+// 工作流分享
+export interface WorkflowShare {
+  // 分享ID
+  id?: string
+  // 工作流ID
+  workflow_id?: string
+  // 分享标题
+  share_title?: string
+  // 分享说明
+  share_comment?: string
+  // 分享人
+  share_user?: string
+  // 分享人唯一ID
+  share_uid?: string
+  // 工作流名称
+  name?: string
+  // 工作流描述
+  description?: string
+  // 定时器
+  timer?: string
+  // 触发类型：timer-定时触发 event-事件触发 manual-手动触发
+  trigger_type?: string
+  // 事件类型（当trigger_type为event时使用）
+  event_type?: string
+  // 动作列表
+  actions?: any[]
+  // 动作流
+  flows?: any[]
+  // 上下文
+  context?: string
+  // 时间
+  date?: string
+  // 复用次数
+  count?: number
+}
+
 // 历史记录
 export interface TransferHistory {
  // ID
@@ -769,6 +805,8 @@ export interface MetaInfo {
  audio_term: string
  // 资源类型+特效
  edition: string
+  // 流媒体平台
+  web_source: string
  // 应用的自定义识别词
  apply_words: string[]
 }
@@ -952,6 +990,8 @@ export interface MediaServerPlayItem {
  link?: string
  // 播放百分比
  percent?: number
+  // 媒体服务器类型
+  server_type?: string
 }

 // 媒体服务器媒体库
@@ -972,6 +1012,8 @@ export interface MediaServerLibrary {
  image_list?: string[]
  // 链接
  link?: string
+  // 媒体服务器类型
+  server_type?: string
 }

 // 消息通知
@@ -1290,6 +1332,10 @@ export interface Workflow {
  description?: string
  // 定时器
  timer?: string
+  // 触发类型：timer-定时触发 event-事件触发 manual-手动触发
+  trigger_type?: string
+  // 事件类型（当trigger_type为event时使用）
+  event_type?: string
  // 状态
  state?: string
  // 当前执行动作
@@ -1353,3 +1399,13 @@ export interface TorrentCacheData {
  // 缓存数据
  data: TorrentCacheItem[]
 }
+
+// 订阅分享统计
+export interface SubscribeShareStatistics {
+  // 分享人
+  share_user?: string
+  // 分享数量
+  share_count?: number
+  // 总复用人次
+  total_reuse_count?: number
+}
--- a/src/assets/images/misc/openlist.svg
+++ b/src/assets/images/misc/openlist.svg
--- a/src/assets/images/misc/smb.png
+++ b/src/assets/images/misc/smb.png
--- a/src/assets/images/pages/404.svg
+++ b/src/assets/images/pages/404.svg
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -3,7 +3,6 @@ import FileList from './filebrowser/FileList.vue'
 import FileToolbar from './filebrowser/FileToolbar.vue'
 import FileNavigator from './filebrowser/FileNavigator.vue'
 import type { EndPoints, FileItem, StorageConf } from '@/api/types'
-import { useDisplay } from 'vuetify'
 import { storageIconDict } from '@/api/constants'

 // 输入参数
@@ -29,12 +28,6 @@ const props = defineProps({
 // 对外事件
 const emit = defineEmits(['pathchanged'])

-// 显示器宽度
-const display = useDisplay()
-
-// APP
-const appMode = inject('pwaMode') && display.mdAndDown.value
-
 const fileIcons = {
  // 压缩包
  zip: 'mdi-folder-zip-outline',
@@ -238,20 +231,6 @@ function stopDrag() {
  ;(document.body.style as any).webkitUserSelect = ''
  ;(document.body.style as any).mozUserSelect = ''
 }
-
-// 外层DIV大小控制
-const scrollStyle = computed(() => {
-  return appMode
-    ? 'height: calc(100vh - 10.5rem - env(safe-area-inset-bottom) - 7rem)'
-    : 'height: calc(100vh - 10.5rem - env(safe-area-inset-bottom)'
-})
-
-// 文件列表大小限制
-const fileListStyle = computed(() => {
-  return appMode
-    ? 'height: calc(100vh - 14rem - env(safe-area-inset-bottom) - 7rem)'
-    : 'height: calc(100vh - 14rem - env(safe-area-inset-bottom)'
-})
 </script>

 <template>
@@ -269,7 +248,7 @@ const fileListStyle = computed(() => {
        @foldercreated="refreshPending = true"
        @sortchanged="sortChanged"
      />
-      <div class="flex" :style="scrollStyle">
+      <div class="flex">
        <FileNavigator
          v-if="showDirTree"
          :storage="activeStorage"
@@ -293,7 +272,6 @@ const fileListStyle = computed(() => {
          :axios="axios"
          :refreshpending="refreshPending"
          :sort="sort"
-          :listStyle="fileListStyle"
          :showTree="showDirTree"
          :style="{ flex: 1 }"
          @pathchanged="pathChanged"
--- a/src/components/NoDataFound.vue
+++ b/src/components/NoDataFound.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import page404 from '@images/pages/404.svg'

 // 国际化
 const { t } = useI18n()
@@ -19,16 +20,7 @@ interface Props {
  <div class="no-data-container">
    <!-- 图标容器 -->
    <div class="icon-wrapper">
-      <div class="icon-glow"></div>
-      <div class="icon-container">
-        <VIcon
-          :icon="props.icon || 'mdi-file-search-outline'"
-          :color="props.iconColor || 'white'"
-          size="48"
-          class="main-icon"
-        />
-      </div>
-      <div class="pulse-ring"></div>
+      <img :src="page404" alt="404" />
    </div>

    <!-- 标题 -->
@@ -57,8 +49,7 @@ interface Props {
  justify-content: center;
  inline-size: 100%;
  min-block-size: 300px;
-  padding-block: 3rem;
-  padding-inline: 1rem;
+  padding-block-start: 3rem;
  text-align: center;
 }

@@ -68,109 +59,17 @@ interface Props {
  display: flex;
  align-items: center;
  justify-content: center;
-  block-size: 100px;
-  inline-size: 100px;
-  margin-block: 0 2rem;
+  inline-size: 15rem;
+  margin-block: 0 1rem;
  margin-inline: auto;
 }

-.icon-glow {
-  position: absolute;
-  border-radius: 50%;
-  animation: pulse 3s infinite ease-in-out;
-  background: radial-gradient(circle, rgba(var(--v-theme-primary), 0.8) 0%, rgba(var(--v-theme-primary), 0) 70%);
-  block-size: 80px;
-  filter: blur(15px);
-  inline-size: 80px;
-  opacity: 0.8;
-}
-
-.icon-container {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.9), rgba(var(--v-theme-secondary), 0.8));
-  block-size: 80px;
-  inline-size: 80px;
-}
-
-.main-icon {
-  animation: slight-bounce 3s infinite ease-in-out;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 30%));
-}
-
-.pulse-ring {
-  position: absolute;
-  z-index: 1;
-  border: 2px solid rgba(var(--v-theme-primary), 0.5);
-  border-radius: 50%;
-  animation: ripple 2s infinite ease-out;
-  block-size: 100px;
-  inline-size: 100px;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  opacity: 0;
-  transform: translate(-50%, -50%);
-}
-
-.pulse-ring::before {
-  position: absolute;
-  border: 2px solid rgba(var(--v-theme-primary), 0.3);
-  border-radius: 50%;
-  animation: ripple 2s infinite 0.5s ease-out;
-  block-size: 85px;
-  content: '';
-  inline-size: 85px;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
-}
-
-@keyframes ripple {
-  0% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(0.9);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(1.5);
-  }
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 0.5;
-    transform: scale(0.8);
-  }
-
-  50% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-}
-
-@keyframes slight-bounce {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
 /* 文字样式 */
 .error-title {
  position: relative;
  color: rgba(var(--v-theme-on-surface), 0.95);
-  font-size: 1.75rem;
-  font-weight: 700;
+  font-size: 1.5rem;
+  font-weight: 500;
  margin-block-end: 0.75rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 5%);
 }
@@ -181,69 +80,15 @@ interface Props {
  background: linear-gradient(90deg, rgba(var(--v-theme-primary), 0.8), rgba(var(--v-theme-primary), 0.2));
  block-size: 3px;
  content: '';
-  inline-size: 40px;
-  margin-block: 0.5rem 0;
+  inline-size: 60px;
  margin-inline: auto;
 }

 .error-description {
  color: rgba(var(--v-theme-on-surface), 0.75);
-  font-size: 1.1rem;
-  line-height: 1.6;
-  margin-block-end: 1.5rem;
+  font-size: 1rem;
+  margin-block-end: 1rem;
  margin-inline: auto;
  max-inline-size: 80%;
 }
-
-.actions-container {
-  margin-block-start: 1.5rem;
-}
-
-.actions-container :deep(.v-btn) {
-  transform: translateY(0);
-  transition: transform 0.2s ease;
-}
-
-.actions-container :deep(.v-btn:hover) {
-  transform: translateY(-2px);
-}
-
-/* 响应式调整 */
-@media (width <= 600px) {
-  .no-data-container {
-    padding-block: 2rem;
-    padding-inline: 1rem;
-  }
-
-  .icon-wrapper {
-    block-size: 80px;
-    inline-size: 80px;
-    margin-block-end: 1.5rem;
-  }
-
-  .icon-container {
-    block-size: 70px;
-    inline-size: 70px;
-  }
-
-  .icon-glow {
-    block-size: 70px;
-    inline-size: 70px;
-  }
-
-  .pulse-ring,
-  .pulse-ring::before {
-    block-size: 80px;
-    inline-size: 80px;
-  }
-
-  .error-title {
-    font-size: 1.4rem;
-  }
-
-  .error-description {
-    font-size: 0.95rem;
-    max-inline-size: 90%;
-  }
-}
 </style>
--- a/src/components/PWAInstallPrompt.vue
+++ b/src/components/PWAInstallPrompt.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { usePWAInstall } from '@/composables/usePWAInstall'
+import { useAuthStore } from '@/stores'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toastification'
+
+const { t, locale, messages } = useI18n()
+const { isInstalled, showInstallPrompt, getInstallInstructions } = usePWAInstall()
+
+const showBanner = ref(false)
+const showInstructions = ref(false)
+const dismissed = ref(false)
+
+// 检查是否登录
+const authStore = useAuthStore()
+const isLogin = computed(() => authStore.token)
+
+// 检查当前是不是https环境
+const isHttps = computed(() => {
+  return window.location.protocol === 'https:'
+})
+
+// 检查是否应该显示横幅
+const shouldShowBanner = computed(() => {
+  return !isInstalled.value && !dismissed.value && !showInstructions.value && isLogin.value && isHttps.value
+})
+
+// 显示延迟（避免立即显示）
+onMounted(() => {
+  setTimeout(() => {
+    // 检查本地存储，看用户是否已经关闭过提示
+    const dismissedTime = localStorage.getItem('pwa-install-dismissed')
+    if (dismissedTime) {
+      const dismissedDate = new Date(dismissedTime)
+      const now = new Date()
+      const daysDiff = (now.getTime() - dismissedDate.getTime()) / (1000 * 60 * 60 * 24)
+
+      // 如果距离上次关闭不到30天，不显示
+      if (daysDiff < 30) {
+        dismissed.value = true
+        return
+      }
+    }
+
+    showBanner.value = true
+  }, 5000) // 5秒后显示
+})
+
+// 处理安装
+const handleInstall = async () => {
+  const installed = await showInstallPrompt()
+  if (installed) {
+    showBanner.value = false
+    // 显示成功消息
+    useToast().success(t('pwa.installSuccess'))
+  } else {
+    // 如果用户拒绝，显示手动安装说明
+    showInstructions.value = true
+  }
+}
+
+// 关闭横幅
+const dismissBanner = () => {
+  showBanner.value = false
+  dismissed.value = true
+  // 记录关闭时间
+  localStorage.setItem('pwa-install-dismissed', new Date().toISOString())
+}
+
+// 获取平台特定的安装说明
+const instructions = computed(() => {
+  const rawInstructions = getInstallInstructions()
+  const platformKey = rawInstructions.platformKey
+
+  // 获取平台显示名称
+  const platformName = t(`pwa.platforms.${platformKey}`)
+
+  // 直接使用t函数获取安装步骤，避免编译对象的问题
+  const steps = []
+  const maxSteps = 10 // 最大步骤数，防止无限循环
+
+  for (let i = 0; i < maxSteps; i++) {
+    try {
+      const stepKey = `pwa.installSteps.${platformKey}.${i}`
+      const stepText = t(stepKey)
+
+      // 如果返回的是键名本身，说明没有找到对应的翻译
+      if (stepText === stepKey) {
+        break
+      }
+
+      steps.push(stepText)
+    } catch (error) {
+      // 如果出现错误，说明没有更多步骤
+      break
+    }
+  }
+
+  return {
+    platform: platformName,
+    steps,
+  }
+})
+</script>
+
+<template>
+  <!-- 安装横幅 -->
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-all duration-300"
+      enter-from-class="translate-y-full opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition-all duration-300"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-full opacity-0"
+    >
+      <VCard v-if="shouldShowBanner && showBanner" class="pwa-install-banner">
+        <div class="banner-content">
+          <VIcon icon="mdi-cellphone-link" size="24" class="me-3" />
+          <div class="flex-grow-1">
+            <div class="font-weight-medium">{{ t('pwa.installApp') }}</div>
+            <div class="text-sm opacity-70">{{ t('pwa.installDescription') }}</div>
+          </div>
+          <VBtn color="primary" size="small" variant="flat" @click="handleInstall">
+            {{ t('pwa.install') }}
+          </VBtn>
+          <VBtn icon size="small" variant="text" @click="dismissBanner">
+            <VIcon icon="mdi-close" />
+          </VBtn>
+        </div>
+      </VCard>
+    </Transition>
+  </Teleport>
+
+  <!-- 手动安装说明对话框 -->
+  <DialogWrapper v-model="showInstructions" max-width="500">
+    <VCard>
+      <VCardItem>
+        <VCardTitle class="d-flex align-center">
+          <VIcon icon="mdi-information-outline" class="me-2" />
+          {{ t('pwa.installGuide') }}
+        </VCardTitle>
+      </VCardItem>
+
+      <VCardText>
+        <div class="mb-4">
+          <div class="text-subtitle-1 mb-2">
+            {{ t('pwa.installInstructions', { platform: instructions.platform }) }}
+          </div>
+          <VList density="compact">
+            <VListItem
+              v-for="(step, index) in instructions.steps"
+              :key="index"
+              :prepend-icon="`mdi-numeric-${index + 1}-circle`"
+            >
+              <VListItemTitle>{{ step }}</VListItemTitle>
+            </VListItem>
+          </VList>
+        </div>
+
+        <VAlert type="info" variant="tonal" density="compact">
+          {{ t('pwa.installNote') }}
+        </VAlert>
+      </VCardText>
+
+      <VCardActions>
+        <VSpacer />
+        <VBtn color="primary" variant="text" @click="showInstructions = false">
+          {{ t('pwa.gotIt') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </DialogWrapper>
+</template>
+
+<style scoped>
+.pwa-install-banner {
+  position: fixed;
+  z-index: 1000;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 12px;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 10%);
+  inset-block-end: 5rem;
+  inset-inline: 20px;
+}
+
+.banner-content {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  gap: 8px;
+}
+
+@media (width >= 600px) {
+  .pwa-install-banner {
+    inset-inline: auto 20px;
+    max-inline-size: 400px;
+  }
+}
+</style>
--- a/src/components/cards/BackdropCard.vue
+++ b/src/components/cards/BackdropCard.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { MediaServerPlayItem } from '@/api/types'
+import { openMediaServerWithAutoDetect } from '@/utils/appDeepLink'
 // 输入参数
 const props = defineProps({
  media: Object as PropType<MediaServerPlayItem>,
@@ -16,8 +17,10 @@ function imageLoadHandler() {
 }

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

 // 计算图片地址
@@ -48,16 +51,18 @@ const getImgUrl = computed(() => {
                <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
              </div>
            </template>
-            <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 ..."
+            <template #default>
+              <VCardText
+                class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
              >
-                {{ props.media?.title }}
-              </h1>
-              <span class="text-shadow">{{ props.media?.subtitle }}</span>
-            </VCardText>
+                <h1
+                  class="mb-1 text-white text-shadow font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ..."
+                >
+                  {{ props.media?.title }}
+                </h1>
+                <span class="text-shadow text-sm">{{ props.media?.subtitle }}</span>
+              </VCardText>
+            </template>
          </VImg>
        </template>
        <div class="w-full absolute bottom-0">
--- a/src/components/cards/CustomRuleCard.vue
+++ b/src/components/cards/CustomRuleCard.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CustomRule } from '@/api/types'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import filter_svg from '@images/svg/filter.svg'
 import { cloneDeep } from 'lodash-es'
 import { innerFilterRules } from '@/api/constants'
@@ -87,6 +87,12 @@ function saveRuleInfo() {
  emit('done')
 }

+// 验证规则ID输入
+function validateRuleId() {
+  // 只允许英文和数字，不允许空格
+  ruleInfo.value.id = ruleInfo.value.id.replace(/[^a-zA-Z0-9]/g, '')
+}
+
 // 按钮点击
 function onClose() {
  emit('close')
@@ -110,7 +116,7 @@ function onClose() {
        <VImg :src="filter_svg" cover class="mt-7" max-width="3rem" />
      </VCardText>
    </VCard>
-    <VDialog
+    <DialogWrapper
      v-if="ruleInfoDialog"
      v-model="ruleInfoDialog"
      scrollable
@@ -138,6 +144,7 @@ function onClose() {
                  persistent-hint
                  active
                  prepend-inner-icon="mdi-identifier"
+                  @input="validateRuleId"
                />
              </VCol>
              <VCol cols="12" md="6">
@@ -215,6 +222,6 @@ function onClose() {
          }}</VBtn>
        </VCardActions>
      </VCard>
-    </VDialog>
+    </DialogWrapper>
  </div>
 </template>
--- a/src/components/cards/DownloaderCard.vue
+++ b/src/components/cards/DownloaderCard.vue
@@ -2,7 +2,7 @@
 import api from '@/api'
 import { formatFileSize } from '@/@core/utils/formatters'
 import { DownloaderConf } from '@/api/types'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import type { DownloaderInfo } from '@/api/types'
 import qbittorrent_image from '@images/logos/qbittorrent.png'
 import transmission_image from '@images/logos/transmission.png'
@@ -11,12 +11,14 @@ import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { downloaderDict } from '@/api/constants'
 import { useDisplay } from 'vuetify'
+import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'

 // 显示器宽度
 const display = useDisplay()

 // 获取i18n实例
 const { t } = useI18n()
+const { useConditionalDataRefresh } = useBackgroundOptimization()

 // 定义输入
 const props = defineProps({
@@ -43,9 +45,6 @@ const emit = defineEmits(['close', 'done', 'change'])
 // 提示框
 const $toast = useToast()

-// timeout定时器
-let timeoutTimer: NodeJS.Timeout | undefined = undefined
-
 // 上传速率
 const upload_rate = ref(0)

@@ -64,9 +63,15 @@ const downloaderInfo = ref<DownloaderConf>({
  config: {},
 })

+// 下载器是否应该刷新数据的计算属性
+const shouldRefresh = computed(() => props.allowRefresh && props.downloader.enabled)
+
 // 调用API查询下载器数据
 async function loadDownloaderInfo() {
-  if (!props.allowRefresh) {
+  if (!shouldRefresh.value) {
+    // 当下载器被禁用时，重置速率数据
+    upload_rate.value = 0
+    download_rate.value = 0
    return
  }
  try {
@@ -79,11 +84,6 @@ async function loadDownloaderInfo() {
    if (res) {
      upload_rate.value = res.upload_speed
      download_rate.value = res.download_speed
-      // 定时查询
-      clearTimeout(timeoutTimer)
-      if (props.downloader.enabled) {
-        timeoutTimer = setTimeout(loadDownloaderInfo, 3000)
-      }
    }
  } catch (e) {
    console.log(e)
@@ -141,14 +141,17 @@ function onClose() {
  emit('close')
 }

-onMounted(async () => {
-  if (props.downloader.enabled) {
-    await loadDownloaderInfo()
-  }
-})
+// 使用条件性数据刷新定时器（只在下载器启用时运行）
+const { stop: stopRefresh } = useConditionalDataRefresh(
+  `downloader-${props.downloader.name}`,
+  loadDownloaderInfo,
+  shouldRefresh, // 响应式条件：只有当allowRefresh为true且downloader启用时才运行
+  3000, // 3秒间隔
+  true // 立即执行一次
+)

 onUnmounted(() => {
-  if (timeoutTimer) clearTimeout(timeoutTimer)
+  stopRefresh()
 })
 </script>
 <template>
@@ -187,13 +190,13 @@ onUnmounted(() => {
            </div>
          </div>
          <div class="h-20">
-            <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
+            <VImg :src="getIcon" cover class="mt-8 me-3" max-width="3rem" min-width="3rem" />
          </div>
        </VCardText>
      </VCard>
    </VHover>

-    <VDialog
+    <DialogWrapper
      v-if="downloaderInfoDialog"
      v-model="downloaderInfoDialog"
      scrollable
@@ -380,6 +383,6 @@ onUnmounted(() => {
          </VBtn>
        </VCardActions>
      </VCard>
-    </VDialog>
+    </DialogWrapper>
  </div>
 </template>
--- a/src/components/cards/DownloadingCard.vue
+++ b/src/components/cards/DownloadingCard.vue
@@ -43,19 +43,14 @@ function imageLoadHandler() {
  imageLoaded.value = true
 }

-// 计算文本类
-function getTextClass() {
-  return imageLoaded.value ? 'text-white' : ''
-}
-
 // 下载状态控制
 async function toggleDownload() {
  const operation = isDownloading.value ? 'stop' : 'start'
  try {
    const result: { [key: string]: any } = await api.get(`download/${operation}/${props.info?.hash}`, {
      params: {
-        name: props.downloaderName
-      }
+        name: props.downloaderName,
+      },
    })

    if (result.success) isDownloading.value = !isDownloading.value
@@ -67,7 +62,7 @@ async function toggleDownload() {
 // 删除下截
 async function deleteDownload() {
  try {
-    await api.delete(`download/${props.info?.hash}`, {params: {name: props.downloaderName}})
+    await api.delete(`download/${props.info?.hash}`, { params: { name: props.downloaderName } })
    cardState.value = false
  } catch (error) {
    console.error(error)
@@ -76,35 +71,52 @@ async function deleteDownload() {
 </script>

 <template>
-  <VCard v-if="cardState" :key="props.info?.hash">
+  <VCard v-if="cardState" :key="props.info?.hash" class="flex flex-col h-full" min-height="150">
    <template #image>
-      <VImg :src="props.info?.media.image" aspect-ratio="2/3" cover class="brightness-50" @load="imageLoadHandler" />
+      <VImg :src="props.info?.media.image" aspect-ratio="2/3" cover @load="imageLoadHandler" position="top">
+        <template #placeholder>
+          <div class="w-full h-full">
+            <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+          </div>
+        </template>
+        <template #default>
+          <div class="absolute inset-0 outline-none downloading-card-background"></div>
+        </template>
+      </VImg>
    </template>

-    <VCardTitle class="break-words whitespace-normal" :class="getTextClass()">
-      {{ props.info?.media.title || props.info?.name }}
-      {{
-        props.info?.media.episode
-          ? `${props.info?.media.season} ${props.info?.media.episode}`
-          : props.info?.season_episode
-      }}
-    </VCardTitle>
+    <div>
+      <VCardTitle class="break-words whitespace-normal text-white">
+        {{ props.info?.media.title || props.info?.name }}
+        {{
+          props.info?.media.episode
+            ? `${props.info?.media.season} ${props.info?.media.episode}`
+            : props.info?.season_episode
+        }}
+      </VCardTitle>

-    <VCardSubtitle class="break-words whitespace-normal" :class="getTextClass()">
-      {{ props.info?.title }}
-    </VCardSubtitle>
+      <VCardSubtitle class="break-words whitespace-normal text-white">
+        {{ props.info?.title }}
+      </VCardSubtitle>

-    <VCardText class="text-subtitle-1 pt-3 pb-1" :class="getTextClass()">
-      {{ getSpeedText() }}
-    </VCardText>
+      <VCardText class="text-subtitle-1 pt-3 pb-1 text-white">
+        {{ getSpeedText() }}
+      </VCardText>

-    <VCardText v-if="getPercentage() > 0" :class="getTextClass()">
-      <VProgressLinear :model-value="getPercentage()" />
-    </VCardText>
+      <VCardText v-if="getPercentage() > 0" class="text-white">
+        <VProgressLinear :model-value="getPercentage()" bg-color="success" color="success" />
+      </VCardText>

-    <VCardActions class="justify-space-between">
-      <VBtn :icon="`${isDownloading ? 'mdi-pause' : 'mdi-play'}`" @click="toggleDownload" />
-      <VBtn color="error" icon="mdi-trash-can-outline" @click="deleteDownload" />
-    </VCardActions>
+      <VCardActions class="justify-space-between">
+        <VBtn :icon="`${isDownloading ? 'mdi-pause' : 'mdi-play'}`" @click="toggleDownload" />
+        <VBtn color="error" icon="mdi-trash-can-outline" @click="deleteDownload" />
+      </VCardActions>
+    </div>
  </VCard>
 </template>
+
+<style lang="scss" scoped>
+.downloading-card-background {
+  background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+}
+</style>
--- a/src/components/cards/FilterRuleGroupCard.vue
+++ b/src/components/cards/FilterRuleGroupCard.vue
@@ -3,7 +3,7 @@ import draggable from 'vuedraggable'
 import { copyToClipboard } from '@/@core/utils/navigator'
 import { CustomRule, FilterRuleGroup } from '@/api/types'
 import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import ImportCodeDialog from '@/components/dialog/ImportCodeDialog.vue'
 import filter_group_svg from '@images/svg/filter-group.svg'
 import { cloneDeep } from 'lodash-es'
@@ -223,7 +223,7 @@ function onClose() {
        <VImg :src="filter_group_svg" cover class="mt-10" max-width="3rem" />
      </VCardText>
    </VCard>
-    <VDialog
+    <DialogWrapper
      v-if="groupInfoDialog"
      v-model="groupInfoDialog"
      scrollable
@@ -308,7 +308,7 @@ function onClose() {
          </VBtn>
        </VCardActions>
      </VCard>
-    </VDialog>
+    </DialogWrapper>
    <ImportCodeDialog
      v-if="importCodeDialog"
      v-model="importCodeDialog"
--- a/src/components/cards/LibraryCard.vue
+++ b/src/components/cards/LibraryCard.vue
@@ -4,6 +4,7 @@ import plex from '@images/misc/plex.png'
 import emby from '@images/misc/emby.png'
 import jellyfin from '@images/misc/jellyfin.png'
 import trimemedia from '@images/logos/trimemedia.png'
+import { openMediaServerWithAutoDetect } from '@/utils/appDeepLink'

 // 输入参数
 const props = defineProps({
@@ -36,16 +37,18 @@ 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 if (props.media?.server === 'trimemedia') return trimemedia
+  if (props.media?.server_type === 'plex') return plex
+  else if (props.media?.server_type === 'emby') return emby
+  else if (props.media?.server_type === 'jellyfin') return jellyfin
+  else if (props.media?.server_type === 'trimemedia') return trimemedia
  else return plex
 }

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

 // 生成图片代理路径
@@ -69,20 +72,18 @@ async function drawImages(imageList: string[]) {
  if (!canvas) return getDefaultImage()

  // 画布参数
-  const POSTER_WIDTH = (canvas.width - 32) / 4
-  const POSTER_HEIGHT = canvas.height * 0.75 - 8
-  const MARGIN_WIDTH = 4
-  const MARGIN_HEIGHT = 4
-  const REFLECTION_HEIGHT = POSTER_HEIGHT / 2
-  const REFLECTION_SHOW_HEIGHT = canvas.height / 4
+  const POSTER_WIDTH = (canvas.width - 40) / 4  // 左右边框8px + 3个间隔24px = 40px
+  const POSTER_HEIGHT = 256  // 上方海报高256
+  const MARGIN_WIDTH = 8  // 左右间隔为8
+  const MARGIN_HEIGHT = 4  // 海报和倒影之间的间隔为4
+  const REFLECTION_HEIGHT = canvas.height - POSTER_HEIGHT - MARGIN_HEIGHT  // 下方倒影使用剩余全部高度

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

-  // 设置背景色为黑色
-  ctx.fillStyle = '#000000'
-  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  // 设置背景色为透明
+  ctx.clearRect(0, 0, canvas.width, canvas.height)

  // 绘制图片
  async function drawImageWithReflection(imgSrc: string, index: number) {
@@ -101,12 +102,12 @@ async function drawImages(imageList: string[]) {
    } catch (error) {
      console.error(error)
      ctx.fillStyle = '#e5e7eb'
-      ctx.fillRect(MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1), MARGIN_HEIGHT, POSTER_WIDTH, POSTER_HEIGHT)
+      ctx.fillRect(MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1), 0, POSTER_WIDTH, POSTER_HEIGHT)
      return
    }

    const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1)
-    const y = MARGIN_HEIGHT
+    const y = 0  // 海报紧贴顶部

    ctx.drawImage(img, x, y, POSTER_WIDTH, POSTER_HEIGHT)

@@ -120,17 +121,18 @@ async function drawImages(imageList: string[]) {
      img.width,
      img.height,
      x,
-      REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT,
+      0,
      POSTER_WIDTH,
      REFLECTION_HEIGHT,
    )

-    const gradient = ctx.createLinearGradient(0, REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT, 0, REFLECTION_HEIGHT)
+    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height - (POSTER_HEIGHT + MARGIN_HEIGHT))

    gradient.addColorStop(0, 'rgba(0, 0, 0, 1)')
-    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.3)')
+    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.7)')
+    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = gradient
-    ctx.fillRect(x, 0, POSTER_WIDTH, REFLECTION_SHOW_HEIGHT)
+    ctx.fillRect(x, 0, POSTER_WIDTH, REFLECTION_HEIGHT)

    ctx.restore()
  }
@@ -163,20 +165,22 @@ onMounted(async () => {
        @click="goPlay"
      >
        <template #image>
-          <canvas ref="canvasRef" class="w-full h-full hidden" />
+          <canvas ref="canvasRef" width="640" height="360" class="w-full h-full hidden" />
          <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" />
              </div>
            </template>
-            <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 text-shadow font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
-                {{ props.media?.name }}
-              </h1>
-            </VCardText>
+            <template #default>
+              <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 text-shadow font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
+                  {{ props.media?.name }}
+                </h1>
+              </VCardText>
+            </template>
          </VImg>
        </template>
      </VCard>
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -4,12 +4,12 @@ import tmdbImage from '@images/logos/tmdb.png'
 import doubanImage from '@images/logos/douban-black.png'
 import bangumiImage from '@images/logos/bangumi.png'
 import api from '@/api'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { formatSeason, formatRating } from '@/@core/utils/formatters'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import type { MediaInfo, Subscribe, MediaSeason, Site } from '@/api/types'
-import router, { registerAbortController } from '@/router'
-import { useUserStore } from '@/stores'
+import router from '@/router'
+import { useUserStore, useGlobalSettingsStore } from '@/stores'
 import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
 import SearchSiteDialog from '@/components/dialog/SearchSiteDialog.vue'
 import SubscribeSeasonDialog from '../dialog/SubscribeSeasonDialog.vue'
@@ -28,7 +28,9 @@ const props = defineProps({
 })

 // 从 provide 中获取全局设置
-const globalSettings: any = inject('globalSettings')
+// 全局设置
+const globalSettingsStore = useGlobalSettingsStore()
+const globalSettings = globalSettingsStore.globalSettings

 // 用户 Store
 const userStore = useUserStore()
@@ -232,9 +234,6 @@ async function handleCheckSubscribe() {
 // 查询当前媒体是否已入库
 async function handleCheckExists() {
  try {
-    const abortController = new AbortController()
-    registerAbortController(abortController)
-    const { signal } = abortController
    const result: { [key: string]: any } = await api.get('mediaserver/exists', {
      params: {
        tmdbid: props.media?.tmdb_id,
@@ -243,7 +242,6 @@ async function handleCheckExists() {
        season: props.media?.season,
        mtype: props.media?.type,
      },
-      signal,
    })

    if (result.success) isExists.value = true
@@ -255,16 +253,13 @@ async function handleCheckExists() {
 // 调用API检查是否已订阅，电视剧需要指定季
 async function checkSubscribe(season = 0) {
  try {
-    const abortController = new AbortController()
-    registerAbortController(abortController)
-    const { signal } = abortController
+    // AbortController 现在由全局请求优化器自动管理
    const mediaid = getMediaId()
    const result: Subscribe = await api.get(`subscribe/media/${mediaid}`, {
      params: {
        season,
        title: props.media?.title,
      },
-      signal,
    })

    return result.id || null
@@ -473,11 +468,11 @@ onBeforeUnmount(() => {
            class="w-full h-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
            style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
          >
-            <span class="font-bold">{{ props.media?.year }}</span>
-            <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+            <span class="font-semibold text-sm">{{ props.media?.year }}</span>
+            <h1 class="media-card-title font-bold mb-2 text-white line-clamp-2 overflow-hidden text-ellipsis ...">
              {{ props.media?.title }}
            </h1>
-            <p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
+            <p class="media-card-overview line-clamp-3 overflow-hidden text-ellipsis ...">
              {{ props.media?.overview }}
            </p>
            <div v-if="props.media?.collection_id" class="mb-3" @click.stop=""></div>
@@ -486,10 +481,16 @@ onBeforeUnmount(() => {
                v-if="hasPermission({ is_superuser: userStore.superUser, ...userStore.permissions }, 'search')"
                icon="mdi-magnify"
                color="white"
+                size="small"
                @click.stop="clickSearch"
              />
              <VSpacer />
-              <IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
+              <IconBtn
+                icon="mdi-heart"
+                :color="isSubscribed ? 'error' : 'white'"
+                size="small"
+                @click.stop="handleSubscribe"
+              />
            </div>
          </VCardText>
          <!-- 类型角标 -->
@@ -555,3 +556,14 @@ onBeforeUnmount(() => {
    @close="chooseSiteDialog = false"
  />
 </template>
+<style scoped>
+.media-card-title {
+  font-size: 1.125rem;
+  line-height: 1.25rem;
+}
+
+.media-card-overview {
+  font-size: 0.875rem;
+  line-height: 1rem;
+}
+</style>
--- a/src/components/cards/MediaInfoCard.vue
+++ b/src/components/cards/MediaInfoCard.vue
@@ -47,10 +47,12 @@ function openTmdbPage(type: string, tmdbId: number) {
        </div>
        <div class="flex-grow">
          <VCardItem class="pb-1">
-            <VCardTitle class="text-center text-md-left">
+            <div class="text-center text-md-left text-h6 font-weight-bold line-clamp-2 overflow-hidden text-ellipsis">
              {{ context?.media_info?.title || context?.meta_info?.name }}
-              {{ context?.meta_info?.season_episode }}
-            </VCardTitle>
+              <span v-if="context?.meta_info?.season_episode" class="text-sm text-medium-emphasis align-top">
+                {{ context?.meta_info?.season_episode }}
+              </span>
+            </div>
            <VCardSubtitle class="text-center text-md-left">
              {{ context?.media_info?.year || context?.meta_info?.year }}
            </VCardSubtitle>
@@ -87,6 +89,9 @@ function openTmdbPage(type: string, tmdbId: number) {
              {{ context?.media_info?.tmdb_id }}
            </VChip>
            <!-- meta_info -->
+            <VChip v-if="context?.meta_info?.web_source" variant="elevated" class="me-1 mb-1 text-white bg-purple-500">
+              {{ context?.meta_info?.web_source }}
+            </VChip>
            <VChip v-if="context?.meta_info?.edition" variant="elevated" class="me-1 mb-1 text-white bg-red-500">
              {{ context?.meta_info?.edition }}
            </VChip>
--- a/src/components/cards/MediaServerCard.vue
+++ b/src/components/cards/MediaServerCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { MediaServerConf, MediaServerLibrary, MediaStatistic } from '@/api/types'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import emby_image from '@images/logos/emby.png'
 import jellyfin_image from '@images/logos/jellyfin.png'
 import plex_image from '@images/logos/plex.png'
@@ -200,11 +200,11 @@ onMounted(() => {
            <span class="me-2 mb-1">自定义媒体服务器</span>
          </div>
        </div>
-        <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
+        <VImg :src="getIcon" cover class="mt-8 me-3" max-width="3rem" min-width="3rem" />
      </VCardText>
    </VCard>

-    <VDialog
+    <DialogWrapper
      v-if="mediaServerInfoDialog"
      v-model="mediaServerInfoDialog"
      scrollable
@@ -506,6 +506,6 @@ onMounted(() => {
          </VBtn>
        </VCardActions>
      </VCard>
-    </VDialog>
+    </DialogWrapper>
  </div>
 </template>
--- a/src/components/cards/NotificationChannelCard.vue
+++ b/src/components/cards/NotificationChannelCard.vue
@@ -7,7 +7,7 @@ import synologychat_image from '@images/logos/synologychat.png'
 import slack_image from '@images/logos/slack.webp'
 import chrome_image from '@images/logos/chrome.png'
 import custom_image from '@images/logos/notification.png'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
@@ -141,7 +141,7 @@ function onClose() {
      </VCardText>
    </VCard>

-    <VDialog
+    <DialogWrapper
      v-if="notificationInfoDialog"
      v-model="notificationInfoDialog"
      scrollable
@@ -476,6 +476,6 @@ function onClose() {
          </VBtn>
        </VCardActions>
      </VCard>
-    </VDialog>
+    </DialogWrapper>
  </div>
 </template>
--- a/src/components/cards/PersonCard.vue
+++ b/src/components/cards/PersonCard.vue
@@ -2,6 +2,7 @@
 import personIcon from '@images/misc/person-icon.png'
 import type { Person } from '@/api/types'
 import router from '@/router'
+import { useGlobalSettingsStore } from '@/stores'

 const personProps = defineProps({
  person: Object as PropType<Person>,
@@ -10,7 +11,9 @@ const personProps = defineProps({
 })

 // 从 provide 中获取全局设置
-const globalSettings: any = inject('globalSettings')
+// 全局设置
+const globalSettingsStore = useGlobalSettingsStore()
+const globalSettings = globalSettingsStore.globalSettings

 // 当前人物
 const personInfo = ref(personProps.person)
@@ -87,7 +90,7 @@ function goPersonDetail() {
            <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"
+                  size="100"
                  :class="{
                    'ring-1 ring-gray-700': isImageLoaded,
                  }"
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import VersionHistory from '../misc/VersionHistory.vue'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
@@ -106,7 +106,7 @@ const iconPath: Ref<string> = computed(() => {
  if (imageLoadError.value) return noImage
  // 如果是网络图片则使用代理后返回
  if (props.plugin?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}&cache=true`

  return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
@@ -267,15 +267,15 @@ const dropdownItems = ref([
    <!-- 安装插件进度框 -->
    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
    <!-- 更新日志 -->
-    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
+    <DialogWrapper v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
      <VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
        <VDialogCloseBtn @click="releaseDialog = false" />
        <VDivider />
        <VersionHistory :history="props.plugin?.history" />
      </VCard>
-    </VDialog>
+    </DialogWrapper>
    <!-- 插件详情-->
-    <VDialog v-if="detailDialog" v-model="detailDialog" max-width="30rem">
+    <DialogWrapper v-if="detailDialog" v-model="detailDialog" max-width="30rem">
      <VCard>
        <VDialogCloseBtn @click="detailDialog = false" />
        <VCardText>
@@ -335,6 +335,6 @@ const dropdownItems = ref([
          </VCol>
        </VCardText>
      </VCard>
-    </VDialog>
+    </DialogWrapper>
  </div>
 </template>
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { useConfirm } from '@/composables/useConfirm'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
@@ -170,7 +170,9 @@ const iconPath: Ref<string> = computed(() => {
  if (imageLoadError.value) return noImage
  // 如果是网络图片则使用代理后返回
  if (props.plugin?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(
+      props.plugin?.plugin_icon,
+    )}&cache=true`

  return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
@@ -180,7 +182,7 @@ const authorPath: Ref<string> = computed(() => {
  // 网络图片则使用代理后返回
  return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(
    props.plugin?.author_url + '.png',
-  )}`
+  )}&cache=true`
 })

 // 重置插件
@@ -475,7 +477,9 @@ watch(
            <div class="flex flex-nowrap items-center w-full pe-10">
              <div class="flex flex-nowrap max-w-40 items-center align-middle">
                <VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true">
-                  <VIcon v-if="!isAvatarLoaded" size="small" icon="mdi-github" class="me-1" />
+                  <template #default>
+                    <VIcon v-if="!isAvatarLoaded" size="small" icon="mdi-github" class="me-1" />
+                  </template>
                </VImg>
                <a
                  :href="props.plugin?.author_url"
@@ -543,7 +547,7 @@ watch(
    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />

    <!-- 更新日志 -->
-    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable :fullscreen="!display.mdAndUp.value">
+    <DialogWrapper v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable :fullscreen="!display.mdAndUp.value">
      <VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
        <VDialogCloseBtn @click="releaseDialog = false" />
        <VDivider />
@@ -558,10 +562,10 @@ watch(
          </VBtn>
        </VCardItem>
      </VCard>
-    </VDialog>
+    </DialogWrapper>

    <!-- 实时日志弹窗 -->
-    <VDialog
+    <DialogWrapper
      v-if="loggingDialog"
      v-model="loggingDialog"
      scrollable
@@ -587,10 +591,10 @@ watch(
          <LoggingView :logfile="`plugins/${props.plugin?.id?.toLowerCase()}.log`" />
        </VCardText>
      </VCard>
-    </VDialog>
+    </DialogWrapper>

    <!-- 插件分身对话框 -->
-    <VDialog
+    <DialogWrapper
      v-if="pluginCloneDialog"
      v-model="pluginCloneDialog"
      width="600"
@@ -696,7 +700,7 @@ watch(
          </VBtn>
        </VCardActions>
      </VCard>
-    </VDialog>
+    </DialogWrapper>
  </div>
 </template>

--- a/src/components/cards/PluginFolderCard.vue
+++ b/src/components/cards/PluginFolderCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { useConfirm } from '@/composables/useConfirm'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
@@ -350,7 +350,7 @@ const dropdownItems = ref([
    </VHover>

    <!-- 重命名对话框 -->
-    <VDialog v-if="renameDialog" v-model="renameDialog" max-width="400">
+    <DialogWrapper v-if="renameDialog" v-model="renameDialog" max-width="400">
      <VCard>
        <VCardItem>
          <template #prepend>
@@ -374,10 +374,10 @@ const dropdownItems = ref([
          <VBtn color="primary" prepend-icon="mdi-check" class="px-5" @click="confirmRename">确认</VBtn>
        </VCardActions>
      </VCard>
-    </VDialog>
+    </DialogWrapper>

    <!-- 设置对话框 -->
-    <VDialog
+    <DialogWrapper
      v-if="settingDialog"
      v-model="settingDialog"
      max-width="600"
@@ -480,7 +480,7 @@ const dropdownItems = ref([
          <VBtn color="primary" prepend-icon="mdi-content-save" class="px-5" @click="saveSettings">保存</VBtn>
        </VCardActions>
      </VCard>
-    </VDialog>
+    </DialogWrapper>
  </div>
 </template>

--- a/src/components/cards/PosterCard.vue
+++ b/src/components/cards/PosterCard.vue
@@ -2,6 +2,7 @@
 import type { PropType } from 'vue'
 import type { MediaServerPlayItem } from '@/api/types'
 import noImage from '@images/no-image.jpeg'
+import { openMediaServerWithAutoDetect } from '@/utils/appDeepLink'

 // 输入参数
 const props = defineProps({
@@ -31,8 +32,10 @@ const getImgUrl = computed(() => {
 })

 // 跳转播放
-function goPlay(isHovering: boolean | null = false) {
-  if (props.media?.link && isHovering) window.open(props.media?.link, '_blank')
+async function goPlay(isHovering: boolean | null = false) {
+  if (props.media?.link && isHovering) {
+    await openMediaServerWithAutoDetect(props.media.link, undefined, props.media.server_type)
+  }
 }
 </script>

@@ -80,8 +83,8 @@ function goPlay(isHovering: boolean | null = false) {
          style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
          @click.stop="goPlay(hover.isHovering)"
        >
-          <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 ...">
+          <span class="font-semibold text-sm">{{ props.media?.subtitle }}</span>
+          <h1 class="mb-1 text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
            {{ props.media?.title }}
          </h1>
        </VCardText>
--- a/src/components/cards/SiteCard.vue
+++ b/src/components/cards/SiteCard.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import noImage from '@images/logos/site.webp'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { useI18n } from 'vue-i18n'
 import SiteAddEditDialog from '../dialog/SiteAddEditDialog.vue'
 import SiteUserDataDialog from '../dialog/SiteUserDataDialog.vue'
@@ -24,10 +24,11 @@ const { t } = useI18n()
 const cardProps = defineProps({
  site: Object as PropType<Site>,
  data: Object as PropType<SiteUserData>,
+  stats: Object as PropType<SiteStatistic>,
 })

 // 定义触发的自定义事件
-const emit = defineEmits(['update', 'remove'])
+const emit = defineEmits(['update', 'remove', 'refresh-stats'])

 // 确认框
 const createConfirm = useConfirm()
@@ -56,9 +57,6 @@ const resourceDialog = ref(false)
 // 用户数据弹窗
 const siteUserDataDialog = ref(false)

-// 站点使用统计
-const siteStats = ref<SiteStatistic>({})
-
 // 查询站点图标
 async function getSiteIcon() {
  try {
@@ -84,16 +82,8 @@ async function testSite() {
    testButtonText.value = t('site.testConnectivity')
    testButtonDisable.value = false

-    getSiteStats()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-// 查询站点使用统计
-async function getSiteStats() {
-  try {
-    siteStats.value = await api.get(`site/statistic/${cardProps.site?.domain}`)
+    // 测试完成后刷新统计数据
+    emit('refresh-stats', cardProps.site?.domain)
  } catch (error) {
    console.error(error)
  }
@@ -140,16 +130,17 @@ async function deleteSiteInfo() {

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

 // 数据百分比计算
@@ -185,19 +176,20 @@ function saveSite() {
 // 更新站点Cookie UA后的回调
 function onSiteCookieUpdated() {
  siteCookieDialog.value = false
-  getSiteStats()
+  // Cookie更新后刷新统计数据
+  emit('refresh-stats', cardProps.site?.domain)
 }

 // 资源浏览弹窗关闭后的回调
 function onSiteResourceDone() {
  resourceDialog.value = false
-  getSiteStats()
+  // 资源操作完成后刷新统计数据
+  emit('refresh-stats', cardProps.site?.domain)
 }

 // 装载时查询站点图标
 onMounted(() => {
  getSiteIcon()
-  getSiteStats()
 })
 </script>

--- a/src/components/cards/StorageCard.vue
+++ b/src/components/cards/StorageCard.vue
@@ -5,17 +5,18 @@ import storage_png from '@images/misc/storage.png'
 import alipan_png from '@images/misc/alipan.webp'
 import u115_png from '@images/misc/u115.png'
 import rclone_png from '@images/misc/rclone.png'
-import alist_png from '@images/misc/alist.svg'
+import alist_png from '@images/misc/openlist.svg'
 import custom_png from '@images/misc/database.png'
+import smb_png from '@images/misc/smb.png'
 import api from '@/api'
 import AliyunAuthDialog from '../dialog/AliyunAuthDialog.vue'
 import U115AuthDialog from '../dialog/U115AuthDialog.vue'
 import RcloneConfigDialog from '../dialog/RcloneConfigDialog.vue'
 import AlistConfigDialog from '../dialog/AlistConfigDialog.vue'
-import { useToast } from 'vue-toast-notification'
+import SmbConfigDialog from '../dialog/SmbConfigDialog.vue'
+import { useToast } from 'vue-toastification'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { useI18n } from 'vue-i18n'
-import { storageIconDict } from '@/api/constants'
 import { useDisplay } from 'vuetify'

 // 显示器宽度
@@ -66,6 +67,8 @@ const u115AuthDialog = ref(false)
 const rcloneConfigDialog = ref(false)
 // AList配置对话框
 const aListConfigDialog = ref(false)
+// SMB配置对话框
+const smbConfigDialog = ref(false)
 // 自定义存储配置对话框
 const customConfigDialog = ref(false)

@@ -84,6 +87,9 @@ function openStorageDialog() {
    case 'alist':
      aListConfigDialog.value = true
      break
+    case 'smb':
+      smbConfigDialog.value = true
+      break
    case 'local':
      $toast.info(t('storage.noConfigNeeded'))
      break
@@ -106,6 +112,8 @@ const getIcon = computed(() => {
      return rclone_png
    case 'alist':
      return alist_png
+    case 'smb':
+      return smb_png
    default:
      return custom_png
  }
@@ -144,6 +152,7 @@ function handleDone() {
  u115AuthDialog.value = false
  rcloneConfigDialog.value = false
  aListConfigDialog.value = false
+  smbConfigDialog.value = false
  customConfigDialog.value = false
  // 更新存储
  storage_ref.value.name = customName.value
@@ -163,14 +172,14 @@ function onClose() {
 <template>
  <div>
    <VCard variant="tonal" @click="openStorageDialog">
-      <VDialogCloseBtn v-if="!storageIconDict[storage.type]" @click="onClose" />
+      <VDialogCloseBtn @click="onClose" class="absolute top-1 right-1" />
      <VCardText class="flex justify-space-between align-center gap-3">
        <div class="align-self-start flex-1">
          <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
          <div class="mb-3 text-sm" v-if="total">{{ formatBytes(used, 1) }} / {{ formatBytes(total, 1) }}</div>
          <div v-else-if="isNullOrEmptyObject(storage.config)">{{ t('storage.notConfigured') }}</div>
        </div>
-        <VImg :src="getIcon" cover class="mt-7" max-width="3rem" min-width="3rem" />
+        <VImg :src="getIcon" cover class="mt-8" max-width="3rem" min-width="3rem" />
      </VCardText>
      <div class="w-full absolute bottom-0">
        <VProgressLinear v-if="usage > 0" :model-value="usage" :bg-color="progressColor" :color="progressColor" />
@@ -204,7 +213,14 @@ function onClose() {
      @close="aListConfigDialog = false"
      @done="handleDone"
    />
-    <VDialog
+    <SmbConfigDialog
+      v-if="smbConfigDialog"
+      v-model="smbConfigDialog"
+      :conf="props.storage.config || {}"
+      @close="smbConfigDialog = false"
+      @done="handleDone"
+    />
+    <DialogWrapper
      v-if="customConfigDialog"
      v-model="customConfigDialog"
      scrollable
@@ -247,6 +263,6 @@ function onClose() {
          </VBtn>
        </VCardActions>
      </VCard>
-    </VDialog>
+    </DialogWrapper>
  </div>
 </template>
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { useConfirm } from '@/composables/useConfirm'
 import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
 import SubscribeFilesDialog from '../dialog/SubscribeFilesDialog.vue'
@@ -10,6 +10,7 @@ import type { Subscribe } from '@/api/types'
 import router from '@/router'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
+import { useGlobalSettingsStore } from '@/stores'

 // 显示器宽度
 const display = useDisplay()
@@ -23,7 +24,9 @@ const props = defineProps({
 })

 // 从 provide 中获取全局设置
-const globalSettings: any = inject('globalSettings')
+// 全局设置
+const globalSettingsStore = useGlobalSettingsStore()
+const globalSettings = globalSettingsStore.globalSettings

 // 定义触发的自定义事件
 const emit = defineEmits(['remove', 'save'])
@@ -343,7 +346,9 @@ function onSubscribeEditRemove() {
                    <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
                  </div>
                </template>
-                <div class="absolute inset-0 outline-none subscribe-card-background"></div>
+                <template #default>
+                  <div class="absolute inset-0 outline-none subscribe-card-background"></div>
+                </template>
              </VImg>
              <div
                v-if="subscribeState === 'P'"
@@ -440,6 +445,6 @@ function onSubscribeEditRemove() {
 </template>
 <style lang="scss" scoped>
 .subscribe-card-background {
-  background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+  background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
 }
 </style>
--- a/src/components/cards/SubscribeShareCard.vue
+++ b/src/components/cards/SubscribeShareCard.vue
@@ -4,6 +4,7 @@ import type { SubscribeShare } from '@/api/types'
 import router from '@/router'
 import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
 import ForkSubscribeDialog from '../dialog/ForkSubscribeDialog.vue'
+import { useGlobalSettingsStore } from '@/stores'

 // 输入参数
 const props = defineProps({
@@ -14,7 +15,9 @@ const props = defineProps({
 const emit = defineEmits(['delete'])

 // 从 provide 中获取全局设置
-const globalSettings: any = inject('globalSettings')
+// 全局设置
+const globalSettingsStore = useGlobalSettingsStore()
+const globalSettings = globalSettingsStore.globalSettings

 // 图片是否加载完成
 const imageLoaded = ref(false)
@@ -118,7 +121,9 @@ function doDelete() {
                    <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
                  </div>
                </template>
-                <div class="absolute inset-0 subscribe-card-background"></div>
+                <template #default>
+                  <div class="absolute inset-0 subscribe-card-background"></div>
+                </template>
              </VImg>
            </template>
            <div class="h-full flex flex-col">
@@ -184,6 +189,6 @@ function doDelete() {
 </template>
 <style lang="scss" scoped>
 .subscribe-card-background {
-  background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+  background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
 }
 </style>
--- a/src/components/cards/TorrentCard.vue
+++ b/src/components/cards/TorrentCard.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { formatFileSize } from '@/@core/utils/formatters'
+import { formatFileSize, formatDateDifference } from '@/@core/utils/formatters'
 import api from '@/api'
 import type { Context } from '@/api/types'
 import AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
@@ -196,8 +196,19 @@ onMounted(() => {
          {{ meta?.subtitle || torrent?.description }}
        </div>

+        <!-- 发布时间 -->
+        <div v-if="torrent?.pubdate" class="d-flex align-center justify-start mb-2">
+          <VIcon size="small" color="grey" icon="mdi-clock-outline" class="me-1"></VIcon>
+          <span class="text-sm text-medium-emphasis">{{ formatDateDifference(torrent.pubdate) }}</span>
+        </div>
+
        <!-- 资源标签区 -->
        <div class="d-flex flex-wrap gap-1 mb-2">
+          <!-- 流媒体平台 -->
+          <VChip v-if="meta?.web_source" class="chip-web-source rounded-sm" size="x-small" variant="elevated">
+            {{ meta?.web_source }}
+          </VChip>
+
          <!-- 版本标签 -->
          <VChip v-if="meta?.edition" class="chip-edition rounded-sm" size="x-small" variant="elevated">
            {{ meta?.edition }}
@@ -267,7 +278,7 @@ onMounted(() => {
    </VCard>

    <!-- 更多来源对话框 -->
-    <VDialog v-model="showMoreTorrents" max-width="25rem" location="center">
+    <DialogWrapper v-model="showMoreTorrents" max-width="25rem" location="center">
      <VCard>
        <VCardTitle class="py-3 d-flex align-center">
          <span>其他来源</span>
@@ -350,7 +361,7 @@ onMounted(() => {
          </VList>
        </VCardText>
      </VCard>
-    </VDialog>
+    </DialogWrapper>

    <AddDownloadDialog
      v-if="addDownloadDialog"
@@ -406,6 +417,11 @@ onMounted(() => {
  color: white;
 }

+.chip-web-source {
+  background-color: #8000FF;
+  color: white;
+}
+
 .chip-edition {
  background-color: #f44336;
  color: white;
--- a/src/components/cards/TorrentItem.vue
+++ b/src/components/cards/TorrentItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { formatFileSize } from '@/@core/utils/formatters'
+import { formatFileSize, formatDateDifference } from '@/@core/utils/formatters'
 import api from '@/api'
 import type { Context } from '@/api/types'
 import AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
@@ -121,12 +121,22 @@ onMounted(() => {
      </div>

      <template v-slot:prepend>
-        <div class="d-flex flex-column align-center pr-3">
-          <VImg v-if="siteIcon" :src="siteIcon" :alt="torrent?.site_name" class="rounded mb-1" width="32" height="32" />
-          <VAvatar v-else size="24" class="mb-1 text-caption bg-primary-lighten-4 text-primary font-weight-bold">
+        <div class="d-flex flex-column align-center pr-3" :title="torrent?.site_name">
+          <VImg
+            v-if="siteIcon"
+            :src="siteIcon"
+            :alt="torrent?.site_name"
+            class="rounded mb-1 site-icon"
+            width="32"
+            height="32"
+          />
+          <VAvatar
+            v-else
+            size="32"
+            class="mb-1 text-caption bg-primary-lighten-4 text-primary font-weight-bold site-icon"
+          >
            {{ torrent?.site_name?.substring(0, 1) }}
          </VAvatar>
-          <div class="font-weight-bold text-body-2 text-center d-none d-sm-block">{{ torrent?.site_name }}</div>
        </div>
      </template>

@@ -154,7 +164,18 @@ onMounted(() => {
          {{ meta?.subtitle || torrent?.description || '暂无描述' }}
        </div>

+        <!-- 发布时间 -->
+        <div v-if="torrent?.pubdate" class="d-flex align-center mb-2">
+          <VIcon size="small" color="grey" icon="mdi-clock-outline" class="me-1"></VIcon>
+          <span class="text-sm text-medium-emphasis">{{ formatDateDifference(torrent.pubdate) }}</span>
+        </div>
+
        <div class="d-flex flex-wrap gap-1 mb-2">
+          <!-- 流媒体平台 -->
+          <VChip v-if="meta?.web_source" class="chip-web-source rounded-sm" size="x-small" variant="elevated">
+            {{ meta?.web_source }}
+          </VChip>
+
          <!-- 版本标签 -->
          <VChip v-if="meta?.edition" class="chip-edition rounded-sm" size="x-small" variant="elevated">
            {{ meta?.edition }}
@@ -254,6 +275,11 @@ onMounted(() => {
  color: white;
 }

+.chip-web-source {
+  background-color: #8000ff;
+  color: white;
+}
+
 .chip-edition {
  background-color: #f44336;
  color: white;
@@ -316,4 +342,12 @@ onMounted(() => {
  background-color: #9c27b0;
  color: white;
 }
+
+.site-icon {
+  transition: transform 0.2s ease;
+}
+
+.site-icon:hover {
+  transform: scale(1.1);
+}
 </style>
--- a/src/components/cards/UserCard.vue
+++ b/src/components/cards/UserCard.vue
@@ -3,7 +3,7 @@ import api from '@/api'
 import { Subscribe, User } from '@/api/types'
 import { useUserStore } from '@/stores'
 import avatar1 from '@images/avatars/avatar-1.png'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { useConfirm } from '@/composables/useConfirm'
 import UserAddEditDialog from '@/components/dialog/UserAddEditDialog.vue'
 import { useDisplay } from 'vuetify'
--- a/src/components/cards/WorkflowShareCard.vue
+++ b/src/components/cards/WorkflowShareCard.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { formatDateDifference } from '@/@core/utils/formatters'
+import type { WorkflowShare } from '@/api/types'
+import ForkWorkflowDialog from '../dialog/ForkWorkflowDialog.vue'
+
+// 输入参数
+const props = defineProps({
+  workflow: Object as PropType<WorkflowShare>,
+  eventTypes: {
+    type: Array as PropType<Array<{ title: string; value: string }>>,
+    default: () => [],
+  },
+})
+
+// 定义删除事件
+const emit = defineEmits(['delete', 'update'])
+
+// 复用工作流弹窗
+const forkWorkflowDialog = ref(false)
+
+// 工作流ID
+const workflowId = ref<string>()
+
+// 分享时间
+const dateText = ref(props.workflow && props.workflow?.date ? formatDateDifference(props.workflow.date) : '')
+
+// 随机渐变背景
+const gradientStyle = ref('')
+
+// 生成随机渐变背景
+function generateRandomGradient() {
+  const gradients = [
+    'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)',
+    'linear-gradient(135deg, #553c9a 0%, #b794f4 100%)',
+    'linear-gradient(135deg, #2c5aa0 0%, #1a365d 100%)',
+    'linear-gradient(135deg, #2f855a 0%, #22543d 100%)',
+    'linear-gradient(135deg, #c53030 0%, #742a2a 100%)',
+    'linear-gradient(135deg, #d69e2e 0%, #975a16 100%)',
+    'linear-gradient(135deg, #805ad5 0%, #553c9a 100%)',
+    'linear-gradient(135deg, #3182ce 0%, #2c5282 100%)',
+    'linear-gradient(135deg, #38a169 0%, #276749 100%)',
+    'linear-gradient(135deg, #e53e3e 0%, #c53030 100%)',
+    'linear-gradient(135deg, #dd6b20 0%, #c05621 100%)',
+    'linear-gradient(135deg, #6b46c1 0%, #553c9a 100%)',
+    'linear-gradient(135deg, #2b6cb0 0%, #2c5282 100%)',
+    'linear-gradient(135deg, #38a169 0%, #2f855a 100%)',
+    'linear-gradient(135deg, #d53f8c 0%, #97266d 100%)',
+  ]
+
+  // 基于工作流ID生成固定的随机数，确保同一工作流总是显示相同的渐变
+  const seed = String(props.workflow?.id || Math.random())
+  const hash = seed.split('').reduce((a, b) => {
+    a = (a << 5) - a + b.charCodeAt(0)
+    return a & a
+  }, 0)
+
+  const index = Math.abs(hash) % gradients.length
+  return gradients[index]
+}
+
+// 初始化渐变背景
+onMounted(() => {
+  gradientStyle.value = generateRandomGradient()
+})
+
+// 复用工作流
+function showForkWorkflow() {
+  forkWorkflowDialog.value = true
+}
+
+// 完成复用工作流
+function finishForkWorkflow(wid: string) {
+  workflowId.value = wid
+  forkWorkflowDialog.value = false
+  emit('update')
+}
+
+// 删除工作流分享时处理
+function doDelete() {
+  forkWorkflowDialog.value = false
+  // 通知父组件刷新
+  emit('delete')
+}
+</script>
+
+<template>
+  <div class="h-full">
+    <VHover>
+      <template #default="hover">
+        <div
+          class="w-full h-full rounded-lg overflow-hidden"
+          :class="{
+            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
+          }"
+        >
+          <VCard
+            v-bind="hover.props"
+            :key="props.workflow?.id"
+            class="flex flex-col h-full"
+            rounded="0"
+            min-height="150"
+            :style="{ background: gradientStyle }"
+            @click="showForkWorkflow"
+          >
+            <div class="h-full flex flex-col">
+              <VCardText class="flex items-center pa-3 pb-1 grow">
+                <div class="flex flex-col justify-center w-full">
+                  <VCardTitle class="text-lg text-bold text-white line-clamp-2 break-words">
+                    {{ props.workflow?.share_title }}
+                  </VCardTitle>
+                  <div class="px-4 text-white text-opacity-90 overflow-hidden line-clamp-3 break-all ...">
+                    {{ props.workflow?.share_comment }}
+                  </div>
+                </div>
+              </VCardText>
+              <VCardText class="flex justify-space-between align-center flex-wrap py-2">
+                <div class="flex align-center">
+                  <IconBtn v-bind="props" icon="mdi-account" class="me-1 text-white" />
+                  <div class="text-subtitle-2 me-4 text-white text-opacity-90">
+                    {{ props.workflow?.share_user }}
+                  </div>
+                  <IconBtn v-if="props.workflow?.count" icon="mdi-fire" class="me-1 text-white" />
+                  <span v-if="props.workflow?.count" class="text-subtitle-2 me-4 text-white text-opacity-90">
+                    {{ props.workflow?.count.toLocaleString() }}
+                  </span>
+                </div>
+              </VCardText>
+              <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-white text-sm text-opacity-75">
+                <VIcon icon="mdi-calendar" size="small" class="me-1" />
+                {{ dateText }}
+              </VCardText>
+            </div>
+          </VCard>
+        </div>
+      </template>
+    </VHover>
+    <!-- 复用工作流弹窗 -->
+    <ForkWorkflowDialog
+      v-if="forkWorkflowDialog"
+      v-model="forkWorkflowDialog"
+      :workflow="props.workflow"
+      :event-types="props.eventTypes"
+      @close="forkWorkflowDialog = false"
+      @fork="finishForkWorkflow"
+      @delete="doDelete"
+    />
+  </div>
+</template>
--- a/src/components/cards/WorkflowTaskCard.vue
+++ b/src/components/cards/WorkflowTaskCard.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { Workflow } from '@/api/types'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { useConfirm } from '@/composables/useConfirm'
 import WorkflowAddEditDialog from '@/components/dialog/WorkflowAddEditDialog.vue'
 import WorkflowActionsDialog from '@/components/dialog/WorkflowActionsDialog.vue'
+import WorkflowShareDialog from '@/components/dialog/WorkflowShareDialog.vue'
 import api from '@/api'
 import { useI18n } from 'vue-i18n'

@@ -15,6 +16,10 @@ const props = defineProps({
    required: true,
    type: Object as PropType<Workflow>,
  },
+  eventTypes: {
+    type: Array as PropType<Array<{ title: string; value: string }>>,
+    default: () => [],
+  },
 })

 // 定义事件
@@ -32,9 +37,18 @@ const editDialog = ref(false)
 // 流程对话框
 const flowDialog = ref(false)

+// 分享对话框
+const shareDialog = ref(false)
+
 // 加载中
 const loading = ref(false)

+// 根据事件类型值获取显示文本
+const getEventTypeText = (eventTypeValue: string) => {
+  const eventType = props.eventTypes.find(item => item.value === eventTypeValue)
+  return eventType ? eventType.title : eventTypeValue
+}
+
 // 编辑任务
 function handleEdit(item: Workflow) {
  editDialog.value = true
@@ -45,10 +59,16 @@ function handleFlow(item: Workflow) {
  flowDialog.value = true
 }

+// 分享工作流
+function handleShare(item: Workflow) {
+  shareDialog.value = true
+}
+
 // 编辑完成
 function editDone() {
  editDialog.value = false
  flowDialog.value = false
+  shareDialog.value = false
  emit('refresh')
 }

@@ -155,11 +175,36 @@ async function handleReset(item: Workflow) {

 // 计算状态颜色
 const resolveStatusVariant = (status: string | undefined) => {
-  if (status === 'S') return { color: 'success', text: t('workflow.task.status.success') }
-  else if (status === 'R') return { color: 'primary', text: t('workflow.task.status.running') }
-  else if (status === 'F') return { color: 'error', text: t('workflow.task.status.failed') }
-  else if (status === 'P') return { color: 'secondary', text: t('workflow.task.status.paused') }
-  else return { color: 'info', text: t('workflow.task.status.waiting') }
+  if (status === 'S')
+    return {
+      color: 'success',
+      bgColor: 'linear-gradient(to bottom right, rgba(76, 175, 80, 0.9), rgba(76, 175, 80, 0.7))',
+      text: t('workflow.task.status.success'),
+    }
+  else if (status === 'R')
+    return {
+      color: 'primary',
+      bgColor: 'linear-gradient(to bottom right, rgba(33, 150, 243, 0.9), rgba(33, 150, 243, 0.7))',
+      text: t('workflow.task.status.running'),
+    }
+  else if (status === 'F')
+    return {
+      color: 'error',
+      bgColor: 'linear-gradient(to bottom right, rgba(244, 67, 54, 0.9), rgba(244, 67, 54, 0.7))',
+      text: t('workflow.task.status.failed'),
+    }
+  else if (status === 'P')
+    return {
+      color: 'warning',
+      bgColor: 'linear-gradient(to bottom right, rgba(255, 152, 0, 0.9), rgba(255, 152, 0, 0.7))',
+      text: t('workflow.task.status.paused'),
+    }
+  else
+    return {
+      color: 'info',
+      bgColor: 'linear-gradient(to bottom right, rgba(33, 150, 243, 0.9), rgba(33, 150, 243, 0.7))',
+      text: t('workflow.task.status.waiting'),
+    }
 }

 // 计算当前动作占比
@@ -180,32 +225,26 @@ const resolveProgress = (item: Workflow) => {
        :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
      >
        <VCardItem
-          :class="{
-            'py-1': workflow?.description,
-            'py-3': !workflow?.description,
-            [`bg-${resolveStatusVariant(workflow?.state).color}`]: true,
+          class="px-2 py-2"
+          :style="{
+            background: resolveStatusVariant(workflow?.state).bgColor,
          }"
        >
          <template #prepend>
-            <VAvatar variant="text" class="me-2">
+            <VAvatar variant="text" size="small">
              <VIcon
                v-if="workflow?.state === 'P'"
                color="success"
-                size="x-large"
                icon="mdi-play"
                @click.stop="handleEnable(workflow)"
              />
-              <VIcon v-else color="warning" icon="mdi-pause" size="x-large" @click.stop="handlePause(workflow)" />
+              <VIcon v-else color="warning" icon="mdi-pause" @click.stop="handlePause(workflow)" />
            </VAvatar>
          </template>
-          <VCardTitle class="text-white">
-            {{ workflow?.name }}
+          <VCardTitle class="text-white text-lg">
+            <span :title="workflow?.description">{{ workflow?.name }}</span>
          </VCardTitle>
-          <VCardSubtitle class="text-white">{{ workflow?.description }}</VCardSubtitle>
          <template #append>
-            <IconBtn>
-              <VIcon icon="mdi-vector-polyline-edit" @click.stop="handleFlow(workflow)" />
-            </IconBtn>
            <IconBtn>
              <VIcon icon="mdi-dots-vertical" />
              <VMenu activator="parent" close-on-content-click>
@@ -216,6 +255,12 @@ const resolveProgress = (item: Workflow) => {
                    </template>
                    <VListItemTitle>{{ t('workflow.task.edit') }}</VListItemTitle>
                  </VListItem>
+                  <VListItem base-color="success" @click="handleFlow(workflow)">
+                    <template #prepend>
+                      <VIcon icon="mdi-vector-polyline" />
+                    </template>
+                    <VListItemTitle>{{ t('workflow.task.editFlow') }}</VListItemTitle>
+                  </VListItem>
                  <VListItem v-if="workflow.current_action" base-color="info" @click="handleRun(workflow, false)">
                    <template #prepend>
                      <VIcon icon="mdi-play-speed" />
@@ -240,6 +285,12 @@ const resolveProgress = (item: Workflow) => {
                    </template>
                    <VListItemTitle>{{ t('workflow.task.reset') }}</VListItemTitle>
                  </VListItem>
+                  <VListItem base-color="info" @click="handleShare(workflow)">
+                    <template #prepend>
+                      <VIcon icon="mdi-share" />
+                    </template>
+                    <VListItemTitle>{{ t('workflow.task.share') }}</VListItemTitle>
+                  </VListItem>
                  <VListItem base-color="error" @click="handleDelete(workflow)">
                    <template #prepend>
                      <VIcon icon="mdi-delete" />
@@ -252,35 +303,48 @@ const resolveProgress = (item: Workflow) => {
          </template>
        </VCardItem>
        <VDivider />
-        <VCardText>
-          <div class="d-flex flex-column gap-y-4">
-            <div class="d-flex flex-wrap gap-x-6">
+        <VCardText class="pa-3">
+          <div class="d-flex flex-column gap-y-3">
+            <div class="d-flex flex-wrap gap-x-3">
              <div class="flex-1">
-                <div class="mb-1">{{ t('workflow.task.info.timer') }}</div>
-                <h5 class="text-h6">{{ workflow?.timer }}</h5>
+                <div class="mb-1">{{ t('workflow.task.info.trigger') }}</div>
+                <h5>
+                  <span v-if="workflow?.trigger_type === 'timer' || !workflow?.trigger_type">
+                    <VIcon icon="mdi-clock-outline" size="small" class="me-1" />
+                    {{ workflow?.timer }}
+                  </span>
+                  <span v-else-if="workflow?.trigger_type === 'event'">
+                    <VIcon icon="mdi-calendar-check" size="small" class="me-1" />
+                    {{ getEventTypeText(workflow?.event_type || '') }}
+                  </span>
+                  <span v-else-if="workflow?.trigger_type === 'manual'">
+                    <VIcon icon="mdi-hand-pointing-up" size="small" class="me-1" />
+                    {{ t('workflow.task.info.manualTrigger') }}
+                  </span>
+                </h5>
              </div>
              <div class="flex-1">
                <div class="mb-1">{{ t('workflow.task.info.status') }}</div>
-                <h5 class="text-h6" :class="`text-${resolveStatusVariant(workflow?.state).color}`">
+                <h5 :class="`text-${resolveStatusVariant(workflow?.state).color}`">
                  {{ resolveStatusVariant(workflow?.state).text }}
                </h5>
              </div>
            </div>
-            <div class="d-flex flex-wrap gap-x-6">
+            <div class="d-flex flex-wrap gap-x-3">
              <div class="flex-1">
                <div class="mb-1">{{ t('workflow.task.info.actionCount') }}</div>
                <div>
-                  <VAvatar size="32" color="primary" variant="tonal">
-                    <span class="text-sm">{{ workflow?.actions?.length }}</span>
+                  <VAvatar size="24" color="primary" variant="tonal">
+                    <span class="text-xs">{{ workflow?.actions?.length }}</span>
                  </VAvatar>
                </div>
              </div>
              <div class="flex-1">
                <div class="mb-1">{{ t('workflow.task.info.runCount') }}</div>
-                <h5 class="text-h6">{{ workflow?.run_count }}</h5>
+                <h5>{{ workflow?.run_count }}</h5>
              </div>
            </div>
-            <div class="d-flex flex-wrap gap-x-6">
+            <div class="d-flex flex-wrap gap-x-3">
              <div class="flex-1">
                <div class="mb-1">{{ t('workflow.task.info.progress') }}</div>
                <div class="d-flex align-center gap-5">
@@ -291,7 +355,7 @@ const resolveProgress = (item: Workflow) => {
                </div>
              </div>
            </div>
-            <div class="d-flex flex-wrap gap-x-6" v-if="workflow?.result">
+            <div class="d-flex flex-wrap gap-x-3" v-if="workflow?.result">
              <div class="flex-1">
                <div class="mb-1">{{ t('workflow.task.info.error') }}</div>
                <div class="text-error">{{ workflow?.result }}</div>
@@ -317,5 +381,7 @@ const resolveProgress = (item: Workflow) => {
      @save="editDone"
      :workflow="workflow"
    />
+    <!-- 分享对话框 -->
+    <WorkflowShareDialog v-if="shareDialog" v-model="shareDialog" :workflow="workflow" @close="shareDialog = false" />
  </div>
 </template>
--- a/src/components/dialog/AddDownloadDialog.vue
+++ b/src/components/dialog/AddDownloadDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import type { DownloaderConf, MediaInfo, TorrentInfo, TransferDirectoryConf } from '@/api/types'
@@ -132,7 +132,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog max-width="35rem" scrollable>
+  <DialogWrapper max-width="35rem" scrollable>
    <VCard>
      <VCardItem class="py-2">
        <template #prepend>
@@ -209,5 +209,5 @@ onMounted(() => {
        </VBtn>
      </VCardText>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/AlistConfigDialog.vue
+++ b/src/components/dialog/AlistConfigDialog.vue
@@ -70,7 +70,7 @@ async function savaAlistConfig() {
 </script>

 <template>
-  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
    <VCard>
      <VDialogCloseBtn @click="emit('close')" />
      <VCardItem>
@@ -143,5 +143,5 @@ async function savaAlistConfig() {
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/AliyunAuthDialog.vue
+++ b/src/components/dialog/AliyunAuthDialog.vue
@@ -110,7 +110,7 @@ onUnmounted(() => {
 </script>

 <template>
-  <VDialog width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
    <VCard>
      <VDialogCloseBtn @click="emit('close')" />
      <VCardItem>
@@ -148,5 +148,5 @@ onUnmounted(() => {
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/ForkSubscribeDialog.vue
+++ b/src/components/dialog/ForkSubscribeDialog.vue
@@ -3,9 +3,10 @@ import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { SubscribeShare } from '@/api/types'
 import router from '@/router'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { VBtn } from 'vuetify/lib/components/index.mjs'
 import { useI18n } from 'vue-i18n'
+import { useGlobalSettingsStore } from '@/stores'

 // 国际化
 const { t } = useI18n()
@@ -19,7 +20,9 @@ const props = defineProps({
 const emit = defineEmits(['fork', 'delete', 'close'])

 // 从 provide 中获取全局设置
-const globalSettings: any = inject('globalSettings')
+// 全局设置
+const globalSettingsStore = useGlobalSettingsStore()
+const globalSettings = globalSettingsStore.globalSettings

 // 提示框
 const $toast = useToast()
@@ -167,9 +170,8 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog max-width="40rem" scrollable>
+  <DialogWrapper max-width="40rem" scrollable>
    <VCard>
-      <VDialogCloseBtn @click="emit('close')" />
      <VCardText>
        <VCol>
          <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
@@ -282,6 +284,7 @@ onMounted(() => {
          </div>
        </VCol>
      </VCardText>
+      <VDialogCloseBtn @click="emit('close')" />
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/ForkWorkflowDialog.vue
+++ b/src/components/dialog/ForkWorkflowDialog.vue
@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import api from '@/api'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import { WorkflowShare } from '@/api/types'
+import { useToast } from 'vue-toastification'
+import { useI18n } from 'vue-i18n'
+import { useGlobalSettingsStore } from '@/stores'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+
+// 国际化
+const { t } = useI18n()
+
+// 输入参数
+const props = defineProps({
+  workflow: Object as PropType<WorkflowShare>,
+  eventTypes: {
+    type: Array as PropType<Array<{ title: string; value: string }>>,
+    default: () => [],
+  },
+})
+
+// 定义事件
+const emit = defineEmits(['fork', 'delete', 'close'])
+
+// 从 provide 中获取全局设置
+// 全局设置
+const globalSettingsStore = useGlobalSettingsStore()
+const globalSettings = globalSettingsStore.globalSettings
+
+// 提示框
+const $toast = useToast()
+
+// 处理中
+const processing = ref(false)
+
+// 删除中
+const deleting = ref(false)
+
+// 根据事件类型值获取显示文本
+const getEventTypeText = (eventTypeValue: string) => {
+  const eventType = props.eventTypes.find(item => item.value === eventTypeValue)
+  return eventType ? eventType.title : eventTypeValue
+}
+
+// 流程图相关
+const { nodes, edges } = useVueFlow()
+
+// 自定义节点类型
+const nodeTypes: Record<string, any> = ref({})
+
+// 自动扫描目录下所有的 .vue 文件
+const components = import.meta.glob('../workflow/*Action.vue')
+
+// 动态加载某个组件
+const loadComponent = async (componentName: string) => {
+  const component = components[`../workflow/${componentName}.vue`]
+  if (component) {
+    return ((await component()) as any).default
+  }
+  throw new Error(t('dialog.workflowActions.componentNotFound', { component: componentName }))
+}
+
+// 将所有components中的组件加载到nodeTypes中
+for (const path in components) {
+  const componentName = path.match(/\.\/workflow\/(.*).vue$/)?.[1]
+  if (!componentName) {
+    continue
+  }
+  loadComponent(componentName).then(component => {
+    nodeTypes.value[componentName] = markRaw(component)
+  })
+}
+
+// 解析工作流数据
+const parsedWorkflow = computed(() => {
+  if (!props.workflow) return null
+
+  try {
+    const workflow = { ...props.workflow }
+
+    // 解析actions
+    if (typeof workflow.actions === 'string') {
+      workflow.actions = JSON.parse(workflow.actions)
+    }
+
+    // 解析flows
+    if (typeof workflow.flows === 'string') {
+      workflow.flows = JSON.parse(workflow.flows)
+    }
+
+    return workflow
+  } catch (error) {
+    console.error('解析工作流数据失败:', error)
+    return props.workflow
+  }
+})
+
+// 初始化流程图数据
+onMounted(() => {
+  if (parsedWorkflow.value) {
+    nodes.value = parsedWorkflow.value.actions ?? []
+    edges.value = parsedWorkflow.value.flows ?? []
+  }
+})
+
+// 复用工作流
+async function doFork() {
+  // 开始处理
+  startNProgress()
+  try {
+    processing.value = true
+    // 请求API
+    const result: { [key: string]: any } = await api.post('workflow/fork', props.workflow)
+    // 工作流状态
+    if (result.success) {
+      $toast.success(t('workflow.addSuccess', { name: props.workflow?.share_title }))
+      // 完成
+      emit('fork', result.data.id)
+    } else {
+      $toast.error(t('workflow.addFailed', { name: props.workflow?.share_title, message: result.message }))
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    processing.value = false
+    doneNProgress()
+  }
+}
+
+// 删除工作流分享
+async function doDelete() {
+  // 开始处理
+  startNProgress()
+  try {
+    deleting.value = true
+    // 请求API
+    const result: { [key: string]: any } = await api.delete(`workflow/share/${props.workflow?.id}`, {
+      params: {
+        share_uid: globalSettings.USER_UNIQUE_ID,
+      },
+    })
+    // 工作流状态
+    if (result.success) {
+      $toast.success(t('workflow.cancelSuccess'))
+      // 完成
+      emit('delete', result.data.id)
+    } else {
+      $toast.error(t('workflow.cancelFailed', { message: result.message }))
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    deleting.value = false
+    doneNProgress()
+  }
+}
+</script>
+<template>
+  <DialogWrapper max-width="40rem" scrollable>
+    <VCard>
+      <VCardText>
+        <VCol>
+          <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
+            <div class="ma-auto mt-5">
+              <div class="workflow-preview">
+                <VueFlow
+                  :nodes="nodes"
+                  :edges="edges"
+                  :nodeTypes="nodeTypes"
+                  :default-edge-options="{ type: 'animation', animated: true }"
+                  :delete-key-code="null"
+                  :select-nodes-on-drag="false"
+                  :nodes-draggable="false"
+                  :nodes-connectable="false"
+                  :fit-view="true"
+                  :fit-view-options="{ padding: 0.1, minZoom: 0.2, maxZoom: 1 }"
+                  :default-viewport="{ x: 0, y: 0, zoom: 0.2 }"
+                  class="workflow-preview-flow"
+                />
+              </div>
+            </div>
+
+            <!-- 右侧内容 -->
+            <div class="flex-grow">
+              <VCardItem>
+                <VCardTitle
+                  class="text-center text-md-left break-words whitespace-break-spaces line-clamp-2 overflow-hidden text-ellipsis"
+                >
+                  {{ props.workflow?.share_title }}
+                </VCardTitle>
+                <VCardSubtitle
+                  class="text-center text-md-left break-words whitespace-break-spaces line-clamp-4 overflow-hidden text-ellipsis"
+                >
+                  {{ props.workflow?.share_comment }}
+                </VCardSubtitle>
+                <VList lines="one">
+                  <VListItem class="ps-0">
+                    <VListItemTitle class="text-center text-md-left">
+                      <span class="font-weight-medium">{{ t('workflow.sharer') }}：</span>
+                      <span class="text-body-1"> {{ props.workflow?.share_user }}</span>
+                    </VListItemTitle>
+                  </VListItem>
+                  <VListItem class="ps-0" v-if="props.workflow?.trigger_type || props.workflow?.timer">
+                    <VListItemTitle class="text-center text-md-left">
+                      <span class="font-weight-medium">{{ t('workflow.trigger') }}：</span>
+                      <span class="text-body-1">
+                        <span v-if="props.workflow?.trigger_type === 'timer' || !props.workflow?.trigger_type">
+                          <VIcon icon="mdi-clock-outline" size="small" class="me-1" />
+                          {{ props.workflow?.timer }}
+                        </span>
+                        <span v-else-if="props.workflow?.trigger_type === 'event'">
+                          <VIcon icon="mdi-calendar-check" size="small" class="me-1" />
+                          {{ getEventTypeText(props.workflow?.event_type || '') }}
+                        </span>
+                        <span v-else-if="props.workflow?.trigger_type === 'manual'">
+                          <VIcon icon="mdi-hand-pointing-up" size="small" class="me-1" />
+                          {{ t('workflow.manualTrigger') }}
+                        </span>
+                      </span>
+                    </VListItemTitle>
+                  </VListItem>
+                  <VListItem class="ps-0" v-if="parsedWorkflow?.actions">
+                    <VListItemTitle class="text-center text-md-left">
+                      <span class="font-weight-medium">{{ t('workflow.actionCount') }}：</span>
+                      <span class="text-body-1"> {{ parsedWorkflow?.actions?.length }}</span>
+                    </VListItemTitle>
+                  </VListItem>
+                </VList>
+                <div class="text-center text-md-left">
+                  <div>
+                    <VBtn
+                      color="primary"
+                      :disabled="processing"
+                      @click="doFork"
+                      prepend-icon="mdi-heart"
+                      :loading="processing"
+                      class="mb-2 me-2"
+                    >
+                      {{ t('workflow.normalFork') }}
+                    </VBtn>
+                    <VBtn
+                      v-if="
+                        (props.workflow?.share_uid && props.workflow?.share_uid === globalSettings.USER_UNIQUE_ID) ||
+                        globalSettings.WORKFLOW_SHARE_MANAGE
+                      "
+                      color="error"
+                      :disabled="deleting"
+                      @click="doDelete"
+                      prepend-icon="mdi-delete"
+                      :loading="deleting"
+                      class="mb-2 me-2"
+                    >
+                      {{ t('workflow.cancelShare') }}
+                    </VBtn>
+                  </div>
+                  <div class="text-xs mt-2" v-if="props.workflow?.count">
+                    <VIcon icon="mdi-fire" />{{
+                      t('workflow.usageCount', { count: props.workflow?.count?.toLocaleString() })
+                    }}
+                  </div>
+                </div>
+              </VCardItem>
+            </div>
+          </div>
+        </VCol>
+      </VCardText>
+      <VDialogCloseBtn @click="emit('close')" />
+    </VCard>
+  </DialogWrapper>
+</template>
+
+<style lang="scss">
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
+@import '@vue-flow/minimap/dist/style.css';
+
+.workflow-preview {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-surface), 0.8);
+  block-size: 280px;
+  inline-size: 240px;
+}
+
+.workflow-preview-flow {
+  block-size: 100%;
+  inline-size: 100%;
+
+  .vue-flow__node {
+    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    border-radius: 8px;
+    font-size: 10px;
+
+    &:hover {
+      box-shadow: none;
+      transform: none;
+    }
+
+    &.selected {
+      box-shadow: none;
+    }
+  }
+
+  .vue-flow__edge-path,
+  .vue-flow__connection-path {
+    stroke-width: 2;
+  }
+
+  .vue-flow__handle {
+    border-radius: 2px;
+    block-size: 12px;
+    inline-size: 4px;
+  }
+
+  // 自定义动作连线样式
+  .vue-flow__edge.animation {
+    .vue-flow__edge-path {
+      stroke: rgb(var(--v-theme-primary));
+    }
+
+    &.selected {
+      .vue-flow__edge-path {
+        stroke: rgb(var(--v-theme-primary));
+        stroke-width: 3;
+      }
+    }
+  }
+}
+
+@media screen and (width <= 600px) {
+  .workflow-preview {
+    block-size: 240px;
+    inline-size: 240px;
+  }
+}
+</style>
--- a/src/components/dialog/ImportCodeDialog.vue
+++ b/src/components/dialog/ImportCodeDialog.vue
@@ -24,7 +24,7 @@ function handleImport() {
 </script>

 <template>
-  <VDialog width="40rem" scrollable max-height="85vh">
+  <DialogWrapper width="40rem" scrollable max-height="85vh">
    <VCard>
      <VCardItem>
        <template #prepend>
@@ -43,5 +43,5 @@ function handleImport() {
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/MediaInfoDialog.vue
+++ b/src/components/dialog/MediaInfoDialog.vue
@@ -15,12 +15,12 @@ defineProps({
 const emit = defineEmits(['close'])
 </script>
 <template>
-  <VDialog max-width="50rem">
+  <DialogWrapper max-width="50rem">
    <VCard>
      <VDialogCloseBtn @click="emit('close')" />
      <VCardItem>
        <MediaInfoCard :context="context" />
      </VCardItem>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/PluginConfigDialog.vue
+++ b/src/components/dialog/PluginConfigDialog.vue
@@ -3,7 +3,7 @@ import { useDisplay } from 'vuetify'
 import type { Plugin } from '@/api/types'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import api from '@/api'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import FormRender from '../render/FormRender.vue'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
@@ -148,7 +148,7 @@ onBeforeMount(async () => {
 })
 </script>
 <template>
-  <VDialog scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
    <!-- Vuetify 渲染模式 -->
    <VCard v-if="renderMode === 'vuetify'" :title="`${props.plugin?.plugin_name} - ${t('dialog.pluginConfig.title')}`">
      <VDialogCloseBtn @click="emit('close')" />
@@ -187,5 +187,5 @@ onBeforeMount(async () => {

    <!-- 进度框 -->
    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/PluginDataDialog.vue
+++ b/src/components/dialog/PluginDataDialog.vue
@@ -4,12 +4,17 @@ import type { Plugin } from '@/api/types'
 import PageRender from '@/components/render/PageRender.vue'
 import api from '@/api'
 import { loadRemoteComponent } from '@/utils/federationLoader'
+import { usePWA } from '@/composables/usePWA'

 // 输入参数
 const props = defineProps({
  plugin: {
    type: Object as PropType<Plugin>,
  },
+  show_switch: {
+    type: Boolean,
+    default: true,
+  },
 })

 // 定义事件
@@ -18,7 +23,8 @@ const emit = defineEmits(['close', 'save', 'switch'])
 // 显示器宽度
 const display = useDisplay()
 // APP
-const appMode = inject('pwaMode') && display.mdAndDown.value
+// PWA模式检测
+const { appMode } = usePWA()

 // 是否刷新
 const isRefreshed = ref(false)
@@ -118,7 +124,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
    <!-- Vuetify 渲染模式 -->
    <VCard v-if="renderMode === 'vuetify'" :title="`${props.plugin?.plugin_name}`">
      <VDialogCloseBtn @click="emit('close')" />
@@ -130,6 +136,7 @@ onMounted(() => {
        </div>
      </VCardText>
      <VFab
+        v-if="show_switch"
        icon="mdi-cog"
        location="bottom"
        size="x-large"
@@ -146,11 +153,12 @@ onMounted(() => {
        <component
          :is="dynamicComponent"
          :api="api"
+          :show_switch="show_switch"
          @action="handleAction"
          @switch="emit('switch')"
          @close="emit('close')"
        />
      </VCardText>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/PluginMarketSettingDialog.vue
+++ b/src/components/dialog/PluginMarketSettingDialog.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import api from '@/api'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { useDisplay } from 'vuetify'
@@ -63,7 +63,7 @@ onMounted(() => {
 </script>

 <template>
-  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
    <VCard>
      <VCardItem>
        <VCardTitle>
@@ -89,5 +89,5 @@ onMounted(() => {
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/ProgressDialog.vue
+++ b/src/components/dialog/ProgressDialog.vue
@@ -10,12 +10,12 @@ const props = defineProps({
 </script>
 <template>
  <!-- Progress Dialog -->
-  <VDialog :scrim="false" width="25rem">
+  <DialogWrapper :scrim="false" width="25rem">
    <VCard elevation="3" color="primary">
      <VCardText class="text-center">
        {{ props.text || t('dialog.progress.processing') }}
        <VProgressLinear color="white" class="mb-0 mt-1" :model-value="props.value" indeterminate />
      </VCardText>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/RcloneConfigDialog.vue
+++ b/src/components/dialog/RcloneConfigDialog.vue
@@ -57,7 +57,7 @@ async function handleReset() {
 </script>

 <template>
-  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
    <VCard>
      <VDialogCloseBtn @click="emit('close')" />
      <VCardItem>
@@ -99,5 +99,5 @@ async function handleReset() {
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/ReorganizeDialog.vue
+++ b/src/components/dialog/ReorganizeDialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import MediaIdSelector from '../misc/MediaIdSelector.vue'
 import api from '@/api'
 import { transferTypeOptions } from '@/api/constants'
@@ -8,9 +8,12 @@ import { useDisplay } from 'vuetify'
 import ProgressDialog from './ProgressDialog.vue'
 import { FileItem, StorageConf, TransferDirectoryConf, TransferForm } from '@/api/types'
 import { useI18n } from 'vue-i18n'
+import { useGlobalSettingsStore } from '@/stores'
+import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'

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

 // 显示器宽度
 const display = useDisplay()
@@ -24,10 +27,12 @@ const props = defineProps({
 })

 // 从 provide 中获取全局设置
-const globalSettings: any = inject('globalSettings')
+// 全局设置
+const globalSettingsStore = useGlobalSettingsStore()
+const globalSettings = globalSettingsStore.globalSettings

 // 当前识别类型
-const mediaSource = ref(globalSettings.data?.RECOGNIZE_SOURCE || 'themoviedb')
+const mediaSource = ref(globalSettings.RECOGNIZE_SOURCE || 'themoviedb')

 // 定义事件
 const emit = defineEmits(['done', 'close'])
@@ -46,8 +51,8 @@ const $toast = useToast()
 // TMDB选择对话框
 const mediaSelectorDialog = ref(false)

-// 加载进度SSE
-const progressEventSource = ref<EventSource>()
+// 进度是否激活
+const progressActive = ref(false)

 // 整理进度条
 const progressDialog = ref(false)
@@ -186,22 +191,34 @@ async function handleTransferLog(logid: number, background: boolean = false) {
  }
 }

+// 进度SSE消息处理函数
+function handleProgressMessage(event: MessageEvent) {
+  const progress = JSON.parse(event.data)
+  if (progress) {
+    progressText.value = progress.text
+    progressValue.value = progress.value
+  }
+}
+
+// 使用优化的进度SSE连接
+const progressSSE = useProgressSSE(
+  `${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer`,
+  handleProgressMessage,
+  'reorganize-progress',
+  progressActive
+)
+
 // 使用SSE监听加载进度
 function startLoadingProgress() {
  progressText.value = t('dialog.reorganize.processing')
-  progressEventSource.value = new EventSource(`${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer`)
-  progressEventSource.value.onmessage = event => {
-    const progress = JSON.parse(event.data)
-    if (progress) {
-      progressText.value = progress.text
-      progressValue.value = progress.value
-    }
-  }
+  progressActive.value = true
+  progressSSE.start()
 }

 // 停止监听加载进度
 function stopLoadingProgress() {
-  progressEventSource.value?.close()
+  progressActive.value = false
+  progressSSE.stop()
 }

 // 整理文件
@@ -252,7 +269,7 @@ onUnmounted(() => {
 </script>

 <template>
-  <VDialog scrollable max-width="45rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="45rem" :fullscreen="!display.mdAndUp.value">
    <VCard>
      <VCardItem class="py-2">
        <template #prepend> <VIcon icon="mdi-folder-move" class="me-2" /> </template>
@@ -470,7 +487,7 @@ onUnmounted(() => {
    <!-- 手动整理进度框 -->
    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
    <!-- TMDB ID搜索框 -->
-    <VDialog v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
+    <DialogWrapper v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
      <MediaIdSelector
        v-if="mediaSource === 'themoviedb'"
        v-model="transferForm.tmdbid"
@@ -483,6 +500,6 @@ onUnmounted(() => {
        @close="mediaSelectorDialog = false"
        :type="mediaSource"
      />
-    </VDialog>
-  </VDialog>
+    </DialogWrapper>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/SearchBarDialog.vue
+++ b/src/components/dialog/SearchBarDialog.vue
@@ -298,6 +298,19 @@ function searchHistory() {
  emit('close')
 }

+// 跳转到订阅分享页面
+function searchSubscribeShares() {
+  if (!searchWord.value) return
+  saveRecentSearches(searchWord.value)
+  router.push({
+    path: '/subscribe-share',
+    query: {
+      keyword: searchWord.value,
+    },
+  })
+  emit('close')
+}
+
 // 跳转插件页面
 function showPlugin(pluginId: string) {
  router.push({
@@ -357,7 +370,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog v-model="dialog" max-width="42rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper v-model="dialog" max-width="42rem" scrollable :fullscreen="!display.mdAndUp.value">
    <VCard class="search-dialog">
      <!-- 搜索输入框 -->
      <VCardItem class="pa-4 pa-sm-5 search-box-container">
@@ -484,6 +497,37 @@ onMounted(() => {
            </template>
          </VHover>

+          <VHover v-if="hasSubscribePermission">
+            <template #default="hover">
+              <VListItem
+                density="comfortable"
+                link
+                rounded="xl"
+                v-bind="hover.props"
+                @click="searchSubscribeShares"
+                class="search-option mx-2 mx-sm-4 my-1"
+              >
+                <template #prepend>
+                  <div class="option-icon-wrapper d-flex align-center justify-center">
+                    <VIcon
+                      icon="mdi-share-variant"
+                      :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
+                      size="small"
+                    />
+                  </div>
+                </template>
+                <VListItemTitle class="font-weight-medium">{{ t('subscribe.searchShares') }}</VListItemTitle>
+                <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+                  {{ t('common.search') }} <span class="primary-text font-weight-medium">{{ searchWord }}</span>
+                  {{ t('dialog.searchBar.subscribeShareSearch') }}
+                </VListItemSubtitle>
+                <template #append>
+                  <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
+                </template>
+              </VListItem>
+            </template>
+          </VHover>
+
          <VHover v-if="hasManagePermission">
            <template #default="hover">
              <VListItem
@@ -741,7 +785,7 @@ onMounted(() => {
        </div>
      </VCardText>
    </VCard>
-  </VDialog>
+  </DialogWrapper>

  <!-- 站点选择对话框 -->
  <SearchSiteDialog
--- a/src/components/dialog/SearchSiteDialog.vue
+++ b/src/components/dialog/SearchSiteDialog.vue
@@ -56,7 +56,7 @@ const filteredSites = computed(() => {
 </script>
 <template>
  <!-- Site Selection Dialog -->
-  <VDialog max-width="40rem" fullscreen-mobile>
+  <DialogWrapper max-width="40rem" fullscreen-mobile>
    <VCard class="site-dialog">
      <VCardItem>
        <template #prepend>
@@ -169,7 +169,7 @@ const filteredSites = computed(() => {
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
 <style scoped>
 .site-checkbox-wrapper {
--- a/src/components/dialog/SiteAddEditDialog.vue
+++ b/src/components/dialog/SiteAddEditDialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import type { DownloaderConf, Site } from '@/api/types'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { numberValidator, requiredValidator } from '@/@validators'
@@ -147,7 +147,7 @@ onMounted(async () => {
 </script>

 <template>
-  <VDialog scrollable :close-on-back="false" eager max-width="45rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable :close-on-back="false" eager max-width="45rem" :fullscreen="!display.mdAndUp.value">
    <VCard>
      <VCardItem :class="props.oper === 'add' ? 'py-3' : 'py-2'">
        <template #prepend>
@@ -203,7 +203,7 @@ onMounted(async () => {
                prepend-inner-icon="mdi-rss"
              />
            </VCol>
-            <VCol cols="12" md="3">
+            <VCol cols="6" md="3">
              <VTextField
                v-model="siteForm.timeout"
                :label="t('site.fields.timeout')"
@@ -350,5 +350,5 @@ onMounted(async () => {
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/SiteCookieUpdateDialog.vue
+++ b/src/components/dialog/SiteCookieUpdateDialog.vue
@@ -2,7 +2,7 @@
 import api from '@/api'
 import { Site } from '@/api/types'
 import { requiredValidator } from '@/@validators'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'

@@ -71,7 +71,7 @@ async function updateSiteCookie() {
 }
 </script>
 <template>
-  <VDialog max-width="30rem" scrollable>
+  <DialogWrapper max-width="30rem" scrollable>
    <!-- Dialog Content -->
    <VCard :title="t('dialog.siteCookieUpdate.title')">
      <VDialogCloseBtn @click="emit('close')" />
@@ -114,5 +114,5 @@ async function updateSiteCookie() {
    </VCard>
    <!-- 进度框 -->
    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/Show More
+++ b/Show More