fix(DefaultLayout): improve code formatting and style consistency

- Updated VCardActions in multiple dialog components to use a consistent class `app-dialog-actions` for styling.
- Changed button variants to `flat` for primary actions and `tonal` for secondary actions across various dialogs.
- Adjusted padding and spacing for buttons to improve layout consistency.
- Enhanced responsiveness for dialog actions in mobile views.

.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:

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 dev-dist
 *.local
+package-lock.json
 
 /cypress/videos/
 /cypress/screenshots/
@@ -34,3 +35,5 @@ dev-dist
 # iconify dist files
 src/@iconify/*.js
 public/plugin_icon/**
+docs-lock/
+.trae/

README.md

@@ -11,15 +11,6 @@
 - 支持多语言（中文/英文）
 - 完整的插件系统支持，包括远程组件动态加载
 
-## 模块联邦功能
-
-MoviePilot 现已支持模块联邦（Module Federation）功能，允许插件开发者创建可动态加载的远程组件，实现更丰富的插件用户界面。
-
-### 相关文档
-
-- [模块联邦开发指南](docs/module-federation-guide.md) - 如何开发远程组件插件
-- [模块联邦问题排查指南](docs/federation-troubleshooting.md) - 常见问题和解决方案
-- [插件远程组件示例](examples/plugin-component/) - 开发插件组件的完整示例项目 
 
 ## 开发部署
 
@@ -58,3 +49,12 @@ yarn build
 ```shell
 node dist/service.js
 ```
+
+
+### 模块联邦功能
+
+MoviePilot 现已支持模块联邦（Module Federation）功能，允许插件开发者创建可动态加载的远程组件，实现更丰富的插件用户界面。
+
+- [模块联邦开发指南](docs/module-federation-guide.md) - 如何开发远程组件插件
+- [模块联邦问题排查指南](docs/federation-troubleshooting.md) - 常见问题和解决方案
+- [插件远程组件示例](examples/plugin-component/) - 开发插件组件的完整示例项目 

README_EN.md

@@ -11,15 +11,6 @@ Frontend project for [MoviePilot](https://github.com/jxxghp/MoviePilot), NodeJS
 - Multi-language support (Chinese/English)
 - Complete plugin system with dynamic remote component loading
 
-## Module Federation
-
-MoviePilot now supports Module Federation, allowing plugin developers to create dynamically loadable remote components for richer plugin user interfaces.
-
-### Documentation
-
-- [Module Federation Troubleshooting Guide](docs/federation-troubleshooting.md) - Common issues and solutions
-- [Plugin Remote Component Example](examples/plugin-component/) - Complete example project for developing plugin components
-
 ## Development
 
 ### Recommended IDE Setup
@@ -57,3 +48,10 @@ yarn build
 ```shell
 node dist/service.js
 ``` 
+
+### Module Federation
+
+MoviePilot now supports Module Federation, allowing plugin developers to create dynamically loadable remote components for richer plugin user interfaces.
+
+- [Module Federation Troubleshooting Guide](docs/federation-troubleshooting.md) - Common issues and solutions
+- [Plugin Remote Component Example](examples/plugin-component/) - Complete example project for developing plugin components

docs/module-federation-guide.md

@@ -16,13 +16,17 @@ MoviePilot前端采用模块联邦(Module Federation)技术实现插件的动态
 
 ## 3. 核心概念
 
-每个插件需要提供三个标准组件：
+每个 Vue 联邦插件需要提供下列标准组件（`AppPage` 为可选，用于主界面侧栏全页入口）：
 
-| 组件名称 | 文件名 | 用途 |
-|---------|-------|------|
-| Page | Page.vue | 插件详情页面 |
-| Config | Config.vue | 插件配置页面 |
-| Dashboard | Dashboard.vue | 仪表板组件 |
+| 组件名称 | 暴露名 | 文件名 | 用途 |
+|---------|--------|--------|------|
+| Page | `./Page` | Page.vue | 插件管理中的详情弹窗 |
+| Config | `./Config` | Config.vue | 插件配置页面 |
+| Dashboard | `./Dashboard` | Dashboard.vue | 仪表盘小组件 |
+| AppPage | `./AppPage` | AppPage.vue | 主界面侧栏独立全页（主内容区由插件完全绘制） |
+| （可选） | `./AppPage{Xxx}` | 如 AppPageSettings.vue | 多 `nav_key` 时按名优先加载，见下文「多界面」 |
+
+主应用在侧栏全页路由中按 `nav_key` 解析暴露名（如 `AppPageSettings`），再回退 `AppPage` → `Page`；`nav_key` 为 `main` 时仅尝试 `AppPage` → `Page`。
 
 ## 4. 快速开始
 
@@ -56,6 +60,8 @@ export default defineConfig({
         './Page': './src/components/Page.vue',
         './Config': './src/components/Config.vue',
         './Dashboard': './src/components/Dashboard.vue',
+        './AppPage': './src/components/AppPage.vue',
+        './AppPageSettings': './src/components/AppPageSettings.vue',
       },
       shared: {
         vue: {
@@ -245,17 +251,110 @@ const props = defineProps({
 
 <template>
   <div class="dashboard-widget">
-    <!-- 仪表板内容 -->
-    <v-card>
-      <v-card-title>{{ config.title || '仪表板组件' }}</v-card-title>
-      <v-card-text>
-        <!-- 组件内容 -->
-      </v-card-text>
-    </v-card>
+    <v-hover>
+      <!-- 仪表板内容 -->
+      <template #default="{ isHovering, props: hoverProps }">
+        <v-card v-bind="hoverProps">
+          <v-card-title>{{ config.title || '仪表板组件' }}</v-card-title>
+          <v-card-text>
+            <!-- 组件内容 -->
+          </v-card-text>
+          <!-- 只在悬停时显示拖拽图标 -->
+          <div v-show="isHovering" class="absolute right-5 top-5">
+            <v-icon class="cursor-move">mdi-drag</v-icon>
+          </div>
+        </v-card>
+      </template>
+    </v-hover>
   </div>
 </template>
 ```
 
+### 5.4 AppPage 组件（侧栏全页）
+
+用于主应用左侧导航中的独立页面（路由 `#/plugin-app/:pluginId/:navKey?`），占据默认布局下的主内容区；与 `Page` 不同，不嵌在插件管理弹窗中。
+
+主应用传入的 props：
+
+| 属性 | 说明 |
+|------|------|
+| `api` | 与 `Page` 相同，用于 `bear` 认证的插件 HTTP 调用 |
+| `navKey` | 与侧栏声明的 `nav_key` 一致，同一插件多入口时用于区分 |
+| `pluginId` | 当前插件 ID |
+
+```vue
+<script setup lang="ts">
+const props = defineProps({
+  api: { type: Object, default: () => ({}) },
+  navKey: { type: String, default: 'main' },
+  pluginId: { type: String, default: '' },
+})
+const emit = defineEmits(['action'])
+</script>
+
+<template>
+  <div class="pa-4">
+    <div class="text-h6 mb-2">侧栏全页示例（{{ pluginId }} / {{ navKey }}）</div>
+    <v-btn size="small" @click="emit('action')">通知主应用</v-btn>
+  </div>
+</template>
+```
+
+#### 后端：注册侧栏入口
+
+插件需为 **Vue** 渲染模式（`get_render_mode` 返回 `vue`），并实现 `get_sidebar_nav`，返回列表项字段与主应用 `GET /api/v1/plugin/sidebar_nav` 一致：
+
+| 字段 | 说明 |
+|------|------|
+| `nav_key` | URL 路径段，唯一标识本入口（同一插件可多入口） |
+| `title` | 侧栏显示标题 |
+| `icon` | MDI 图标名，如 `mdi-rss` |
+| `section` | 分组：`start` / `discovery` / `subscribe` / `organize` / `system` |
+| `permission` | 可选：`subscribe` / `discovery` / `search` / `manage` / `admin`，与主应用菜单权限一致 |
+| `order` | 可选：同组内排序，数值越小越靠前 |
+
+```python
+def get_sidebar_nav(self) -> List[Dict[str, Any]]:
+    return [
+        {
+            "nav_key": "main",
+            "title": "示例订阅页",
+            "icon": "mdi-rss",
+            "section": "subscribe",
+            "permission": "subscribe",
+            "order": 10,
+        }
+    ]
+```
+
+#### 同一插件多个全页界面（多 `nav_key`）
+
+在 `get_sidebar_nav` 中**返回多条**记录，每条使用不同的 `nav_key` / `title` / `section` 等，侧栏与「更多」中会出现多个入口，路由形如 `#/plugin-app/<插件ID>/<nav_key>`。
+
+前端加载远程组件的顺序为：
+
+| `nav_key` | 依次尝试的联邦暴露名 |
+|-----------|----------------------|
+| `main` 或省略 | `./AppPage` → `./Page` |
+| 其它（如 `settings`、`my_tool`） | `./AppPage{PascalCase}` → `./AppPage` → `./Page` |
+
+`PascalCase` 规则：按 `-`、`_`、空格分段后首字母大写并拼接。例如 `nav_key=settings` → 先试 `./AppPageSettings`；`my_tool` → `./AppPageMyTool`。
+
+**两种实现方式（二选一或混用）：**
+
+1. **单文件分支**：只暴露 `./AppPage`，在组件内根据 `navKey` prop 用 `v-if` / `<component>` 切换子界面。  
+2. **多文件**：为某个入口单独暴露 `./AppPageSettings.vue` 等，主应用会优先加载对应模块，失败再回退到 `AppPage`。
+
+`vite.config` 多暴露示例：
+
+```typescript
+exposes: {
+  './AppPage': './src/components/AppPage.vue',
+  './AppPageSettings': './src/components/AppPageSettings.vue',
+  // ...
+}
+```
+
 ## 6. 构建和部署
 
 ### 构建项目

env.d.ts

@@ -4,8 +4,13 @@ declare module 'vue-router' {
   interface RouteMeta {
     action?: string
     subject?: string
+    keepAlive?: boolean
+    keepAliveKey?: string
     layoutWrapperClasses?: string
     navActiveLink?: RouteLocationRaw
+    requiresAuth?: boolean
+    subType?: string
+    hideFooter?: boolean
   }
 }
 

examples/plugin-component/README.md

@@ -1,6 +1,6 @@
 # MoviePilot 插件远程组件示例
 
-这是 MoviePilot 插件远程组件的示例项目，展示了如何正确配置和开发与主应用兼容的远程组件。本示例实现了三个标准组件：Page（详情页面）、Config（配置页面）和Dashboard（仪表板组件）。
+这是 MoviePilot 插件远程组件的示例项目，展示了如何正确配置和开发与主应用兼容的远程组件。本示例包含 Page、Config、Dashboard、AppPage，以及可选的 `AppPageSettings`（`nav_key=settings` 时由主应用优先加载，用于演示「一插件多全页界面」）。
 
 ## 1. 开发环境准备
 
@@ -28,7 +28,9 @@ plugin-component/
 │   ├── components/
 │   │   ├── Page.vue       # 插件详情页面组件
 │   │   ├── Config.vue     # 插件配置页面组件
-│   │   └── Dashboard.vue  # 插件仪表板组件
+│   │   ├── Dashboard.vue  # 插件仪表板组件
+│   │   ├── AppPage.vue    # 侧栏全页（主内容区，nav_key=main）
+│   │   └── AppPageSettings.vue  # 可选第二全页（nav_key=settings）
 │   ├── App.vue            # 本地开发入口组件
 │   └── main.js            # 本地开发入口文件
 ├── vite.config.js         # Vite和模块联邦配置

examples/plugin-component/src/components/AppPage.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+/**
+ * 侧栏全页：在主应用 #/plugin-app/:pluginId/:navKey 中渲染，占据主内容区。
+ * 需在插件后端实现 get_sidebar_nav 才会出现在侧栏。
+ */
+const props = defineProps({
+  api: {
+    type: Object,
+    default: () => ({}),
+  },
+  navKey: {
+    type: String,
+    default: 'main',
+  },
+  pluginId: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['action'])
+</script>
+
+<template>
+  <div class="plugin-app-page pa-4">
+    <div class="text-h6 mb-2">AppPage（侧栏全页）</div>
+    <div class="text-body-2 text-medium-emphasis mb-4">
+      pluginId: {{ pluginId }} · navKey: {{ navKey }}
+    </div>
+    <v-btn size="small" variant="tonal" @click="emit('action')">action</v-btn>
+  </div>
+</template>

examples/plugin-component/src/components/AppPageSettings.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+/**
+ * 示例：nav_key=settings 时主应用会优先加载 AppPageSettings，再回退 AppPage。
+ */
+const props = defineProps({
+  api: { type: Object, default: () => ({}) },
+  navKey: { type: String, default: 'settings' },
+  pluginId: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div class="pa-4">
+    <div class="text-subtitle-1">Settings 子界面（AppPageSettings）</div>
+    <div class="text-caption text-medium-emphasis">navKey={{ navKey }} · pluginId={{ pluginId }}</div>
+  </div>
+</template>

examples/plugin-component/vite.config.js

@@ -12,6 +12,8 @@ export default defineConfig({
         './Page': './src/components/Page.vue',
         './Config': './src/components/Config.vue',
         './Dashboard': './src/components/Dashboard.vue',
+        './AppPage': './src/components/AppPage.vue',
+        './AppPageSettings': './src/components/AppPageSettings.vue',
       },
       shared: {
         vue: {

index.html

@@ -1,273 +1,571 @@
 <!DOCTYPE html>
-<html
-  lang="en"
-  style="
-    overflow: hidden auto;
-    min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
-    background: var(--initial-loader-bg, #fff);
-  "
->
-  <head>
-    <meta http-equiv="pragma" content="no-cache" />
-    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
-    <meta http-equiv="expires" content="0" />
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width, user-scalable=no" />
-    <title>MoviePilot</title>
-    <meta name="Robots" content="noindex,nofollow,noarchive" />
-    <meta name="referrer" content="origin" />
-    <link rel="icon" type="image/png" href="/logo.png" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />
-    <link rel="apple-touch-startup-image" href="/splash/apple-splash.jpg" />
-    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <meta name="apple-mobile-web-app-title" content="MoviePilot" />
-    <meta name="description" content="MoviePilot" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="referrer" content="never" />
-    <meta name="msapplication-TileColor" content="#7D34FD" />
-    <meta name="color-scheme" content="light dark" />
-    <meta name="theme-color" content="#0E1116" media="(prefers-color-scheme: dark)" />
-    <meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)" />
-    <meta name="HandheldFriendly" content="True" />
-    <meta name="MobileOptimized" content="320" />
-    <link rel="stylesheet" type="text/css" href="/loader.css" />
-    <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)
-    </script>
-  </head>
+<html lang="zh-CN" data-launch-loading="true" style="
+    overflow: hidden;
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-top: env(safe-area-inset-top);
+    --initial-loader-bg: #0E1116;
+    --initial-loader-color: #9155FD;
+    --initial-loader-height: 100svh;
+    --initial-loader-width: 100vw;
+    --initial-color-scheme: dark;
+    background: var(--initial-loader-bg, #0E1116);
+    background-color: var(--initial-loader-bg, #0E1116);
+    color-scheme: dark;
+  ">
 
-  <body style="margin: 0">
-    <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"
-        >
-          <style>
-            /* 添加SVG内部的动画样式 */
-            @keyframes pulse {
-              0%,
-              100% {
-                opacity: 0.8;
-              }
+<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, interactive-widget=resizes-content" />
 
-              50% {
-                opacity: 1;
-              }
-            }
+  <!-- 防止缩放和选择，提供原生应用体验 -->
+  <meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
 
-            @keyframes glow {
-              0%,
-              100% {
-                filter: drop-shadow(0 0 3px rgba(141, 81, 249, 0.3));
-              }
+  <!-- 基础信息 -->
+  <meta name="description" content="MoviePilot - 智能影视媒体库管理工具" />
+  <meta name="author" content="MoviePilot" />
+  <meta name="keywords" content="MoviePilot,影视,媒体库,管理" />
 
-              50% {
-                filter: drop-shadow(0 0 6px rgba(141, 81, 249, 0.6));
-              }
-            }
+  <!-- 安全和隐私 -->
+  <meta name="Robots" content="noindex,nofollow,noarchive" />
+  <meta name="referrer" content="no-referrer" />
 
-            /* 为各个元素添加动画 */
-            #a2-c {
-              filter: drop-shadow(0 0 5px rgba(141, 81, 249, 0.3));
-              animation: glow 3s ease-in-out infinite;
-            }
+  <!-- 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" />
 
-            path {
-              animation: pulse 2s ease-in-out infinite;
-            }
+  <!-- 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" />
 
-            /* 错开不同元素的动画开始时间 */
-            g:nth-child(2) path {
-              animation-delay: 0.3s;
-            }
+  <!-- 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" />
 
-            g:nth-child(3) path {
-              animation-delay: 0.6s;
-            }
+  <!-- iOS Safari 防止自动识别 -->
+  <meta name="apple-mobile-web-app-orientations" content="portrait" />
 
-            g:nth-child(4) path {
-              animation-delay: 0.9s;
-            }
+  <!-- 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" />
 
-            g:nth-child(5) path {
-              animation-delay: 1.2s;
-            }
-          </style>
-          <g transform="matrix(1,0,0,1,-2606,-236)">
-            <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
-              <rect x="0" y="0" width="192" height="192" style="fill: none" />
-              <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">
-                  <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)">
-                    <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>
-          <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>
+  <!-- Microsoft Windows PWA -->
+  <meta name="msapplication-TileColor" content="#0E1116" />
+  <meta name="msapplication-TileImage" content="/android-chrome-192x192.png" />
+  <meta name="msapplication-config" content="none" />
+  <meta name="msapplication-tap-highlight" content="no" />
+  <meta name="msapplication-navbutton-color" content="#0E1116" />
+
+  <!-- 主题色彩 - 适配深色和浅色模式 -->
+  <meta name="theme-color" content="#0E1116" media="(prefers-color-scheme: dark)" />
+  <meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)" />
+  <meta name="color-scheme" content="dark light" />
+
+  <!-- 屏幕方向锁定 -->
+  <meta name="screen-orientation" content="portrait" />
+  <meta name="x5-orientation" content="portrait" />
+  <meta name="x5-fullscreen" content="true" />
+  <meta name="x5-page-mode" content="app" />
+
+  <!-- UC浏览器优化 -->
+  <meta name="browsermode" content="application" />
+  <meta name="wap-font-scale" content="no" />
+
+  <!-- 360浏览器优化 -->
+  <meta name="renderer" content="webkit" />
+
+  <!-- 触摸优化 -->
+  <meta name="HandheldFriendly" content="True" />
+  <meta name="MobileOptimized" content="320" />
+
+  <!-- 缓存控制 -->
+  <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 />
+
+  <style>
+    html,
+    body {
+      background: var(--initial-loader-bg, #0E1116);
+      background-color: var(--initial-loader-bg, #0E1116);
+      color-scheme: var(--initial-color-scheme, dark);
+    }
+
+    html[data-launch-loading="true"],
+    html[data-launch-loading="true"] body {
+      overflow: hidden;
+    }
+
+    html[data-launch-loading="true"] body {
+      min-block-size: var(--initial-loader-height, 100svh);
+    }
+
+    html[data-launch-loading="true"] #app {
+      min-block-size: var(--initial-loader-height, 100svh);
+      background: var(--initial-loader-bg, #0E1116);
+      background-color: var(--initial-loader-bg, #0E1116);
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: contain;
+    }
+
+    html[data-launch-loading="true"] .footer-nav-container {
+      opacity: 0 !important;
+      pointer-events: none !important;
+      visibility: hidden !important;
+    }
+
+    #loading-bg {
+      position: fixed;
+      inset: 0;
+      z-index: 99999;
+      display: block;
+      overflow: hidden;
+      background: var(--initial-loader-bg, #0E1116);
+      background-color: var(--initial-loader-bg, #0E1116);
+    }
+
+    .loading-shell {
+      box-sizing: border-box;
+      display: grid;
+      grid-template-rows: minmax(0, 1fr) auto;
+      block-size: var(--initial-loader-height, 100svh);
+      inline-size: 100%;
+      min-block-size: var(--initial-loader-height, 100svh);
+      transition: opacity 0.12s ease-out, transform 0.12s ease-out;
+      padding:
+        calc(env(safe-area-inset-top, 0px) + 24px)
+        24px
+        calc(env(safe-area-inset-bottom, 0px) + 48px);
+    }
+
+    .loading-main {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-block-size: 0;
+    }
+
+    .loading-logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: min(160px, 36vw);
+      transform: translate3d(0, 0, 0);
+      will-change: transform;
+    }
+
+    .loading-logo img {
+      display: block;
+      block-size: auto;
+      inline-size: 100%;
+    }
+
+    .loading-footer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-block-size: clamp(72px, 14vh, 120px);
+    }
+
+    .loading-complete .loading-shell,
+    .loading-complete #loading-timeout {
+      opacity: 0;
+      transform: translate3d(0, 6px, 0);
+    }
+
+    .loading {
+      position: relative;
+      box-sizing: border-box;
+      border: 3px solid transparent;
+      border-radius: 50%;
+      block-size: 46px;
+      inline-size: 46px;
+      transition: opacity 0.6s ease;
+    }
+
+    .loading-complete .loading {
+      opacity: 0;
+    }
+
+    .loading .effect-1,
+    .loading .effect-2,
+    .loading .effect-3 {
+      position: absolute;
+      box-sizing: border-box;
+      border: 3px solid transparent;
+      border-radius: 50%;
+      block-size: 100%;
+      border-inline-start: 3px solid var(--initial-loader-color, #eee);
+      inline-size: 100%;
+    }
+
+    .loading .effect-1 {
+      animation: rotate 1s ease infinite;
+    }
+
+    .loading .effect-2 {
+      animation: rotate-opacity 1s ease infinite 0.1s;
+    }
+
+    .loading .effect-3 {
+      animation: rotate-opacity 1s ease infinite 0.2s;
+    }
+
+    .loading .effects {
+      transition: all 0.3s ease;
+    }
+
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(1turn);
+      }
+    }
+
+    @keyframes rotate-opacity {
+      0% {
+        opacity: 0.1;
+        transform: rotate(0deg);
+      }
+
+      100% {
+        opacity: 1;
+        transform: rotate(1turn);
+      }
+    }
+
+    /* 超时通知样式 */
+    #loading-timeout {
+      position: absolute;
+      z-index: 2500;
+      display: none;
+      inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 24px);
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.8);
+      color: #fff;
+      padding: 12px 24px;
+      border-radius: 12px;
+      font-size: 14px;
+      font-family: sans-serif;
+      text-align: center;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+      max-inline-size: calc(100% - 32px);
+      white-space: normal;
+      backdrop-filter: blur(4px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    #timeout-btn {
+      color: var(--initial-loader-color, #9155FD);
+      text-decoration: none;
+      font-weight: bold;
+      margin-inline-start: 8px;
+      border-bottom: 1px solid var(--initial-loader-color, #9155FD);
+    }
+  </style>
+
+  <script>
+    // 检测系统主题是否为深色模式
+    function checkPrefersColorSchemeIsDark() {
+      try {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+      } catch (e) {
+        return false
+      }
+    }
+
+    function getLocalStorageValue(key) {
+      try {
+        return localStorage.getItem(key)
+      } catch (e) {
+        return null
+      }
+    }
+
+    // 根据当前主题提前确定启动屏色彩，避免 iOS PWA 从原生启动图切到网页时露出默认白底。
+    const launchThemePalettes = {
+      light: {
+        background: '#F4F5FA',
+        primary: '#9155FD',
+      },
+      dark: {
+        background: '#0E1116',
+        primary: '#6E66ED',
+      },
+      purple: {
+        background: '#28243D',
+        primary: '#9155FD',
+      },
+      transparent: {
+        background: '#1C1C1C',
+        primary: '#A370F7',
+      },
+    }
+
+    function getSavedThemePreference() {
+      return getLocalStorageValue('theme') || 'auto'
+    }
+
+    function resolveLaunchTheme(themePreference) {
+      if (themePreference === 'auto') {
+        return checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+      }
+
+      if (themePreference === 'default') {
+        return 'light'
+      }
+
+      return launchThemePalettes[themePreference] ? themePreference : 'light'
+    }
+
+    function getLaunchColorScheme(themeName) {
+      return ['dark', 'purple', 'transparent'].includes(themeName) ? 'dark' : 'light'
+    }
+
+    function setMetaContent(selector, content) {
+      document.querySelectorAll(selector).forEach(meta => {
+        meta.setAttribute('content', content)
+      })
+    }
+
+    function syncThemeColorMeta(themeColor) {
+      const metas = document.querySelectorAll('meta[name="theme-color"]')
+
+      if (metas.length) {
+        metas.forEach(meta => {
+          meta.setAttribute('content', themeColor)
+        })
+
+        return
+      }
+
+      const meta = document.createElement('meta')
+      meta.name = 'theme-color'
+      meta.content = themeColor
+      document.head.appendChild(meta)
+    }
+
+    function applyLaunchThemeChrome() {
+      const themePreference = getSavedThemePreference()
+      const resolvedLaunchTheme = resolveLaunchTheme(themePreference)
+      const colorScheme = getLaunchColorScheme(resolvedLaunchTheme)
+      const palette = launchThemePalettes[resolvedLaunchTheme] || launchThemePalettes.light
+
+      // auto 模式下系统明暗可能已变化，不能复用旧的启动背景缓存。
+      const storedLoaderColor = themePreference === 'auto' ? null : getLocalStorageValue('materio-initial-loader-bg')
+      const loaderColor = storedLoaderColor || palette.background
+      const primaryColor = getLocalStorageValue('materio-initial-loader-color') || palette.primary
+
+      document.documentElement.setAttribute('data-launch-theme', resolvedLaunchTheme)
+      document.documentElement.setAttribute('data-theme', resolvedLaunchTheme)
+      document.documentElement.setAttribute('data-theme-preference', themePreference)
+      document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
+      document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
+      document.documentElement.style.setProperty('--initial-color-scheme', colorScheme)
+      document.documentElement.style.backgroundColor = loaderColor
+      document.documentElement.style.colorScheme = colorScheme
+
+      if (document.body) {
+        document.body.setAttribute('data-theme', resolvedLaunchTheme)
+        document.body.setAttribute('data-theme-preference', themePreference)
+        document.body.style.backgroundColor = loaderColor
+        document.body.style.colorScheme = colorScheme
+      }
+
+      setMetaContent('meta[name="color-scheme"]', colorScheme === 'dark' ? 'dark light' : 'light dark')
+      syncThemeColorMeta(loaderColor)
+
+      return {
+        background: loaderColor,
+        colorScheme,
+        resolvedLaunchTheme,
+        themePreference,
+      }
+    }
+
+    // 在应用脚本接管前锁定一次启动层内容高度，避免 iOS 独立模式首次重算 safe area 时把 logo 顶下去。
+    function syncInitialViewport(force) {
+      const viewport = window.visualViewport
+      const nextHeight = Math.round(viewport?.height || window.innerHeight || document.documentElement.clientHeight || 0)
+      const nextWidth = Math.round(viewport?.width || window.innerWidth || document.documentElement.clientWidth || 0)
+      const currentHeight = parseInt(
+        document.documentElement.style.getPropertyValue('--initial-loader-height') || '0',
+        10,
+      )
+
+      if (!nextHeight || !nextWidth) {
+        return
+      }
+
+      if (!force && currentHeight && Math.abs(nextHeight - currentHeight) < 120) {
+        return
+      }
+
+      document.documentElement.style.setProperty('--initial-loader-height', `${nextHeight}px`)
+      document.documentElement.style.setProperty('--initial-loader-width', `${nextWidth}px`)
+    }
+
+    // 应用主题色彩
+    applyLaunchThemeChrome()
+    syncInitialViewport(true)
+
+    document.addEventListener('DOMContentLoaded', () => {
+      applyLaunchThemeChrome()
+    })
+
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        applyLaunchThemeChrome()
+      }
+    })
+
+    window.addEventListener('pageshow', () => {
+      applyLaunchThemeChrome()
+    })
+
+    window.addEventListener('focus', () => {
+      applyLaunchThemeChrome()
+    })
+
+    window.addEventListener('orientationchange', () => {
+      window.setTimeout(() => syncInitialViewport(true), 160)
+    })
+
+    try {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        applyLaunchThemeChrome()
+      })
+    } catch (e) {
+      // 老浏览器不支持监听系统主题变化时，运行时主题管理器仍会继续接管。
+    }
+
+    // 状态栏适配
+    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)
+
+    // 清除缓存处理逻辑
+    window.clearAndReload = async function() {
+      try {
+        // 1. 清除所有缓存
+        if ('caches' in window) {
+          const cacheNames = await caches.keys()
+          await Promise.all(cacheNames.map(name => caches.delete(name)))
+          console.log('[VersionChecker] 已清除所有缓存')
+        }
+        // 2. 注销 Service Worker
+        if ('serviceWorker' in navigator) {
+          const registrations = await navigator.serviceWorker.getRegistrations()
+          await Promise.all(registrations.map(registration => registration.unregister()))
+          console.log('[VersionChecker] 已注销所有 Service Worker')
+        }
+      } catch (e) {
+        console.error('[VersionChecker] 清除缓存时出错:', e)
+      } finally {
+        // 3. 重载页面
+        const url = new URL(window.location.href)
+        url.searchParams.set('_t', Date.now().toString())
+        window.location.replace(url.pathname + url.search + url.hash)
+      }
+    };
+
+    setTimeout(function() {
+      const timeoutEl = document.getElementById('loading-timeout');
+      if (timeoutEl) {
+        // 适配多语言
+        const lang = navigator.language || 'zh-CN';
+        const messages = {
+          'zh-CN': {
+            text: '页面加载似乎遇到了阻碍，请尝试',
+            btn: '清除缓存'
+          },
+          'zh-TW': {
+            text: '頁面載入似乎遇到了阻礙，請嘗試',
+            btn: '清除快取'
+          },
+          'en-US': {
+            text: 'Page loading seems to be blocked, please try',
+            btn: 'Clear Cache'
+          }
+        };
+        
+        // 默认匹配前缀，如 en-GB 匹配 en-US 的逻辑
+        let msg = messages['zh-CN'];
+        if (lang.startsWith('zh-TW') || lang.startsWith('zh-HK')) {
+          msg = messages['zh-TW'];
+        } else if (lang.startsWith('en')) {
+          msg = messages['en-US'];
+        }
+
+        const textNode = document.createTextNode(msg.text + ' ');
+        const btnLink = document.createElement('a');
+        btnLink.href = 'javascript:void(0)';
+        btnLink.id = 'timeout-btn';
+        btnLink.onclick = window.clearAndReload;
+        btnLink.textContent = msg.btn;
+        
+        timeoutEl.innerHTML = '';
+        timeoutEl.appendChild(textNode);
+        timeoutEl.appendChild(btnLink);
+        timeoutEl.style.display = 'block';
+      }
+    }, 15000); // 15秒后显示超时提示
+  </script>
+</head>
+
+<body style="margin: 0; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch">
+  <div id="loading-bg">
+    <div class="loading-shell">
+      <div class="loading-main">
+        <div class="loading-logo">
+          <!-- Logo -->
+          <img src="/logo.svg" alt="MoviePilot" width="160" height="160" />
+        </div>
       </div>
-      <div class="loading">
-        <div class="effect-1 effects"></div>
-        <div class="effect-2 effects"></div>
-        <div class="effect-3 effects"></div>
+      <div class="loading-footer">
+        <div class="loading">
+          <div class="effect-1 effects"></div>
+          <div class="effect-2 effects"></div>
+          <div class="effect-3 effects"></div>
+        </div>
       </div>
     </div>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+    <!-- 超时提示 - 默认隐藏 -->
+    <div id="loading-timeout"></div>
+  </div>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
 </html>

package.json

@@ -1,11 +1,12 @@
 {
   "name": "moviepilot",
-  "version": "2.5.7",
+  "version": "2.13.10",
   "private": true,
   "type": "module",
   "bin": "dist/service.js",
   "scripts": {
     "dev": "vite --host",
+    "prebuild": "npm run build:icons",
     "build": "vite build",
     "preview": "vite preview --port 5050",
     "typecheck": "vue-tsc --noEmit",
@@ -27,6 +28,7 @@
     "@fullcalendar/timegrid": "^6.1.15",
     "@fullcalendar/vue3": "^6.1.15",
     "@iconify/utils": "^2.2.1",
+    "@types/crypto-js": "^4.2.2",
     "@types/js-cookie": "^3.0.6",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.2",
@@ -40,23 +42,29 @@
     "ace-builds": "^1.37.4",
     "apexcharts": "^4.0.0",
     "axios": "^1.7.9",
+    "body-scroll-lock": "^3.1.5",
     "colorthief": "^2.6.0",
     "copy-to-clipboard": "^3.3.3",
+    "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",
     "express": "^4.21.2",
     "express-http-proxy": "^2.1.1",
+    "gridstack": "^12.6.0",
+    "http-proxy-middleware": "^3.0.0",
     "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
+    "markdown-it": "^14.1.0",
+    "markdown-it-link-attributes": "^4.0.1",
     "mousetrap": "^1.6.5",
     "nprogress": "^0.2.0",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.2.0",
-    "qrcode.vue": "^3.6.0",
+    "qrcode": "^1.5.4",
     "sass": "^1.83.4",
     "tailwindcss": "^ 3.4.17",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
-    "vue-toast-notification": "^3.1.3",
+    "vue-toastification": "^2.0.0-rc.5",
     "vue3-ace-editor": "^2.2.4",
     "vue3-apexcharts": "^1.8.0",
     "vue3-perfect-scrollbar": "^2.0.0",
@@ -65,16 +73,24 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
+    "@iconify-json/line-md": "^1.2.13",
+    "@iconify-json/lucide": "^1.2.85",
+    "@iconify-json/material-symbols": "^1.2.51",
     "@iconify-json/mdi": "^1.1.52",
+    "@iconify-json/tabler": "^1.2.23",
     "@iconify/tools": "^4.0.4",
     "@iconify/vue": "^4.3.0",
     "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@originjs/vite-plugin-federation": "^1.4.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
+    "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it-link-attributes": "^3.0.5",
     "@types/mousetrap": "^1.6.15",
     "@types/node": "^20.1.4",
     "@types/nprogress": "^0.2.3",
+    "@types/qrcode": "^1.5.6",
     "@types/webfontloader": "^1.6.34",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
@@ -104,6 +120,7 @@
     "vite": "^5.4.11",
     "vite-plugin-pages": "^0.32.1",
     "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-top-level-await": "^1.5.0",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-plugin-vuetify": "2.0.4",
     "vue-shepherd": "^4.1.0",
@@ -112,4 +129,4 @@
     "workbox-window": "^7.3.0"
   },
   "packageManager": "yarn@1.22.18"
-}
+}

public/loader.css

@@ -1,97 +0,0 @@
-#loading-bg {
-  position: fixed;
-  z-index: 9999;
-  display: block;
-  background: var(--initial-loader-bg, #fff);
-  block-size: 100vh;
-  inline-size: 100vw;
-  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
-}
-
-.loading-logo {
-  position: absolute;
-  inset-block-start: 35%;
-  inset-inline-start: calc(50% - 5rem);
-  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
-}
-
-/* 添加logo完成动画 - 放大虚化效果 */
-.loading-complete .loading-logo {
-  filter: blur(10px);
-  opacity: 0;
-  transform: scale(1.5);
-}
-
-/* 添加加载背景消失动画 - 放大虚化效果 */
-.loading-complete {
-  filter: blur(15px);
-  opacity: 0;
-  transform: scale(1.2);
-}
-
-.loading {
-  position: absolute;
-  box-sizing: border-box;
-  border: 3px solid transparent;
-  border-radius: 50%;
-  block-size: 55px;
-  inline-size: 55px;
-  inset-block-start: 80%;
-  inset-inline-start: calc(50% - 27.5px);
-  transition: opacity 0.6s ease;
-}
-
-/* 完成时隐藏加载动画 */
-.loading-complete .loading {
-  opacity: 0;
-}
-
-.loading .effect-1,
-.loading .effect-2,
-.loading .effect-3 {
-  position: absolute;
-  box-sizing: border-box;
-  border: 3px solid transparent;
-  border-radius: 50%;
-  block-size: 100%;
-  border-inline-start: 3px solid var(--initial-loader-color, #eee);
-  inline-size: 100%;
-}
-
-.loading .effect-1 {
-  animation: rotate 1s ease infinite;
-}
-
-.loading .effect-2 {
-  animation: rotate-opacity 1s ease infinite 0.1s;
-}
-
-.loading .effect-3 {
-  animation: rotate-opacity 1s ease infinite 0.2s;
-}
-
-.loading .effects {
-  transition: all 0.3s ease;
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(1turn);
-  }
-}
-
-@keyframes rotate-opacity {
-  0% {
-    opacity: 0.1;
-    transform: rotate(0deg);
-  }
-
-  100% {
-    opacity: 1;
-    transform: rotate(1turn);
-  }
-}

