修复数据库类型判断

更新版本号至2.7.3
fix https://github.com/jxxghp/MoviePilot/issues/4769
2026-05-09 22:22:58 +08:00 · 2025-08-19 13:18:02 +08:00 · 2025-08-19 13:08:23 +08:00 · 2025-08-17 11:38:17 +08:00 · 2025-08-17 08:39:02 +08:00 · 2025-08-12 15:28:58 +08:00
171 changed files with 8052 additions and 19894 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,342 +1,430 @@
 <!DOCTYPE html>
-<html lang="zh-CN" style="
+<html
+  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>
+    <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"
+    />

-<head>
-  <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="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="description" content="MoviePilot - 智能影视媒体库管理工具" />
-  <meta name="author" content="MoviePilot" />
-  <meta name="keywords" content="MoviePilot,影视,媒体库,管理" />
+    <!-- 安全和隐私 -->
+    <meta name="Robots" content="noindex,nofollow,noarchive" />
+    <meta name="referrer" content="no-referrer" />

-  <!-- 安全和隐私 -->
-  <meta name="Robots" content="noindex,nofollow,noarchive" />
-  <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" />

-  <!-- 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.png" />

-  <!-- 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.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" />

-  <!-- 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" />
+    <!-- iOS Safari 防止自动识别 -->
+    <meta name="apple-mobile-web-app-orientations" content="portrait" />

-  <!-- 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" />

-  <!-- 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" />

-  <!-- 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="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" />

-  <!-- 屏幕方向锁定 -->
-  <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" />

-  <!-- UC浏览器优化 -->
-  <meta name="browsermode" content="application" />
-  <meta name="wap-font-scale" content="no" />
+    <!-- 360浏览器优化 -->
+    <meta name="renderer" content="webkit" />

-  <!-- 360浏览器优化 -->
-  <meta name="renderer" content="webkit" />
+    <!-- 触摸优化 -->
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="MobileOptimized" content="320" />

-  <!-- 触摸优化 -->
-  <meta name="HandheldFriendly" content="True" />
-  <meta name="MobileOptimized" content="320" />
+    <!-- 缓存控制 -->
+    <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" />

-  <!-- 缓存控制 -->
-  <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 />

-  <!-- 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;
-    }
+    <!-- 预加载关键资源 -->
+    <link rel="preload" href="/logo.png" as="image" />
+    <link rel="modulepreload" href="/src/main.ts" />

-    .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);
+    <!-- 内联关键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;
      }

-      100% {
-        transform: rotate(1turn);
-      }
-    }
-
-    @keyframes rotate-opacity {
-      0% {
-        opacity: 0.1;
-        transform: rotate(0deg);
+      .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;
      }

-      100% {
-        opacity: 1;
-        transform: rotate(1turn);
+      /* 添加logo完成动画 - 放大虚化效果 */
+      .loading-complete .loading-logo {
+        filter: blur(10px);
+        opacity: 0;
+        transform: scale(1.5);
      }
-    }
-  </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)
+      /* 添加加载背景消失动画 - 放大虚化效果 */
+      .loading-complete {
+        filter: blur(15px);
+        opacity: 0;
+        transform: scale(1.2);
+      }

-    // 状态栏适配
-    if (window.navigator.standalone) {
-      document.documentElement.style.setProperty('--status-bar-height', '20px')
-    }
+      .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;
+      }

-    // 安全区域适配
-    function updateSafeArea() {
-      const safeAreaTop = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')
-      const safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')
+      /* 完成时隐藏加载动画 */
+      .loading-complete .loading {
+        opacity: 0;
+      }

-      if (safeAreaTop) document.documentElement.style.setProperty('--safe-area-top', safeAreaTop)
-      if (safeAreaBottom) document.documentElement.style.setProperty('--safe-area-bottom', safeAreaBottom)
-    }
+      .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%;
+      }

-    updateSafeArea()
-    window.addEventListener('resize', updateSafeArea)
-    window.addEventListener('orientationchange', updateSafeArea)
-  </script>
-</head>
+      .loading .effect-1 {
+        animation: rotate 1s ease infinite;
+      }

-<body style="margin: 0; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch;">
-  <div id="loading-bg">
-    <div class="loading-logo">
-      <!-- Logo -->
-      <svg width="160px" height="160px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
-        style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2">
-        <g transform="matrix(1,0,0,1,-2606,-236)">
-          <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
-            <rect x="0" y="0" width="192" height="192" style="fill: none" />
-            <g transform="matrix(-0.800798,0.462341,-0.769972,-1.33363,1869.11,-896.718)">
-              <path
-                d="M2241.27,-28.175C2238.86,-28.931 2236.64,-29.181 2234.48,-29.254L2159.78,-29.286L2165.01,-11.207C2167.16,-13.121 2169.64,-13.722 2172.26,-13.808L2222.12,-13.822C2223.52,-13.824 2225,-13.701 2226.78,-13.108L2241.27,-28.175Z"
-                style="fill: url(#_Linear1)" />
-            </g>
-            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-              <path
-                d="M2205.67,331.428L2205.67,332.25L2205.67,352.835C2205.67,354.263 2204.91,355.583 2203.67,356.298C2202.43,357.012 2200.91,357.013 2199.67,356.3L2190.78,351.174C2189.73,350.595 2188.83,350.083 2188.03,349.59L2187.45,349.257C2186.66,348.725 2185.91,348.142 2185.21,347.461C2185.08,347.331 2184.95,347.198 2184.82,347.061C2184.26,346.457 2183.75,345.778 2183.3,344.995C2182.16,343.05 2181.69,341.024 2181.68,338.948L2181.67,268.923L2209.77,274.425C2207.5,275.639 2205.68,278.3 2205.67,281.429L2205.67,331.428Z"
-                style="fill: url(#_Linear2)" />
-            </g>
-            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-              <path
-                d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2295.93,363.064C2295.73,363.184 2295.53,363.301 2295.32,363.414L2295.93,363.064Z"
-                style="fill: rgb(141, 81, 249)" />
-            </g>
-            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-              <path
-                d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2299.79,360.238C2299.79,360.238 2320.03,348.464 2320.04,348.461C2323.1,346.372 2324.69,343.444 2325.17,339.877C2325.17,339.877 2325.17,269.846 2325.17,269.839C2325.06,267.482 2324.56,265.739 2323.61,264.133C2322.56,262.445 2321.26,261.005 2319.55,259.97L2304.42,251.217C2303.96,250.949 2303.39,250.948 2302.92,251.216C2302.46,251.484 2302.17,251.979 2302.17,252.515L2302.17,276.775L2302.17,277.879L2302.17,352.926C2302.17,352.933 2302.17,352.941 2302.17,352.948C2302.04,355.861 2301.23,358.279 2299.79,360.238Z"
-                style="fill: url(#_Linear3)" />
-            </g>
-            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-              <path
-                d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256Z"
-                style="fill: rgb(165, 118, 255)" />
-            </g>
-            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-              <path
-                d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256ZM2253.68,223.756C2251.6,223.789 2249.87,224.269 2248.47,224.996L2188.17,259.754C2184.35,261.992 2182.35,265.367 2182.18,269.874C2182.18,269.874 2182.17,292.759 2182.17,292.757C2183.25,290.047 2185.13,288.051 2187.62,286.607L2249.57,250.919C2249.58,250.917 2249.58,250.915 2249.59,250.913C2250.83,250.243 2252.17,249.839 2253.67,249.847C2255.21,249.841 2256.54,250.253 2257.76,250.914C2257.76,250.916 2257.76,250.917 2257.76,250.919L2274.92,260.807C2275.38,261.075 2275.95,261.074 2276.42,260.806C2276.88,260.538 2277.17,260.043 2277.17,259.508L2277.17,237.568C2277.17,236.317 2276.5,235.16 2275.42,234.535C2275.42,234.535 2258.88,225 2258.87,224.996C2256.87,224.049 2255.2,223.746 2253.68,223.756Z"
-                style="fill: url(#_Linear4)" />
-            </g>
-            <g transform="matrix(0.800798,0.462341,0.769972,-1.33363,-1677.22,-896.858)">
-              <path
-                d="M2241.55,-28.184C2239.1,-28.989 2236.83,-29.204 2234.68,-29.295C2234.68,-29.295 2220.82,-29.3 2215.03,-29.303C2213.48,-29.303 2212.05,-28.808 2211.28,-28.004C2208.65,-25.275 2202.56,-18.936 2199.45,-15.709C2199.07,-15.306 2199.07,-14.809 2199.46,-14.406C2199.85,-14.004 2200.57,-13.758 2201.34,-13.761C2208.36,-13.788 2222.72,-13.845 2222.72,-13.845C2223.98,-13.851 2225.44,-13.657 2227.06,-13.117L2241.55,-28.184Z"
-                style="fill: rgb(141, 81, 249)" />
-            </g>
-            <g transform="matrix(-4.32309,0,0,12.4454,9610.35,-1450.35)">
-              <path
-                d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z"
-                style="fill: rgb(104, 0, 197)" />
-              <clipPath id="_clip5">
+      .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>
+      // 检测系统主题是否为深色模式
+      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; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch">
+    <div id="loading-bg">
+      <div class="loading-logo">
+        <!-- Logo -->
+        <svg
+          width="160px"
+          height="160px"
+          viewBox="0 0 192 192"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
+        >
+          <g transform="matrix(1,0,0,1,-2606,-236)">
+            <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
+              <rect x="0" y="0" width="192" height="192" style="fill: none" />
+              <g transform="matrix(-0.800798,0.462341,-0.769972,-1.33363,1869.11,-896.718)">
                <path
