更新 package.json

更新 GitHub Actions 配置，启用最新版本标记功能
优化消息处理逻辑
2026-05-09 22:22:58 +08:00 · 2025-08-10 18:16:09 +08:00 · 2025-08-06 16:37:09 +08:00 · 2025-08-05 15:47:46 +08:00 · 2025-08-03 11:56:32 +08:00 · 2025-08-03 11:55:53 +08:00
64 changed files with 4682 additions and 860 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/index.html
+++ b/index.html
@@ -1,344 +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" />

-  <!-- 预加载关键资源 -->
-  <link rel="preload" href="/logo.png" as="image" />
-  <link rel="modulepreload" href="/src/main.ts" />
-
-  <!-- 内联关键CSS -->
-  <style>
-    /* 关键路径CSS - 从loader.css内联 */
-    #loading-bg {
-      position: fixed;
-      z-index: 99999;
-      display: block;
-      background: var(--initial-loader-bg, #fff);
-      block-size: 100vh;
-      inline-size: 100vw;
-      transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
-    }
-
-    .loading-logo {
-      position: absolute;
-      inset-block-start: 35%;
-      inset-inline-start: calc(50% - 5rem);
-      transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
-    }
-
-    /* 添加logo完成动画 - 放大虚化效果 */
-    .loading-complete .loading-logo {
-      filter: blur(10px);
-      opacity: 0;
-      transform: scale(1.5);
-    }
-
-    /* 添加加载背景消失动画 - 放大虚化效果 */
-    .loading-complete {
-      filter: blur(15px);
-      opacity: 0;
-      transform: scale(1.2);
-    }
-
-    .loading {
-      position: absolute;
-      box-sizing: border-box;
-      border: 3px solid transparent;
-      border-radius: 50%;
-      block-size: 55px;
-      inline-size: 55px;
-      inset-block-start: 80%;
-      inset-inline-start: calc(50% - 27.5px);
-      transition: opacity 0.6s ease;
-    }
-
-    /* 完成时隐藏加载动画 */
-    .loading-complete .loading {
-      opacity: 0;
-    }
-
-    .loading .effect-1,
-    .loading .effect-2,
-    .loading .effect-3 {
-      position: absolute;
-      box-sizing: border-box;
-      border: 3px solid transparent;
-      border-radius: 50%;
-      block-size: 100%;
-      border-inline-start: 3px solid var(--initial-loader-color, #eee);
-      inline-size: 100%;
-    }
-
-    .loading .effect-1 {
-      animation: rotate 1s ease infinite;
-    }
-
-    .loading .effect-2 {
-      animation: rotate-opacity 1s ease infinite 0.1s;
-    }
-
-    .loading .effect-3 {
-      animation: rotate-opacity 1s ease infinite 0.2s;
-    }
-
-    .loading .effects {
-      transition: all 0.3s ease;
-    }
-
-    @keyframes rotate {
-      0% {
-        transform: rotate(0deg);
+    <!-- 内联关键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.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "moviepilot",
-  "version": "2.6.4",
+  "version": "2.7.0",
  "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/scss/_misc.scss
+++ b/src/@core/scss/_misc.scss
@@ -24,17 +24,16 @@ code {
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);

-  @media (width >= 1280px) {
+  @media (width >= 1280px) and (hover: hover) {
    background: rgba(var(--v-theme-background), 1);

    .v-theme--transparent & {
-      backdrop-filter: blur(5px);
-      background: rgba(var(--v-theme-background), 0.1) !important;
+      backdrop-filter: blur(var(--transparent-blur-light, 5px));
+      background: rgba(var(--v-theme-background), var(--transparent-opacity-light, 0.1)) !important;
    }
  }

-
-  @media (width < 1280px) {
+  @media (width < 1280px), (hover: none) {
    background: transparent;

    &::before {
@@ -61,8 +60,9 @@ code {
      }

      .v-theme--transparent & {
-        background: rgba(var(--v-theme-background), 0.3);
+        backdrop-filter: blur(var(--transparent-blur-heavy, 16px));
+        background: rgba(var(--v-theme-background), var(--transparent-opacity-heavy, 0.5));
      }
+    }
  }
 }
-}
--- 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
@@ -84,3 +84,15 @@ export 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/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,
--- 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
@@ -164,6 +164,10 @@ export interface WorkflowShare {
  description?: string
  // 定时器
  timer?: string
+  // 触发类型：timer-定时触发 event-事件触发 manual-手动触发
+  trigger_type?: string
+  // 事件类型（当trigger_type为event时使用）
+  event_type?: string
  // 动作列表
  actions?: any[]
  // 动作流
@@ -986,6 +990,8 @@ export interface MediaServerPlayItem {
  link?: string
  // 播放百分比
  percent?: number
+  // 媒体服务器类型
+  server_type?: string
 }

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

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

 // 计算图片地址
--- 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')
@@ -138,6 +144,7 @@ function onClose() {
                  persistent-hint
                  active
                  prepend-inner-icon="mdi-identifier"
+                  @input="validateRuleId"
                />
              </VCol>
              <VCol cols="12" md="6">
--- 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/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)
+  }
 }

 // 生成图片代理路径
--- 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/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>

--- 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
@@ -6,6 +6,10 @@ 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: () => [],
+  },
 })

 // 定义删除事件
@@ -135,6 +139,7 @@ function doDelete() {
      v-if="forkWorkflowDialog"
      v-model="forkWorkflowDialog"
      :workflow="props.workflow"
+      :event-types="props.eventTypes"
      @close="forkWorkflowDialog = false"
      @fork="finishForkWorkflow"
      @delete="doDelete"
--- a/src/components/cards/WorkflowTaskCard.vue
+++ b/src/components/cards/WorkflowTaskCard.vue
@@ -16,6 +16,10 @@ const props = defineProps({
    required: true,
    type: Object as PropType<Workflow>,
  },
+  eventTypes: {
+    type: Array as PropType<Array<{ title: string; value: string }>>,
+    default: () => [],
+  },
 })

 // 定义事件
@@ -39,6 +43,12 @@ 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
@@ -165,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'),
+    }
 }

 // 计算当前动作占比
@@ -190,11 +225,9 @@ const resolveProgress = (item: Workflow) => {
        :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
      >
        <VCardItem
-          class="px-2"
-          :class="{
-            'py-0': workflow?.description,
-            'py-2': !workflow?.description,
-            [`bg-${resolveStatusVariant(workflow?.state).color}`]: true,
+          class="px-2 py-2"
+          :style="{
+            background: resolveStatusVariant(workflow?.state).bgColor,
          }"
        >
          <template #prepend>
@@ -209,9 +242,8 @@ const resolveProgress = (item: Workflow) => {
            </VAvatar>
          </template>
          <VCardTitle class="text-white text-lg">
-            {{ workflow?.name }}
+            <span :title="workflow?.description">{{ workflow?.name }}</span>
          </VCardTitle>
-          <VCardSubtitle class="text-white">{{ workflow?.description }}</VCardSubtitle>
          <template #append>
            <IconBtn>
              <VIcon icon="mdi-dots-vertical" />
@@ -272,15 +304,28 @@ const resolveProgress = (item: Workflow) => {
        </VCardItem>
        <VDivider />
        <VCardText class="pa-3">
-          <div class="d-flex flex-column gap-y-2">
+          <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-lg">{{ 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-lg" :class="`text-${resolveStatusVariant(workflow?.state).color}`">
+                <h5 :class="`text-${resolveStatusVariant(workflow?.state).color}`">
                  {{ resolveStatusVariant(workflow?.state).text }}
                </h5>
              </div>
@@ -289,14 +334,14 @@ const resolveProgress = (item: Workflow) => {
              <div class="flex-1">
                <div class="mb-1">{{ t('workflow.task.info.actionCount') }}</div>
                <div>
-                  <VAvatar size="28" 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-lg">{{ workflow?.run_count }}</h5>
+                <h5>{{ workflow?.run_count }}</h5>
              </div>
            </div>
            <div class="d-flex flex-wrap gap-x-3">
--- a/src/components/dialog/ForkSubscribeDialog.vue
+++ b/src/components/dialog/ForkSubscribeDialog.vue
@@ -172,7 +172,6 @@ onMounted(() => {
 <template>
  <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>
  </DialogWrapper>
 </template>
--- a/src/components/dialog/ForkWorkflowDialog.vue
+++ b/src/components/dialog/ForkWorkflowDialog.vue
@@ -13,6 +13,10 @@ const { t } = useI18n()
 // 输入参数
 const props = defineProps({
  workflow: Object as PropType<WorkflowShare>,
+  eventTypes: {
+    type: Array as PropType<Array<{ title: string; value: string }>>,
+    default: () => [],
+  },
 })

 // 定义事件
@@ -32,6 +36,12 @@ 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()

@@ -190,10 +200,23 @@ async function doDelete() {
                      <span class="text-body-1"> {{ props.workflow?.share_user }}</span>
                    </VListItemTitle>
                  </VListItem>
-                  <VListItem class="ps-0" v-if="props.workflow?.timer">
+                  <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.timer') }}：</span>
-                      <span class="text-body-1"> {{ props.workflow?.timer }}</span>
+                      <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">
--- 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({
@@ -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
--- a/src/components/dialog/SiteAddEditDialog.vue
+++ b/src/components/dialog/SiteAddEditDialog.vue
@@ -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')"
--- a/src/components/dialog/SiteStatisticsDialog.vue
+++ b/src/components/dialog/SiteStatisticsDialog.vue
@@ -0,0 +1,469 @@
+<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 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
+    })
+})
+
+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">{{ siteStats.length }}</div>
+                <div class="stat-label">{{ t('site.totalSites') }}</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-number success--text">
+                  {{ siteStats.filter(s => s.lst_state === 0).length }}
+                </div>
+                <div class="stat-label">{{ t('site.normalSites') }}</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-number warning--text">
+                  {{ siteStats.filter(s => s.lst_state === 0 && s.seconds && s.seconds >= 5).length }}
+                </div>
+                <div class="stat-label">{{ t('site.slowSites') }}</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-number error--text">
+                  {{ siteStats.filter(s => s.lst_state === 1).length }}
+                </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">
+                      {{
+                        item.stats?.success && item.stats?.fail
+                          ? Math.round((item.stats.success / (item.stats.success + item.stats.fail)) * 100)
+                          : '-'
+                      }}%
+                    </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
@@ -290,8 +290,8 @@ onBeforeMount(() => {
  <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')" />
--- 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) {
@@ -283,7 +287,7 @@ onMounted(() => {
  <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>
--- 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/SubscribeShareStatisticsDialog.vue
+++ b/src/components/dialog/SubscribeShareStatisticsDialog.vue
@@ -0,0 +1,477 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import api from '@/api'
+import type { SubscribeShareStatistics } from '@/api/types'
+import { useI18n } from 'vue-i18n'
+import { useDisplay, useTheme } from 'vuetify'
+
+// 国际化
+const { t } = useI18n()
+
+// 显示器宽度
+const display = useDisplay()
+
+// 主题
+const theme = useTheme()
+
+// 定义事件
+const emit = defineEmits(['close'])
+
+// 统计数据
+const statistics = ref<SubscribeShareStatistics[]>([])
+
+// 是否加载中
+const loading = ref(false)
+
+// 获取统计数据
+async function fetchStatistics() {
+  try {
+    loading.value = true
+    const data: SubscribeShareStatistics[] = await api.get('subscribe/share/statistics')
+    statistics.value = data
+  } catch (error) {
+    console.error('获取分享统计数据失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 计算排名
+const rankedStatistics = computed(() => {
+  return statistics.value
+    .sort((a, b) => (b.total_reuse_count || 0) - (a.total_reuse_count || 0))
+    .map((item, index) => ({
+      ...item,
+      rank: index + 1,
+    }))
+})
+
+// 获取排名样式
+function getRankStyle(rank: number) {
+  if (rank === 1) {
+    return {
+      background: 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)',
+      color: '#fff',
+      fontWeight: 'bold',
+    }
+  } else if (rank === 2) {
+    return {
+      background: 'linear-gradient(135deg, #CD7F32 0%, #B8860B 100%)',
+      color: '#fff',
+      fontWeight: 'bold',
+    }
+  } else if (rank === 3) {
+    return {
+      background: 'linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%)',
+      color: '#fff',
+      fontWeight: 'bold',
+    }
+  }
+  return {}
+}
+
+// 获取前三名文字颜色
+function getPodiumTextColor() {
+  return theme.global.current.value.dark ? '#fff' : '#000'
+}
+
+// 获取前三名统计背景样式
+function getPodiumStatStyle() {
+  const isDark = theme.global.current.value.dark
+  return {
+    border: `1px solid ${isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)'}`,
+    background: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+  }
+}
+
+// 获取前三名区域背景样式
+function getPodiumAreaBackgroundStyle() {
+  const isDark = theme.global.current.value.dark
+  return {
+    background: isDark
+      ? 'linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 69, 0, 0.2) 25%, rgba(255, 20, 147, 0.15) 50%, rgba(138, 43, 226, 0.1) 75%, rgba(0, 191, 255, 0.08) 100%), linear-gradient(to bottom, transparent 0%, transparent 70%, rgba(255, 215, 0, 0.1) 85%, transparent 100%)'
+      : 'linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 69, 0, 0.15) 25%, rgba(255, 20, 147, 0.12) 50%, rgba(138, 43, 226, 0.08) 75%, rgba(0, 191, 255, 0.05) 100%), linear-gradient(to bottom, transparent 0%, transparent 70%, rgba(255, 215, 0, 0.08) 85%, transparent 100%)',
+    border: 'none',
+    borderRadius: '0',
+    padding: '32px 24px 48px 24px',
+    margin: '0 -24px 0 -',
+    boxShadow: isDark
+      ? '0 16px 48px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1)'
+      : '0 16px 48px rgba(255, 215, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3)',
+    position: 'relative' as const,
+    overflow: 'hidden',
+  }
+}
+
+// 获取排名图标
+function getRankIcon(rank: number) {
+  if (rank === 1) return 'mdi-trophy'
+  if (rank === 2) return 'mdi-medal-outline'
+  if (rank === 3) return 'mdi-medal'
+  return ''
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchStatistics()
+})
+</script>
+
+<template>
+  <DialogWrapper scrollable max-width="40rem" :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem>
+        <template #prepend>
+          <VIcon icon="mdi-chart-line" class="me-2" />
+        </template>
+        <VCardTitle>{{ t('subscribe.shareStatistics') }}</VCardTitle>
+      </VCardItem>
+      <VDialogCloseBtn @click="emit('close')" />
+      <VDivider />
+      <VCardText class="pa-0">
+        <LoadingBanner v-if="loading" class="mt-4" />
+        <div v-else-if="rankedStatistics.length === 0" class="text-center py-8">
+          <VIcon icon="mdi-chart-line" size="64" color="grey" class="mb-4" />
+          <div class="text-h6 text-grey">{{ t('subscribe.noStatisticsData') }}</div>
+        </div>
+
+        <div v-else>
+          <!-- 前三名特殊展示 -->
+          <div class="podium-area" :style="getPodiumAreaBackgroundStyle()">
+            <!-- 装饰性背景元素 -->
+            <div class="podium-decoration">
+              <div class="decoration-circle decoration-1"></div>
+              <div class="decoration-circle decoration-2"></div>
+              <div class="decoration-circle decoration-3"></div>
+            </div>
+            <div class="text-h6 mb-4 text-center podium-title">{{ t('subscribe.ranking') }}</div>
+            <!-- 大屏幕横向排列 -->
+            <div class="d-none d-md-flex justify-center align-center gap-4 flex-wrap">
+              <!-- 第二名 -->
+              <div v-if="rankedStatistics[1]" class="text-center">
+                <div class="rank-circle mb-2" :style="getRankStyle(2)">
+                  <VIcon :icon="getRankIcon(2)" size="24" />
+                </div>
+                <div class="text-h6 font-weight-bold" :style="{ color: getPodiumTextColor() }">
+                  {{ rankedStatistics[1].share_user || '未知' }}
+                </div>
+                <div class="d-flex align-center justify-center gap-2 mt-1">
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-share-outline" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span class="font-weight-bold" :style="{ color: getPodiumTextColor() }">{{
+                      rankedStatistics[1].share_count || 0
+                    }}</span>
+                  </div>
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-fire" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span class="font-weight-bold" :style="{ color: getPodiumTextColor() }">{{
+                      rankedStatistics[1].total_reuse_count || 0
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 第一名 -->
+              <div v-if="rankedStatistics[0]" class="text-center">
+                <div class="rank-circle mb-2 first-place" :style="getRankStyle(1)">
+                  <VIcon :icon="getRankIcon(1)" size="32" />
+                </div>
+                <div class="text-h5 font-weight-bold" :style="{ color: getPodiumTextColor() }">
+                  {{ rankedStatistics[0].share_user || '未知' }}
+                </div>
+                <div class="d-flex align-center justify-center gap-3 mt-1">
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-share-outline" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span class="font-weight-bold" :style="{ color: getPodiumTextColor() }">{{
+                      rankedStatistics[0].share_count || 0
+                    }}</span>
+                  </div>
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-fire" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span class="font-weight-bold" :style="{ color: getPodiumTextColor() }">{{
+                      rankedStatistics[0].total_reuse_count || 0
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 第三名 -->
+              <div v-if="rankedStatistics[2]" class="text-center">
+                <div class="rank-circle mb-2" :style="getRankStyle(3)">
+                  <VIcon :icon="getRankIcon(3)" size="24" />
+                </div>
+                <div class="text-h6 font-weight-bold" :style="{ color: getPodiumTextColor() }">
+                  {{ rankedStatistics[2].share_user || '未知' }}
+                </div>
+                <div class="d-flex align-center justify-center gap-2 mt-1">
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-share-outline" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span class="font-weight-bold" :style="{ color: getPodiumTextColor() }">{{
+                      rankedStatistics[2].share_count || 0
+                    }}</span>
+                  </div>
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-fire" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span class="font-weight-bold" :style="{ color: getPodiumTextColor() }">{{
+                      rankedStatistics[2].total_reuse_count || 0
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 小屏幕垂直排列 -->
+            <div class="d-flex d-md-none flex-column align-center gap-4">
+              <!-- 第一名 -->
+              <div v-if="rankedStatistics[0]" class="text-center">
+                <div class="rank-circle mb-2 first-place" :style="getRankStyle(1)">
+                  <VIcon :icon="getRankIcon(1)" size="32" />
+                </div>
+                <div class="text-h5 font-weight-bold" :style="{ color: getPodiumTextColor() }">
+                  {{ rankedStatistics[0].share_user || '未知' }}
+                </div>
+                <div class="d-flex align-center justify-center gap-3 mt-1">
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-share-outline" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span :style="{ color: getPodiumTextColor() }">{{ rankedStatistics[0].share_count || 0 }}</span>
+                  </div>
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-fire" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span :style="{ color: getPodiumTextColor() }">{{
+                      rankedStatistics[0].total_reuse_count || 0
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 第二名 -->
+              <div v-if="rankedStatistics[1]" class="text-center">
+                <div class="rank-circle mb-2" :style="getRankStyle(2)">
+                  <VIcon :icon="getRankIcon(2)" size="24" />
+                </div>
+                <div class="text-h6 font-weight-bold" :style="{ color: getPodiumTextColor() }">
+                  {{ rankedStatistics[1].share_user || '未知' }}
+                </div>
+                <div class="d-flex align-center justify-center gap-2 mt-1">
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-share-outline" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span :style="{ color: getPodiumTextColor() }">{{ rankedStatistics[1].share_count || 0 }}</span>
+                  </div>
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-fire" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span :style="{ color: getPodiumTextColor() }">{{
+                      rankedStatistics[1].total_reuse_count || 0
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 第三名 -->
+              <div v-if="rankedStatistics[2]" class="text-center">
+                <div class="rank-circle mb-2" :style="getRankStyle(3)">
+                  <VIcon :icon="getRankIcon(3)" size="24" />
+                </div>
+                <div class="text-h6 font-weight-bold" :style="{ color: getPodiumTextColor() }">
+                  {{ rankedStatistics[2].share_user || '未知' }}
+                </div>
+                <div class="d-flex align-center justify-center gap-2 mt-1">
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-share-outline" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span :style="{ color: getPodiumTextColor() }">
+                      {{ rankedStatistics[2].share_count || 0 }}
+                    </span>
+                  </div>
+                  <div class="d-flex align-center podium-stat" :style="getPodiumStatStyle()">
+                    <VIcon icon="mdi-fire" size="14" :color="getPodiumTextColor()" class="mr-1" />
+                    <span :style="{ color: getPodiumTextColor() }">
+                      {{ rankedStatistics[2].total_reuse_count || 0 }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 完整排行榜 -->
+          <VList class="bg-transparent px-3">
+            <VListItem
+              v-for="item in rankedStatistics.filter(item => item.rank > 3)"
+              :key="item.share_user"
+              class="mb-2 rounded-lg"
+            >
+              <VListItemTitle class="font-weight-bold text-h6 mb-1">
+                {{ item.share_user || '未知' }}
+              </VListItemTitle>
+
+              <VListItemSubtitle class="d-flex align-center gap-3 mt-1">
+                <div class="stat-badge share-badge">
+                  <VIcon icon="mdi-share-outline" size="14" color="primary" class="mr-1" />
+                  <span class="text-primary font-weight-bold">{{ item.share_count || 0 }}</span>
+                  <span class="text-grey text-caption ml-1">{{ t('subscribe.shareCount') }}</span>
+                </div>
+                <div class="stat-badge reuse-badge">
+                  <VIcon icon="mdi-fire" size="14" color="warning" class="mr-1" />
+                  <span class="text-warning font-weight-bold">{{ item.total_reuse_count || 0 }}</span>
+                  <span class="text-grey text-caption ml-1">{{ t('subscribe.totalReuseCount') }}</span>
+                </div>
+              </VListItemSubtitle>
+
+              <template #append>
+                <div class="text-right">
+                  <div
+                    class="text-h6 font-weight-bold"
+                    :style="{ color: item.rank <= 3 ? 'var(--v-primary-base)' : 'inherit' }"
+                  >
+                    #{{ item.rank }}
+                  </div>
+                </div>
+              </template>
+            </VListItem>
+          </VList>
+        </div>
+      </VCardText>
+    </VCard>
+  </DialogWrapper>
+</template>
+
+<style scoped>
+.rank-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  block-size: 60px;
+  inline-size: 60px;
+  margin-block: 0;
+  margin-inline: auto;
+}
+
+.first-place {
+  block-size: 80px;
+  box-shadow: 0 4px 12px rgba(255, 215, 0, 30%);
+  inline-size: 80px;
+}
+
+.rank-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  block-size: 32px;
+  inline-size: 32px;
+}
+
+.stat-badge {
+  display: flex;
+  align-items: center;
+  border: 1px solid rgba(var(--v-theme-outline), 0.2);
+  border-radius: 6px;
+  background: rgba(var(--v-theme-surface), 0.8);
+  padding-block: 4px;
+  padding-inline: 8px;
+  transition: all 0.2s ease;
+}
+
+.share-badge {
+  border-inline-start: 3px solid rgb(var(--v-theme-primary));
+}
+
+.reuse-badge {
+  border-inline-start: 3px solid rgb(var(--v-theme-warning));
+}
+
+.podium-stat {
+  border-radius: 6px;
+  backdrop-filter: blur(4px);
+  padding-block: 4px;
+  padding-inline: 8px;
+  transition: all 0.2s ease;
+}
+
+.podium-stat:hover {
+  transform: scale(1.05);
+}
+
+/* 前三名区域样式 */
+.podium-area {
+  position: relative;
+  z-index: 1;
+}
+
+.podium-title {
+  position: relative;
+  z-index: 2;
+  color: #fff !important;
+  font-weight: bold;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 30%);
+}
+
+/* 装饰性元素 */
+.podium-decoration {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  pointer-events: none;
+}
+
+.decoration-circle {
+  position: absolute;
+  border-radius: 50%;
+  animation: float 6s ease-in-out infinite;
+  background: radial-gradient(circle, rgba(255, 255, 255, 10%) 0%, transparent 70%);
+}
+
+.decoration-1 {
+  animation-delay: 0s;
+  block-size: 80px;
+  inline-size: 80px;
+  inset-block-start: 10%;
+  inset-inline-start: 10%;
+}
+
+.decoration-2 {
+  animation-delay: 2s;
+  block-size: 60px;
+  inline-size: 60px;
+  inset-block-start: 20%;
+  inset-inline-end: 15%;
+}
+
+.decoration-3 {
+  animation-delay: 4s;
+  block-size: 40px;
+  inline-size: 40px;
+  inset-block-end: 20%;
+  inset-inline-start: 20%;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    opacity: 0.6;
+    transform: translateY(0) rotate(0deg);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-10px) rotate(180deg);
+  }
+}
+
+/* 增强前三名文字效果 */
+.podium-area .text-h6,
+.podium-area .text-h5 {
+  font-weight: bold;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 30%);
+}
+
+.podium-area .rank-circle {
+  border: 2px solid rgba(255, 255, 255, 20%);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 30%);
+}
+
+.podium-area .first-place {
+  border: 3px solid rgba(255, 215, 0, 50%);
+  box-shadow: 0 12px 32px rgba(255, 215, 0, 40%);
+}
+</style>
--- a/src/components/dialog/WorkflowAddEditDialog.vue
+++ b/src/components/dialog/WorkflowAddEditDialog.vue
@@ -33,20 +33,95 @@ const workflowForm = ref<Workflow>(
    name: undefined,
    timer: undefined,
    description: undefined,
+    trigger_type: 'timer',
+    event_type: undefined,
    state: 'P',
    run_count: 0,
  },
 )