public/logo.svg

@@ -0,0 +1,53 @@
+<svg width="3em" height="3em"  viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" 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">
+                    <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)">
+                        <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>
+    <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>

public/nginx.conf

@@ -49,7 +49,7 @@ http {
             root html;
         }
 
-        location ~ ^/api/v1/system/(message|progress/) {
+        location ~ ^/api/v1/(system/(message|progress/|logging)|search/.*/stream$) {
             # SSE MIME类型设置
             default_type text/event-stream;
 

public/offline.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <title>MoviePilot - 离线</title>
+  <link rel="icon" href="/favicon.ico">
+  <style>
+    :root {
+      --primary-color: #9155FD;
+      --surface-color: #FFFFFF;
+      --text-color: #333333;
+      --border-color: rgba(0, 0, 0, 0.12);
+    }
+    
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --surface-color: #0E1116;
+        --text-color: #FFFFFF;
+        --border-color: rgba(255, 255, 255, 0.12);
+      }
+    }
+    
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      background-color: var(--surface-color);
+      color: var(--text-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      padding: 20px;
+    }
+    
+    .offline-container {
+      text-align: center;
+      max-width: 400px;
+      width: 100%;
+      padding: 40px;
+      background: var(--surface-color);
+      border-radius: 24px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border-color);
+    }
+    
+    .icon-wrapper {
+      width: 120px;
+      height: 120px;
+      margin: 0 auto 32px;
+      background: rgba(145, 85, 253, 0.1);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .icon {
+      width: 64px;
+      height: 64px;
+      fill: var(--primary-color);
+    }
+    
+    h1 {
+      font-size: 2rem;
+      margin-bottom: 16px;
+      font-weight: 600;
+    }
+    
+    p {
+      font-size: 1.1rem;
+      line-height: 1.6;
+      opacity: 0.7;
+      margin-bottom: 32px;
+    }
+    
+    .retry-button {
+      background: var(--primary-color);
+      color: white;
+      border: none;
+      padding: 12px 32px;
+      font-size: 1rem;
+      border-radius: 8px;
+      cursor: pointer;
+      font-weight: 500;
+      transition: opacity 0.2s;
+    }
+    
+    .retry-button:hover {
+      opacity: 0.9;
+    }
+    
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 24px;
+      padding: 8px 16px;
+      background: rgba(145, 85, 253, 0.1);
+      border-radius: 20px;
+      font-size: 0.875rem;
+    }
+    
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      background: #EF5350;
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    }
+    
+    @keyframes pulse {
+      0% { opacity: 1; }
+      50% { opacity: 0.5; }
+      100% { opacity: 1; }
+    }
+  </style>
+</head>
+<body>
+  <div class="offline-container">
+    <div class="icon-wrapper">
+      <svg class="icon" viewBox="0 0 24 24">
+        <path d="M12,2.03C17.73,2.5 22,7.08 22,12.75C22,13.84 21.79,14.89 21.4,15.86L19.53,14C19.5,13.83 19.5,13.67 19.5,13.5A2.5,2.5 0 0,0 17,11A2.5,2.5 0 0,0 14.5,13.5A2.5,2.5 0 0,0 17,16A2.5,2.5 0 0,0 19.5,13.5C19.5,13.67 19.5,13.83 19.53,14L21.4,15.86C20.04,19.09 16.9,21.47 13.19,21.97L11.75,20.53C11.83,20.5 11.92,20.5 12,20.5A2.5,2.5 0 0,0 14.5,18A2.5,2.5 0 0,0 12,15.5A2.5,2.5 0 0,0 9.5,18C9.5,18.08 9.5,18.17 9.53,18.25L7.66,16.38C7.25,15.96 6.86,15.5 6.5,15H8.17C8.06,14.7 8,14.35 8,14A3,3 0 0,1 11,11A3,3 0 0,1 14,14C14,14.35 13.94,14.7 13.83,15H15.5C15.14,15.5 14.75,15.96 14.34,16.38L12.47,14.5C12.5,14.42 12.5,14.33 12.47,14.25L10.6,12.38C10.18,11.97 9.72,11.59 9.23,11.25L7.36,9.38C6.94,8.96 6.5,8.61 6,8.31V6.64L4.14,4.78C3.6,5.55 3.17,6.4 2.86,7.31L1,5.45V4.46L2.05,3.41C2.5,2.86 3.05,2.41 3.66,2.06L20,18.4L18.73,19.67L12.47,13.41L11.75,20.53C11.83,20.5 11.92,20.5 12,20.5A2.5,2.5 0 0,0 14.5,18A2.5,2.5 0 0,0 12,15.5A2.5,2.5 0 0,0 9.5,18C9.5,18.08 9.5,18.17 9.53,18.25L7.66,16.38C7.25,15.96 6.86,15.5 6.5,15H8.17C8.06,14.7 8,14.35 8,14A3,3 0 0,1 11,11A3,3 0 0,1 14,14C14,14.35 13.94,14.7 13.83,15H15.5C15.14,15.5 14.75,15.96 14.34,16.38L2.46,4.5C3.5,3.17 4.9,2.15 6.5,1.58V3.25C5.43,3.7 4.47,4.33 3.66,5.11L2.61,6.16V8.03C3.16,7.33 3.82,6.73 4.57,6.25V8.31C3.57,9.14 2.75,10.19 2.21,11.39L1,10.18V8.65C1.5,6.16 3.03,4.03 5.11,2.71L6.39,4C8.97,2.73 12.03,2.24 14.97,3.03L16.84,4.9C18.17,5.86 19.25,7.16 19.94,8.68L18.07,6.81C17.07,5.5 15.66,4.5 14,4.04V5.71C15.93,6.17 17.5,7.53 18.33,9.3L16.46,7.43C15.46,6.61 14.2,6.08 12.82,6V7.67C13.69,7.79 14.47,8.11 15.14,8.58L13.27,6.71C12.94,6.66 12.6,6.63 12.25,6.63L10.38,4.76C10.87,4.66 11.37,4.59 11.88,4.56L10,2.68C10.66,2.56 11.33,2.5 12,2.5V2.03Z" />
+      </svg>
+    </div>
+    
+    <h1>您当前处于离线状态</h1>
+    <p>无法连接到 MoviePilot 服务器。请检查您的网络连接后重试。</p>
+    
+    <button class="retry-button" onclick="window.location.reload()">
+      重新加载
+    </button>
+    
+    <div class="status-badge">
+      <span class="status-dot"></span>
+      <span>离线状态</span>
+    </div>
+  </div>
+  
+  <script>
+    // 监听网络状态变化
+    window.addEventListener('online', function() {
+      window.location.reload();
+    });
+    
+    // Service Worker 消息处理
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.addEventListener('message', function(event) {
+        if (event.data && event.data.type === 'OFFLINE_STATUS' && !event.data.offline) {
+          window.location.reload();
+        }
+      });
+    }
+  </script>
+</body>
+</html>

scripts/check-season-label.ts

@@ -0,0 +1,12 @@
+import assert from 'node:assert/strict'
+
+import { formatSeasonLabel } from '../src/@core/utils/season.ts'
+
+assert.equal(formatSeasonLabel(0, '特别篇'), '特别篇')
+assert.equal(formatSeasonLabel('0', 'Specials'), 'Specials')
+assert.equal(formatSeasonLabel(1, '特别篇'), 'S01')
+assert.equal(formatSeasonLabel('12', '特别篇'), 'S12')
+assert.equal(formatSeasonLabel(null, '特别篇'), '')
+assert.equal(formatSeasonLabel(undefined, '特别篇'), '')
+
+console.log('season label checks passed')

shims.d.ts

@@ -12,3 +12,4 @@ declare module 'vue-prism-component' {
   export default component
 }
 declare module 'vue-shepherd';
+declare module 'colorthief';

src/@core/components/DialogCloseBtn.vue

@@ -15,7 +15,7 @@ function onClick() {
 
 <template>
   <IconBtn
-    :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3'"
+    :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3 z-10'"
     @click.stop="onClick"
   >
     <VIcon icon="mdi-close" />

src/@core/components/PageContentTitle.vue

@@ -5,7 +5,7 @@ defineProps({
 })
 </script>
 <template>
-  <div v-if="title" class="my-3 md:flex md:items-center md:justify-between">
+  <div v-if="title" class="my-3 mx-3 md:flex md:items-center md:justify-between">
     <div class="min-w-0 flex-1 mx-0">
       <h2
         class="ms-1 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"

src/@core/components/ScrollToTopBtn.vue

@@ -51,8 +51,8 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   gap: 16px;
-  inset-block-end: 30px;
-  inset-inline-end: 30px;
+  inset-block-end: 2rem;
+  inset-inline-end: 2rem;
 }
 
 .global-action-button {

src/@core/scss/_components.scss

@@ -3,6 +3,30 @@
 @use "@layouts/styles/_placeholders";
 @use "@configured-variables" as variables;
 
+// 👉 Alert
+.v-alert {
+  .v-alert__close {
+    .v-icon {
+      block-size: 20px !important;
+      font-size: 20px !important;
+      inline-size: 20px !important;
+    }
+  }
+
+  &:not(.v-alert--prominent) .v-alert__prepend {
+    .v-icon {
+      block-size: 1.375rem !important;
+      font-size: 1.375rem !important;
+      inline-size: 1.375rem !important;
+    }
+  }
+
+  .v-alert-title {
+    line-height: 1.5rem;
+    margin-block-end: 0.25rem;
+  }
+}
+
 // 👉 Avatar font-size
 .v-avatar {
   @include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
@@ -33,6 +57,23 @@
   }
 }
 
+// 👉 Button
+.v-btn {
+  /* stylelint-disable-next-line no-descending-specificity */
+  &:not(.v-btn--icon) .v-icon {
+    --v-icon-size-multiplier: 0.9525 !important;
+  }
+}
+
+// 👉 Chip
+.v-chip.v-chip--size-default .v-avatar {
+  --v-avatar-height: 24px;
+}
+
+.v-chip.v-chip--density-comfortable {
+  line-height: 1;
+}
+
 // Dialog responsive width
 .v-dialog {
   .v-card {
@@ -40,7 +81,7 @@
   }
 }
 
-@media (min-width: 576px) {
+@media (width >= 576px) {
   .v-dialog {
     &.v-dialog-sm,
     &.v-dialog-lg,
@@ -50,7 +91,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (width >= 992px) {
   .v-dialog {
     &.v-dialog-lg,
     &.v-dialog-xl {
@@ -59,18 +100,32 @@
   }
 }
 
-@media (min-width: 1200px) {
+@media (width >= 1200px) {
   .v-dialog.v-dialog-xl,
   .v-dialog.v-dialog-xl .v-overlay__content > .v-card {
     inline-size: 1165px !important;
   }
 }
 
-// v-tab with pill support
+// 👉 Expansion Panel
+.v-expansion-panel {
+  .v-expansion-panel-text {
+    font-size: 1rem;
+  }
+}
 
+// 👉 Tooltip
+.v-tooltip > .v-overlay__content {
+  font-weight: 500;
+  line-height: 0.875rem;
+}
+
+// 👉 List
+
+//  👉 Tab with pill support
 .v-tabs.v-tabs-pill {
   .v-tab.v-btn {
-    border-radius: 0.375rem !important;
+    border-radius: 6px !important;
     min-inline-size: 8.125rem;
     transition: none;
 
@@ -94,7 +149,7 @@
   }
 }
 
-// 👉 added box shadow
+// 👉 Timeline added box shadow
 .v-timeline-item {
   .v-timeline-divider__dot {
     .v-timeline-divider__inner-dot {
@@ -160,7 +215,6 @@
 }
 
 // 👉 Slider
-
 .v-slider.v-input--horizontal .v-slider-track__fill {
   block-size: var(--v-slider-track-size);
 }
@@ -171,7 +225,19 @@
 
 .v-slider-thumb {
   .v-slider-thumb__label {
+    background: rgb(117, 117, 117);
     color: rgb(var(--v-theme-on-primary));
+
+    &::before {
+      color: rgb(117, 117, 117);
+    }
+  }
+}
+
+// 👉 Switch
+.v-switch {
+  .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
+    color: #fff;
   }
 }
 
@@ -179,5 +245,45 @@
 .v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
 .v-table--density-default > .v-table__wrapper > table > thead > tr > td,
 .v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
-  block-size: 50px;
+  block-size: 50px !important;
+}
+
+.v-table {
+  --v-table-header-height: 54px !important;
+
+  th {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+    font-size: 0.75rem;
+
+    .v-data-table-header__content {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .v-selection-control {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
+    font-size: 1rem;
+  }
+}
+
+.v-data-table {
+  th {
+    background: rgb(var(--v-table-header-background)) !important;
+  }
+}
+
+// 👉 Pagination
+.v-pagination {
+  .v-btn {
+    border-radius: 4px;
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 14px;
+    font-weight: 400;
+  }
+}
+
+// 👉 SnackBar
+.v-snackbar--variant-elevated {
+  @include mixins.elevation(6);
 }

src/@core/scss/_default-layout-w-vertical-nav.scss

@@ -1,7 +1,7 @@
 @use "@configured-variables" as variables;
 @use "placeholders" as *;
 @use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
-@use "../misc";
+@use "misc";
 @use "mixins";
 
 $header: ".layout-navbar";
@@ -16,25 +16,43 @@ $header: ".layout-navbar";
   @if variables.$vertical-nav-navbar-style == "elevated" {
     // Add transition
     #{$header} {
-      transition: padding 0.2s ease, background-color 0.18s ease;
+      transition: padding 0.2s ease;
     }
 
     // If navbar is contained => Add border radius to header
     @if variables.$layout-vertical-nav-navbar-is-contained {
-      #{$header} {
-        border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
-      }
+      // #{$header} {
+        // border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      // }
     }
 
     // Scrolled styles for sticky navbar
     @at-root {
-      /* ℹ️ This html selector with not selector is required when:
-        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
+      /* ℹ️ Only apply scrolled styles when window is actually scrolled,
+        not when dialog is opened without scroll
     */
-      html.v-overlay-scroll-blocked .layout-navbar-fixed,
       &.window-scrolled.layout-navbar-fixed {
 
         #{$header} {
+          padding-inline: 1rem;
+
+          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
+          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+        }
+
+        .navbar-blur#{$header} {
+          @extend %blurry-bg;
+        }
+      }
+
+      /* ℹ️ Ensure header styles are preserved when dialog is opened,
+        but only if window was scrolled before dialog opened
+    */
+      html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed {
+
+        #{$header} {
+          padding-inline: 1rem;
+
           @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
           @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
         }

src/@core/scss/_default-layout.scss

@@ -1,5 +1,5 @@
-@use "@core/scss/placeholders";
-@use "@core/scss/variables" as core-vars;
+@use "placeholders";
+@use "variables" as core-vars;
 
 .layout-navbar {
   @if core-vars.$navbar-high-emphasis-text {

src/@core/scss/_misc.scss

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

src/@core/scss/_mixins.scss

@@ -1,4 +1,6 @@
-@use "vuetify/lib/styles/settings" as vuetify_settings;
+@use "sass:map";
+@use "vuetify/lib/styles/settings/_index.sass" as vuetify_settings;
+@use "@styles/variables/_vuetify.scss" as vuetify;
 
 @mixin themed($property, $light-value, $dark-value) {
   @at-root {
@@ -17,11 +19,12 @@
 // ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
 @mixin before-pseudo() {
   position: relative;
+
   &::before {
     position: absolute;
+    border-radius: inherit;
     background: currentcolor;
     block-size: 100%;
-    border-radius: inherit;
     content: "";
     inline-size: 100%;
     inset: 0;
@@ -43,8 +46,8 @@
 
     &::before {
       position: absolute;
-      background-color: currentcolor;
       border-radius: inherit;
+      background-color: currentcolor;
       content: "";
       inset: 0;
       opacity: $opacity;
@@ -56,10 +59,81 @@
 @mixin avatar-font-sizes($map: $avatar-sizes) {
   @each $sizeName, $multiplier in vuetify_settings.$size-scales {
     /* stylelint-disable-next-line scss/no-global-function-names */
-    $size: map-get($map, $sizeName);
+    $size: map.get($map, $sizeName);
 
     &.v-avatar--size-#{$sizeName} {
       font-size: #{$size}px;
     }
   }
 }
+
+@mixin elevation($z, $important: false) {
+  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
+}
+
+@mixin bordered-skin($component, $border-property: "border", $important: false) {
+  #{$component} {
+    box-shadow: none !important;
+    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
+  }
+}
+
+@mixin selected-states($selector) {
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:hover
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:focus-visible
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      #{$selector} {
+        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+      }
+    }
+  }
+}
+
+@mixin push-anchors() {
+  :target {
+    scroll-margin-block-start: 90px;
+  }
+}
+
+@mixin xs {
+  @media (width >= 0) and (width <= 599.98px) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media (width >= 600px) and (width <= 959.98px) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media (width >= 960px) and (width <= 1279.98px) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media (width >= 1280px) and (width <= 1919.98px) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media (width >= 1920px) {
+    @content;
+  }
+}

src/@core/scss/_utilities.scss

@@ -1,73 +1,25 @@
-@use "@configured-variables" as variables;
-
-// 👉 Demo spacers
-// TODO: Use vuetify SCSS variable here
-$card-spacer-content: 16px;
-
-.demo-space-x {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-block-start: -$card-spacer-content;
-
-  & > * {
-    margin-block-start: $card-spacer-content;
-    margin-inline-end: $card-spacer-content;
-  }
-}
-
-.demo-space-y {
-  & > * {
-    margin-block-end: $card-spacer-content;
-
-    &:last-child {
-      margin-block-end: 0;
-    }
-  }
-}
-
-// 👉 Card match height
-.match-height.v-row {
-  .v-card {
-    block-size: 100%;
-  }
-}
-
-// 👉 Whitespace
-.whitespace-no-wrap {
-  white-space: nowrap;
-}
-
-// 👉 Colors
-
-/*
-  ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
-  Moreover, we also use this class in some places
-
-  ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
-
-  ℹ️ We also need !important to get correct color in badge icon
-*/
-.text-white {
-  color: #fff !important;
-}
-
 .bg-var-theme-background {
   background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
 }
 
-// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
-@each $color-name in variables.$theme-colors-name {
-  .bg-light-#{$color-name} {
-    background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
+// 👉 Pagination small-select dropdown for table
+// TODO: remove this class after vuetify datatable implememtation
+
+.per-page-select {
+  margin-block: auto;
+
+  .v-field__input {
+    align-items: center;
+    padding: 2px;
+    font-size: 14px;
+  }
+
+  .v-field__append-inner {
+    align-items: center;
+    padding: 0;
+
+    .v-icon {
+      margin-inline-start: 0 !important;
+    }
   }
 }
-
-// 👉 Typography
-.font-weight-semibold {
-  font-weight: 600 !important;
-}
-
-.leading-normal {
-  line-height: normal !important;
-}

src/@core/scss/_variables.scss

@@ -9,20 +9,53 @@
     - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
 */
 @use "sass:map";
-
-// 使用模板中的变量，不再进行配置 
-@use "@layouts/styles/variables" as layouts-vars;
 @use "utils";
+@use "vuetify/lib/styles/tools/functions" as *;
 
-// 👉 Default layout
+// 合并两个文件中的@forward配置
+@forward "@layouts/styles/variables" with (
+  // 来自_variables.scss的配置
+  $layout-vertical-nav-collapsed-width: 68px !default,
+  
+  // 来自template/_variables.scss的配置
+  $layout-vertical-nav-z-index: 1004,
+  $layout-overlay-z-index: 1003
+);
 
-$navbar-high-emphasis-text: true !default;
+// 使用命名空间来避免变量冲突
+@use "@layouts/styles/variables" as layouts-vars;
 
-// 移除@forward配置，已合并到template/_variables.scss
-// @forward "@layouts/styles/variables" with (
-//   $layout-vertical-nav-collapsed-width: 68px !default,
-// );
-// @use "@layouts/styles/variables" as *;
+$vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
+
+// ℹ️ We created this SCSS var to extract the start padding
+// Docs: https://sass-lang.com/documentation/modules/string
+// $vertical-nav-horizontal-padding => 0 8px;
+// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
+//   string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
+// string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
+
+$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-custom) !default;
+$vertical-nav-items-icon-margin-inline-end: 0.625rem !default;
+
+// Vertical Nav Configuration
+$vertical-nav-collapsed-width: 68px !default;
+
+// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
+// This is used by nav items & nav header
+$vertical-nav-horizontal-spacing: 0 1.125rem !default;
+$vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default;
+
+// Vertical nav header padding
+$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
+
+// 👉 Custom Variables
+$avatar-font-sizes: (
+  "x-small":12,
+  "small":14,
+  "default":18,
+  "large":20,
+  "x-large":24
+) !default;
 
 $theme-colors-name: (
   "primary",
@@ -41,31 +74,16 @@ $default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
 $vertical-nav-background-color-rgb: var(--v-theme-background) !default;
 $vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
 
-// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
-// This is used by nav items & nav header
-$vertical-nav-horizontal-spacing: 0 1.125rem !default;
-$vertical-nav-horizontal-padding: 1.375rem 1rem !default;
-
-/*
-  ℹ️ We created this SCSS var to extract the start padding
-  Docs: https://sass-lang.com/documentation/modules/string
-  $vertical-nav-horizontal-padding => 0 8px;
-  string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
-    string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
-  string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
-*/
-$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding);
-
 // Vertical nav header height. Mostly we will align it with navbar height;
 $vertical-nav-header-height: layouts-vars.$layout-vertical-nav-navbar-height !default;
-$vertical-nav-navbar-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
+$vertical-nav-navbar-elevation: 3 !default;
+$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
+$vertical-nav-floating-navbar-top: 1rem !default;
 
-// Vertical nav header padding
-$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
 $vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
 
 // Move logo when vertical nav is mini (collapsed but not hovered)
-$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px;
+$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
 
 // Space between logo and title
 $vertical-nav-header-logo-title-spacing: 0.9rem !default;
@@ -77,22 +95,130 @@ $vertical-nav-section-title-mt: 1.5rem !default;
 $vertical-nav-section-title-mb: 0.5rem !default;
 
 // Vertical nav icons
-$vertical-nav-items-icon-size: 1.5rem;
-$vertical-nav-items-icon-margin-inline-end: 0.625rem;
+$vertical-nav-items-icon-size: 1.5rem !default;
+$vertical-nav-items-nested-icon-size: 0.9rem !default;
+
+// Transition duration for nav group arrow
+$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
+
+// Timing function for nav group arrow
+$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
+
+// 👉 Horizontal nav
+
+/*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+*/
+$horizontal-nav-padding: 0.6875rem !default;
+
+// Gap between top level horizontal nav items
+$horizontal-nav-top-level-items-gap: 4px !default;
+
+// Horizontal nav icons
+$horizontal-nav-items-icon-size: 1.5rem !default;
+$horizontal-nav-third-level-icon-size: 0.9rem !default;
+$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
+
+// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
+// 120px is combined height of navbar & horizontal nav
+$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
+
+// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
+$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
 
 // 👉 Plugins
 
-$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35);
+$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
 
-// 👉 Custom Variables
-$avatar-font-sizes: () !default;
-$avatar-font-sizes: map.deep-merge(
+// 👉 Vuetify
+
+// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
+$vuetify-reduce-default-compact-button-icon-size: true !default;
+
+// 👉 Custom variables
+// for utility classes
+$font-sizes: () !default;
+$font-sizes: map-deep-merge(
   (
-    "x-small":12,
-    "small":14,
-    "default":18,
-    "large":20,
-    "x-large":24
+    "xs": 0.75rem,
+    "sm": 0.875rem,
+    "base": 1rem,
+    "lg": 1.125rem,
+    "xl": 1.25rem,
+    "2xl": 1.5rem,
+    "3xl": 1.875rem,
+    "4xl": 2.25rem,
+    "5xl": 3rem,
+    "6xl": 3.75rem,
+    "7xl": 4.5rem,
+    "8xl": 6rem,
+    "9xl": 8rem
   ),
-  $avatar-font-sizes
+  $font-sizes
 );
+
+// line height
+$font-line-height: () !default;
+$font-line-height: map-deep-merge(
+  (
+    "xs": 1rem,
+    "sm": 1.25rem,
+    "base": 1.5rem,
+    "lg": 1.75rem,
+    "xl": 1.75rem,
+    "2xl": 2rem,
+    "3xl": 2.25rem,
+    "4xl": 2.5rem,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1
+  ),
+  $font-line-height
+);
+
+// gap utility class
+$gap: () !default;
+$gap: map-deep-merge(
+  (
+    "0": 0,
+    "1": 0.25rem,
+    "2": 0.5rem,
+    "3": 0.75rem,
+    "4": 1rem,
+    "5": 1.25rem,
+    "6":1.5rem,
+    "7": 1.75rem,
+    "8": 2rem,
+    "9": 2.25rem,
+    "10": 2.5rem,
+    "11": 2.75rem,
+    "12": 3rem,
+    "14": 3.5rem,
+    "16": 4rem,
+    "20": 5rem,
+    "24": 6rem,
+    "28": 7rem,
+    "32": 8rem,
+    "36": 9rem,
+    "40": 10rem,
+    "44": 11rem,
+    "48": 12rem,
+    "52": 13rem,
+    "56": 14rem,
+    "60": 15rem,
+    "64": 16rem,
+    "72": 18rem,
+    "80": 20rem,
+    "96": 24rem
+  ),
+  $gap
+);
+
+// 👉 Default layout
+
+$navbar-high-emphasis-text: true !default;

src/@core/scss/_vertical-nav.scss

@@ -1,6 +1,6 @@
 @use "./placeholders";
 @use "@configured-variables" as variables;
-@use "@core/scss/mixins" as mixins;
+@use "./mixins" as mixins;
 @use "vuetify/lib/styles/tools/states" as vuetifyStates;
 @use "vuetify/lib/styles/tools/elevation" as elevation;
 

src/@core/scss/index.scss

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

src/@core/scss/libs/apex-chart.scss

@@ -1,67 +1,88 @@
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
+@use "@configured-variables" as variables;
+@use "../mixins";
 
+// 👉 Apex chart
 .apexcharts-canvas {
-  &line[stroke="transparent"] {
-    display: "none";
+  // For RTL alignment
+  .apexcharts-yaxis-texts-g {
+    text-align: start;
   }
 
+  // Tooltip
   .apexcharts-tooltip {
-    @include mixins_elevation.elevation(3);
-
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    background: rgb(var(--v-theme-surface));
+    line-height: 1.5;
 
     .apexcharts-tooltip-title {
       border-color: rgba(var(--v-border-color), var(--v-border-opacity));
       background: rgb(var(--v-theme-surface));
+      font-weight: 500;
+      margin-block-end: 0.25rem;
+      padding-inline: 1rem;
+    }
+
+    .apexcharts-tooltip-text {
+      display: flex;
+      align-items: center;
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+      font-size: inherit;
+      gap: 0.5rem;
+      line-height: inherit;
+    }
+
+    .apexcharts-tooltip-text-label,
+    .apexcharts-tooltip-text-value {
       font-weight: 600;
+      line-height: 1.5;
+    }
+    
+    .apexcharts-tooltip-series-group {
+      padding-block: 0 0.5rem;
+      padding-inline: 1rem;
+
+      &:last-child {
+        padding-block-end: 1rem;
+      }
+
+      &.active {
+        padding-block-start: 0;
+      }
     }
 
     &.apexcharts-theme-light {
-      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-    }
-
-    &.apexcharts-theme-dark {
-      color: white;
-    }
-
-    .apexcharts-tooltip-series-group:first-of-type {
-      padding-block-end: 0;
+      border-color: rgb(var(--v-border-color));
+      background: rgb(var(--v-theme-surface));
+      box-shadow: none;
+      
+      .apexcharts-tooltip-text-label,
+      .apexcharts-tooltip-text-value {
+        color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+      }
     }
   }
 
-  .apexcharts-xaxistooltip {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    background: rgb(var(--v-theme-grey-50));
-    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-
-    &::after {
-      border-block-end-color: rgb(var(--v-theme-grey-50));
-    }
-
-    &::before {
-      border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    }
+  .apexcharts-marker {
+    transition: none;
   }
 
+  // 👉 stroke-dasharray
+  .apexcharts-radialbar,
+  .apexcharts-radialbar-slice-current {
+    stroke-linecap: round;
+  }
+
+  .apexcharts-xaxistooltip,
   .apexcharts-yaxistooltip {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    background: rgb(var(--v-theme-grey-50));
-
-    &::after {
-      border-inline-start-color: rgb(var(--v-theme-grey-50));
-    }
+    border-color: rgb(var(--v-border-color));
+    background: rgb(var(--v-theme-surface));
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
 
+    &::after,
     &::before {
-      border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
+      border-block-end-color: rgb(var(--v-border-color));
     }
   }
 
-  .apexcharts-xaxistooltip-text,
-  .apexcharts-yaxistooltip-text {
-    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-  }
-
+  // 👉 Text color
   .apexcharts-text,
   .apexcharts-tooltip-text,
   .apexcharts-datalabel-label,
@@ -69,19 +90,16 @@
   .apexcharts-xaxistooltip-text,
   .apexcharts-yaxistooltip-text,
   .apexcharts-legend-text {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
     font-family: inherit !important;
   }
 
-  .apexcharts-pie-label {
-    fill: white;
-    filter: none;
-  }
-
-  .apexcharts-marker {
-    box-shadow: none;
-  }
-
-  .apexcharts-legend-marker {
-    margin-inline-end: 0.3875rem;
+  // 👉 Annotation Label
+  .apexcharts-annotation-rect {
+    &.apexcharts-xaxis-annotation-rect,
+    &.apexcharts-yaxis-annotation-rect {
+      fill-opacity: 0.05;
+      stroke-opacity: 0;
+    }
   }
 }

src/@core/scss/libs/vuetify/_overrides.scss

@@ -1,5 +1,5 @@
-@use "@core/scss/utils";
 @use "@configured-variables" as variables;
+@use "../../utils";
 
 // 👉 Application
 // ℹ️ We need accurate vh in mobile devices as well
@@ -45,6 +45,17 @@ h6,
   }
 }
 
+// 👉 Button
+@if variables.$vuetify-reduce-default-compact-button-icon-size {
+  .v-btn--density-compact.v-btn--size-default {
+    .v-btn__content > svg {
+      block-size: 22px;
+      font-size: 22px;
+      inline-size: 22px;
+    }
+  }
+}
+
 // 👉 Card
 // Removes padding-top for immediately placed v-card-text after itself
 .v-card-text {
@@ -71,7 +82,9 @@ h6,
   &.v-checkbox-btn,
   &.v-radio,
   &.v-radio-btn {
-    margin-inline-start: -0.5625rem;
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.5625rem;
+    }
   }
 }
 
@@ -79,7 +92,9 @@ h6,
   &.v-radio,
   &.v-radio-btn,
   &.v-checkbox-btn {
-    margin-inline-start: -0.3125rem;
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.3125rem;
+    }
   }
 }
 
@@ -87,7 +102,9 @@ h6,
   &.v-checkbox-btn,
   &.v-radio,
   &.v-radio-btn {
-    margin-inline-start: -0.6875rem;
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.6875rem;
+    }
   }
 }
 
@@ -154,13 +171,141 @@ h6,
     padding-block: 0 !important;
     padding-inline: 0 !important;
 
+    > .v-ripple__container {
+      opacity: 0;
+    }
+
     &:not(:last-child) {
       padding-block-end: var(--v-card-list-gap) !important;
     }
   }
+
+  .v-list-item:hover,
+  .v-list-item:focus,
+  .v-list-item:active,
+  .v-list-item.active {
+    > .v-list-item__overlay {
+      opacity: 0 !important;
+    }
+  }
 }
 
-// 👉 Table
-.v-table {
-  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+// 👉 Divider
+.v-divider {
+  color: rgb(var(--v-border-color));
 }
+
+// 👉 DataTable
+.v-data-table {
+  /* stylelint-disable-next-line no-descending-specificity */
+  .v-checkbox-btn .v-selection-control__wrapper {
+    margin-inline-start: 0 !important;
+  }
+
+  .v-selection-control {
+    display: flex !important;
+  }
+
+  .v-pagination {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  }
+}
+
+// 👉 v-field
+.v-field:hover .v-field__outline {
+  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
+}
+
+// 👉 VLabel
+.v-label {
+  opacity: 1 !important;
+
+  &:not(.v-field-label--floating) {
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+  }
+}
+
+// 👉 Overlay
+.v-overlay__scrim,
+.v-navigation-drawer__scrim {
+  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity));
+  opacity: 1;
+}
+
+// 透明主题下全屏弹窗的overlay背景透明度调整
+html[data-theme="transparent"] .v-dialog--fullscreen .v-overlay__scrim {
+  background: rgba(var(--v-overlay-scrim-background), 0.3);
+}
+
+// 👉 VMessages
+.v-messages {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  opacity: 1;
+}
+
+// 👉 Alert close btn
+.v-alert__close {
+  .v-btn--icon .v-icon {
+    --v-icon-size-multiplier: 1.5;
+  }
+}
+
+// 👉 Badge icon alignment
+.v-badge__badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 👉 Dialog
+.v-dialog--fullscreen {
+  background-color: rgb(var(--v-theme-surface));
+}
+
+// 透明主题下全屏弹窗背景透明
+html[data-theme="transparent"] .v-dialog--fullscreen {
+  background-color: transparent !important;
+}
+
+// For dialog card title
+.v-card-item + .v-card-text {
+  padding-block-start: 0 !important;
+}
+
+// 👉 v-slide-group (List of chips)
+.v-slide-group {
+  .v-slide-group__container {
+    display: flex;
+    flex-wrap: wrap;
+
+    // Spacing between buttons in v-slide-group
+    .v-slide-group-item:not(:last-child) {
+      margin-inline-end: 0.5rem;
+    }
+  }
+}
+
+// 👉 Expansion Panel
+.v-expansion-panels {
+  .v-expansion-panel-title {
+    min-block-size: unset !important;
+    padding-block: 1rem !important;
+  }
+}
+
+// 👉 v-textarea
+.v-textarea {
+  textarea {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+    &:hover,
+    &:focus {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    }
+  }
+}
+
+// 👉 Cursor
+.cursor-pointer {
+  cursor: pointer;
+} 

src/@core/scss/libs/vuetify/_variables.scss

@@ -1,22 +1,24 @@
 $shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
 $shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
 $shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