-                  d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z" />
-              </clipPath>
-              <g clip-path="url(#_clip5)">
-                <g transform="matrix(0.124502,0.074907,0.206623,-0.0414384,1997.62,-7.40235)">
+                  d="M2241.27,-28.175C2238.86,-28.931 2236.64,-29.181 2234.48,-29.254L2159.78,-29.286L2165.01,-11.207C2167.16,-13.121 2169.64,-13.722 2172.26,-13.808L2222.12,-13.822C2223.52,-13.824 2225,-13.701 2226.78,-13.108L2241.27,-28.175Z"
+                  style="fill: url(#_Linear1)"
+                />
+              </g>
+              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+                <path
+                  d="M2205.67,331.428L2205.67,332.25L2205.67,352.835C2205.67,354.263 2204.91,355.583 2203.67,356.298C2202.43,357.012 2200.91,357.013 2199.67,356.3L2190.78,351.174C2189.73,350.595 2188.83,350.083 2188.03,349.59L2187.45,349.257C2186.66,348.725 2185.91,348.142 2185.21,347.461C2185.08,347.331 2184.95,347.198 2184.82,347.061C2184.26,346.457 2183.75,345.778 2183.3,344.995C2182.16,343.05 2181.69,341.024 2181.68,338.948L2181.67,268.923L2209.77,274.425C2207.5,275.639 2205.68,278.3 2205.67,281.429L2205.67,331.428Z"
+                  style="fill: url(#_Linear2)"
+                />
+              </g>
+              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+                <path
+                  d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2295.93,363.064C2295.73,363.184 2295.53,363.301 2295.32,363.414L2295.93,363.064Z"
+                  style="fill: rgb(141, 81, 249)"
+                />
+              </g>
+              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+                <path
+                  d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2299.79,360.238C2299.79,360.238 2320.03,348.464 2320.04,348.461C2323.1,346.372 2324.69,343.444 2325.17,339.877C2325.17,339.877 2325.17,269.846 2325.17,269.839C2325.06,267.482 2324.56,265.739 2323.61,264.133C2322.56,262.445 2321.26,261.005 2319.55,259.97L2304.42,251.217C2303.96,250.949 2303.39,250.948 2302.92,251.216C2302.46,251.484 2302.17,251.979 2302.17,252.515L2302.17,276.775L2302.17,277.879L2302.17,352.926C2302.17,352.933 2302.17,352.941 2302.17,352.948C2302.04,355.861 2301.23,358.279 2299.79,360.238Z"
+                  style="fill: url(#_Linear3)"
+                />
+              </g>
+              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+                <path
+                  d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256Z"
+                  style="fill: rgb(165, 118, 255)"
+                />
+              </g>
+              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+                <path
+                  d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256ZM2253.68,223.756C2251.6,223.789 2249.87,224.269 2248.47,224.996L2188.17,259.754C2184.35,261.992 2182.35,265.367 2182.18,269.874C2182.18,269.874 2182.17,292.759 2182.17,292.757C2183.25,290.047 2185.13,288.051 2187.62,286.607L2249.57,250.919C2249.58,250.917 2249.58,250.915 2249.59,250.913C2250.83,250.243 2252.17,249.839 2253.67,249.847C2255.21,249.841 2256.54,250.253 2257.76,250.914C2257.76,250.916 2257.76,250.917 2257.76,250.919L2274.92,260.807C2275.38,261.075 2275.95,261.074 2276.42,260.806C2276.88,260.538 2277.17,260.043 2277.17,259.508L2277.17,237.568C2277.17,236.317 2276.5,235.16 2275.42,234.535C2275.42,234.535 2258.88,225 2258.87,224.996C2256.87,224.049 2255.2,223.746 2253.68,223.756Z"
+                  style="fill: url(#_Linear4)"
+                />
+              </g>
+              <g transform="matrix(0.800798,0.462341,0.769972,-1.33363,-1677.22,-896.858)">
+                <path
+                  d="M2241.55,-28.184C2239.1,-28.989 2236.83,-29.204 2234.68,-29.295C2234.68,-29.295 2220.82,-29.3 2215.03,-29.303C2213.48,-29.303 2212.05,-28.808 2211.28,-28.004C2208.65,-25.275 2202.56,-18.936 2199.45,-15.709C2199.07,-15.306 2199.07,-14.809 2199.46,-14.406C2199.85,-14.004 2200.57,-13.758 2201.34,-13.761C2208.36,-13.788 2222.72,-13.845 2222.72,-13.845C2223.98,-13.851 2225.44,-13.657 2227.06,-13.117L2241.55,-28.184Z"
+                  style="fill: rgb(141, 81, 249)"
+                />
+              </g>
+              <g transform="matrix(-4.32309,0,0,12.4454,9610.35,-1450.35)">
+                <path
+                  d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z"
+                  style="fill: rgb(104, 0, 197)"
+                />
+                <clipPath id="_clip5">
                  <path