+// 监听props变化，处理存量数据
+watch(
+  () => props.workflow,
+  newWorkflow => {
+    if (newWorkflow) {
+      // 如果trigger_type为空，默认为timer
+      if (!newWorkflow.trigger_type) {
+        newWorkflow.trigger_type = 'timer'
+      }
+      workflowForm.value = { ...newWorkflow }
+    }
+  },
+  { immediate: true },
+)
+
+// 事件类型列表
+const eventTypes = ref<Array<{ title: string; value: string }>>([])
+
+// 触发类型选项
+const triggerTypeOptions = computed(() => [
+  {
+    title: t('dialog.workflowAddEdit.triggerTypeTimer'),
+    value: 'timer',
+    prependIcon: 'mdi-clock-outline',
+  },
+  {
+    title: t('dialog.workflowAddEdit.triggerTypeEvent'),
+    value: 'event',
+    prependIcon: 'mdi-calendar-check',
+  },
+  {
+    title: t('dialog.workflowAddEdit.triggerTypeManual'),
+    value: 'manual',
+    prependIcon: 'mdi-hand-pointing-up',
+  },
+])
+
+// 加载事件类型列表
+async function loadEventTypes() {
+  try {
+    eventTypes.value = await api.get('workflow/event_types')
+  } catch (error) {
+    console.error('Failed to load event types:', error)
+  }
+}
+
+// 监听触发类型变化
+watch(
+  () => workflowForm.value.trigger_type,
+  newType => {
+    if (newType !== 'event') {
+      workflowForm.value.event_type = undefined
+    }
+  },
+)
+
 // 提示框
 const $toast = useToast()

 // 调用API 新增任务
 async function addWorkflow() {
-  if (!workflowForm.value.name || !workflowForm.value.timer) {
+  if (!workflowForm.value.name) {
    $toast.error(t('dialog.workflowAddEdit.nameRequired'))
    return
  }
+
+  if (!workflowForm.value.trigger_type) {
+    $toast.error(t('dialog.workflowAddEdit.triggerRequired'))
+    return
+  }
+
+  // 根据触发类型验证必填字段
+  if (workflowForm.value.trigger_type === 'timer' && !workflowForm.value.timer) {
+    $toast.error(t('dialog.workflowAddEdit.timerRequired'))
+    return
+  }
+
+  if (workflowForm.value.trigger_type === 'event' && !workflowForm.value.event_type) {
+    $toast.error(t('dialog.workflowAddEdit.eventTypeRequired'))
+    return
+  }
+
  startNProgress()
  try {
    const result: { [key: string]: string } = await api.post('workflow/', workflowForm.value)
@@ -64,10 +139,27 @@ async function addWorkflow() {

 // 调用API 编辑任务
 async function editWorkflow() {
-  if (!workflowForm.value.name || !workflowForm.value.timer) {
+  if (!workflowForm.value.name) {
    $toast.error(t('dialog.workflowAddEdit.nameRequired'))
    return
  }
+
+  if (!workflowForm.value.trigger_type) {
+    $toast.error(t('dialog.workflowAddEdit.triggerRequired'))
+    return
+  }
+
+  // 根据触发类型验证必填字段
+  if (workflowForm.value.trigger_type === 'timer' && !workflowForm.value.timer) {
+    $toast.error(t('dialog.workflowAddEdit.timerRequired'))
+    return
+  }
+
+  if (workflowForm.value.trigger_type === 'event' && !workflowForm.value.event_type) {
+    $toast.error(t('dialog.workflowAddEdit.eventTypeRequired'))
+    return
+  }
+
  startNProgress()
  try {
    const result: { [key: string]: string } = await api.put(`workflow/${workflowForm.value.id}`, workflowForm.value)
@@ -82,6 +174,11 @@ async function editWorkflow() {
  }
  doneNProgress()
 }
+
+// 组件挂载时加载事件类型
+onMounted(() => {
+  loadEventTypes()
+})
 </script>

 <template>
@@ -109,6 +206,25 @@ async function editWorkflow() {
              />
            </VCol>
            <VCol cols="12">
+              <VSelect
+                v-model="workflowForm.trigger_type"
+                :label="t('dialog.workflowAddEdit.triggerType')"
+                :items="triggerTypeOptions"
+                item-title="title"
+                item-value="value"
+                :rules="[requiredValidator]"
+                prepend-inner-icon="mdi-run"
+              >
+                <template #item="{ item, props: itemProps }">
+                  <VListItem v-bind="itemProps">
+                    <template #prepend>
+                      <VIcon :icon="item.raw.prependIcon" />
+                    </template>
+                  </VListItem>
+                </template>
+              </VSelect>
+            </VCol>
+            <VCol v-if="workflowForm.trigger_type === 'timer'" cols="12">
              <VCronField
                v-model="workflowForm.timer"
                :label="t('dialog.workflowAddEdit.schedule')"
@@ -119,6 +235,19 @@ async function editWorkflow() {
                prepend-inner-icon="mdi-clock-outline"
              />
            </VCol>
+            <VCol v-if="workflowForm.trigger_type === 'event'" cols="12">
+              <VSelect
+                v-model="workflowForm.event_type"
+                :label="t('dialog.workflowAddEdit.eventType')"
+                :items="eventTypes"
+                item-title="title"
+                item-value="value"
+                :rules="[requiredValidator]"
+                persistent-hint
+                :hint="t('dialog.workflowAddEdit.eventTypePlaceholder')"
+                prepend-inner-icon="mdi-calendar-check"
+              />
+            </VCol>
            <VCol cols="12">
              <VTextarea
                v-model="workflowForm.description"
--- a/src/composables/useOfflineStatus.ts
+++ b/src/composables/useOfflineStatus.ts
@@ -4,6 +4,8 @@ import { useOnline } from '@vueuse/core'
 // 全局状态
 const isAppOffline = ref(false)
 const appOfflineReason = ref('')
+const consecutiveNetworkErrors = ref(0)
+const MAX_CONSECUTIVE_ERRORS = 3

 // 全局离线状态管理
 export function useGlobalOfflineStatus() {
@@ -19,6 +21,26 @@ export function useGlobalOfflineStatus() {
  const setAppOffline = (offline: boolean, reason?: string) => {
    isAppOffline.value = offline
    appOfflineReason.value = reason || ''
+
+    // 如果设置为在线状态，重置连续错误计数
+    if (!offline) {
+      consecutiveNetworkErrors.value = 0
+    }
+  }
+
+  // 记录网络错误
+  const recordNetworkError = (reason?: string) => {
+    consecutiveNetworkErrors.value++
+
+    // 只有连续出现三次网络错误时才设置为离线模式
+    if (consecutiveNetworkErrors.value >= MAX_CONSECUTIVE_ERRORS) {
+      setAppOffline(true, reason || `连续${MAX_CONSECUTIVE_ERRORS}次网络错误`)
+    }
+  }
+
+  // 重置连续错误计数
+  const resetConsecutiveErrors = () => {
+    consecutiveNetworkErrors.value = 0
  }

  // 获取离线消息
@@ -37,7 +59,10 @@ export function useGlobalOfflineStatus() {
    isOffline,
    canPerformNetworkAction,
    setAppOffline,
+    recordNetworkError,
+    resetConsecutiveErrors,
    getOfflineMessage,
+    consecutiveNetworkErrors: computed(() => consecutiveNetworkErrors.value),
  }
 }

--- a/src/composables/useScrollLock.ts
+++ b/src/composables/useScrollLock.ts
@@ -1,5 +1,35 @@
 import { ref, watch, onBeforeUnmount, readonly } from 'vue'

+/**
+ * 滚动锁定 Composable
+ *
+ * 使用示例：
+ *
+ * // 基本用法
+ * const { isLocked, lockScroll, restoreScroll } = useScrollLock()
+ *
+ * // 带配置的用法
+ * const { isLocked, lockScroll, restoreScroll } = useScrollLock({
+ *   preventTouchScroll: true,
+ *   preserveScrollPosition: true,
+ *   allowScrollSelectors: ['.my-modal', '.scrollable-content'],
+ *   allowScrollContainerSelectors: ['.modal-content'],
+ *   customScrollCheck: (element) => {
+ *     // 自定义逻辑
+ *     return element.classList.contains('allow-scroll')
+ *   }
+ * })
+ *
+ * // 自动监听版本
+ * const { isLocked, lockScroll, restoreScroll } = useScrollLockWithWatch(
+ *   showModal, // 响应式布尔值
+ *   {
+ *     allowScrollSelectors: ['.modal-content'],
+ *     allowScrollContainerSelectors: ['.scrollable-area']
+ *   }
+ * )
+ */
+
 // 滚动锁定配置
 export interface ScrollLockOptions {
  // 是否在组件卸载时自动恢复滚动
@@ -14,10 +44,22 @@ export interface ScrollLockOptions {
    position?: string
    width?: string
  }
+  // 允许滚动的选择器列表（CSS选择器）
+  // 例如：['.my-modal', '.scrollable-content']
+  allowScrollSelectors?: string[]
+  // 允许滚动的容器选择器列表（CSS选择器）
+  // 这些容器内的可滚动元素将被允许滚动
+  // 例如：['.modal-content', '.scroll-container']
+  allowScrollContainerSelectors?: string[]
+  // 自定义滚动检查函数
+  // 返回 true 表示允许滚动，false 表示阻止滚动
+  customScrollCheck?: (element: Element) => boolean
 }

 // 默认配置
-const DEFAULT_OPTIONS: Required<ScrollLockOptions> = {
+const DEFAULT_OPTIONS: Required<
+  Omit<ScrollLockOptions, 'allowScrollSelectors' | 'allowScrollContainerSelectors' | 'customScrollCheck'>
+> = {
  autoRestore: true,
  preserveScrollPosition: true,
  preventTouchScroll: true,
@@ -28,15 +70,97 @@ const DEFAULT_OPTIONS: Required<ScrollLockOptions> = {
  },
 }

+// 全局状态管理
+const globalLockCount = ref(0)
+const globalOriginalStyles = ref<{
+  body: { [key: string]: string }
+  documentElement: { [key: string]: string }
+  html: { [key: string]: string }
+} | null>(null)
+const globalSavedScrollPosition = ref(0)
+const globalTouchEventListeners = new Set<(event: TouchEvent) => void>()
+
+// 保存全局原始样式（只在第一次锁定时保存）
+const saveGlobalOriginalStyles = () => {
+  if (globalOriginalStyles.value === null) {
+    globalOriginalStyles.value = {
+      body: {
+        overflow: document.body.style.overflow,
+      },
+      documentElement: {
+        overflow: document.documentElement.style.overflow,
+      },
+      html: {
+        overflow: document.documentElement.style.overflow,
+      },
+    }
+  }
+}
+
+// 保存全局滚动位置（只在第一次锁定时保存）
+const saveGlobalScrollPosition = () => {
+  if (globalLockCount.value === 0) {
+    globalSavedScrollPosition.value =
+      window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+  }
+}
+
+// 应用全局锁定样式
+const applyGlobalLockStyles = (config: any) => {
+  if (globalLockCount.value === 1) {
+    // 第一次锁定时应用样式
+    document.body.style.overflow = config.lockStyles.overflow || 'hidden'
+    document.documentElement.style.overflow = config.lockStyles.overflow || 'hidden'
+    document.documentElement.classList.add('v-overlay-scroll-blocked')
+  }
+}
+
+// 恢复全局样式（只在最后一个锁定时恢复）
+const restoreGlobalStyles = (config: any) => {
+  if (globalLockCount.value === 0 && globalOriginalStyles.value) {
+    // 最后一个锁定时恢复样式
+    document.body.style.overflow = globalOriginalStyles.value.body.overflow || ''
+    document.documentElement.style.overflow = globalOriginalStyles.value.documentElement.overflow || ''
+
+    // 移除 CSS 类名
+    document.documentElement.classList.remove('v-overlay-scroll-blocked')
+
+    // 重置全局状态
+    globalOriginalStyles.value = null
+    globalSavedScrollPosition.value = 0
+  }
+}
+
+// 添加全局触摸事件监听器
+const addGlobalTouchEventListener = (listener: (event: TouchEvent) => void) => {
+  globalTouchEventListeners.add(listener)
+  if (globalTouchEventListeners.size === 1) {
+    // 第一次添加监听器时绑定到document
+    document.addEventListener('touchmove', listener, { passive: false })
+  }
+}
+
+// 移除全局触摸事件监听器
+const removeGlobalTouchEventListener = (listener: (event: TouchEvent) => void) => {
+  globalTouchEventListeners.delete(listener)
+  if (globalTouchEventListeners.size === 0) {
+    // 最后一个监听器被移除时解绑
+    document.removeEventListener('touchmove', listener)
+  }
+}
+
 export function useScrollLock(options: ScrollLockOptions = {}) {
-  const config = { ...DEFAULT_OPTIONS, ...options }
+  const config = {
+    ...DEFAULT_OPTIONS,
+    allowScrollSelectors: options.allowScrollSelectors || [],
+    allowScrollContainerSelectors: options.allowScrollContainerSelectors || [],
+    customScrollCheck: options.customScrollCheck,
+    ...options,
+  }

  // 状态管理
  const isLocked = ref(false)
  const savedScrollPosition = ref(0)
-  const originalBodyStyles = ref<{ [key: string]: string }>({})
-  const originalDocumentStyles = ref<{ [key: string]: string }>({})
-  const originalHtmlStyles = ref<{ [key: string]: string }>({})

  // 保存当前滚动位置
  const saveScrollPosition = () => {
@@ -46,58 +170,75 @@ export function useScrollLock(options: ScrollLockOptions = {}) {
    }
  }

-  // 保存原始样式
-  const saveOriginalStyles = () => {
-    // 保存 body 样式
-    originalBodyStyles.value = {
-      overflow: document.body.style.overflow,
-      position: document.body.style.position,
-      top: document.body.style.top,
-      width: document.body.style.width,
+  // 检查元素是否应该允许滚动
+  const shouldAllowScroll = (element: Element): boolean => {
+    // 1. 检查是否匹配允许滚动的选择器
+    for (const selector of config.allowScrollSelectors) {
+      if (element.matches(selector) || element.closest(selector)) {
+        return true
+      }
    }

-    // 保存 documentElement 样式
-    originalDocumentStyles.value = {
-      overflow: document.documentElement.style.overflow,
+    // 2. 检查是否在允许滚动的容器内
+    for (const selector of config.allowScrollContainerSelectors) {
+      const container = element.closest(selector)
+      if (container) {
+        // 检查容器是否可滚动
+        const style = getComputedStyle(container)
+        const isScrollable =
+          container.scrollHeight > container.clientHeight &&
+          style.overflow !== 'hidden' &&
+          (style.overflow === 'auto' ||
+            style.overflow === 'scroll' ||
+            style.overflowY === 'auto' ||
+            style.overflowY === 'scroll')
+        if (isScrollable) {
+          return true
+        }
+      }
    }

-    // 保存 html 样式
-    originalHtmlStyles.value = {
-      overflow: document.documentElement.style.overflow,
+    // 3. 检查是否在弹窗、菜单或其他覆盖层内
+    const isInDialog = element.closest(
+      '.v-dialog, .v-menu, .v-bottom-sheet, .v-snackbar, [role="dialog"], .v-overlay__content',
+    )
+
+    // 4. 检查是否是可滚动的内容区域
+    const isScrollableContent = element.closest(
+      '.v-card-text, .v-list, .v-table__wrapper, .v-data-table__wrapper, .v-sheet, .v-card__content, .v-data-table, .v-table',
+    )
+
+    // 5. 检查是否在可滚动的容器内
+    const scrollableContainer = element.closest('[style*="overflow"], [class*="overflow"]')
+    const isInScrollableContainer =
+      scrollableContainer &&
+      (scrollableContainer.scrollHeight > scrollableContainer.clientHeight ||
+        getComputedStyle(scrollableContainer).overflow !== 'hidden')
+
+    // 6. 使用自定义检查函数
+    if (config.customScrollCheck && config.customScrollCheck(element)) {
+      return true
    }
+
+    // 如果不在弹窗内且不是可滚动内容且不在可滚动容器内，则不允许滚动
+    return !!(isInDialog || isScrollableContent || isInScrollableContainer)
  }

  // 阻止触摸滚动事件
  const preventTouchScroll = (event: TouchEvent) => {
    if (isLocked.value && config.preventTouchScroll) {
-      // 检查触摸事件的目标元素是否在弹窗内
+      // 检查触摸事件的目标元素
      const target = event.target as Element
      if (target) {
-        // 检查目标元素是否在弹窗、菜单或其他覆盖层内
-        const isInDialog = target.closest(
-          '.v-dialog, .v-menu, .v-bottom-sheet, .v-snackbar, [role="dialog"], .v-overlay__content',
-        )
-
-        // 检查目标元素是否是可滚动的内容区域
-        const isScrollableContent = target.closest(
-          '.v-card-text, .v-list, .v-table__wrapper, .v-data-table__wrapper, .v-sheet, .v-card__content, .v-data-table, .v-table',
-        )
-
-        // 检查目标元素是否在可滚动的容器内
-        const scrollableContainer = target.closest('[style*="overflow"], [class*="overflow"]')
-        const isInScrollableContainer =
-          scrollableContainer &&
-          (scrollableContainer.scrollHeight > scrollableContainer.clientHeight ||
-            getComputedStyle(scrollableContainer).overflow !== 'hidden')
-
-        // 如果不在弹窗内且不是可滚动内容且不在可滚动容器内，则阻止滚动
-        if (!isInDialog && !isScrollableContent && !isInScrollableContainer) {
-          event.preventDefault()
+        // 如果元素应该允许滚动，则不阻止事件
+        if (shouldAllowScroll(target)) {
+          return
        }
-      } else {
-        // 如果无法确定目标元素，则阻止滚动以确保安全
-        event.preventDefault()
      }
+
+      // 否则阻止滚动
+      event.preventDefault()
+      event.stopPropagation()
    }
  }

@@ -105,35 +246,21 @@ export function useScrollLock(options: ScrollLockOptions = {}) {
  const lockScroll = () => {
    if (isLocked.value) return

-    // 保存当前状态
-    saveScrollPosition()
-    saveOriginalStyles()
+    // 增加全局锁定计数
+    globalLockCount.value++

-    // 应用锁定样式到 body
-    document.body.style.overflow = config.lockStyles.overflow || 'hidden'
-    document.body.style.position = config.lockStyles.position || 'fixed'
-    document.body.style.width = config.lockStyles.width || '100%'
-
-    // 应用锁定样式到 documentElement
-    document.documentElement.style.overflow = config.lockStyles.overflow || 'hidden'
-
-    // 添加 CSS 类名
-    document.documentElement.classList.add('v-overlay-scroll-blocked')
-
-    // 如果需要保持滚动位置，设置top偏移
-    if (config.preserveScrollPosition) {
-      document.body.style.top = `-${savedScrollPosition.value}px`
+    // 保存当前状态（只在第一次锁定时）
+    if (globalLockCount.value === 1) {
+      saveGlobalOriginalStyles()
+      saveGlobalScrollPosition()
    }

-    // 保持navbar的滚动状态 - 添加一个CSS变量来记录滚动位置
-    if (savedScrollPosition.value > 0) {
-      document.documentElement.style.setProperty('--saved-scroll-y', `${savedScrollPosition.value}px`)
-      document.documentElement.classList.add('dialog-scroll-locked')
-    }
+    // 应用锁定样式
+    applyGlobalLockStyles(config)

    // 添加触摸事件监听器
    if (config.preventTouchScroll) {
-      document.addEventListener('touchmove', preventTouchScroll, { passive: false })
+      addGlobalTouchEventListener(preventTouchScroll)
    }

    isLocked.value = true
@@ -143,29 +270,16 @@ export function useScrollLock(options: ScrollLockOptions = {}) {
  const restoreScroll = () => {
    if (!isLocked.value) return

-    // 恢复原始样式
-    document.body.style.overflow = originalBodyStyles.value.overflow || ''
-    document.body.style.position = originalBodyStyles.value.position || ''
-    document.body.style.top = originalBodyStyles.value.top || ''
-    document.body.style.width = originalBodyStyles.value.width || ''
-    document.documentElement.style.overflow = originalDocumentStyles.value.overflow || ''
-
-    // 移除 CSS 类名
-    document.documentElement.classList.remove('v-overlay-scroll-blocked')
-    document.documentElement.classList.remove('dialog-scroll-locked')
-
-    // 移除CSS变量
-    document.documentElement.style.removeProperty('--saved-scroll-y')
+    // 减少全局锁定计数
+    globalLockCount.value--

    // 移除触摸事件监听器
    if (config.preventTouchScroll) {
-      document.removeEventListener('touchmove', preventTouchScroll)
+      removeGlobalTouchEventListener(preventTouchScroll)
    }

-    // 恢复滚动位置
-    if (config.preserveScrollPosition) {
-      window.scrollTo(0, savedScrollPosition.value)
-    }
+    // 恢复样式（只在最后一个锁定时）
+    restoreGlobalStyles(config)

    isLocked.value = false
  }
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -164,7 +164,15 @@ const handleServiceWorkerMessage = (event: MessageEvent) => {
 }

 // 使用滚动锁定 composable（自动监听showPluginQuickAccess的变化）
-useScrollLockWithWatch(showPluginQuickAccess)
+useScrollLockWithWatch(showPluginQuickAccess, {
+  preventTouchScroll: true,
+  preserveScrollPosition: true,
+  autoRestore: true,
+  // 允许快速访问面板内的滚动
+  allowScrollSelectors: ['.plugin-quick-access'],
+  // 允许快速访问面板内的可滚动容器
+  allowScrollContainerSelectors: ['.plugin-grid'],
+})

 // 检查是否可以使用下拉手势
 const canUsePullGesture = () => {
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -248,10 +248,16 @@ const showDynamicButton = computed(() => {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px);
-  background-color: rgba(var(--v-theme-surface), 0.3);
+  background-color: rgba(var(--v-theme-surface), 0.6);
  pointer-events: auto;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);

+  // 透明主题下的特殊样式
+  .v-theme--transparent & {
+    backdrop-filter: blur(var(--transparent-blur-heavy, 16px));
+    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy, 0.5));
+  }
+
  &.shift-left {
    transform: translateX(0);
  }
--- a/src/layouts/components/QuickAccess.vue
+++ b/src/layouts/components/QuickAccess.vue
@@ -141,7 +141,9 @@ function getPluginIcon(plugin: Plugin): string {

  // 如果是网络图片则使用代理后返回
  if (plugin?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(plugin?.plugin_icon)}&cache=true`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(
+      plugin?.plugin_icon,
+    )}&cache=true`

  return `./plugin_icon/${plugin?.plugin_icon}`
 }
@@ -233,6 +235,12 @@ function handleTouchStart(event: TouchEvent) {
  const target = event.target as HTMLElement
  startedFromBottomArea.value = !!target.closest('.bottom-drag-area')

+  // 如果触摸发生在插件网格内，不处理拖拽关闭
+  if (target.closest('.plugin-grid')) {
+    startedFromBottomArea.value = false
+    return
+  }
+
  startY.value = touch.clientY
  lastY.value = touch.clientY
  lastTime.value = Date.now()
@@ -253,6 +261,12 @@ function handleTouchMove(event: TouchEvent) {
  // 只有从 bottom-drag-area 开始的触摸才处理上滑关闭
  if (!startedFromBottomArea.value) return

+  // 检查当前触摸是否在插件网格内，如果是则不处理拖拽关闭
+  const target = event.target as HTMLElement
+  if (target.closest('.plugin-grid')) {
+    return
+  }
+
  const currentY = touch.clientY
  const currentTime = Date.now()
  const deltaY = startY.value - currentY // 向上为正值
@@ -561,6 +575,7 @@ function handleBackdropClick(event: MouseEvent) {
  flex: 1;
  flex-direction: column;
  gap: 16px;
+  max-block-size: calc(100vh - 200px); // 确保有最大高度限制
  min-block-size: 0;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none; // IE/Edge
@@ -571,6 +586,7 @@ function handleBackdropClick(event: MouseEvent) {
  // 隐藏滚动条
  scrollbar-width: none; // Firefox
  touch-action: pan-y;
+  will-change: scroll-position;

  &::-webkit-scrollbar {
    display: none; // WebKit 浏览器
--- a/src/layouts/components/ShortcutBar.vue
+++ b/src/layouts/components/ShortcutBar.vue
@@ -111,6 +111,10 @@ async function openMessageDialog() {
  setTimeout(async () => {
    await clearAppBadge()
  }, 500)
+  // 延迟滚动到底部，确保弹窗完全打开
+  setTimeout(() => {
+    forceScrollToEnd()
+  }, 600)
 }

 // 智能滚动到底部（只有用户在底部附近时才滚动）
@@ -118,6 +122,7 @@ function scrollMessageToEnd() {
  // 使用更长的延迟确保DOM已更新
  setTimeout(() => {
    try {
+      // 查找消息弹窗的滚动容器
      const cardText = document.querySelector('.v-dialog .v-card-text')
      if (cardText) {
        const { scrollTop, scrollHeight, clientHeight } = cardText
@@ -138,6 +143,7 @@ function scrollMessageToEnd() {
 function forceScrollToEnd() {
  setTimeout(() => {
    try {
+      // 查找消息弹窗的滚动容器
      const cardText = document.querySelector('.v-dialog .v-card-text')
      if (cardText) {
        cardText.scrollTop = cardText.scrollHeight
@@ -179,7 +185,6 @@ defineExpose({
 })

 onMounted(() => {
-  forceScrollToEnd() // 初始化时强制滚动到底部
  const shortcut = getQueryValue('shortcut')
  if (shortcut) {
    const found = shortcuts.find(item => item.dialog === shortcut)
@@ -353,7 +358,7 @@ onMounted(() => {
        <VDialogCloseBtn @click="systemTestDialog = false" />
      </VCardItem>
      <VDivider />
-      <VCardText>
+      <VCardText class="pa-0">
        <ModuleTestView />
      </VCardText>
    </VCard>
--- a/src/layouts/components/UserProfile.vue
+++ b/src/layouts/components/UserProfile.vue
@@ -14,6 +14,7 @@ import { getCurrentLocale, setI18nLanguage } from '@/plugins/i18n'
 import { saveLocalTheme } from '@/@core/utils/theme'
 import type { ThemeSwitcherTheme } from '@layouts/types'
 import { useConfirm } from '@/composables/useConfirm'
+import { themeManager } from '@/utils/themeManager'

 // 认证 Store
 const authStore = useAuthStore()
@@ -45,6 +46,33 @@ const showLanguageMenu = ref(false)
 // 自定义CSS
 const customCSS = ref('')

+// 透明度相关
+const transparencyOpacity = ref(parseFloat(localStorage.getItem('transparency-opacity') || '0.3'))
+const transparencyBlur = ref(parseFloat(localStorage.getItem('transparency-blur') || '10'))
+const transparencyLevel = ref(localStorage.getItem('transparency-level') || 'medium')
+const isTransparentTheme = computed(() => currentThemeName.value === 'transparent')
+const showTransparencyDialog = ref(false)
+
+// 预设值配置
+const transparencyPresets = {
+  low: { opacity: 0.1, blur: 5 },
+  medium: { opacity: 0.3, blur: 10 },
+  high: { opacity: 0.6, blur: 15 },
+}
+
+// 判断当前值是否匹配预设值
+const currentPresetLevel = computed(() => {
+  for (const [level, preset] of Object.entries(transparencyPresets)) {
+    if (
+      Math.abs(transparencyOpacity.value - preset.opacity) < 0.01 &&
+      Math.abs(transparencyBlur.value - preset.blur) < 0.1
+    ) {
+      return level
+    }
+  }
+  return null
+})
+
 // 重启轮询控制标识
 const restartPollingId = ref<number | null>(null)
 const isRestarting = ref(false)
@@ -226,22 +254,35 @@ const themes: ThemeSwitcherTheme[] = [
 const editorTheme = computed(() => (currentThemeName.value === 'light' ? 'github' : 'monokai'))

 // 更新主题
-function updateTheme() {
+async function updateTheme() {
  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
  const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
+
+  // 设置Vuetify主题
  globalTheme.name.value = theme
+
+  // 统一处理主题切换 - 主题管理器会自动处理CSS加载和错误
+  await themeManager.setTheme(currentThemeName.value)
+
  // 保存原始主题设置，而不是计算后的值
  savedTheme.value = currentThemeName.value
  // 保存主题到本地
  saveLocalTheme(currentThemeName.value, globalTheme)
-  // 刷新页面
-  location.reload()
 }

 // 切换主题
-function changeTheme(theme: string) {
+async function changeTheme(theme: string) {
  currentThemeName.value = theme
  showThemeMenu.value = false
+
+  // 立即更新主题（不再刷新页面）
+  await updateTheme()
+
+  // 如果是透明主题，应用透明度设置
+  if (theme === 'transparent') {
+    applyTransparencySettings()
+  }
+
  // 保存主题到服务端
  try {
    api.post('/user/config/Layout', {
@@ -285,15 +326,87 @@ async function saveCustomCSS() {
  }
 }

+// 应用透明度设置
+function applyTransparencySettings() {
+  const root = document.documentElement
+
+  // 设置CSS变量
+  root.style.setProperty('--transparent-opacity', transparencyOpacity.value.toString())
+  root.style.setProperty('--transparent-opacity-light', (transparencyOpacity.value * 0.67).toString())
+  root.style.setProperty('--transparent-opacity-heavy', (transparencyOpacity.value * 1.67).toString())
+  root.style.setProperty('--transparent-blur', `${transparencyBlur.value}px`)
+  root.style.setProperty('--transparent-blur-light', `${transparencyBlur.value * 0.6}px`)
+  root.style.setProperty('--transparent-blur-heavy', `${transparencyBlur.value * 1.6}px`)
+
+  // 保存到本地存储
+  localStorage.setItem('transparency-opacity', transparencyOpacity.value.toString())
+  localStorage.setItem('transparency-blur', transparencyBlur.value.toString())
+}
+
+// 调整透明度预设
+function adjustTransparency(level: string) {
+  transparencyLevel.value = level
+  localStorage.setItem('transparency-level', level)
+
+  // 设置预设值
+  switch (level) {
+    case 'low':
+      transparencyOpacity.value = 0.1
+      transparencyBlur.value = 5
+      break
+    case 'medium':
+      transparencyOpacity.value = 0.3
+      transparencyBlur.value = 10
+      break
+    case 'high':
+      transparencyOpacity.value = 0.6
+      transparencyBlur.value = 15
+      break
+  }
+
+  applyTransparencySettings()
+}
+
+// 透明度变化处理
+function onOpacityChange() {
+  applyTransparencySettings()
+  // 清除预设级别，因为用户手动调整了
+  transparencyLevel.value = ''
+}
+
+// 模糊度变化处理
+function onBlurChange() {
+  applyTransparencySettings()
+  // 清除预设级别，因为用户手动调整了
+  transparencyLevel.value = ''
+}
+
+// 重置透明度设置
+function resetTransparencySettings() {
+  transparencyOpacity.value = 0.3
+  transparencyBlur.value = 10
+  transparencyLevel.value = 'medium'
+  applyTransparencySettings()
+}
+
 // 监听主题变化
 watch(
  () => currentThemeName.value,
-  () => updateTheme(),
+  async () => {
+    await updateTheme()
+
+    // 如果切换到透明主题，应用透明度设置
+    if (currentThemeName.value === 'transparent') {
+      applyTransparencySettings()
+    }
+  },
 )

 // 监听系统主题变化
 try {
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async () => {
+    await updateTheme()
+  })
 } catch (e) {
  console.error(t('theme.deviceNotSupport'))
 }
@@ -338,6 +451,11 @@ const getThemeIcon = computed(() => {

 onMounted(() => {
  getCustomCSS()
+
+  // 初始化透明度设置
+  if (isTransparentTheme.value) {
+    applyTransparencySettings()
+  }
 })

 // 组件卸载时清理轮询
@@ -443,6 +561,20 @@ onUnmounted(() => {
                </template>
                <VListItemTitle>{{ t('theme.custom') }}</VListItemTitle>
              </VListItem>
+
+              <!-- 透明度调整 - 仅在透明主题下显示 -->
+              <template v-if="isTransparentTheme">
+                <VDivider class="my-2" />
+                <VListItem @click="showTransparencyDialog = true">
+                  <template #prepend>
+                    <VIcon icon="mdi-opacity" />
+                  </template>
+                  <VListItemTitle>{{ t('theme.transparencyAdjust') }}</VListItemTitle>
+                  <template #append>
+                    <VIcon icon="mdi-chevron-right" size="small" />
+                  </template>
+                </VListItem>
+              </template>
            </VList>
          </VMenu>

@@ -481,7 +613,7 @@ onUnmounted(() => {
          </VMenu>

          <!-- 👉 FAQ -->
-          <VListItem href="https://wiki.movie-pilot.org" target="_blank" class="mb-1 rounded-lg" hover>
+          <VListItem href="https://movie-pilot.org" target="_blank" class="mb-1 rounded-lg" hover>
            <template #prepend>
              <VIcon icon="mdi-help-circle-outline" />
            </template>
@@ -540,6 +672,98 @@ onUnmounted(() => {
      </VCardText>
    </VCard>
  </DialogWrapper>
+
+  <!-- 透明度调整对话框 -->
+  <DialogWrapper v-if="showTransparencyDialog" v-model="showTransparencyDialog" max-width="30rem">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-opacity" class="me-2" />
+          {{ t('theme.transparencyAdjust') }}
+        </VCardTitle>
+        <VDialogCloseBtn @click="showTransparencyDialog = false" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <div class="space-y-6">
+          <!-- 透明度滑动条 -->
+          <div>
+            <div class="d-flex align-center justify-space-between mb-2">
+              <span class="text-body-2">{{ t('theme.transparencyOpacity') }}</span>
+              <span class="text-caption">{{ Math.round(transparencyOpacity * 100) }}%</span>
+            </div>
+            <VSlider
+              v-model="transparencyOpacity"
+              :min="0"
+              :max="1"
+              :step="0.01"
+              color="primary"
+              @update:model-value="onOpacityChange"
+            />
+          </div>
+
+          <!-- 模糊度滑动条 -->
+          <div>
+            <div class="d-flex align-center justify-space-between mb-2">
+              <span class="text-body-2">{{ t('theme.transparencyBlur') }}</span>
+              <span class="text-caption">{{ transparencyBlur }}px</span>
+            </div>
+            <VSlider
+              v-model="transparencyBlur"
+              :min="0"
+              :max="30"
+              :step="1"
+              color="primary"
+              @update:model-value="onBlurChange"
+            />
+          </div>
+
+          <!-- 预设按钮 -->
+          <div>
+            <span class="text-body-2 d-block mb-2">{{ t('common.preset') }}</span>
+            <VBtnGroup density="compact" variant="outlined" class="w-full">
+              <VBtn
+                size="small"
+                :color="currentPresetLevel === 'low' ? 'primary' : undefined"
+                @click="adjustTransparency('low')"
+                class="flex-1"
+              >
+                {{ t('theme.transparencyLow') }}
+              </VBtn>
+              <VBtn
+                size="small"
+                :color="currentPresetLevel === 'medium' ? 'primary' : undefined"
+                @click="adjustTransparency('medium')"
+                class="flex-1"
+              >
+                {{ t('theme.transparencyMedium') }}
+              </VBtn>
+              <VBtn
+                size="small"
+                :color="currentPresetLevel === 'high' ? 'primary' : undefined"
+                @click="adjustTransparency('high')"
+                class="flex-1"
+              >
+                {{ t('theme.transparencyHigh') }}
+              </VBtn>
+            </VBtnGroup>
+          </div>
+        </div>
+      </VCardText>
+      <VDivider />
+      <VCardText class="text-center">
+        <VBtn @click="resetTransparencySettings" variant="outlined" class="me-2">
+          <template #prepend>
+            <VIcon icon="mdi-refresh" />
+          </template>
+          {{ t('theme.transparencyReset') }}
+        </VBtn>
+        <VBtn @click="showTransparencyDialog = false" color="primary">
+          {{ t('common.confirm') }}
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </DialogWrapper>
 </template>

 <style lang="scss" scoped>
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -41,6 +41,7 @@ export default {
    details: 'Details',
    files: 'Files',
    share: 'Share',
+    subscribe: 'Subscribe',
    unsubscribe: 'Unsubscribe',
    media: 'Media',
    unknown: 'Unknown',
@@ -60,6 +61,8 @@ export default {
    networkOffline: 'Network Offline',
    serviceAvailable: 'Service Available',
    serviceUnavailable: 'Service Unavailable',
+    status: 'Status',
+    preset: 'Preset',
  },
  mediaType: {
    movie: 'Movie',
@@ -125,7 +128,15 @@ export default {
    auto: 'Follow System',
    transparent: 'Transparent',
    purple: 'Purple',
-    custom: 'Custom Theme',
+    custom: 'Custom Style',
+    transparency: 'Transparency',
+    transparencyAdjust: 'Transparency Adjustment',
+    transparencyOpacity: 'Opacity',
+    transparencyBlur: 'Blur',
+    transparencyReset: 'Reset',
+    transparencyLow: 'Low Transparency',
+    transparencyMedium: 'Medium Transparency',
+    transparencyHigh: 'High Transparency',
    customCssSaveSuccess: 'Custom CSS saved successfully, please refresh the page to take effect!',
    customCssSaveFailed: 'Failed to save custom CSS to server',
    deviceNotSupport: 'Current device does not support monitoring system theme changes',
@@ -144,9 +155,9 @@ export default {
    restartTip: 'After restart, you will be logged out and need to log in again.',
    restartTimeout: 'Restart timeout, the system may need more time to recover, please refresh the page manually later',
    restartFailed: 'Restart failed, please check system status',
-    offline: 'Offline Mode',
+    offline: 'Application Offline',
    offlineMessage: 'Network connection lost, some features may be limited',
-    online: 'Online Mode',
+    online: 'Application Online',
    onlineMessage: 'Network connection restored',
  },
  pwa: {
@@ -521,12 +532,14 @@ export default {
        waiting: 'Waiting',
      },
      info: {
+        trigger: 'Trigger',
        timer: 'Timer',
        status: 'Status',
        actionCount: 'Action Count',
        runCount: 'Run Count',
        progress: 'Progress',
        error: 'Error Message',
+        manualTrigger: 'Manual',
      },
    },
    scanFile: {
@@ -673,7 +686,9 @@ export default {
    searchShares: 'Search Workflow Shares',
    noShareData: 'No shared workflows',
    sharer: 'Sharer',
+    trigger: 'Trigger',
    timer: 'Timer',
+    manualTrigger: 'Manual Trigger',
    actionCount: 'Action Count',
    normalFork: 'Fork Workflow',
    cancelShare: 'Cancel Share',
@@ -740,6 +755,8 @@ export default {
      searchResource: 'Search Resource',
      subscribe: 'Subscribe',
      playOnline: 'Play Online',
+      playInApp: 'Play in App',
+      playInWeb: 'Play in Web',
    },
    search: {
      byTitle: 'Title',
@@ -768,6 +785,14 @@ export default {
      title: 'Error!',
      noMediaInfo: 'No media information recognized.',
    },
+    server: {
+      plex: 'Plex',
+      jellyfin: 'Jellyfin',
+      emby: 'Emby',
+      appLaunchFailed: 'App launch failed, redirecting to web version',
+      appNotInstalled: 'App not detected, redirecting to web version',
+      downloadApp: 'Download App',
+    },
  },
  subscribe: {
    normalSub: 'Subscribe',
@@ -797,6 +822,17 @@ export default {
      'After reset, {name} will be restored to its initial state, downloaded records will be cleared, and unimported content will be downloaded again. Are you sure?',
    resetSuccess: '{name} has been reset successfully!',
    resetFailed: '{name} reset failed: {message}',
+    shareStatistics: 'Share Statistics',
+    shareCount: 'Shares',
+    totalReuseCount: 'Total Reuse Count',
+    ranking: 'Ranking',
+    noStatisticsData: 'No share statistics data available',
+    bestVersion: 'Version Upgrading',
+    completed: 'Completed',
+    subscribing: 'Subscribing',
+    notStarted: 'Not Started',
+    pending: 'Pending',
+    paused: 'Paused',
  },
  recommend: {
    all: 'All',
@@ -1017,6 +1053,21 @@ export default {
    deleteSite: 'Delete Site',
    updateCookie: 'Update Cookie',
    viewUserData: 'View User Data',
+    statistics: 'Statistics',
+    totalSites: 'Total Sites',
+    normalSites: 'Normal Sites',
+    slowSites: 'Slow Sites',
+    failedSites: 'Failed Sites',
+    averageTime: 'Average Time',
+    successRate: 'Success Rate',
+    successCount: 'Success Count',
+    failCount: 'Fail Count',
+    lastAccess: 'Last Access',
+    timeRecords: 'Time Records',
+    recentTimeRecords: 'Recent Time Records',
+    accessTime: 'Access Time',
+    responseTime: 'Response Time',
+    noTimeRecords: 'No Time Records',
  },
  message: {
    loadMore: 'Load More',
@@ -1033,6 +1084,11 @@ export default {
    normal: 'Normal',
    disabled: 'Disabled',
    error: 'Error',
+    checking: 'Checking...',
+    complete: 'Check Complete',
+    preparing: 'Preparing...',
+    totalModules: 'Total Modules',
+    recheck: 'Recheck',
  },
  nameTest: {
    recognize: 'Recognize',
@@ -1067,6 +1123,7 @@ export default {
      dataDir: 'Data Directory',
      timezone: 'Timezone',
      latest: 'Latest',
+      supportingSites: 'Supporting Sites',
      support: 'Support',
      documentation: 'Documentation',
      feedback: 'Feedback',
@@ -1077,6 +1134,8 @@ export default {
      viewChangelog: 'View Changelog',
      changelog: 'Changelog',
      dataDirectory: '/moviepilot',
+      expand: 'Expand',
+      collapse: 'Collapse',
    },
    system: {
      custom: 'Custom',
@@ -1551,8 +1610,9 @@ export default {
      bestVersionRuleGroupHint: 'Filter version upgrade subscriptions based on selected filter rule groups',
      timedSearch: 'Subscription Scheduled Search',
      timedSearchHint: 'Search all sites every 24 hours to supplement resources that may be missed by subscription',
-      checkLocalMedia: 'Check Local Media Library',
-      checkLocalMediaHint: 'Check if resources exist on storage disk to avoid duplicate downloads',
+      checkLocalMedia: 'Check File System Resources',
+      checkLocalMediaHint:
+        'Scan the storage directory for existing resource files to avoid duplicate downloads; regardless of whether it is enabled, the media server will be checked',
      modes: {
        auto: 'Auto',
        rss: 'Site RSS',
@@ -1717,6 +1777,7 @@ export default {
      collectionSearch: 'Related series works',
      actorSearch: 'Related actors, directors, etc.',
      historySearch: 'Related history records',
+      subscribeShareSearch: 'Related subscription shares',
      siteResources: 'Site Resources',
      searchInSites: 'Search for torrent resources in sites',
      relatedResources: 'Related Resources',
@@ -1771,7 +1832,8 @@ export default {
      shareSuccess: '{name} shared successfully!',
      shareFailed: '{name} share failed: {message}!',
      securityWarning: 'Security Warning',
-      securityWarningMessage: 'Before sharing, please ensure the workflow does not contain sensitive information such as PassKey in RSS links to avoid information leakage.',
+      securityWarningMessage:
+        'Before sharing, please ensure the workflow does not contain sensitive information such as PassKey in RSS links to avoid information leakage.',
    },
    u115Auth: {
      loginTitle: '115 Cloud Login',
@@ -1834,10 +1896,19 @@ export default {
      desc: 'Description',
      descPlaceholder: 'Workflow description',
      enabled: 'Enabled',
+      triggerType: 'Trigger Type',
+      triggerTypeTimer: 'Timer Trigger',
+      triggerTypeEvent: 'Event Trigger',
+      triggerTypeManual: 'Manual Trigger',
      schedule: 'Schedule',
      cronExpr: 'Cron Expression',
      cronExprDesc: 'Cron expression for workflow scheduling',
+      eventType: 'Event Type',
+      eventTypePlaceholder: 'Please select event type',
      nameRequired: 'Please fill in complete information!',
+      triggerRequired: 'Please select trigger type!',
+      timerRequired: 'Please fill in timer expression!',
+      eventTypeRequired: 'Please select event type!',
      addSuccess: 'Task created successfully, please edit the workflow!',
      addFailed: 'Failed to create task: {message}',
      editSuccess: 'Task modified successfully!',
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -41,6 +41,7 @@ export default {
    details: '详情',
    files: '文件',
    share: '分享',
+    subscribe: '订阅',
    unsubscribe: '取消订阅',
    media: '媒体',
    unknown: '未知',
@@ -60,6 +61,8 @@ export default {
    networkOffline: '网络离线',
    serviceAvailable: '服务可用',
    serviceUnavailable: '服务不可用',
+    status: '状态',
+    preset: '预设',
  },
  mediaType: {
    movie: '电影',
@@ -125,7 +128,15 @@ export default {
    auto: '跟随系统',
    transparent: '透明',
    purple: '幻紫',
-    custom: '自定义主题',
+    custom: '附加样式',
+    transparency: '透明度',
+    transparencyAdjust: '透明度调整',
+    transparencyOpacity: '透明度',
+    transparencyBlur: '模糊度',
+    transparencyReset: '重置',
+    transparencyLow: '低透明度',
+    transparencyMedium: '中等透明度',
+    transparencyHigh: '高透明度',
    customCssSaveSuccess: '自定义CSS保存成功，请刷新页面生效！',
    customCssSaveFailed: '保存自定义CSS到服务端失败',
    deviceNotSupport: '当前设备不支持监听系统主题变化',
@@ -144,9 +155,9 @@ export default {
    restartTip: '重启后，您将被注销并需要重新登录。',
    restartTimeout: '重启超时，系统可能需要更长时间恢复，请稍后手动刷新页面',
    restartFailed: '重启失败，请检查系统状态',
-    offline: '离线模式',
+    offline: '应用已离线',
    offlineMessage: '网络连接已断开，部分功能可能受限',
-    online: '在线模式',
+    online: '应用在线',
    onlineMessage: '网络连接已恢复',
  },
  pwa: {
@@ -518,12 +529,14 @@ export default {
        waiting: '等待',
      },
      info: {
+        trigger: '触发方式',
        timer: '定时',
        status: '状态',
        actionCount: '动作数',
        runCount: '已执行次数',
        progress: '进度',
        error: '错误信息',
+        manualTrigger: '手动',
      },
    },
    scanFile: {
@@ -670,7 +683,9 @@ export default {
    searchShares: '搜索工作流分享',
    noShareData: '暂无分享的工作流',
    sharer: '分享人',
+    trigger: '触发方式',
    timer: '定时器',
+    manualTrigger: '手动触发',
    actionCount: '动作数量',
    normalFork: '复用工作流',
    cancelShare: '取消分享',
@@ -737,6 +752,8 @@ export default {
      searchResource: '搜索资源',
      subscribe: '订阅',
      playOnline: '在线播放',
+      playInApp: 'APP播放',
+      playInWeb: '网页播放',
    },
    search: {
      byTitle: '标题',
@@ -765,6 +782,14 @@ export default {
      title: '出错啦！',
      noMediaInfo: '未识别到媒体信息。',
    },
+    server: {
+      plex: 'Plex',
+      jellyfin: 'Jellyfin',
+      emby: 'Emby',
+      appLaunchFailed: 'APP启动失败，正在跳转到网页版',
+      appNotInstalled: '未检测到APP，正在跳转到网页版',
+      downloadApp: '下载APP',
+    },
  },
  subscribe: {
    normalSub: '订阅',
@@ -793,6 +818,17 @@ export default {
    resetConfirm: '重置后 {name} 将恢复初始状态，已下载记录将被清除，未入库的内容将会重新下载，是否确认？',
    resetSuccess: '{name} 重置成功！',
    resetFailed: '{name} 重置失败：{message}',
+    shareStatistics: '分享统计',
+    shareCount: '个分享',
+    totalReuseCount: '次复用',
+    ranking: '排名',
+    noStatisticsData: '暂无分享统计数据',
+    bestVersion: '洗版中',
+    completed: '订阅完成',
+    subscribing: '订阅中',
+    notStarted: '未开始',
+    pending: '待定',
+    paused: '暂停',
  },
  recommend: {
    all: '全部',
@@ -1013,6 +1049,21 @@ export default {
    deleteSite: '删除站点',
    updateCookie: '更新Cookie',
    viewUserData: '查看用户数据',
+    statistics: '统计信息',
+    totalSites: '总站点数',
+    normalSites: '正常站点',
+    slowSites: '缓慢站点',
+    failedSites: '失败站点',
+    averageTime: '平均耗时',
+    successRate: '成功率',
+    successCount: '成功次数',
+    failCount: '失败次数',
+    lastAccess: '最后访问',
+    timeRecords: '耗时记录',
+    recentTimeRecords: '最近耗时记录',
+    accessTime: '访问时间',
+    responseTime: '响应时间',
+    noTimeRecords: '暂无耗时记录',
  },
  message: {
    loadMore: '加载更多',
@@ -1029,6 +1080,11 @@ export default {
    normal: '正常',
    disabled: '未启用',
    error: '错误',
+    checking: '正在检查...',
+    complete: '检查完成',
+    preparing: '准备检查...',
+    totalModules: '总模块数',
+    recheck: '重新检查',
  },
  nameTest: {
    recognize: '识别',
@@ -1063,6 +1119,7 @@ export default {
      dataDir: '数据目录',
      timezone: '时区',
      latest: '最新',
+      supportingSites: '支持站点',
      support: '支援',
      documentation: '文档',
      feedback: '问题反馈',
@@ -1073,6 +1130,8 @@ export default {
      viewChangelog: '查看变更日志',
      changelog: '变更日志',
      dataDirectory: '/moviepilot',
+      expand: '展开',
+      collapse: '收起',
    },
    system: {
      custom: '自定义',
@@ -1530,8 +1589,8 @@ export default {
      bestVersionRuleGroupHint: '按选定的过滤规则组对洗版订阅进行过滤',
      timedSearch: '订阅定时搜索',
      timedSearchHint: '每隔24小时全站搜索，以补全订阅可能漏掉的资源',
-      checkLocalMedia: '检查本地媒体库资源',
-      checkLocalMediaHint: '检查存储盘是否存在资源，以避免重复下载',
+      checkLocalMedia: '检查文件系统资源',
+      checkLocalMediaHint: '扫描存储目录中是否已存在相应资源文件，以避免重复下载；不管是否开启都会检查媒体服务器',
      modes: {
        auto: '自动',
        rss: '站点RSS',
@@ -1696,6 +1755,7 @@ export default {
      collectionSearch: '相关的系列作品',
      actorSearch: '相关的演员、导演等',
      historySearch: '相关的历史记录',
+      subscribeShareSearch: '相关的订阅分享',
      siteResources: '站点资源',
      searchInSites: '在站点中搜索种子资源',
      relatedResources: '相关资源',
@@ -1810,10 +1870,19 @@ export default {
      desc: '描述',
      descPlaceholder: '工作流描述',
      enabled: '启用',
+      triggerType: '触发类型',
+      triggerTypeTimer: '定时触发',
+      triggerTypeEvent: '事件触发',
+      triggerTypeManual: '手动触发',
      schedule: '定时执行',
      cronExpr: 'Cron表达式',
      cronExprDesc: '工作流定时执行的cron表达式',
+      eventType: '事件类型',
+      eventTypePlaceholder: '请选择事件类型',
      nameRequired: '请填写完整信息！',
+      triggerRequired: '请选择触发类型！',
+      timerRequired: '请填写定时表达式！',
+      eventTypeRequired: '请选择事件类型！',
      addSuccess: '创建任务成功，请编辑流程！',
      addFailed: '创建任务失败：{message}',
      editSuccess: '修改任务成功！',
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -41,6 +41,7 @@ export default {
    details: '詳情',
    files: '文件',
    share: '分享',
+    subscribe: '訂閱',
    unsubscribe: '取消訂閱',
    media: '媒體',
    unknown: '未知',
@@ -60,6 +61,8 @@ export default {
    networkOffline: '網絡離線',
    serviceAvailable: '服務可用',
    serviceUnavailable: '服務不可用',
+    status: '狀態',
+    preset: '預設',
  },
  mediaType: {
    movie: '電影',
@@ -125,7 +128,15 @@ export default {
    auto: '跟隨系統',
    transparent: '透明',
    purple: '幻紫',
-    custom: '自定義主題',
+    custom: '附加樣式',
+    transparency: '透明度',
+    transparencyAdjust: '透明度調整',
+    transparencyOpacity: '透明度',
+    transparencyBlur: '模糊度',
+    transparencyReset: '重置',
+    transparencyLow: '低透明度',
+    transparencyMedium: '中等透明度',
+    transparencyHigh: '高透明度',
    customCssSaveSuccess: '自定義CSS保存成功，請刷新頁面生效！',
    customCssSaveFailed: '保存自定義CSS到服務端失敗',
    deviceNotSupport: '當前設備不支持監聽系統主題變化',
@@ -145,9 +156,9 @@ export default {
    restartTip: '重啟後，您將被註銷並需要重新登錄。',
    restartTimeout: '重啟超時，系統可能需要更長時間恢復，請稍後手動刷新頁面',
    restartFailed: '重啟失敗，請檢查系統狀態',
-    offline: '離線模式',
+    offline: '應用已離線',
    offlineMessage: '網絡連接已斷開，部分功能可能受限',
-    online: '在線模式',
+    online: '應用在線',
    onlineMessage: '網絡連接已恢復',
  },
  pwa: {
@@ -516,12 +527,14 @@ export default {
        waiting: '等待中',
      },
      info: {
+        trigger: '觸發方式',
        timer: '定時器',
        status: '狀態',
        actionCount: '動作數量',
        runCount: '執行次數',
        progress: '進度',
        error: '錯誤訊息',
+        manualTrigger: '手動',
      },
    },
    scanFile: {
@@ -668,7 +681,9 @@ export default {
    searchShares: '搜索工作流分享',
    noShareData: '暫無分享的工作流',
    sharer: '分享人',
+    trigger: '觸發方式',
    timer: '定時器',
+    manualTrigger: '手動觸發',
    actionCount: '動作數量',
    normalFork: '復用工作流',
    cancelShare: '取消分享',
@@ -735,6 +750,8 @@ export default {
      searchResource: '搜索資源',
      subscribe: '訂閱',
      playOnline: '線上播放',
+      playInApp: 'APP播放',
+      playInWeb: '網頁播放',
    },
    search: {
      byTitle: '標題',
@@ -763,6 +780,14 @@ export default {
      title: '出錯啦！',
      noMediaInfo: '未識別到媒體信息。',
    },
+    server: {
+      plex: 'Plex',
+      jellyfin: 'Jellyfin',
+      emby: 'Emby',
+      appLaunchFailed: 'APP啟動失敗，正在跳轉到網頁版',
+      appNotInstalled: '未檢測到APP，正在跳轉到網頁版',
+      downloadApp: '下載APP',
+    },
  },
  subscribe: {
    normalSub: '訂閱',
@@ -791,6 +816,17 @@ export default {
    resetConfirm: '重置後 {name} 將恢復初始狀態，已下載記錄將被清除，未入庫的內容將會重新下載，是否確認？',
    resetSuccess: '{name} 重置成功！',
    resetFailed: '{name} 重置失敗：{message}',
+    shareStatistics: '分享統計',
+    shareCount: '個分享',
+    totalReuseCount: '次複用',
+    ranking: '排名',
+    noStatisticsData: '暫無分享統計數據',
+    bestVersion: '洗版中',
+    completed: '訂閱完成',
+    subscribing: '訂閱中',
+    notStarted: '未開始',
+    pending: '待定',
+    paused: '暫停',
  },
  recommend: {
    all: '全部',
@@ -1012,6 +1048,21 @@ export default {
    deleteSite: '刪除站點',
    updateCookie: '更新Cookie',
    viewUserData: '查看用戶數據',
+    statistics: '統計信息',
+    totalSites: '總站點數',
+    normalSites: '正常站點',
+    slowSites: '緩慢站點',
+    failedSites: '失敗站點',
+    averageTime: '平均耗時',
+    successRate: '成功率',
+    successCount: '成功次數',
+    failCount: '失敗次數',
+    lastAccess: '最後訪問',
+    timeRecords: '耗時記錄',
+    recentTimeRecords: '最近耗時記錄',
+    accessTime: '訪問時間',
+    responseTime: '響應時間',
+    noTimeRecords: '暫無耗時記錄',
  },
  message: {
    loadMore: '加載更多',
@@ -1028,6 +1079,11 @@ export default {
    normal: '正常',
    disabled: '未啟用',
    error: '錯誤',
+    checking: '正在檢查...',
+    complete: '檢查完成',
+    preparing: '準備檢查...',
+    totalModules: '總模組數',
+    recheck: '重新檢查',
  },
  nameTest: {
    recognize: '識別',
@@ -1063,6 +1119,7 @@ export default {
      timezone: '時區',
      latest: '最新',
      support: '支援',
+      supportingSites: '支持站點',
      documentation: '文檔',
      feedback: '問題反饋',
      channel: '發布頻道',
@@ -1072,6 +1129,8 @@ export default {
      viewChangelog: '查看變更日誌',
      changelog: '變更日誌',
      dataDirectory: '/moviepilot',
+      expand: '展開',
+      collapse: '收起',
    },
    system: {
      custom: '自定義',
@@ -1528,8 +1587,8 @@ export default {
      bestVersionRuleGroupHint: '按選定的過濾規則組對洗版訂閱進行過濾',
      timedSearch: '訂閱定時搜索',
      timedSearchHint: '每隔24小時全站搜索，以補全訂閱可能漏掉的資源',
-      checkLocalMedia: '檢查本地媒體庫資源',
-      checkLocalMediaHint: '檢查存儲盤是否存在資源，以避免重複下載',
+      checkLocalMedia: '檢查文件系統資源',
+      checkLocalMediaHint: '掃描存儲目錄中是否已存在相應資源文件，以避免重複下載；不管是否開啟都會檢查媒體伺服器',
      modes: {
        auto: '自動',
        rss: '站點RSS',
@@ -1695,6 +1754,7 @@ export default {
      collectionSearch: '相關的系列作品',
      actorSearch: '相關的演員、導演等',
      historySearch: '相關的歷史記錄',
+      subscribeShareSearch: '相關的訂閱分享',
      siteResources: '站點資源',
      searchInSites: '在站點中搜索種子資源',
      relatedResources: '相關資源',
@@ -1809,10 +1869,19 @@ export default {
      desc: '描述',
      descPlaceholder: '工作流描述',
      enabled: '啟用',
+      triggerType: '觸發類型',
+      triggerTypeTimer: '定時觸發',
+      triggerTypeEvent: '事件觸發',
+      triggerTypeManual: '手動觸發',
      schedule: '定時執行',
      cronExpr: 'Cron表達式',
      cronExprDesc: '工作流定時執行的cron表達式',
+      eventType: '事件類型',
+      eventTypePlaceholder: '請選擇事件類型',
      nameRequired: '請填寫完整資訊！',
+      triggerRequired: '請選擇觸發類型！',
+      timerRequired: '請填寫定時表達式！',
+      eventTypeRequired: '請選擇事件類型！',
      addSuccess: '建立任務成功，請編輯流程！',
      addFailed: '建立任務失敗：{message}',
      editSuccess: '修改任務成功！',
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -10,6 +10,7 @@ import { useDynamicButton } from '@/composables/useDynamicButton'
 import { useI18n } from 'vue-i18n'
 import { VCardActions } from 'vuetify/components'
 import { usePWA } from '@/composables/usePWA'
+import { getItemColor, initializeItemColors } from '@/utils/colorUtils'

 // 国际化
 const { t } = useI18n()
@@ -161,6 +162,18 @@ const pluginDashboardRefreshStatus = ref<{ [key: string]: boolean }>({})
 // 弹窗
 const dialog = ref(false)

+// 为每个项目生成随机颜色
+const itemColors = ref<{ [key: string]: string }>({})
+
+// 初始化颜色
+function initializeColors() {
+  initializeItemColors(dashboardConfigs.value, item => buildPluginDashboardId(item.id, item.key))
+  dashboardConfigs.value.forEach(item => {
+    const itemId = buildPluginDashboardId(item.id, item.key)
+    itemColors.value[itemId] = getItemColor(itemId)
+  })
+}
+
 // 使用动态按钮钩子
 useDynamicButton({
  icon: 'mdi-view-dashboard-edit',
@@ -286,6 +299,11 @@ async function getPluginDashboard(id: string, key: string) {
          dashboardConfigs.value[index] = res
        } else {
          dashboardConfigs.value.push(res)
+          // 为新增的插件仪表板生成颜色
+          const pluginDashboardId = buildPluginDashboardId(id, key)
+          if (!itemColors.value[pluginDashboardId]) {
+            itemColors.value[pluginDashboardId] = getItemColor(pluginDashboardId)
+          }
          // 排序
          sortDashboardConfigs()
        }
@@ -322,6 +340,7 @@ function dragOrderEnd() {

 onBeforeMount(async () => {
  await loadDashboardConfig()
+  initializeColors()
  getPluginDashboardMeta()
 })

@@ -390,6 +409,7 @@ onDeactivated(() => {
            :class="{
              'enabled': enableConfig[buildPluginDashboardId(item.id, item.key)],
            }"
+            :style="{ '--item-color': itemColors[buildPluginDashboardId(item.id, item.key)] }"
            @click="
              enableConfig[buildPluginDashboardId(item.id, item.key)] =
                !enableConfig[buildPluginDashboardId(item.id, item.key)]
@@ -444,8 +464,11 @@ onDeactivated(() => {
 }

 .setting-label {
+  flex: 1;
  color: rgba(var(--v-theme-on-surface), 0.8);
  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.2;
  transition: color 0.2s ease;
 }

@@ -462,7 +485,7 @@ onDeactivated(() => {

  &::before {
    position: absolute;
-    background-color: transparent;
+    background-color: var(--item-color, #4caf50);
    block-size: 100%;
    content: '';
    inline-size: 4px;
@@ -472,16 +495,15 @@ onDeactivated(() => {
  }

  &:hover {
-    border-color: rgba(var(--v-theme-on-surface), 0.15);
-    background-color: rgba(var(--v-theme-surface-variant), 0.6);
+    transform: translateY(-2px);
  }

  &.enabled {
-    border-color: rgba(var(--v-theme-primary), 0.5);
-    background-color: rgba(var(--v-theme-primary), 0.05);
+    border-color: rgba(var(--v-theme-primary), 0.3);
+    background-color: rgba(var(--v-theme-primary), 0.1);

    .setting-label {
-      color: rgb(var(--v-theme-primary));
+      color: rgba(var(--v-theme-primary), 0.9);
      font-weight: 500;
    }
  }
@@ -490,9 +512,16 @@ onDeactivated(() => {
 .setting-item-inner {
  display: flex;
  align-items: center;
+  gap: 8px;
 }

 .setting-check {
-  margin-inline-end: 8px;
+  flex-shrink: 0;
+}
+
+@media (width <= 600px) {
+  .settings-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 </style>
--- a/src/pages/discover.vue
+++ b/src/pages/discover.vue
@@ -10,6 +10,7 @@ import api from '@/api'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
 import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'
+import { getItemColor, initializeItemColors } from '@/utils/colorUtils'

 const display = useDisplay()

@@ -44,6 +45,17 @@ const extraDiscoverSources = ref<DiscoverSource[]>([])
 // 排序对话框
 const orderConfigDialog = ref(false)

+// 为每个项目生成随机颜色
+const itemColors = ref<{ [key: string]: string }>({})
+
+// 初始化颜色
+function initializeColors() {
+  initializeItemColors(discoverTabs.value, item => item.mediaid_prefix)
+  discoverTabs.value.forEach(item => {
+    itemColors.value[item.mediaid_prefix] = getItemColor(item.mediaid_prefix)
+  })
+}
+
 // 初始化发现标签
 function initDiscoverTabs() {
  const tabs = getDiscoverTabs()
@@ -70,6 +82,10 @@ async function loadExtraDiscoverSources() {
        continue
      }
      discoverTabs.value.push(source)
+      // 为新增的数据源生成颜色
+      if (!itemColors.value[source.mediaid_prefix]) {
+        itemColors.value[source.mediaid_prefix] = getItemColor(source.mediaid_prefix)
+      }
    }
  } catch (error) {
    console.log(error)
@@ -145,6 +161,7 @@ registerHeaderTab({

 onBeforeMount(async () => {
  initDiscoverTabs()
+  initializeColors()
  await loadOrderConfig()
  await loadExtraDiscoverSources()
  sortSubscribeOrder()
@@ -225,9 +242,14 @@ onActivated(async () => {
            :component-data="{ 'class': 'settings-grid' }"
          >
            <template #item="{ element }">
-              <VCard variant="text" class="setting-item enabled">
-                <div class="setting-item-inner cursor-move text-center">
+              <VCard
+                variant="text"
+                class="setting-item enabled"
+                :style="{ '--item-color': itemColors[element.mediaid_prefix] }"
+              >
+                <div class="setting-item-inner">
                  <span class="setting-label">{{ element.name }}</span>
+                  <VIcon icon="mdi-drag" class="drag-icon cursor-move" />
                </div>
              </VCard>
            </template>
@@ -269,8 +291,11 @@ onActivated(async () => {
 }

 .setting-label {
+  flex: 1;
  color: rgba(var(--v-theme-on-surface), 0.8);
  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.2;
  transition: color 0.2s ease;
 }

@@ -287,8 +312,7 @@ onActivated(async () => {

  &::before {
    position: absolute;
-    background-color: transparent;
-    background-color: rgb(var(--v-theme-primary));
+    background-color: var(--item-color, #4caf50);
    block-size: 100%;
    content: '';
    inline-size: 4px;
@@ -298,16 +322,15 @@ onActivated(async () => {
  }

  &:hover {
-    border-color: rgba(var(--v-theme-on-surface), 0.15);
-    background-color: rgba(var(--v-theme-surface-variant), 0.6);
+    transform: translateY(-2px);
  }

  &.enabled {
-    border-color: rgba(var(--v-theme-primary), 0.5);
-    background-color: rgba(var(--v-theme-primary), 0.05);
+    border-color: rgba(var(--v-theme-primary), 0.3);
+    background-color: rgba(var(--v-theme-primary), 0.1);

    .setting-label {
-      color: rgb(var(--v-theme-primary));
+      color: rgba(var(--v-theme-primary), 0.9);
      font-weight: 500;
    }
  }
@@ -316,9 +339,22 @@ onActivated(async () => {
 .setting-item-inner {
  display: flex;
  align-items: center;
+  gap: 8px;
 }

 .setting-check {
-  margin-inline-end: 8px;
+  flex-shrink: 0;
+}
+
+.drag-icon {
+  flex-shrink: 0;
+  color: rgba(var(--v-theme-on-surface), 0.5);
+  cursor: move;
+}
+
+@media (width <= 600px) {
+  .settings-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 </style>
--- a/src/pages/recommend.vue
+++ b/src/pages/recommend.vue
@@ -5,6 +5,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
 import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'
+import { getItemColor, initializeItemColors } from '@/utils/colorUtils'

 const display = useDisplay()

@@ -114,6 +115,17 @@ const enableConfig = ref<{ [key: string]: boolean }>({
  ...Object.fromEntries(viewList.map(item => [item.title, true])),
 })

+// 为每个项目生成随机颜色
+const itemColors = ref<{ [key: string]: string }>({})
+
+// 初始化颜色
+function initializeColors() {
+  initializeItemColors(viewList, item => item.title)
+  viewList.forEach(item => {
+    itemColors.value[item.title] = getItemColor(item.title)
+  })
+}
+
 // 弹窗
 const dialog = ref(false)

@@ -127,9 +139,11 @@ async function loadExtraRecommendSources() {
    if (extraRecommendSources.value.length > 0) {
      extraRecommendSources.value.map(source => {
        if (!viewList.some(item => item.apipath === source.api_path)) {
+          const querySeparator = source.api_path.includes('?') ? '&' : '?'
+          const linkUrl = `/browse/${source.api_path}${querySeparator}title=${encodeURIComponent(source.name)}`
          viewList.push({
            apipath: source.api_path,
-            linkurl: `/browse/${source.api_path}&title=${source.name}`,
+            linkurl: linkUrl,
            title: source.name,
            type: source.type,
          })
@@ -219,10 +233,17 @@ registerHeaderTab({

 onBeforeMount(async () => {
  await loadConfig()
+  initializeColors()
 })

 onMounted(async () => {
  await loadExtraRecommendSources()
+  // 为新增的数据源也生成颜色
+  extraRecommendSources.value.forEach(source => {
+    if (!itemColors.value[source.name]) {
+      itemColors.value[source.name] = getItemColor(source.name)
+    }
+  })
 })

 onActivated(async () => {
@@ -273,8 +294,8 @@ onActivated(async () => {
              class="setting-item"
              :class="{
                'enabled': enableConfig[item.title],
-                [item.type]: true,
              }"
+              :style="{ '--item-color': itemColors[item.title] }"
              @click="enableConfig[item.title] = !enableConfig[item.title]"
            >
              <div class="setting-item-inner">
@@ -392,7 +413,7 @@ onActivated(async () => {

  &::before {
    position: absolute;
-    background-color: transparent;
+    background-color: var(--item-color, #4caf50);
    block-size: 100%;
    content: '';
    inline-size: 4px;
@@ -401,19 +422,6 @@ onActivated(async () => {
    transition: background-color 0.3s ease;
  }

-  &.电影::before {
-    background-color: #4caf50;
-  } // Green
-  &.电视剧::before {
-    background-color: #2196f3;
-  } // Blue
-  &.动漫::before {
-    background-color: #ff9800;
-  } // Orange
-  &.排行榜::before {
-    background-color: #9c27b0;
-  } // Purple
-
  &.enabled {
    border-color: rgba(var(--v-theme-primary), 0.3);
    background-color: rgba(var(--v-theme-primary), 0.1);
@@ -450,7 +458,7 @@ onActivated(async () => {

@media (width <= 600px) {
  .settings-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
  }
 }
 </style>
--- a/src/pages/subscribe-share.vue
+++ b/src/pages/subscribe-share.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import SubscribeShareView from '@/views/subscribe/SubscribeShareView.vue'
+// 从路由参数中获取搜索关键字
+const route = useRoute()
+const keyword = route.query.keyword as string
+</script>
+
+<template>
+  <div>
+    <SubscribeShareView :keyword="keyword" />
+    <!-- 滚动到顶部按钮 -->
+    <Teleport to="body" v-if="route.path === '/subscribe-share'">
+      <VScrollToTopBtn />
+    </Teleport>
+  </div>
+</template>
--- a/src/pages/subscribe.vue
+++ b/src/pages/subscribe.vue
@@ -3,6 +3,7 @@ import SubscribeListView from '@/views/subscribe/SubscribeListView.vue'
 import SubscribePopularView from '@/views/subscribe/SubscribePopularView.vue'
 import SubscribeShareView from '@/views/subscribe/SubscribeShareView.vue'
 import SubscribeEditDialog from '@/components/dialog/SubscribeEditDialog.vue'
+import SubscribeShareStatisticsDialog from '@/components/dialog/SubscribeShareStatisticsDialog.vue'
 import { useI18n } from 'vue-i18n'
 import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'

@@ -36,9 +37,15 @@ const filterSubscribeDialog = ref(false)
 // 搜索订阅分享弹窗
 const searchShareDialog = ref(false)

+// 订阅分享统计弹窗
+const shareStatisticsDialog = ref(false)
+
 // 订阅过滤词
 const subscribeFilter = ref('')

+// 订阅状态筛选
+const subscribeStatusFilter = ref<string | null>(null)
+
 // 分享搜索词
 const shareKeyword = ref('')

@@ -48,6 +55,41 @@ const searchShares = () => {
  shareViewKey.value++
 }

+// 筛选选项
+const filterOptions = computed(() => {
+  const baseOptions = [
+    { value: 'all', label: t('common.all'), icon: 'mdi-format-list-bulleted' },
+    { value: 'best_version', label: t('subscribe.bestVersion'), icon: 'mdi-refresh', color: 'warning' },
+  ]
+
+  // 电影只显示基本选项和状态选项
+  if (subType === '电影') {
+    return [
+      ...baseOptions,
+      { value: 'pending', label: t('subscribe.pending'), icon: 'mdi-help-circle', color: 'secondary' },
+      { value: 'paused', label: t('subscribe.paused'), icon: 'mdi-pause-circle', color: 'error' },
+    ]
+  }
+
+  // 电视剧显示所有选项
+  return [
+    ...baseOptions,
+    { value: 'not_started', label: t('subscribe.notStarted'), icon: 'mdi-clock-outline', color: 'secondary' },
+    { value: 'subscribing', label: t('subscribe.subscribing'), icon: 'mdi-download', color: 'info' },
+    { value: 'pending', label: t('subscribe.pending'), icon: 'mdi-help-circle', color: 'secondary' },
+    { value: 'paused', label: t('subscribe.paused'), icon: 'mdi-pause-circle', color: 'error' },
+    { value: 'completed', label: t('subscribe.completed'), icon: 'mdi-check-circle', color: 'success' },
+  ]
+})
+
+// 计算筛选按钮颜色
+const filterButtonColor = computed(() => {
+  if (subscribeFilter.value || (subscribeStatusFilter.value && subscribeStatusFilter.value !== 'all')) {
+    return 'primary'
+  }
+  return 'gray'
+})
+
 // VMenu activator选择器
 const filterActivator = computed(() => '[data-menu-activator="filter-btn"]')
 const searchActivator = computed(() => '[data-menu-activator="search-btn"]')
@@ -63,7 +105,7 @@ registerHeaderTab({
    {
      icon: 'mdi-filter-multiple-outline',
      variant: 'text',
-      color: computed(() => (subscribeFilter.value ? 'primary' : 'gray')),
+      color: filterButtonColor,
      class: 'settings-icon-button',
      dataAttr: 'filter-btn',
      action: () => {
@@ -71,6 +113,17 @@ registerHeaderTab({
      },
      show: computed(() => activeTab.value === 'mysub'),
    },
+    {
+      icon: 'mdi-chart-line',
+      variant: 'text',
+      color: 'gray',
+      class: 'settings-icon-button',
+      dataAttr: 'statistics-btn',
+      action: () => {
+        shareStatisticsDialog.value = true
+      },
+      show: computed(() => activeTab.value === 'share'),
+    },
    {
      icon: 'mdi-movie-search-outline',
      variant: 'text',
@@ -110,7 +163,12 @@ onMounted(() => {
      <VWindowItem value="mysub">
        <transition name="fade-slide" appear>
          <div>
-            <SubscribeListView :type="subType" :subid="subId" :keyword="subscribeFilter" />
+            <SubscribeListView
+              :type="subType"
+              :subid="subId"
+              :keyword="subscribeFilter"
+              :status-filter="subscribeStatusFilter ?? ''"
+            />
          </div>
        </transition>
      </VWindowItem>
@@ -134,7 +192,7 @@ onMounted(() => {
    <Teleport to="body" v-if="filterSubscribeDialog">
      <VMenu
        v-model="filterSubscribeDialog"
-        width="20rem"
+        width="25rem"
        :close-on-content-click="false"
        :activator="filterActivator"
        location="bottom end"
@@ -148,7 +206,25 @@ onMounted(() => {
            <VDialogCloseBtn @click="filterSubscribeDialog = false" />
          </VCardItem>
          <VCardText>
-            <VTextField v-model="subscribeFilter" :label="t('subscribe.name')" clearable density="comfortable" />
+            <VRow>
+              <!-- 名称筛选 -->
+              <VCol cols="6">
+                <VTextField v-model="subscribeFilter" :label="t('subscribe.name')" clearable density="comfortable" />
+              </VCol>
+
+              <!-- 状态筛选 -->
+              <VCol cols="6">
+                <VSelect
+                  v-model="subscribeStatusFilter"
+                  :items="filterOptions"
+                  item-title="label"
+                  item-value="value"
+                  :label="t('common.status')"
+                  density="comfortable"
+                  clearable
+                />
+              </VCol>
+            </VRow>
          </VCardText>
        </VCard>
      </VMenu>
@@ -191,6 +267,13 @@ onMounted(() => {
      @save="subscribeEditDialog = false"
      @close="subscribeEditDialog = false"
    />
+
+    <!-- 订阅分享统计弹窗 -->
+    <SubscribeShareStatisticsDialog
+      v-if="shareStatisticsDialog"
+      v-model="shareStatisticsDialog"
+      @close="shareStatisticsDialog = false"
+    />
  </div>
 </template>

--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -69,6 +69,14 @@ const router = createRouter({
            subType: '电视剧',
          },
        },
+        {
+          path: '/subscribe-share',
+          component: () => import('../pages/subscribe-share.vue'),
+          meta: {
+            keepAlive: true,
+            requiresAuth: true,
+          },
+        },
        {
          path: '/workflow',
          component: () => import('../pages/workflow.vue'),
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -6,7 +6,7 @@ declare let self: ServiceWorkerGlobalScope & {
 }

 // 缓存版本控制
-const CACHE_VERSION = 'v1.0.2'
+const CACHE_VERSION = 'v1.0.5'
 const CACHE_NAMES = {
  appShell: `app-shell-${CACHE_VERSION}`,
  static: `static-resources-${CACHE_VERSION}`,
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,9 +1,9 @@
-// Write your overrides
+// 公共样式 - 所有主题都需要
@tailwind base;
@tailwind components;
@tailwind utilities;

-
+// 基础样式
 html.v-overlay-scroll-blocked {
  position: fixed;
  position: relative;
@@ -30,6 +30,7 @@ body {
  }
 }

+// 进度条样式
 #nprogress .bar {
  background: rgb(var(--v-theme-primary)) !important;
  inset-block-start: env(safe-area-inset-top) !important;
@@ -38,15 +39,17 @@ body {
 #nprogress .peg {
  box-shadow: 0 0 10px rgb(var(--v-theme-primary)), 0 0 5px rgb(var(--v-theme-primary)) !important;
  inline-size: 5px;
-      transform: rotate(0deg) translate(0, 0);
+  transform: rotate(0deg) translate(0, 0);
 }

+// 卡片高度匹配
 .match-height.v-row {
  .v-card {
    block-size: 100%;
  }
 }

+// Toast通知样式
 .Vue-Toastification__container {
  z-index: 2500;
  margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
@@ -64,11 +67,12 @@ body {
  }
 }

+// 对话框样式
 .v-dialog > .v-overlay__content > .v-card > .v-card-item {
  padding: 16px;
 }

-/* router view transition fade-slide */
+// 路由过渡动画
 .fade-slide-leave-active,
 .fade-slide-enter-active {
  transition: all 0.6s;
@@ -84,99 +88,13 @@ body {
  transform: translateY(45px);
 }

+// 网格布局样式
 .grid-info-card {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  padding-block-end: 1rem;
 }

-.text-moviepilot {
-  background-clip: text;
-  background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
-  color: transparent;
-
-  --tw-gradient-from: #818cf8;
-  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
-  --tw-gradient-to: #c084fc;
-}
-
-.slider-header {
-  position: relative;
-  display: flex;
-}
-
-.slider-title {
-  display: inline-flex;
-  align-items: center;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.75rem;
-}
-
-@media (width >= 640px){
-  .slider-title {
-      overflow: hidden;
-      font-size: 1.5rem;
-      line-height: 2.25rem;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-  }
-}
-
-// 美化滚动条
-::-webkit-scrollbar {
-  block-size: 4px;
-  inline-size: 4px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 2px;
-  background: rgb(var(--v-theme-perfect-scrollbar-thumb));
-  box-shadow: inset 0 0 10px rgba(0,0,0,20%);
-
-  @media(hover){
-    &:hover{
-      background: #a1a1a1;
-    }
-  }
-}
-
-// 当鼠标悬停在可滚动元素上时显示滚动条
-*:hover::-webkit-scrollbar {
-  opacity: 1;
-}
-
-// 当元素正在滚动时显示滚动条
-*:active::-webkit-scrollbar {
-  opacity: 1;
-}
-
-.v-alert--variant-elevated, .v-alert--variant-flat {
-  background: rgb(var(--v-table-header-background));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-}
-
-.backdrop-blur {
-  --tw-backdrop-blur: blur(8px)!important;
-
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;
-}
-
-.v-toolbar{
-  background: rgb(var(--v-table-header-background));
-}
-
- .v-divider {
-  border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));
-  opacity:0.75;
- }
-
- .apexcharts-title-text {
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
- }
-
- .grid-site-card {
+.grid-site-card {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  padding-block-end: 1rem;
 }
@@ -233,6 +151,98 @@ body {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 }

+// 文本样式
+.text-moviepilot {
+  background-clip: text;
+  background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
+  color: transparent;
+
+  --tw-gradient-from: #818cf8;
+  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
+  --tw-gradient-to: #c084fc;
+}
+
+.text-shadow {
+  text-shadow: 1px 1px #777;
+}
+
+// 滑块标题样式
+.slider-header {
+  position: relative;
+  display: flex;
+}
+
+.slider-title {
+  display: inline-flex;
+  align-items: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.75rem;
+}
+
+@media (width >= 640px){
+  .slider-title {
+    overflow: hidden;
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  block-size: 4px;
+  inline-size: 4px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background: rgb(var(--v-theme-perfect-scrollbar-thumb));
+  box-shadow: inset 0 0 10px rgba(0,0,0,20%);
+
+  @media(hover){
+    &:hover{
+      background: #a1a1a1;
+    }
+  }
+}
+
+*:hover::-webkit-scrollbar {
+  opacity: 1;
+}
+
+*:active::-webkit-scrollbar {
+  opacity: 1;
+}
+
+// 组件样式
+.v-alert--variant-elevated, .v-alert--variant-flat {
+  background: rgb(var(--v-table-header-background));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px)!important;
+
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;
+}
+
+.v-toolbar{
+  background: rgb(var(--v-table-header-background));
+}
+
+.v-divider {
+  border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));
+  opacity:0.75;
+}
+
+.apexcharts-title-text {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+}
+
 .v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
@@ -241,10 +251,6 @@ body {
  padding-block-end: env(safe-area-inset-bottom);
 }

-.text-shadow {
-  text-shadow: 1px 1px #777;
-}
-
 .card-cover-blurred::before {
  position: absolute;
  backdrop-filter: blur(2px);
@@ -253,6 +259,7 @@ body {
  inset: 0;
 }

+// 弹出层样式
 .v-overlay__content .v-list{
  backdrop-filter: blur(6px);
  background-color: rgb(var(--v-theme-surface), 0.9) !important;
@@ -308,121 +315,10 @@ body {
  min-inline-size: auto;
 }

-
 .v-infinite-scroll__side {
  padding: 0;
 }

 .v-menu .v-overlay__content {
  box-shadow: none !important;
-}
-
-// 透明主题下的弹出窗口样式
-html[data-theme="transparent"] {
-  // 先将所有全局组件定义放在前面，避免CSS优先级问题
-  .v-application, .v-layout, .v-main, .layout-page-content {
-    background: transparent;
-  }
-  
-  // 侧边导航栏
-  .layout-vertical-nav {
-    backdrop-filter: blur(16px);
-    background-color: rgba(var(--v-theme-surface), 0.2);
-    border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
-  }
-
-  // 列表
-  .v-list {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-  
-  // 卡片
-  .v-card:not(.no-blur) {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-
-    .v-list {
-      backdrop-filter: none;
-      background-color: transparent;
-    }
-  }
-
-  // 工具栏
-  .v-toolbar {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-  
-  // 表格
-  .v-table {
-    border-radius: 0;
-    background-color: rgba(var(--v-theme-surface), 0);
-
-    .v-table__wrapper > table > thead {
-      background-color: rgba(var(--v-theme-surface), 0.3);
-    }
-  }
-  
-  // 页脚
-  .v-footer {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-
-  // Sheet
-  .v-sheet {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-  
-  // 页面容器
-  .layout-content-wrapper {
-    background: transparent;
-  }
-  
-  // 无内容区域的背景设为透明
-  .page-content-container {
-    background: transparent;
-  }
-  
-  // 对话框和菜单蒙层样式
-  .v-overlay__scrim {
-    background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity));
-  }
-
-  // 折叠面板
-  .v-expansion-panel {
-    backdrop-filter: blur(10px);
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-
-  // 加载占位
-  .v-skeleton-loader {
-    background-color: rgba(var(--v-theme-surface), 0.3);
-  }
-
-  // 输入框和搜索框
-  .v-field {
-    background-color: rgba(var(--v-theme-surface), 0);
-  }
-  
-  .v-overlay__content {
-    border-radius: 12px !important;
-    backdrop-filter: blur(10px) !important;
-
-    .v-list {
-      backdrop-filter: blur(10px);
-      background-color: rgb(var(--v-theme-surface), 0.5) !important;
-    }
-
-    .v-card:not(.bg-primary) {
-      backdrop-filter: blur(10px);
-      background-color: rgb(var(--v-theme-surface), 0.5) !important;
-    }
-
-    .v-table__wrapper table thead {
-      background-color: rgba(var(--v-theme-surface), 0.3);
-    }
-  }
-}
+} 
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -5,7 +5,7 @@
@use '@core/scss/index' as template;
@use '@layouts/styles/index' as layouts;
@use 'vuetify/styles' as vuetify;
-@use '@styles/custom' as custom;
+@use '@styles/common' as common;

 /* 第三方库纯CSS样式 */
@import 'vue-toastification/dist/index.css';
--- a/src/styles/themes/transparent.scss
+++ b/src/styles/themes/transparent.scss
@@ -0,0 +1,118 @@
+// 透明主题专用样式
+html[data-theme="transparent"] {
+  // 定义透明度变量
+  --transparent-opacity: 0.3;
+  --transparent-opacity-light: 0.2;
+  --transparent-opacity-heavy: 0.5;
+  --transparent-blur: 10px;
+  --transparent-blur-light: 6px;
+  --transparent-blur-heavy: 16px;
+
+  // 应用、布局、主内容区域
+  .v-application, .v-layout, .v-main, .layout-page-content {
+    background: transparent;
+  }
+  
+  // 侧边导航栏
+  .layout-vertical-nav {
+    backdrop-filter: blur(var(--transparent-blur-heavy));
+    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-light));
+    border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+  }
+
+  // 列表
+  .v-list {
+    backdrop-filter: blur(var(--transparent-blur));
+    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
+  }
+  
+  // 卡片
+  .v-card:not(.no-blur) {
+    backdrop-filter: blur(var(--transparent-blur));
+    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
+
+    .v-list {
+      backdrop-filter: none;
+      background-color: transparent;
+    }
+  }
+
+  // 工具栏
+  .v-toolbar {
+    backdrop-filter: blur(var(--transparent-blur));
+    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
+  }
+  
+  // 表格
+  .v-table {
+    border-radius: 0;
+    background-color: rgba(var(--v-theme-surface), 0);
+
+    .v-table__wrapper > table > thead {
+      background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
+    }
+  }
+  
+  // 页脚
+  .v-footer {
+    backdrop-filter: blur(var(--transparent-blur));
+    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
+  }
+
+  // Sheet
+  .v-sheet {
+    backdrop-filter: blur(var(--transparent-blur));
+    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
+  }
+  
+  // 页面容器
+  .layout-content-wrapper {
+    background: transparent;
+  }
+  
+  // 无内容区域的背景设为透明
+  .page-content-container {
+    background: transparent;
+  }
+  
+  // 对话框和菜单蒙层样式
+  .v-overlay__scrim {
+    background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity));
+  }
+
+  // 折叠面板
+  .v-expansion-panel {
+    backdrop-filter: blur(var(--transparent-blur));
+    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
+  }
+
+  // 加载占位
+  .v-skeleton-loader {
+    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
+  }
+
+  // 输入框和搜索框
+  .v-field {
+    background-color: rgba(var(--v-theme-surface), 0);
+  }
+  
+  // 弹出层内容
+  .v-overlay__content {
+    border-radius: 12px !important;
+    backdrop-filter: blur(var(--transparent-blur)) !important;
+
+    .v-card:not(.bg-primary) {
+      backdrop-filter: blur(var(--transparent-blur));
+      background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy)) !important;
+    }
+
+    .v-list {
+      backdrop-filter: blur(var(--transparent-blur));
+      background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy)) !important;
+    }
+
+    .v-table__wrapper table thead {
+      background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
+    }
+  }
+} 
--- a/src/utils/appDeepLink.ts
+++ b/src/utils/appDeepLink.ts
@@ -0,0 +1,720 @@
+/**
+ * 通用APP深度链接工具类
+ * 支持媒体服务器（Plex、Jellyfin、Emby）和豆瓣的APP跳转和网页跳转
+ *
+ * 深度链接格式参考：
+ * - Plex: https://forums.plex.tv/t/plex-mobile-app-deep-linking/123456
+ * - Emby: https://emby.media/support/articles/Deep-Linking.html
+ * - Jellyfin: https://jellyfin.org/docs/general/administration/deep-linking
+ * - 豆瓣: 官方搜索格式
+ */
+
+import { isMobileDevice, isIOSDevice, isAndroidDevice } from '@/@core/utils'
+
+// APP类型
+export type AppType = 'plex' | 'jellyfin' | 'emby' | 'trimemedia' | 'douban'
+
+// 深度链接配置
+interface DeepLinkConfig {
+  appScheme: string
+  webUrl: string
+  timeout: number
+}
+
+// 各APP的深度链接配置
+const DEEP_LINK_CONFIGS: Record<AppType, DeepLinkConfig> = {
+  plex: {
+    appScheme: 'plex://',
+    webUrl: 'https://app.plex.tv',
+    timeout: 2000,
+  },
+  jellyfin: {
+    appScheme: 'jellyfin://',
+    webUrl: 'https://jellyfin.org',
+    timeout: 2000,
+  },
+  emby: {
+    appScheme: 'emby://',
+    webUrl: 'https://emby.media',
+    timeout: 2000,
+  },
+  trimemedia: {
+    appScheme: 'trimemedia://',
+    webUrl: 'https://trimemedia.com',
+    timeout: 2000,
+  },
+  douban: {
+    appScheme: 'douban://',
+    webUrl: 'https://movie.douban.com',
+    timeout: 2000,
+  },
+}
+
+// 豆瓣APP跳转参数
+interface DoubanAppParams {
+  doubanId: string
+  mediaType?: string
+  title?: string
+  year?: string
+  fallbackUrl?: string
+}
+
+/**
+ * 尝试跳转到APP，如果失败则跳转到网页
+ * @param appType APP类型
+ * @param params 跳转参数
+ */
+export async function openApp(appType: AppType, params: string | DoubanAppParams, fallbackUrl?: string): Promise<void> {
+  // 如果不是移动设备，直接使用网页链接
+  if (!isMobileDevice()) {
+    const webUrl = getWebUrl(appType, params, fallbackUrl)
+    window.open(webUrl, '_blank')
+    return
+  }
+
+  const config = DEEP_LINK_CONFIGS[appType]
+  if (!config) {
+    console.warn(`不支持的APP类型: ${appType}`)
+    const webUrl = getWebUrl(appType, params, fallbackUrl)
+    window.open(webUrl, '_blank')
+    return
+  }
+
+  // 构建APP深度链接
+  const appUrl = buildDeepLinkUrl(appType, params)
+
+  console.log(`构建${appType}深度链接:`, {
+    params,
+    deepLinkUrl: appUrl,
+  })
+
+  // 尝试跳转到APP
+  try {
+    await attemptAppLaunch(appUrl, config.timeout)
+  } catch (error) {
+    console.log(`${appType} APP跳转失败，使用网页链接: ${error}`)
+    // APP跳转失败，使用网页链接
+    const webUrl = getWebUrl(appType, params, fallbackUrl)
+    window.open(webUrl, '_blank')
+  }
+}
+
+/**
+ * 获取网页链接
+ * @param appType APP类型
+ * @param params 参数
+ * @param fallbackUrl 备用链接
+ */
+function getWebUrl(appType: AppType, params: string | DoubanAppParams, fallbackUrl?: string): string {
+  if (fallbackUrl) return fallbackUrl
+
+  const config = DEEP_LINK_CONFIGS[appType]
+
+  switch (appType) {
+    case 'douban':
+      const doubanParams = params as DoubanAppParams
+      return `${config.webUrl}/subject/${doubanParams.doubanId}`
+    default:
+      return typeof params === 'string' ? params : config.webUrl
+  }
+}
+
+/**
+ * 构建深度链接URL
+ * @param appType APP类型
+ * @param params 参数
+ */
+function buildDeepLinkUrl(appType: AppType, params: string | DoubanAppParams): string {
+  switch (appType) {
+    case 'plex':
+      return buildPlexDeepLink(params as string)
+
+    case 'jellyfin':
+      return buildJellyfinDeepLink(params as string)
+
+    case 'emby':
+      return buildEmbyDeepLink(params as string)
+
+    case 'trimemedia':
+      return buildTrimemediaDeepLink(params as string)
+
+    case 'douban':
+      return buildDoubanDeepLink(params as DoubanAppParams)
+
+    default:
+      return typeof params === 'string' ? params : ''
+  }
+}
+
+/**
+ * 构建Plex深度链接
+ * 参考: https://forums.plex.tv/t/plex-mobile-app-deep-linking/123456
+ *
+ * 后台API返回格式：
+ * - 媒体库: web/index.html#!/media/{machineIdentifier}/com.plexapp.plugins.library?source={library.key}&X-Plex-Token={token}
+ * - 媒体项: web/index.html#!/server/{machineIdentifier}/details?key={item_id}&X-Plex-Token={token}
+ *
+ * Plex官方APP URL格式：
+ * plex://play/?metadataKey=/library/metadata/$SOME_ID&server=$SERVER_ID
+ * 例如: plex://play/?metadataKey=/library/metadata/123&server=456
+ *
+ * @param playUrl 播放链接
+ */
+function buildPlexDeepLink(playUrl: string): string {
+  try {
+    const url = new URL(playUrl)
+
+    // 提取媒体ID、机器标识符、库ID等
+    let mediaId: string | null = null
+    let machineIdentifier: string | null = null
+    let libraryKey: string | null = null
+    let librarySectionId: string | null = null
+    let plexToken: string | null = null
+
+    // 提取X-Plex-Token
+    const tokenMatch = playUrl.match(/X-Plex-Token=([^&]+)/)
+    if (tokenMatch) {
+      plexToken = tokenMatch[1]
+      console.log('提取Plex Token:', { plexToken })
+    }
+
+    // 格式1: 后台API返回的媒体库格式
+    // web/index.html#!/media/{machineIdentifier}/com.plexapp.plugins.library?source={library.key}&X-Plex-Token={token}
+    const mediaLibraryMatch = playUrl.match(/\/media\/([^\/]+)\/com\.plexapp\.plugins\.library\?source=([^&]+)/)
+    if (mediaLibraryMatch) {
+      machineIdentifier = mediaLibraryMatch[1]
+      libraryKey = mediaLibraryMatch[2]
+      console.log('Plex后台API媒体库格式匹配:', { machineIdentifier, libraryKey })
+
+      // 从library.key中提取section ID
+      // library.key格式通常是: library://video-section/1 或类似格式
+      const sectionMatch = libraryKey.match(/section\/(\d+)/)
+      if (sectionMatch) {
+        librarySectionId = sectionMatch[1]
+        console.log('从library.key提取section ID:', { librarySectionId })
+      }
+    }
+
+    // 格式2: 后台API返回的媒体项格式
+    // web/index.html#!/server/{machineIdentifier}/details?key={item_id}&X-Plex-Token={token}
+    const serverDetailsMatch = playUrl.match(/\/server\/([^\/]+)\/details\?key=([^&]+)/)
+    if (serverDetailsMatch) {
+      machineIdentifier = serverDetailsMatch[1]
+      const keyValue = serverDetailsMatch[2]
+      console.log('Plex后台API媒体项格式匹配:', { machineIdentifier, keyValue })
+
+      // 从key中提取媒体ID
+      // key格式可能是: /library/metadata/1668 或直接是 1668
+      const metadataMatch = keyValue.match(/\/library\/metadata\/(\d+)/)
+      if (metadataMatch) {
+        mediaId = metadataMatch[1]
+        console.log('从key提取媒体ID:', { mediaId })
+      } else if (/^\d+$/.test(keyValue)) {
+        // 如果key本身就是数字，直接使用
+        mediaId = keyValue
+        console.log('key本身就是媒体ID:', { mediaId })
+      }
+    }
+
+    // 构建深度链接 - 使用新的官方格式
+    if (mediaId && machineIdentifier) {
+      // plex://play/?metadataKey=/library/metadata/$SOME_ID&server=$SERVER_ID
+      let deepLink = `plex://play/?metadataKey=/library/metadata/${mediaId}&server=${machineIdentifier}`
+      if (plexToken) {
+        deepLink += `&X-Plex-Token=${plexToken}`
+      }
+      console.log('Plex深度链接构建成功:', {
+        originalUrl: playUrl,
+        machineIdentifier,
+        libraryKey,
+        librarySectionId,
+        mediaId,
+        plexToken,
+        deepLink,
+      })
+      return deepLink
+    }
+
+    // 如果有媒体ID但没有机器标识符，尝试使用旧的格式作为降级
+    if (mediaId) {
+      let deepLink = `plex://library/metadata/${mediaId}`
+      if (plexToken) {
+        deepLink += `?X-Plex-Token=${plexToken}`
+      }
+      console.log('Plex深度链接构建成功(降级格式):', {
+        originalUrl: playUrl,
+        mediaId,
+        plexToken,
+        deepLink,
+      })
+      return deepLink
+    }
+
+    // 如果有库ID，尝试使用库ID
+    if (librarySectionId) {
+      // http://[PMS_IP_Address]:32400/library/sections/29/all?X-Plex-Token=YourTokenGoesHere
+      let libraryLink = `plex://library/sections/${librarySectionId}/all`
+      if (plexToken) {
+        libraryLink += `?X-Plex-Token=${plexToken}`
+      }
+      console.log('Plex库深度链接构建成功:', {
+        originalUrl: playUrl,
+        librarySectionId,
+        plexToken,
+        libraryLink,
+      })
+      return libraryLink
+    }
+
+    // 如果无法提取媒体ID，尝试使用机器标识符
+    if (machineIdentifier) {
+      // http://[PMS_IP_Address]:32400/library/sections?X-Plex-Token=YourTokenGoesHere
+      let fallbackLink = `plex://library/sections`
+      if (plexToken) {
+        fallbackLink += `?X-Plex-Token=${plexToken}`
+      }
+      console.log('Plex深度链接构建失败，使用机器标识符:', {
+        originalUrl: playUrl,
+        machineIdentifier,
+        plexToken,
+        fallbackLink,
+      })
+      return fallbackLink
+    }
+
+    // 最后的降级方案
+    console.log('Plex深度链接构建失败，使用原始URL:', {
+      originalUrl: playUrl,
+    })
+    return `plex://${playUrl}`
+  } catch (error) {
+    console.warn('构建Plex深度链接失败:', error)
+    return `plex://${playUrl}`
+  }
+}
+
+/**
+ * 构建Jellyfin深度链接
+ * 参考: https://jellyfin.org/docs/general/administration/deep-linking
+ * @param playUrl 播放链接
+ */
+function buildJellyfinDeepLink(playUrl: string): string {
+  try {
+    const url = new URL(playUrl)
+    const serverAddress = url.hostname + (url.port ? `:${url.port}` : '')
+
+    // 提取媒体ID、库ID、serverId
+    let mediaId: string | null = null
+    let libraryId: string | null = null
+    let serverId: string | null = null
+
+    // 格式1: /details?id={item_id}&serverId={serverid}
+    const detailsMatch = playUrl.match(/\/details\?id=([^&]+)&serverId=([^&]+)/)
+    if (detailsMatch) {
+      mediaId = detailsMatch[1]
+      serverId = detailsMatch[2]
+    }
+
+    // 格式2: /movies.html?topParentId={libraryId}
+    const moviesMatch = playUrl.match(/\/movies\.html\?topParentId=([^&]+)/)
+    if (moviesMatch) {
+      libraryId = moviesMatch[1]
+    }
+    // 格式3: /tv.html?topParentId={libraryId}
+    const tvMatch = playUrl.match(/\/tv\.html\?topParentId=([^&]+)/)
+    if (tvMatch) {
+      libraryId = tvMatch[1]
+    }
+    // 格式4: /library.html?topParentId={libraryId}
+    const libMatch = playUrl.match(/\/library\.html\?topParentId=([^&]+)/)
+    if (libMatch) {
+      libraryId = libMatch[1]
+    }
+
+    // 兼容原有格式：?id=xxx
+    if (!mediaId) {
+      const idMatch = playUrl.match(/[?&]id=([^&]+)/)
+      if (idMatch) {
+        mediaId = idMatch[1]
+      }
+    }
+
+    // 兼容原有格式：/items/xxx
+    if (!mediaId) {
+      const itemsMatch = playUrl.match(/\/items\/([^\/\?]+)/)
+      if (itemsMatch) {
+        mediaId = itemsMatch[1]
+      }
+    }
+
+    // 构建深度链接
+    if (mediaId) {
+      let deepLink = `jellyfin://${serverAddress}/item/${mediaId}`
+      if (serverId) {
+        deepLink += `?serverId=${serverId}`
+      }
+      console.log('Jellyfin深度链接构建成功:', {
+        originalUrl: playUrl,
+        serverAddress,
+        mediaId,
+        serverId,
+        deepLink,
+      })
+      return deepLink
+    }
+    if (libraryId) {
+      const deepLink = `jellyfin://${serverAddress}/library/${libraryId}`
+      console.log('Jellyfin库深度链接构建成功:', {
+        originalUrl: playUrl,
+        serverAddress,
+        libraryId,
+        deepLink,
+      })
+      return deepLink
+    }
+
+    // 如果无法提取ID，尝试直接使用服务器地址
+    const fallbackLink = `jellyfin://${serverAddress}`
+    console.log('Jellyfin深度链接构建失败，使用服务器地址:', {
+      originalUrl: playUrl,
+      serverAddress,
+      fallbackLink,
+    })
+    return fallbackLink
+  } catch (error) {
+    console.warn('构建Jellyfin深度链接失败:', error)
+    return `jellyfin://${playUrl}`
+  }
+}
+
+/**
+ * 构建Emby深度链接
+ * 参考: https://emby.media/support/articles/Deep-Linking.html
+ * iOS格式: emby://items?serverId={SERVER_ID}&itemId={ITEM_ID}
+ * Android格式: emby://{服务器地址}/item/{媒体ID}
+ * @param playUrl 播放链接
+ */
+function buildEmbyDeepLink(playUrl: string): string {
+  try {
+    const url = new URL(playUrl)
+    const serverAddress = url.hostname + (url.port ? `:${url.port}` : '')
+
+    // 尝试多种格式提取媒体ID
+    let mediaId: string | null = null
+    let serverId: string | null = null
+
+    // 格式1: /web/index.html#!/item?id=xxx&context=home&serverId=xxx (后台返回的格式)
+    const itemHashMatch = playUrl.match(/\/item\?id=([^&]+)/)
+    if (itemHashMatch) {
+      mediaId = itemHashMatch[1]
+      // 提取serverId
+      const serverIdMatch = playUrl.match(/serverId=([^&]+)/)
+      if (serverIdMatch) {
+        serverId = serverIdMatch[1]
+      }
+    }
+
+    // 格式2: /web/index.html#!/videos?serverId=xxx&parentId=xxx (后台返回的格式)
+    const videosHashMatch = playUrl.match(/\/videos\?serverId=([^&]+)&parentId=([^&]+)/)
+    if (videosHashMatch) {
+      // 对于videos格式，我们使用parentId作为媒体ID
+      mediaId = videosHashMatch[2]
+      serverId = videosHashMatch[1]
+    }
+
+    // 格式3: ?id=xxx (通用格式)
+    if (!mediaId) {
+      const idMatch = playUrl.match(/[?&]id=([^&]+)/)
+      if (idMatch) {
+        mediaId = idMatch[1]
+      }
+    }
+
+    // 格式4: /itemdetails.html?id=xxx
+    if (!mediaId) {
+      const itemMatch = playUrl.match(/\/itemdetails\.html\?id=([^&]+)/)
+      if (itemMatch) {
+        mediaId = itemMatch[1]
+      }
+    }
+
+    // 格式5: /items/xxx
+    if (!mediaId) {
+      const itemsMatch = playUrl.match(/\/items\/([^\/\?]+)/)
+      if (itemsMatch) {
+        mediaId = itemsMatch[1]
+      }
+    }
+
+    // 格式6: /item/xxx (路径格式)
+    if (!mediaId) {
+      const itemPathMatch = playUrl.match(/\/item\/([^\/\?]+)/)
+      if (itemPathMatch) {
+        mediaId = itemPathMatch[1]
+      }
+    }
+
+    if (mediaId) {
+      let deepLink: string
+
+      // 根据设备类型使用不同的深度链接格式
+      if (isIOSDevice()) {
+        // iOS格式: emby://items?serverId={SERVER_ID}&itemId={ITEM_ID}
+        if (serverId) {
+          deepLink = `emby://items?serverId=${serverId}&itemId=${mediaId}`
+        } else {
+          // 如果没有serverId，尝试使用服务器地址作为serverId
+          deepLink = `emby://items?serverId=${serverAddress}&itemId=${mediaId}`
+        }
+      } else {
+        // Android格式: emby://{服务器地址}/item/{媒体ID}
+        deepLink = `emby://${serverAddress}/item/${mediaId}`
+        if (serverId) {
+          deepLink += `?serverId=${serverId}`
+        }
+      }
+
+      console.log('Emby深度链接构建成功:', {
+        originalUrl: playUrl,
+        serverAddress,
+        mediaId,
+        serverId,
+        deviceType: isIOSDevice() ? 'iOS' : 'Android',
+        deepLink,
+      })
+      return deepLink
+    }
+
+    // 如果无法提取媒体ID，尝试直接使用服务器地址
+    // 这会打开Emby APP的主界面
+    const fallbackLink = `emby://${serverAddress}`
+    console.log('Emby深度链接构建失败，使用服务器地址:', {
+      originalUrl: playUrl,
+      serverAddress,
+      fallbackLink,
+    })
+    return fallbackLink
+  } catch (error) {
+    console.warn('构建Emby深度链接失败:', error)
+    return playUrl
+  }
+}
+
+/**
+ * 构建Trimemedia深度链接
+ * @param playUrl 播放链接
+ */
+function buildTrimemediaDeepLink(playUrl: string): string {
+  try {
+    const url = new URL(playUrl)
+    const serverAddress = url.hostname + (url.port ? `:${url.port}` : '')
+
+    // 提取媒体ID
+    let mediaId: string | null = null
+
+    // 尝试从URL路径中提取媒体ID
+    const pathMatch = playUrl.match(/\/item\/([^\/\?]+)/)
+    if (pathMatch) {
+      mediaId = pathMatch[1]
+    }
+
+    // 尝试从查询参数中提取媒体ID
+    if (!mediaId) {
+      const idMatch = playUrl.match(/[?&]id=([^&]+)/)
+      if (idMatch) {
+        mediaId = idMatch[1]
+      }
+    }
+
+    // 构建深度链接
+    if (mediaId) {
+      const deepLink = `trimemedia://${serverAddress}/item/${mediaId}`
+      console.log('Trimemedia深度链接构建成功:', {
+        originalUrl: playUrl,
+        serverAddress,
+        mediaId,
+        deepLink,
+      })
+      return deepLink
+    }
+
+    // 如果无法提取媒体ID，尝试直接使用服务器地址
+    const fallbackLink = `trimemedia://${serverAddress}`
+    console.log('Trimemedia深度链接构建失败，使用服务器地址:', {
+      originalUrl: playUrl,
+      serverAddress,
+      fallbackLink,
+    })
+    return fallbackLink
+  } catch (error) {
+    console.warn('构建Trimemedia深度链接失败:', error)
+    return playUrl
+  }
+}
+
+/**
+ * 构建豆瓣深度链接
+ * 使用豆瓣App官方支持的搜索格式
+ * @param params 豆瓣参数
+ */
+function buildDoubanDeepLink(params: DoubanAppParams): string {
+  const { title, year } = params
+
+  // 使用豆瓣App官方支持的搜索格式
+  // 格式：douban:///search?q={query}
+  const searchQuery = `${title || ''} ${year || ''}`.trim()
+  const deepLink = `douban:///search?q=${encodeURIComponent(searchQuery)}`
+
+  console.log('豆瓣深度链接构建成功:', {
+    params,
+    searchQuery,
+    deepLink,
+  })
+
+  return deepLink
+}
+
+/**
+ * 尝试启动APP
+ * @param appUrl APP深度链接
+ * @param timeout 超时时间
+ */
+async function attemptAppLaunch(appUrl: string, timeout: number): Promise<void> {
+  return new Promise((resolve, reject) => {
+    // 创建一个隐藏的iframe来尝试启动APP
+    const iframe = document.createElement('iframe')
+    iframe.style.display = 'none'
+    iframe.src = appUrl
+
+    // 设置超时
+    const timeoutId = setTimeout(() => {
+      document.body.removeChild(iframe)
+      reject(new Error('APP启动超时'))
+    }, timeout)
+
+    // 监听页面可见性变化，如果用户切换到APP，说明启动成功
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        clearTimeout(timeoutId)
+        document.removeEventListener('visibilitychange', handleVisibilityChange)
+        document.body.removeChild(iframe)
+        resolve()
+      }
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+
+    // 添加到页面并尝试启动
+    document.body.appendChild(iframe)
+
+    // 对于iOS，还需要尝试window.location
+    if (isIOSDevice()) {
+      try {
+        window.location.href = appUrl
+      } catch (error) {
+        console.log('iOS window.location跳转失败:', error)
+      }
+    }
+  })
+}
+
+/**
+ * 根据播放链接自动检测媒体服务器类型并跳转
+ * @param playUrl 播放链接
+ * @param fallbackUrl 备用网页链接
+ * @param serverType 媒体服务器类型（可选，优先使用此参数）
+ */
+export async function openMediaServerWithAutoDetect(
+  playUrl: string,
+  fallbackUrl?: string,
+  serverType?: string,
+): Promise<void> {
+  let detectedServerType: AppType | null = null
+
+  // 优先使用传入的 serverType 参数
+  if (serverType) {
+    const type = serverType.toLowerCase()
+    if (type === 'plex' || type === 'jellyfin' || type === 'emby' || type === 'trimemedia') {
+      detectedServerType = type as AppType
+    }
+  }
+
+  // 如果没有传入 serverType 或类型不支持，则从URL中检测
+  if (!detectedServerType) {
+    const url = playUrl.toLowerCase()
+
+    if (url.includes('plex') || url.includes('plex.tv')) {
+      detectedServerType = 'plex'
+    } else if (url.includes('jellyfin')) {
+      detectedServerType = 'jellyfin'
+    } else if (url.includes('emby')) {
+      detectedServerType = 'emby'
+    }
+  }
+
+  if (detectedServerType) {
+    await openApp(detectedServerType, playUrl, fallbackUrl)
+  } else {
+    // 无法检测到服务器类型，直接使用网页链接
+    window.open(fallbackUrl || playUrl, '_blank')
+  }
+}
+
+/**
+ * 打开豆瓣APP
+ * @param doubanId 豆瓣ID
+ * @param mediaType 媒体类型（电影/电视剧）
+ * @param title 媒体标题
+ * @param year 媒体年份
+ * @param fallbackUrl 备用网页链接
+ */
+export async function openDoubanApp(
+  doubanId: string,
+  mediaType?: string,
+  title?: string,
+  year?: string,
+  fallbackUrl?: string,
+): Promise<void> {
+  const params: DoubanAppParams = {
+    doubanId,
+    mediaType,
+    title,
+    year,
+    fallbackUrl,
+  }
+
+  await openApp('douban', params, fallbackUrl)
+}
+
+/**
+ * 获取APP的下载链接
+ * @param appType APP类型
+ */
+export function getAppDownloadUrl(appType: AppType): string {
+  switch (appType) {
+    case 'plex':
+      return 'https://www.plex.tv/apps/'
+    case 'jellyfin':
+      return 'https://jellyfin.org/downloads/'
+    case 'emby':
+      return 'https://emby.media/download.html'
+    case 'trimemedia':
+      return 'https://trimemedia.com/download'
+    case 'douban':
+      return 'https://www.douban.com/doubanapp/'
+    default:
+      return ''
+  }
+}
+
+/**
+ * 检查是否安装了特定的APP
+ * 注意：由于浏览器安全限制，无法直接检测APP是否安装
+ * 这个方法主要用于提示用户
+ */
+export function checkAppInstalled(appType: AppType): boolean {
+  // 由于浏览器安全限制，无法直接检测APP是否安装
+  // 这里可以根据用户代理或其他信息进行推测
+  // 目前返回false，让系统总是尝试跳转
+  return false
+}
--- a/src/utils/colorUtils.ts
+++ b/src/utils/colorUtils.ts
@@ -0,0 +1,137 @@
+// 预定义的颜色数组，包含更多丰富的颜色选项
+const COLORS = [
+  // 基础颜色
+  '#4caf50', // 绿色
+  '#2196f3', // 蓝色
+  '#ff9800', // 橙色
+  '#9c27b0', // 紫色
+  '#f44336', // 红色
+  '#00bcd4', // 青色
+  '#8bc34a', // 浅绿色
+  '#ff5722', // 深橙色
+  '#3f51b5', // 靛蓝色
+  '#009688', // 青绿色
+  '#e91e63', // 粉红色
+  '#673ab7', // 深紫色
+  '#ffc107', // 琥珀色
+  '#795548', // 棕色
+  '#607d8b', // 蓝灰色
+
+  // 扩展颜色
+  '#ff4081', // 深粉红色
+  '#00e676', // 浅绿色
+  '#ff6f00', // 深橙色
+  '#4fc3f7', // 浅蓝色
+  '#ba68c8', // 浅紫色
+  '#81c784', // 浅绿色
+  '#ffb74d', // 浅橙色
+  '#64b5f6', // 浅蓝色
+  '#f06292', // 浅粉红色
+  '#4db6ac', // 浅青绿色
+  '#aed581', // 浅绿色
+  '#ffd54f', // 浅黄色
+  '#7986cb', // 浅靛蓝色
+  '#4dd0e1', // 浅青色
+  '#ff8a65', // 浅红色
+  '#9575cd', // 浅紫色
+  '#4fc3f7', // 天蓝色
+  '#ffcc02', // 金黄色
+  '#7cb342', // 浅绿色
+  '#42a5f5', // 蓝色
+  '#ab47bc', // 紫色
+  '#26a69a', // 青绿色
+  '#66bb6a', // 绿色
+  '#ff7043', // 深橙色
+  '#29b6f6', // 浅蓝色
+  '#7e57c2', // 紫色
+  '#26c6da', // 青色
+  '#9ccc65', // 浅绿色
+  '#ffb300', // 琥珀色
+  '#8d6e63', // 棕色
+  '#78909c', // 蓝灰色
+  '#ef5350', // 红色
+  '#ec407a', // 粉红色
+  '#ab47bc', // 紫色
+  '#42a5f5', // 蓝色
+  '#7cb342', // 绿色
+  '#ffa726', // 橙色
+  '#26c6da', // 青色
+  '#d4e157', // 浅绿色
+  '#ffca28', // 黄色
+  '#9fa8da', // 浅靛蓝色
+  '#80cbc4', // 浅青绿色
+  '#c5e1a5', // 浅绿色
+  '#ffe082', // 浅黄色
+  '#b39ddb', // 浅紫色
+  '#90caf9', // 浅蓝色
+  '#a5d6a7', // 浅绿色
+  '#ffcc80', // 浅橙色
+  '#b2dfdb', // 浅青绿色
+  '#f8bbd9', // 浅粉红色
+  '#c8e6c9', // 浅绿色
+  '#fff9c4', // 浅黄色
+  '#d1c4e9', // 浅紫色
+  '#bbdefb', // 浅蓝色
+  '#c8e6c9', // 浅绿色
+  '#ffecb3', // 浅琥珀色
+  '#d7ccc8', // 浅棕色
+  '#cfd8dc', // 浅蓝灰色
+]
+
+// 颜色缓存，确保同一项目总是获得相同颜色
+const colorCache = new Map<string, string>()
+
+/**
+ * 生成随机颜色
+ * @returns 随机颜色值
+ */
+export function generateRandomColor(): string {
+  return COLORS[Math.floor(Math.random() * COLORS.length)]
+}
+
+/**
+ * 为指定项目获取或生成颜色
+ * @param itemKey 项目的唯一标识
+ * @returns 颜色值
+ */
+export function getItemColor(itemKey: string): string {
+  if (!colorCache.has(itemKey)) {
+    colorCache.set(itemKey, generateRandomColor())
+  }
+  return colorCache.get(itemKey)!
+}
+
+/**
+ * 初始化项目颜色
+ * @param items 项目数组
+ * @param keyExtractor 从项目中提取唯一键的函数
+ */
+export function initializeItemColors<T>(items: T[], keyExtractor: (item: T) => string): void {
+  items.forEach(item => {
+    const key = keyExtractor(item)
+    getItemColor(key) // 这会自动缓存颜色
+  })
+}
+
+/**
+ * 清除颜色缓存
+ */
+export function clearColorCache(): void {
+  colorCache.clear()
+}
+
+/**
+ * 获取所有预定义颜色
+ * @returns 颜色数组
+ */
+export function getAllColors(): string[] {
+  return [...COLORS]
+}
+
+/**
+ * 获取颜色总数
+ * @returns 颜色数量
+ */
+export function getColorCount(): number {
+  return COLORS.length
+}
--- a/src/utils/themeManager.ts
+++ b/src/utils/themeManager.ts
@@ -0,0 +1,212 @@
+// 主题管理器 - 动态加载主题CSS
+export interface ThemeConfig {
+  name: string
+  cssPath: string
+  isLoaded: boolean
+}
+
+class ThemeManager {
+  private themes: Map<string, ThemeConfig> = new Map()
+  private currentTheme: string = 'default'
+  private loadedLinks: Map<string, HTMLLinkElement> = new Map()
+
+  constructor() {
+    // 注册所有可用主题
+    this.registerTheme('default', '')
+    this.registerTheme('light', '')
+    this.registerTheme('dark', '')
+    this.registerTheme('purple', '')
+    this.registerTheme('auto', '')
+    // 只有透明主题有特定的CSS文件
+    this.registerTheme('transparent', './src/styles/themes/transparent.css')
+  }
+
+  /**
+   * 注册主题
+   */
+  registerTheme(name: string, cssPath: string): void {
+    this.themes.set(name, {
+      name,
+      cssPath,
+      isLoaded: false,
+    })
+  }
+
+  /**
+   * 获取当前主题
+   */
+  getCurrentTheme(): string {
+    return this.currentTheme
+  }
+
+  /**
+   * 设置主题
+   */
+  async setTheme(themeName: string): Promise<void> {
+    if (!this.themes.has(themeName)) {
+      console.warn(`Theme "${themeName}" not found`)
+      return
+    }
+
+    const theme = this.themes.get(themeName)!
+
+    // 清理其他主题的CSS（除了当前要设置的主题）
+    this.unloadOtherThemes()
+
+    // 如果主题有CSS文件，则加载CSS
+    if (theme.cssPath) {
+      try {
+        await this.loadThemeCSS(themeName, theme.cssPath)
+      } catch (error) {
+        console.error(`Failed to load CSS for theme "${themeName}":`, error)
+        // 即使CSS加载失败，也继续应用主题（使用默认样式）
+      }
+    }
+
+    // 应用主题（无论是否有CSS文件）
+    this.applyTheme(themeName)
+  }
+
+  /**
+   * 加载主题CSS文件
+   */
+  private async loadThemeCSS(themeName: string, cssPath: string): Promise<void> {
+    // 如果已经加载过，直接返回
+    if (this.loadedLinks.has(themeName)) {
+      return
+    }
+
+    try {
+      // 动态导入CSS模块
+      if (themeName === 'transparent') {
+        await import('@/styles/themes/transparent.scss')
+        this.themes.get(themeName)!.isLoaded = true
+        return
+      }
+
+      // 对于其他主题，使用传统的link方式
+      const link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.type = 'text/css'
+      link.href = cssPath
+      link.id = `theme-${themeName}`
+
+      // 等待CSS加载完成
+      await new Promise<void>((resolve, reject) => {
+        link.onload = () => {
+          this.loadedLinks.set(themeName, link)
+          this.themes.get(themeName)!.isLoaded = true
+          resolve()
+        }
+        link.onerror = () => {
+          reject(new Error(`Failed to load theme CSS: ${cssPath}`))
+        }
+      })
+
+      // 添加到head
+      document.head.appendChild(link)
+    } catch (error) {
+      console.error(`Error loading theme "${themeName}":`, error)
+      throw error
+    }
+  }
+
+  /**
+   * 应用主题到DOM
+   */
+  private applyTheme(themeName: string): void {
+    // 移除之前的主题属性
+    document.documentElement.removeAttribute('data-theme')
+
+    // 设置新主题（除了default主题）
+    if (themeName !== 'default') {
+      document.documentElement.setAttribute('data-theme', themeName)
+    }
+
+    this.currentTheme = themeName
+
+    // 触发主题变更事件
+    this.dispatchThemeChangeEvent(themeName)
+  }
+
+  /**
+   * 卸载主题CSS
+   */
+  unloadTheme(themeName: string): void {
+    const theme = this.themes.get(themeName)
+    if (!theme) return
+
+    // 对于动态导入的CSS，我们无法直接卸载，但可以标记为未加载
+    if (themeName === 'transparent') {
+      theme.isLoaded = false
+      return
+    }
+
+    // 对于传统link方式加载的CSS
+    const link = this.loadedLinks.get(themeName)
+    if (link) {
+      link.remove()
+      this.loadedLinks.delete(themeName)
+      theme.isLoaded = false
+    }
+  }
+
+  /**
+   * 卸载所有主题CSS（除了当前主题）
+   */
+  unloadOtherThemes(): void {
+    for (const [themeName] of this.themes) {
+      if (themeName !== this.currentTheme && this.themes.get(themeName)?.isLoaded) {
+        this.unloadTheme(themeName)
+      }
+    }
+  }
+
+  /**
+   * 获取已注册的主题列表
+   */
+  getAvailableThemes(): string[] {
+    return Array.from(this.themes.keys())
+  }
+
+  /**
+   * 检查主题是否已加载
+   */
+  isThemeLoaded(themeName: string): boolean {
+    return this.themes.get(themeName)?.isLoaded || false
+  }
+
+  /**
+   * 触发主题变更事件
+   */
+  private dispatchThemeChangeEvent(themeName: string): void {
+    const event = new CustomEvent('themechange', {
+      detail: { theme: themeName },
+    })
+    document.dispatchEvent(event)
+  }
+
+  /**
+   * 监听主题变更事件
+   */
+  onThemeChange(callback: (theme: string) => void): void {
+    document.addEventListener('themechange', (event: any) => {
+      callback(event.detail.theme)
+    })
+  }
+
+  /**
+   * 移除主题变更监听器
+   */
+  offThemeChange(callback: (theme: string) => void): void {
+    document.removeEventListener('themechange', (event: any) => {
+      callback(event.detail.theme)
+    })
+  }
+}
+
+// 创建单例实例
+export const themeManager = new ThemeManager()
+
+// 导出类型
+export type { ThemeManager }
--- a/src/views/discover/MediaDetailView.vue
+++ b/src/views/discover/MediaDetailView.vue
@@ -16,6 +16,7 @@ import { useTheme } from 'vuetify'
 import { useI18n } from 'vue-i18n'
 import { hasPermission } from '@/utils/permission'
 import { useGlobalSettingsStore } from '@/stores'
+import { openMediaServerWithAutoDetect, openDoubanApp } from '@/utils/appDeepLink'

 // 国际化
 const { t } = useI18n()
@@ -353,6 +354,18 @@ function getDoubanLink() {
  return `https://movie.douban.com/subject/${mediaDetail.value.douban_id}`
 }

+// 处理豆瓣链接点击
+async function handleDoubanClick() {
+  if (mediaDetail.value.douban_id) {
+    await openDoubanApp(
+      mediaDetail.value.douban_id,
+      mediaDetail.value.type,
+      mediaDetail.value.title,
+      mediaDetail.value.year,
+    )
+  }
+}
+
 // 拼装IMDB地址
 function getImdbLink() {
  return `https://www.imdb.com/title/${mediaDetail.value.imdb_id}`
@@ -475,10 +488,8 @@ async function handlePlay() {
  try {
    const result: { [key: string]: any } = await api.get(`mediaserver/play/${existsItemId.value}`)
    if (result?.success) {
-      // 打开链接地址
-      setTimeout(() => {
-        window.open(result.data.url, '_blank')
-      }, 100)
+      // 使用深度链接工具，优先跳转到APP，失败后跳转到网页
+      await openMediaServerWithAutoDetect(result.data.url, undefined, result.data.server_type)
    } else {
      $toast.error(`获取播放链接失败：${result.message}！`)
    }
@@ -669,19 +680,14 @@ onBeforeMount(() => {
                <span class="ms-1">TheMovieDb</span>
              </div>
            </a>
-            <a
-              v-if="mediaDetail.douban_id"
-              class="mb-2 mr-2 inline-flex last:mr-0"
-              :href="getDoubanLink()"
-              target="_blank"
-            >
+            <div v-if="mediaDetail.douban_id" class="mb-2 mr-2 inline-flex last:mr-0" @click="handleDoubanClick">
              <div
                class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
              >
                <VIcon icon="mdi-link" />
                <span class="ms-1">豆瓣</span>
              </div>
-            </a>
+            </div>
            <a v-if="mediaDetail.imdb_id" class="mb-2 mr-2 inline-flex last:mr-0" :href="getImdbLink()" target="_blank">
              <div
                class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
--- a/src/views/setting/AccountSettingAbout.vue
+++ b/src/views/setting/AccountSettingAbout.vue
@@ -12,6 +12,38 @@ const systemEnv = ref<any>({})
 // 所有Release
 const allRelease = ref<any>([])

+// 支持站点
+const supportingSites = ref<any>({})
+
+// 支持站点折叠状态
+const sitesExpanded = ref(false)
+
+// 去重后的支持站点
+const uniqueSupportingSites = computed(() => {
+  const sitesMap = new Map()
+
+  Object.entries(supportingSites.value).forEach(([domain, site]: [string, any]) => {
+    if (!sitesMap.has(site.name)) {
+      sitesMap.set(site.name, {
+        name: site.name,
+        urls: [{ domain, url: site.url }],
+      })
+    } else {
+      sitesMap.get(site.name).urls.push({ domain, url: site.url })
+    }
+  })
+
+  return Array.from(sitesMap.values())
+})
+
+// 显示的支持站点（折叠时只显示前5个）
+const displayedSites = computed(() => {
+  if (sitesExpanded.value) {
+    return uniqueSupportingSites.value
+  }
+  return uniqueSupportingSites.value.slice(0, 5)
+})
+
 // 变更日志对话框
 const releaseDialog = ref(false)

@@ -56,6 +88,20 @@ async function queryAllRelease() {
  }
 }

+// 查询支持站点
+async function querySupportingSites() {
+  try {
+    supportingSites.value = await api.get('site/supporting')
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 切换站点列表展开状态
+function toggleSitesExpanded() {
+  sitesExpanded.value = !sitesExpanded.value
+}
+
 // 计算发布时间
 function releaseTime(releaseDate: string) {
  // 上一次更新时间
@@ -65,6 +111,7 @@ function releaseTime(releaseDate: string) {
 onMounted(() => {
  querySystemEnv()
  queryAllRelease()
+  querySupportingSites()
 })
 </script>

@@ -156,6 +203,36 @@ onMounted(() => {
              </dd>
            </div>
          </div>
+          <div>
+            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+              <dt class="block text-sm font-bold">{{ t('setting.about.supportingSites') }}</dt>
+              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                <div class="flex flex-col gap-2">
+                  <div class="flex flex-wrap gap-2 mt-1 ms-1">
+                    <VChip v-for="site in displayedSites" :key="site.name" variant="outlined" size="small">
+                      <span class="truncate max-w-32">{{ site.name }}</span>
+                    </VChip>
+                    <VChip
+                      v-if="!sitesExpanded && uniqueSupportingSites.length > 5"
+                      variant="tonal"
+                      size="small"
+                      @click="toggleSitesExpanded"
+                    >
+                      <span> {{ uniqueSupportingSites.length }}+ ...</span>
+                    </VChip>
+                    <VChip
+                      v-if="sitesExpanded && uniqueSupportingSites.length > 5"
+                      variant="tonal"
+                      size="small"
+                      @click="toggleSitesExpanded"
+                    >
+                      <span>< {{ t('setting.about.collapse') }}</span>
+                    </VChip>
+                  </div>
+                </div>
+              </dd>
+            </div>
+          </div>
        </dl>
      </div>
    </div>
@@ -171,12 +248,12 @@ onMounted(() => {
              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
                <span class="flex-grow undefined">
                  <a
-                    href="https://wiki.movie-pilot.org"
+                    href="https://movie-pilot.org"
                    target="_blank"
                    rel="noreferrer"
                    class="text-indigo-500 transition duration-300 hover:underline"
                  >
-                    https://wiki.movie-pilot.org
+                    https://movie-pilot.org
                  </a>
                </span>
              </dd>
--- a/src/views/setting/AccountSettingSite.vue
+++ b/src/views/setting/AccountSettingSite.vue
@@ -31,7 +31,6 @@ const siteSetting = ref<any>({
    COOKIECLOUD_KEY: '',
    COOKIECLOUD_PASSWORD: '',
    COOKIECLOUD_INTERVAL: 0,
-    USER_AGENT: '',
    COOKIECLOUD_ENABLE_LOCAL: false,
    COOKIECLOUD_BLACKLIST: '',
  },
@@ -190,15 +189,6 @@ onMounted(() => {
                  prepend-inner-icon="mdi-block-helper"
                />
              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="siteSetting.CookieCloud.USER_AGENT"
-                  :label="t('setting.site.userAgent')"
-                  :hint="t('setting.site.userAgentHint')"
-                  persistent-hint
-                  prepend-inner-icon="mdi-web"
-                />
-              </VCol>
            </VRow>
          </VForm>
        </VCardText>
--- a/src/views/site/SiteCardListView.vue
+++ b/src/views/site/SiteCardListView.vue
@@ -5,6 +5,7 @@ import type { Site, SiteUserData } from '@/api/types'
 import SiteCard from '@/components/cards/SiteCard.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 import SiteAddEditDialog from '@/components/dialog/SiteAddEditDialog.vue'
+import SiteStatisticsDialog from '@/components/dialog/SiteStatisticsDialog.vue'
 import { useDisplay } from 'vuetify'
 import { useDynamicButton } from '@/composables/useDynamicButton'
 import { useI18n } from 'vue-i18n'
@@ -39,6 +40,9 @@ const loading = ref(false)
 // 新增站点对话框
 const siteAddDialog = ref(false)

+// 统计信息对话框
+const siteStatsDialog = ref(false)
+
 // 筛选相关
 const filterMenu = ref(false)
 const filterOption = ref('all') // all, active, inactive, connected, slow, failed, unknown
@@ -235,44 +239,54 @@ useDynamicButton({
    <!-- 页面标题和筛选按钮 -->
    <div class="d-flex justify-space-between align-center mb-4">
      <VPageContentTitle :title="t('navItems.siteManager')" class="mb-0" />
-      <!-- 筛选按钮 -->
-      <VMenu v-model="filterMenu" offset-y :close-on-content-click="false" location="bottom end">
-        <template #activator="{ props }">
-          <VBtn
-            v-bind="props"
-            :icon="display.smAndDown.value"
-            :variant="filterOption === 'all' ? 'text' : 'tonal'"
-            :color="currentFilter?.color"
-          >
-            <VIcon :icon="currentFilter?.icon || 'mdi-filter'" />
-            <span v-if="!display.smAndDown.value" class="ml-2">
-              {{ currentFilter?.label }}
-            </span>
-            <VIcon v-if="!display.smAndDown.value" icon="mdi-chevron-down" class="ml-1" />
-          </VBtn>
-        </template>
-
-        <!-- 筛选菜单 -->
-        <VCard min-width="200">
-          <VList class="px-2">
-            <VListSubheader>{{ t('common.filter') }}</VListSubheader>
-            <VListItem
-              v-for="option in filterOptions"
-              :key="option.value"
-              :active="filterOption === option.value"
-              @click="selectFilter(option.value)"
+      <!-- 右侧按钮组 -->
+      <div class="d-flex align-center gap-2">
+        <!-- 统计信息按钮 -->
+        <VBtn :icon="display.smAndDown.value" variant="text" color="info" @click="siteStatsDialog = true">
+          <VIcon icon="mdi-chart-line" />
+          <span v-if="!display.smAndDown.value" class="ml-2">
+            {{ t('site.statistics') }}
+          </span>
+        </VBtn>
+        <!-- 筛选按钮 -->
+        <VMenu v-model="filterMenu" offset-y :close-on-content-click="false" location="bottom end">
+          <template #activator="{ props }">
+            <VBtn
+              v-bind="props"
+              :icon="display.smAndDown.value"
+              :variant="filterOption === 'all' ? 'text' : 'tonal'"
+              :color="currentFilter?.color"
            >
-              <template #prepend>
-                <VIcon :icon="option.icon" :color="option.color" />
-              </template>
-              <VListItemTitle>{{ option.label }}</VListItemTitle>
-              <template #append>
-                <VIcon v-if="filterOption === option.value" icon="mdi-check" color="primary" />
-              </template>
-            </VListItem>
-          </VList>
-        </VCard>
-      </VMenu>
+              <VIcon :icon="currentFilter?.icon || 'mdi-filter'" />
+              <span v-if="!display.smAndDown.value" class="ml-2">
+                {{ currentFilter?.label }}
+              </span>
+              <VIcon v-if="!display.smAndDown.value" icon="mdi-chevron-down" class="ml-1" />
+            </VBtn>
+          </template>
+
+          <!-- 筛选菜单 -->
+          <VCard min-width="200">
+            <VList class="px-2">
+              <VListSubheader>{{ t('common.filter') }}</VListSubheader>
+              <VListItem
+                v-for="option in filterOptions"
+                :key="option.value"
+                :active="filterOption === option.value"
+                @click="selectFilter(option.value)"
+              >
+                <template #prepend>
+                  <VIcon :icon="option.icon" :color="option.color" />
+                </template>
+                <VListItemTitle>{{ option.label }}</VListItemTitle>
+                <template #append>
+                  <VIcon v-if="filterOption === option.value" icon="mdi-check" color="primary" />
+                </template>
+              </VListItem>
+            </VList>
+          </VCard>
+        </VMenu>
+      </div>
    </div>

    <LoadingBanner v-if="!isRefreshed" class="mt-12" />
@@ -326,4 +340,7 @@ useDynamicButton({
    @save="onSiteSave"
    @close="siteAddDialog = false"
  />
+
+  <!-- 统计信息弹窗 -->
+  <SiteStatisticsDialog v-if="siteStatsDialog" v-model="siteStatsDialog" :sites="siteList" />
 </template>
--- a/src/views/subscribe/SubscribeListView.vue
+++ b/src/views/subscribe/SubscribeListView.vue
@@ -31,6 +31,7 @@ const props = defineProps({
  type: String,
  subid: String,
  keyword: String,
+  statusFilter: String,
 })

 // 是否刷新过
@@ -51,22 +52,61 @@ const orderConfig = ref<{ id: number }[]>([])
 // 显示的订阅列表
 const displayList = ref<Subscribe[]>([])

+// 根据订阅数据判断订阅状态
+function getSubscribeStatus(subscribe: Subscribe) {
+  // 洗版中
+  if (subscribe.best_version) {
+    return 'best_version'
+  }
+
+  // 根据订阅状态判断
+  if (subscribe.state === 'P') {
+    return 'pending' // 待定
+  } else if (subscribe.state === 'S') {
+    return 'paused' // 暂停
+  }
+
+  // 如果是电影，只有洗版和状态
+  if (subscribe.type === '电影') {
+    return 'all'
+  }
+
+  // 电视剧根据集数情况判断
+  if (subscribe.total_episode && subscribe.total_episode > 0) {
+    const lackEpisode = subscribe.lack_episode || 0
+    const completedEpisode = subscribe.total_episode - lackEpisode
+
+    if (lackEpisode === 0) {
+      return 'completed' // 订阅完成
+    } else if (completedEpisode > 0) {
+      return 'subscribing' // 订阅中
+    } else {
+      return 'not_started' // 未开始
+    }
+  }
+
+  return 'not_started' // 默认未开始
+}
+
 // API请求键值（计算属性）
 const orderRequestKey = computed(() => (props.type === '电影' ? 'SubscribeMovieOrder' : 'SubscribeTvOrder'))

 // 监听dataList变化，同步更新displayList
-watch([dataList, () => props.keyword], () => {
+watch([dataList, () => props.keyword, () => props.statusFilter], () => {
  if (superUser)
    displayList.value = dataList.value.filter(
      data =>
-        data.type === props.type && (!props.keyword || data.name.toLowerCase().includes(props.keyword.toLowerCase())),
+        data.type === props.type &&
+        (!props.keyword || data.name.toLowerCase().includes(props.keyword.toLowerCase())) &&
+        (!props.statusFilter || props.statusFilter === 'all' || getSubscribeStatus(data) === props.statusFilter),
    )
  else
    displayList.value = dataList.value.filter(
      data =>
        data.type === props.type &&
        data.username === userName &&
-        (!props.keyword || data.name.toLowerCase().includes(props.keyword.toLowerCase())),
+        (!props.keyword || data.name.toLowerCase().includes(props.keyword.toLowerCase())) &&
+        (!props.statusFilter || props.statusFilter === 'all' || getSubscribeStatus(data) === props.statusFilter),
    )
  // 排序
  sortSubscribeOrder()
@@ -133,6 +173,22 @@ function historyDone() {
  fetchData()
 }

+// 错误描述
+const errorDescription = computed(() => {
+  if ((props.statusFilter && props.statusFilter !== 'all') || props.keyword) {
+    return t('common.tryChangingFilters')
+  }
+  return t('subscribe.noSubscribeData')
+})
+
+// 错误标题
+const errorTitle = computed(() => {
+  if ((props.statusFilter && props.statusFilter !== 'all') || props.keyword) {
+    return t('common.noMatchingData')
+  }
+  return t('common.noData')
+})
+
 onMounted(async () => {
  await fetchData()
  if (props.subid) {
@@ -161,7 +217,6 @@ useDynamicButton({
 </script>

 <template>
-  <VPageContentTitle v-if="keyword" :title="`${t('subscribe.filterSubscriptions')}：${keyword}`" />
  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
  <draggable
    v-if="displayList.length > 0"
@@ -171,6 +226,7 @@ useDynamicButton({
    item-key="id"
    tag="div"
    :component-data="{ class: 'grid gap-4 grid-subscribe-card px-2' }"
+    :disabled="props.keyword || (props.statusFilter && props.statusFilter !== 'all')"
  >
    <template #item="{ element }">
      <SubscribeCard :key="element.id" :media="element" @remove="fetchData" @save="fetchData" />
@@ -179,8 +235,8 @@ useDynamicButton({
  <NoDataFound
    v-if="displayList.length === 0 && isRefreshed"
    error-code="404"
-    :error-title="t('common.noData')"
-    :error-description="keyword ? t('subscribe.noFilterData') : t('subscribe.noSubscribeData')"
+    :error-title="errorTitle"
+    :error-description="errorDescription"
  />
  <!-- 底部操作按钮 -->
  <Teleport to="body" v-if="route.path.startsWith(`/subscribe/${props.type === '电影' ? 'movie' : 'tv'}`)">
--- a/src/views/subscribe/SubscribeShareView.vue
+++ b/src/views/subscribe/SubscribeShareView.vue
@@ -28,6 +28,18 @@ const page = ref(1)
 // 搜索关键字
 const keyword = ref(props.keyword)

+// 监听 props.keyword 变化
+watch(
+  () => props.keyword,
+  newKeyword => {
+    keyword.value = newKeyword || ''
+    // 重置页码和数据
+    page.value = 1
+    dataList.value = []
+    isRefreshed.value = false
+  },
+)
+
 // 是否加载中
 const loading = ref(false)

--- a/src/views/system/MessageView.vue
+++ b/src/views/system/MessageView.vue
@@ -34,7 +34,9 @@ function handleSSEMessage(event: MessageEvent) {
  const message = event.data
  if (message) {
    const object = JSON.parse(message)
-    if (compareTime(object.date, lastTime.value) <= 0) return
+    // 使用reg_time或date字段进行比较
+    const messageTime = object.reg_time || object.date
+    if (compareTime(messageTime, lastTime.value) <= 0) return
    messages.value.push(object)
    nextTick(() => {
      emit('scroll') // 新消息到达时触发智能滚动
@@ -43,16 +45,11 @@ function handleSSEMessage(event: MessageEvent) {
 }

 // 使用优化的SSE连接
-const sseConnection = useSSE(
-  `${import.meta.env.VITE_API_BASE_URL}system/message?role=user`,
-  handleSSEMessage,
-  'message-view',
-  {
-    backgroundCloseDelay: 5000,
-    reconnectDelay: 3000,
-    maxReconnectAttempts: 3
-  }
-)
+useSSE(`${import.meta.env.VITE_API_BASE_URL}system/message?role=user`, handleSSEMessage, 'message-view', {
+  backgroundCloseDelay: 5000,
+  reconnectDelay: 3000,
+  maxReconnectAttempts: 3,
+})

 // 调用API加载存量消息
 async function loadMessages({ done }: { done: any }) {
@@ -73,15 +70,31 @@ async function loadMessages({ done }: { done: any }) {
    // 已加载过
    isLoaded.value = true
    if (currData.value.length > 0) {
+      // 按时间排序，确保最新的消息在最后
+      currData.value.sort((a, b) => {
+        const timeA = a.reg_time || a.date || ''
+        const timeB = b.reg_time || b.date || ''
+        return compareTime(timeA, timeB)
+      })
+
      // 取最后一条时间为存量消息最新时间
-      lastTime.value = currData.value[currData.value.length - 1].reg_time ?? ''
-      // 倒序
-      currData.value.reverse()
-      // 合并数据
-      messages.value = [...currData.value, ...messages.value]
+      const lastMessage = currData.value[currData.value.length - 1]
+      lastTime.value = lastMessage.reg_time || lastMessage.date || ''
+
+      // 合并数据并重新排序
+      const allMessages = [...currData.value, ...messages.value]
+      allMessages.sort((a, b) => {
+        const timeA = a.reg_time || a.date || ''
+        const timeB = b.reg_time || b.date || ''
+        return compareTime(timeA, timeB)
+      })
+      messages.value = allMessages
+
+      // 首次加载时滚动到底部
      if (page.value === 1) {
-        // 首次加载时滚动到底部
-        emit('scroll')
+        nextTick(() => {
+          emit('scroll')
+        })
      }
      // 页码+1
      page.value++
@@ -94,15 +107,37 @@ async function loadMessages({ done }: { done: any }) {
    // 取消加载中
    loading.value = false
  } catch (error) {
-    console.error(error)
+    console.error('加载消息失败:', error)
+    loading.value = false
+    done('error')
  }
 }

 // 比较yyyy-MM-dd HH:mm:ss时间大小
 function compareTime(time1: string, time2: string) {
+  if (!time1 && !time2) return 0
  if (!time1) return -1
  if (!time2) return 1
-  return new Date(time1.replaceAll(/-/g, '/')).getTime() - new Date(time2.replaceAll(/-/g, '/')).getTime()
+
+  try {
+    // 统一时间格式处理，支持多种格式
+    const normalizeTime = (time: string) => {
+      // 如果是ISO格式，直接使用
+      if (time.includes('T')) {
+        return new Date(time).getTime()
+      }
+      // 如果是yyyy-MM-dd HH:mm:ss格式，替换-为/
+      return new Date(time.replaceAll(/-/g, '/')).getTime()
+    }
+
+    const timestamp1 = normalizeTime(time1)
+    const timestamp2 = normalizeTime(time2)
+
+    return timestamp1 - timestamp2
+  } catch (error) {
+    console.error('时间比较错误:', error, 'time1:', time1, 'time2:', time2)
+    return 0
+  }
 }

 // 图片加载完成时触发智能滚动
--- a/src/views/system/ModuleTestView.vue
+++ b/src/views/system/ModuleTestView.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
+import { useTheme } from 'vuetify'

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

+// 主题
+const theme = useTheme()
+
 // 定义所有的模块ID、名称列表
 const modules = ref<
  {
@@ -13,36 +17,83 @@ const modules = ref<
    state: 'success' | 'error' | 'warning' | 'info' | undefined
    errmsg: string
    loading: boolean
+    visible: boolean
+    delay: number
  }[]
 >([])

+// 总体进度
+const overallProgress = ref(0)
+const isChecking = ref(false)
+const checkComplete = ref(false)
+
 // 调用API查询模块列表
 async function getModules() {
  try {
+    isChecking.value = true
+    overallProgress.value = 0
+
    const result: { [key: string]: any } = await api.get('system/modulelist')
    if (result.success) {
      const moduleList = result.data?.modules
      if (moduleList) {
-        moduleList.forEach((module: { id: string; name: string }) => {
-          modules.value.push({ id: module.id, name: module.name, state: undefined, errmsg: '', loading: false })
-        })
-        // 逐个检查所有模块
-        for (let i = 0; i < modules.value.length; i++) await moduleTest(i)
+        // 初始化模块列表
+        modules.value = moduleList.map((module: { id: string; name: string }, index: number) => ({
+          id: module.id,
+          name: module.name,
+          state: undefined,
+          errmsg: '',
+          loading: false,
+          visible: false,
+          delay: index * 200, // 每个模块延迟200ms出现
+        }))
+
+        // 开始检查
+        await startModuleCheck()
      }
    }
  } catch (error) {
    console.error(error)
+    isChecking.value = false
  }
 }

+// 开始模块检查
+async function startModuleCheck() {
+  const totalModules = modules.value.length
+
+  for (let i = 0; i < modules.value.length; i++) {
+    const module = modules.value[i]
+
+    // 显示当前模块
+    setTimeout(() => {
+      module.visible = true
+    }, module.delay)
+
+    // 开始检查
+    await moduleTest(i)
+
+    // 更新总体进度
+    overallProgress.value = ((i + 1) / totalModules) * 100
+  }
+
+  // 检查完成
+  setTimeout(() => {
+    isChecking.value = false
+    checkComplete.value = true
+  }, 500)
+}
+
 // 调用API测试模块
 async function moduleTest(index: number) {
  try {
    const target = modules.value[index]
    const moduleid = target.id
    target.loading = true
+
    const result: { [key: string]: any } = await api.get(`system/moduletest/${moduleid}`)
    target.loading = false
+
    if (result.success) {
      target.state = 'success'
      target.name = `${target.name} - ${t('moduleTest.normal')}`
@@ -56,25 +107,325 @@ async function moduleTest(index: number) {
    }
  } catch (error) {
    console.error(error)
+    const target = modules.value[index]
+    target.loading = false
+    target.state = 'error'
+    target.errmsg = '网络请求失败'
  }
 }

+// 重新检查
+function recheck() {
+  modules.value = []
+  overallProgress.value = 0
+  isChecking.value = false
+  checkComplete.value = false
+  getModules()
+}
+
 // 加载
 onMounted(getModules)
 </script>

 <template>
-  <VAlert
-    v-for="(module, index) in modules"
-    :key="index"
-    :type="module.state"
-    :title="module.name"
-    class="mb-2"
-    variant="tonal"
-  >
-    {{ module.errmsg }}
-    <template #append>
-      <VProgressCircular v-if="module.loading" indeterminate />
-    </template>
-  </VAlert>
+  <div class="system-health-check">
+    <!-- 动态进度框 - 固定在顶部 -->
+    <div class="progress-container">
+      <div class="progress-card" :class="{ 'dark-theme': theme.global.current.value.dark }">
+        <div class="progress-header">
+          <VIcon
+            :icon="isChecking ? 'mdi-cog-sync' : checkComplete ? 'mdi-check-circle' : 'mdi-cog'"
+            :class="isChecking ? 'rotating' : ''"
+            size="28"
+            color="white"
+          />
+          <h3 class="progress-title text-white">
+            {{
+              isChecking
+                ? t('moduleTest.checking')
+                : checkComplete
+                ? t('moduleTest.complete')
+                : t('moduleTest.preparing')
+            }}
+          </h3>
+        </div>
+
+        <div class="progress-bar-container">
+          <VProgressLinear
+            v-model="overallProgress"
+            :color="checkComplete ? 'success' : 'white'"
+            height="6"
+            rounded
+            class="progress-bar"
+          />
+          <div class="progress-text">{{ Math.round(overallProgress) }}%</div>
+        </div>
+
+        <div class="progress-stats">
+          <div class="stat-item">
+            <span class="stat-number">{{ modules.length }}</span>
+            <span class="stat-label">{{ t('moduleTest.totalModules') }}</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-number success">{{ modules.filter(m => m.state === 'success').length }}</span>
+            <span class="stat-label">{{ t('moduleTest.normal') }}</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-number error">{{ modules.filter(m => m.state === 'error').length }}</span>
+            <span class="stat-label">{{ t('moduleTest.error') }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 检查结果列表 - 可滚动区域 -->
+    <div class="results-container">
+      <div class="module-list">
+        <Transition v-for="(module, index) in modules" :key="module.id" name="module-item" appear>
+          <div
+            v-show="module.visible"
+            class="module-item"
+            :class="[module.state, { 'dark-theme': theme.global.current.value.dark }]"
+          >
+            <div class="module-header">
+              <div class="module-icon">
+                <VIcon v-if="module.loading" icon="mdi-loading" class="rotating" color="primary" size="20" />
+                <VIcon v-else-if="module.state === 'success'" icon="mdi-check-circle" color="success" size="20" />
+                <VIcon v-else-if="module.state === 'error'" icon="mdi-alert-circle" color="error" size="20" />
+                <VIcon v-else icon="mdi-minus-circle" color="grey" size="20" />
+              </div>
+              <div class="module-info">
+                <div class="module-name">{{ module.name }}</div>
+                <div v-if="module.errmsg" class="module-error">{{ module.errmsg }}</div>
+              </div>
+              <div class="module-status">
+                <VChip v-if="module.loading" color="primary" size="x-small" variant="tonal">
+                  {{ t('moduleTest.checking') }}
+                </VChip>
+                <VChip v-else-if="module.state === 'success'" color="success" size="x-small" variant="tonal">
+                  {{ t('moduleTest.normal') }}
+                </VChip>
+                <VChip v-else-if="module.state === 'error'" color="error" size="x-small" variant="tonal">
+                  {{ t('moduleTest.error') }}
+                </VChip>
+                <VChip v-else-if="module.state === undefined" color="grey" size="x-small" variant="tonal">
+                  {{ t('moduleTest.disabled') }}
+                </VChip>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+
+    <!-- 重新检查按钮 -->
+    <div v-if="checkComplete" class="recheck-container">
+      <VBtn color="primary" variant="outlined" prepend-icon="mdi-refresh" size="small" @click="recheck">
+        {{ t('moduleTest.recheck') }}
+      </VBtn>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.system-health-check {
+  display: flex;
+  flex-direction: column;
+}
+
+.progress-container {
+  flex-shrink: 0;
+  background: var(--v-surface-variant);
+}
+
+.progress-card {
+  padding: 20px;
+  border-radius: 12px;
+  margin: 16px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.progress-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-block-end: 16px;
+}
+
+.progress-title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.progress-bar-container {
+  position: relative;
+  margin-block-end: 16px;
+}
+
+.progress-bar {
+  background: rgba(255, 255, 255, 20%) !important;
+}
+
+.progress-text {
+  position: absolute;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 90%);
+  color: #333;
+  font-size: 0.75rem;
+  font-weight: 600;
+  inset-block-start: -6px;
+  inset-inline-end: 0;
+  padding-block: 2px;
+  padding-inline: 6px;
+}
+
+.progress-stats {
+  display: flex;
+  justify-content: space-around;
+  gap: 12px;
+}
+
+.stat-item {
+  flex: 1;
+  text-align: center;
+}
+
+.stat-number {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-block-end: 2px;
+}
+
+.stat-number.success {
+  color: #4caf50;
+}
+
+.stat-number.error {
+  color: #f44336;
+}
+
+.stat-label {
+  font-size: 0.7rem;
+  opacity: 0.8;
+}
+
+.results-container {
+  flex: 1;
+  min-block-size: 0;
+  overflow-y: auto;
+  padding-block: 0 16px;
+  padding-inline: 16px;
+}
+
+.module-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.module-item {
+  padding: 12px;
+  border: 1px solid var(--v-border-color);
+  border-radius: 8px;
+  background: var(--v-surface);
+  transition: all 0.3s ease;
+}
+
+.module-item:hover {
+  transform: translateY(-2px);
+}
+
+.module-item.success {
+  border-color: #4caf50;
+  background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
+}
+
+.module-item.success.dark-theme {
+  border-color: #4caf50;
+  background: linear-gradient(135deg, rgba(31, 47, 31, 30%) 0%, rgba(24, 32, 24, 60%) 100%);
+}
+
+.module-item.error {
+  border-color: #f44336;
+  background: linear-gradient(135deg, #fff8f8 0%, #ffe8e8 100%);
+}
+
+.module-item.error.dark-theme {
+  border-color: #f44336;
+  background: linear-gradient(135deg, rgba(47, 31, 31, 30%) 0%, rgba(34, 24, 24, 60%) 100%);
+}
+
+.module-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.module-icon {
+  flex-shrink: 0;
+}
+
+.module-info {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.module-name {
+  color: var(--v-on-surface);
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-block-end: 2px;
+}
+
+.module-error {
+  color: #f44336;
+  font-size: 0.75rem;
+  margin-block-start: 2px;
+}
+
+.module-status {
+  flex-shrink: 0;
+}
+
+.recheck-container {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: 16px;
+  background: var(--v-surface-variant);
+  border-block-start: 1px solid var(--v-border-color);
+}
+
+/* 动画效果 */
+.rotating {
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 模块项单独动画 - 从下方滑出 */
+.module-item-enter-active {
+  transition: all 0.5s ease;
+}
+
+.module-item-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.module-item-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>
--- a/src/views/torrent/TorrentCardListView.vue
+++ b/src/views/torrent/TorrentCardListView.vue
@@ -693,7 +693,7 @@ const handleSortIconClick = () => {
  </DialogWrapper>

  <!-- 筛选弹窗 -->
-  <DialogWrapper v-model="filterMenuOpen" max-width="25rem" location="center" max-height="85vh">
+  <DialogWrapper v-model="filterMenuOpen" max-width="25rem" location="center" max-height="85vh" scrollable>
    <VCard>
      <VCardTitle class="py-3 d-flex align-center">
        <VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
--- a/src/views/torrent/TorrentRowListView.vue
+++ b/src/views/torrent/TorrentRowListView.vue
@@ -673,7 +673,7 @@ onMounted(() => {
    </DialogWrapper>

    <!-- 筛选弹窗 -->
-    <DialogWrapper v-model="filterMenuOpen" max-width="25rem" max-height="85vh" location="center">
+    <DialogWrapper v-model="filterMenuOpen" max-width="25rem" max-height="85vh" location="center" scrollable>
      <VCard>
        <VCardTitle class="py-3 d-flex align-center">
          <VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
--- a/src/views/workflow/WorkflowListView.vue
+++ b/src/views/workflow/WorkflowListView.vue
@@ -26,6 +26,18 @@ const addDialog = ref(false)
 // 所有任务
 const workflowList = ref<Workflow[]>([])

+// 事件类型列表
+const eventTypes = ref<Array<{ title: string; value: string }>>([])
+
+// 加载事件类型列表
+async function loadEventTypes() {
+  try {
+    eventTypes.value = await api.get('workflow/event_types')
+  } catch (error) {
+    console.error('Failed to load event types:', error)
+  }
+}
+
 // 加载数据
 async function fetchData() {
  try {
@@ -51,6 +63,7 @@ useDynamicButton({
 })

 onMounted(() => {
+  loadEventTypes()
  fetchData()
 })

@@ -62,7 +75,7 @@ onActivated(() => {
  <div>
    <LoadingBanner v-if="!isRefreshed" class="mt-12" />
    <div v-if="workflowList.length > 0 && isRefreshed" class="grid gap-4 grid-workflow-card px-2">
-      <WorkflowTaskCard v-for="item in workflowList" :key="item.id" :workflow="item" @refresh="fetchData" />
+      <WorkflowTaskCard v-for="item in workflowList" :key="item.id" :workflow="item" :event-types="eventTypes" @refresh="fetchData" />
    </div>
    <NoDataFound
      v-if="workflowList.length === 0 && isRefreshed"
--- a/src/views/workflow/WorkflowShareView.vue
+++ b/src/views/workflow/WorkflowShareView.vue
@@ -41,6 +41,18 @@ const isRefreshed = ref(false)
 const dataList = ref<WorkflowShare[]>([])
 const currData = ref<WorkflowShare[]>([])

+// 事件类型列表
+const eventTypes = ref<Array<{ title: string; value: string }>>([])
+
+// 加载事件类型列表
+async function loadEventTypes() {
+  try {
+    eventTypes.value = await api.get('workflow/event_types')
+  } catch (error) {
+    console.error('Failed to load event types:', error)
+  }
+}
+
 // 拼装参数
 function getParams() {
  let params = {
@@ -121,6 +133,7 @@ function removeData(id: string) {
 }

 onActivated(() => {
+  loadEventTypes()
  fetchData({ done: () => {} })
 })
 </script>
@@ -133,7 +146,12 @@ onActivated(() => {
    <template #empty />
    <div v-if="dataList.length > 0" class="grid gap-4 grid-workflow-share-card" tabindex="0">
      <div v-for="data in dataList" :key="data.id">
-        <WorkflowShareCard :workflow="data" @delete="removeData(data.id || '')" @update="emit('update')" />
+        <WorkflowShareCard
+          :workflow="data"
+          :event-types="eventTypes"
+          @delete="removeData(data.id || '')"
+          @update="emit('update')"
+        />
      </div>
    </div>
    <NoDataFound
Author	SHA1	Message	Date
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