+/* stylelint-disable-next-line max-line-length */
 $font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
 // 👉 Card transition properties
 $card-transition-property-custom: box-shadow, opacity;
 
 @forward "vuetify/settings" with (
-   // 👉 General settings
+  // 👉 General settings
   $color-pack: false !default,
-  $body-font-family: $font-family-custom !default,
-  $border-radius-root: 6px !default,
 
-    // 👉 Shadow opacity
+  // 👉 Shadow opacity
   $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
   $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
   $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
 
+  $body-font-family: $font-family-custom !default,
+  $border-radius-root: 6px !default,
+
   $shadow-key-umbra: (
     0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
     1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
@@ -119,6 +121,18 @@ $card-transition-property-custom: box-shadow, opacity;
     24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
   ) !default,
 
+  // 👉 Card
+  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $card-elevation: 6 !default,
+  $card-title-line-height: 2rem !default,
+  $card-actions-min-height: unset !default,
+  $card-text-padding: 1.25rem !default,
+  $card-item-padding: 1.25rem !default,
+  $card-actions-padding: 0 12px 12px !default,
+  $card-transition-property: $card-transition-property-custom !default,
+  $card-subtitle-opacity: 1 !default,
+  $card-title-letter-spacing: 0.0094rem !default,
+
   // 👉 Typography
   $typography: (
     "h1": (
@@ -170,29 +184,14 @@ $card-transition-property-custom: box-shadow, opacity;
     )
   ) !default,
 
-  // 👉 States
-  $states: ("activated": 0.08) !default,
-
-  // 👉 Card
-  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
-  $card-elevation: 6 !default,
-  $card-title-line-height: 1.6 !default,
-  $card-actions-min-height: unset !default,
-  $card-text-padding: 20px !default,
-  $card-item-padding: 15px 20px !default,
-  $card-actions-padding: 0 12px 12px !default,
-  $card-title-letter-spacing: 0.0094rem !default,
-  $card-subtitle-opacity: 1 !default,
-  $card-transition-property: $card-transition-property-custom !default,
-
-  // 👉 Navigation Drawer
-  $navigation-drawer-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
-
-  // 👉 Table
-  $table-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
+  // 👉 List
+  $list-item-icon-margin-end: 16px !default,
+  $list-item-icon-margin-start: 16px !default,
+  $list-item-subtitle-opacity: 1 !default,
+  $list-subheader-text-opacity: 1 !default,
 
   // 👉 Tooltip
-  $tooltip-background-color:#212121 !default,
+  $tooltip-background-color: #212121 !default,
   $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
   $tooltip-font-size: 0.75rem !default,
   $tooltip-border-radius: 4px !default,
@@ -205,6 +204,8 @@ $card-transition-property-custom: box-shadow, opacity;
 
   // 👉 Badge
   $badge-border-color:rgb(var(--v-theme-surface)) !default,
+  $badge-dot-height: 0.5rem !default,
+  $badge-dot-width: 0.5rem !default,
 
   // 👉 Button
   $button-height: 38px !default,
@@ -212,6 +213,7 @@ $card-transition-property-custom: box-shadow, opacity;
   $button-border-radius: 5px !default,
   $button-padding-ratio: 1.7 !default,
   $button-text-letter-spacing: 0.025rem !default,
+  $button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default,
 
   // 👉 Dialog
   $dialog-card-header-padding: 20px !default,
@@ -220,6 +222,7 @@ $card-transition-property-custom: box-shadow, opacity;
 
   // 👉 Chip
   $chip-label-border-radius: 4px !default,
+  $chip-close-size: 20px !default,
 
   // 👉 Expansion panel
   $expansion-panel-title-padding: 16px 20px !default,
@@ -232,9 +235,6 @@ $card-transition-property-custom: box-shadow, opacity;
   // 👉 Menu
   $menu-content-border-radius: 5px !default,
 
-  // 👉 List
-  $list-subheader-text-opacity: 1 !default,
-
   // 👉 Snackbar
   $snackbar-background:#212121 !default,
   $snackbar-border-radius: 4px !default,
@@ -243,7 +243,12 @@ $card-transition-property-custom: box-shadow, opacity;
   // 👉 Tabs
   $tabs-height: 40px !default,
 
-  // 👉 Timeline 
+  // 👉 Slider
+  $slider-track-active-size: 4px !default,
+  $slider-thumb-label-padding: 4px 12px !default,
+  $slider-thumb-label-font-size: 0.875rem !default,
+
+  // 👉 Timeline
   $timeline-dot-size: 34px !default,
   $timeline-dot-divider-background: transparent !default,
 
@@ -252,4 +257,7 @@ $card-transition-property-custom: box-shadow, opacity;
 
   // 👉 Navigation Drawer
   $navigation-drawer-scrim-opacity:0.5 !default,
+
+  // 👉 Table
+  $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)),
 );

src/@core/scss/libs/vuetify/index.scss

@@ -1 +1,2 @@
+@use "variables";
 @use "overrides";

src/@core/scss/pages/page-auth.scss

@@ -1,5 +1,7 @@
 .auth-wrapper {
-  min-block-size: calc(var(--vh, 1vh) * 100 + env(safe-area-inset-top) + env(safe-area-inset-bottom));
+  min-block-size: 100%;
+  min-block-size: 100vh;
+  min-block-size: 100dvh;
 }
 
 .auth-footer-mask {

src/@core/scss/placeholders/_default-layout.scss

@@ -1,3 +1,21 @@
 %layout-navbar {
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
+
+// Vertical nav scrolled sticky elevated nav
+%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: var(--app-surface-shadow);
+}
+
+// Floating navbar and sticky elevated navbar scrolled
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: var(--app-surface-shadow);
+}
+
+// Floating navbar overlay
+%default-layout-vertical-nav-floating-navbar-overlay {
+  backdrop-filter: blur(8px);
+  background-color: rgba(var(--v-theme-surface), 0.9);
+}

src/@core/scss/placeholders/_vertical-nav.scss

@@ -1,7 +1,7 @@
-@use "@core/scss/mixins";
+@use "../mixins";
 @use "@configured-variables" as variables;
 @use "vuetify/lib/styles/tools/states" as vuetifyStates;
-@use "@core/scss/utils";
+@use "../utils";
 
 // Nav items styles (including section title)
 %vertical-nav-item {

src/@core/scss/template/_components.scss

@@ -1,193 +0,0 @@
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
-@use "@configured-variables" as variables;
-@use "mixins";
-
-// 👉 Alert
-.v-alert {
-  .v-alert__close {
-    .v-icon {
-      block-size: 20px !important;
-      font-size: 20px !important;
-      inline-size: 20px !important;
-    }
-  }
-
-  &:not(.v-alert--prominent) .v-alert__prepend {
-    .v-icon {
-      block-size: 1.375rem !important;
-      font-size: 1.375rem !important;
-      inline-size: 1.375rem !important;
-    }
-  }
-
-  .v-alert-title {
-    line-height: 1.5rem;
-    margin-block-end: 0.25rem;
-  }
-}
-
-// 👉 Avatar font-size
-.v-avatar {
-  @include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
-}
-
-// 👉 Button
-.v-btn {
-  /* stylelint-disable-next-line no-descending-specificity */
-  &:not(.v-btn--icon) .v-icon {
-    --v-icon-size-multiplier: 0.9525 !important;
-  }
-}
-
-// 👉 Chip
-.v-chip.v-chip--size-default .v-avatar {
-  --v-avatar-height: 24px;
-}
-
-.v-chip.v-chip--density-comfortable {
-  line-height: 1;
-}
-
-// 👉 Expansion Panel
-.v-expansion-panel {
-  .v-expansion-panel-text {
-    font-size: 1rem;
-  }
-}
-
-// 👉 Tooltip
-.v-tooltip > .v-overlay__content {
-  font-weight: 500;
-  line-height: 0.875rem;
-}
-
-// 👉 List
-
-//  👉 Tab with pill support
-.v-tabs.v-tabs-pill {
-  .v-tab.v-btn {
-    border-radius: 6px !important;
-  }
-}
-
-// 👉 Timeline added box shadow
-.v-timeline-item {
-  .v-timeline-divider__dot {
-    .v-timeline-divider__inner-dot {
-      box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
-
-      @each $color-name in variables.$theme-colors-name {
-
-        &.bg-#{$color-name} {
-          box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
-        }
-      }
-    }
-  }
-}
-
-// 👉 Timeline Outlined style
-.v-timeline-variant-outlined.v-timeline {
-  .v-timeline-divider__dot {
-    .v-timeline-divider__inner-dot {
-      box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant));
-
-      @each $color-name in variables.$theme-colors-name {
-        background-color: rgb(var(--v-theme-surface)) !important;
-
-        &.bg-#{$color-name} {
-          box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
-        }
-      }
-    }
-  }
-}
-
-// 👉 Expansion panels
-.v-expansion-panel-title,
-.v-expansion-panel-title--active,
-.v-expansion-panel-title:hover,
-.v-expansion-panel-title:focus,
-.v-expansion-panel-title:focus-visible,
-.v-expansion-panel-title--active:focus,
-.v-expansion-panel-title--active:hover {
-  .v-expansion-panel-title__overlay {
-    opacity: 0 !important;
-  }
-}
-
-// 👉 Set Elevation when panel open
-
-.v-expansion-panels:not(.v-expansion-panels--variant-accordion) {
-  .v-expansion-panel.v-expansion-panel--active {
-    .v-expansion-panel__shadow {
-      @include mixins_elevation.elevation(3);
-    }
-  }
-}
-
-// 👉 Slider
-.v-slider-thumb {
-  .v-slider-thumb__label {
-    background: rgb(117, 117, 117);
-    color: rgb(var(--v-theme-on-primary));
-
-    &::before {
-      color: rgb(117, 117, 117);
-    }
-  }
-}
-
-// 👉 Switch
-.v-switch {
-  .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
-    color: #fff;
-  }
-}
-
-// 👉 Table
-.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
-.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
-.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
-  block-size: 50px !important;
-}
-
-.v-table {
-  --v-table-header-height: 54px !important;
-
-  th {
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
-    font-size: 0.75rem;
-
-    .v-data-table-header__content {
-      display: flex;
-      justify-content: space-between;
-    }
-  }
-
-  .v-selection-control {
-    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
-    font-size: 1rem;
-  }
-}
-
-.v-data-table {
-  th {
-    background: rgb(var(--v-table-header-background)) !important;
-  }
-}
-
-// 👉 Pagination
-.v-pagination {
-  .v-btn {
-    border-radius: 4px;
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-    font-size: 14px;
-    font-weight: 400;
-  }
-}
-
-// 👉 SnackBar
-.v-snackbar--variant-elevated {
-  @include mixins.elevation(6);
-}

src/@core/scss/template/_mixins.scss

@@ -1,101 +0,0 @@
-@use "sass:map";
-@use "vuetify/lib/styles/settings" as vuetify_settings;
-@use "@styles/variables/_vuetify.scss" as vuetify;
-
-@mixin avatar-font-sizes($map: $avatar-sizes) {
-  @each $sizeName, $multiplier in vuetify_settings.$size-scales {
-    /* stylelint-disable-next-line scss/no-global-function-names */
-    $size: map.get($map, $sizeName);
-
-    &.v-avatar--size-#{$sizeName} {
-      font-size: #{$size}px;
-    }
-  }
-}
-
-@mixin elevation($z, $important: false) {
-  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
-}
-
-@mixin before-pseudo() {
-  position: relative;
-
-  &::before {
-    position: absolute;
-    border-radius: inherit;
-    background: currentcolor;
-    block-size: 100%;
-    content: "";
-    inline-size: 100%;
-    inset: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-}
-
-@mixin bordered-skin($component, $border-property: "border", $important: false) {
-  #{$component} {
-    box-shadow: none !important;
-    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
-  }
-}
-
-@mixin selected-states($selector) {
-  #{$selector} {
-    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
-  }
-
-  &:hover
-  #{$selector} {
-    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
-  }
-
-  &:focus-visible
-  #{$selector} {
-    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      #{$selector} {
-        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
-      }
-    }
-  }
-}
-
-@mixin push-anchors() {
-  :target {
-    scroll-margin-block-start: 90px;
-  }
-}
-
-@mixin xs {
-  @media (width >= 0) and (width <= 599.98px) {
-    @content;
-  }
-}
-
-@mixin sm {
-  @media (width >= 600px) and (width <= 959.98px) {
-    @content;
-  }
-}
-
-@mixin md {
-  @media (width >= 960px) and (width <= 1279.98px) {
-    @content;
-  }
-}
-
-@mixin lg {
-  @media (width >= 1280px) and (width <= 1919.98px) {
-    @content;
-  }
-}
-
-@mixin xl {
-  @media (width >= 1920px) {
-    @content;
-  }
-}

src/@core/scss/template/_utilities.scss

@@ -1,25 +0,0 @@
-.bg-var-theme-background {
-  background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
-}
-
-// 👉 Pagination small-select dropdown for table
-// TODO: remove this class after vuetify datatable implememtation
-
-.per-page-select {
-  margin-block: auto;
-
-  .v-field__input {
-    align-items: center;
-    padding: 2px;
-    font-size: 14px;
-  }
-
-  .v-field__append-inner {
-    align-items: center;
-    padding: 0;
-
-    .v-icon {
-      margin-inline-start: 0 !important;
-    }
-  }
-}

src/@core/scss/template/_utils.scss

@@ -1,41 +0,0 @@
-@use "sass:string";
-
-/*
-  ℹ️ This function is helpful when we have multi dimensional value
-
-  Assume we have padding variable `$nav-padding-horizontal: 10px;`
-  With above variable let's say we use it in some style:
-  ```scss
-  .selector {
-    margin-left: $nav-padding-horizontal;
-  }
-  ```
-
-  Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
-  In this case above style will be invalid.
-
-  This function will extract the left most value from the variable value.
-
-  $nav-padding-horizontal: 10px; => 10px;
-  $nav-padding-horizontal: 10px 15px; => 10px;
-
-  This is safe:
-  ```scss
-  .selector {
-    margin-left: get-first-value($nav-padding-horizontal);
-  }
-  ```
-*/
-@function get-first-value($var) {
-  $start-at: string.index(#{$var}, " ");
-
-  @if $start-at {
-    @return string.slice(
-      #{$var},
-      0,
-      $start-at
-    );
-  } @else {
-    @return $var;
-  }
-}

src/@core/scss/template/_variables.scss

@@ -1,227 +0,0 @@
-@use "sass:map";
-@use "utils";
-@use "vuetify/lib/styles/tools/functions" as *;
-
-$vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
-
-// ℹ️ We created this SCSS var to extract the start padding
-// Docs: https://sass-lang.com/documentation/modules/string
-// $vertical-nav-horizontal-padding => 0 8px;
-// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
-//   string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
-// string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
-
-$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-custom) !default;
-$vertical-nav-items-icon-margin-inline-end: 0.625rem !default;
-
-// Vertical Nav Configuration
-$vertical-nav-collapsed-width: 68px !default;
-
-// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
-// This is used by nav items & nav header
-$vertical-nav-horizontal-spacing: 0 1.125rem !default;
-$vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default;
-
-// Vertical nav header padding
-$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
-
-// 👉 Custom Variables
-$avatar-font-sizes: (
-  "x-small":12,
-  "small":14,
-  "default":18,
-  "large":20,
-  "x-large":24
-) !default;
-
-// 合并两个文件中的@forward配置
-@forward "@layouts/styles/variables" with (
-  // 来自_variables.scss的配置
-  $layout-vertical-nav-collapsed-width: 68px !default,
-  
-  // 来自template/_variables.scss的配置
-  $layout-vertical-nav-z-index: 1004,
-  $layout-overlay-z-index: 1003
-);
-
-// 使用命名空间来避免变量冲突
-@use "@layouts/styles/variables" as layouts-vars;
-
-$theme-colors-name: (
-  "primary",
-  "secondary",
-  "error",
-  "info",
-  "success",
-  "warning"
-) !default;
-
-// 👉 Default layout with vertical nav
-
-$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
-
-// 👉 Vertical nav
-$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
-$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
-
-// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
-// This is used by nav items & nav header
-$vertical-nav-horizontal-spacing: 1rem !default;
-$vertical-nav-horizontal-padding: 0.75rem !default;
-
-// Vertical nav header height. Mostly we will align it with navbar height;
-$vertical-nav-header-height: layouts-vars.$layout-vertical-nav-navbar-height !default;
-$vertical-nav-navbar-elevation: 3 !default;
-$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
-$vertical-nav-floating-navbar-top: 1rem !default;
-
-// Vertical nav header padding
-$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
-$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
-
-// Move logo when vertical nav is mini (collapsed but not hovered)
-$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
-
-// Space between logo and title
-$vertical-nav-header-logo-title-spacing: 0.9rem !default;
-
-// Section title margin top (when its not first child)
-$vertical-nav-section-title-mt: 1.5rem !default;
-
-// Section title margin bottom
-$vertical-nav-section-title-mb: 0.5rem !default;
-
-// Vertical nav icons
-$vertical-nav-items-icon-size: 1.5rem !default;
-$vertical-nav-items-nested-icon-size: 0.9rem !default;
-$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
-
-// Transition duration for nav group arrow
-$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
-
-// Timing function for nav group arrow
-$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
-
-// 👉 Horizontal nav
-
-/*
-    ❗ Heads up
-    ==================
-    Here we assume we will always use shorthand property which will apply same padding on four side
-    This is because this have been used as value of top property by `.popper-content`
-*/
-$horizontal-nav-padding: 0.6875rem !default;
-
-// Gap between top level horizontal nav items
-$horizontal-nav-top-level-items-gap: 4px !default;
-
-// Horizontal nav icons
-$horizontal-nav-items-icon-size: 1.5rem !default;
-$horizontal-nav-third-level-icon-size: 0.9rem !default;
-$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
-
-// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
-// 120px is combined height of navbar & horizontal nav
-$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
-
-// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
-$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
-
-// 👉 Plugins
-
-$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
-
-// 👉 Vuetify
-
-// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
-$vuetify-reduce-default-compact-button-icon-size: true !default;
-
-// 👉 Custom variables
-// for utility classes
-$font-sizes: () !default;
-$font-sizes: map-deep-merge(
-  (
-    "xs": 0.75rem,
-    "sm": 0.875rem,
-    "base": 1rem,
-    "lg": 1.125rem,
-    "xl": 1.25rem,
-    "2xl": 1.5rem,
-    "3xl": 1.875rem,
-    "4xl": 2.25rem,
-    "5xl": 3rem,
-    "6xl": 3.75rem,
-    "7xl": 4.5rem,
-    "8xl": 6rem,
-    "9xl": 8rem
-  ),
-  $font-sizes
-);
-
-// line height
-$font-line-height: () !default;
-$font-line-height: map-deep-merge(
-  (
-    "xs": 1rem,
-    "sm": 1.25rem,
-    "base": 1.5rem,
-    "lg": 1.75rem,
-    "xl": 1.75rem,
-    "2xl": 2rem,
-    "3xl": 2.25rem,
-    "4xl": 2.5rem,
-    "5xl": 1,
-    "6xl": 1,
-    "7xl": 1,
-    "8xl": 1,
-    "9xl": 1
-  ),
-  $font-line-height
-);
-
-// gap utility class
-$gap: () !default;
-$gap: map-deep-merge(
-  (
-    "0": 0,
-    "1": 0.25rem,
-    "2": 0.5rem,
-    "3": 0.75rem,
-    "4": 1rem,
-    "5": 1.25rem,
-    "6":1.5rem,
-    "7": 1.75rem,
-    "8": 2rem,
-    "9": 2.25rem,
-    "10": 2.5rem,
-    "11": 2.75rem,
-    "12": 3rem,
-    "14": 3.5rem,
-    "16": 4rem,
-    "20": 5rem,
-    "24": 6rem,
-    "28": 7rem,
-    "32": 8rem,
-    "36": 9rem,
-    "40": 10rem,
-    "44": 11rem,
-    "48": 12rem,
-    "52": 13rem,
-    "56": 14rem,
-    "60": 15rem,
-    "64": 16rem,
-    "72": 18rem,
-    "80": 20rem,
-    "96": 24rem
-  ),
-  $gap
-);
-
-// Avatar sizes map
-$avatar-font-sizes: (
-  "x-small": 0.625rem,
-  "small": 0.75rem,
-  "default": 0.875rem,
-  "large": 1rem,
-  "x-large": 1.125rem,
-) !default;

src/@core/scss/template/index.scss

@@ -1,42 +0,0 @@
-@use "sass:map";
-
-// Layout
-@use "../vertical-nav";
-@use "../default-layout";
-@use "default-layout-w-vertical-nav";
-
-// Components
-@use "components";
-
-// Utilities
-@use "utilities";
-@use "../utils";
-
-// Misc
-@use "../misc";
-
-// Dark
-@use "../dark";
-
-// Variables
-@use "variables";
-
-// libs
-@use "libs/perfect-scrollbar";
-@use "libs/vuetify";
-
-a {
-  color: rgb(var(--v-theme-primary));
-  text-decoration: none;
-}
-
-// Vuetify 3 don't provide margin bottom style like vuetify 2
-p {
-  margin-block-end: 1rem;
-}
-
-// Iconify icon size
-svg.iconify {
-  block-size: 1em;
-  inline-size: 1em;
-}

src/@core/scss/template/libs/apex-chart.scss

@@ -1,106 +0,0 @@
-@use "@configureTheme" as theme;
-@use "@configured-variables" as variables;
-@use "../mixins";
-
-// 👉 Apex chart
-.apexcharts-canvas {
-  // For RTL alignment
-  .apexcharts-yaxis-texts-g {
-    text-align: start;
-  }
-
-  // Tooltip
-  .apexcharts-tooltip {
-    line-height: 1.5;
-
-    .apexcharts-tooltip-title {
-      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-      background: rgb(var(--v-theme-surface));
-      font-weight: 500;
-      margin-block-end: 0.25rem;
-      padding-inline: 1rem;
-    }
-
-    .apexcharts-tooltip-text {
-      display: flex;
-      align-items: center;
-      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-      font-size: inherit;
-      gap: 0.5rem;
-      line-height: inherit;
-    }
-
-    .apexcharts-tooltip-text-label,
-    .apexcharts-tooltip-text-value {
-      font-weight: 600;
-      line-height: 1.5;
-    }
-    
-    .apexcharts-tooltip-series-group {
-      padding-block: 0 0.5rem;
-      padding-inline: 1rem;
-
-      &:last-child {
-        padding-block-end: 1rem;
-      }
-
-      &.active {
-        padding-block-start: 0;
-      }
-    }
-
-    &.apexcharts-theme-light {
-      border-color: rgb(var(--v-border-color));
-      background: rgb(var(--v-theme-surface));
-      box-shadow: none;
-      
-      .apexcharts-tooltip-text-label,
-      .apexcharts-tooltip-text-value {
-        color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-      }
-    }
-  }
-
-  .apexcharts-marker {
-    transition: none;
-  }
-
-  // 👉 stroke-dasharray
-  .apexcharts-radialbar,
-  .apexcharts-radialbar-slice-current {
-    stroke-linecap: round;
-  }
-
-  .apexcharts-xaxistooltip,
-  .apexcharts-yaxistooltip {
-    border-color: rgb(var(--v-border-color));
-    background: rgb(var(--v-theme-surface));
-    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
-
-    &::after,
-    &::before {
-      border-block-end-color: rgb(var(--v-border-color));
-    }
-  }
-
-  // 👉 Text color
-  .apexcharts-text,
-  .apexcharts-tooltip-text,
-  .apexcharts-datalabel-label,
-  .apexcharts-datalabel,
-  .apexcharts-xaxistooltip-text,
-  .apexcharts-yaxistooltip-text,
-  .apexcharts-legend-text {
-    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
-    font-family: inherit !important;
-  }
-
-  // 👉 Annotation Label
-  .apexcharts-annotation-rect {
-    &.apexcharts-xaxis-annotation-rect,
-    &.apexcharts-yaxis-annotation-rect {
-      fill-opacity: 0.05;
-      stroke-opacity: 0;
-    }
-  }
-}

src/@core/scss/template/libs/vuetify/_overrides.scss

@@ -1,301 +0,0 @@
-@use "@configured-variables" as variables;
-@use "../../../utils";
-
-// 👉 Application
-// ℹ️ We need accurate vh in mobile devices as well
-.v-application__wrap {
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  min-height: calc(var(--vh, 1vh) * 100);
-}
-
-// 👉 Typography
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.text-h1,
-.text-h2,
-.text-h3,
-.text-h4,
-.text-h5,
-.text-h6,
-.text-button,
-.text-overline,
-.v-card-title {
-  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-}
-
-.text-body-1,
-.text-body-2,
-.text-subtitle-1,
-.text-subtitle-2 {
-  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
-}
-
-// 👉 Grid
-// Remove margin-bottom of v-input_details inside grid (validation error message)
-.v-row {
-  .v-col,
-  [class^="v-col-*"] {
-    .v-input__details {
-      margin-block-end: 0;
-    }
-  }
-}
-
-// 👉 Button
-@if variables.$vuetify-reduce-default-compact-button-icon-size {
-  .v-btn--density-compact.v-btn--size-default {
-    .v-btn__content > svg {
-      block-size: 22px;
-      font-size: 22px;
-      inline-size: 22px;
-    }
-  }
-}
-
-// 👉 Card
-// Removes padding-top for immediately placed v-card-text after itself
-.v-card-text {
-  & + & {
-    padding-block-start: 0 !important;
-  }
-}
-
-/*
-  👉 Checkbox & Radio Ripple
-
-  TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
-  We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
-  Tested with checkbox & switches
-*/
-.v-checkbox.v-input,
-.v-switch.v-input {
-  --v-input-control-height: auto;
-
-  flex: unset;
-}
-
-.v-selection-control--density-comfortable {
-  &.v-checkbox-btn,
-  &.v-radio,
-  &.v-radio-btn {
-    .v-selection-control__wrapper {
-      margin-inline-start: -0.5625rem;
-    }
-  }
-}
-
-.v-selection-control--density-compact {
-  &.v-radio,
-  &.v-radio-btn,
-  &.v-checkbox-btn {
-    .v-selection-control__wrapper {
-      margin-inline-start: -0.3125rem;
-    }
-  }
-}
-
-.v-selection-control--density-default {
-  &.v-checkbox-btn,
-  &.v-radio,
-  &.v-radio-btn {
-    .v-selection-control__wrapper {
-      margin-inline-start: -0.6875rem;
-    }
-  }
-}
-
-.v-radio-group {
-  .v-selection-control-group {
-    .v-radio:not(:last-child) {
-      margin-inline-end: 0.9rem;
-    }
-  }
-}
-
-/*
-  👉 Tabs
-  Disable tab transition
-
-  This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
-
-  This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
-*/
-.disable-tab-transition {
-  overflow: unset !important;
-
-  .v-window__container {
-    block-size: auto !important;
-  }
-
-  .v-window-item:not(.v-window-item--active) {
-    display: none !important;
-  }
-
-  .v-window__container .v-window-item {
-    transform: none !important;
-  }
-}
-
-// 👉 List
-.v-list {
-  // Set icons opacity to .87
-  .v-list-item__prepend > .v-icon,
-  .v-list-item__append > .v-icon {
-    opacity: var(--v-high-emphasis-opacity);
-  }
-}
-
-// 👉 Card list
-
-/*
-  ℹ️ Custom class
-
-  Remove list spacing inside card
-
-  This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
-*/
-.card-list {
-  --v-card-list-gap: 20px;
-
-  &.v-list {
-    padding-block: 0;
-  }
-
-  .v-list-item {
-    min-block-size: unset;
-    min-block-size: auto !important;
-    padding-block: 0 !important;
-    padding-inline: 0 !important;
-
-    > .v-ripple__container {
-      opacity: 0;
-    }
-
-    &:not(:last-child) {
-      padding-block-end: var(--v-card-list-gap) !important;
-    }
-  }
-
-  .v-list-item:hover,
-  .v-list-item:focus,
-  .v-list-item:active,
-  .v-list-item.active {
-    > .v-list-item__overlay {
-      opacity: 0 !important;
-    }
-  }
-}
-
-// 👉 Divider
-.v-divider {
-  color: rgb(var(--v-border-color));
-}
-
-// 👉 DataTable
-.v-data-table {
-  /* stylelint-disable-next-line no-descending-specificity */
-  .v-checkbox-btn .v-selection-control__wrapper {
-    margin-inline-start: 0 !important;
-  }
-
-  .v-selection-control {
-    display: flex !important;
-  }
-
-  .v-pagination {
-    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  }
-}
-
-// 👉 v-field
-.v-field:hover .v-field__outline {
-  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
-}
-
-// 👉 VLabel
-.v-label {
-  opacity: 1 !important;
-
-  &:not(.v-field-label--floating) {
-    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
-  }
-}
-
-// 👉 Overlay
-.v-overlay__scrim,
-.v-navigation-drawer__scrim {
-  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
-  opacity: 1 !important;
-}
-
-// 👉 VMessages
-.v-messages {
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  opacity: 1;
-}
-
-// 👉 Alert close btn
-.v-alert__close {
-  .v-btn--icon .v-icon {
-    --v-icon-size-multiplier: 1.5;
-  }
-}
-
-// 👉 Badge icon alignment
-.v-badge__badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// 👉 Dialog
-.v-dialog--fullscreen {
-  background-color: rgb(var(--v-theme-surface));
-}
-
-// For dialog card title
-.v-card-item + .v-card-text {
-  padding-block-start: 0 !important;
-}
-
-// 👉 v-slide-group (List of chips)
-.v-slide-group {
-  .v-slide-group__container {
-    display: flex;
-    flex-wrap: wrap;
-
-    // Spacing between buttons in v-slide-group
-    .v-slide-group-item:not(:last-child) {
-      margin-inline-end: 0.5rem;
-    }
-  }
-}
-
-// 👉 Expansion Panel
-.v-expansion-panels {
-  .v-expansion-panel-title {
-    min-block-size: unset !important;
-    padding-block: 1rem !important;
-  }
-}
-
-// 👉 v-textarea
-.v-textarea {
-  textarea {
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-
-    &:hover,
-    &:focus {
-      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-    }
-  }
-}
-
-// 👉 Cursor
-.cursor-pointer {
-  cursor: pointer;
-} 

src/@core/scss/template/libs/vuetify/_variables.scss

@@ -1,263 +0,0 @@
-$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
-$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
-$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
-/* stylelint-disable-next-line max-line-length */
-$font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-// 👉 Card transition properties
-$card-transition-property-custom: box-shadow, opacity;
-
-@forward "vuetify/settings" with (
-  // 👉 General settings
-  $color-pack: false !default,
-
-  // 👉 Shadow opacity
-  $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
-  $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
-  $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
-
-  $body-font-family: $font-family-custom !default,
-  $border-radius-root: 6px !default,
-
-  $shadow-key-umbra: (
-    0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
-    1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
-    2: (0 3px 1px -2px var(--v-shadow-key-umbra-opacity)),
-
-    // ℹ️ Modified
-    3: (0 4px 14px -4px var(--v-shadow-key-umbra-opacity)),
-
-    4: (0 2px 4px -1px var(--v-shadow-key-umbra-opacity)),
-    5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)),
-
-    // ℹ️ Modified
-    6: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
-
-    7: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
-    8: (0 5px 5px -3px var(--v-shadow-key-umbra-opacity)),
-    9: (0 5px 6px -3px var(--v-shadow-key-umbra-opacity)),
-    10: (0 6px 6px -3px var(--v-shadow-key-umbra-opacity)),
-    11: (0 6px 7px -4px var(--v-shadow-key-umbra-opacity)),
-    12: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
-    13: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
-    14: (0 7px 9px -4px var(--v-shadow-key-umbra-opacity)),
-    15: (0 8px 9px -5px var(--v-shadow-key-umbra-opacity)),
-    16: (0 8px 10px -5px var(--v-shadow-key-umbra-opacity)),
-    17: (0 8px 11px -5px var(--v-shadow-key-umbra-opacity)),
-    18: (0 9px 11px -5px var(--v-shadow-key-umbra-opacity)),
-    19: (0 9px 12px -6px var(--v-shadow-key-umbra-opacity)),
-    20: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
-    21: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
-    22: (0 10px 14px -6px var(--v-shadow-key-umbra-opacity)),
-    23: (0 11px 14px -7px var(--v-shadow-key-umbra-opacity)),
-    24: (0 11px 15px -7px var(--v-shadow-key-umbra-opacity))
-  ) !default,
-
-  $shadow-key-penumbra: (
-    0: (0 0 0 0 $shadow-key-penumbra-opacity-custom),
-    1: (0 1px 1px 0 $shadow-key-penumbra-opacity-custom),
-    2: (0 2px 2px 0 $shadow-key-penumbra-opacity-custom),
-
-    // ℹ️ Modified
-    3: (0 4px 8px -4px $shadow-key-penumbra-opacity-custom),
-
-    4: (0 4px 5px 0 $shadow-key-penumbra-opacity-custom),
-    5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom),
-
-    // ℹ️ Modified
-    6: (0 2px 10px 1px $shadow-key-penumbra-opacity-custom),
-
-    7: (0 7px 10px 1px $shadow-key-penumbra-opacity-custom),
-    8: (0 8px 10px 1px $shadow-key-penumbra-opacity-custom),
-    9: (0 9px 12px 1px $shadow-key-penumbra-opacity-custom),
-    10: (0 10px 14px 1px $shadow-key-penumbra-opacity-custom),
-    11: (0 11px 15px 1px $shadow-key-penumbra-opacity-custom),
-    12: (0 12px 17px 2px $shadow-key-penumbra-opacity-custom),
-    13: (0 13px 19px 2px $shadow-key-penumbra-opacity-custom),
-    14: (0 14px 21px 2px $shadow-key-penumbra-opacity-custom),
-    15: (0 15px 22px 2px $shadow-key-penumbra-opacity-custom),
-    16: (0 16px 24px 2px $shadow-key-penumbra-opacity-custom),
-    17: (0 17px 26px 2px $shadow-key-penumbra-opacity-custom),
-    18: (0 18px 28px 2px $shadow-key-penumbra-opacity-custom),
-    19: (0 19px 29px 2px $shadow-key-penumbra-opacity-custom),
-    20: (0 20px 31px 3px $shadow-key-penumbra-opacity-custom),
-    21: (0 21px 33px 3px $shadow-key-penumbra-opacity-custom),
-    22: (0 22px 35px 3px $shadow-key-penumbra-opacity-custom),
-    23: (0 23px 36px 3px $shadow-key-penumbra-opacity-custom),
-    24: (0 24px 38px 3px $shadow-key-penumbra-opacity-custom)
-  ) !default,
-
-  $shadow-key-ambient: (
-    0: (0 0 0 0 $shadow-key-ambient-opacity-custom),
-    1: (0 1px 3px 0 $shadow-key-ambient-opacity-custom),
-    2: (0 1px 5px 0 $shadow-key-ambient-opacity-custom),
-
-    // ℹ️ Modified
-    3: (0 4px 8px -4px $shadow-key-ambient-opacity-custom),
-
-    4: (0 1px 10px 0 $shadow-key-ambient-opacity-custom),
-    5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom),
-
-    // ℹ️ Modified
-    6: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
-
-    7: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
-    8: (0 3px 14px 2px $shadow-key-ambient-opacity-custom),
-    9: (0 3px 16px 2px $shadow-key-ambient-opacity-custom),
-    10: (0 4px 18px 3px $shadow-key-ambient-opacity-custom),
-    11: (0 4px 20px 3px $shadow-key-ambient-opacity-custom),
-    12: (0 5px 22px 4px $shadow-key-ambient-opacity-custom),
-    13: (0 5px 24px 4px $shadow-key-ambient-opacity-custom),
-    14: (0 5px 26px 4px $shadow-key-ambient-opacity-custom),
-    15: (0 6px 28px 5px $shadow-key-ambient-opacity-custom),
-    16: (0 6px 30px 5px $shadow-key-ambient-opacity-custom),
-    17: (0 6px 32px 5px $shadow-key-ambient-opacity-custom),
-    18: (0 7px 34px 6px $shadow-key-ambient-opacity-custom),
-    19: (0 7px 36px 6px $shadow-key-ambient-opacity-custom),
-    20: (0 8px 38px 7px $shadow-key-ambient-opacity-custom),
-    21: (0 8px 40px 7px $shadow-key-ambient-opacity-custom),
-    22: (0 8px 42px 7px $shadow-key-ambient-opacity-custom),
-    23: (0 9px 44px 8px $shadow-key-ambient-opacity-custom),
-    24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
-  ) !default,
-
-  // 👉 Card
-  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
-  $card-elevation: 6 !default,
-  $card-title-line-height: 2rem !default,
-  $card-actions-min-height: unset !default,
-  $card-text-padding: 1.25rem !default,
-  $card-item-padding: 1.25rem !default,
-  $card-actions-padding: 0 12px 12px !default,
-  $card-transition-property: $card-transition-property-custom !default,
-  $card-subtitle-opacity: 1 !default,
-  $card-title-letter-spacing: 0.0094rem !default,
-
-  // 👉 Typography
-  $typography: (
-    "h1": (
-      "weight": 500,
-      "line-height": 7rem,
-      "letter-spacing": -0.0938rem
-    ),
-    "h2": (
-      "weight": 500,
-      "line-height": 4.5rem,
-      "letter-spacing": -0.0313rem
-    ),
-    "h3": (
-      "weight": 500,
-      "line-height": 3.5rem
-    ),
-    "h4": (
-      "weight": 500,
-      "line-height": 2.625rem,
-      "letter-spacing": 0.0156rem
-    ),
-    "h5": (
-      "weight": 500,
-      "line-height": 2rem
-    ),
-    "h6": (
-      "letter-spacing": 0.0094rem
-    ),
-    "subtitle-1": (
-      "letter-spacing": 0.0094rem
-    ),
-    "subtitle-2": (
-      "line-height": 1.375rem,
-      "letter-spacing": 0.0063rem,
-    ),
-    "body-1": (
-      "letter-spacing": 0.0094rem,
-    ),
-    "body-2": (
-      "letter-spacing": 0.0094rem,
-    ),
-    "caption": (
-      "letter-spacing": 0.025rem,
-    ),
-    "overline": (
-      "weight": 400,
-      "line-height": 1.125rem,
-      "letter-spacing": 0.0625rem,
-    )
-  ) !default,
-
-  // 👉 List
-  $list-item-icon-margin-end: 16px !default,
-  $list-item-icon-margin-start: 16px !default,
-  $list-item-subtitle-opacity: 1 !default,
-  $list-subheader-text-opacity: 1 !default,
-
-  // 👉 Tooltip
-  $tooltip-background-color: #212121 !default,
-  $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
-  $tooltip-font-size: 0.75rem !default,
-  $tooltip-border-radius: 4px !default,
-  $tooltip-padding: 4px 8px !default,
-
-  // 👉 Alert
-  $alert-title-font-size: 1rem !default,
-  $alert-border-radius: 5px !default,
-  $alert-title-letter-spacing: 0.15px !default,
-
-  // 👉 Badge
-  $badge-border-color:rgb(var(--v-theme-surface)) !default,
-  $badge-dot-height: 0.5rem !default,
-  $badge-dot-width: 0.5rem !default,
-
-  // 👉 Button
-  $button-height: 38px !default,
-  $button-elevation: ("default": 3, "hover": 4, "active": 8) !default,
-  $button-border-radius: 5px !default,
-  $button-padding-ratio: 1.7 !default,
-  $button-text-letter-spacing: 0.025rem !default,
-  $button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default,
-
-  // 👉 Dialog
-  $dialog-card-header-padding: 20px !default,
-  $dialog-card-header-text-padding-top: 0 !default,
-  $dialog-card-text-padding: 20px !default,
-
-  // 👉 Chip
-  $chip-label-border-radius: 4px !default,
-  $chip-close-size: 20px !default,
-
-  // 👉 Expansion panel
-  $expansion-panel-title-padding: 16px 20px !default,
-  $expansion-panel-title-font-size: 1rem !default,
-  $expansion-panel-disabled-overlay: 0 !default,
-  $expansion-panel-active-title-min-height: 51px !default,
-  $expansion-panel-title-min-height: 51px !default,
-  $expansion-panel-text-padding: 0 20px 20px !default,
-
-  // 👉 Menu
-  $menu-content-border-radius: 5px !default,
-
-  // 👉 Snackbar
-  $snackbar-background:#212121 !default,
-  $snackbar-border-radius: 4px !default,
-  $snackbar-color: rgb(var(--v-theme-on-primary)) !default,
-
-  // 👉 Tabs
-  $tabs-height: 40px !default,
-
-  // 👉 Slider
-  $slider-track-active-size: 4px !default,
-  $slider-thumb-label-padding: 4px 12px !default,
-  $slider-thumb-label-font-size: 0.875rem !default,
-
-  // 👉 Timeline
-  $timeline-dot-size: 34px !default,
-  $timeline-dot-divider-background: transparent !default,
-
-  // 👉 Overlay
-  $overlay-opacity: 0.5 !default,
-
-  // 👉 Navigation Drawer
-  $navigation-drawer-scrim-opacity:0.5 !default,
-
-  // 👉 Table
-  $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)),
-);