-                    d="M1726.17,-64.249L1708.16,-72.303L1708.05,-23.514L1721.88,-32.386C1722.96,-33.241 1723.09,-33.944 1723.15,-34.636L1723.15,-54.373C1723.19,-56.238 1724.96,-57.594 1726.87,-56.686L1726.17,-64.249Z"
-                    style="fill: url(#_Linear6)" />
-                </g>
-                <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
-                  <path
-                    d="M1726.17,-45.661L1704.47,-40.254C1706.28,-40.527 1708.14,-40.212 1708.16,-39.416L1708.16,-18.976L1726.17,-18.976L1726.17,-45.661Z"
-                    style="fill: rgb(141, 81, 249)" />
-                </g>
-                <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
-                  <path
-                    d="M1726.17,-45.661L1726.17,-18.976L1708.16,-18.976L1708.16,-39.416C1707.79,-40.732 1704.5,-40.298 1702.68,-40.025L1726.17,-45.661ZM1705.49,-40.491C1706.2,-40.507 1706.87,-40.464 1707.4,-40.327C1708.01,-40.173 1708.48,-39.899 1708.62,-39.436C1708.62,-39.429 1708.62,-39.423 1708.62,-39.416L1708.62,-19.152C1708.62,-19.152 1725.72,-19.152 1725.72,-19.152L1725.72,-45.345L1705.49,-40.491Z"
-                    style="fill: url(#_Radial7)" />
+                    d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z"
+                  />
+                </clipPath>
+                <g clip-path="url(#_clip5)">
+                  <g transform="matrix(0.124502,0.074907,0.206623,-0.0414384,1997.62,-7.40235)">
+                    <path
+                      d="M1726.17,-64.249L1708.16,-72.303L1708.05,-23.514L1721.88,-32.386C1722.96,-33.241 1723.09,-33.944 1723.15,-34.636L1723.15,-54.373C1723.19,-56.238 1724.96,-57.594 1726.87,-56.686L1726.17,-64.249Z"
+                      style="fill: url(#_Linear6)"
+                    />
+                  </g>
+                  <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
+                    <path
+                      d="M1726.17,-45.661L1704.47,-40.254C1706.28,-40.527 1708.14,-40.212 1708.16,-39.416L1708.16,-18.976L1726.17,-18.976L1726.17,-45.661Z"
+                      style="fill: rgb(141, 81, 249)"
+                    />
+                  </g>
+                  <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
+                    <path
+                      d="M1726.17,-45.661L1726.17,-18.976L1708.16,-18.976L1708.16,-39.416C1707.79,-40.732 1704.5,-40.298 1702.68,-40.025L1726.17,-45.661ZM1705.49,-40.491C1706.2,-40.507 1706.87,-40.464 1707.4,-40.327C1708.01,-40.173 1708.48,-39.899 1708.62,-39.436C1708.62,-39.429 1708.62,-39.423 1708.62,-39.416L1708.62,-19.152C1708.62,-19.152 1725.72,-19.152 1725.72,-19.152L1725.72,-45.345L1705.49,-40.491Z"
+                      style="fill: url(#_Radial7)"
+                    />
+                  </g>
                </g>
              </g>
            </g>
          </g>
-        </g>
-        <defs>
-          <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
-            gradientTransform="matrix(-70.0711,-0.927611,1.54482,-42.0752,2233.59,-20.1891)">
-            <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
-            <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
-          </linearGradient>
-          <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
-            gradientTransform="matrix(4.78193e-15,-78.0949,78.0949,4.78193e-15,2195.72,354.021)">
-            <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
-            <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
-          </linearGradient>
-          <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
-            gradientTransform="matrix(41.6089,41.5866,-41.5866,41.6089,2282.31,262.837)">
-            <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
-            <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
-          </linearGradient>
-          <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
-            gradientTransform="matrix(9.25616,16.7005,-16.7005,9.25616,2215,243.712)">
-            <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
-            <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
-          </linearGradient>
-          <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
-            gradientTransform="matrix(-0.130164,-61.9937,59.4003,-0.135847,1711.63,-25.7957)">
-            <stop offset="0" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
-            <stop offset="0.51" style="stop-color: rgb(110, 38, 217); stop-opacity: 1" />
-            <stop offset="1" style="stop-color: rgb(91, 0, 197); stop-opacity: 1" />
-          </linearGradient>
-          <radialGradient id="_Radial7" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-            gradientTransform="matrix(13.8659,4.71436,-12.1609,5.37534,1708.16,-32.287)">
-            <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
-            <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
-          </radialGradient>
-        </defs>
-      </svg>
+          <defs>
+            <linearGradient
+              id="_Linear1"
+              x1="0"
+              y1="0"
+              x2="1"
+              y2="0"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="matrix(-70.0711,-0.927611,1.54482,-42.0752,2233.59,-20.1891)"
+            >
+              <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
+              <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
+            </linearGradient>
+            <linearGradient
+              id="_Linear2"
+              x1="0"
+              y1="0"
+              x2="1"
+              y2="0"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="matrix(4.78193e-15,-78.0949,78.0949,4.78193e-15,2195.72,354.021)"
+            >
+              <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
+              <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
+            </linearGradient>
+            <linearGradient
+              id="_Linear3"
+              x1="0"
+              y1="0"
+              x2="1"
+              y2="0"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="matrix(41.6089,41.5866,-41.5866,41.6089,2282.31,262.837)"
+            >
+              <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
+              <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
+            </linearGradient>
+            <linearGradient
+              id="_Linear4"
+              x1="0"
+              y1="0"
+              x2="1"
+              y2="0"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="matrix(9.25616,16.7005,-16.7005,9.25616,2215,243.712)"
+            >
+              <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
+              <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
+            </linearGradient>
+            <linearGradient
+              id="_Linear6"
+              x1="0"
+              y1="0"
+              x2="1"
+              y2="0"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="matrix(-0.130164,-61.9937,59.4003,-0.135847,1711.63,-25.7957)"
+            >
+              <stop offset="0" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
+              <stop offset="0.51" style="stop-color: rgb(110, 38, 217); stop-opacity: 1" />
+              <stop offset="1" style="stop-color: rgb(91, 0, 197); stop-opacity: 1" />
+            </linearGradient>
+            <radialGradient
+              id="_Radial7"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="matrix(13.8659,4.71436,-12.1609,5.37534,1708.16,-32.287)"
+            >
+              <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
+              <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
+            </radialGradient>
+          </defs>
+        </svg>
+      </div>
+      <div class="loading">
+        <div class="effect-1 effects"></div>
+        <div class="effect-2 effects"></div>
+        <div class="effect-3 effects"></div>
+      </div>
    </div>
-    <div class="loading">
-      <div class="effect-1 effects"></div>
-      <div class="effect-2 effects"></div>
-      <div class="effect-3 effects"></div>
-    </div>
-  </div>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "moviepilot",
-  "version": "2.6.3",
+  "version": "2.7.3",
  "private": true,
  "type": "module",
  "bin": "dist/service.js",
@@ -114,4 +114,4 @@
    "workbox-window": "^7.3.0"
  },
  "packageManager": "yarn@1.22.18"
-}
+}
--- a/public/offline.html
+++ b/public/offline.html
@@ -137,7 +137,7 @@
    
    <div class="status-badge">
      <span class="status-dot"></span>
-      <span>离线模式</span>
+      <span>离线状态</span>
    </div>
  </div>
  
@@ -157,4 +157,4 @@
    }
  </script>
 </body>
-</html>
+</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/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";
@@ -28,13 +28,32 @@ $header: ".layout-navbar";

    // 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,45 +0,0 @@
-%blurry-bg {
-    position: relative;
-    background: rgba(var(--v-theme-background), 1);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
-
-    @media (width > 768px) {
-      .v-theme--transparent & {
-        backdrop-filter: blur(5px);
-        background: rgba(var(--v-theme-background), 0.1);
-      }
-    }
-
-
-    @media (width <= 768px) {
-      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 & {
-          background: rgba(var(--v-theme-background), 0.3);
-        }
-    }
-  }
-}
--- 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/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
@@ -71,7 +71,7 @@ export const checkPWAStatus = async () => {
 }

 // 检测是否为移动设备
-const isMobileDevice = (): boolean => {
+export const isMobileDevice = (): boolean => {
  // 检查用户代理字符串
  const userAgent = navigator.userAgent || ''
  const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i
@@ -84,3 +84,15 @@ const isMobileDevice = (): boolean => {

  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
@@ -88,6 +88,9 @@ export default defineComponent({
        },
      })

+      // 检查是否有弹窗打开（通过CSS类名判断）
+      const isDialogOpen = document.documentElement.classList.contains('dialog-scroll-locked')
+
      return h(
        'div',
        {
@@ -96,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],
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,7 @@ 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()
@@ -212,6 +213,9 @@ onMounted(async () => {
  // 初始化data-theme属性
  updateHtmlThemeAttribute(globalTheme.name.value)

+  // 初始化主题管理器 - 统一处理主题初始化
+  await themeManager.setTheme(themeValue)
+
  // 监听主题变化
  watch(
    () => globalTheme.name.value,
@@ -253,7 +257,7 @@ onUnmounted(() => {
      <div v-if="isLogin && isTransparentTheme" class="global-blur-layer"></div>
    </div>
    <!-- 页面内容 -->
-    <VApp :class="{ 'transparent-app': isTransparentTheme }">
+    <VApp>
      <RouterView />
      <!-- PWA安装提示 -->
      <PWAInstallPrompt />
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -344,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
@@ -39,8 +39,9 @@ const globalOfflineStatus = useGlobalOfflineStatus()
 // 添加响应拦截器
 api.interceptors.response.use(
  response => {
-    // 成功响应时，清除应用离线状态
+    // 成功响应时，清除应用离线状态并重置连续错误计数
    globalOfflineStatus.setAppOffline(false)
+    globalOfflineStatus.resetConsecutiveErrors()
    return response.data
  },
  error => {
@@ -57,7 +58,8 @@ api.interceptors.response.use(
        if (error.code === 'ECONNABORTED') {
          reason = 'Request timeout'
        }
-        globalOfflineStatus.setAppOffline(true, reason)
+        // 记录网络错误，只有连续三次才会设置为离线模式
+        globalOfflineStatus.recordNetworkError(reason)
      }

      if (error.code === 'NETWORK_ERROR' || error.code === 'ERR_NETWORK') {
--- 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
@@ -954,6 +990,8 @@ export interface MediaServerPlayItem {
  link?: string
  // 播放百分比
  percent?: number
+  // 媒体服务器类型
+  server_type?: string
 }

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

 // 消息通知
@@ -1292,6 +1332,10 @@ export interface Workflow {
  description?: string
  // 定时器
  timer?: string
+  // 触发类型：timer-定时触发 event-事件触发 manual-手动触发
+  trigger_type?: string
+  // 事件类型（当trigger_type为event时使用）
+  event_type?: string
  // 状态
  state?: string
  // 当前执行动作
@@ -1355,3 +1399,13 @@ export interface TorrentCacheData {
  // 缓存数据
  data: TorrentCacheItem[]
 }
+
+// 订阅分享统计
+export interface SubscribeShareStatistics {
+  // 分享人
+  share_user?: string
+  // 分享数量
+  share_count?: number
+  // 总复用人次
+  total_reuse_count?: number
+}
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -3,9 +3,7 @@ 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'
-import { usePWA } from '@/composables/usePWA'

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

-// 显示器宽度
-const display = useDisplay()
-
-// APP
-// PWA模式检测
-const { appMode } = usePWA()
-
 const fileIcons = {
  // 压缩包
  zip: 'mdi-folder-zip-outline',
@@ -240,20 +231,6 @@ function stopDrag() {
  ;(document.body.style as any).webkitUserSelect = ''
  ;(document.body.style as any).mozUserSelect = ''
 }
-
-// 外层DIV大小控制
-const scrollStyle = computed(() => {
-  return appMode.value
-    ? '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.value
-    ? 'height: calc(100vh - 14rem - env(safe-area-inset-bottom) - 7rem)'
-    : 'height: calc(100vh - 14rem - env(safe-area-inset-bottom)'
-})
 </script>

 <template>
@@ -271,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"
@@ -295,7 +272,6 @@ const fileListStyle = computed(() => {
          :axios="axios"
          :refreshpending="refreshPending"
          :sort="sort"
-          :listStyle="fileListStyle"
          :showTree="showDirTree"
          :style="{ flex: 1 }"
          @pathchanged="pathChanged"
--- a/src/components/PWAInstallPrompt.vue
+++ b/src/components/PWAInstallPrompt.vue
@@ -15,9 +15,14 @@ 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
+  return !isInstalled.value && !dismissed.value && !showInstructions.value && isLogin.value && isHttps.value
 })

 // 显示延迟（避免立即显示）
@@ -62,8 +67,6 @@ const dismissBanner = () => {
  localStorage.setItem('pwa-install-dismissed', new Date().toISOString())
 }

-
-
 // 获取平台特定的安装说明
 const instructions = computed(() => {
  const rawInstructions = getInstallInstructions()
@@ -75,17 +78,17 @@ const instructions = computed(() => {
  // 直接使用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) {
      // 如果出现错误，说明没有更多步骤
@@ -130,7 +133,7 @@ const instructions = computed(() => {
  </Teleport>

  <!-- 手动安装说明对话框 -->
-  <VDialog v-model="showInstructions" max-width="500">
+  <DialogWrapper v-model="showInstructions" max-width="500">
    <VCard>
      <VCardItem>
        <VCardTitle class="d-flex align-center">
@@ -167,7 +170,7 @@ const instructions = computed(() => {
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>

 <style scoped>
--- 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
@@ -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
@@ -196,7 +196,7 @@ onUnmounted(() => {
      </VCard>
    </VHover>

-    <VDialog
+    <DialogWrapper
      v-if="downloaderInfoDialog"
      v-model="downloaderInfoDialog"
      scrollable
@@ -383,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
@@ -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
@@ -468,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>
@@ -481,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>
          <!-- 类型角标 -->
@@ -550,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>
--- a/src/components/cards/MediaServerCard.vue
+++ b/src/components/cards/MediaServerCard.vue
@@ -204,7 +204,7 @@ onMounted(() => {
      </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
@@ -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
@@ -90,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
@@ -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
@@ -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)}&cache=true`
+    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}`
 })
@@ -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
@@ -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/StorageCard.vue
+++ b/src/components/cards/StorageCard.vue
@@ -220,7 +220,7 @@ function onClose() {
      @close="smbConfigDialog = false"
      @done="handleDone"
    />
-    <VDialog
+    <DialogWrapper
      v-if="customConfigDialog"
      v-model="customConfigDialog"
      scrollable
@@ -263,6 +263,6 @@ function onClose() {
          </VBtn>
        </VCardActions>
      </VCard>
-    </VDialog>
+    </DialogWrapper>
  </div>
 </template>
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -346,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'"
@@ -443,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
@@ -121,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">
@@ -187,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
@@ -278,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>
@@ -361,7 +361,7 @@ onMounted(() => {
          </VList>
        </VCardText>
      </VCard>
-    </VDialog>
+    </DialogWrapper>

    <AddDownloadDialog
      v-if="addDownloadDialog"
--- a/src/components/cards/TorrentItem.vue
+++ b/src/components/cards/TorrentItem.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>

@@ -332,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/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
@@ -4,6 +4,7 @@ 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
@@ -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
@@ -170,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">
@@ -285,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
@@ -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
@@ -124,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')" />
@@ -160,5 +160,5 @@ onMounted(() => {
        />
      </VCardText>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/PluginMarketSettingDialog.vue
+++ b/src/components/dialog/PluginMarketSettingDialog.vue
@@ -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
@@ -269,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>
@@ -487,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"
@@ -500,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
@@ -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
@@ -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/src/components/dialog/SiteResourceDialog.vue
+++ b/src/components/dialog/SiteResourceDialog.vue
@@ -130,7 +130,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog scrollable fullscreen :scrim="false" transition="dialog-bottom-transition">
+  <DialogWrapper scrollable fullscreen :scrim="false" transition="dialog-bottom-transition">
    <VCard>
      <!-- Toolbar -->
      <div>
@@ -281,7 +281,7 @@ onMounted(() => {
      @error="addDownloadError"
      @close="addDownloadDialog = false"
    />
-  </VDialog>
+  </DialogWrapper>
 </template>

 <style lang="scss" scoped>
--- a/src/components/dialog/SiteStatisticsDialog.vue
+++ b/src/components/dialog/SiteStatisticsDialog.vue
@@ -0,0 +1,478 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import api from '@/api'
+import type { Site, SiteStatistic } from '@/api/types'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 国际化
+const { t } = useI18n()
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  sites: {
+    type: Array as PropType<Site[]>,
+    default: () => [],
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue'])
+
+// 站点统计数据
+const siteStats = ref<SiteStatistic[]>([])
+
+// 是否加载中
+const loading = ref(false)
+
+// 当前选中的站点
+const selectedSite = ref<Site | null>(null)
+
+// 耗时记录详情弹窗
+const detailDialog = ref(false)
+
+// 获取站点统计数据
+async function fetchSiteStats() {
+  try {
+    loading.value = true
+    const response = await api.get('site/statistic')
+    siteStats.value = Array.isArray(response) ? response : response.data || []
+    loading.value = false
+  } catch (error) {
+    console.error('Failed to fetch site statistics:', error)
+    loading.value = false
+  }
+}
+
+// 根据站点域名获取统计数据
+function getSiteStats(domain: string): SiteStatistic | undefined {
+  return siteStats.value.find(stat => stat.domain === domain)
+}
+
+// 获取站点连接状态
+function getConnectionStatus(stats: SiteStatistic | undefined): string {
+  if (!stats || Object.keys(stats).length === 0) {
+    return 'unknown'
+  }
+  if (stats.lst_state === 1) {
+    return 'failed'
+  } else if (stats.lst_state === 0) {
+    if (!stats.seconds) return 'unknown'
+    if (stats.seconds >= 5) return 'slow'
+    return 'connected'
+  }
+  return 'unknown'
+}
+
+// 获取状态颜色
+function getStatusColor(status: string): string {
+  switch (status) {
+    case 'connected':
+      return 'success'
+    case 'slow':
+      return 'warning'
+    case 'failed':
+      return 'error'
+    default:
+      return 'secondary'
+  }
+}
+
+// 获取状态图标
+function getStatusIcon(status: string): string {
+  switch (status) {
+    case 'connected':
+      return 'mdi-wifi'
+    case 'slow':
+      return 'mdi-wifi-strength-2'
+    case 'failed':
+      return 'mdi-wifi-off'
+    default:
+      return 'mdi-help-circle'
+  }
+}
+
+// 获取状态文本
+function getStatusText(status: string): string {
+  switch (status) {
+    case 'connected':
+      return t('site.connectionNormal')
+    case 'slow':
+      return t('site.connectionSlow')
+    case 'failed':
+      return t('site.connectionFailed')
+    default:
+      return t('site.connectionUnknown')
+  }
+}
+
+// 获取耗时颜色
+function getTimeColor(seconds: number | undefined): string {
+  if (!seconds) return 'secondary'
+  if (seconds < 2) return 'success'
+  if (seconds < 5) return 'warning'
+  return 'error'
+}
+
+// 获取成功率（与列表/概览口径一致）
+function getSuccessRate(stats: SiteStatistic | undefined): string {
+  if (!stats) return '-'
+  const success = Number(stats.success ?? 0)
+  const fail = Number(stats.fail ?? 0)
+  const total = success + fail
+  if (total <= 0) return '-'
+  return String(Math.round((success / total) * 100))
+}
+
+// 解析耗时记录
+function parseTimeRecords(note: any): Array<{ time: string; duration: number }> {
+  if (!note) return []
+
+  try {
+    // note可能是字符串或对象，如果是字符串则解析
+    const records = typeof note === 'string' ? JSON.parse(note) : note
+
+    if (typeof records === 'object' && records !== null) {
+      const result = Object.entries(records)
+        .map(([time, duration]) => ({
+          time,
+          duration: Number(duration) || 0,
+        }))
+        .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+        .slice(0, 10) // 只显示最近10条记录
+
+      return result
+    }
+  } catch (error) {
+    console.error('Failed to parse time records:', error)
+  }
+
+  return []
+}
+
+// 查看详情
+function viewDetail(site: Site) {
+  selectedSite.value = site
+  detailDialog.value = true
+}
+
+// 关闭弹窗
+function closeDialog() {
+  emit('update:modelValue', false)
+}
+
+// 计算属性：按平均耗时排序的站点列表
+const sortedSites = computed(() => {
+  return props.sites
+    .map(site => {
+      const stats = getSiteStats(site.domain)
+      return {
+        site,
+        stats,
+        status: getConnectionStatus(stats),
+        avgTime: stats?.seconds || 0,
+      }
+    })
+    .sort((a, b) => {
+      // 先按状态排序：connected > slow > failed > unknown
+      const statusOrder = { connected: 0, slow: 1, failed: 2, unknown: 3 }
+      const statusDiff =
+        statusOrder[a.status as keyof typeof statusOrder] - statusOrder[b.status as keyof typeof statusOrder]
+      if (statusDiff !== 0) return statusDiff
+
+      // 再按平均耗时排序
+      return a.avgTime - b.avgTime
+    })
+})
+
+// 统计总览（与列表口径一致）
+const overviewCounts = computed(() => {
+  const items = sortedSites.value
+  const total = items.length
+  const connected = items.filter(i => i.status === 'connected').length
+  const slow = items.filter(i => i.status === 'slow').length
+  const failed = items.filter(i => i.status === 'failed').length
+  const unknown = total - connected - slow - failed
+  return { total, connected, slow, failed, unknown }
+})
+
+onMounted(() => {
+  fetchSiteStats()
+})
+</script>
+
+<template>
+  <DialogWrapper max-width="50rem" :fullscreen="display.smAndDown.value" scrollable>
+    <VCard>
+      <!-- 标题栏 -->
+      <VCardItem>
+        <VDialogCloseBtn @click="closeDialog" />
+        <template #prepend>
+          <VIcon icon="mdi-chart-line" class="me-2" />
+        </template>
+        <VCardTitle>
+          {{ t('site.statistics') }}
+        </VCardTitle>
+      </VCardItem>
+      <VDivider />
+      <!-- 内容区域 -->
+      <VCardText class="pa-0">
+        <LoadingBanner v-if="loading" class="my-8" />
+
+        <div v-else class="site-statistics-content">
+          <!-- 统计概览 -->
+          <div class="statistics-overview pa-4">
+            <div class="d-flex flex-wrap gap-4">
+              <div class="stat-card">
+                <div class="stat-number">{{ overviewCounts.total }}</div>
+                <div class="stat-label">{{ t('site.totalSites') }}</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-number success--text">{{ overviewCounts.connected }}</div>
+                <div class="stat-label">{{ t('site.normalSites') }}</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-number warning--text">{{ overviewCounts.slow }}</div>
+                <div class="stat-label">{{ t('site.slowSites') }}</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-number error--text">{{ overviewCounts.failed }}</div>
+                <div class="stat-label">{{ t('site.failedSites') }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 站点列表 -->
+          <div class="sites-list">
+            <div
+              v-for="item in sortedSites"
+              :key="item.site.id"
+              class="site-item pa-4 border-b"
+              :class="`border-${getStatusColor(item.status)}`"
+            >
+              <div class="d-flex align-center justify-space-between">
+                <!-- 左侧：站点信息 -->
+                <div class="d-flex align-center flex-1 min-w-0">
+                  <!-- 状态指示器 -->
+                  <div class="status-indicator me-3" :class="getStatusColor(item.status)">
+                    <VIcon :icon="getStatusIcon(item.status)" size="20" />
+                  </div>
+
+                  <!-- 站点名称和状态 -->
+                  <div class="flex-1 min-w-0">
+                    <div class="d-flex align-center">
+                      <h4 class="text-h6 mb-1 truncate">{{ item.site.name }}</h4>
+                      <VChip :color="getStatusColor(item.status)" size="small" class="ml-2" variant="tonal">
+                        {{ getStatusText(item.status) }}
+                      </VChip>
+                    </div>
+                    <div class="text-caption text-medium-emphasis">{{ item.site.domain }}</div>
+                  </div>
+                </div>
+
+                <!-- 右侧：统计信息 -->
+                <div class="d-flex align-center gap-4">
+                  <!-- 平均耗时 -->
+                  <div class="text-center">
+                    <div class="text-h6 font-weight-bold" :class="`text-${getTimeColor(item.stats?.seconds)}`">
+                      {{ item.stats?.seconds || '-' }}s
+                    </div>
+                    <div class="text-caption text-medium-emphasis">{{ t('site.averageTime') }}</div>
+                  </div>
+
+                  <!-- 成功率 -->
+                  <div class="text-center">
+                    <div class="text-h6 font-weight-bold">{{ getSuccessRate(item.stats) }}%</div>
+                    <div class="text-caption text-medium-emphasis">{{ t('site.successRate') }}</div>
+                  </div>
+
+                  <!-- 详情按钮 -->
+                  <VBtn icon variant="text" size="small" @click="viewDetail(item.site)">
+                    <VIcon icon="mdi-information-outline" />
+                  </VBtn>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </VCardText>
+    </VCard>
+
+    <!-- 详情弹窗 -->
+    <DialogWrapper v-model="detailDialog" :max-width="display.mdAndUp.value ? 600 : '95%'" scrollable>
+      <VCard v-if="selectedSite">
+        <VCardItem class="py-3">
+          <template #prepend>
+            <VIcon icon="mdi-information-outline" class="me-2" />
+          </template>
+          <VCardTitle> {{ selectedSite.name }} - {{ t('site.timeRecords') }} </VCardTitle>
+          <VDialogCloseBtn @click="detailDialog = false" />
+        </VCardItem>
+        <VDivider />
+        <VCardText>
+          <div v-if="getSiteStats(selectedSite.domain)">
+            <div class="mb-4">
+              <h5 class="text-h6 mb-2">{{ t('site.statistics') }}</h5>
+              <div class="d-flex flex-wrap gap-4">
+                <div class="stat-item">
+                  <span class="stat-label">{{ t('site.successCount') }}:</span>
+                  <span class="stat-value success--text">
+                    {{ getSiteStats(selectedSite.domain)?.success || 0 }}
+                  </span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-label">{{ t('site.failCount') }}:</span>
+                  <span class="stat-value error--text">
+                    {{ getSiteStats(selectedSite.domain)?.fail || 0 }}
+                  </span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-label">{{ t('site.averageTime') }}:</span>
+                  <span class="stat-value" :class="`text-${getTimeColor(getSiteStats(selectedSite.domain)?.seconds)}`">
+                    {{ getSiteStats(selectedSite.domain)?.seconds || '-' }}s
+                  </span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-label">{{ t('site.lastAccess') }}:</span>
+                  <span class="stat-value">
+                    {{ getSiteStats(selectedSite.domain)?.lst_mod_date || '-' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h5 class="text-h6 mb-2">{{ t('site.recentTimeRecords') }}</h5>
+              <div class="time-records">
+                <div
+                  v-for="(record, index) in parseTimeRecords(getSiteStats(selectedSite.domain)?.note)"
+                  :key="index"
+                  class="time-record-item pa-3 border rounded mb-2"
+                  :class="`border-${getTimeColor(record.duration)}`"
+                >
+                  <div class="d-flex justify-space-between align-center">
+                    <div>
+                      <div class="text-body-2 font-weight-medium">{{ record.time }}</div>
+                      <div class="text-caption text-medium-emphasis">{{ t('site.accessTime') }}</div>
+                    </div>
+                    <div class="text-end">
+                      <div class="text-h6 font-weight-bold" :class="`text-${getTimeColor(record.duration)}`">
+                        {{ record.duration }}s
+                      </div>
+                      <div class="text-caption text-medium-emphasis">{{ t('site.responseTime') }}</div>
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  v-if="parseTimeRecords(getSiteStats(selectedSite.domain)?.note).length === 0"
+                  class="text-center pa-4"
+                >
+                  <VIcon icon="mdi-information-outline" size="48" color="secondary" class="mb-2" />
+                  <div class="text-body-1 text-medium-emphasis">{{ t('site.noTimeRecords') }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </VCardText>
+      </VCard>
+    </DialogWrapper>
+  </DialogWrapper>
+</template>
+
+<style scoped>
+.statistics-overview {
+  background: linear-gradient(135deg, var(--v-theme-surface) 0%, var(--v-theme-surface-variant) 100%);
+  border-block-end: 1px solid var(--v-border-color);
+}
+
+.stat-card {
+  padding: 16px;
+  border: 1px solid var(--v-border-color);
+  border-radius: 8px;
+  background: var(--v-theme-surface);
+  min-inline-size: 100px;
+  text-align: center;
+}
+
+.stat-number {
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1;
+  margin-block-end: 4px;
+}
+
+.stat-label {
+  color: var(--v-theme-on-surface-variant);
+  font-size: 12px;
+}
+
+.sites-list {
+  background: var(--v-theme-surface);
+}
+
+.site-item {
+  transition: background-color 0.2s ease;
+}
+
+.site-item:hover {
+  background: var(--v-theme-surface-variant);
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--v-theme-surface-variant);
+  block-size: 40px;
+  inline-size: 40px;
+}
+
+.status-indicator.success {
+  background: rgba(var(--v-theme-success), 0.1);
+  color: rgb(var(--v-theme-success));
+}
+
+.status-indicator.warning {
+  background: rgba(var(--v-theme-warning), 0.1);
+  color: rgb(var(--v-theme-warning));
+}
+
+.status-indicator.error {
+  background: rgba(var(--v-theme-error), 0.1);
+  color: rgb(var(--v-theme-error));
+}
+
+.status-indicator.secondary {
+  background: rgba(var(--v-theme-secondary), 0.1);
+  color: rgb(var(--v-theme-secondary));
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.stat-item .stat-label {
+  color: var(--v-theme-on-surface-variant);
+  font-weight: 500;
+}
+
+.stat-value {
+  font-weight: bold;
+}
+
+.time-records {
+  max-block-size: 300px;
+  overflow-y: auto;
+}
+
+.time-record-item {
+  transition: all 0.2s ease;
+}
+</style>
--- a/src/components/dialog/SiteUserDataDialog.vue
+++ b/src/components/dialog/SiteUserDataDialog.vue
@@ -287,11 +287,11 @@ onBeforeMount(() => {
 </script>

 <template>
-  <VDialog scrollable eager max-width="80rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable eager max-width="80rem" :fullscreen="!display.mdAndUp.value">
    <VCard>
      <VCardItem>
-        <VCardTitle
-          >{{ t('dialog.siteUserData.title') }} - {{ props.site?.name }}
+        <VCardTitle>
+          {{ t('dialog.siteUserData.title') }} - {{ props.site?.name }}
          <IconBtn @click.stop="refreshSiteData" color="info"><VIcon icon="mdi-refresh" /></IconBtn>
        </VCardTitle>
        <VDialogCloseBtn @click="emit('close')" />
@@ -484,5 +484,5 @@ onBeforeMount(() => {
    </VCard>
    <!-- 进度框 -->
    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="t('dialog.siteUserData.refreshing')" />
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/SmbConfigDialog.vue
+++ b/src/components/dialog/SmbConfigDialog.vue
@@ -50,7 +50,7 @@ async function saveSmbConfig() {
 </script>

 <template>
-  <VDialog width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
    <VCard>
      <VDialogCloseBtn @click="emit('close')" />
      <VCardItem>
@@ -127,5 +127,5 @@ async function saveSmbConfig() {
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/SubscribeEditDialog.vue
+++ b/src/components/dialog/SubscribeEditDialog.vue
@@ -99,6 +99,10 @@ function episodeGroupItemProps(item: { title: string; subtitle: string }) {

 // 查询所有剧集组
 async function getEpisodeGroups() {
+  if (!subscribeForm.value.tmdbid) {
+    console.warn('tmdbid is not set or is empty')
+    return
+  }
  try {
    episodeGroups.value = await api.get(`media/groups/${subscribeForm.value.tmdbid}`)
  } catch (error) {
@@ -280,10 +284,10 @@ onMounted(() => {
 </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">
-				<VDialogCloseBtn @click="emit('close')" />
+        <VDialogCloseBtn @click="emit('close')" />
        <template #prepend>
          <VIcon icon="mdi-clipboard-list-outline" class="me-2" />
        </template>
@@ -539,5 +543,5 @@ onMounted(() => {
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/SubscribeFilesDialog.vue
+++ b/src/components/dialog/SubscribeFilesDialog.vue
@@ -85,7 +85,7 @@ onBeforeMount(() => {
 })
 </script>
 <template>
-  <VDialog scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
    <VCard>
      <VCardItem class="my-2">
        <VDialogCloseBtn @click="emit('close')" />
@@ -206,7 +206,7 @@ onBeforeMount(() => {
        </div>
      </VCardText>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>

 <style lang="scss" scoped>
--- a/src/components/dialog/SubscribeHistoryDialog.vue
+++ b/src/components/dialog/SubscribeHistoryDialog.vue
@@ -146,7 +146,7 @@ function getMediaTypeText(type: string | undefined) {
 </script>

 <template>
-  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
    <VCard class="mx-auto" width="100%">
      <VCardItem>
        <VCardTitle>{{ t('dialog.subscribeHistory.title', { type: getMediaTypeText(props.type) }) }}</VCardTitle>
@@ -220,5 +220,5 @@ function getMediaTypeText(type: string | undefined) {
    </VCard>
    <!-- 进度框 -->
    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/src/components/dialog/SubscribeSeasonDialog.vue
+++ b/src/components/dialog/SubscribeSeasonDialog.vue
@@ -81,6 +81,10 @@ function getMediaId() {

 // 查询所有剧集组
 async function getEpisodeGroups() {
+  if (!props.media?.tmdb_id) {
+    console.warn('tmdbid is not set or is empty')
+    return
+  }
  try {
    episodeGroups.value = await api.get(`media/groups/${props.media?.tmdb_id}`)
  } catch (error) {
--- a/src/components/dialog/SubscribeShareDialog.vue
+++ b/src/components/dialog/SubscribeShareDialog.vue
@@ -55,7 +55,7 @@ const $toast = useToast()
 </script>

 <template>
-  <VDialog scrollable max-width="30rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="30rem" :fullscreen="!display.mdAndUp.value">
    <VCard>
      <VCardItem class="py-2">
        <template #prepend>
@@ -112,5 +112,5 @@ const $toast = useToast()
        </VBtn>
      </VCardActions>
    </VCard>
-  </VDialog>
+  </DialogWrapper>
 </template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
jxxghp	fb36033939	修复数据库类型判断	2025-08-19 13:18:02 +08:00
jxxghp	584e7672df	更新版本号至2.7.3	2025-08-19 13:08:23 +08:00
jxxghp	d4f7a5a1c0	fix https://github.com/jxxghp/MoviePilot/issues/4769	2025-08-17 11:38:17 +08:00
jxxghp	2a9ea81ad4	feat: 优化SSE连接延迟，添加初始化状态提示	2025-08-17 08:39:02 +08:00
jxxghp	276948dd68	feat: 修复成功率计算和统计总览功能	2025-08-12 15:28:58 +08:00
jxxghp	990c5583f2	移除不必要的 TMDB 图片域名选项	2025-08-12 14:27:01 +08:00
jxxghp	644f1b5640	Merge pull request #377 from Sowevo/v2	2025-08-12 06:52:26 +08:00
sowevo	5261fbe870	🚨 0	2025-08-12 05:44:27 +08:00
sowevo	e4f2d85e2b	🚨 多余参数	2025-08-12 05:18:23 +08:00
sowevo	8e3ccdc24a	feat: 透明倒影	2025-08-12 05:09:58 +08:00
sowevo	cd6d93affd	feat: 透明背景	2025-08-12 04:32:51 +08:00
sowevo	6096ab0c9b	feat: 调整间距	2025-08-12 04:31:19 +08:00
sowevo	0a87bb1db1	canvas固定宽和高	2025-08-12 04:14:13 +08:00
jxxghp	a19042c655	在设置中添加浏览器仿真选项	2025-08-11 21:35:20 +08:00
jxxghp	a889687a6a	更新 package.json	2025-08-10 18:16:09 +08:00
jxxghp	e1cdc715aa	更新 GitHub Actions 配置，启用最新版本标记功能	2025-08-06 16:37:09 +08:00
jxxghp	a82b3a0a29	优化消息处理逻辑	2025-08-05 15:47:46 +08:00
jxxghp	d93a71f0be	更新 TorrentRowListView.vue	2025-08-03 11:56:32 +08:00
jxxghp	899dc765bc	更新 TorrentCardListView.vue	2025-08-03 11:55:53 +08:00
jxxghp	449490e52d	更新 SiteStatisticsDialog.vue	2025-08-02 14:53:49 +08:00
jxxghp	5541d7974e	更新 SiteStatisticsDialog.vue	2025-08-02 14:34:59 +08:00
jxxghp	ae3eb36183	添加站点耗时统计信息展示	2025-08-02 14:20:17 +08:00
jxxghp	d57e9a397c	优化样式以支持动态颜色显示。	2025-08-02 11:12:27 +08:00
jxxghp	9d4fd16d81	优化透明主题下的模糊度和透明度设置	2025-07-29 11:49:59 +08:00
jxxghp	3b16e7a123	优化透明主题的模糊度和透明度设置	2025-07-29 09:46:23 +08:00
jxxghp	1c4a2176e9	实现透明主题的透明度和模糊度设置功能	2025-07-29 08:20:16 +08:00
jxxghp	62f9243714	更新 service-worker.ts	2025-07-29 07:05:17 +08:00
jxxghp	03bd23d314	更新文件系统资源检查的相关提示信息	2025-07-26 23:11:29 +08:00
jxxghp	27497d1812	更新 SiteAddEditDialog.vue	2025-07-26 08:34:22 +08:00
jxxghp	f36c1bd2b5	整合主题管理器，优化主题切换逻辑	2025-07-25 13:39:47 +08:00
jxxghp	cf72b2cdb9	更新加载动画的样式和逻辑。	2025-07-23 20:33:02 +08:00
jxxghp	44f6950fea	Merge pull request #376 from wumode/fix_recommend fix: 修复推荐页面外部推荐源URL参数拼接问题	2025-07-23 20:24:32 +08:00
wumode	308ddfedea	fix: 修复推荐页面外部推荐源URL参数拼接问题	2025-07-23 20:12:36 +08:00
jxxghp	ac7c330e2f	优化工作流卡片和对话框中的事件类型显示逻辑	2025-07-23 15:33:43 +08:00
jxxghp	1bde3492da	更新 package.json	2025-07-23 12:01:03 +08:00
jxxghp	f884518df3	优化工作流任务卡片的状态显示	2025-07-23 11:52:54 +08:00
jxxghp	1f7f9ce9db	新增工作流触发类型和事件类型支持	2025-07-22 20:58:55 +08:00
jxxghp	58acde2292	优化支持站点的显示逻辑	2025-07-21 12:49:55 +08:00
jxxghp	4e0fe2f449	更新 AccountSettingAbout.vue	2025-07-21 12:38:37 +08:00
jxxghp	536793ab25	新增支持站点折叠功能，并更新相关国际化文本	2025-07-21 11:53:29 +08:00
jxxghp	23a48e07a2	优化订阅列表视图的状态筛选逻辑	2025-07-21 09:57:10 +08:00
jxxghp	1e55557154	优化订阅列表视图的状态筛选逻辑	2025-07-21 09:53:38 +08:00
jxxghp	752231086d	新增订阅功能的状态筛选选项	2025-07-21 09:38:59 +08:00
jxxghp	6f315a408a	移除站点链接的 href 属性	2025-07-20 15:40:58 +08:00
jxxghp	6fa4caa85e	fix https://github.com/jxxghp/MoviePilot/issues/4635	2025-07-20 12:34:22 +08:00
jxxghp	1b36c1752f	优化消息弹窗的滚动逻辑	2025-07-20 08:39:33 +08:00
jxxghp	cd58498971	加载消息时按时间排序以确保最新消息在最后	2025-07-20 08:32:10 +08:00
jxxghp	1586137a5d	优化离线状态管理逻辑	2025-07-20 08:25:20 +08:00
jxxghp	6cb8bf74df	在滚动锁定功能中添加事件传播停止，以增强用户体验	2025-07-19 17:45:43 +08:00
jxxghp	787802d0db	优化模块测试视图	2025-07-19 08:55:08 +08:00
jxxghp	b4ad39db12	优化全局滚动锁定功能	2025-07-18 16:39:25 +08:00
jxxghp	c13edbe017	更新 package.json	2025-07-18 11:07:29 +08:00
jxxghp	7546da4f90	新增订阅分享页面及相关搜索功能	2025-07-18 11:05:05 +08:00
jxxghp	76b9a8d9e7	新增支持站点查看功能	2025-07-17 20:46:46 +08:00
jxxghp	d6d52338e9	优化排名展示效果	2025-07-16 12:59:09 +08:00
jxxghp	caa67a0f49	新增订阅分享统计功能	2025-07-16 09:37:34 +08:00
jxxghp	6ddc3ea996	fix #375	2025-07-15 20:25:42 +08:00
jxxghp	7edbf7c724	更新用户资料和账户设置中的链接	2025-07-15 17:31:15 +08:00
jxxghp	4f233ca886	更新 package.json 版本号至 2.6.6	2025-07-15 14:54:49 +08:00
jxxghp	457831536a	移除AccountSettingSite.vue中的USER_AGENT字段	2025-07-14 12:30:54 +08:00
jxxghp	ccef0d87db	更新缓存版本至v1.0.3	2025-07-13 13:52:16 +08:00
jxxghp	584d290283	增强全局滚动锁定功能	2025-07-13 13:46:28 +08:00
jxxghp	2ab14fa33b	fix	2025-07-13 13:35:25 +08:00
jxxghp	f0317e1d74	为明亮主题优化Footer组件的背景色透明度	2025-07-13 13:32:05 +08:00
jxxghp	17a206e0f4	更新 DownloadingCard.vue	2025-07-13 11:40:23 +08:00
jxxghp	8ea352cc2f	优化DownloadingCard组件	2025-07-13 11:31:26 +08:00
jxxghp	0f10920898	fix #374	2025-07-13 11:22:27 +08:00
jxxghp	eb098ca775	增强滚动锁定功能	2025-07-13 09:46:38 +08:00
jxxghp	e25caddfef	更新 package.json	2025-07-12 15:15:48 +08:00
jxxghp	c74cf6cf6e	移除构建Plex深度链接时的警告弹窗	2025-07-12 15:13:18 +08:00
jxxghp	ce2d04fa64	更新Plex深度链接构建逻辑	2025-07-12 15:04:36 +08:00
jxxghp	40a4e29c7e	重构深度链接功能	2025-07-12 14:57:03 +08:00
jxxghp	60385715e6	新增媒体服务器深度链接功能	2025-07-12 13:47:00 +08:00
jxxghp	3cce92e83d	优化媒体查询条件，增强响应式样式支持	2025-07-12 13:16:30 +08:00
jxxghp	602b0067d2	Merge pull request #373 from jtcymc/v2	2025-07-12 07:17:57 +08:00
shaw	51d07db99b	refactor(dialog): 将日志输出级别从 log 改为 warn - 在 SubscribeEditDialog.vue 和 SubscribeSeasonDialog.vue 组件中- 当 tmdbid 未设置或为空时，使用 console.warn替代 console.log - 此修改提高了日志的可见性和严重性级别，以便更好地提醒开发者注意潜在问题	2025-07-12 00:01:55 +08:00
shaw	33d121fd64	fix(dialog): 修复剧集分组查询时 TMDBID 未设置或为空的问题 - 在 SubscribeEditDialog 和 SubscribeSeasonDialog 组件中添加了对 TMDBID 的空值检查 - 如果 TMDBID 未设置或为空，将不会执行剧集分组查询，避免出现错误	2025-07-11 23:57:01 +08:00
jxxghp	e409dbd5b8	优化可用高度计算	2025-07-11 15:14:16 +08:00
jxxghp	79d203470a	更新 service-worker.ts	2025-07-11 07:26:01 +08:00
jxxghp	0f1341615b	fix size	2025-07-11 07:06:46 +08:00
jxxghp	97f5410b1c	Add files via upload	2025-07-10 23:31:48 +08:00
jxxghp	195f6b7e50	优化卡片组件样式	2025-07-10 22:45:59 +08:00
jxxghp	6691f40c49	优化卡片组件样式	2025-07-10 22:00:06 +08:00
jxxghp	bc1849f0a0	fix 全屏弹窗背景	2025-07-10 21:06:54 +08:00
jxxghp	0f64ea1403	为垂直导航布局的固定导航栏添加内边距，以改善滚动时的视觉效果	2025-07-10 17:29:48 +08:00
jxxghp	320fc1604c	更新 SubscribeListView.vue 中的 Teleport 组件条件，以支持根据订阅类型动态渲染	2025-07-10 16:54:00 +08:00
jxxghp	a8eaf3b995	移除 vite.config.ts 中的缓存键处理逻辑以提高代码简洁性	2025-07-10 16:50:35 +08:00
jxxghp	308a951f78	修正 Vuetify 变量路径为相对路径	2025-07-10 16:40:49 +08:00
jxxghp	9f98b549e9	重构scss文件结构	2025-07-10 16:39:22 +08:00
jxxghp	0e2a259999	优化 WorkflowShareCard 组件	2025-07-10 15:08:10 +08:00
jxxghp	b3d3561111	将 useDialogScrollLock 替换为 useScrollLock	2025-07-10 12:56:51 +08:00
jxxghp	ad857b0810	删除 useScrollLock 组合式 API	2025-07-10 12:52:57 +08:00
jxxghp	0918fa1685	将所有 VDialog 组件替换为 DialogWrapper 组件	2025-07-10 12:44:37 +08:00
jxxghp	273d1f8ef2	更新 _misc.scss 文件，调整媒体查询条件	2025-07-10 11:25:59 +08:00
jxxghp	af1e0a2a60	在 PWAInstallPrompt.vue 中添加 HTTPS 环境检查	2025-07-10 10:59:02 +08:00
jxxghp	79ae772367	优化垂直导航栏样式	2025-07-09 19:53:14 +08:00
jxxghp	d57c8aa305	更新 FetchTorrentsAction.vue	2025-07-09 14:39:20 +08:00
jxxghp	bbd8c1b6d4	更新 yarn.lock	2025-07-09 13:17:30 +08:00
jxxghp	ced9288ed7	优化浏览器警告	2025-07-09 13:16:56 +08:00
jxxghp	cf87e2d5ac	添加工作流备注功能	2025-07-09 12:22:08 +08:00
jxxghp	153d4c1d01	更新工作流分享卡片和对话框	2025-07-09 11:44:52 +08:00
jxxghp	1c50fa228e	更新 ForkWorkflowDialog.vue	2025-07-09 11:28:02 +08:00
jxxghp	0067dc6be3	更新 package.json	2025-07-09 11:17:15 +08:00
jxxghp	36389a5b8c	优化 PWA 状态恢复逻辑	2025-07-09 11:07:24 +08:00
jxxghp	c7443d993e	更新工作流分享功能	2025-07-09 10:46:33 +08:00
jxxghp	9f8dbf3c75	fix workflow	2025-07-09 00:11:19 +08:00
jxxghp	35332544e4	Add workflow sharing functionality (#371 ) * Add workflow sharing feature with share, fork, and browse functionality Co-authored-by: jxxghp <jxxghp@163.com> * Refactor workflow page with dynamic tabs and internationalization support Co-authored-by: jxxghp <jxxghp@163.com> * Remove workflow share implementation documentation Co-authored-by: jxxghp <jxxghp@163.com> * Fix indentation and structure in Chinese locale files Co-authored-by: jxxghp <jxxghp@163.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com>	2025-07-08 23:31:22 +08:00