src/@core/scss/template/libs/vuetify/index.scss

@@ -1,2 +0,0 @@
-@use "variables";
-@use "overrides";

src/@core/scss/template/pages/misc.scss

@@ -1,25 +0,0 @@
-.layout-blank {
-  .misc-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 1.25rem;
-    overflow: hidden;
-
-    .misc-footer-img {
-      position: absolute;
-      inline-size: 100%;
-      inset-block-end: 0;
-    }
-
-    .misc-footer-tree {
-      position: absolute;
-      z-index: 1;
-    }
-  }
-
-  .misc-avatar {
-    z-index: 1;
-  }
-}

src/@core/scss/template/pages/page-auth.scss

@@ -1,54 +0,0 @@
-.layout-blank {
-  .auth-wrapper {
-    min-block-size: calc(var(--vh, 1vh) * 100);
-
-    .auth-footer-mask {
-      position: absolute;
-      inset-block-end: 0;
-      min-inline-size: 100%;
-    }
-
-    .auth-footer-start-tree,
-    .auth-footer-end-tree {
-      position: absolute;
-      z-index: 1;
-    }
-
-    .auth-footer-start-tree {
-      inset-block-end: 0;
-      inset-inline-start: 0;
-    }
-
-    .auth-footer-end-tree {
-      inset-block-end: 0;
-      inset-inline-end: 0;
-    }
-
-    .auth-illustration {
-      z-index: 1;
-    }
-  }
-
-  .auth-card {
-    z-index: 1 !important;
-  }
-}
-
-@media (min-width: 960px) {
-  .skin--bordered {
-    .auth-card-v2 {
-      border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-    }
-  }
-}
-
-.auth-logo {
-  position: absolute;
-  z-index: 1;
-  inset-block-start: 2rem;
-  inset-inline-start: 2.3rem;
-}
-
-.auth-card-v2 {
-  background-color: rgb(var(--v-theme-surface));
-}

src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss

@@ -1,45 +0,0 @@
-@use "@configured-variables" as variables;
-@use "misc";
-@use "../mixins";
-
-%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
-  background-color: rgb(var(--v-theme-surface));
-}
-
-%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
-  // @include mixins.elevation(variables.$vertical-nav-navbar-elevation);
-
-  // If navbar is contained => Squeeze navbar content on scroll
-  @if variables.$layout-vertical-nav-navbar-is-contained {
-    padding-inline: 1rem;
-  }
-}
-
-%default-layout-vertical-nav-floating-navbar-overlay {
-  isolation: isolate;
-
-  &::after {
-    position: absolute;
-    z-index: -1;
-    /* stylelint-disable property-no-vendor-prefix */
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    /* stylelint-enable */
-    background:
-      linear-gradient(
-        180deg,
-        rgba(var(--v-theme-background), 70%) 44%,
-        rgba(var(--v-theme-background), 43%) 73%,
-        rgba(var(--v-theme-background), 0%)
-      );
-    background-repeat: repeat;
-    block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
-    content: "";
-    inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
-    inset-inline: 0;
-    /* stylelint-disable property-no-vendor-prefix */
-    -webkit-mask: linear-gradient(black, black 18%, transparent 100%);
-    mask: linear-gradient(black, black 18%, transparent 100%);
-    /* stylelint-enable */
-  }
-} 

src/@core/scss/template/placeholders/_default-layout.scss

@@ -1,3 +0,0 @@
-%layout-navbar {
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-} 

src/@core/scss/template/placeholders/_index.scss

@@ -1,5 +0,0 @@
-@forward "nav";
-@forward "vertical-nav";
-@forward "default-layout";
-@forward "default-layout-vertical-nav";
-@forward "misc";

src/@core/scss/template/placeholders/_misc.scss

@@ -1,72 +0,0 @@
-%blurry-bg {
-    position: relative;
-    background: transparent;
-    box-shadow: none;
-
-
-    .v-theme--light & {
-      backdrop-filter: blur(16px);
-      background: rgba(var(--v-theme-surface), 0.9);
-      box-shadow: 0 0 8px 0 rgba(var(--v-theme-on-surface), 0.1);
-    }
-    
-    &::before {
-      position: absolute;
-      z-index: -1;
-      block-size: calc(env(safe-area-inset-top, 0px) + 5rem);
-      content: "";
-      inset-block-start: 0;
-      inset-inline: 0;
-      pointer-events: none;
-      transition: all 0.2s ease-in-out;
-      
-      
-      .v-theme--dark & {
-        background: linear-gradient(
-          to bottom,
-          rgba(var(--v-theme-background), 1) 0%,
-          rgba(var(--v-theme-background), 0.8) 20%,
-          rgba(var(--v-theme-background), 0.6) 40%,
-          rgba(var(--v-theme-background), 0.4) 60%,
-          rgba(var(--v-theme-background), 0.2) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
-        );
-      }
-
-      .v-theme--purple & {
-        background: linear-gradient(
-          to bottom,
-          rgba(var(--v-theme-background), 1) 0%,
-          rgba(var(--v-theme-background), 0.8) 20%,
-          rgba(var(--v-theme-background), 0.6) 40%,
-          rgba(var(--v-theme-background), 0.4) 60%,
-          rgba(var(--v-theme-background), 0.2) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
-        );
-      }
-
-      .v-theme--transparent & {
-        background: linear-gradient(
-          to bottom,
-          rgba(var(--v-theme-background), 0.5) 0%,
-          rgba(var(--v-theme-background), 0.4) 20%,
-          rgba(var(--v-theme-background), 0.3) 40%,
-          rgba(var(--v-theme-background), 0.2) 60%,
-          rgba(var(--v-theme-background), 0.1) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
-        );
-
-        @media (width <= 640px) {
-          background: linear-gradient(
-          to bottom,
-          rgba(var(--v-theme-background), 0.9) 0%,
-          rgba(var(--v-theme-background), 0.7) 20%,
-          rgba(var(--v-theme-background), 0.5) 40%,
-          rgba(var(--v-theme-background), 0.3) 60%,
-          rgba(var(--v-theme-background), 0.1) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
-        );
-        }
-      }
-    }
-}

src/@core/scss/template/placeholders/_nav.scss

@@ -1,8 +0,0 @@
-%nav-link-active {
-  background:
-    linear-gradient(
-      -72.47deg,
-      rgb(var(--v-theme-primary)) 22.16%,
-      rgba(var(--v-theme-primary), 0.7) 76.47%
-    ) !important;
-}

src/@core/scss/template/placeholders/_vertical-nav.scss

@@ -1,64 +0,0 @@
-@use "@configured-variables" as variables;
-
-// ℹ️ Add divider around section title
-%vertical-nav-section-title {
-  /*
-    ℹ️ We will use this to add gap between divider and text.
-    Moreover, we will use this to adjust the `flex-basis` property of left divider
-  */
-  $divider-gap: 0.625rem;
-
-  // Thanks: https://stackoverflow.com/a/62359101/10796681
-  .title-text {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: flex-start;
-    column-gap: $divider-gap;
-
-    &::before,
-    &::after {
-      border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-      content: "";
-    }
-
-    &::after {
-      flex: 1 1 auto;
-    }
-
-    &::before {
-      flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
-      margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
-    }
-  }
-
-  // ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
-  @at-root {
-    .layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
-      margin-inline: 4px 0;
-    }
-  }
-}
-
-%vertical-nav-item-interactive {
-  // Add pill shape styles
-  block-size: 2.625rem !important;
-  border-end-end-radius: 3.125rem !important;
-  border-end-start-radius: 0 !important;
-  border-start-end-radius: 3.125rem !important;
-  border-start-start-radius: 0 !important;
-}
-
-%vertical-nav-item-interactive {
-  // ℹ️ Wobble effect
-  // transition: margin-inline 0.4s ease-in-out;
-  // will-change: margin-inline;
-
-  transition: margin-inline 0.15s ease-in-out;
-  will-change: margin-inline;
-
-  // Reduce margin inline end when vertical nav is in collapsed mode and not hovered
-  .layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) & {
-    margin-inline: 0 5px;
-  }
-}

src/@core/utils/formatters.ts

@@ -23,6 +23,13 @@ export function kFormatter(num: number) {
     : Math.abs(num).toFixed(0).replace(regex, ',')
 }
 
+// 格式化下载量显示，超过1000显示为x.xk格式
+export function formatDownloadCount(num: number): string {
+  if (!num || num < 1000) return num?.toLocaleString() || '0'
+
+  return `${(num / 1000).toFixed(1)}k`
+}
+
 /**
  * Format and return date in Humanize format
  * Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format

src/@core/utils/image.ts

@@ -1,9 +1,18 @@
 import ColorThief from 'colorthief'
 
+const DEFAULT_DOMINANT_COLOR = '#28A9E1'
+const DOMINANT_COLOR_CACHE_LIMIT = 100
+const colorThief = new ColorThief()
+const dominantColorCache = new Map<string, Promise<string>>()
+
+interface DominantColorOptions {
+  fallback?: string
+  quality?: number
+}
+
 // 将 RGB 转换为十六进制
 function rgbStringToHex(rgbArray: number[]): string {
-  if (rgbArray.length !== 3 || rgbArray.some(isNaN))
-    throw new Error('Invalid RGB string format')
+  if (rgbArray.length !== 3 || rgbArray.some(isNaN)) throw new Error('Invalid RGB string format')
 
   const [r, g, b] = rgbArray
 
@@ -15,9 +24,68 @@ function rgbStringToHex(rgbArray: number[]): string {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`
 }
 
-// 提取主要颜色
-export async function getDominantColor(image: HTMLImageElement): Promise<string> {
-  const colorThief = new ColorThief()
-  const dominantColor = colorThief.getColor(image)
-  return rgbStringToHex(dominantColor)
+function getImageCacheKey(image: HTMLImageElement) {
+  return image.currentSrc || image.src || ''
+}
+
+function rememberDominantColor(key: string, colorPromise: Promise<string>) {
+  if (!key) return colorPromise
+
+  if (dominantColorCache.size >= DOMINANT_COLOR_CACHE_LIMIT) {
+    const firstKey = dominantColorCache.keys().next().value
+    if (firstKey) dominantColorCache.delete(firstKey)
+  }
+
+  dominantColorCache.set(key, colorPromise)
+  return colorPromise
+}
+
+// 提取主要颜色
+export async function getDominantColor(
+  image: HTMLImageElement | undefined | null,
+  options: DominantColorOptions = {},
+): Promise<string> {
+  const fallback = options.fallback ?? DEFAULT_DOMINANT_COLOR
+
+  if (!image) return fallback
+
+  const cacheKey = getImageCacheKey(image)
+  const cachedColor = cacheKey ? dominantColorCache.get(cacheKey) : undefined
+  if (cachedColor) return cachedColor
+
+  const colorPromise = Promise.resolve()
+    .then(() => {
+      const dominantColor = colorThief.getColor(image, options.quality ?? 20)
+      return rgbStringToHex(dominantColor)
+    })
+    .catch(error => {
+      console.warn('Failed to extract dominant color:', error)
+      return fallback
+    })
+
+  return rememberDominantColor(cacheKey, colorPromise)
+}
+
+// 预加载图片
+export async function preloadImage(url: string): Promise<boolean> {
+  return new Promise(resolve => {
+    const img = new Image()
+
+    img.onload = () => resolve(true)
+    img.onerror = () => resolve(false)
+
+    // 设置超时，防止图片长时间加载
+    const timeout = setTimeout(() => {
+      img.src = ''
+      resolve(false)
+    }, 5000) // 5秒超时
+
+    img.src = url
+
+    // 如果图片已经缓存，onload可能不会触发
+    if (img.complete) {
+      clearTimeout(timeout)
+      resolve(true)
+    }
+  })
 }

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'

src/@core/utils/navigator.ts

@@ -35,6 +35,19 @@ export function urlBase64ToUint8Array(base64String: string) {
   return outputArray
 }
 
+// Uint8Array 转 Base64URL
+export function bufferToBase64Url(buffer: ArrayBuffer): string {
+  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '')
+}
+
+// Base64URL 转 Uint8Array
+export function base64UrlToUint8Array(base64Url: string): Uint8Array {
+  return Uint8Array.from(atob(base64Url.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0))
+}
+
 // 判断是否为PWA
 export const isPWA = async (): Promise<boolean> => {
   if ('serviceWorker' in navigator) {
@@ -43,3 +56,56 @@ export const isPWA = async (): Promise<boolean> => {
   }
   return (window.navigator as any).standalone === true
 }
+
+// 同步检测PWA显示模式
+export const isPWADisplayMode = (): boolean => {
+  return (
+    window.matchMedia('(display-mode: standalone)').matches ||
+    (window.navigator as any).standalone ||
+    document.referrer.includes('android-app://')
+  )
+}
+
+// 全面的PWA检测（推荐使用）
+export const checkPWAStatus = async () => {
+  const hasServiceWorker = await isPWA()
+  const isStandaloneMode = isPWADisplayMode()
+
+  return {
+    // 是否有PWA功能（Service Worker）
+    hasPWAFeatures: hasServiceWorker,
+    // 是否在独立显示模式下运行
+    isStandaloneMode,
+    // 综合判断：更宽松的检测，在移动设备上默认启用PWA功能
+    isPWAEnvironment: hasServiceWorker || isStandaloneMode || isMobileDevice(),
+    // 完整的PWA体验：既有功能又在独立模式下运行
+    isFullPWA: hasServiceWorker && isStandaloneMode,
+  }
+}
+
+// 检测是否为移动设备
+export const isMobileDevice = (): boolean => {
+  // 检查用户代理字符串
+  const userAgent = navigator.userAgent || ''
+  const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i
+
+  // 检查触摸屏支持
+  const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0
+
+  // 检查屏幕尺寸（小于768px认为是移动设备）
+  const isMobileSize = window.innerWidth < 768
+
+  return mobileRegex.test(userAgent) || hasTouchScreen || isMobileSize
+}
+
+// 检测是否为iOS设备
+export const isIOSDevice = (): boolean => {
+  const userAgent = navigator.userAgent.toLowerCase()
+  return /iphone|ipad|ipod/.test(userAgent) && !(window as any).MSStream
+}
+
+// 检测是否为Android设备
+export const isAndroidDevice = (): boolean => {
+  const userAgent = navigator.userAgent.toLowerCase()
+  return /android/.test(userAgent)
+}

src/@core/utils/season.ts

@@ -0,0 +1,15 @@
+/**
+ * 格式化用户可见的季标签。
+ *
+ * TMDB 使用季号 0 表示特别季；调用方传入当前语言的特别季名称，
+ * 其余季号保持 MoviePilot 现有的 Sxx 展示口径。
+ */
+export function formatSeasonLabel(
+  season: number | string | null | undefined,
+  specialsLabel: string,
+): string {
+  if (season === null || season === undefined || season === '') return ''
+  if (Number(season) === 0) return specialsLabel
+
+  return `S${String(season).padStart(2, '0')}`
+}

src/@iconify/build-icons.ts

@@ -17,6 +17,7 @@ import { createRequire } from 'node:module'
 
 // Get current directory
 const __dirname = dirname(fileURLToPath(import.meta.url))
+const projectSrcDir = join(__dirname, '..')
 
 // Create require function for importing JSON files in ESM
 const require = createRequire(import.meta.url)
@@ -86,33 +87,12 @@ const sources: BundleScriptConfig = {
   ],
 
   icons: [
-    // 'mdi:home',
-    // 'mdi:account',
-    // 'mdi:login',
-    // 'mdi:logout',
-    // 'octicon:book-24',
-    // 'octicon:code-square-24',
+    'lucide:sparkles',
+    'material-symbols:passkey',
+    'line-md:loading-twotone-loop',
   ],
 
-  json: [
-    // Custom JSON file
-    // 'json/gg.json',
-
-    // Iconify JSON file (@iconify/json is a package name, /json/ is directory where files are, then filename)
-    require.resolve('@iconify-json/mdi/icons.json'),
-
-    // Custom file with only few icons
-    // {
-    //   filename: require.resolve('@iconify-json/line-md/icons.json'),
-    //   icons: [
-    //     'home-twotone-alt',
-    //     'github',
-    //     'document-list',
-    //     'document-code',
-    //     'image-twotone',
-    //   ],
-    // },
-  ],
+  json: [],
 }
 
 // Iconify component (this changes import statement in generated file)
@@ -130,6 +110,15 @@ const target = join(__dirname, 'icons-bundle.js');
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 (async function () {
+  const scannedIcons = await collectUsedIcons(projectSrcDir)
+
+  if (sources.icons) {
+    sources.icons.push(...scannedIcons)
+    sources.icons = Array.from(new Set(sources.icons)).sort()
+  } else {
+    sources.icons = scannedIcons
+  }
+
   let bundle = commonJS
     ? `const { addCollection } = require('${component}');\n\n`
     : `import { addCollection } from '${component}';\n\n`
@@ -154,7 +143,13 @@ const target = join(__dirname, 'icons-bundle.js');
     // Sort icons by prefix
     const organizedList = organizeIconsList(sources.icons)
     for (const prefix in organizedList) {
-      const filename = require.resolve(`@iconify/json/json/${prefix}.json`)
+      let filename
+      try {
+        filename = require.resolve(`@iconify-json/${prefix}/icons.json`)
+      }
+      catch (err) {
+        filename = require.resolve(`@iconify/json/json/${prefix}.json`)
+      }
 
       sourcesJSON.push({
         filename,
@@ -269,8 +264,60 @@ const target = join(__dirname, 'icons-bundle.js');
   console.log(`Saved ${target} (${bundle.length} bytes)`)
 })().catch((err) => {
   console.error(err)
+  // 构建图标失败时必须终止构建，避免继续发布上一次遗留的超大 icons-bundle。
+  process.exitCode = 1
 })
 
+async function collectUsedIcons(rootDir: string): Promise<string[]> {
+  const icons = new Set<string>()
+  const files = await walkDirectory(rootDir)
+  const sourceFiles = files.filter(file => /\.(vue|ts|js|tsx|jsx)$/.test(file))
+
+  for (const file of sourceFiles) {
+    if (file.includes('/@iconify/')) {
+      continue
+    }
+
+    const content = await fs.readFile(file, 'utf8')
+
+    for (const match of content.matchAll(/\b(lucide|material-symbols|line-md|tabler):([a-z0-9-]+)\b/g)) {
+      icons.add(`${match[1]}:${match[2]}`)
+    }
+
+    for (const match of content.matchAll(/\bmdi:([a-z0-9-]+)\b/g)) {
+      icons.add(`mdi:${match[1]}`)
+    }
+
+    for (const match of content.matchAll(/\btabler-([a-z0-9-]+)\b/g)) {
+      icons.add(`tabler:${match[1]}`)
+    }
+
+    for (const match of content.matchAll(/\bmdi-([a-z0-9-]+)\b/g)) {
+      icons.add(`mdi:${match[1]}`)
+    }
+  }
+
+  return Array.from(icons).sort()
+}
+
+async function walkDirectory(dir: string): Promise<string[]> {
+  const entries = await fs.readdir(dir, { withFileTypes: true })
+  const files: string[] = []
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name)
+
+    if (entry.isDirectory()) {
+      files.push(...(await walkDirectory(fullPath)))
+      continue
+    }
+
+    files.push(fullPath)
+  }
+
+  return files
+}
+
 /**
  * Remove metadata from icon set
  */

src/@layouts/components/VerticalNavLayout.vue

@@ -1,7 +1,12 @@
 <script lang="ts">
-import { Transition } from 'vue'
 import { useDisplay } from 'vuetify'
 import VerticalNav from '@layouts/components/VerticalNav.vue'
+import {
+  readThemeCustomizerSettings,
+  THEME_CUSTOMIZER_CHANGE_EVENT,
+  type ThemeCustomizerSettings,
+} from '@/composables/useThemeCustomizer'
+import { usePWA } from '@/composables/usePWA'
 
 export default defineComponent({
   setup(props, { slots }) {
@@ -11,19 +16,62 @@ export default defineComponent({
 
     const route = useRoute()
     const { mdAndDown } = useDisplay()
+    const { appMode } = usePWA()
+    const themeLayout = ref(readThemeCustomizerSettings().layout)
+    const canUseDesktopLayout = computed(() => !mdAndDown.value && !appMode.value)
+    const isCollapsedLayout = computed(() => canUseDesktopLayout.value && themeLayout.value === 'collapsed')
+    const isHorizontalLayout = computed(() => canUseDesktopLayout.value && themeLayout.value === 'horizontal')
 
     // ℹ️ This is alternative to below two commented watcher
     // We want to show overlay if overlay nav is visible and want to hide overlay if overlay is hidden and vice versa.
     syncRef(isOverlayNavActive, isLayoutOverlayVisible)
 
     const scrollDistance = ref(window.scrollY)
+    const isDialogOpen = ref(false)
+    const wasScrolledBeforeDialog = ref(false)
+    let dialogObserver: MutationObserver | null = null
+
+    const handleScroll = () => {
+      scrollDistance.value = window.scrollY
+    }
+
+    const handleThemeCustomizerChange = (event: Event) => {
+      themeLayout.value = (event as CustomEvent<ThemeCustomizerSettings>).detail.layout
+    }
+
+    // 监听弹窗状态变化
+    const checkDialogState = () => {
+      const wasDialogOpen = isDialogOpen.value
+      isDialogOpen.value = document.documentElement.classList.contains('v-overlay-scroll-blocked')
+
+      // 当弹窗刚打开时，记录当前的滚动状态
+      if (!wasDialogOpen && isDialogOpen.value) {
+        wasScrolledBeforeDialog.value = scrollDistance.value > 10
+      }
+    }
 
     onMounted(() => {
-      window.addEventListener('scroll', () => {
-        scrollDistance.value = window.scrollY
+      window.addEventListener('scroll', handleScroll)
+      window.addEventListener(THEME_CUSTOMIZER_CHANGE_EVENT, handleThemeCustomizerChange)
+
+      // 初始检查弹窗状态
+      checkDialogState()
+
+      // 监听 DOM 变化以检测弹窗状态
+      dialogObserver = new MutationObserver(checkDialogState)
+      dialogObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['class'],
       })
     })
 
+    onBeforeUnmount(() => {
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener(THEME_CUSTOMIZER_CHANGE_EVENT, handleThemeCustomizerChange)
+      dialogObserver?.disconnect()
+      dialogObserver = null
+    })
+
     return () => {
       // 👉 Vertical nav
       const verticalNav = h(
@@ -38,26 +86,35 @@ export default defineComponent({
       )
 
       // 👉 Navbar
-      const navbar = h('header', { class: ['layout-navbar navbar-blur'] }, [
-        h(
-          'div',
-          { class: 'navbar-content-container' },
-          slots.navbar?.({
-            toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
-          }),
-        ),
-      ])
+      const navbar = h(
+        'header',
+        { class: ['layout-navbar navbar-blur'] },
+        [
+          h(
+            'div',
+            { class: 'navbar-content-container' },
+            [
+              slots.navbar?.({
+                toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
+              }),
+              // 👉 Dynamic Header Tab in NavBar
+              slots['dynamic-header-tab']?.()
+                ? h('div', { class: 'layout-dynamic-header-tab' }, slots['dynamic-header-tab']?.())
+                : null,
+            ].filter(Boolean),
+          ),
+        ].filter(Boolean),
+      )
 
       const main = h(
         'main',
         { class: 'layout-page-content' },
-        h(Transition, { name: 'fade-slide', mode: 'out-in', appear: true }, () =>
-          h('section', { class: 'page-content-container' }, slots.default?.()),
-        ),
+        h('section', { class: 'page-content-container' }, slots.default?.()),
       )
 
       // 👉 根据路由 meta 决定 footer 高度
       const shouldShowFooter = !route.meta.hideFooter
+      const isNavbarScrolled = scrollDistance.value > 5 || (isDialogOpen.value && wasScrolledBeforeDialog.value)
 
       // 👉 Footer
       const footer = h('footer', { class: 'layout-footer' }, [
@@ -85,8 +142,11 @@ export default defineComponent({
             'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid',
             'layout-navbar-fixed',
             mdAndDown.value && 'layout-overlay-nav',
+            isCollapsedLayout.value && 'layout-vertical-nav-collapsed',
+            isHorizontalLayout.value && 'layout-horizontal-nav-active',
+            isHorizontalLayout.value && isNavbarScrolled && 'layout-horizontal-nav-scrolled',
             route.meta.layoutWrapperClasses,
-            scrollDistance.value && 'window-scrolled',
+            !isHorizontalLayout.value && isNavbarScrolled && 'window-scrolled',
           ],
         },
         [verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay],
@@ -97,6 +157,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+/* stylelint-disable no-descending-specificity */
+
 @use '@configured-variables' as variables;
 @use '@layouts/styles/placeholders';
 @use '@layouts/styles/mixins';
@@ -108,8 +170,12 @@ export default defineComponent({
 }
 
 .layout-wrapper.layout-nav-type-vertical {
+  --layout-navbar-block-size: calc(
+    env(safe-area-inset-top, 0px) + #{variables.$layout-vertical-nav-navbar-height} + var(--navbar-tab-height)
+  );
+
   // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
-  block-size: 100%;
+  min-block-size: 100%;
 
   .layout-content-wrapper {
     display: flex;
@@ -123,11 +189,16 @@ export default defineComponent({
   .layout-navbar {
     position: fixed;
     z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
+    // iOS Safari 在地址栏收起和惯性滚动时可能把 fixed 顶栏和页面滚动层合成到一起，
+    // 单独提升顶栏图层可避免导航栏短暂上移到安全区下方。
+    backface-visibility: hidden;
+    block-size: var(--layout-navbar-block-size);
     inline-size: calc(100vw - variables.$layout-vertical-nav-width - 0.5rem);
     inset-block-start: 0;
+    transform: translate3d(0, 0, 0);
 
     .navbar-content-container {
-      block-size: calc(env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height);
+      block-size: var(--layout-navbar-block-size);
     }
 
     @at-root {
@@ -135,10 +206,6 @@ export default defineComponent({
         .layout-navbar {
           @if variables.$layout-vertical-nav-navbar-is-contained {
             @include mixins.boxed-content;
-          } @else {
-            .navbar-content-container {
-              // @include mixins.boxed-content;
-            }
           }
         }
       }
@@ -183,6 +250,211 @@ export default defineComponent({
   // Adjust right column pl when vertical nav is collapsed
   &.layout-vertical-nav-collapsed .layout-content-wrapper {
     padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
+
+    .page-content-container > div:first-child {
+      inline-size: calc(100vw - variables.$layout-vertical-nav-collapsed-width - 1rem);
+    }
+  }
+
+  &.layout-vertical-nav-collapsed .layout-navbar {
+    inline-size: calc(100vw - variables.$layout-vertical-nav-collapsed-width - 0.5rem);
+  }
+
+  &.layout-vertical-nav-collapsed .layout-vertical-nav:not(.overlay-nav) {
+    .nav-header {
+      justify-content: center;
+      margin-inline: 0;
+      padding-inline: 0;
+    }
+
+    .app-logo {
+      justify-content: center;
+      inline-size: 100%;
+      transform: none !important;
+    }
+
+    .app-logo > div {
+      display: flex;
+      overflow: hidden;
+      align-items: center;
+      justify-content: center;
+      block-size: 2.75rem;
+      inline-size: 2.75rem;
+    }
+
+    .app-logo svg {
+      block-size: 2.5rem;
+      inline-size: 2.5rem;
+    }
+
+    .app-logo h1,
+    .nav-item-title,
+    .nav-section-title {
+      display: none;
+    }
+
+    .nav-link > a {
+      justify-content: center;
+      border-radius: 0.75rem !important;
+      block-size: 2.75rem;
+      margin-inline: 0.75rem;
+      padding-inline: 0;
+    }
+
+    .nav-item-icon {
+      margin-inline-end: 0 !important;
+    }
+  }
+
+  &.layout-horizontal-nav-active {
+    .layout-vertical-nav:not(.overlay-nav) {
+      pointer-events: none;
+      transform: translateX(-100%);
+      visibility: hidden;
+    }
+
+    .layout-content-wrapper {
+      padding-inline-start: 0;
+    }
+
+    .layout-navbar {
+      background: rgb(var(--v-theme-background));
+      border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+      inline-size: 100%;
+      max-inline-size: none;
+      padding-inline: 0;
+    }
+
+    .navbar-content-container {
+      border: 0 !important;
+      border-radius: 0 !important;
+      background: transparent !important;
+      inline-size: 100%;
+      margin-inline: auto;
+      max-inline-size: variables.$layout-boxed-content-width;
+      padding-inline: 1.5rem;
+    }
+
+    .layout-page-content {
+      inline-size: 100%;
+      margin-inline: auto;
+      max-inline-size: variables.$layout-boxed-content-width;
+      padding-inline: 1rem;
+    }
+
+    .page-content-container > div:first-child {
+      inline-size: 100%;
+    }
+  }
+
+  @at-root {
+    .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed .layout-navbar {
+      backdrop-filter: blur(12px) saturate(1.2);
+      background: rgb(var(--v-theme-surface)) !important;
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 4%),
+        0 1px 2px rgba(0, 0, 0, 2%);
+    }
+
+    .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
+      .navbar-content-container {
+      backdrop-filter: none !important;
+      background: transparent !important;
+      background-color: transparent !important;
+      box-shadow: none !important;
+      filter: none !important;
+      padding-inline: 1.5rem !important;
+
+      &::before {
+        display: none !important;
+        backdrop-filter: none !important;
+        background: transparent !important;
+        background-color: transparent !important;
+        content: none !important;
+        filter: none !important;
+      }
+    }
+
+    html[data-theme='transparent'] .layout-wrapper.layout-horizontal-nav-active .layout-navbar,
+    .v-theme--transparent .layout-wrapper.layout-horizontal-nav-active .layout-navbar {
+      backdrop-filter: none !important;
+      background: transparent !important;
+      border-block-end-color: rgba(var(--v-theme-on-surface), 0.04);
+      box-shadow: none !important;
+    }
+
+    html[data-theme='transparent'] .layout-wrapper.layout-horizontal-nav-active .navbar-content-container,
+    .v-theme--transparent .layout-wrapper.layout-horizontal-nav-active .navbar-content-container {
+      backdrop-filter: none !important;
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+
+    // 透明主题的水平导航不叠加滚动磨砂层，避免中间区域出现一块更深的背景。
+    html[data-theme='transparent']
+      .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
+      .layout-navbar,
+    .v-theme--transparent
+      .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
+      .layout-navbar {
+      backdrop-filter: blur(var(--transparent-blur-light, 6px)) !important;
+      background: rgba(var(--v-theme-surface), var(--transparent-opacity-light, 0.2)) !important;
+      box-shadow: none !important;
+    }
+
+    // 透明主题滚动时只让外层导航栏承载整屏背景，避免内部最大宽度容器单独变深。
+    html[data-theme='transparent']
+      .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
+      .navbar-content-container,
+    .v-theme--transparent
+      .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
+      .navbar-content-container {
+      backdrop-filter: none !important;
+      background: transparent !important;
+      background-color: transparent !important;
+      box-shadow: none !important;
+      filter: none !important;
+      padding-inline: 1.5rem !important;
+
+      &::before {
+        display: none !important;
+        backdrop-filter: none !important;
+        background: transparent !important;
+        background-color: transparent !important;
+        content: none !important;
+        filter: none !important;
+      }
+    }
+
+    html[data-theme='light'][data-theme-semi-dark-menu='true'][data-theme-layout='vertical']
+      .layout-wrapper.layout-nav-type-vertical:not(.layout-horizontal-nav-active)
+      .layout-vertical-nav:not(.overlay-nav),
+    html[data-theme='light'][data-theme-semi-dark-menu='true'][data-theme-layout='collapsed']
+      .layout-wrapper.layout-nav-type-vertical:not(.layout-horizontal-nav-active)
+      .layout-vertical-nav:not(.overlay-nav) {
+      background: #2f3349;
+      color: #e7e3fc;
+
+      .app-logo h1,
+      .nav-section-title,
+      .nav-link > a,
+      .nav-item-icon {
+        color: rgba(231, 227, 252, 78%) !important;
+      }
+
+      .nav-link > a:hover {
+        background-color: rgba(231, 227, 252, 6%);
+      }
+
+      .nav-link > .router-link-exact-active {
+        color: #fff !important;
+
+        .nav-item-icon,
+        .nav-item-title {
+          color: #fff !important;
+        }
+      }
+    }
   }
 
   // 👉 Content height fixed
@@ -193,7 +465,7 @@ export default defineComponent({
 
     .layout-page-content {
       // display: flex;
-      overflow: hidden;
+      overflow: auto;
 
       .page-content-container {
         inline-size: 100%;

src/@layouts/styles/_default-layout.scss

@@ -6,15 +6,16 @@
 
 html {
   background: rgb(var(--v-theme-background));
-  min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
-  overflow-y: overlay;
+  min-block-size: 100vh;
+  min-block-size: 100dvh;
 }
 
 body {
+  overflow: visible !important;
   background: rgb(var(--v-theme-background));
   overscroll-behavior-y: contain;
 
-  --webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch;
 }
 
 body,
@@ -35,13 +36,13 @@ body,
 .layout-page-content {
   @include mixins.boxed-content(true);
 
-  overflow: hidden;
   flex-grow: 1;
+  overflow: clip visible;
 
   // TODO: Use grid gutter variable here;
   padding-block: 1.5rem;
-  padding-inline: 0.5rem;
   padding-block-start: calc(env(safe-area-inset-top) + 4.5rem);
+  padding-inline: 0.5rem;
 
   // display: flex;display
 

src/@layouts/styles/_global.scss

@@ -7,5 +7,7 @@
 
 html {
   box-sizing: border-box;
-  min-height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom))
+  min-block-size: 100%;
+  min-block-size: 100vh;
+  min-block-size: 100dvh;
 }

src/@layouts/types.d.ts

@@ -1,5 +1,6 @@
 import type { Component, Ref, VNode } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
+import type { UserPermissionKey } from '@/utils/permission'
 import { ContentWidth, FooterType, NavbarType } from './enums'
 
 export interface UserConfig {
@@ -119,6 +120,14 @@ export interface NavLink extends NavLinkProps, Partial<AclProperties> {
   badgeContent?: string
   badgeClass?: string
   disable?: boolean
+  permission?: UserPermissionKey
+}
+
+export interface NavMenuTabItem {
+  title: string
+  icon?: string
+  tab: string
+  description?: string
 }
 
 export interface NavMenu extends NavLink {
@@ -126,6 +135,8 @@ export interface NavMenu extends NavLink {
   description?: string
   admin?: boolean
   footer?: boolean
+  // 水平三级菜单和页面动态标签页共用的静态标签定义。
+  tabs?: NavMenuTabItem[]
 }
 
 // 👉 Vertical nav group

src/@validators/index.ts

@@ -1,4 +1,4 @@
-import type { ValidationRule } from 'vuetify/types/services/validation'
+type ValidationRule = (value: any) => string | boolean
 
 // 必输校验
 export const requiredValidator: ValidationRule = (value: any) => {

src/App.vue

@@ -1,29 +1,56 @@
 <script lang="ts" setup>
 import { useTheme } from 'vuetify'
-import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
 import { ensureRenderComplete, removeEl } from './@core/utils/dom'
 import api from '@/api'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore, useGlobalSettingsStore } from '@/stores'
 import { getBrowserLocale, setI18nLanguage } from './plugins/i18n'
 import { SupportedLocale } from '@/types/i18n'
 import { checkAndEmitUnreadMessages } from '@/utils/badge'
+import { preloadImage } from './@core/utils/image'
+import { globalLoadingStateManager } from '@/utils/loadingStateManager'
+import { addBackgroundTimer, removeBackgroundTimer } from '@/utils/backgroundManager'
+import PWAInstallPrompt from '@/components/PWAInstallPrompt.vue'
+import SharedDialogHost from '@/components/dialog/SharedDialogHost.vue'
+import { applyStoredThemeCustomizerAppearance } from '@/composables/useThemeCustomizer'
+import { completeLaunchLoading } from '@/composables/useLaunchLoading'
+import { usePWA } from '@/composables/usePWA'
+import { themeManager } from '@/utils/themeManager'
+import { applyDocumentThemeChrome, resolveThemeName } from '@/utils/themePalette'
+import { configureApexChartsTheme } from '@/utils/apexCharts'
+
+const LOGIN_WALLPAPER_ROUTE = '/login'
 
 // 生效主题
-const { global: globalTheme } = useTheme()
-let themeValue = localStorage.getItem('theme') || 'light'
-const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
-globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
+const vuetifyTheme = useTheme()
+const { global: globalTheme } = vuetifyTheme
+let themeValue = localStorage.getItem('theme') || 'auto'
+globalTheme.name.value = resolveThemeName(themeValue)
+applyStoredThemeCustomizerAppearance(vuetifyTheme)
+
+// 启动屏和 iOS safe area 在同一层显示，根节点底色需要尽早和当前主题保持一致。
+function syncRootLaunchPalette() {
+  const { background, primary } = globalTheme.current.value.colors
+
+  applyDocumentThemeChrome(themeValue, {
+    background,
+    persistLoaderColors: true,
+    primary,
+    resolvedTheme: globalTheme.name.value,
+  })
+}
 
 // 生效语言
 const localeValue = getBrowserLocale()
 setI18nLanguage(localeValue as SupportedLocale)
 
-// 显示状态
-const show = ref(false)
-
 // 检查是否登录
 const authStore = useAuthStore()
 const isLogin = computed(() => authStore.token)
+const route = useRoute()
+const { initializePWA } = usePWA()
+
+// 全局设置store
+const globalSettingsStore = useGlobalSettingsStore()
 
 // 生成背景图片key
 const loginStateKey = computed(() => (isLogin.value ? 'logged-in' : 'logged-out'))
@@ -32,211 +59,387 @@ const loginStateKey = computed(() => (isLogin.value ? 'logged-in' : 'logged-out'
 const backgroundImages = ref<string[]>([])
 const activeImageIndex = ref(0)
 const isTransparentTheme = computed(() => globalTheme.name.value === 'transparent')
-let backgroundRotationTimer: NodeJS.Timeout | null = null
+const shouldLoadBackgroundImages = computed(
+  () => (!isLogin.value && route.path === LOGIN_WALLPAPER_ROUTE) || (Boolean(isLogin.value) && isTransparentTheme.value),
+)
+let backgroundRetryTimer: number | null = null
+let backgroundRequestController: AbortController | null = null
+let authenticatedStateTimer: number | null = null
 
-// ApexCharts 全局配置
-declare global {
-  interface Window {
-    Apex: any
-  }
+function getStoredNumber(key: string, fallback: number, min: number, max: number) {
+  const parsed = Number.parseFloat(localStorage.getItem(key) || '')
+  if (!Number.isFinite(parsed)) return fallback
+
+  return Math.min(max, Math.max(min, parsed))
 }
 
-if (window.Apex) {
-  // 数据标签
-  window.Apex.dataLabels = {
-    formatter: function (_: number, { seriesIndex, w }: { seriesIndex: number; w: any }) {
-      // 如果有小数点，保留两位小数，否则保留整数
-      const data = w.config.series[seriesIndex]
-      return data.toFixed(data % 1 === 0 ? 0 : 1)
-    },
+function applyTransparentBackgroundSettings() {
+  document.documentElement.style.setProperty(
+    '--transparent-background-poster-opacity',
+    (1 - getStoredNumber('transparency-background-poster-opacity', 0, 0, 1)).toString(),
+  )
+  document.documentElement.style.setProperty(
+    '--transparent-background-blur',
+    `${getStoredNumber('transparency-background-blur', 16, 0, 30)}px`,
+  )
+}
+
+applyTransparentBackgroundSettings()
+
+// 心跳检测
+let heartbeatInterval: number | null = null
+let prefersColorSchemeMediaQuery: MediaQueryList | null = null
+
+// 启动心跳
+const startHeartbeat = () => {
+  // 如果已经有心跳，则先停止
+  if (heartbeatInterval) {
+    stopHeartbeat()
   }
-  // 图例
-  window.Apex.legend = {
-    labels: {
-      useSeriesColors: true,
-    },
-  }
-  // 标题
-  window.Apex.title = {
-    style: {
-      color: 'rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))',
-    },
+
+  // 开始心跳任务
+  heartbeatInterval = window.setInterval(async () => {
+    try {
+      if (isLogin.value) {
+        await api.get('system/ping')
+      }
+    } catch (error) {
+      console.warn('Heartbeat request failed:', error)
+    }
+  }, 5 * 60 * 1000)
+}
+
+// 停止心跳
+const stopHeartbeat = () => {
+  if (heartbeatInterval) {
+    window.clearInterval(heartbeatInterval)
+    heartbeatInterval = null
   }
 }
 
 // 更新data-theme属性以便CSS选择器能正确匹配
 function updateHtmlThemeAttribute(themeName: string) {
   document.documentElement.setAttribute('data-theme', themeName)
-  // 确保body元素也有相同的主题属性，以便更好地选择弹出窗口
   document.body.setAttribute('data-theme', themeName)
+  syncRootLaunchPalette()
+}
+
+function syncThemePreferenceFromStorage() {
+  themeValue = localStorage.getItem('theme') || 'auto'
+
+  const resolvedTheme = resolveThemeName(themeValue)
+  if (globalTheme.name.value !== resolvedTheme) {
+    globalTheme.name.value = resolvedTheme
+  }
+
+  applyStoredThemeCustomizerAppearance(vuetifyTheme)
+  updateHtmlThemeAttribute(resolvedTheme)
+  configureApexChartsTheme(resolvedTheme)
+
+  // 前台恢复时重新跑一次主题管理器，补齐 transparent CSS 和 auto 的实际 DOM 主题。
+  void themeManager
+    .setTheme(themeValue)
+    .then(() => {
+      updateHtmlThemeAttribute(globalTheme.name.value)
+    })
+    .catch(error => {
+      console.error('同步主题管理器失败:', error)
+    })
+}
+
+function handleSystemThemeChange() {
+  if ((localStorage.getItem('theme') || 'auto') === 'auto') {
+    syncThemePreferenceFromStorage()
+  }
+}
+
+function handleVisibilityThemeSync() {
+  if (document.visibilityState === 'visible') {
+    syncThemePreferenceFromStorage()
+  }
+}
+
+function handlePageShowThemeSync() {
+  syncThemePreferenceFromStorage()
 }
 
 // 获取背景图片
 async function fetchBackgroundImages() {
   try {
-    backgroundImages.value = await api.get(`/login/wallpapers`)
+    backgroundRequestController?.abort()
+    backgroundRequestController = new AbortController()
+    backgroundImages.value = await api.get(`/login/wallpapers`, {
+      signal: backgroundRequestController.signal,
+    })
     activeImageIndex.value = 0
   } catch (e) {
-    console.error(e)
+    throw e
+  }
+}
+
+// 背景图片轮换函数
+function rotateBackgroundImage() {
+  if (backgroundImages.value.length > 1) {
+    // 计算下一个图片索引
+    const nextIndex = (activeImageIndex.value + 1) % backgroundImages.value.length
+    // 预加载下一张图片
+    preloadImage(backgroundImages.value[nextIndex]).then(success => {
+      // 只有图片成功加载才切换
+      if (success) {
+        activeImageIndex.value = nextIndex
+      }
+    })
   }
 }
 
 // 开始背景图片轮换
 function startBackgroundRotation() {
-  // 清除轮换定时器
-  if (backgroundRotationTimer) clearInterval(backgroundRotationTimer)
+  // 清除现有定时器
+  removeBackgroundTimer('background-rotation')
 
   if (backgroundImages.value.length > 1) {
-    backgroundRotationTimer = setInterval(() => {
-      // 计算下一个图片索引
-      const nextIndex = (activeImageIndex.value + 1) % backgroundImages.value.length
-      // 预加载下一张图片
-      preloadImage(backgroundImages.value[nextIndex]).then(success => {
-        // 只有图片成功加载才切换
-        if (success) {
-          activeImageIndex.value = nextIndex
-        }
-      })
-    }, 10000) // 每10秒切换一次
+    // 使用优化的定时器管理器，后台时自动暂停
+    addBackgroundTimer(
+      'background-rotation',
+      rotateBackgroundImage,
+      10000, // 每10秒切换一次
+      {
+        runInBackground: false, // 后台时不运行
+        skipInitialRun: true, // 不需要立即执行
+      },
+    )
   }
 }
 
-// 预加载图片
-function preloadImage(url: string): Promise<boolean> {
-  return new Promise(resolve => {
-    const img = new Image()
+function stopBackgroundLoading() {
+  backgroundRequestController?.abort()
+  backgroundRequestController = null
 
-    img.onload = () => resolve(true)
-    img.onerror = () => resolve(false)
+  if (backgroundRetryTimer) {
+    window.clearTimeout(backgroundRetryTimer)
+    backgroundRetryTimer = null
+  }
 
-    // 设置超时，防止图片长时间加载
-    const timeout = setTimeout(() => {
-      img.src = ''
-      resolve(false)
-    }, 5000) // 5秒超时
+  removeBackgroundTimer('background-rotation')
+}
 
-    img.src = url
+async function initializeAuthenticatedState() {
+  if (!isLogin.value) return
 
-    // 如果图片已经缓存，onload可能不会触发
-    if (img.complete) {
-      clearTimeout(timeout)
-      resolve(true)
-    }
-  })
+  try {
+    globalLoadingStateManager.setLoadingState('global-settings', true)
+    await globalSettingsStore.initialize()
+    await globalSettingsStore.loadUserSettings()
+  } finally {
+    globalLoadingStateManager.setLoadingState('global-settings', false)
+  }
+}
+
+function scheduleAuthenticatedStateInitialization() {
+  if (authenticatedStateTimer) {
+    window.clearTimeout(authenticatedStateTimer)
+  }
+
+  // 登录后会立刻发生路由切换，稍后再拉取设置可避开导航中止请求。
+  authenticatedStateTimer = window.setTimeout(() => {
+    authenticatedStateTimer = null
+    initializeAuthenticatedState()
+  }, 150)
 }
 
 // 添加logo动画效果并延迟移除加载界面
-function animateAndRemoveLoader() {
+async function animateAndRemoveLoader() {
   const loadingBg = document.querySelector('#loading-bg') as HTMLElement
   if (loadingBg) {
-    // 先添加完成动画类
+    // 只收掉启动内容，背景层保持实色直到节点被移除，避免底部 safe area 先透出页面内容。
     loadingBg.classList.add('loading-complete')
+    await new Promise<void>(resolve => {
+      window.setTimeout(() => {
+        removeEl('#loading-bg')
 
-    // 等待动画完成后再移除元素
-    setTimeout(() => {
-      removeEl('#loading-bg')
-      // 将background属性从html的style中移除
-      document.documentElement.style.removeProperty('background')
-      // 显示页面
-      show.value = true
-    }, 500) // 与CSS动画持续时间匹配
+        // 启动阶段的根节点锁定只在 loader 存在时生效，移除后恢复正常页面与弹窗布局。
+        document.documentElement.removeAttribute('data-launch-loading')
+        document.documentElement.style.removeProperty('overflow')
+        document.body.style.removeProperty('overflow')
+        completeLaunchLoading()
+        resolve()
+      }, 120)
+    })
+  } else {
+    completeLaunchLoading()
+  }
+}
+
+// 检查PWA状态并移除加载界面
+async function removeLoadingWithStateCheck() {
+  try {
+    // 设置各个组件的加载状态
+    globalLoadingStateManager.setLoadingState('pwa-state', true)
+
+    // 静默检查PWA状态恢复
+    const pwaController = (window as any).pwaStateController
+    if (pwaController) {
+      await pwaController.waitForStateRestore()
+    }
+    globalLoadingStateManager.setLoadingState('pwa-state', false)
+
+    // PWA/App 模式会影响布局和底部导航，必须在启动屏退场前稳定下来。
+    await initializePWA()
+    await initializeAuthenticatedState()
+
+    // 等待所有加载完成
+    await globalLoadingStateManager.waitForAllComplete()
+
+    // 移除加载界面
+    await animateAndRemoveLoader()
+
+    // 检查未读消息
+    if (isLogin.value) {
+      checkAndEmitUnreadMessages()
+    }
+  } catch (error) {
+    // 即使出错也要移除加载界面
+    globalLoadingStateManager.reset()
+    await animateAndRemoveLoader()
   }
 }
 
 // 加载背景图片
-async function loadBackgroundImages() {
-  await fetchBackgroundImages()
-    .then(() => {
-      startBackgroundRotation()
-    })
-    .catch(() => {
-      // 3秒后重试
-      setTimeout(() => {
-        loadBackgroundImages()
-      }, 3000)
-    })
+async function loadBackgroundImages(retryCount = 0) {
+  const maxRetries = 3
+  try {
+    await fetchBackgroundImages()
+    startBackgroundRotation()
+  } catch (error: any) {
+    const isAbortError = error.name === 'AbortError' || error.code === 'ERR_CANCELED'
+    if (retryCount < maxRetries) {
+      const baseDelay = isAbortError ? 1000 : 3000
+      const retryDelay = Math.min(baseDelay * Math.pow(2, retryCount), 10000)
+      backgroundRetryTimer = window.setTimeout(() => {
+        backgroundRetryTimer = null
+        loadBackgroundImages(retryCount + 1)
+      }, retryDelay)
+    }
+  }
 }
 
 onMounted(async () => {
+  // 移除URL中的时间戳参数
+  const url = new URL(window.location.href)
+  if (url.searchParams.has('_t')) {
+    url.searchParams.delete('_t')
+    const newUrl = url.pathname + url.search + url.hash
+    window.history.replaceState(null, '', newUrl)
+  }
+
+  // 配置 ApexCharts
+  configureApexChartsTheme(globalTheme.name.value)
+
   // 初始化data-theme属性
   updateHtmlThemeAttribute(globalTheme.name.value)
 
-  // 默认隐藏页面
-  show.value = false
+  // 初始化主题管理器 - 统一处理主题初始化
+  await themeManager.setTheme(themeValue)
+  applyStoredThemeCustomizerAppearance(vuetifyTheme)
+  updateHtmlThemeAttribute(globalTheme.name.value)
 
-  // 加载背景图片
-  await loadBackgroundImages()
+  // 监听主题变化
+  watch(
+    () => globalTheme.name.value,
+    newTheme => {
+      // 更新HTML主题属性
+      updateHtmlThemeAttribute(newTheme)
+      // 重新配置ApexCharts以适应新主题
+      configureApexChartsTheme(newTheme)
+    },
+  )
 
-  // 移除加载动画
+  prefersColorSchemeMediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)') ?? null
+  prefersColorSchemeMediaQuery?.addEventListener('change', handleSystemThemeChange)
+  document.addEventListener('visibilitychange', handleVisibilityThemeSync)
+  window.addEventListener('pageshow', handlePageShowThemeSync)
+  window.addEventListener('focus', handlePageShowThemeSync)
+
+  // 登录页壁纸仅在未登录登录页需要，避免其他首屏额外发起图片列表请求。
+  watch(
+    shouldLoadBackgroundImages,
+    shouldLoad => {
+      stopBackgroundLoading()
+      if (shouldLoad) {
+        loadBackgroundImages()
+      } else if (!isTransparentTheme.value) {
+        backgroundImages.value = []
+      }
+    },
+    { immediate: true },
+  )
+
+  // 使用优化后的加载界面移除逻辑
   ensureRenderComplete(() => {
-    nextTick(() => {
-      setTimeout(() => {
-        // 移除加载动画，显示页面
-        animateAndRemoveLoader()
-
-        // 页面完全显示后，检查未读消息
-        setTimeout(() => {
-          checkAndEmitUnreadMessages()
-        }, 1000)
-      }, 1500)
-    })
+    nextTick(removeLoadingWithStateCheck)
   })
+  // 启动心跳
+  if (isLogin.value) {
+    startHeartbeat()
+  }
 
-  // 添加页面可见性变化监听
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') {
-      loadBackgroundImages()
-      // 页面恢复可见时检查未读消息
-      setTimeout(() => {
-        checkAndEmitUnreadMessages()
-      }, 500)
-    }
-  })
-
-  // 添加PWA的页面恢复事件监听
-  window.addEventListener('pageshow', event => {
-    // persisted属性为true表示页面是从bfcache中恢复的
-    if (event.persisted) {
-      loadBackgroundImages()
-      // PWA恢复时检查未读消息
-      setTimeout(() => {
-        checkAndEmitUnreadMessages()
-      }, 500)
+  // 登录状态可能在当前单页会话中变化，这里按需补齐登录后初始化和心跳。
+  watch(isLogin, loggedIn => {
+    if (loggedIn) {
+      startHeartbeat()
+      scheduleAuthenticatedStateInitialization()
+    } else {
+      if (authenticatedStateTimer) {
+        window.clearTimeout(authenticatedStateTimer)
+        authenticatedStateTimer = null
+      }
+      stopHeartbeat()
     }
   })
 })
 
 onUnmounted(() => {
-  // 移除页面可见性监听
-  document.removeEventListener('visibilitychange', () => {})
-  // 移除PWA的页面恢复事件监听
-  window.removeEventListener('pageshow', () => {})
-
-  // 清除轮换定时器
-  if (backgroundRotationTimer) {
-    clearInterval(backgroundRotationTimer)
-    backgroundRotationTimer = null
+  // 清除背景轮换定时器
+  stopBackgroundLoading()
+  if (authenticatedStateTimer) {
+    window.clearTimeout(authenticatedStateTimer)
+    authenticatedStateTimer = null
   }
+  // 停止心跳
+  stopHeartbeat()
+  prefersColorSchemeMediaQuery?.removeEventListener('change', handleSystemThemeChange)
+  prefersColorSchemeMediaQuery = null
+  document.removeEventListener('visibilitychange', handleVisibilityThemeSync)
+  window.removeEventListener('pageshow', handlePageShowThemeSync)
+  window.removeEventListener('focus', handlePageShowThemeSync)
 })
 </script>
 
 <template>
   <div class="app-wrapper">
     <!-- 透明主题背景 -->
-    <div v-if="backgroundImages.length > 0 && (isTransparentTheme || !isLogin)" class="background-container">
+    <div
+      v-if="backgroundImages.length > 0 && (isTransparentTheme || !isLogin)"
+      class="background-container"
+      :class="{ 'is-transparent-theme': isTransparentTheme && isLogin }"
+    >
       <div
         v-for="(imageUrl, index) in backgroundImages"
         :key="`bg-${index}-${loginStateKey}`"
         class="background-image"
         :class="{ 'active': index === activeImageIndex }"
         :style="{ 'backgroundImage': `url(${imageUrl})` }"
-      ></div>
+      />
       <!-- 全局磨砂层 -->
       <div v-if="isLogin && isTransparentTheme" class="global-blur-layer"></div>
     </div>
     <!-- 页面内容 -->
-    <VApp v-show="show" :class="{ 'transparent-app': isTransparentTheme }">
+    <VApp>
       <RouterView />
+      <!-- 全局共享弹窗入口，列表与卡片按需在这里挂载业务弹窗。 -->
+      <SharedDialogHost />
+      <!-- PWA安装提示 -->
+      <PWAInstallPrompt />
     </VApp>
   </div>
 </template>
@@ -286,11 +489,15 @@ onUnmounted(() => {
   }
 }
 
+.background-container.is-transparent-theme .background-image.active {
+  opacity: var(--transparent-background-poster-opacity, 1);
+}
+
 /* 全局磨砂层 */
 .global-blur-layer {
   position: absolute;
   z-index: 1;
-  backdrop-filter: blur(16px);
+  backdrop-filter: blur(var(--transparent-background-blur, 16px));
   background-color: rgba(128, 128, 128, 30%);
   block-size: 100%;
   inline-size: 100%;

src/ace-config.ts

@@ -14,6 +14,10 @@ import modeIniUrl from 'ace-builds/src-noconflict/mode-ini?url'
 
 import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url'
 
+import themeGithubDarkUrl from 'ace-builds/src-noconflict/theme-github_dark?url'
+
+import themeGithubLightDefaultUrl from 'ace-builds/src-noconflict/theme-github_light_default?url'
+
 import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url'
 
 import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url'
@@ -44,6 +48,488 @@ import snippertsIniUrl from 'ace-builds/src-noconflict/snippets/ini?url'
 
 import 'ace-builds/src-noconflict/ext-language_tools'
 
+const aceModule = ace as typeof ace & {
+  define?: (moduleName: string, deps: string[], payload: (...args: any[]) => void) => void
+}
+
+function registerJinja2Mode() {
+  aceModule.define?.(
+    'ace/mode/jinja2_highlight_rules',
+    ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
+    (require: any, exports: any) => {
+      const oop = require('../lib/oop')
+      const TextHighlightRules = require('./text_highlight_rules').TextHighlightRules
+
+      const Jinja2HighlightRules = function (this: any) {
+        const tags =
+          'autoescape|block|call|do|elif|else|endautoescape|endblock|endcall|endfilter|endfor|endif|endmacro|endraw|endset|endtrans|endwith|extends|filter|for|from|if|import|include|macro|raw|set|trans|with'
+        const filters =
+          'abs|attr|batch|capitalize|center|count|d|default|dictsort|e|escape|filesizeformat|first|float|forceescape|format|groupby|indent|int|items|join|last|length|list|lower|map|max|min|pprint|random|reject|rejectattr|replace|reverse|round|safe|select|selectattr|slice|sort|string|striptags|sum|title|tojson|trim|truncate|unique|upper|urlencode|urlize|wordcount|wordwrap|xmlattr'
+        const functions = 'cycler|dict|joiner|lipsum|namespace|range'
+        const tests =
+          'boolean|defined|divisibleby|eq|escaped|even|false|filter|float|ge|gt|in|integer|iterable|le|lower|lt|mapping|ne|none|number|odd|sameas|sequence|string|test|true|undefined|upper'
+        const operators = 'and|in|is|not|or'
+        const contextVariables =
+          'title|en_title|original_title|season|season_fmt|year|title_year|type|category|vote_average|poster|backdrop|season_year|actors|overview|tmdbid|imdbid|doubanid|episode_title|episode_date|original_name|name|en_name|episode|season_episode|part|customization|fps|resourceType|effect|edition|videoFormat|resource_term|releaseGroup|videoCodec|audioCodec|webSource|torrent_title|pubdate|freedate|seeders|volume_factor|hit_and_run|labels|description|site_name|size|transfer_type|file_count|total_size|err_msg|fileExt|__meta__|__mediainfo__|__torrentinfo__|__transferinfo__|__episodes_info__'
+
+        const keywordMapper = this.createKeywordMapper(
+          {
+            'keyword.control.jinja2': tags,
+            'keyword.operator.jinja2': operators,
+            'support.function.jinja2': [filters, functions, tests].join('|'),
+            'constant.language.jinja2': 'false|False|none|None|null|true|True',
+          },
+          'identifier',
+        )
+
+        const jinjaExpressionRules = [
+          {
+            token: 'string',
+            regex: "'",
+            push: 'jinja2-qstring',
+          },
+          {
+            token: 'string',
+            regex: '"',
+            push: 'jinja2-qqstring',
+          },
+          {
+            token: 'constant.numeric',
+            regex: /[+-]?(?:0[xX][0-9a-fA-F]+|\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?\b/,
+          },
+          {
+            token: ['keyword.operator.other.jinja2', 'text', 'support.function.jinja2'],
+            regex: `(\\|)(\\s*)(${filters})\\b`,
+          },
+          {
+            token: ['keyword.operator.jinja2', 'text', 'support.function.jinja2'],
+            regex: `(\\bis\\b)(\\s*)(${tests})\\b`,
+          },
+          {
+            token: ['support.function.jinja2', 'text', 'paren.lparen'],
+            regex: `\\b(${functions})(\\s*)(\\()`,
+          },
+          {
+            token: 'variable.language.jinja2',
+            regex: `\\b(?:${contextVariables})\\b`,
+          },
+          {
+            token: keywordMapper,
+            regex: /[a-zA-Z_$][a-zA-Z0-9_$]*\b/,
+          },
+          {
+            token: 'keyword.operator.assignment.jinja2',
+            regex: /=|~/,
+          },
+          {
+            token: 'keyword.operator.comparison.jinja2',
+            regex: /==|!=|<=|>=|<|>/,
+          },
+          {
+            token: 'keyword.operator.arithmetic.jinja2',
+            regex: /\+|-|\/\/|\/|%|\*\*|\*/,
+          },
+          {
+            token: 'keyword.operator.other.jinja2',
+            regex: /\.{2}|\||:/,
+          },
+          {
+            token: 'punctuation.operator.jinja2',
+            regex: /[.,;?]/,
+          },
+          {
+            token: 'paren.lparen',
+            regex: /[\[({]/,
+          },
+          {
+            token: 'paren.rparen',
+            regex: /[\])}]/,
+          },
+          {
+            token: 'text',
+            regex: /\s+/,
+          },
+        ]
+
+        this.$rules = {
+          start: [
+            {
+              token: 'comment.block.jinja2',
+              regex: /\{#-?/,
+              push: 'jinja2-comment',
+            },
+            {
+              token: 'constant.language.jinja2',
+              regex: /\{\{-?/,
+              push: 'jinja2-expression',
+            },
+            {
+              token: 'keyword.control.jinja2',
+              regex: /\{%-?/,
+              push: 'jinja2-statement',
+            },
+          ],
+          'jinja2-comment': [
+            {
+              token: 'comment.block.jinja2',
+              regex: /-?#\}/,
+              next: 'pop',
+            },
+            {
+              defaultToken: 'comment.block.jinja2',
+            },
+          ],
+          'jinja2-expression': [
+            {
+              token: 'constant.language.jinja2',
+              regex: /-?\}\}/,
+              next: 'pop',
+            },
+            ...jinjaExpressionRules,
+          ],
+          'jinja2-statement': [
+            {
+              token: 'keyword.control.jinja2',
+              regex: /-?%\}/,
+              next: 'pop',
+            },
+            ...jinjaExpressionRules,
+          ],
+          'jinja2-qqstring': [
+            {
+              token: 'constant.language.escape',
+              regex: /\\[\\"ntr]/,
+            },
+            {
+              token: 'string',
+              regex: '"',
+              next: 'pop',
+            },
+            {
+              defaultToken: 'string',
+            },
+          ],
+          'jinja2-qstring': [
+            {
+              token: 'constant.language.escape',
+              regex: /\\[\\'ntr]/,
+            },
+            {
+              token: 'string',
+              regex: "'",
+              next: 'pop',
+            },
+            {
+              defaultToken: 'string',
+            },
+          ],
+        }
+
+        this.normalizeRules()
+      }
+
+      oop.inherits(Jinja2HighlightRules, TextHighlightRules)
+      exports.Jinja2HighlightRules = Jinja2HighlightRules
+    },
+  )
+
+  aceModule.define?.(
+    'ace/mode/jinja2',
+    ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/jinja2_highlight_rules'],
+    (require: any, exports: any) => {
+      const oop = require('../lib/oop')
+      const TextMode = require('./text').Mode
+      const Jinja2HighlightRules = require('./jinja2_highlight_rules').Jinja2HighlightRules
+
+      const Mode = function (this: any) {
+        TextMode.call(this)
+        this.HighlightRules = Jinja2HighlightRules
+      }
+
+      oop.inherits(Mode, TextMode)
+
+      ;(function (this: any) {
+        this.$id = 'ace/mode/jinja2'
+        this.blockComment = { start: '{#', end: '#}' }
+      }).call(Mode.prototype)
+
+      exports.Mode = Mode
+    },
+  )
+
+  aceModule.define?.('ace/snippets/jinja2', ['require', 'exports', 'module'], (_require: any, exports: any) => {
+    exports.snippetText =
+      'snippet if\n\t{% if ${1:condition} %}\n\t\t${0}\n\t{% endif %}\n' +
+      'snippet for\n\t{% for ${1:item} in ${2:items} %}\n\t\t${0}\n\t{% endfor %}\n' +
+      'snippet var\n\t{{ ${1:name} }}\n'
+    exports.scope = 'jinja2'
+  })
+
+  aceModule.define?.(
+    'ace/mode/jinja2_json_highlight_rules',
+    ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
+    (require: any, exports: any) => {
+      const oop = require('../lib/oop')
+      const TextHighlightRules = require('./text_highlight_rules').TextHighlightRules
+
+      const Jinja2JsonHighlightRules = function (this: any) {
+        const tags =
+          'autoescape|block|call|do|elif|else|endautoescape|endblock|endcall|endfilter|endfor|endif|endmacro|endraw|endset|endtrans|endwith|extends|filter|for|from|if|import|include|macro|raw|set|trans|with'
+        const filters =
+          'abs|attr|batch|capitalize|center|count|d|default|dictsort|e|escape|filesizeformat|first|float|forceescape|format|groupby|indent|int|items|join|last|length|list|lower|map|max|min|pprint|random|reject|rejectattr|replace|reverse|round|safe|select|selectattr|slice|sort|string|striptags|sum|title|tojson|trim|truncate|unique|upper|urlencode|urlize|wordcount|wordwrap|xmlattr'
+        const functions = 'cycler|dict|joiner|lipsum|namespace|range'
+        const tests =
+          'boolean|defined|divisibleby|eq|escaped|even|false|filter|float|ge|gt|in|integer|iterable|le|lower|lt|mapping|ne|none|number|odd|sameas|sequence|string|test|true|undefined|upper'
+        const operators = 'and|in|is|not|or'
+        const contextVariables =
+          'title|en_title|original_title|season|season_fmt|year|title_year|type|category|vote_average|poster|backdrop|season_year|actors|overview|tmdbid|imdbid|doubanid|episode_title|episode_date|original_name|name|en_name|episode|season_episode|part|customization|fps|resourceType|effect|edition|videoFormat|resource_term|releaseGroup|videoCodec|audioCodec|webSource|torrent_title|pubdate|freedate|seeders|volume_factor|hit_and_run|labels|description|site_name|size|transfer_type|file_count|total_size|err_msg|fileExt|__meta__|__mediainfo__|__torrentinfo__|__transferinfo__|__episodes_info__'
+
+        const keywordMapper = this.createKeywordMapper(
+          {
+            'keyword.control.jinja2': tags,
+            'keyword.operator.jinja2': operators,
+            'support.function.jinja2': [filters, functions, tests].join('|'),
+            'constant.language.jinja2': 'false|False|none|None|null|true|True',
+          },
+          'identifier',
+        )
+
+        const jinjaRules = [
+          {
+            token: 'string',
+            regex: "'",
+            push: 'jinja2-json-qstring',
+          },
+          {
+            token: 'constant.language.escape',
+            regex: /\\(?:x[0-9a-fA-F]{2}|u[0-9a-fA-F]{4}|["\\\/bfnrt])/,
+          },
+          {
+            token: 'constant.numeric',
+            regex: /[+-]?(?:0[xX][0-9a-fA-F]+|\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?\b/,
+          },
+          {
+            token: ['keyword.operator.other.jinja2', 'text', 'support.function.jinja2'],
+            regex: `(\\|)(\\s*)(${filters})\\b`,
+          },
+          {
+            token: ['keyword.operator.jinja2', 'text', 'support.function.jinja2'],
+            regex: `(\\bis\\b)(\\s*)(${tests})\\b`,
+          },
+          {
+            token: ['support.function.jinja2', 'text', 'paren.lparen'],
+            regex: `\\b(${functions})(\\s*)(\\()`,
+          },
+          {
+            token: 'variable.language.jinja2',
+            regex: `\\b(?:${contextVariables})\\b`,
+          },
+          {
+            token: keywordMapper,
+            regex: /[a-zA-Z_$][a-zA-Z0-9_$]*\b/,
+          },
+          {
+            token: 'keyword.operator.assignment.jinja2',
+            regex: /=|~/,
+          },
+          {
+            token: 'keyword.operator.comparison.jinja2',
+            regex: /==|!=|<=|>=|<|>/,
+          },
+          {
+            token: 'keyword.operator.arithmetic.jinja2',
+            regex: /\+|-|\/\/|\/|%|\*\*|\*/,
+          },
+          {
+            token: 'keyword.operator.other.jinja2',
+            regex: /\.{2}|\||:/,
+          },
+          {
+            token: 'punctuation.operator.jinja2',
+            regex: /[.,;?]/,
+          },
+          {
+            token: 'paren.lparen',
+            regex: /[\[({]/,
+          },
+          {
+            token: 'paren.rparen',
+            regex: /[\])}]/,
+          },
+          {
+            token: 'text',
+            regex: /\s+/,
+          },
+        ]
+
+        this.$rules = {
+          start: [
+            {
+              token: 'variable',
+              regex: /"(?:(?:\\.)|(?:[^"\\]))*?"\s*(?=:)/,
+            },
+            {
+              token: 'string',
+              regex: '"',
+              push: 'json-string',
+            },
+            {
+              token: 'constant.numeric',
+              regex: /0[xX][0-9a-fA-F]+\b/,
+            },
+            {
+              token: 'constant.numeric',
+              regex: /[+-]?\d+(?:(?:\.\d*)?(?:[eE][+-]?\d+)?)?\b/,
+            },
+            {
+              token: 'constant.language.boolean',
+              regex: /(?:true|false|null)\b/,
+            },
+            {
+              token: 'text',
+              regex: /['](?:(?:\\.)|(?:[^'\\]))*?[']/,
+            },
+            {
+              token: 'comment',
+              regex: /\/\/.*$/,
+            },
+            {
+              token: 'comment.start',
+              regex: /\/\*/,
+              push: 'comment',
+            },
+            {
+              token: 'paren.lparen',
+              regex: /[[({]/,
+            },
+            {
+              token: 'paren.rparen',
+              regex: /[\])}]/,
+            },
+            {
+              token: 'punctuation.operator',
+              regex: /[:,]/,
+            },
+            {
+              token: 'text',
+              regex: /\s+/,
+            },
+          ],
+          'json-string': [
+            {
+              token: 'constant.language.escape',
+              regex: /\\(?:x[0-9a-fA-F]{2}|u[0-9a-fA-F]{4}|["\\\/bfnrt])/,
+            },
+            {
+              token: 'comment.block.jinja2',
+              regex: /\{#-?/,
+              push: 'jinja2-json-comment',
+            },
+            {
+              token: 'constant.language.jinja2',
+              regex: /\{\{-?/,
+              push: 'jinja2-json-expression',
+            },
+            {
+              token: 'keyword.control.jinja2',
+              regex: /\{%-?/,
+              push: 'jinja2-json-statement',
+            },
+            {
+              token: 'string',
+              regex: /"|$/,
+              next: 'pop',
+            },
+            {
+              defaultToken: 'string',
+            },
+          ],
+          comment: [
+            {
+              token: 'comment.end',
+              regex: /\*\//,
+              next: 'pop',
+            },
+            {
+              defaultToken: 'comment',
+            },
+          ],
+          'jinja2-json-comment': [
+            {
+              token: 'comment.block.jinja2',
+              regex: /-?#\}/,
+              next: 'pop',
+            },
+            {
+              defaultToken: 'comment.block.jinja2',
+            },
+          ],
+          'jinja2-json-expression': [
+            {
+              token: 'constant.language.jinja2',
+              regex: /-?\}\}/,
+              next: 'pop',
+            },
+            ...jinjaRules,
+          ],
+          'jinja2-json-statement': [
+            {
+              token: 'keyword.control.jinja2',
+              regex: /-?%\}/,
+              next: 'pop',
+            },
+            ...jinjaRules,
+          ],
+          'jinja2-json-qstring': [
+            {
+              token: 'constant.language.escape',
+              regex: /\\[\\'ntr]/,
+            },
+            {
+              token: 'string',
+              regex: "'",
+              next: 'pop',
+            },
+            {
+              defaultToken: 'string',
+            },
+          ],
+        }
+
+        this.normalizeRules()
+      }
+
+      oop.inherits(Jinja2JsonHighlightRules, TextHighlightRules)
+      exports.Jinja2JsonHighlightRules = Jinja2JsonHighlightRules
+    },
+  )
+
+  aceModule.define?.(
+    'ace/mode/jinja2_json',
+    ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/jinja2_json_highlight_rules'],
+    (require: any, exports: any) => {
+      const oop = require('../lib/oop')
+      const TextMode = require('./text').Mode
+      const Jinja2JsonHighlightRules = require('./jinja2_json_highlight_rules').Jinja2JsonHighlightRules
+
+      const Mode = function (this: any) {
+        TextMode.call(this)
+        this.HighlightRules = Jinja2JsonHighlightRules
+      }
+
+      oop.inherits(Mode, TextMode)
+
+      ;(function (this: any) {
+        this.lineCommentStart = '//'
+        this.blockComment = { start: '/*', end: '*/' }
+        this.$id = 'ace/mode/jinja2_json'
+      }).call(Mode.prototype)
+
+      exports.Mode = Mode
+    },
+  )
+}
+
 ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
 ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
 ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl)
@@ -51,6 +537,8 @@ ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl)
 ace.config.setModuleUrl('ace/mode/css', modeCssUrl)
 ace.config.setModuleUrl('ace/mode/ini', modeIniUrl)
 ace.config.setModuleUrl('ace/theme/github', themeGithubUrl)
+ace.config.setModuleUrl('ace/theme/github_dark', themeGithubDarkUrl)
+ace.config.setModuleUrl('ace/theme/github_light_default', themeGithubLightDefaultUrl)
 ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl)
 ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl)
 ace.config.setModuleUrl('ace/mode/base', workerBaseUrl)
@@ -61,9 +549,10 @@ ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl)
 ace.config.setModuleUrl('ace/mode/css_worker', workerCssUrl)
 ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl)
 ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl)
-ace.config.setModuleUrl('ace/snippets/javascript', snippetsYamlUrl)
+ace.config.setModuleUrl('ace/snippets/yaml', snippetsYamlUrl)
 ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl)
 ace.config.setModuleUrl('ace/snippets/css', snippertsCssUrl)
 ace.config.setModuleUrl('ace/snippets/ini', snippertsIniUrl)
 
+registerJinja2Mode()
 ace.require('ace/ext/language_tools')

src/api/constants.ts

@@ -26,6 +26,11 @@ export const storageAttributes = [
     icon: 'mdi-server-network-outline',
     remote: true,
   },
+  {
+    type: 'smb',
+    icon: 'mdi-folder-network-outline',
+    remote: true,
+  },
 ]
 
 export const storageIconDict = storageAttributes.reduce((dict, item) => {
@@ -47,6 +52,10 @@ export const downloaderOptions = [
     value: 'transmission',
     title: i18n.global.t('setting.system.transmission'),
   },
+  {
+    value: 'rtorrent',
+    title: i18n.global.t('setting.system.rtorrent'),
+  },
 ]
 
 export const downloaderDict = downloaderOptions.reduce((dict, item) => {
@@ -59,6 +68,10 @@ export const mediaServerOptions = [
     value: 'emby',
     title: i18n.global.t('setting.system.emby'),
   },
+  {
+    value: 'zspace',
+    title: i18n.global.t('setting.system.zspace'),
+  },
   {
     value: 'jellyfin',
     title: i18n.global.t('setting.system.jellyfin'),
@@ -71,6 +84,10 @@ export const mediaServerOptions = [
     value: 'trimemedia',
     title: i18n.global.t('setting.system.trimeMedia'),
   },
+  {
+    value: 'ugreen',
+    title: i18n.global.t('setting.system.ugreen'),
+  },
 ]
 
 export const mediaServerDict = mediaServerOptions.reduce((dict, item) => {
@@ -269,6 +286,10 @@ export const notificationSwitchOptions = [
     title: i18n.global.t('notificationSwitch.plugin'),
     value: '插件',
   },
+  {
+    title: i18n.global.t('notificationSwitch.agent'),
+    value: '智能体',
+  },
   {
     title: i18n.global.t('notificationSwitch.other'),
     value: '其它',
@@ -339,6 +360,10 @@ export const actionStepOptions = [
     title: i18n.global.t('actionStep.invokePlugin'),
     value: '调用插件',
   },
+  {
+    title: i18n.global.t('actionStep.note'),
+    value: '备注',
+  },
 ]
 
 // 操作步骤字典

src/api/index.ts

@@ -1,6 +1,8 @@
 import axios from 'axios'
 import router from '@/router'
 import { useAuthStore } from '@/stores'
+import { initializeRequestOptimizer } from '@/utils/requestOptimizer'
+import { useGlobalOfflineStatus } from '@/composables/useOfflineStatus'
 
 // 创建axios实例
 const api = axios.create({
@@ -17,6 +19,9 @@ declare global {
 // 将 API 实例暴露到全局，供插件使用
 window.MoviePilotAPI = api
 
+// 初始化请求优化器（必须在其他拦截器之前）
+initializeRequestOptimizer(api)
+
 // 添加请求拦截器
 api.interceptors.request.use(config => {
   // 认证 Store
@@ -28,15 +33,47 @@ api.interceptors.request.use(config => {
   return config
 })
 
+// 离线状态管理
+const globalOfflineStatus = useGlobalOfflineStatus()
+
 // 添加响应拦截器
 api.interceptors.response.use(
   response => {
+    // 成功响应时，清除应用离线状态并重置连续错误计数
+    globalOfflineStatus.setAppOffline(false)
+    globalOfflineStatus.resetConsecutiveErrors()
     return response.data
   },
   error => {
     if (!error.response) {
-      // 请求超时
-      return Promise.reject(new Error(error))
+      // 网络错误或请求超时 - 通知离线状态管理系统
+      const isNetworkError =
+        error.code === 'NETWORK_ERROR' ||
+        error.code === 'ERR_NETWORK' ||
+        error.code === 'ECONNABORTED' ||
+        error.name === 'NetworkError'
+
+      if (isNetworkError) {
+        let reason = 'Network connection failed'
+        if (error.code === 'ECONNABORTED') {
+          reason = 'Request timeout'
+        }
+        // 记录网络错误，只有连续三次才会设置为离线模式
+        globalOfflineStatus.recordNetworkError(reason)
+      }
+
+      if (error.code === 'NETWORK_ERROR' || error.code === 'ERR_NETWORK') {
+        // 网络连接问题
+        return Promise.reject(new Error('Network connection failed, please check your network status'))
+      } else if (error.code === 'ECONNABORTED') {
+        // 请求超时
+        return Promise.reject(new Error('Request timeout, please try again later'))
+      } else if (error.name === 'AbortError') {
+        // 请求被中止（路由切换等）
+        return Promise.reject(new Error('Request cancelled'))
+      }
+      // 其他网络错误
+      return Promise.reject(new Error(error.message || 'Network error'))
     } else if (error.response.status === 403) {
       // 认证 Store
       const authStore = useAuthStore()

src/api/types.ts

@@ -46,8 +46,10 @@ export interface Subscribe {
   start_episode?: number
   // 缺失集数
   lack_episode?: number
+  // 已完成集数（普通订阅 = 已入库集数，洗版订阅 = 起始集前 + [start, total] 范围内 priority==100 命中数）
+  completed_episode?: number
   // 附加信息
-  note?: string
+  note?: string | number[]
   // 状态：N-新建 R-订阅中 P-待定 S-暂停
   state: string
   // 最后更新时间
@@ -58,10 +60,14 @@ export interface Subscribe {
   sites: number[]
   // 是否洗版，数字或者boolean
   best_version: any
+  // 是否只洗全集整包，数字或者boolean
+  best_version_full?: any
   // 使用 imdbid 搜索
   search_imdbid?: any
   // 当前优先级
   current_priority: number
+  // 洗版时已下载剧集的优先级状态
+  episode_priority?: Record<string, number>
   // 保存目录
   save_path?: string
   // 时间
@@ -144,6 +150,42 @@ export interface SubscribeShare {
   episode_group?: string
 }
 
+// 工作流分享
+export interface WorkflowShare {
+  // 分享ID
+  id?: string
+  // 工作流ID
+  workflow_id?: string
+  // 分享标题
+  share_title?: string
+  // 分享说明
+  share_comment?: string
+  // 分享人
+  share_user?: string
+  // 分享人唯一ID
+  share_uid?: string
+  // 工作流名称
+  name?: string
+  // 工作流描述
+  description?: string
+  // 定时器
+  timer?: string
+  // 触发类型：timer-定时触发 event-事件触发 manual-手动触发
+  trigger_type?: string
+  // 事件类型（当trigger_type为event时使用）
+  event_type?: string
+  // 动作列表
+  actions?: any[]
+  // 动作流
+  flows?: any[]
+  // 上下文
+  context?: string
+  // 时间
+  date?: string
+  // 复用次数
+  count?: number
+}
+
 // 历史记录
 export interface TransferHistory {
   // ID
@@ -278,6 +320,8 @@ export interface MediaInfo {
   production_countries?: any[]
   // 语种
   spoken_languages?: string[]
+  // 数字/实体发行日期
+  release_dates?: MediaRelease[]
   // 状态
   status?: string
   // 标签
@@ -332,6 +376,18 @@ export interface TmdbSeason {
   vote_average?: number
 }
 
+// 发行信息
+export interface MediaRelease {
+  // 发行日期
+  date: string
+  // 发行地区
+  iso_code: string
+  // 备注
+  note?: string
+  // 发行类型
+  type: number
+}
+
 // TMDB集信息
 export interface TmdbEpisode {
   // 上映日期
@@ -484,7 +540,7 @@ export interface SiteUserData {
   // 用户名
   username?: string
   // 用户ID
-  userid?: number
+  userid?: string
   // 用户等级
   user_level?: string
   // 加入时间
@@ -594,6 +650,12 @@ export interface Plugin {
   has_page?: boolean
   // 是否有新版本
   has_update?: boolean
+  // 主系统版本是否兼容
+  system_version_compatible?: boolean
+  // 主系统版本兼容提示
+  system_version_message?: string
+  // 主系统版本限定范围
+  system_version?: string
   // 是否本地插件
   is_local?: boolean
   // 插件仓库地址
@@ -606,6 +668,17 @@ export interface Plugin {
   page_open?: boolean
 }
 
+// 插件侧栏全页导航项（与后端 PluginSidebarNavItem 对齐）
+export interface PluginSidebarNavItem {
+  plugin_id: string
+  nav_key: string
+  title: string
+  icon: string
+  section: 'start' | 'discovery' | 'subscribe' | 'organize' | 'system'
+  permission?: 'subscribe' | 'discovery' | 'search' | 'manage' | 'admin' | null
+  order: number
+}
+
 // 渲染结构
 export interface RenderProps {
   component: string
@@ -629,6 +702,8 @@ export interface DashboardItem {
   attrs: { [key: string]: any }
   // col列数
   cols: { [key: string]: number }
+  // Grid行数
+  rows?: number
   // 页面元素
   elements: RenderProps[]
   // 渲染方式
@@ -693,6 +768,58 @@ export interface TorrentInfo {
   category: string
 }
 
+// 字幕信息
+export interface SubtitleInfo {
+  // 站点ID
+  site?: number
+  // 站点名称
+  site_name?: string
+  // 站点Cookie
+  site_cookie?: string
+  // 站点UA
+  site_ua?: string
+  // 站点是否使用代理
+  site_proxy?: boolean
+  // 站点优先级
+  site_order?: number
+  // 字幕标题
+  title?: string
+  // 字幕描述
+  description?: string
+  // 字幕下载链接
+  enclosure?: string
+  // 详情页面
+  page_url?: string
+  // 语言
+  language?: string
+  // 语言图标
+  language_icon?: string
+  // 字幕大小
+  size?: number
+  // 发布时间
+  pubdate?: string
+  // 已过时间
+  date_elapsed?: string
+  // 点击/下载次数
+  grabs?: number
+  // 上传者
+  uploader?: string
+  // 举报页面
+  report_url?: string
+  // 种子ID
+  torrent_id?: string
+  // 字幕ID
+  subtitle_id?: string
+  // 下载文件名
+  file_name?: string
+  // 识别元数据
+  meta_info?: MetaInfo
+  // SxxExx
+  season_episode?: string
+  // 集列表
+  episode_list?: number[]
+}
+
 // 识别元数据
 export interface MetaInfo {
   // 是否处理的文件
@@ -769,6 +896,8 @@ export interface MetaInfo {
   audio_term: string
   // 资源类型+特效
   edition: string
+  // 流媒体平台
+  web_source: string
   // 应用的自定义识别词
   apply_words: string[]
 }
@@ -809,6 +938,16 @@ export interface User {
   nickname?: string
 }
 
+// 通行密钥
+export interface PassKey {
+  id: number
+  name: string
+  created_at: string
+  last_used_at?: string
+  aaguid?: string
+  transports?: string
+}
+
 // 存储空间
 export interface Storage {
   // 总空间
@@ -823,8 +962,8 @@ export interface MediaStatistic {
   movie_count: number
   // 电视剧总数
   tv_count: number
-  // 电视剧总集数
-  episode_count: number
+  // 电视剧总集数，未获取时为 null
+  episode_count: number | null
   // 用户数量
   user_count: number
 }
@@ -940,6 +1079,10 @@ export interface FileItem {
 export interface MediaServerPlayItem {
   // ID
   id?: string | number
+  // 媒体服务器项目ID
+  item_id?: string | number
+  // 媒体服务器ID
+  server_id?: string
   // 标题
   title: string
   // 副标题
@@ -952,6 +1095,10 @@ export interface MediaServerPlayItem {
   link?: string
   // 播放百分比
   percent?: number
+  // 媒体服务器类型
+  server_type?: string
+  // 图片是否需要Cookies
+  use_cookies?: boolean
 }
 
 // 媒体服务器媒体库
@@ -960,6 +1107,10 @@ export interface MediaServerLibrary {
   server: string
   // ID
   id?: string | number
+  // 媒体服务器项目ID
+  item_id?: string | number
+  // 媒体服务器ID
+  server_id?: string
   // 名称
   name: string
   // 路径
@@ -972,6 +1123,10 @@ export interface MediaServerLibrary {
   image_list?: string[]
   // 链接
   link?: string
+  // 媒体服务器类型
+  server_type?: string
+  // 图片是否需要Cookies
+  use_cookies?: boolean
 }
 
 // 消息通知
@@ -1024,6 +1179,8 @@ export interface DownloaderConf {
   config: { [key: string]: any }
   // 是否启用
   enabled: boolean
+  // 路径映射
+  path_mapping?: Array<[storagePath: string, downloadPath: string]>
 }
 
 // 通知配置
@@ -1062,7 +1219,7 @@ export interface StorageConf {
 export interface MediaServerConf {
   // 名称
   name: string
-  // 类型 emby/jellyfin/plex
+  // 类型 emby/zspace/jellyfin/plex/trimemedia/ugreen
   type: string
   // 配置
   config: { [key: string]: any }
@@ -1195,9 +1352,9 @@ export interface TransferForm {
   // 历史ID
   logid: number
   // 目标存储
-  target_storage: string
+  target_storage: string | null
   // 目标路径
-  target_path: string
+  target_path: string | null
   // TMDB ID
   tmdbid?: number
   // 豆瓣 ID
@@ -1207,7 +1364,7 @@ export interface TransferForm {
   // 类型
   type_name?: string
   // 整理方式
-  transfer_type: string
+  transfer_type: string | null
   // 自定义格式
   episode_format?: string
   // 指定集数
@@ -1219,15 +1376,95 @@ export interface TransferForm {
   // 最小文件大小
   min_filesize: number
   // 刮削
-  scrape: boolean
+  scrape: boolean | null
   // 复用历史识别信息
   from_history: boolean
   // 媒体库类型子目录
-  library_type_folder?: boolean
+  library_type_folder?: boolean | null
   // 媒体库类别子目录
-  library_category_folder?: boolean
+  library_category_folder?: boolean | null
   // 剧集组编号
-  episode_group?: string
+  episode_group?: string | null
+  // 预览模式
+  preview?: boolean
+}
+
+// 手动整理请求
+export interface ManualTransferPayload extends Omit<TransferForm, 'fileitem'> {
+  // 文件项
+  fileitem?: FileItem
+  // 多选文件批量请求
+  fileitems?: FileItem[]
+}
+
+// 手动整理目的路径匹配结果
+export interface ManualTransferTargetPathData {
+  // 目标存储
+  target_storage?: string | null
+  // 目标路径
+  target_path?: string | null
+  // 整理方式
+  transfer_type?: string | null
+  // 刮削
+  scrape?: boolean | null
+  // 媒体库类型子目录
+  library_type_folder?: boolean | null
+  // 媒体库类别子目录
+  library_category_folder?: boolean | null
+}
+
+// 手动整理预览统计
+export interface ManualTransferPreviewSummary {
+  // 总数
+  total: number
+  // 成功数
+  success: number
+  // 失败数
+  failed: number
+}
+
+// 手动整理预览项
+export interface ManualTransferPreviewItem {
+  // 原始路径
+  source?: string
+  // 目标路径
+  target?: string
+  // 目标目录
+  target_dir?: string
+  // 是否成功
+  success?: boolean
+  // 提示信息
+  message?: string
+  // 媒体类型
+  type?: string
+  // 媒体标题
+  title?: string
+  // 季
+  season?: number | string
+  // 开始集
+  episode?: number | string
+  // 结束集
+  episode_end?: number | string
+  // Part
+  part?: string
+  // 原始识别字符串
+  org_string?: string
+  // 应用的自定义识别词
+  apply_words?: string[]
+  // 制作组/字幕组
+  resource_team?: string
+  // 自定义占位符
+  customization?: string
+}
+
+// 手动整理预览数据
+export interface ManualTransferPreviewData {
+  // 统计信息
+  summary: ManualTransferPreviewSummary
+  // 预览结果
+  items: ManualTransferPreviewItem[]
+  // 额外消息
+  message?: string
 }
 
 // 整理队列
@@ -1290,6 +1527,10 @@ export interface Workflow {
   description?: string
   // 定时器
   timer?: string
+  // 触发类型：timer-定时触发 event-事件触发 manual-手动触发
+  trigger_type?: string
+  // 事件类型（当trigger_type为event时使用）
+  event_type?: string
   // 状态
   state?: string
   // 当前执行动作
@@ -1302,6 +1543,10 @@ export interface Workflow {
   actions?: any[]
   // 动作流
   flows?: any[]
+  // 工作流执行配置
+  execution_config?: { [key: string]: any }
+  // 工作流结构化执行状态
+  execution_state?: { [key: string]: any }
   // 创建时间
   add_time?: string
   // 最后执行时间
@@ -1353,3 +1598,35 @@ export interface TorrentCacheData {
   // 缓存数据
   data: TorrentCacheItem[]
 }
+
+// 订阅分享统计
+export interface SubscribeShareStatistics {
+  // 分享人
+  share_user?: string
+  // 分享数量
+  share_count?: number
+  // 总复用人次
+  total_reuse_count?: number
+}
+
+// 通用API响应
+export interface ApiResponse<T = any> {
+  success: boolean
+  message?: string
+  data: T
+}
+
+// 分类规则
+export interface CategoryRule {
+  genre_ids?: string
+  original_language?: string
+  production_countries?: string
+  origin_country?: string
+  release_year?: string
+}
+
+// 分类配置
+export interface CategoryConfig {
+  movie?: { [key: string]: CategoryRule }
+  tv?: { [key: string]: CategoryRule }
+}

src/components/FileBrowser.vue

@@ -3,8 +3,17 @@ import FileList from './filebrowser/FileList.vue'
 import FileToolbar from './filebrowser/FileToolbar.vue'
 import FileNavigator from './filebrowser/FileNavigator.vue'
 import type { EndPoints, FileItem, StorageConf } from '@/api/types'
-import { useDisplay } from 'vuetify'
 import { storageIconDict } from '@/api/constants'
+import type { AxiosInstance } from 'axios'
+import { useDynamicButton } from '@/composables/useDynamicButton'
+import { usePWA } from '@/composables/usePWA'
+import { useUserStore } from '@/stores'
+import { buildUserPermissionContext, hasPermission } from '@/utils/permission'
+
+// LocalStorage keys
+const SORT_KEY = 'fileBrowser.sort'
+const SHOW_TREE_KEY = 'fileBrowser.showDirTree'
+const NAV_WIDTH_KEY = 'fileBrowser.navigatorWidth'
 
 // 输入参数
 const props = defineProps({
@@ -12,7 +21,7 @@ const props = defineProps({
   tree: Boolean,
   endpoints: Object as PropType<EndPoints>,
   axios: {
-    type: Function,
+    type: Object as PropType<AxiosInstance>,
     required: true,
   },
   axiosconfig: Object,
@@ -24,16 +33,21 @@ const props = defineProps({
     type: Array as PropType<FileItem[]>,
     default: () => [],
   },
+  active: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 // 对外事件
 const emit = defineEmits(['pathchanged'])
-
-// 显示器宽度
-const display = useDisplay()
-
-// APP
-const appMode = inject('pwaMode') && display.mdAndDown.value
+const route = useRoute()
+const { appMode } = usePWA()
+const userStore = useUserStore()
+const canManage = computed(() =>
+  hasPermission(buildUserPermissionContext(userStore.superUser, userStore.permissions), 'manage'),
+)
+const toolbarRef = ref<InstanceType<typeof FileToolbar> | null>(null)
 
 const fileIcons = {
   // 压缩包
@@ -124,24 +138,48 @@ const fileIcons = {
   other: 'mdi-file-outline',
 }
 
+function openNewFolderDialog() {
+  toolbarRef.value?.openNewFolderDialog()
+}
+
+const showFloatingNewFolderAction = computed(() => route.path === '/filemanager' && canManage.value)
+
+useDynamicButton({
+  icon: 'mdi-folder-plus-outline',
+  onClick: openNewFolderDialog,
+  permission: 'manage',
+  show: computed(() => appMode.value && showFloatingNewFolderAction.value),
+})
+
 // 加载次数
 const loading = ref(0)
-// 当前存储
-const activeStorage = ref('local')
+
 // 刷新
 const refreshPending = ref(false)
-// 排序
-const sort = ref('name')
+// 排序 - 从localStorage恢复
+const sort = ref(localStorage.getItem(SORT_KEY) || 'name')
 
-// 是否显示目录树
-const showDirTree = ref(false)
+// 是否显示目录树 - 从localStorage恢复
+const showDirTree = ref(localStorage.getItem(SHOW_TREE_KEY) === 'true')
 
-// 拖动分隔条相关
-const navigatorWidth = ref(280) // 初始宽度
+// 拖动分隔条相关 - 从localStorage恢复宽度
+const navigatorWidth = ref(parseInt(localStorage.getItem(NAV_WIDTH_KEY) || '280'))
 const isDragging = ref(false)
 const dragStartX = ref(0)
 const dragStartWidth = ref(0)
 
+watch(sort, val => {
+  localStorage.setItem(SORT_KEY, val)
+})
+
+watch(showDirTree, val => {
+  localStorage.setItem(SHOW_TREE_KEY, String(val))
+})
+
+watch(navigatorWidth, val => {
+  localStorage.setItem(NAV_WIDTH_KEY, String(val))
+})
+
 // 计算属性
 const storagesArray = computed(() => {
   return props.storages?.map(item => ({
@@ -152,14 +190,13 @@ const storagesArray = computed(() => {
 })
 
 // 方法
-function loadingChanged(loading: number) {
-  if (loading) loading++
-  else if (loading > 0) loading--
+function loadingChanged(isLoading: number) {
+  if (isLoading) loading.value++
+  else if (loading.value > 0) loading.value--
 }
 
 // 存储切换
 async function storageChanged(storage: string) {
-  activeStorage.value = storage
   emit('pathchanged', { storage: storage, path: '/', fileid: 'root' })
 }
 
@@ -238,41 +275,29 @@ function stopDrag() {
   ;(document.body.style as any).webkitUserSelect = ''
   ;(document.body.style as any).mozUserSelect = ''
 }
-
-// 外层DIV大小控制
-const scrollStyle = computed(() => {
-  return appMode
-    ? 'height: calc(100vh - 10.5rem - env(safe-area-inset-bottom) - 7rem)'
-    : 'height: calc(100vh - 10.5rem - env(safe-area-inset-bottom)'
-})
-
-// 文件列表大小限制
-const fileListStyle = computed(() => {
-  return appMode
-    ? 'height: calc(100vh - 14rem - env(safe-area-inset-bottom) - 7rem)'
-    : 'height: calc(100vh - 14rem - env(safe-area-inset-bottom)'
-})
 </script>
 
 <template>
-  <div class="mx-auto" :loading="loading > 0">
-    <div v-if="activeStorage && item">
+  <div class="mx-auto overflow-hidden" :loading="loading > 0">
+    <div v-if="item">
       <FileToolbar
+        ref="toolbarRef"
+        :sort="sort"
         :item="item"
         :itemstack="itemstack"
         :storages="storagesArray"
-        :storage="activeStorage"
         :endpoints="endpoints"
         :axios="axios"
+        :show-new-folder-button="!showFloatingNewFolderAction"
         @storagechanged="storageChanged"
         @pathchanged="pathChanged"
         @foldercreated="refreshPending = true"
         @sortchanged="sortChanged"
       />
-      <div class="flex" :style="scrollStyle">
+      <div class="flex">
         <FileNavigator
           v-if="showDirTree"
-          :storage="activeStorage"
+          :storage="item.storage"
           :currentPath="item.path"
           :items="fileListItems"
           :endpoints="endpoints"
@@ -287,14 +312,13 @@ const fileListStyle = computed(() => {
         </div>
         <FileList
           :item="item"
-          :storage="activeStorage"
           :icons="fileIcons"
           :endpoints="endpoints"
           :axios="axios"
           :refreshpending="refreshPending"
           :sort="sort"
-          :listStyle="fileListStyle"
           :showTree="showDirTree"
+          :active="active"
           :style="{ flex: 1 }"
           @pathchanged="pathChanged"
           @loading="loadingChanged"
@@ -307,6 +331,18 @@ const fileListStyle = computed(() => {
       </div>
     </div>
   </div>
+
+  <Teleport to="body" v-if="!appMode && showFloatingNewFolderAction">
+    <div class="compact-fab-stack">
+      <VFab
+        icon="mdi-folder-plus-outline"
+        color="primary"
+        appear
+        class="compact-fab compact-fab--primary"
+        @click="openNewFolderDialog"
+      />
+    </div>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -317,7 +353,7 @@ const fileListStyle = computed(() => {
   justify-content: center;
   background-color: transparent;
   cursor: col-resize;
-  inline-size: 4px;
+  inline-size: 1px;
   transition: background-color 0.2s ease;
   user-select: none;
 }

src/components/NoDataFound.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import page404 from '@images/pages/404.svg'
 
 // 国际化
 const { t } = useI18n()
@@ -19,16 +20,7 @@ interface Props {
   <div class="no-data-container">
     <!-- 图标容器 -->
     <div class="icon-wrapper">
-      <div class="icon-glow"></div>
-      <div class="icon-container">
-        <VIcon
-          :icon="props.icon || 'mdi-file-search-outline'"
-          :color="props.iconColor || 'white'"
-          size="48"
-          class="main-icon"
-        />
-      </div>
-      <div class="pulse-ring"></div>
+      <img :src="page404" alt="404" />
     </div>
 
     <!-- 标题 -->
@@ -57,8 +49,7 @@ interface Props {
   justify-content: center;
   inline-size: 100%;
   min-block-size: 300px;
-  padding-block: 3rem;
-  padding-inline: 1rem;
+  padding-block-start: 3rem;
   text-align: center;
 }
 
@@ -68,109 +59,17 @@ interface Props {
   display: flex;
   align-items: center;
   justify-content: center;
-  block-size: 100px;
-  inline-size: 100px;
-  margin-block: 0 2rem;
+  inline-size: 15rem;
+  margin-block: 0 1rem;
   margin-inline: auto;
 }
 
-.icon-glow {
-  position: absolute;
-  border-radius: 50%;
-  animation: pulse 3s infinite ease-in-out;
-  background: radial-gradient(circle, rgba(var(--v-theme-primary), 0.8) 0%, rgba(var(--v-theme-primary), 0) 70%);
-  block-size: 80px;
-  filter: blur(15px);
-  inline-size: 80px;
-  opacity: 0.8;
-}
-
-.icon-container {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.9), rgba(var(--v-theme-secondary), 0.8));
-  block-size: 80px;
-  inline-size: 80px;
-}
-
-.main-icon {
-  animation: slight-bounce 3s infinite ease-in-out;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 30%));
-}
-
-.pulse-ring {
-  position: absolute;
-  z-index: 1;
-  border: 2px solid rgba(var(--v-theme-primary), 0.5);
-  border-radius: 50%;
-  animation: ripple 2s infinite ease-out;
-  block-size: 100px;
-  inline-size: 100px;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  opacity: 0;
-  transform: translate(-50%, -50%);
-}
-
-.pulse-ring::before {
-  position: absolute;
-  border: 2px solid rgba(var(--v-theme-primary), 0.3);
-  border-radius: 50%;
-  animation: ripple 2s infinite 0.5s ease-out;
-  block-size: 85px;
-  content: '';
-  inline-size: 85px;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
-}
-
-@keyframes ripple {
-  0% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(0.9);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(1.5);
-  }
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 0.5;
-    transform: scale(0.8);
-  }
-
-  50% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-}
-
-@keyframes slight-bounce {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
 /* 文字样式 */
 .error-title {
   position: relative;
   color: rgba(var(--v-theme-on-surface), 0.95);
-  font-size: 1.75rem;
-  font-weight: 700;
+  font-size: 1.5rem;
+  font-weight: 500;
   margin-block-end: 0.75rem;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 5%);
 }
@@ -181,69 +80,15 @@ interface Props {
   background: linear-gradient(90deg, rgba(var(--v-theme-primary), 0.8), rgba(var(--v-theme-primary), 0.2));
   block-size: 3px;
   content: '';
-  inline-size: 40px;
-  margin-block: 0.5rem 0;
+  inline-size: 60px;
   margin-inline: auto;
 }
 
 .error-description {
   color: rgba(var(--v-theme-on-surface), 0.75);
-  font-size: 1.1rem;
-  line-height: 1.6;
-  margin-block-end: 1.5rem;
+  font-size: 1rem;
+  margin-block-end: 1rem;
   margin-inline: auto;
   max-inline-size: 80%;
 }
-
-.actions-container {
-  margin-block-start: 1.5rem;
-}
-
-.actions-container :deep(.v-btn) {
-  transform: translateY(0);
-  transition: transform 0.2s ease;
-}
-
-.actions-container :deep(.v-btn:hover) {
-  transform: translateY(-2px);
-}
-
-/* 响应式调整 */
-@media (width <= 600px) {
-  .no-data-container {
-    padding-block: 2rem;
-    padding-inline: 1rem;
-  }
-
-  .icon-wrapper {
-    block-size: 80px;
-    inline-size: 80px;
-    margin-block-end: 1.5rem;
-  }
-
-  .icon-container {
-    block-size: 70px;
-    inline-size: 70px;
-  }
-
-  .icon-glow {
-    block-size: 70px;
-    inline-size: 70px;
-  }
-
-  .pulse-ring,
-  .pulse-ring::before {
-    block-size: 80px;
-    inline-size: 80px;
-  }
-
-  .error-title {
-    font-size: 1.4rem;
-  }
-
-  .error-description {
-    font-size: 0.95rem;
-    max-inline-size: 90%;
-  }
-}
 </style>

src/components/PWAInstallPrompt.vue

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

src/components/cards/BackdropCard.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import type { MediaServerPlayItem } from '@/api/types'
+import noImage from '@images/no-image.jpeg'
+import { openMediaServerItem } from '@/utils/appDeepLink'
 // 输入参数
 const props = defineProps({
   media: Object as PropType<MediaServerPlayItem>,
@@ -9,21 +11,35 @@ const props = defineProps({
 
 // 图片是否加载完成
 const imageLoaded = ref(false)
+const imageLoadError = ref(false)
 
 // 图片加载完成响应
 function imageLoadHandler() {
   imageLoaded.value = true
 }
 
+// 图片加载失败响应
+function imageErrorHandler() {
+  imageLoadError.value = true
+}
+
 // 跳转播放
-function goPlay() {
-  if (props.media?.link) window.open(props.media?.link, '_blank')
+async function goPlay() {
+  if (props.media) {
+    await openMediaServerItem(props.media)
+  }
 }
 
 // 计算图片地址
 const getImgUrl = computed(() => {
   const image = props.media?.image || ''
-  return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
+  if (!image || imageLoadError.value) return noImage
+  let url = `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
+  const use_cookies = props.media?.use_cookies
+  if (use_cookies) {
+   url += `&use_cookies=${encodeURIComponent(use_cookies)}`
+  }
+  return url
 })
 </script>
 
@@ -42,22 +58,24 @@ const getImgUrl = computed(() => {
         @click="goPlay"
       >
         <template #image>
-          <VImg :src="getImgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler">
+          <VImg :src="getImgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler" @error="imageErrorHandler">
             <template #placeholder>
               <div class="w-full h-full">
                 <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
               </div>
             </template>
-            <VCardText
-              class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
-            >
-              <h1
-                class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ..."
+            <template #default>
+              <VCardText
+                class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
               >
-                {{ props.media?.title }}
-              </h1>
-              <span class="text-shadow">{{ props.media?.subtitle }}</span>
-            </VCardText>
+                <h1
+                  class="mb-1 text-white text-shadow font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ..."
+                >
+                  {{ props.media?.title }}
+                </h1>
+                <span class="text-shadow text-sm">{{ props.media?.subtitle }}</span>
+              </VCardText>
+            </template>
           </VImg>
         </template>
         <div class="w-full absolute bottom-0">

src/components/cards/CustomRuleCard.vue

@@ -1,14 +1,11 @@
 <script lang="ts" setup>
-import { CustomRule } from '@/api/types'
-import { useToast } from 'vue-toast-notification'
+import type { CustomRule } from '@/api/types'
 import filter_svg from '@images/svg/filter.svg'
-import { cloneDeep } from 'lodash-es'
-import { innerFilterRules } from '@/api/constants'
-import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+import { useCardAccentColor } from '@/composables/useCardAccentColor'
 
-// 显示器宽度
-const display = useDisplay()
+const CustomRuleInfoDialog = defineAsyncComponent(() => import('@/components/dialog/CustomRuleInfoDialog.vue'))
+const { accentRgb, imageRef, updateAccentColor } = useCardAccentColor('#8A8D93')
 
 // 输入参数
 const props = defineProps({
@@ -24,197 +21,52 @@ const props = defineProps({
   },
 })
 
-// 提示框
-const $toast = useToast()
-const { t } = useI18n()
-
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'change', 'done'])
 
-// 规则详情弹窗
-const ruleInfoDialog = ref(false)
-
-// 规则详情
-const ruleInfo = ref<CustomRule>({
-  id: '',
-  name: '',
-  include: '',
-  exclude: '',
-  size_range: '',
-  seeders: '',
-  publish_time: '',
-})
-
-// 打开详情弹窗
+/** 打开共享自定义规则配置弹窗。 */
 function openRuleInfoDialog() {
-  // 深复制
-  ruleInfo.value = cloneDeep(props.rule)
-  ruleInfoDialog.value = true
+  openSharedDialog(
+    CustomRuleInfoDialog,
+    {
+      rule: props.rule,
+      rules: props.rules,
+    },
+    {
+      change: (...args: unknown[]) => emit('change', ...args),
+      done: () => emit('done'),
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
-// 保存详情数据
-function saveRuleInfo() {
-  // 有空值
-  if (!ruleInfo.value.id || !ruleInfo.value.name) {
-    if (!ruleInfo.value.id && !ruleInfo.value.name) {
-      $toast.error(t('customRule.error.emptyIdName'))
-    }
-    return
-  }
-  // 检查ID是否在内置的规则中
-  if (innerFilterRules.find(option => option.value === ruleInfo.value.id)) {
-    $toast.error(t('customRule.error.idOccupied'))
-    return
-  }
-  // 检查规则名称是否在内置的规则中
-  if (innerFilterRules.find(option => option.title === ruleInfo.value.name)) {
-    $toast.error(t('customRule.error.nameOccupied'))
-    return
-  }
-  // ID已存在
-  if (ruleInfo.value.id !== props.rule.id && props.rules.find(rule => rule.id === ruleInfo.value.id)) {
-    $toast.error(t('customRule.error.idExists', { id: ruleInfo.value.id }))
-    return
-  }
-  // 规则名称已存在
-  if (ruleInfo.value.name !== props.rule.name && props.rules.find(rule => rule.name === ruleInfo.value.name)) {
-    $toast.error(t('customRule.error.nameExists', { name: ruleInfo.value.name }))
-    return
-  }
-  // 保存数据
-  ruleInfoDialog.value = false
-  emit('change', ruleInfo.value, props.rule.id)
-  emit('done')
-}
-
-// 按钮点击
+/** 关闭自定义规则卡片。 */
 function onClose() {
   emit('close')
 }
 </script>
 
 <template>
-  <div>
-    <VCard variant="tonal" @click="openRuleInfoDialog">
-      <span class="absolute top-3 right-12">
-        <IconBtn>
-          <VIcon class="cursor-move" icon="mdi-drag" />
-        </IconBtn>
-      </span>
-      <VDialogCloseBtn @click="onClose" />
-      <VCardText class="flex justify-space-between align-center gap-3">
-        <div class="align-self-start">
-          <h5 class="text-h6 mb-1">{{ props.rule.name }}</h5>
-          <div class="text-body-1 mb-3">{{ props.rule.id }}</div>
-        </div>
-        <VImg :src="filter_svg" cover class="mt-7" max-width="3rem" />
-      </VCardText>
-    </VCard>
-    <VDialog
-      v-if="ruleInfoDialog"
-      v-model="ruleInfoDialog"
-      scrollable
-      max-width="40rem"
-      :fullscreen="!display.mdAndUp.value"
-    >
-      <VCard>
-        <VCardItem>
-          <template #prepend>
-            <VIcon icon="mdi-filter-outline" class="me-2" />
-          </template>
-          <VCardTitle>{{ t('customRule.title', { id: props.rule.id }) }}</VCardTitle>
-        </VCardItem>
-        <VDialogCloseBtn v-model="ruleInfoDialog" />
-        <VDivider />
-        <VCardText>
-          <VForm>
-            <VRow>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="ruleInfo.id"
-                  :label="t('customRule.field.ruleId')"
-                  :placeholder="t('customRule.placeholder.ruleId')"
-                  :hint="t('customRule.hint.ruleId')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-identifier"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="ruleInfo.name"
-                  :label="t('customRule.field.ruleName')"
-                  :placeholder="t('customRule.placeholder.ruleName')"
-                  :hint="t('customRule.hint.ruleName')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  v-model="ruleInfo.include"
-                  :label="t('customRule.field.include')"
-                  :placeholder="t('customRule.placeholder.include')"
-                  :hint="t('customRule.hint.include')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-plus-circle"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  v-model="ruleInfo.exclude"
-                  :label="t('customRule.field.exclude')"
-                  :placeholder="t('customRule.placeholder.exclude')"
-                  :hint="t('customRule.hint.exclude')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-minus-circle"
-                />
-              </VCol>
-              <VCol cols="6">
-                <VTextField
-                  v-model="ruleInfo.size_range"
-                  :label="t('customRule.field.sizeRange')"
-                  :placeholder="t('customRule.placeholder.sizeRange')"
-                  :hint="t('customRule.hint.sizeRange')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-harddisk"
-                />
-              </VCol>
-              <VCol cols="6">
-                <VTextField
-                  v-model="ruleInfo.seeders"
-                  :label="t('customRule.field.seeders')"
-                  :placeholder="t('customRule.placeholder.seeders')"
-                  :hint="t('customRule.hint.seeders')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-account-group"
-                />
-              </VCol>
-              <VCol cols="6">
-                <VTextField
-                  v-model="ruleInfo.publish_time"
-                  :label="t('customRule.field.publishTime')"
-                  :placeholder="t('customRule.placeholder.publishTime')"
-                  :hint="t('customRule.hint.publishTime')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-calendar-clock"
-                />
-              </VCol>
-            </VRow>
-          </VForm>
-        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn @click="saveRuleInfo" prepend-icon="mdi-content-save" class="px-5">{{
-            t('customRule.action.confirm')
-          }}</VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-  </div>
+  <VCard
+    variant="tonal"
+    class="app-card-shell app-card-colorful"
+    :style="{ '--app-card-accent-rgb': accentRgb }"
+    @click="openRuleInfoDialog"
+  >
+    <span class="app-card-top-action absolute top-3 right-12">
+      <IconBtn @click.stop>
+        <VIcon class="cursor-move" icon="mdi-drag" />
+      </IconBtn>
+    </span>
+    <VDialogCloseBtn @click="onClose" />
+    <VCardText class="app-card-summary app-card-summary--double-action app-card-summary--title-subtitle">
+      <div class="app-card-summary__content">
+        <h5 class="app-card-summary__title text-h6">{{ props.rule.name }}</h5>
+        <div class="app-card-summary__subtitle text-body-1">{{ props.rule.id }}</div>
+      </div>
+      <div class="app-card-summary__media" aria-hidden="true">
+        <VImg ref="imageRef" :src="filter_svg" contain class="app-card-summary__image" @load="updateAccentColor" />
+      </div>
+    </VCardText>
+  </VCard>
 </template>

src/components/cards/DirectoryCard.vue

@@ -5,8 +5,20 @@ import { nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { storageRemoteDict } from '@/api/constants'
 
+const DEFAULT_DIRECTORY_ACCENT_RGB = '145, 85, 253'
+const STORAGE_ACCENT_COLOR_MAP = {
+  local: '#FFB400',
+  alipan: '#00A7F2',
+  u115: '#17B26A',
+  rclone: '#6675FF',
+  alist: '#12B8D7',
+  smb: '#3B82F6',
+}
+
 // 国际化
 const { t } = useI18n()
+const downloadAccentRgb = ref(DEFAULT_DIRECTORY_ACCENT_RGB)
+const libraryAccentRgb = ref(DEFAULT_DIRECTORY_ACCENT_RGB)
 
 // 输入参数
 const props = defineProps({
@@ -63,6 +75,47 @@ const transferSourceItems = computed(() => [
   { title: t('directory.manualTransfer'), value: 'manual' },
 ])
 
+function hasKnownStorageType(storageType?: string): storageType is keyof typeof STORAGE_ACCENT_COLOR_MAP {
+  return !!storageType && Object.prototype.hasOwnProperty.call(STORAGE_ACCENT_COLOR_MAP, storageType)
+}
+
+function hexToRgbString(hexColor: string) {
+  const normalizedColor = hexColor.replace('#', '')
+  const colorValue = Number.parseInt(normalizedColor, 16)
+
+  if (Number.isNaN(colorValue) || normalizedColor.length !== 6) return DEFAULT_DIRECTORY_ACCENT_RGB
+
+  return `${(colorValue >> 16) & 255}, ${(colorValue >> 8) & 255}, ${colorValue & 255}`
+}
+
+function getCustomStoragePaletteColor(storageType?: string) {
+  const customStorageIndex = Math.max(Number(storageType?.match(/\d+$/)?.[0] ?? 1) - 1, 0)
+  const customStorageColors = ['#F97316', '#8B5CF6', '#06B6D4', '#84CC16', '#EC4899', '#14B8A6']
+
+  return customStorageColors[customStorageIndex % customStorageColors.length]
+}
+
+function getStorageAccentColor(storageType?: string) {
+  if (hasKnownStorageType(storageType)) return STORAGE_ACCENT_COLOR_MAP[storageType]
+
+  // 自定义存储没有固定品牌图标，使用离散调色板，保证连续 custom1/custom2 也能明显区分。
+  return getCustomStoragePaletteColor(storageType)
+}
+
+// 目录卡片用下载存储和媒体库存储两端的图标主色生成轻渐变，体现整理链路的两个存储端点。
+const directoryAccentStyle = computed(() => ({
+  '--app-card-accent-rgb': downloadAccentRgb.value,
+  '--app-card-accent-end-rgb': libraryAccentRgb.value,
+}))
+
+function updateDirectoryAccentColors() {
+  const downloadStorage = props.directory.storage
+  const libraryStorage = props.directory.library_storage || props.directory.storage
+
+  downloadAccentRgb.value = hexToRgbString(getStorageAccentColor(downloadStorage))
+  libraryAccentRgb.value = hexToRgbString(getStorageAccentColor(libraryStorage))
+}
+
 // 监控模式下拉字典
 const MonitorModeItems = computed(() => [
   { title: t('directory.performanceMode'), value: 'fast' },
@@ -168,6 +221,15 @@ watch(
   { immediate: true },
 )
 
+// 存储类型切换后主动重新提取图标色，避免图片缓存导致 load 事件不触发。
+watch(
+  [() => props.directory.storage, () => props.directory.library_storage],
+  () => {
+    updateDirectoryAccentColors()
+  },
+  { immediate: true },
+)
+
 // 媒体类别和类型变更非空时，将按类型分类和按类别分类置为false
 watch(
   [() => props.directory.media_type, () => props.directory.media_category],
@@ -195,7 +257,13 @@ watch(
 </script>
 
 <template>
-  <VCard variant="tonal" :width="props.width" :height="props.height">
+  <VCard
+    variant="tonal"
+    class="app-card-shell app-card-colorful"
+    :style="directoryAccentStyle"
+    :width="props.width"
+    :height="props.height"
+  >
     <VDialogCloseBtn @click="onClose" />
     <VCardItem>
       <VTextField
@@ -204,8 +272,8 @@ watch(
         :label="t('directory.alias')"
         class="me-20 text-high-emphasis font-weight-bold"
       />
-      <span class="absolute top-3 right-12">
-        <IconBtn>
+      <span class="app-card-top-action absolute top-3 right-12">
+        <IconBtn @click.stop>
           <VIcon class="cursor-move" icon="mdi-drag" />
         </IconBtn>
       </span>

src/components/cards/DownloaderCard.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
 import api from '@/api'
 import { formatFileSize } from '@/@core/utils/formatters'
-import { DownloaderConf } from '@/api/types'
-import { useToast } from 'vue-toast-notification'
-import type { DownloaderInfo } from '@/api/types'
-import qbittorrent_image from '@images/logos/qbittorrent.png'
-import transmission_image from '@images/logos/transmission.png'
-import custom_image from '@images/logos/downloader.png'
-import { cloneDeep } from 'lodash-es'
+import type { DownloaderConf, DownloaderInfo } from '@/api/types'
+import { getLogoUrl } from '@/utils/imageUtils'
 import { useI18n } from 'vue-i18n'
 import { downloaderDict } from '@/api/constants'
-import { useDisplay } from 'vuetify'
+import { useBackground } from '@/composables/useBackground'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+import { useCardAccentColor } from '@/composables/useCardAccentColor'
 
-// 显示器宽度
-const display = useDisplay()
+const DownloaderInfoDialog = defineAsyncComponent(() => import('@/components/dialog/DownloaderInfoDialog.vue'))
 
 // 获取i18n实例
 const { t } = useI18n()
+const { useConditionalDataRefresh } = useBackground()
+const { accentRgb, imageRef, updateAccentColor } = useCardAccentColor()
 
 // 定义输入
 const props = defineProps({
@@ -40,33 +38,20 @@ const props = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'done', 'change'])
 
-// 提示框
-const $toast = useToast()
-
-// timeout定时器
-let timeoutTimer: NodeJS.Timeout | undefined = undefined
-
 // 上传速率
 const upload_rate = ref(0)
 
 // 下载速度
 const download_rate = ref(0)
 
-// 下载器详情弹窗
-const downloaderInfoDialog = ref(false)
+// 下载器是否应该刷新数据的计算属性
+const shouldRefresh = computed(() => props.allowRefresh && props.downloader.enabled)
 
-// 下载器详情
-const downloaderInfo = ref<DownloaderConf>({
-  name: '',
-  type: '',
-  default: false,
-  enabled: false,
-  config: {},
-})
-
-// 调用API查询下载器数据
+/** 调用 API 查询下载器实时速率数据。 */
 async function loadDownloaderInfo() {
-  if (!props.allowRefresh) {
+  if (!shouldRefresh.value) {
+    upload_rate.value = 0
+    download_rate.value = 0
     return
   }
   try {
@@ -79,307 +64,100 @@ async function loadDownloaderInfo() {
     if (res) {
       upload_rate.value = res.upload_speed
       download_rate.value = res.download_speed
-      // 定时查询
-      clearTimeout(timeoutTimer)
-      if (props.downloader.enabled) {
-        timeoutTimer = setTimeout(loadDownloaderInfo, 3000)
-      }
     }
   } catch (e) {
     console.log(e)
   }
 }
 
-// 打开详情弹窗
+/** 打开共享下载器配置弹窗。 */
 function openDownloaderInfoDialog() {
-  // 深复制
-  downloaderInfo.value = cloneDeep(props.downloader)
-  downloaderInfoDialog.value = true
-}
-
-// 保存详情数据
-function saveDownloaderInfo() {
-  // 为空不保存，跳出警告框
-  if (!downloaderInfo.value.name) {
-    $toast.error(t('downloader.nameRequired'))
-    return
-  }
-  // 重名判断
-  if (props.downloaders.some(item => item.name === downloaderInfo.value.name && item !== props.downloader)) {
-    $toast.error(t('downloader.nameDuplicate'))
-    return
-  }
-  // 默认下载器去重
-  if (downloaderInfo.value.default) {
-    props.downloaders.forEach(item => {
-      if (item.default && item !== props.downloader) {
-        item.default = false
-        $toast.info(t('downloader.defaultChanged'))
-      }
-    })
-  }
-  // 执行保存
-  downloaderInfoDialog.value = false
-  emit('change', downloaderInfo.value, props.downloader.name)
-  emit('done')
+  openSharedDialog(
+    DownloaderInfoDialog,
+    {
+      downloader: props.downloader,
+      downloaders: props.downloaders,
+    },
+    {
+      change: (...args: unknown[]) => emit('change', ...args),
+      done: () => emit('done'),
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
 // 根据存储类型选择图标
 const getIcon = computed(() => {
   switch (props.downloader.type) {
     case 'qbittorrent':
-      return qbittorrent_image
+      return getLogoUrl('qbittorrent')
     case 'transmission':
-      return transmission_image
+      return getLogoUrl('transmission')
+    case 'rtorrent':
+      return getLogoUrl('rtorrent')
     default:
-      return custom_image
+      return getLogoUrl('downloader')
   }
 })
 
-// 按钮点击
+/** 关闭下载器卡片。 */
 function onClose() {
   emit('close')
 }
 
-onMounted(async () => {
-  if (props.downloader.enabled) {
-    await loadDownloaderInfo()
-  }
-})
+// 使用条件性数据刷新定时器（只在下载器启用时运行）
+const { stop: stopRefresh } = useConditionalDataRefresh(
+  `downloader-${props.downloader.name}`,
+  loadDownloaderInfo,
+  shouldRefresh,
+  3000,
+  true,
+)
 
 onUnmounted(() => {
-  if (timeoutTimer) clearTimeout(timeoutTimer)
+  stopRefresh()
 })
 </script>
-<template>
-  <div>
-    <VHover v-slot="hover">
-      <VCard
-        v-bind="hover.props"
-        variant="tonal"
-        @click="openDownloaderInfoDialog"
-        :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
-      >
-        <VDialogCloseBtn @click="onClose" />
-        <span class="absolute top-3 right-12">
-          <IconBtn>
-            <VIcon class="cursor-move" icon="mdi-drag" />
-          </IconBtn>
-        </span>
-        <VCardText class="flex justify-space-between align-center gap-4">
-          <div class="align-self-start flex-1">
-            <div class="flex items-center">
-              <VBadge
-                v-if="props.downloader.default && props.downloader.enabled"
-                dot
-                inline
-                color="success"
-                class="me-1"
-              />
-              <span class="text-h6">{{ downloader.name }}</span>
-            </div>
-            <div v-if="downloaderDict[downloader.type] && props.downloader.enabled" class="mt-1 flex flex-wrap text-sm">
-              <span class="me-2">{{ `↑ ${formatFileSize(upload_rate, 1)}/s ` }}</span>
-              <span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
-            </div>
-            <div v-else-if="!downloaderDict[downloader.type]" class="mt-1 flex flex-wrap text-sm">
-              <span class="me-2">自定义下载器</span>
-            </div>
-          </div>
-          <div class="h-20">
-            <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
-          </div>
-        </VCardText>
-      </VCard>
-    </VHover>
 
-    <VDialog
-      v-if="downloaderInfoDialog"
-      v-model="downloaderInfoDialog"
-      scrollable
-      max-width="40rem"
-      :fullscreen="!display.mdAndUp.value"
+<template>
+  <VHover v-slot="hover">
+    <VCard
+      v-bind="hover.props"
+      variant="tonal"
+      class="app-card-shell app-card-colorful"
+      :style="{ '--app-card-accent-rgb': accentRgb }"
+      @click="openDownloaderInfoDialog"
     >
-      <VCard>
-        <VCardItem class="py-2">
-          <template #prepend>
-            <VIcon icon="mdi-download" class="me-2" />
-          </template>
-          <VCardTitle>{{ t('common.config') }}</VCardTitle>
-          <VCardSubtitle>{{ props.downloader.name }}</VCardSubtitle>
-        </VCardItem>
-        <VDialogCloseBtn v-model="downloaderInfoDialog" />
-        <VDivider />
-        <VCardText>
-          <VForm>
-            <VRow>
-              <VCol cols="12" md="6">
-                <VSwitch v-model="downloaderInfo.enabled" :label="t('downloader.enabled')" />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="downloaderInfo.default"
-                  :label="t('downloader.default')"
-                  :disabled="!downloaderInfo.enabled"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-if="downloaderInfo.type == 'qbittorrent'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.name"
-                  :label="t('downloader.name')"
-                  :placeholder="t('downloader.nameRequired')"
-                  :hint="t('downloader.name')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.host"
-                  :label="t('downloader.host')"
-                  placeholder="http(s)://ip:port"
-                  :hint="t('downloader.host')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.username"
-                  :label="t('downloader.username')"
-                  :hint="t('downloader.username')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-account"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.password"
-                  type="password"
-                  :label="t('downloader.password')"
-                  :hint="t('downloader.password')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-lock"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="downloaderInfo.config.category"
-                  :label="t('downloader.category')"
-                  :hint="t('downloader.category')"
-                  persistent-hint
-                  active
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="downloaderInfo.config.sequentail"
-                  :label="t('downloader.sequentail')"
-                  :hint="t('downloader.sequentail')"
-                  persistent-hint
-                  active
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="downloaderInfo.config.force_resume"
-                  :label="t('downloader.force_resume')"
-                  :hint="t('downloader.force_resume')"
-                  persistent-hint
-                  active
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="downloaderInfo.config.first_last_piece"
-                  :label="t('downloader.first_last_piece')"
-                  :hint="t('downloader.first_last_piece')"
-                  persistent-hint
-                  active
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="downloaderInfo.type == 'transmission'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.name"
-                  :label="t('downloader.name')"
-                  :placeholder="t('downloader.nameRequired')"
-                  :hint="t('downloader.name')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.host"
-                  :label="t('downloader.host')"
-                  placeholder="http(s)://ip:port"
-                  :hint="t('downloader.host')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.username"
-                  :label="t('downloader.username')"
-                  :hint="t('downloader.username')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-account"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.password"
-                  type="password"
-                  :label="t('downloader.password')"
-                  :hint="t('downloader.password')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-lock"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.type"
-                  :label="t('downloader.type')"
-                  :hint="t('downloader.customTypeHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-cog"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.name"
-                  :label="t('downloader.name')"
-                  :hint="t('downloader.nameRequired')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-            </VRow>
-          </VForm>
-        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn @click="saveDownloaderInfo" prepend-icon="mdi-content-save" class="px-5">
-            {{ t('common.save') }}
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-  </div>
+      <VDialogCloseBtn @click="onClose" />
+      <span class="app-card-top-action absolute top-3 right-12">
+        <IconBtn @click.stop>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+      <VCardText class="app-card-summary app-card-summary--double-action">
+        <div class="app-card-summary__content">
+          <div class="app-card-summary__title-row">
+            <VBadge
+              v-if="props.downloader.default && props.downloader.enabled"
+              dot
+              inline
+              color="success"
+              class="me-1"
+            />
+            <span class="app-card-summary__title text-h6">{{ downloader.name }}</span>
+          </div>
+          <div v-if="downloaderDict[downloader.type] && props.downloader.enabled" class="app-card-summary__meta text-sm">
+            <span class="app-card-summary__meta-item">{{ `↑ ${formatFileSize(upload_rate, 1)}/s` }}</span>
+            <span class="app-card-summary__meta-item">{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
+          </div>
+          <div v-else-if="!downloaderDict[downloader.type]" class="app-card-summary__subtitle text-sm">
+            {{ t('setting.system.custom') }}
+          </div>
+        </div>
+        <div class="app-card-summary__media" aria-hidden="true">
+          <VImg ref="imageRef" :src="getIcon" contain class="app-card-summary__image" @load="updateAccentColor" />
+        </div>
+      </VCardText>
+    </VCard>
+  </VHover>
 </template>

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,80 @@ async function deleteDownload() {
 </script>
 
 <template>
-  <VCard v-if="cardState" :key="props.info?.hash">
-    <template #image>
-      <VImg :src="props.info?.media.image" aspect-ratio="2/3" cover class="brightness-50" @load="imageLoadHandler" />
+  <VHover>
+    <template #default="hover">
+      <VCard
+        v-if="cardState"
+        v-bind="hover.props"
+        :key="props.info?.hash"
+        class="downloading-card app-surface flex flex-col h-full overflow-hidden"
+        :class="{
+          'transition transform-cpu duration-300  -translate-y-1': hover.isHovering,
+        }"
+        min-height="150"
+      >
+        <template #image>
+          <VImg
+            :src="props.info?.media.image"
+            class="downloading-card-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>
+
+        <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 text-white">
+            {{ props.info?.title }}
+          </VCardSubtitle>
+
+          <VCardText class="text-subtitle-1 pt-3 pb-1 text-white">
+            {{ getSpeedText() }}
+          </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>
+        </div>
+      </VCard>
     </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>
-
-    <VCardSubtitle class="break-words whitespace-normal" :class="getTextClass()">
-      {{ props.info?.title }}
-    </VCardSubtitle>
-
-    <VCardText class="text-subtitle-1 pt-3 pb-1" :class="getTextClass()">
-      {{ getSpeedText() }}
-    </VCardText>
-
-    <VCardText v-if="getPercentage() > 0" :class="getTextClass()">
-      <VProgressLinear :model-value="getPercentage()" />
-    </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>
-  </VCard>
+  </VHover>
 </template>
+
+<style lang="scss" scoped>
+/* stylelint-disable selector-pseudo-class-no-unknown */
+
+.downloading-card-image {
+  block-size: 100%;
+}
+
+.downloading-card-background {
+  border-radius: inherit;
+  background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+  pointer-events: none;
+}
+</style>

src/components/cards/FilterRuleCard.vue

@@ -28,32 +28,31 @@ function filtersChanged(value: string[]) {
 }
 
 // 过滤规则下拉框
-const selectFilterOptions = ref<{ [key: string]: string }[]>([])
-
-onMounted(() => {
-  selectFilterOptions.value = cloneDeep(innerFilterRules)
-  if (props.custom_rules) {
-    console.log(props.custom_rules)
-    props.custom_rules.map(rule => {
-      selectFilterOptions.value.push({
-        title: rule.name,
-        value: rule.id,
-      })
+// 同时包含内置规则与用户自定义规则；使用 computed 而非 onMounted 一次性赋值，
+// 是为了在父组件异步加载完 custom_rules 或后续新增/删除规则时，
+// 选项与已选 chip 的显示名（title）能跟随刷新，避免回退到原始 ID（如 "zhong"）。
+const selectFilterOptions = computed<{ [key: string]: string }[]>(() => {
+  const options = cloneDeep(innerFilterRules)
+  props.custom_rules?.forEach(rule => {
+    options.push({
+      title: rule.name,
+      value: rule.id,
     })
-  }
+  })
+  return options
 })
 </script>
 
 <template>
-  <VCard variant="tonal">
-    <span class="absolute top-3 right-12">
-      <IconBtn>
+  <VCard variant="tonal" class="app-card-shell">
+    <span class="app-card-top-action absolute top-3 right-12">
+      <IconBtn @click.stop>
         <VIcon class="cursor-move" icon="mdi-drag" />
       </IconBtn>
     </span>
     <VDialogCloseBtn @click="onClose" />
     <VCardItem>
-      <VCardTitle>{{ t('filterRule.priority') }} {{ props.pri }}</VCardTitle>
+      <VCardTitle class="pr-8">{{ t('filterRule.priority') }} {{ props.pri }}</VCardTitle>
       <VRow>
         <VCol>
           <VAutocomplete

src/components/cards/FilterRuleGroupCard.vue

@@ -1,20 +1,15 @@
 <script lang="ts" setup>
-import draggable from 'vuedraggable'
-import { copyToClipboard } from '@/@core/utils/navigator'
-import { CustomRule, FilterRuleGroup } from '@/api/types'
-import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
-import { useToast } from 'vue-toast-notification'
-import ImportCodeDialog from '@/components/dialog/ImportCodeDialog.vue'
+import type { CustomRule, FilterRuleGroup } from '@/api/types'
 import filter_group_svg from '@images/svg/filter-group.svg'
-import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+import { useCardAccentColor } from '@/composables/useCardAccentColor'
 
-// 显示器宽度
-const display = useDisplay()
+const FilterRuleGroupInfoDialog = defineAsyncComponent(() => import('@/components/dialog/FilterRuleGroupInfoDialog.vue'))
 
 // 获取i18n实例
 const { t } = useI18n()
+const { accentRgb, imageRef, updateAccentColor } = useCardAccentColor('#8A8D93')
 
 // 输入参数
 const props = defineProps({
@@ -37,285 +32,57 @@ const props = defineProps({
   custom_rules: Array as PropType<CustomRule[]>,
 })
 
-// 规则卡片类型
-interface FilterCard {
-  // 优先级
-  pri: string
-  // 已选规则
-  rules: string[]
-}
-
-// 提示框
-const $toast = useToast()
-
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'change', 'done'])
 
-// 规则详情弹窗
-const groupInfoDialog = ref(false)
-
-// 规则详情
-const groupInfo = ref<FilterRuleGroup>({
-  name: props.group?.name ?? '',
-  rule_string: props.group?.rule_string ?? '',
-  media_type: props.group?.media_type ?? '',
-  category: props.group?.category ?? '',
-})
-
-// 媒体类型字典
-const mediaTypeItems = [
-  { title: t('common.all'), value: '' },
-  { title: t('mediaType.movie'), value: '电影' },
-  { title: t('mediaType.tv'), value: '电视剧' },
-]
-
-// 根据选中的媒体类型，获取对应的媒体类别
-const getCategories = computed(() => {
-  const default_value = [{ title: t('common.all'), value: '' }]
-  if (!props.categories || !groupInfo.value.media_type || !props.categories[groupInfo.value.media_type]) {
-    return default_value
-  }
-  return default_value.concat(props.categories[groupInfo.value.media_type] || [])
-})
-
-// 规则组规则卡片列表
-const filterRuleCards = ref<FilterCard[]>([])
-
-// 导入代码弹窗
-const importCodeDialog = ref(false)
-
-// 导入代码类型
-const importCodeType = ref('')
-
-// 更新规则卡片的值
-function updateFilterCardValue(pri: string, rules: string[]) {
-  const card = filterRuleCards.value.find(card => card.pri === pri)
-  if (card && Array.isArray(rules)) card.rules = rules
+/** 打开共享过滤规则组配置弹窗。 */
+function openGroupInfoDialog() {
+  openSharedDialog(
+    FilterRuleGroupInfoDialog,
+    {
+      group: props.group,
+      groups: props.groups,
+      categories: props.categories,
+      custom_rules: props.custom_rules,
+    },
+    {
+      change: (...args: unknown[]) => emit('change', ...args),
+      done: () => emit('done'),
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
-// 移除卡片
-function filterCardClose(pri: string) {
-  filterRuleCards.value = filterRuleCards.value
-    .filter(card => card.pri !== pri)
-    .map((card, index) => {
-      card.pri = (index + 1).toString()
-      return card
-    })
-}
-
-// 分享规则
-async function shareRules() {
-  if (filterRuleCards.value.length === 0) return
-
-  const value = filterRuleCards.value
-    .filter(card => Array.isArray(card.rules) && card.rules.length > 0)
-    .map(card => card.rules.join('&'))
-    .join('>')
-
-  try {
-    let success
-    success = copyToClipboard(value)
-    if (await success) $toast.success(t('filterRule.shareSuccess'))
-    else $toast.error(t('filterRule.shareFailed'))
-  } catch (error) {
-    $toast.error(t('filterRule.shareFailed'))
-    console.error(error)
-  }
-}
-
-// 导入规则
-async function importRules(ruleType: string) {
-  importCodeType.value = ruleType
-  importCodeDialog.value = true
-}
-
-// 保存导入的代码，直接覆盖原有值
-function saveCodeString(type: string, code: any) {
-  try {
-    code = code.value
-    if (type === 'priority') {
-      // 解析值
-      if (!code) return
-      // 首尾增加空格
-      if (!code.startsWith(' ')) code = ` ${code}`
-      if (!code.endsWith(' ')) code = `${code} `
-      const groups = code.split('>')
-      filterRuleCards.value = groups.map((group: string, index: number) => ({
-        pri: (index + 1).toString(),
-        rules: group.split('&').filter(rule => rule),
-      }))
-    }
-  } catch (error) {
-    $toast.error(t('filterRule.importFailed'))
-    console.error(error)
-  }
-}
-
-// 增加卡片
-function addFilterCard() {
-  const pri = (filterRuleCards.value.length + 1).toString()
-  const newCard: FilterCard = { pri, rules: [] }
-  filterRuleCards.value.push(newCard)
-}
-
-// 根据列表的拖动顺序更新优先级
-function dragOrderEnd() {
-  filterRuleCards.value.forEach((card, index) => {
-    card.pri = (index + 1).toString()
-  })
-}
-
-// 打开详情弹窗
-function opengroupInfoDialog() {
-  groupInfo.value = cloneDeep(props.group)
-  if (props.group.rule_string) {
-    filterRuleCards.value = props.group.rule_string.split('>').map((group: string, index: number) => ({
-      pri: (index + 1).toString(),
-      rules: group.split('&').filter(rule => rule),
-    }))
-  }
-  groupInfoDialog.value = true
-}
-
-// 保存详情数据
-function saveGroupInfo() {
-  if (!groupInfo.value.name.trim()) {
-    $toast.error(t('filterRule.nameRequired'))
-    return
-  }
-  if (props.groups.some(item => item.name === groupInfo.value.name && item !== props.group)) {
-    $toast.error(t('filterRule.nameDuplicate'))
-    return
-  }
-
-  groupInfoDialog.value = false
-  groupInfo.value.rule_string = filterRuleCards.value
-    .filter(card => Array.isArray(card.rules) && card.rules.length > 0)
-    .map(card => card.rules.join('&'))
-    .join('>')
-  emit('change', groupInfo.value, props.group.name)
-  emit('done')
-}
-
-// 按钮点击
+/** 关闭过滤规则组卡片。 */
 function onClose() {
   emit('close')
 }
 </script>
 
 <template>
-  <div>
-    <VCard variant="tonal" @click="opengroupInfoDialog">
-      <span class="absolute top-3 right-12">
-        <IconBtn>
-          <VIcon class="cursor-move" icon="mdi-drag" />
-        </IconBtn>
-      </span>
-      <VDialogCloseBtn @click="onClose" />
-      <VCardText class="flex justify-space-between align-center gap-3">
-        <div class="align-self-start">
-          <h5 class="text-h6 mb-1">{{ props.group.name }}</h5>
-          <div class="text-body-1 mb-3">
-            <span v-if="!props.group.category">{{ props.group.media_type || t('common.all') }}</span>
-            <span v-else>{{ props.group.category }}</span>
-          </div>
+  <VCard
+    variant="tonal"
+    class="app-card-shell app-card-colorful"
+    :style="{ '--app-card-accent-rgb': accentRgb }"
+    @click="openGroupInfoDialog"
+  >
+    <span class="app-card-top-action absolute top-3 right-12">
+      <IconBtn @click.stop>
+        <VIcon class="cursor-move" icon="mdi-drag" />
+      </IconBtn>
+    </span>
+    <VDialogCloseBtn @click="onClose" />
+    <VCardText class="app-card-summary app-card-summary--double-action app-card-summary--title-subtitle">
+      <div class="app-card-summary__content">
+        <h5 class="app-card-summary__title text-h6">{{ props.group.name }}</h5>
+        <div class="app-card-summary__subtitle text-body-1">
+          <span v-if="!props.group.category">{{ props.group.media_type || t('common.all') }}</span>
+          <span v-else>{{ props.group.category }}</span>
         </div>
-        <VImg :src="filter_group_svg" cover class="mt-10" max-width="3rem" />
-      </VCardText>
-    </VCard>
-    <VDialog
-      v-if="groupInfoDialog"
-      v-model="groupInfoDialog"
-      scrollable
-      max-width="80rem"
-      :fullscreen="!display.mdAndUp.value"
-    >
-      <VCard :title="`${props.group.name} - ${t('filterRule.title')}`">
-        <VDialogCloseBtn v-model="groupInfoDialog" />
-        <VDivider />
-        <VCardItem class="pt-1">
-          <VRow class="mt-1">
-            <VCol cols="12" md="6">
-              <VTextField
-                v-model="groupInfo.name"
-                :label="t('filterRule.groupName')"
-                :placeholder="t('filterRule.nameRequired')"
-                :hint="t('filterRule.groupName')"
-                persistent-hint
-                active
-                prepend-inner-icon="mdi-label"
-              />
-            </VCol>
-            <VCol cols="6" md="3">
-              <VAutocomplete
-                v-model="groupInfo.media_type"
-                :label="t('filterRule.mediaType')"
-                :items="mediaTypeItems"
-                :hint="t('filterRule.mediaType')"
-                persistent-hint
-                active
-                prepend-inner-icon="mdi-movie-open"
-              />
-            </VCol>
-            <VCol cols="6" md="3">
-              <VAutocomplete
-                v-model="groupInfo.category"
-                :items="getCategories"
-                :label="t('filterRule.category')"
-                :hint="t('filterRule.category')"
-                persistent-hint
-                active
-                prepend-inner-icon="mdi-folder-open"
-              />
-            </VCol>
-          </VRow>
-        </VCardItem>
-        <VCardText>
-          <draggable
-            v-model="filterRuleCards"
-            handle=".cursor-move"
-            item-key="pri"
-            tag="div"
-            @end="dragOrderEnd"
-            :component-data="{ 'class': 'grid gap-3 grid-filterrule-card' }"
-          >
-            <template #item="{ element }">
-              <FilterRuleCard
-                :pri="element.pri"
-                :maxpri="filterRuleCards.length.toString()"
-                :rules="element.rules"
-                :custom_rules="props.custom_rules"
-                @changed="updateFilterCardValue"
-                @close="filterCardClose(element.pri)"
-              />
-            </template>
-          </draggable>
-          <div class="text-center" v-if="filterRuleCards.length == 0">{{ t('filterRule.add') }}</div>
-        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn color="primary" @click="addFilterCard">
-            <VIcon icon="mdi-plus" />
-          </VBtn>
-          <VBtn color="success" @click="importRules('priority')">
-            <VIcon icon="mdi-import" />
-          </VBtn>
-          <VBtn color="info" @click="shareRules">
-            <VIcon icon="mdi-share" />
-          </VBtn>
-          <VSpacer />
-          <VBtn @click="saveGroupInfo" prepend-icon="mdi-content-save" class="px-5">
-            {{ t('common.save') }}
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-    <ImportCodeDialog
-      v-if="importCodeDialog"
-      v-model="importCodeDialog"
-      :title="t('filterRule.import')"
-      :dataType="importCodeType"
-      @close="importCodeDialog = false"
-      @save="saveCodeString"
-    />
-  </div>
+      </div>
+      <div class="app-card-summary__media" aria-hidden="true">
+        <VImg ref="imageRef" :src="filter_group_svg" contain class="app-card-summary__image" @load="updateAccentColor" />
+      </div>
+    </VCardText>
+  </VCard>
 </template>

src/components/cards/LibraryCard.vue

@@ -3,7 +3,8 @@ import type { MediaServerLibrary } from '@/api/types'
 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 { getLogoUrl } from '@/utils/imageUtils'
+import { openMediaServerItem } from '@/utils/appDeepLink'
 
 // 输入参数
 const props = defineProps({
@@ -32,57 +33,68 @@ function imageLoadHandler() {
 // 图片加载错误
 function imageErrorHandler() {
   imageError.value = true
+  imgUrl.value = getDefaultImage()
 }
 
 // 默认图片
 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 === 'zspace') return getLogoUrl('zspace')
+  else if (props.media?.server_type === 'jellyfin') return jellyfin
+  else if (props.media?.server_type === 'trimemedia') return getLogoUrl('trimemedia')
+  else if (props.media?.server_type === 'ugreen') return getLogoUrl('ugreen')
   else return plex
 }
 
 // 跳转播放
-function goPlay() {
-  if (props.media?.link) window.open(props.media?.link, '_blank')
+async function goPlay() {
+  if (props.media) {
+    await openMediaServerItem(props.media)
+  }
 }
 
 // 生成图片代理路径
-function getImgUrl(url: string) {
-  if (!url) return getDefaultImage()
-  else return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(url)}`
+function getImgUrl(url: string, use_cookies?: boolean) {
+  if (!url || imageError.value) return getDefaultImage()
+  let imgurl = `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(url)}`
+  if (use_cookies) {
+    imgurl += `&use_cookies=${encodeURIComponent(use_cookies)}`
+  }
+  return imgurl
 }
 
 // 根据多张图片生成媒体库封面
-async function drawImages(imageList: string[]) {
+async function drawImages(imageList: string[], use_cookies?: boolean) {
   // 图片
-  const IMAGES = imageList
+  const IMAGES = [...imageList]
   if (IMAGES.length === 0) return getDefaultImage()
 
   // 为所有图片添加system/img前缀
-  for (let i = 0; i < IMAGES.length; i++)
+  for (let i = 0; i < IMAGES.length; i++) {
     IMAGES[i] = `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(IMAGES[i])}`
+    if (use_cookies) {
+      IMAGES[i] += `&use_cookies=${encodeURIComponent(use_cookies)}`
+    }
+  }
 
   // canvas
   const canvas = canvasRef.value
   if (!canvas) return getDefaultImage()
 
   // 画布参数
-  const POSTER_WIDTH = (canvas.width - 32) / 4
-  const POSTER_HEIGHT = canvas.height * 0.75 - 8
-  const MARGIN_WIDTH = 4
-  const MARGIN_HEIGHT = 4
-  const REFLECTION_HEIGHT = POSTER_HEIGHT / 2
-  const REFLECTION_SHOW_HEIGHT = canvas.height / 4
+  const POSTER_WIDTH = (canvas.width - 40) / 4 // 左右边框8px + 3个间隔24px = 40px
+  const POSTER_HEIGHT = 256 // 上方海报高256
+  const MARGIN_WIDTH = 8 // 左右间隔为8
+  const MARGIN_HEIGHT = 4 // 海报和倒影之间的间隔为4
+  const REFLECTION_HEIGHT = canvas.height - POSTER_HEIGHT - MARGIN_HEIGHT // 下方倒影使用剩余全部高度
 
   // 获取画布上下文
   const ctx = canvas.getContext('2d')
   if (!ctx) return getDefaultImage()
 
-  // 设置背景色为黑色
-  ctx.fillStyle = '#000000'
-  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  // 设置背景色为透明
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
 
   // 绘制图片
   async function drawImageWithReflection(imgSrc: string, index: number) {
@@ -101,36 +113,27 @@ async function drawImages(imageList: string[]) {
     } catch (error) {
       console.error(error)
       ctx.fillStyle = '#e5e7eb'
-      ctx.fillRect(MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1), MARGIN_HEIGHT, POSTER_WIDTH, POSTER_HEIGHT)
+      ctx.fillRect(MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1), 0, POSTER_WIDTH, POSTER_HEIGHT)
       return
     }
 
     const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1)
-    const y = MARGIN_HEIGHT
+    const y = 0 // 海报紧贴顶部
 
     ctx.drawImage(img, x, y, POSTER_WIDTH, POSTER_HEIGHT)
 
     ctx.save()
     ctx.translate(0, canvas.height)
     ctx.scale(1, -1)
-    ctx.drawImage(
-      img,
-      0,
-      0,
-      img.width,
-      img.height,
-      x,
-      REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT,
-      POSTER_WIDTH,
-      REFLECTION_HEIGHT,
-    )
+    ctx.drawImage(img, 0, 0, img.width, img.height, x, 0, POSTER_WIDTH, REFLECTION_HEIGHT)
 
-    const gradient = ctx.createLinearGradient(0, REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT, 0, REFLECTION_HEIGHT)
+    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height - (POSTER_HEIGHT + MARGIN_HEIGHT))
 
     gradient.addColorStop(0, 'rgba(0, 0, 0, 1)')
-    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.3)')
+    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.7)')
+    ctx.globalCompositeOperation = 'destination-out'
     ctx.fillStyle = gradient
-    ctx.fillRect(x, 0, POSTER_WIDTH, REFLECTION_SHOW_HEIGHT)
+    ctx.fillRect(x, 0, POSTER_WIDTH, REFLECTION_HEIGHT)
 
     ctx.restore()
   }
@@ -145,8 +148,8 @@ async function drawImages(imageList: string[]) {
 
 onMounted(async () => {
   if (props.media?.image_list && props.media?.image_list.length > 0)
-    imgUrl.value = await drawImages(props.media?.image_list || [])
-  else imgUrl.value = getImgUrl(props.media?.image || '')
+    imgUrl.value = await drawImages(props.media?.image_list || [], props.media?.use_cookies)
+  else imgUrl.value = getImgUrl(props.media?.image || '', props.media?.use_cookies)
 })
 </script>
 
@@ -163,20 +166,22 @@ onMounted(async () => {
         @click="goPlay"
       >
         <template #image>
-          <canvas ref="canvasRef" class="w-full h-full hidden" />
+          <canvas ref="canvasRef" width="640" height="360" class="w-full h-full hidden" />
           <VImg :src="imgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler" @error="imageErrorHandler">
             <template #placeholder>
               <div class="w-full h-full">
                 <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
               </div>
             </template>
-            <VCardText
-              class="w-full flex flex-col flex-wrap justify-end align-center text-white absolute bottom-0 cursor-pointer pa-2"
-            >
-              <h1 class="mb-1 text-white text-shadow font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
-                {{ props.media?.name }}
-              </h1>
-            </VCardText>
+            <template #default>
+              <VCardText
+                class="w-full flex flex-col flex-wrap justify-end align-center text-white absolute bottom-0 cursor-pointer pa-2"
+              >
+                <h1 class="mb-1 text-white text-shadow font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
+                  {{ props.media?.name }}
+                </h1>
+              </VCardText>
+            </template>
           </VImg>
         </template>
       </VCard>

src/components/cards/MediaCard.vue

@@ -1,37 +1,53 @@
 <script lang="ts" setup>
 import noImage from '@images/no-image.jpeg'
-import tmdbImage from '@images/logos/tmdb.png'
-import doubanImage from '@images/logos/douban-black.png'
-import bangumiImage from '@images/logos/bangumi.png'
+import { getDisplayImageUrl, getLogoUrl } from '@/utils/imageUtils'
 import api from '@/api'
-import { useToast } from 'vue-toast-notification'
+import { useToast } from 'vue-toastification'
 import { formatSeason, formatRating } from '@/@core/utils/formatters'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import type { MediaInfo, Subscribe, MediaSeason, Site } from '@/api/types'
-import router, { registerAbortController } from '@/router'
-import { useUserStore } from '@/stores'
-import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
-import SearchSiteDialog from '@/components/dialog/SearchSiteDialog.vue'
-import SubscribeSeasonDialog from '../dialog/SubscribeSeasonDialog.vue'
+import router from '@/router'
+import { useUserStore, useGlobalSettingsStore } from '@/stores'
 import { useI18n } from 'vue-i18n'
 import { mediaTypeDict } from '@/api/constants'
-import { hasPermission } from '@/utils/permission'
+import { buildUserPermissionContext, hasPermission } from '@/utils/permission'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+import {
+  getCachedMediaExistsStatus,
+  getCachedMediaSubscribeStatus,
+  setCachedMediaExistsStatus,
+  setCachedMediaSubscribeStatus,
+} from '@/utils/mediaStatusCache'
+
+const SearchSiteDialog = defineAsyncComponent(() => import('@/components/dialog/SearchSiteDialog.vue'))
+const SubscribeEditDialog = defineAsyncComponent(() => import('../dialog/SubscribeEditDialog.vue'))
+const SubscribeSeasonDialog = defineAsyncComponent(() => import('../dialog/SubscribeSeasonDialog.vue'))
 
 // 国际化
 const { t } = useI18n()
 
+interface MediaCardMedia extends MediaInfo {
+  total_episode?: number
+  episode_count?: number
+}
+
 // 输入参数
 const props = defineProps({
-  media: Object as PropType<MediaInfo>,
+  media: Object as PropType<MediaCardMedia>,
   width: String,
   height: String,
 })
 
 // 从 provide 中获取全局设置
-const globalSettings: any = inject('globalSettings')
+// 全局设置
+const globalSettingsStore = useGlobalSettingsStore()
+const globalSettings = globalSettingsStore.globalSettings
 
 // 用户 Store
 const userStore = useUserStore()
+const userPermissions = computed(() => buildUserPermissionContext(userStore.superUser, userStore.permissions))
+const canSearch = computed(() => hasPermission(userPermissions.value, 'search'))
+const canSubscribe = computed(() => hasPermission(userPermissions.value, 'subscribe'))
 
 // 提示框
 const $toast = useToast()
@@ -48,23 +64,14 @@ const isSubscribed = ref(false)
 // 本地存在状态
 const isExists = ref(false)
 
-// 订阅季弹窗
-const subscribeSeasonDialog = ref(false)
-
-// 订阅编辑弹窗
-const subscribeEditDialog = ref(false)
-
-// 订阅ID
-const subscribeId = ref<number>()
-
 // 选中的订阅季
 const seasonsSelected = ref<MediaSeason[]>([])
 
 // 来源角标字典
 const sourceIconDict: { [key: string]: any } = {
-  themoviedb: tmdbImage,
-  douban: doubanImage,
-  bangumi: bangumiImage,
+  themoviedb: getLogoUrl('tmdb'),
+  douban: getLogoUrl('douban-black'),
+  bangumi: getLogoUrl('bangumi'),
 }
 
 // 绑定MediaCard元素
@@ -82,12 +89,48 @@ const selectedSites = ref<number[]>([])
 // 搜索菜单显示状态
 const searchMenuShow = ref(false)
 
-// 选择站点对话框
-const chooseSiteDialog = ref(false)
-
 // 选择的剧集组
 const episodeGroup = ref('')
 
+// 打开订阅季选择弹窗，避免每个媒体卡片都持有弹窗实例。
+function openSubscribeSeasonDialog() {
+  openSharedDialog(
+    SubscribeSeasonDialog,
+    { media: props.media },
+    {
+      subscribe: subscribeSeasons,
+    },
+    { closeOn: ['close', 'subscribe'] },
+  )
+}
+
+// 打开订阅编辑弹窗，保存、关闭或删除时释放共享弹窗实例。
+function openSubscribeEditDialog(subid: number) {
+  openSharedDialog(
+    SubscribeEditDialog,
+    { subid },
+    {
+      remove: onRemoveSubscribe,
+    },
+    { closeOn: ['close', 'save', 'remove'] },
+  )
+}
+
+// 打开站点选择弹窗，并把选择结果交回当前媒体卡片继续搜索。
+function openSearchSiteDialog() {
+  openSharedDialog(
+    SearchSiteDialog,
+    {
+      sites: allSites.value,
+      selected: selectedSites.value,
+    },
+    {
+      search: searchSites,
+    },
+    { closeOn: ['close', 'search'] },
+  )
+}
+
 // 查询所有站点
 async function querySites() {
   try {
@@ -103,7 +146,7 @@ async function querySites() {
 // 查询用户选中的站点
 async function querySelectedSites() {
   try {
-    const result: { [key: string]: any } = await api.get('system/setting/IndexerSites')
+    const result: { [key: string]: any } = await api.get('system/setting/public/IndexerSites')
     selectedSites.value = result.data?.value ?? []
   } catch (error) {
     console.log(error)
@@ -118,6 +161,22 @@ function getMediaId() {
   else return `${props.media?.mediaid_prefix}:${props.media?.media_id}`
 }
 
+function getSubscribeStatusKey(season: number | null = props.media?.season ?? null) {
+  return `${getMediaId()}::${season ?? 'all'}`
+}
+
+function getExistsStatusKey() {
+  return [
+    props.media?.tmdb_id ?? '',
+    props.media?.title ?? '',
+    props.media?.year ?? '',
+    props.media?.season ?? '',
+    props.media?.type ?? '',
+    props.media?.mediaid_prefix ?? '',
+    props.media?.media_id ?? '',
+  ].join('::')
+}
+
 // 角标颜色
 function getChipColor(type: string) {
   if (type === '电影') return 'border-blue-500 bg-blue-600'
@@ -130,7 +189,7 @@ async function handleAddSubscribe() {
   if (props.media?.type === '电视剧') {
     // 弹出季选择列表，支持多选
     seasonsSelected.value = []
-    subscribeSeasonDialog.value = true
+    openSubscribeSeasonDialog()
   } else {
     // 电影
     addSubscribe()
@@ -138,7 +197,7 @@ async function handleAddSubscribe() {
 }
 
 // 调用API添加订阅，电视剧的话需要指定季
-async function addSubscribe(season: number = 0, best_version: number = 0) {
+async function addSubscribe(season: number | null = null, best_version: number = 0) {
   // 开始处理
   startNProgress()
   try {
@@ -153,7 +212,7 @@ async function addSubscribe(season: number = 0, best_version: number = 0) {
       doubanid: props.media?.douban_id,
       bangumiid: props.media?.bangumi_id,
       mediaid: props.media?.media_id ? `${props.media?.mediaid_prefix}:${props.media?.media_id}` : '',
-      season,
+      season: props.media?.type === '电影' ? null : season,
       best_version,
       episode_group: episodeGroup.value,
     })
@@ -162,6 +221,7 @@ async function addSubscribe(season: number = 0, best_version: number = 0) {
     if (result.success) {
       // 订阅成功
       isSubscribed.value = true
+      setCachedMediaSubscribeStatus(getSubscribeStatusKey(season), true)
     }
 
     // 提示
@@ -171,8 +231,7 @@ async function addSubscribe(season: number = 0, best_version: number = 0) {
     if (result.success && seasonsSelected.value.length <= 1) {
       const show_edit_dialog = await queryDefaultSubscribeConfig()
       if (show_edit_dialog) {
-        subscribeId.value = result.data.id
-        subscribeEditDialog.value = true
+        openSubscribeEditDialog(result.data.id)
       }
     }
   } catch (error) {
@@ -183,8 +242,8 @@ async function addSubscribe(season: number = 0, best_version: number = 0) {
 }
 
 // 弹出添加订阅提示
-function showSubscribeAddToast(result: boolean, title: string, season: number, message: string, best_version: number) {
-  if (season) title = `${title} ${formatSeason(season.toString())}`
+function showSubscribeAddToast(result: boolean, title: string, season: number | null, message: string, best_version: number) {
+  if (season !== null) title = `${title} ${formatSeason(season.toString())}`
 
   let subname = t('subscribe.normalSub')
   if (best_version > 0) subname = t('subscribe.versionSub')
@@ -208,6 +267,7 @@ async function removeSubscribe() {
 
     if (result.success) {
       isSubscribed.value = false
+      setCachedMediaSubscribeStatus(getSubscribeStatusKey(props.media?.season ?? null), false)
       $toast.success(`${props.media?.title} ${t('subscribe.cancelSuccess')}`)
     } else {
       $toast.error(`${props.media?.title} ${t('subscribe.cancelFailed', { message: result.message })}`)
@@ -222,8 +282,10 @@ async function removeSubscribe() {
 // 查询当前媒体是否已订阅
 async function handleCheckSubscribe() {
   try {
-    const result = await checkSubscribe(props.media?.season)
-    if (result) isSubscribed.value = true
+    const subscribed = await getCachedMediaSubscribeStatus(getSubscribeStatusKey(props.media?.season ?? null), () =>
+      checkSubscribe(props.media?.season ?? null),
+    )
+    isSubscribed.value = subscribed
   } catch (error) {
     console.error(error)
   }
@@ -232,57 +294,56 @@ async function handleCheckSubscribe() {
 // 查询当前媒体是否已入库
 async function handleCheckExists() {
   try {
-    const abortController = new AbortController()
-    registerAbortController(abortController)
-    const { signal } = abortController
-    const result: { [key: string]: any } = await api.get('mediaserver/exists', {
-      params: {
-        tmdbid: props.media?.tmdb_id,
-        title: props.media?.title,
-        year: props.media?.year,
-        season: props.media?.season,
-        mtype: props.media?.type,
-      },
-      signal,
+    const exists = await getCachedMediaExistsStatus(getExistsStatusKey(), async () => {
+      const result: { [key: string]: any } = await api.get('mediaserver/exists', {
+        params: {
+          tmdbid: props.media?.tmdb_id,
+          title: props.media?.title,
+          year: props.media?.year,
+          season: props.media?.season,
+          mtype: props.media?.type,
+        },
+      })
+
+      return Boolean(result.success)
     })
 
-    if (result.success) isExists.value = true
+    isExists.value = exists
+    setCachedMediaExistsStatus(getExistsStatusKey(), exists)
   } catch (error) {
     console.error(error)
   }
 }
 
 // 调用API检查是否已订阅，电视剧需要指定季
-async function checkSubscribe(season = 0) {
+async function checkSubscribe(season: number | null) {
   try {
-    const abortController = new AbortController()
-    registerAbortController(abortController)
-    const { signal } = abortController
+    // AbortController 现在由全局请求优化器自动管理
     const mediaid = getMediaId()
     const result: Subscribe = await api.get(`subscribe/media/${mediaid}`, {
       params: {
         season,
         title: props.media?.title,
       },
-      signal,
     })
 
-    return result.id || null
-  } catch (error) {
-    console.error(error)
-  }
+    return Boolean(result.id)
+  } catch (error: any) {
+    if (error?.response?.status === 404) {
+      return false
+    }
 
-  return null
+    throw error
+  }
 }
 
 // 查询订阅弹窗规则
 async function queryDefaultSubscribeConfig() {
-  // 非管理员不显示
-  if (!userStore.superUser) return false
+  if (!canSubscribe.value) return false
   try {
     let subscribe_config_url = ''
-    if (props.media?.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
-    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+    if (props.media?.type === '电影') subscribe_config_url = 'system/setting/public/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/public/DefaultTvSubscribeConfig'
     const result: { [key: string]: any } = await api.get(subscribe_config_url)
     if (result.data?.value) return result.data.value.show_edit_dialog
   } catch (error) {
@@ -299,7 +360,6 @@ function handleSubscribe() {
 
 // 订阅多季
 function subscribeSeasons(seasons: MediaSeason[], seasonNoExists: { [key: number]: number }, groudId: string) {
-  subscribeSeasonDialog.value = false
   episodeGroup.value = groudId
   seasonsSelected.value = seasons || []
   seasonsSelected.value.forEach(season => {
@@ -307,7 +367,7 @@ function subscribeSeasons(seasons: MediaSeason[], seasonNoExists: { [key: number
     if (season && props.media?.tmdb_id)
       // 全部存在时洗版
       best_version = !seasonNoExists[season.season_number || 0] ? 1 : 0
-    addSubscribe(season.season_number, best_version)
+    addSubscribe(season.season_number ?? null, best_version)
   })
 }
 
@@ -344,7 +404,7 @@ async function clickSearch() {
     await querySelectedSites()
   }
   if (allSites.value?.length > 0) {
-    chooseSiteDialog.value = true
+    openSearchSiteDialog()
   } else {
     handleSearch()
   }
@@ -368,7 +428,6 @@ function handleSearch() {
 
 // 搜索多站点
 function searchSites(sites: number[]) {
-  chooseSiteDialog.value = false
   selectedSites.value = sites
   handleSearch()
 }
@@ -407,18 +466,12 @@ function setupIntersectionObserver() {
 const getImgUrl: Ref<string> = computed(() => {
   if (imageLoadError.value) return noImage
   const url = props.media?.poster_path?.replace('original', 'w500') ?? noImage
-  // 使用图片缓存
-  if (globalSettings.GLOBAL_IMAGE_CACHE)
-    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
-  // 如果地址中包含douban则使用中转代理
-  if (url.includes('doubanio.com'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(url)}`
-  return url
+  return getDisplayImageUrl(url, globalSettings.GLOBAL_IMAGE_CACHE)
 })
 
 // 移除订阅
 function onRemoveSubscribe() {
-  subscribeEditDialog.value = false
+  isSubscribed.value = false
 }
 
 // 获取媒体类型文本
@@ -473,23 +526,30 @@ onBeforeUnmount(() => {
             class="w-full h-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
             style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
           >
-            <span class="font-bold">{{ props.media?.year }}</span>
-            <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+            <span class="font-semibold text-sm">{{ props.media?.year }}</span>
+            <h1 class="media-card-title font-bold mb-2 text-white line-clamp-2 overflow-hidden text-ellipsis ...">
               {{ props.media?.title }}
             </h1>
-            <p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
+            <p class="media-card-overview line-clamp-3 overflow-hidden text-ellipsis ...">
               {{ props.media?.overview }}
             </p>
             <div v-if="props.media?.collection_id" class="mb-3" @click.stop=""></div>
             <div v-else class="flex align-center justify-between">
               <IconBtn
-                v-if="hasPermission({ is_superuser: userStore.superUser, ...userStore.permissions }, 'search')"
+                v-if="canSearch"
                 icon="mdi-magnify"
                 color="white"
+                size="small"
                 @click.stop="clickSearch"
               />
               <VSpacer />
-              <IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
+              <IconBtn
+                v-if="canSubscribe"
+                icon="mdi-heart"
+                :color="isSubscribed ? 'error' : 'white'"
+                size="small"
+                @click.stop="handleSubscribe"
+              />
             </div>
           </VCardText>
           <!-- 类型角标 -->
@@ -517,6 +577,7 @@ onBeforeUnmount(() => {
           <!--来源图标-->
           <VAvatar
             size="24"
+            variant="plain"
             density="compact"
             class="absolute bottom-1 right-1"
             tile
@@ -528,30 +589,15 @@ onBeforeUnmount(() => {
       </div>
     </template>
   </VHover>
-  <!-- 订阅季弹窗 -->
-  <subscribeSeasonDialog
-    v-if="subscribeSeasonDialog"
-    v-model="subscribeSeasonDialog"
-    :media="media"
-    @subscribe="subscribeSeasons"
-    @close="subscribeSeasonDialog = false"
-  />
-  <!-- 订阅编辑弹窗 -->
-  <SubscribeEditDialog
-    v-if="subscribeEditDialog"
-    v-model="subscribeEditDialog"
-    :subid="subscribeId"
-    @close="subscribeEditDialog = false"
-    @save="subscribeEditDialog = false"
-    @remove="onRemoveSubscribe"
-  />
-  <!-- 站点选择对话框 -->
-  <SearchSiteDialog
-    v-if="chooseSiteDialog"
-    v-model="chooseSiteDialog"
-    :sites="allSites"
-    :selected="selectedSites"
-    @search="searchSites"
-    @close="chooseSiteDialog = false"
-  />
 </template>
+<style scoped>
+.media-card-title {
+  font-size: 1.125rem;
+  line-height: 1.25rem;
+}
+
+.media-card-overview {
+  font-size: 0.875rem;
+  line-height: 1rem;
+}
+</style>

src/components/cards/MediaInfoCard.vue

@@ -47,10 +47,12 @@ function openTmdbPage(type: string, tmdbId: number) {
         </div>
         <div class="flex-grow">
           <VCardItem class="pb-1">
-            <VCardTitle class="text-center text-md-left">
+            <div class="text-center text-md-left text-h6 font-weight-bold line-clamp-2 overflow-hidden text-ellipsis">
               {{ context?.media_info?.title || context?.meta_info?.name }}
-              {{ context?.meta_info?.season_episode }}
-            </VCardTitle>
+              <span v-if="context?.meta_info?.season_episode" class="text-sm text-medium-emphasis align-top">
+                {{ context?.meta_info?.season_episode }}
+              </span>
+            </div>
             <VCardSubtitle class="text-center text-md-left">
               {{ context?.media_info?.year || context?.meta_info?.year }}
             </VCardSubtitle>
@@ -87,6 +89,9 @@ function openTmdbPage(type: string, tmdbId: number) {
               {{ context?.media_info?.tmdb_id }}
             </VChip>
             <!-- meta_info -->
+            <VChip v-if="context?.meta_info?.web_source" variant="elevated" class="me-1 mb-1 text-white bg-purple-500">
+              {{ context?.meta_info?.web_source }}
+            </VChip>
             <VChip v-if="context?.meta_info?.edition" variant="elevated" class="me-1 mb-1 text-white bg-red-500">
               {{ context?.meta_info?.edition }}
             </VChip>

src/components/cards/MediaServerCard.vue

@@ -1,22 +1,17 @@
 <script setup lang="ts">
-import { MediaServerConf, MediaServerLibrary, MediaStatistic } from '@/api/types'
-import { useToast } from 'vue-toast-notification'
-import emby_image from '@images/logos/emby.png'
-import jellyfin_image from '@images/logos/jellyfin.png'
-import plex_image from '@images/logos/plex.png'
-import trimemedia_image from '@images/logos/trimemedia.png'
-import custom_image from '@images/logos/mediaserver.png'
 import api from '@/api'
-import { cloneDeep } from 'lodash-es'
+import type { MediaServerConf, MediaStatistic } from '@/api/types'
+import { getLogoUrl } from '@/utils/imageUtils'
 import { useI18n } from 'vue-i18n'
 import { mediaServerDict } from '@/api/constants'
-import { useDisplay } from 'vuetify'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+import { useCardAccentColor } from '@/composables/useCardAccentColor'
 
-// 显示器宽度
-const display = useDisplay()
+const MediaServerInfoDialog = defineAsyncComponent(() => import('@/components/dialog/MediaServerInfoDialog.vue'))
 
 // 获取i18n实例
 const { t } = useI18n()
+const { accentRgb, imageRef, updateAccentColor } = useCardAccentColor('#56CA00')
 
 // 定义输入
 const props = defineProps({
@@ -32,9 +27,6 @@ const props = defineProps({
   },
 })
 
-// 提示框
-const $toast = useToast()
-
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'done', 'change'])
 
@@ -57,76 +49,48 @@ const infoItems = ref([
   },
 ])
 
-// 同步媒体库选项
-const librariesOptions = ref<{ title: string; value: string | undefined }[]>([
-  {
-    title: t('common.all'),
-    value: 'all',
-  },
-])
-
-// 媒体服务器详情弹窗
-const mediaServerInfoDialog = ref(false)
-
-// 媒体服务器详情
-const mediaServerInfo = ref<MediaServerConf>({
-  name: '',
-  type: '',
-  enabled: false,
-  config: {},
-})
-
-// 打开详情弹窗
+/** 打开共享媒体服务器配置弹窗。 */
 function openMediaServerInfoDialog() {
-  loadLibrary(props.mediaserver.name)
-  // 深复制
-  mediaServerInfo.value = cloneDeep(props.mediaserver)
-  mediaServerInfoDialog.value = true
-  if (!props.mediaserver.sync_libraries) {
-    mediaServerInfo.value.sync_libraries = ['all']
-  }
-}
-
-// 保存详情数据
-function saveMediaServerInfo() {
-  // 为空不保存，跳出警告框
-  if (!mediaServerInfo.value.name) {
-    $toast.error(t('common.nameRequired'))
-    return
-  }
-  // 重名判断
-  if (props.mediaservers.some(item => item.name === mediaServerInfo.value.name && item !== props.mediaserver)) {
-    $toast.error(t('common.nameExists', { name: mediaServerInfo.value.name }))
-    return
-  }
-  // 执行保存
-  mediaServerInfoDialog.value = false
-  emit('change', mediaServerInfo.value, props.mediaserver.name)
-  emit('done')
+  openSharedDialog(
+    MediaServerInfoDialog,
+    {
+      mediaserver: props.mediaserver,
+      mediaservers: props.mediaservers,
+    },
+    {
+      change: (...args: unknown[]) => emit('change', ...args),
+      done: () => emit('done'),
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
 // 根据存储类型选择图标
 const getIcon = computed(() => {
   switch (props.mediaserver.type) {
     case 'emby':
-      return emby_image
+      return getLogoUrl('emby')
+    case 'zspace':
+      return getLogoUrl('zspace')
     case 'jellyfin':
-      return jellyfin_image
+      return getLogoUrl('jellyfin')
     case 'trimemedia':
-      return trimemedia_image
+      return getLogoUrl('trimemedia')
+    case 'ugreen':
+      return getLogoUrl('ugreen')
     case 'plex':
-      return plex_image
+      return getLogoUrl('plex')
     default:
-      return custom_image
+      return getLogoUrl('mediaserver')
   }
 })
 
-// 按钮点击
+/** 关闭媒体服务器卡片。 */
 function onClose() {
   emit('close')
 }
 
-// 调用API加载媒体统计数据
+/** 调用 API 加载媒体服务器统计数据。 */
 async function loadMediaStatistic() {
   try {
     const res: MediaStatistic = await api.get('dashboard/statistic', {
@@ -159,353 +123,38 @@ async function loadMediaStatistic() {
   }
 }
 
-// 调用API查询媒体库
-async function loadLibrary(server: string) {
-  try {
-    const result: MediaServerLibrary[] = await api.get('mediaserver/library', { params: { server } })
-    if (result && result.length > 0) {
-      librariesOptions.value = result.map(item => ({
-        title: item.name,
-        value: item.id?.toString(),
-      }))
-    } else {
-      librariesOptions.value = []
-    }
-    librariesOptions.value.unshift({
-      title: t('common.all'),
-      value: 'all',
-    })
-  } catch (e) {
-    console.log(e)
-  }
-}
-
 onMounted(() => {
   loadMediaStatistic()
 })
 </script>
-<template>
-  <div>
-    <VCard variant="tonal" @click="openMediaServerInfoDialog">
-      <VDialogCloseBtn @click="onClose" />
-      <VCardText class="flex justify-space-between align-center gap-3">
-        <div class="align-self-start flex-1">
-          <div class="text-h6 mb-1">{{ mediaserver.name }}</div>
-          <div v-if="mediaServerDict[mediaserver.type] && mediaserver.enabled" class="text-sm mt-5 flex flex-wrap">
-            <span v-for="item in infoItems" :key="item.title" class="me-2 mb-1">
-              <VIcon rounded :icon="item.avatar" class="me-1" />{{ item.amount }}
-            </span>
-          </div>
-          <div v-else-if="!mediaServerDict[mediaserver.type]" class="text-sm mt-5 flex flex-wrap">
-            <span class="me-2 mb-1">自定义媒体服务器</span>
-          </div>
-        </div>
-        <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
-      </VCardText>
-    </VCard>
 
-    <VDialog
-      v-if="mediaServerInfoDialog"
-      v-model="mediaServerInfoDialog"
-      scrollable
-      max-width="40rem"
-      :fullscreen="!display.mdAndUp.value"
-    >
-      <VCard>
-        <VCardItem class="py-2">
-          <template #prepend>
-            <VIcon icon="mdi-cog" class="me-2" />
-          </template>
-          <VCardTitle>{{ t('common.config') }}</VCardTitle>
-          <VCardSubtitle>{{ props.mediaserver.name }}</VCardSubtitle>
-        </VCardItem>
-        <VDialogCloseBtn v-model="mediaServerInfoDialog" />
-        <VDivider />
-        <VCardText>
-          <VForm>
-            <VRow>
-              <VCol cols="12" md="6">
-                <VSwitch v-model="mediaServerInfo.enabled" :label="t('mediaserver.enableMediaServer')" />
-              </VCol>
-            </VRow>
-            <VRow v-if="mediaServerInfo.type == 'emby'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.name"
-                  :label="t('common.name')"
-                  :placeholder="t('mediaserver.nameRequired')"
-                  :hint="t('mediaserver.serverAlias')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.host"
-                  :label="t('mediaserver.host')"
-                  :placeholder="t('mediaserver.hostPlaceholder')"
-                  :hint="t('mediaserver.hostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.play_host"
-                  :label="t('mediaserver.playHost')"
-                  :placeholder="t('mediaserver.playHostPlaceholder')"
-                  :hint="t('mediaserver.playHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-play-network"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.apikey"
-                  :label="t('mediaserver.apiKey')"
-                  :hint="t('mediaserver.embyApiKeyHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-key"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
-                  clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
-                  persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="mediaServerInfo.type == 'jellyfin'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.name"
-                  :label="t('common.name')"
-                  :placeholder="t('mediaserver.nameRequired')"
-                  :hint="t('mediaserver.serverAlias')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.host"
-                  :label="t('mediaserver.host')"
-                  :placeholder="t('mediaserver.hostPlaceholder')"
-                  :hint="t('mediaserver.hostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.play_host"
-                  :label="t('mediaserver.playHost')"
-                  :placeholder="t('mediaserver.playHostPlaceholder')"
-                  :hint="t('mediaserver.playHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-play-network"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.apikey"
-                  :label="t('mediaserver.apiKey')"
-                  :hint="t('mediaserver.jellyfinApiKeyHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-key"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
-                  clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
-                  persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="mediaServerInfo.type == 'trimemedia'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.name"
-                  :label="t('common.name')"
-                  :placeholder="t('mediaserver.nameRequired')"
-                  :hint="t('mediaserver.serverAlias')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.host"
-                  :label="t('mediaserver.host')"
-                  :placeholder="t('mediaserver.hostPlaceholder')"
-                  :hint="t('mediaserver.hostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  v-model="mediaServerInfo.config.play_host"
-                  :label="t('mediaserver.playHost')"
-                  :placeholder="t('mediaserver.playHostPlaceholder')"
-                  :hint="t('mediaserver.playHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-play-network"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.username"
-                  :label="t('mediaserver.username')"
-                  active
-                  prepend-inner-icon="mdi-account"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  type="password"
-                  v-model="mediaServerInfo.config.password"
-                  :label="t('mediaserver.password')"
-                  active
-                  prepend-inner-icon="mdi-lock"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
-                  clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
-                  persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="mediaServerInfo.type == 'plex'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.name"
-                  :label="t('common.name')"
-                  :placeholder="t('mediaserver.nameRequired')"
-                  :hint="t('mediaserver.serverAlias')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.host"
-                  :label="t('mediaserver.host')"
-                  :placeholder="t('mediaserver.hostPlaceholder')"
-                  :hint="t('mediaserver.hostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.play_host"
-                  :label="t('mediaserver.playHost')"
-                  :placeholder="t('mediaserver.playHostPlaceholder')"
-                  :hint="t('mediaserver.playHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-play-network"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.token"
-                  :label="t('mediaserver.plexToken')"
-                  :hint="t('mediaserver.plexTokenHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-key"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
-                  clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
-                  persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.type"
-                  :label="t('mediaserver.type')"
-                  :hint="t('mediaserver.customTypeHint')"
-                  persistent-hint
-                  prepend-inner-icon="mdi-cog"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  :label="t('common.name')"
-                  :hint="t('mediaserver.nameRequired')"
-                  persistent-hint
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-            </VRow>
-          </VForm>
-        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn @click="saveMediaServerInfo" prepend-icon="mdi-content-save" class="px-5">
-            {{ t('common.confirm') }}
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-  </div>
+<template>
+  <VCard
+    variant="tonal"
+    class="app-card-shell app-card-colorful"
+    :style="{ '--app-card-accent-rgb': accentRgb }"
+    @click="openMediaServerInfoDialog"
+  >
+    <VDialogCloseBtn @click="onClose" />
+    <VCardText class="app-card-summary app-card-summary--single-action">
+      <div class="app-card-summary__content">
+        <div class="app-card-summary__title text-h6">{{ mediaserver.name }}</div>
+        <div
+          v-if="mediaServerDict[mediaserver.type] && mediaserver.enabled"
+          class="grid min-h-6 grid-cols-3 gap-2 text-sm text-medium-emphasis"
+        >
+          <span v-for="item in infoItems" :key="item.title" class="flex min-w-0 items-center">
+            <VIcon rounded :icon="item.avatar" class="me-1 shrink-0" />
+            <span class="truncate">{{ item.amount }}</span>
+          </span>
+        </div>
+        <div v-else-if="!mediaServerDict[mediaserver.type]" class="app-card-summary__subtitle text-sm">
+          {{ t('setting.system.custom') }}
+        </div>
+      </div>
+      <div class="app-card-summary__media" aria-hidden="true">
+        <VImg ref="imageRef" :src="getIcon" contain class="app-card-summary__image" @load="updateAccentColor" />
+      </div>
+    </VCardText>
+  </VCard>
 </template>