feat(pwa): 完善 iOS 启动与主题恢复

- 玻璃主题下让 .ace_editor 与普通输入框一致的染色玻璃、描边、聚焦态
- 重命名格式编辑器改用全局圆角 token，并通过 renderer 补齐内边距

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.eslintrc.js

@@ -1,69 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: ['@antfu/eslint-config-vue', 'plugin:sonarjs/recommended'],
-  ignorePatterns: ['src/@iconify/*.js', 'node_modules', 'dist', '*.d.ts'],
-  plugins: ['regex'],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-
-    'sonarjs/no-duplicate-string': 'warn',
-
-    'vue/valid-v-slot': ['error', {
-      allowModifiers: true,
-    }],
-
-    // https://github.com/gmullerb/eslint-plugin-regex
-    'regex/invalid': [
-      'error',
-      [
-        {
-          regex: '@/assets/images',
-          replacement: '@images',
-          message: 'Use \'@images\' path alias for image imports',
-        },
-        {
-          regex: '@/styles',
-          replacement: '@styles',
-          message: 'Use \'@styles\' path alias for importing styles from \'src/styles\'',
-        },
-
-        // {
-        //   id: 'Disallow icon of icon library',
-        //   regex: 'tabler-\\w',
-        //   message: 'Only \'mdi\' icons are allowed',
-        // },
-
-        {
-          regex: '@core/\\w',
-          message: 'You can\'t use @core when you are in @layouts module',
-          files: {
-            inspect: '@layouts/.*',
-          },
-        },
-        {
-          regex: 'useLayouts\\(',
-          message:
-            '`useLayouts` composable is only allowed in @layouts & @core directory. Please use `useThemeConfig` composable instead.',
-          files: {
-            inspect: '^(?!.*(@core|@layouts)).*',
-          },
-        },
-      ],
-
-      // Ignore files
-      '.eslintrc.js',
-    ],
-  },
-  settings: {
-    'import/resolver': {
-      node: {
-        extensions: ['.ts', '.js', '.tsx', '.jsx', '.mjs', '.png', '.jpg'],
-      },
-      typescript: {},
-    },
-  },
-}

.github/workflows/test.yml

@@ -4,16 +4,65 @@ on:
   pull_request:
     branches:
       - v2
+  push:
+    branches:
+      - v2
 
 permissions:
   contents: read
 
 concurrency:
-  group: frontend-tests-${{ github.event.pull_request.number }}
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
 jobs:
-  unit-tests:
+  format:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: actions/setup-node@v7
+        with:
+          node-version: '24'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Check changed-file formatting
+        env:
+          BASE_SHA: ${{ github.event.pull_request.base.sha }}
+          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+        run: yarn format:check --base "$BASE_SHA" --head "$HEAD_SHA"
+
+  lint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Setup Node
+        uses: actions/setup-node@v7
+        with:
+          node-version: '24'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+  typecheck-and-coverage:
     runs-on: ubuntu-latest
     timeout-minutes: 20
     steps:

.node-version

@@ -0,0 +1 @@
+24

.nvmrc

@@ -0,0 +1 @@
+24

.prettierignore

@@ -1,2 +1,8 @@
 dist
-node_modules
+node_modules
+
+# 自动生成文件的格式由各自生成器决定。
+auto-imports.d.ts
+components.d.ts
+eslint-suppressions.json
+/vite.config.*.timestamp-*.mjs

.prettierrc.json

@@ -3,7 +3,7 @@
   "bracketSpacing": true,
   "htmlWhitespaceSensitivity": "css",
   "insertPragma": false,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "jsxSingleQuote": true,
   "printWidth": 120,
   "proseWrap": "preserve",

README.md

@@ -2,7 +2,7 @@
 
 *中文 | [English](README_EN.md)*
 
-[MoviePilot](https://github.com/jxxghp/MoviePilot) 的前端项目，NodeJS版本：>= `v20.12.1`。
+[MoviePilot](https://github.com/jxxghp/MoviePilot) 的前端项目，最低支持 Node.js `20.19`，推荐使用 Node.js `24`。
 
 ## 特性
 
@@ -49,6 +49,8 @@ yarn test:coverage
 
 测试文件组织、共享测试设施、HTTP mock、覆盖率门禁和新增用例规范见[单元测试架构](docs/testing.md)。
 
+ESLint、Prettier、Node 兼容范围及渐进式 CI 门禁见[前端代码质量工具链演进](docs/code-quality.md)。
+
 ### 静态运行
 
 1. 使用 `nginx` 等Web服务器托管 `dist` 静态文件，nginx配置参考 `public/nginx.conf`。

docs/code-quality.md

@@ -0,0 +1,179 @@
+# 前端代码质量工具链演进
+
+本文档定义 MoviePilot-Frontend 的代码质量工具链、运行入口和渐进式演进路线。目标是让人工开发者和自动化 Agent 都通过同一组项目命令完成格式化、静态检查、类型检查、测试和构建，并由 CI 在干净环境中复现结果；编辑器及其扩展只提供即时反馈，不作为项目行为的事实源。
+
+## 工具职责
+
+| 工具                   | 职责                                                         | 不负责                                 |
+| ---------------------- | ------------------------------------------------------------ | -------------------------------------- |
+| ESLint                 | JavaScript、TypeScript、Vue 代码质量，框架约束和项目模块边界 | 缩进、换行、引号、属性布局等代码格式   |
+| Prettier               | 可确定、可重复的代码格式                                     | 未使用变量、Vue 规则、复杂度和模块边界 |
+| TypeScript / `vue-tsc` | TypeScript 与 Vue 模板类型检查                               | 代码格式和业务行为测试                 |
+| Vitest                 | 单元测试、组件测试和覆盖率门槛                               | 生产构建与真实浏览器行为               |
+| Vite                   | 生产构建和构建期集成验证                                     | 类型完整性和代码质量规则               |
+
+ESLint 配置由仓库显式维护，不继承 Antfu 等覆盖面较大的个人风格预设。JavaScript、TypeScript 与 Vue 使用各自面向正确性的 recommended/essential 基线；SonarJS 不整包展开 recommended，而只显式启用安全和正确性的高信号规则，避免插件升级隐式扩大检查范围。
+
+历史规则迁移前必须核对当前源码和运行职责，不能仅因为旧配置出现过就写入 baseline。当前保留 Vuetify 点号 slot 兼容、`@layouts` 不反向依赖 `@core`、浏览器与 Node globals 分域及统一禁止 `debugger`。图片/样式 alias 强制只约束 import 拼写且已与当前实践脱节；`useLayouts` 目录限制所针对的 API 从未存在于源码；重复字符串属于高噪声风格治理；伪随机数限制会把界面效果误判为安全问题，因此这四类历史规则不再作为门禁。
+
+Prettier 独立运行，ESLint 中与格式重叠的规则保持关闭。任何编辑器都可以调用项目内 ESLint 和 Prettier，但保存时是否自动执行不影响 CI 结果。
+
+## Node 与依赖边界
+
+- 最低兼容目标为 Node.js 20.19；Node.js 20.19、22 和 24 的开发环境可以安装依赖并运行项目命令。
+- 推荐开发环境和 CI 主环境使用 Node.js 24。
+- CI 若继续声明兼容 Node.js 20.19，应至少在该版本验证 frozen lockfile 安装、lint、typecheck 和 build；完整覆盖率门禁在 Node.js 24 执行。
+- Yarn 1 与 `yarn.lock` 继续作为依赖安装事实源，CI 使用 `yarn --frozen-lockfile`。
+- Node 只用于依赖安装、开发、测试和前端构建；MoviePilot 正式 Docker 镜像使用预构建前端产物，不因开发工具链升级而增加 Node 运行时。
+
+最低 Node 版本变化属于开发环境兼容性变更，必须独立说明并在 CI 验证。不得仅提高 `package.json` 的 `engines.node` 而不更新 README、版本文件和 workflow。
+
+## 统一命令
+
+工具链完成演进后，仓库提供以下入口：
+
+```sh
+yarn lint          # 只读 ESLint 检查，不修改文件
+yarn lint:fix      # 显式执行 ESLint 安全修复
+yarn lint:suppressions:prune  # 修复存量问题后裁剪过期 baseline
+yarn format            # 格式化当前分支、暂存区、工作区和未跟踪文件中的受支持变更文件
+yarn format:check      # 检查相同变更文件，不修改文件
+yarn format:all:check  # 只读测量全仓格式收敛情况
+yarn typecheck
+yarn test:run
+yarn test:coverage
+yarn build
+```
+
+`yarn lint` 不得包含 `--fix`。CI 只运行只读命令，任何自动修改都由开发者或 Agent 在提交前显式执行。
+
+## ESLint 演进：先恢复可执行门禁
+
+ESLint 迁移优先于全仓格式治理，基础设施迁移不夹带批量业务代码修复。
+
+第一阶段完成以下事项：
+
+1. 使用 ESLint 10 flat config，移除旧 `.eslintrc`。
+2. 不恢复已删除的 `@antfu/eslint-config-vue`。
+3. 显式组合 JavaScript、TypeScript、Vue 和经过审计的 SonarJS 规则。
+4. 使用 ESLint 原生 AST 限制维护仍成立的模块边界，并删除只约束 import 拼写或已无现实对象的历史 regex 规则。
+5. 只检查 JavaScript、TypeScript、Vue 与相关测试文件；Markdown、JSON、YAML、TOML、构建产物和生成文件不在首阶段扩展范围内。
+6. 默认 lint 只读，并提供单独的 `lint:fix`。
+7. 对确有价值但存在存量的问题使用明确基线或分阶段启用，不通过全仓自动修复制造大面积混合变更。
+8. 项目边界与新增问题门禁使用 Vitest 配置契约测试保护，并随现有 `test:coverage` CI 自动执行。
+
+`eslint-suppressions.json` 只冻结迁移时已经确认的文件、规则和数量。新增问题不得加入 baseline；修复存量问题后运行 `yarn lint:suppressions:prune`，并把裁剪结果与代码修复一同提交。日常开发和 CI 不得使用 `--suppress-all`。
+
+迁移完成的最低验收为：
+
+```sh
+yarn --frozen-lockfile
+yarn lint
+yarn typecheck
+yarn test:coverage
+yarn build
+```
+
+若新配置导致大量与业务目标无关的格式、排序或额外文件类型问题，应停止扩大规则范围，先调整配置职责；不得以一次性自动修复数百个文件作为通过迁移的手段。
+
+## ESLint CI：先观察，再强制
+
+第二阶段在 Pull Request workflow 中增加独立的全仓 `yarn lint` job：
+
+1. lint 与 `typecheck-and-coverage` 使用不同 job，保持静态检查和测试覆盖率职责独立。
+2. 初始阶段作为普通 check 运行，不立即配置 required check。
+3. workflow 使用 Node 24、frozen lockfile 和只读 `yarn lint`，不执行自动修复或更新 baseline。
+4. 观察 fork PR、依赖缓存、执行时间、误报和路径范围。
+5. 连续多个 PR 稳定通过后，再由维护者决定是否设为 required。
+
+ESLint CI 必须检查全仓受管源码，而不是只检查 PR 变更文件。已有问题通过规则选择或受控基线管理，保证新问题不能借由“只检查改动行”绕过项目约束。
+
+## Prettier 演进：改到即格式化
+
+Prettier 采用与后端 `unittest → pytest` 相同的渐进原则：不为转换而转换，修改到存量文件时再纳入统一格式。
+
+- **新文件**：必须通过当前 Prettier 配置。
+- **修改文件**：Agent 或开发者在提交前对本次触及的受支持文件运行 Prettier。
+- **未修改存量文件**：暂时保持原样，不建立一次性全仓格式化任务。
+- **大型或高冲突文件**：若格式化产生大量机械差异，格式调整与业务修改拆分为独立 commit；必要时暂缓该文件并记录原因。
+- **生成文件**：按生成器事实源管理，不直接用 Prettier 修补生成结果；需要统一格式时修改生成器或生成配置。
+
+Prettier 初始 CI 只检查 Pull Request 新增或修改的受支持文件，并作为变更范围门禁运行。检查脚本应：
+
+1. 从 PR base 与 head 计算文件集合。
+2. 排除已删除文件、构建产物、覆盖率报告和生成文件。
+3. 仅把 Prettier 支持且由仓库管理的文件传给 `prettier --check`。
+4. 文件集合为空时正常通过。
+
+本地直接运行 `yarn format` 或 `yarn format:check` 时，脚本按 `refs/remotes/upstream/v2`、`refs/remotes/origin/v2`、`refs/heads/v2` 的顺序选择与当前提交具有共同祖先的基线，并合并当前工作区与未跟踪文件。完整引用可避免同名标签造成歧义；CI 使用显式提交 SHA 保证输入可复现：
+
+```sh
+yarn format:check --base <base-sha> --head <head-sha>
+```
+
+文件名通过 Git 的 NUL 分隔输出和 Node 参数数组传递，不经过 shell 字符串拼接；重命名只检查新路径，删除文件、ignore 文件和 Prettier 无法推断 parser 的文件不进入格式检查。
+
+该门禁不要求未修改的存量文件通过 Prettier，但所有进入 PR diff 的受支持文件都必须通过。Prettier 是文件级格式化工具，因此修改存量文件时检查的是整个文件，而不是仅检查变更行。Agent 或开发者应在提交前运行同一项目脚本完成格式化；CI 只验证结果，不自动提交修改。
+
+禁止在普通业务 PR 中直接运行 `prettier . --write` 或其他全仓格式写入命令。`yarn format` 只处理选择器返回的变更文件；单个存量文件被触及时仍可能整体重排，差异过大时应拆分 commit，便于 reviewer 区分机械格式与业务逻辑。
+
+具体交付拆分为：
+
+1. Prettier 基础设施 PR：安装项目 CLI，定义配置、命令、变更文件选择脚本和回归测试，不修改 workflow。
+2. 变更文件门禁 PR：复用已合并脚本接入 Pull Request workflow；验证 fork PR、文件重命名、删除文件、空文件集和特殊文件名。初期作为普通 check 观察，稳定后再由维护者通过仓库规则独立配置为 required。
+3. 全仓门禁 PR：仅在存量收敛条件满足后择机实施，不与变更文件门禁绑定。
+
+## 全仓格式门禁的启用条件
+
+不单独安排大爆炸式格式化阶段。存量通过日常“改到即格式化”逐步收敛，并定期执行全仓 `yarn format:all:check` 观察剩余范围。
+
+Prettier 3.9.5 基础设施接入时，全仓只读检查在 `v2` 基线报告 203 个存量文件需要格式化。该数字是收敛起点而不是忽略白名单；变更文件仍必须完整通过检查，存量数量随日常修改逐步下降。
+
+变更文件 CI 接入前在 `v2` 再次测量为 206 个文件，较基础设施合并后的 201 个文件出现回升。这说明仅提供本地命令不足以阻止新改动扩大存量；变更文件 check 用于守住新增 diff，不因此要求在本阶段批量格式化已有文件。
+
+变更文件 required check 不需要等待全仓收敛。只有同时满足以下条件，才把 Prettier 从变更文件 required check 切换为全仓 required check：
+
+- 全仓 `yarn format:all:check` 已通过，或仅剩少量可在独立机械提交中安全处理的文件。
+- 最近的活跃分支已合并或完成同步，避免集中格式变化制造冲突。
+- `yarn lint`、`yarn typecheck`、`yarn test:coverage` 和 `yarn build` 在格式收敛后全部通过。
+- Prettier 与 ESLint 不存在反复改写同一文件的规则冲突。
+- workflow 已以非 required 状态稳定运行多个 PR。
+
+最终 Pull Request 门禁目标为：
+
+```sh
+yarn --frozen-lockfile
+yarn format:all:check
+yarn lint
+yarn typecheck
+yarn test:coverage
+yarn build
+```
+
+PR-Agent、编辑器诊断和人工 review 可以补充判断，但不能替代可重复执行的项目命令。
+
+## Agent 与开发者提交规范
+
+无论改动由 Agent 还是人工完成，提交前遵循同一顺序：
+
+1. 只对本次新增或修改的文件执行 Prettier。
+2. 运行全仓只读 lint。
+3. 运行 typecheck。
+4. 按影响面运行聚焦测试；提交 PR 前运行覆盖率门禁。
+5. 涉及构建配置、依赖、Vue SFC 或模块联邦时运行生产 build。
+
+编辑器设置不得成为通过验证的前提。文档、Agent 指令和 PR 说明应引用 `yarn` 命令，而不是“在 VS Code 保存一次”或依赖某个 IDE 扩展完成修复。
+
+## 风险与回滚
+
+| 风险                         | 控制方式                                   | 回滚边界                       |
+| ---------------------------- | ------------------------------------------ | ------------------------------ |
+| ESLint 自动修复改变语义      | 默认 lint 只读；基础设施迁移不批量 fix     | 独立回退规则或依赖提交         |
+| 格式化制造大面积冲突         | 改到即格式化；大型文件拆分机械 commit      | 回退单文件格式 commit          |
+| 新规则让所有 PR 变红         | 先测量、再启用；使用受控基线               | 暂停单条规则，不回退整套工具链 |
+| 检查范围扩展到生成物或文档   | 首阶段限制文件类型并显式 ignore            | 收窄 flat config 文件匹配      |
+| Node 最低版本阻断安装        | 最低保持 20.19，Node 24 作为推荐和主 CI    | 保持兼容 job，版本提升独立处理 |
+| 全仓 required check 配置过早 | 先强制变更文件，持续观察全仓剩余范围       | 保留变更文件门禁，暂缓全仓切换 |
+| ESLint 与 Prettier 循环改写  | ESLint 关闭格式规则，Prettier 单独负责格式 | 关闭冲突规则并增加回归样例     |
+
+依赖迁移、规则迁移、存量代码修复、格式化和 GitHub required checks 应保持可独立评审、验证和回退，禁止合并成一个难以定位风险的大型变更。

docs/module-federation-guide.md

@@ -6,7 +6,6 @@ MoviePilot前端采用模块联邦(Module Federation)技术实现插件的动态
 
 关联阅读后端插件开发文档：[第三方插件开发说明](https://github.com/jxxghp/MoviePilot-Plugins/blob/main/README.md)
 
-
 ## 2. 技术要求
 
 - Node.js 20+
@@ -18,13 +17,13 @@ MoviePilot前端采用模块联邦(Module Federation)技术实现插件的动态
 
 每个 Vue 联邦插件需要提供下列标准组件（`AppPage` 为可选，用于主界面侧栏全页入口）：
 
-| 组件名称 | 暴露名 | 文件名 | 用途 |
-|---------|--------|--------|------|
-| Page | `./Page` | Page.vue | 插件管理中的详情弹窗 |
-| Config | `./Config` | Config.vue | 插件配置页面 |
-| Dashboard | `./Dashboard` | Dashboard.vue | 仪表盘小组件 |
-| AppPage | `./AppPage` | AppPage.vue | 主界面侧栏独立全页（主内容区由插件完全绘制） |
-| （可选） | `./AppPage{Xxx}` | 如 AppPageSettings.vue | 多 `nav_key` 时按名优先加载，见下文「多界面」 |
+| 组件名称  | 暴露名           | 文件名                 | 用途                                          |
+| --------- | ---------------- | ---------------------- | --------------------------------------------- |
+| 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`。
 
@@ -79,55 +78,52 @@ export default defineConfig({
           singleton: true,
         },
       },
-      format: 'esm'
-    })
+      format: 'esm',
+    }),
   ],
   build: {
-    target: 'esnext',   // 必须设置为esnext以支持顶层await
-    minify: false,      // 开发阶段建议关闭混淆
+    target: 'esnext', // 必须设置为esnext以支持顶层await
+    minify: false, // 开发阶段建议关闭混淆
     cssCodeSplit: true, // 改为true以便能分离样式文件
   },
   css: {
     preprocessorOptions: {
       scss: {
         additionalData: '/* 覆盖vuetify样式 */',
-      }
+      },
     },
     postcss: {
       plugins: [
         {
           postcssPlugin: 'internal:charset-removal',
           AtRule: {
-            charset: (atRule) => {
+            charset: atRule => {
               if (atRule.name === 'charset') {
-                atRule.remove();
+                atRule.remove()
               }
-            }
-          }
+            },
+          },
         },
         {
           postcssPlugin: 'vuetify-filter',
           Root(root) {
             // 过滤掉所有vuetify相关的CSS
             root.walkRules(rule => {
-              if (rule.selector && (
-                  rule.selector.includes('.v-') || 
-                  rule.selector.includes('.mdi-'))) {
-                rule.remove();
+              if (rule.selector && (rule.selector.includes('.v-') || rule.selector.includes('.mdi-'))) {
+                rule.remove()
               }
-            });
-          }
-        }
-      ]
-    }
+            })
+          },
+        },
+      ],
+    },
   },
   server: {
-    port: 5001,   // 使用不同于主应用的端口
-    cors: true,   // 启用CORS
-    origin: 'http://localhost:5001'
+    port: 5001, // 使用不同于主应用的端口
+    cors: true, // 启用CORS
+    origin: 'http://localhost:5001',
   },
-}) 
-
+})
 ```
 
 ## 5. 组件开发规范
@@ -139,12 +135,16 @@ export default defineConfig({
 // 自定义事件，用于通知主应用刷新数据
 const emit = defineEmits(['action', 'switch', 'close'])
 
-// 接收API对象
+// 接收主应用能力
 const props = defineProps({
   api: {
     type: Object,
-    default: () => {}
-  }
+    default: () => {},
+  },
+  nativeSubscribe: {
+    type: Function,
+    default: null,
+  },
 })
 
 // 页面逻辑代码...
@@ -179,20 +179,24 @@ function notifyClose() {
 
 ```vue
 <script setup lang="ts">
-// 接收初始配置和API对象
+// 接收初始配置和主应用能力
 const props = defineProps({
   initialConfig: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
   },
   api: {
     type: Object,
-    default: () => {}
-  }
+    default: () => {},
+  },
+  nativeSubscribe: {
+    type: Function,
+    default: null,
+  },
 })
 
 // 配置数据
-const config = ref({...props.initialConfig})
+const config = ref({ ...props.initialConfig })
 
 // 自定义事件，用于保存配置
 const emit = defineEmits(['save', 'close', 'switch'])
@@ -217,7 +221,7 @@ function notifyClose() {
   <div class="plugin-config">
     <!-- 配置表单示例 -->
     <v-text-field v-model="config.someField" label="配置项"></v-text-field>
-    
+
     <!-- 保存按钮示例 -->
     <v-btn color="primary" @click="saveConfig">保存配置</v-btn>
 
@@ -234,16 +238,20 @@ function notifyClose() {
 
 ```vue
 <script setup lang="ts">
-// 接收配置和刷新控制
+// 接收配置、刷新控制和主应用能力
 const props = defineProps({
   config: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
   },
   allowRefresh: {
     type: Boolean,
-    default: true
-  }
+    default: true,
+  },
+  nativeSubscribe: {
+    type: Function,
+    default: null,
+  },
 })
 
 // 仪表板逻辑...
@@ -276,16 +284,18 @@ const props = defineProps({
 
 主应用传入的 props：
 
-| 属性 | 说明 |
-|------|------|
-| `api` | 与 `Page` 相同，用于 `bear` 认证的插件 HTTP 调用 |
-| `navKey` | 与侧栏声明的 `nav_key` 一致，同一插件多入口时用于区分 |
-| `pluginId` | 当前插件 ID |
+| 属性              | 说明                                                  |
+| ----------------- | ----------------------------------------------------- |
+| `api`             | 与 `Page` 相同，用于 `bear` 认证的插件 HTTP 调用      |
+| `nativeSubscribe` | 打开主应用原生订阅交互                                |
+| `navKey`          | 与侧栏声明的 `nav_key` 一致，同一插件多入口时用于区分 |
+| `pluginId`        | 当前插件 ID                                           |
 
 ```vue
 <script setup lang="ts">
 const props = defineProps({
   api: { type: Object, default: () => ({}) },
+  nativeSubscribe: { type: Function, default: null },
   navKey: { type: String, default: 'main' },
   pluginId: { type: String, default: '' },
 })
@@ -300,18 +310,105 @@ const emit = defineEmits(['action'])
 </template>
 ```
 
+### 5.5 主应用宿主能力
+
+登录后的联邦组件宿主会向插件开放以下能力：
+
+| 能力             | Page | Config | Dashboard | AppPage | 调用方式                                                         |
+| ---------------- | ---- | ------ | --------- | ------- | ---------------------------------------------------------------- |
+| 认证 API         | ✓    | ✓      | ✓         | ✓       | `api` prop                                                       |
+| 原生订阅交互     | ✓    | ✓      | ✓         | ✓       | `nativeSubscribe` prop 或 `inject('moviepilot:nativeSubscribe')` |
+| 主应用统一 Toast | ✓    | ✓      | ✓         | ✓       | `inject('moviepilot:toast')`                                     |
+
+`nativeSubscribe` 和 Toast 都由主应用宿主提供。插件不应复制主程序订阅弹窗，也不应自行创建另一套 Toast 容器。插件在旧版主程序或能力不存在的环境中运行时，应保留空值判断和必要的页面内 fallback。
+
+### 5.6 玻璃光学表面
+
+主应用的 `Page`、`Config` 与 `AppPage` 宿主在玻璃主题下默认采用 `static-material` 光学模式：保留壁纸透射、材质色调和方向反射，但不响应指针流场、局部折射、拖尾或动态焦散。插件列表与 `Dashboard` 继续使用完整动态光学。视觉型插件可以在自己控制的 DOM 区域显式恢复完整动态光学：
+
+```html
+<div data-glass-optical-surface data-glass-optical-mode="dynamic">
+  <!-- 插件自己的视觉内容 -->
+</div>
+```
+
+使用时需同时声明 `data-glass-optical-surface` 和 `data-glass-optical-mode="dynamic"`。模式会从最近的祖先容器继承，因此显式声明的动态子表面不会沿用宿主的静态模式。该合同适用于插件在 `Page`、`Config` 或 `AppPage` 中自行渲染并控制的区域；主应用生成的插件列表、插件市场卡片、`Dashboard` 及其他宿主 DOM 不属于插件的修改边界。
+
+动态模式只在主应用启用玻璃主题和实时光学能力时生效。其他主题、降低动态效果或光学能力不可用时，插件必须保持内容与交互正常，不应依赖动态光学表达业务状态或必要反馈。
+
+### 5.7 调用主应用原生订阅
+
+`Page`、`Config`、`Dashboard` 与 `AppPage` 都会收到 `nativeSubscribe(mediaInfo)` prop。插件传入媒体信息后，电视剧会打开主应用的选季抽屉，电影会进入现有电影订阅流程。宿主也会用 `moviepilot:nativeSubscribe` 键提供同一个方法，深层子组件可以使用 `inject`，无需逐层传递 prop。
+
+媒体信息必须包含：
+
+- `type`：`电影` / `电视剧`，也兼容 `movie` / `tv`；
+- `title`；
+- 至少一个有效媒体标识：`tmdb_id` / `tmdbid`、`douban_id` / `doubanid`、`bangumi_id` / `bangumiid`、`anilist_id` / `anilistid`，或者 `media_id` 与 `mediaid_prefix` / `source` / `media_source` 的组合。
+
+```vue
+<script setup lang="ts">
+import { inject } from 'vue'
+
+type NativeSubscribeResult =
+  { success: true } | { success: false; code: 'INVALID_MEDIA' | 'PERMISSION_DENIED'; message: string }
+
+const props = defineProps<{
+  nativeSubscribe?: (mediaInfo: Record<string, unknown>) => Promise<NativeSubscribeResult>
+}>()
+
+const nativeSubscribe = inject('moviepilot:nativeSubscribe', props.nativeSubscribe)
+
+/** 使用主应用订阅交互，宿主不接受时保留插件自己的 fallback。 */
+async function subscribeMedia(mediaInfo: Record<string, unknown>) {
+  const result = await nativeSubscribe?.(mediaInfo)
+  if (!result?.success) {
+    // 插件可在这里执行自己的 fallback；宿主已同时显示明确错误提示。
+  }
+}
+</script>
+```
+
+`success: true` 表示主应用已接受调用并启动原生交互，不表示用户已经完成订阅。字段无效或当前用户没有订阅权限时返回 `success: false`，插件可以依据 `code` 执行 fallback。
+
+### 5.8 调用主应用 Toast
+
+`Page`、`Config`、`Dashboard` 与 `AppPage` 的宿主容器会通过固定键提供主应用 Toast。远程组件应复用该实例，不要自行渲染 `VSnackbar` 或创建另一套 Toast 容器：
+
+```vue
+<script setup lang="ts">
+import { inject } from 'vue'
+
+interface HostToast {
+  error(message: string): unknown
+  info(message: string): unknown
+  success(message: string): unknown
+  warning(message: string): unknown
+}
+
+const toast = inject<HostToast | null>('moviepilot:toast', null)
+
+// 保存完成后调用主应用的统一通知。
+function saveComplete() {
+  toast?.success('保存成功')
+}
+</script>
+```
+
+可用方法与主项目 `vue-toastification` 一致，包括 `success`、`info`、`warning` 和 `error`。注入不存在时应静默降级，关键错误仍需保留页面内状态提示。
+
 #### 后端：注册侧栏入口
 
 插件需为 **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` |
+| 字段         | 说明                                                                                  |
+| ------------ | ------------------------------------------------------------------------------------- |
+| `nav_key`    | URL 路径段，唯一标识本入口（同一插件可多入口）                                        |
+| `title`      | 侧栏显示标题                                                                          |
+| `icon`       | MDI 图标名，如 `mdi-rss`                                                              |
+| `section`    | 分组：`start` / `discovery` / `subscribe` / `organize` / `system`                     |
 | `permission` | 可选：`subscribe` / `discovery` / `search` / `manage` / `admin`，与主应用菜单权限一致 |
-| `order` | 可选：同组内排序，数值越小越靠前 |
+| `order`      | 可选：同组内排序，数值越小越靠前                                                      |
 
 ```python
 def get_sidebar_nav(self) -> List[Dict[str, Any]]:
@@ -333,16 +430,16 @@ def get_sidebar_nav(self) -> List[Dict[str, Any]]:
 
 前端加载远程组件的顺序为：
 
-| `nav_key` | 依次尝试的联邦暴露名 |
-|-----------|----------------------|
-| `main` 或省略 | `./AppPage` → `./Page` |
+| `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>` 切换子界面。  
+1. **单文件分支**：只暴露 `./AppPage`，在组件内根据 `navKey` prop 用 `v-if` / `<component>` 切换子界面。
 2. **多文件**：为某个入口单独暴露 `./AppPageSettings.vue` 等，主应用会优先加载对应模块，失败再回退到 `AppPage`。
 
 `vite.config` 多暴露示例：
@@ -365,8 +462,7 @@ yarn build
 
 - 将生成的dist文件夹上传到插件后端目录下（默认为`dist/assets`）
 
- **注意： `__federation_shared_vuetify` 目录以及 `index-`、`date-`、`runtime-` 开头的文件不需要上传**，只需要上传以下命名格式文件：`__federation_*`、`_plugin-vue_export-helper-*`、`remoteEntry.js`
-
+**注意： `__federation_shared_vuetify` 目录以及 `index-`、`date-`、`runtime-` 开头的文件不需要上传**，只需要上传以下命名格式文件：`__federation_*`、`_plugin-vue_export-helper-*`、`remoteEntry.js`
 
 - 在插件的后端python代码中，实现以下方法来集成远程组件：
 
@@ -380,7 +476,8 @@ def get_render_mode() -> Tuple[str, str]:
     return "vue", "dist/assets"
 ```
 
--  需要在插件前端页面调用后端接口时，通过传入的api模块发起调用，后端api接口声明认证类型为：`bear`
+- 需要在插件前端页面调用后端接口时，通过传入的api模块发起调用，后端api接口声明认证类型为：`bear`
+
 ```typescript
 // 演示使用api模块调用插件接口
 recentItems.value = await props.api.get(`plugin/MyPlugin/history`)
@@ -402,7 +499,6 @@ def get_api(self) -> List[Dict[str, Any]]:
     ]
 ```
 
-
 ## 7. 调试与排错
 
 ### 常见问题
@@ -461,7 +557,7 @@ yarn dev
 
 ## 9. 示例代码
 
-- [插件远程组件示例](../examples/plugin-component/) - 开发插件组件的完整示例项目 
+- [插件远程组件示例](../examples/plugin-component/) - 开发插件组件的完整示例项目
 - [模块联邦问题排查指南](./federation-troubleshooting.md) - 常见问题排查
 
 ## 10. 参考资料
@@ -471,4 +567,4 @@ yarn dev
 
 ---
 
-如有问题，请提交Issue。 
+如有问题，请提交Issue。

docs/testing.md

@@ -67,7 +67,7 @@ tests/
 
 ## 新增测试
 
-1. 在被测源码所在目录的 `__tests__/` 中创建同名 `*.spec.ts`。
+1. 业务测试在被测源码所在目录的 `__tests__/` 中创建同名 `*.spec.ts`；工具链配置契约测试放在 `tests/config/`。
 2. 纯函数、store 和无渲染模块直接使用 Vitest；Vue 组件使用标准渲染入口。
 3. 需要 HTTP 请求时，在 `tests/support/msw/handlers/<domain>.ts` 增加对应 handler。
 4. 需要结构化业务数据时，在 `tests/support/factories/` 增加最小工厂。
@@ -76,7 +76,7 @@ tests/
 
 ## 配置边界
 
-Vitest 只收集 `src/**/__tests__/**/*.spec.ts`。测试模式保留 Vue、Vue JSX、Vuetify、自动导入、自动组件和 i18n 插件，并禁用 PWA、模块联邦和 top-level-await 构建插件。
+Vitest 收集 `src/**/__tests__/**/*.spec.ts` 和 `tests/config/**/*.spec.ts`。测试模式保留 Vue、Vue JSX、Vuetify、自动导入、自动组件和 i18n 插件，并禁用 PWA、模块联邦和 top-level-await 构建插件。配置契约测试随全量测试执行，但不加入业务源码覆盖率统计范围。
 
 当前核心覆盖范围在 `vite.config.ts` 的 `coverage.include` 中显式维护。聚合门槛为 Lines、Statements、Functions 不低于 85%，Branches 不低于 80%；每个显式核心文件的 Lines、Statements、Functions 不低于 80%，Branches 不低于 75%。覆盖率报告写入 `coverage/`。
 
@@ -86,9 +86,10 @@ Vitest 只收集 `src/**/__tests__/**/*.spec.ts`。测试模式保留 Vue、Vue
 yarn test          # watch 模式
 yarn test:run      # 单次运行
 yarn test:coverage # 单次运行并检查覆盖率
+yarn test:lint-config # 聚焦执行 ESLint 配置契约测试
 yarn typecheck
 yarn lint
 yarn build
 ```
 
-Pull Request 测试工作流使用 Node 24 LTS 和 frozen lockfile，依次执行类型检查和覆盖率门禁。现有 lint 基线问题按仓库当前维护约定单独处理，新增测试代码不得引入新的 lint 错误。
+`Frontend Tests` 工作流使用 Node 24 LTS 和 frozen lockfile，在面向 `v2` 的 Pull Request 和推送到 `v2` 时运行。`typecheck-and-coverage` job 依次执行类型检查和覆盖率门禁；独立的 `lint` job 执行全仓只读 ESLint 检查。变更文件格式检查依赖 Pull Request 的 base/head SHA，因此只在 Pull Request 事件运行。Prettier 和 Node 兼容范围按[前端代码质量工具链演进](code-quality.md)继续渐进接入，新增测试代码不得引入新的 lint 或格式问题。

eslint.config.js

@@ -0,0 +1,195 @@
+import js from '@eslint/js'
+import sonarjs from 'eslint-plugin-sonarjs'
+import pluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+const javascriptFiles = ['**/*.{js,mjs,cjs,jsx}']
+
+const typescriptFiles = ['**/*.{ts,tsx,mts,cts}', '**/*.vue']
+
+const managedScriptExtensions = 'js,mjs,cjs,jsx,ts,tsx,mts,cts'
+
+const managedFiles = [...javascriptFiles, ...typescriptFiles]
+
+const browserFiles = [
+  `src/**/*.{${managedScriptExtensions},vue}`,
+  `examples/**/src/**/*.{${managedScriptExtensions},vue}`,
+]
+
+const nodeFiles = ['**/*.config.{js,mjs,cjs,ts,mts,cts}', 'public/service.js', 'scripts/**/*.{js,mjs,cjs,ts,mts,cts}']
+
+// TypeScript 关闭核心 no-undef；显式禁止浏览器域中的 Node-only globals，保证 JS、TS 与 Vue 使用同一运行时边界。
+const browserGlobalNames = new Set(Object.keys(globals.browser))
+const nodeOnlyGlobalRestrictions = Object.keys(globals.node)
+  .filter(name => !browserGlobalNames.has(name))
+  .sort()
+  .map(name => ({
+    name,
+    message: `'${name}' is only available in Node.js code.`,
+  }))
+
+const restrictedCoreSourcePattern = '/(?:^|\\/)@core(?:\\/|$)/'
+
+// @layouts 是 @core 的下游依赖；禁止反向引用，避免两层形成直接循环。
+const layoutCoreImportRestrictions = [
+  'ImportDeclaration',
+  'ExportNamedDeclaration',
+  'ExportAllDeclaration',
+  'ImportExpression',
+].map(nodeType => ({
+  selector: `${nodeType}[source.value=${restrictedCoreSourcePattern}]`,
+  message: "The '@layouts' module must not import from '@core'.",
+}))
+
+const nonLiteralLayoutDynamicImportRestriction = {
+  selector: "ImportExpression:not([source.type='Literal'])",
+  message: 'Dynamic imports in @layouts must use a literal path so module boundaries remain statically verifiable.',
+}
+
+const viteGlobCallSelectors = [
+  "CallExpression[callee.object.type='MetaProperty'][callee.object.meta.name='import'][callee.object.property.name='meta'][callee.property.name=/^glob(?:Eager)?$/]",
+  "CallExpression[callee.object.type='MetaProperty'][callee.object.meta.name='import'][callee.object.property.name='meta'][callee.property.value=/^glob(?:Eager)?$/]",
+]
+
+const layoutGlobRestrictions = viteGlobCallSelectors.map(callSelector => ({
+  selector: callSelector,
+  message:
+    'import.meta.glob is not allowed in @layouts because wildcard targets cannot be proven to stay within the module boundary.',
+}))
+
+const sonarRules = {
+  'sonarjs/array-callback-without-return': 'error',
+  'sonarjs/code-eval': 'error',
+  'sonarjs/empty-string-repetition': 'error',
+  'sonarjs/no-all-duplicated-branches': 'error',
+  'sonarjs/no-dead-store': 'error',
+  'sonarjs/no-duplicated-branches': 'error',
+  'sonarjs/no-element-overwrite': 'error',
+  'sonarjs/no-hardcoded-passwords': 'error',
+  'sonarjs/no-hardcoded-secrets': 'error',
+  'sonarjs/no-identical-conditions': 'error',
+  'sonarjs/no-identical-expressions': 'error',
+  'sonarjs/no-ignored-exceptions': 'error',
+  'sonarjs/no-unthrown-error': 'error',
+  'sonarjs/no-use-of-empty-return-value': 'error',
+  'sonarjs/reduce-initial-value': 'error',
+  'sonarjs/slow-regex': 'error',
+  'sonarjs/stateful-regex': 'error',
+  'sonarjs/super-linear-regex': 'error',
+}
+
+const typescriptConfigs = tseslint.configs.recommended.map(config => ({
+  ...config,
+  files: typescriptFiles,
+}))
+
+const vueConfigs = pluginVue.configs['flat/essential'].map(config => ({
+  ...config,
+  files: ['**/*.vue'],
+}))
+
+export default defineConfig([
+  globalIgnores([
+    '**/node_modules/**',
+    '**/dist/**',
+    '**/dev-dist/**',
+    '**/coverage/**',
+    '**/.worktrees/**',
+    '**/vite.config.*.timestamp-*.mjs',
+    'public/plugin_icon/**',
+    'src/@iconify/**',
+    '**/*.d.ts',
+  ]),
+  {
+    ...js.configs.recommended,
+    name: 'moviepilot/javascript',
+    files: managedFiles,
+  },
+  ...typescriptConfigs,
+  ...vueConfigs,
+  {
+    name: 'moviepilot/vue-contracts',
+    files: ['**/*.vue'],
+    rules: {
+      'vue/multi-word-component-names': 'off',
+      'vue/valid-v-slot': [
+        'error',
+        {
+          allowModifiers: true,
+        },
+      ],
+    },
+  },
+  {
+    name: 'moviepilot/language-options',
+    files: managedFiles,
+    linterOptions: {
+      reportUnusedDisableDirectives: 'off',
+    },
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        parser: tseslint.parser,
+      },
+    },
+  },
+  {
+    name: 'moviepilot/browser-globals',
+    files: browserFiles,
+    languageOptions: {
+      globals: globals.browser,
+    },
+    rules: {
+      'no-restricted-globals': ['error', ...nodeOnlyGlobalRestrictions],
+    },
+  },
+  {
+    name: 'moviepilot/node-globals',
+    files: nodeFiles,
+    languageOptions: {
+      globals: globals.node,
+    },
+    // Node 配置可能位于浏览器源码目录；显式覆盖浏览器专用限制，避免 flat config 合并后误报。
+    rules: {
+      'no-restricted-globals': 'off',
+    },
+  },
+  {
+    name: 'moviepilot/sonarjs',
+    files: managedFiles,
+    plugins: {
+      sonarjs,
+    },
+    rules: sonarRules,
+  },
+  {
+    name: 'moviepilot/sonarjs-locales',
+    files: [`src/locales/**/*.{${managedScriptExtensions}}`],
+    rules: {
+      'sonarjs/no-hardcoded-passwords': 'off',
+      'sonarjs/no-hardcoded-secrets': 'off',
+    },
+  },
+  {
+    name: 'moviepilot/source-hygiene',
+    files: managedFiles,
+    rules: {
+      'no-debugger': 'error',
+    },
+  },
+  {
+    name: 'moviepilot/layout-boundary',
+    files: [`src/@layouts/**/*.{${managedScriptExtensions},vue}`],
+    rules: {
+      'no-restricted-syntax': [
+        'error',
+        ...layoutCoreImportRestrictions,
+        ...layoutGlobRestrictions,
+        nonLiteralLayoutDynamicImportRestriction,
+      ],
+    },
+  },
+])

package.json

@@ -1,19 +1,28 @@
 {
   "name": "moviepilot",
-  "version": "2.14.5",
+  "version": "2.15.1",
   "private": true,
   "type": "module",
   "bin": "dist/service.js",
   "scripts": {
     "dev": "vite --host",
-    "prebuild": "npm run build:icons",
+    "dev:pwa": "vite --host --port 5174",
+    "prebuild": "npm run build:icons && npm run generate:pwa-splash",
     "build": "vite build",
+    "generate:pwa-splash": "node scripts/generate-pwa-splash.mjs",
     "preview": "vite preview --port 5050",
     "test": "vitest",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
+    "test:lint-config": "vitest run tests/config/eslint-config.spec.ts",
     "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint . -c .eslintrc.js --fix --ext .ts,.js,.vue,.tsx,.jsx",
+    "lint": "eslint . --max-warnings=0",
+    "lint:fix": "eslint . --fix",
+    "lint:suppressions:prune": "eslint . --prune-suppressions",
+    "format": "node scripts/format-changed.mjs --write",
+    "format:check": "node scripts/format-changed.mjs --check",
+    "format:all:check": "prettier . --check",
+    "test:format-config": "vitest run tests/config/format-changed.spec.ts tests/config/frontend-workflow.spec.ts",
     "build:icons": "tsc -b src/@iconify && node src/@iconify/build-icons.js",
     "postinstall": "npm run build:icons",
     "pkg": "pkg . -t node18-win-x64 -o MoviePilot-Frontend.exe"
@@ -82,6 +91,7 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@iconify-json/line-md": "^1.2.13",
     "@iconify-json/lucide": "^1.2.85",
     "@iconify-json/material-symbols": "^1.2.51",
@@ -107,26 +117,22 @@
     "@types/qrcode": "^1.5.6",
     "@types/three": "^0.185.1",
     "@types/webfontloader": "^1.6.34",
-    "@typescript-eslint/eslint-plugin": "^8.20.0",
-    "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vitest/coverage-v8": "3.2.7",
     "@vue/compiler-dom": "3.5.13",
     "@vue/test-utils": "2.4.11",
     "autoprefixer": "^10.4.14",
-    "eslint": "^9.18.0",
-    "eslint-import-resolver-typescript": "^3.5.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-regex": "^1.10.0",
-    "eslint-plugin-sonarjs": "^3.0.1",
-    "eslint-plugin-unicorn": "^56.0.1",
-    "eslint-plugin-vue": "^9.12.0",
+    "eslint": "^10.7.0",
+    "eslint-plugin-sonarjs": "^4.2.0",
+    "eslint-plugin-vue": "^10.9.2",
+    "globals": "^17.3.0",
     "jsdom": "26.1.0",
     "msw": "2.15.0",
     "postcss": "^8.5.1",
     "postcss-html": "^1.5.0",
+    "prettier": "^3.9.5",
+    "sharp": "^0.33.5",
     "stylelint": "^16.13.2",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard-scss": "^14.0.0",
@@ -134,6 +140,7 @@
     "terser": "^5.36.0",
     "type-fest": "^4.15.0",
     "typescript": "^5.0.4",
+    "typescript-eslint": "^8.64.0",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
     "unplugin-vue-define-options": "^1.5.3",
@@ -144,10 +151,14 @@
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-plugin-vuetify": "2.0.4",
     "vitest": "3.2.7",
+    "vue-eslint-parser": "^10.4.1",
     "vue-shepherd": "^4.1.0",
     "vue-tsc": "^2.0.10",
     "workbox-build": "^7.3.0",
     "workbox-window": "^7.3.0"
   },
-  "packageManager": "yarn@1.22.18"
+  "packageManager": "yarn@1.22.18",
+  "engines": {
+    "node": ">=20.19"
+  }
 }

scripts/format-changed.mjs

@@ -0,0 +1,208 @@
+import { execFileSync, spawnSync } from 'node:child_process'
+import { existsSync, lstatSync } from 'node:fs'
+import { resolve } from 'node:path'
+import process from 'node:process'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import * as prettier from 'prettier'
+
+const DEFAULT_BASE_REFS = ['refs/remotes/upstream/v2', 'refs/remotes/origin/v2', 'refs/heads/v2']
+const GIT_OUTPUT_MAX_BUFFER = 64 * 1024 * 1024
+const PRETTIER_ARGUMENT_BUDGET = 24_000
+const prettierCliPath = fileURLToPath(new URL('../node_modules/prettier/bin/prettier.cjs', import.meta.url))
+
+/** 解析 Git 的 NUL 分隔输出，保留文件名中的空格、换行和通配符字符。 */
+function parseNullDelimited(output) {
+  return output.toString('utf8').split('\0').filter(Boolean)
+}
+
+/** 运行只返回仓库相对路径的 Git 查询。 */
+function gitPaths(cwd, args) {
+  return parseNullDelimited(
+    execFileSync('git', args, {
+      cwd,
+      encoding: 'buffer',
+      maxBuffer: GIT_OUTPUT_MAX_BUFFER,
+    }),
+  )
+}
+
+/** 尝试把引用解析为提交 SHA；完整引用可避免分支与标签同名时产生歧义。 */
+function tryResolveCommit(cwd, ref) {
+  const result = spawnSync('git', ['rev-parse', '--verify', '--quiet', '--end-of-options', `${ref}^{commit}`], {
+    cwd,
+    encoding: 'utf8',
+  })
+  return result.status === 0 ? result.stdout.trim() : undefined
+}
+
+/** 把外部引用解析为提交 SHA，后续 Git diff 不再解释用户提供的选项样式字符串。 */
+function resolveCommit(cwd, ref) {
+  const commit = tryResolveCommit(cwd, ref)
+  if (commit) return commit
+  throw new Error(`无法解析 Git 提交引用：${ref}`)
+}
+
+/** 判断两个提交能否进行三点比较。 */
+function hasMergeBase(cwd, baseCommit, headCommit) {
+  return spawnSync('git', ['merge-base', baseCommit, headCommit], { cwd, stdio: 'ignore' }).status === 0
+}
+
+/** 为本地命令选择与当前提交具有共同祖先的 v2 基线。 */
+function resolveDefaultBase(cwd, headCommit) {
+  for (const ref of DEFAULT_BASE_REFS) {
+    const commit = tryResolveCommit(cwd, ref)
+    if (commit && hasMergeBase(cwd, commit, headCommit)) return commit
+  }
+
+  throw new Error('无法定位可比较的 v2 基线，请通过 --base <ref> 显式指定比较起点。')
+}
+
+/**
+ * 收集当前分支相对基线的文件集合。
+ * 显式 base/head 模式只读取提交区间，默认本地模式还会合并暂存区、工作区和未跟踪文件。
+ */
+function collectChangedPaths({ cwd, base, head }) {
+  if (Boolean(base) !== Boolean(head)) {
+    throw new Error('--base 与 --head 必须一起使用。')
+  }
+
+  const explicitRange = Boolean(base)
+  const headCommit = resolveCommit(cwd, head ?? 'HEAD')
+  const baseCommit = base ? resolveCommit(cwd, base) : resolveDefaultBase(cwd, headCommit)
+  if (!hasMergeBase(cwd, baseCommit, headCommit)) {
+    throw new Error('Git 比较起点与终点没有共同祖先，无法执行三点比较。')
+  }
+  const paths = new Set(
+    gitPaths(cwd, ['diff', '--name-only', '--diff-filter=ACMRT', '-z', `${baseCommit}...${headCommit}`]),
+  )
+
+  if (!explicitRange) {
+    for (const filePath of gitPaths(cwd, ['diff', '--name-only', '--diff-filter=ACMRT', '-z', 'HEAD'])) {
+      paths.add(filePath)
+    }
+    for (const filePath of gitPaths(cwd, ['ls-files', '--others', '--exclude-standard', '-z'])) {
+      paths.add(filePath)
+    }
+  }
+
+  return [...paths]
+    .filter(filePath => {
+      const absolutePath = resolve(cwd, filePath)
+      if (!existsSync(absolutePath)) return false
+      try {
+        return lstatSync(absolutePath).isFile()
+      } catch {
+        return false
+      }
+    })
+    .sort()
+}
+
+/** 使用仓库 ignore 文件和 Prettier parser 推断筛出真正受格式化工具管理的文件。 */
+async function selectPrettierFiles(filePaths, cwd) {
+  const ignorePaths = ['.gitignore', '.prettierignore'].map(filePath => resolve(cwd, filePath)).filter(existsSync)
+  const selected = []
+
+  for (const filePath of filePaths) {
+    const absolutePath = resolve(cwd, filePath)
+    const fileInfo = await prettier.getFileInfo(absolutePath)
+    if (!fileInfo.inferredParser) continue
+
+    let ignored = false
+    for (const ignorePath of ignorePaths) {
+      if ((await prettier.getFileInfo(absolutePath, { ignorePath })).ignored) {
+        ignored = true
+        break
+      }
+    }
+
+    if (!ignored) selected.push(filePath)
+  }
+
+  return selected
+}
+
+/** 按保守的参数长度预算拆批，避免大型 PR 超过操作系统命令行上限。 */
+function batchPaths(filePaths) {
+  const batches = []
+  let batch = []
+  let length = 0
+
+  for (const filePath of filePaths) {
+    if (batch.length > 0 && length + filePath.length + 1 > PRETTIER_ARGUMENT_BUDGET) {
+      batches.push(batch)
+      batch = []
+      length = 0
+    }
+    batch.push(filePath)
+    length += filePath.length + 1
+  }
+
+  if (batch.length > 0) batches.push(batch)
+  return batches
+}
+
+/** 通过参数数组调用项目内 Prettier，避免 shell 展开或拼接特殊文件名。 */
+function runPrettier(filePaths, mode, cwd) {
+  if (filePaths.length === 0) {
+    console.log('没有需要 Prettier 处理的变更文件。')
+    return
+  }
+
+  for (const batch of batchPaths(filePaths)) {
+    const result = spawnSync(process.execPath, [prettierCliPath, mode, '--ignore-unknown', '--', ...batch], {
+      cwd,
+      stdio: 'inherit',
+    })
+    if (result.status !== 0) {
+      throw new Error(`Prettier ${mode} 失败，退出码：${result.status ?? 'unknown'}`)
+    }
+  }
+}
+
+/** 解析面向开发者和 CI 的稳定命令行契约。 */
+function parseArguments(args) {
+  const options = { action: undefined, base: undefined, head: undefined }
+
+  for (let index = 0; index < args.length; index += 1) {
+    const argument = args[index]
+    if (['--check', '--write', '--list'].includes(argument)) {
+      if (options.action) throw new Error('只能指定 --check、--write 或 --list 中的一种操作。')
+      options.action = argument
+      continue
+    }
+    if (argument === '--base' || argument === '--head') {
+      const value = args[index + 1]
+      if (!value) throw new Error(`${argument} 缺少引用值。`)
+      options[argument.slice(2)] = value
+      index += 1
+      continue
+    }
+    throw new Error(`未知参数：${argument}`)
+  }
+
+  if (!options.action) throw new Error('必须指定 --check、--write 或 --list。')
+  return options
+}
+
+/** 执行变更文件选择与格式化；显式引用模式为 CI 提供确定输入。 */
+async function main() {
+  const cwd = process.cwd()
+  const { action, base, head } = parseArguments(process.argv.slice(2))
+  const changedPaths = collectChangedPaths({ cwd, base, head })
+  const selectedPaths = await selectPrettierFiles(changedPaths, cwd)
+
+  if (action === '--list') {
+    process.stdout.write(`${JSON.stringify(selectedPaths)}\n`)
+    return
+  }
+
+  runPrettier(selectedPaths, action, cwd)
+}
+
+if (process.argv[1] && pathToFileURL(process.argv[1]).href === import.meta.url) {
+  main().catch(error => {
+    console.error(error instanceof Error ? error.message : error)
+    process.exitCode = 1
+  })
+}

scripts/generate-pwa-splash.mjs

@@ -0,0 +1,68 @@
+import { mkdir } from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import sharp from 'sharp'
+import appleSplashSpecs from './pwa-splash-specs.json' with { type: 'json' }
+
+const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const logoPath = path.join(projectRoot, 'public', 'logo.svg')
+const outputDirectory = path.join(projectRoot, 'public', 'splash')
+const background = '#0E1116'
+
+async function createSplash(width, height, scaleFactor, outputPath, format) {
+  // Match the DOM loader's `min(160px, 36vw)` in CSS pixels, then convert it
+  // to physical pixels for the selected Apple launch image.
+  const logoSize = Math.round(Math.min(160, (width / scaleFactor) * 0.36) * scaleFactor)
+  const logo = await sharp(logoPath).resize(logoSize, logoSize, { fit: 'contain' }).png().toBuffer()
+  const image = sharp({
+    create: {
+      width,
+      height,
+      channels: 4,
+      background,
+    },
+  }).composite([
+    {
+      input: logo,
+      left: Math.round((width - logoSize) / 2),
+      top: Math.round((height - logoSize) / 2),
+    },
+  ])
+
+  if (format === 'png') {
+    await image.png({ compressionLevel: 9 }).toFile(outputPath)
+    return
+  }
+
+  await image.flatten({ background }).jpeg({ quality: 88, progressive: true }).toFile(outputPath)
+}
+
+await mkdir(outputDirectory, { recursive: true })
+
+for (const { width: portraitWidth, height: portraitHeight, scaleFactor } of appleSplashSpecs) {
+  const landscapeWidth = portraitHeight
+  const landscapeHeight = portraitWidth
+
+  await createSplash(
+    portraitWidth,
+    portraitHeight,
+    scaleFactor,
+    path.join(outputDirectory, `apple-splash-${portraitWidth}-${portraitHeight}.jpg`),
+    'jpg',
+  )
+  await createSplash(
+    landscapeWidth,
+    landscapeHeight,
+    scaleFactor,
+    path.join(outputDirectory, `apple-splash-${landscapeWidth}-${landscapeHeight}.jpg`),
+    'jpg',
+  )
+}
+
+// Keep the previous fallback filename for older deployments and bookmarked
+// entries that may still reference it. Its palette matches the new assets.
+await createSplash(750, 1334, 2, path.join(outputDirectory, 'apple-splash.png'), 'png')
+
+console.log(
+  `Generated ${appleSplashSpecs.length * 2 + 1} PWA splash assets in ${path.relative(projectRoot, outputDirectory)}`,
+)

scripts/pwa-development.ts

@@ -0,0 +1,294 @@
+import type { Plugin } from 'vite'
+
+const PWA_DEVELOPMENT_SCRIPT = 'dev:pwa'
+export const DEV_SW_CLEANUP_PATH = '/__moviepilot_dev_sw_cleanup__'
+
+const devEntryScriptTag = '<script type="module" src="/src/main.ts"></script>'
+const devEntryScriptUrl = '/src/main.ts'
+const moviePilotWorkerScripts = ['dev-sw.js?dev-sw', 'service-worker.js']
+const moviePilotIdentityMessage = 'GET_UNREAD_COUNT'
+const moviePilotIdentityTimeoutMs = 1500
+const moviePilotIdentityAttempts = 2
+
+/** 普通 development mode 仅在显式 dev:pwa 脚本中启用开发 Service Worker。 */
+export const isPwaDevelopmentEnabled = (mode: string, lifecycleEvent?: string) =>
+  mode === 'development' && lifecycleEvent === PWA_DEVELOPMENT_SCRIPT
+
+/** 普通开发服务器才执行历史 Service Worker 清理，production preview 保持构建产物行为。 */
+export const shouldEnableDevServiceWorkerCleanup = (
+  command: 'build' | 'serve',
+  mode: string,
+  isPreview: boolean | undefined,
+  lifecycleEvent?: string,
+) =>
+  command === 'serve' && mode === 'development' && isPreview !== true && !isPwaDevelopmentEnabled(mode, lifecycleEvent)
+
+/** 解析当前页面所属的应用根目录，兼容根路径和子路径部署。 */
+export function resolveDevAppScope(pageUrl: string): URL {
+  return new URL('./', new URL(pageUrl))
+}
+
+/** Worker 的 scope 和脚本 URL 都必须精确落在当前应用根目录。 */
+export function isManagedServiceWorkerRegistration(
+  scriptUrl: string,
+  registrationScope: string,
+  pageUrl: string,
+): boolean {
+  const appScope = resolveDevAppScope(pageUrl)
+  const scope = new URL(registrationScope)
+  const script = new URL(scriptUrl)
+
+  return (
+    scope.href === appScope.href &&
+    moviePilotWorkerScripts.some(workerScript => script.href === new URL(workerScript, appScope).href)
+  )
+}
+
+/** 复用现有轻量消息协议确认 Worker 确由 MoviePilot 提供。 */
+export function isMoviePilotServiceWorkerIdentityResponse(value: unknown): boolean {
+  if (!value || typeof value !== 'object') return false
+
+  return typeof (value as { count?: unknown }).count === 'number'
+}
+
+/** 身份探测允许有限次重试；持续失败时保持现有注册，避免误清理未知 Worker。 */
+export async function retryMoviePilotIdentityVerification(
+  verifyOnce: () => Promise<boolean>,
+  attempts: number,
+): Promise<boolean> {
+  for (let attempt = 0; attempt < attempts; attempt += 1) {
+    if (await verifyOnce()) return true
+  }
+  return false
+}
+
+/** 删除当前 origin 的全部 Cache Storage；调用方必须先确认该 dev origin 由 MoviePilot Worker 管理。 */
+export async function deleteCurrentOriginCaches(cacheStorage: Pick<CacheStorage, 'delete' | 'keys'>): Promise<void> {
+  const cacheNames = await cacheStorage.keys()
+  await Promise.all(cacheNames.map(cacheName => cacheStorage.delete(cacheName)))
+}
+
+/** 清理完成后只允许返回当前 origin，避免开发中间页形成开放重定向。 */
+export function resolveDevCleanupReturnUrl(requested: string | null, origin: string): URL {
+  if (!requested) return new URL('/', origin)
+  const target = new URL(requested, origin)
+  return target.origin === origin ? target : new URL('/', origin)
+}
+
+/**
+ * 普通开发服务器不应被历史 Service Worker 控制；受控页面先进入独立清理页，避免旧缓存模块抢先执行。
+ */
+export function createDevServiceWorkerCleanupPlugin(): Plugin {
+  const workerScripts = JSON.stringify(moviePilotWorkerScripts)
+  const identityMessage = JSON.stringify(moviePilotIdentityMessage)
+  const identityTimeoutMs = JSON.stringify(moviePilotIdentityTimeoutMs)
+  const identityAttempts = JSON.stringify(moviePilotIdentityAttempts)
+  const retryIdentityVerification = retryMoviePilotIdentityVerification.toString()
+  const deleteOriginCaches = deleteCurrentOriginCaches.toString()
+  const entryScriptUrl = JSON.stringify(devEntryScriptUrl)
+  const cleanupPath = JSON.stringify(DEV_SW_CLEANUP_PATH)
+  const cleanupAttemptKeyPrefix = JSON.stringify('moviepilot:dev-sw-cleanup')
+
+  const redirectScript = `
+(() => {
+  const entryScriptUrl = ${entryScriptUrl}
+  const deleteCurrentOriginCaches = ${deleteOriginCaches}
+  let appStarted = false
+  const startApp = () => {
+    if (appStarted) return
+    appStarted = true
+    const entry = document.createElement('script')
+    entry.type = 'module'
+    entry.src = entryScriptUrl
+    document.head.appendChild(entry)
+  }
+  if (!('serviceWorker' in navigator)) {
+    startApp()
+    return
+  }
+
+  const workerScripts = ${workerScripts}
+  const identityMessage = ${identityMessage}
+  const identityTimeoutMs = ${identityTimeoutMs}
+  const identityAttempts = ${identityAttempts}
+  const retryIdentityVerification = ${retryIdentityVerification}
+  const cleanupPath = ${cleanupPath}
+  const appScope = new URL('./', location.href)
+  const cleanupAttemptKey = ${cleanupAttemptKeyPrefix} + ':' + encodeURIComponent(appScope.pathname)
+  const cleanupState = sessionStorage.getItem(cleanupAttemptKey)
+  const getCandidateWorker = registration => {
+    if (new URL(registration.scope).href !== appScope.href) return null
+    return [registration.active, registration.waiting, registration.installing].find(worker => {
+      if (!worker) return false
+      const scriptUrl = new URL(worker.scriptURL).href
+      return workerScripts.some(workerScript => scriptUrl === new URL(workerScript, appScope).href)
+    }) || null
+  }
+  const verifyMoviePilotWorkerOnce = worker => new Promise(resolve => {
+    const channel = new MessageChannel()
+    const finish = result => {
+      window.clearTimeout(timeout)
+      channel.port1.close()
+      resolve(result)
+    }
+    const timeout = window.setTimeout(() => finish(false), identityTimeoutMs)
+    channel.port1.onmessage = event => finish(typeof event.data?.count === 'number')
+    try {
+      worker.postMessage({ type: identityMessage }, [channel.port2])
+    } catch {
+      finish(false)
+    }
+  })
+  const verifyMoviePilotWorker = worker =>
+    retryIdentityVerification(() => verifyMoviePilotWorkerOnce(worker), identityAttempts)
+  const hasVerifiedRegistration = async () => {
+    const registrations = await navigator.serviceWorker.getRegistrations()
+    for (const registration of registrations) {
+      const worker = getCandidateWorker(registration)
+      if (worker && await verifyMoviePilotWorker(worker)) return true
+    }
+    return false
+  }
+  const redirectToCleanup = () => {
+    sessionStorage.setItem(cleanupAttemptKey, 'pending')
+    const target = new URL(cleanupPath.slice(1), appScope)
+    target.searchParams.set('return', location.href)
+    location.replace(target.href)
+  }
+
+  // unregister 不会立即解除当前 document 的 controller；应用模块加载前需再导航一次以脱离旧 Worker。
+  if (cleanupState === 'complete') {
+    void (async () => {
+      // 旧 Worker 可能在注销后的首次导航中重新创建缓存；脱离控制后再清理一次。
+      if ('caches' in window) await deleteCurrentOriginCaches(caches)
+      sessionStorage.removeItem(cleanupAttemptKey)
+      location.reload()
+    })().catch(error => {
+      console.error('[PWA] Failed to finish stale development cache cleanup', error)
+      document.body.textContent = 'Failed to finish stale development cache cleanup. Reload to retry.'
+    })
+    return
+  }
+
+  void hasVerifiedRegistration().then(hasRegistration => {
+    if (hasRegistration) {
+      redirectToCleanup()
+      return
+    }
+    sessionStorage.removeItem(cleanupAttemptKey)
+    startApp()
+  }).catch(error => {
+    console.warn('[PWA] Failed to inspect historical Service Worker state', error)
+    startApp()
+  })
+})()
+`
+
+  const cleanupDocument = `<!doctype html>
+<html lang="zh-CN">
+  <head><meta charset="UTF-8"><title>MoviePilot Dev Cleanup</title></head>
+  <body>
+    <script>
+      (() => {
+        const workerScripts = ${workerScripts}
+        const identityMessage = ${identityMessage}
+        const identityTimeoutMs = ${identityTimeoutMs}
+        const identityAttempts = ${identityAttempts}
+        const retryIdentityVerification = ${retryIdentityVerification}
+        const deleteCurrentOriginCaches = ${deleteOriginCaches}
+        const appScope = new URL('./', location.href)
+        const cleanupAttemptKey = ${cleanupAttemptKeyPrefix} + ':' + encodeURIComponent(appScope.pathname)
+        const resolveReturnUrl = () => {
+          const requested = new URLSearchParams(location.search).get('return')
+          if (!requested) return appScope
+          const target = new URL(requested, appScope)
+          return target.href.startsWith(appScope.href) ? target : appScope
+        }
+        const returnUrl = resolveReturnUrl()
+        const getCandidateWorker = registration => {
+          if (new URL(registration.scope).href !== appScope.href) return null
+          return [registration.active, registration.waiting, registration.installing].find(worker => {
+            if (!worker) return false
+            const scriptUrl = new URL(worker.scriptURL).href
+            return workerScripts.some(workerScript => scriptUrl === new URL(workerScript, appScope).href)
+          }) || null
+        }
+        const verifyMoviePilotWorkerOnce = worker => new Promise(resolve => {
+          const channel = new MessageChannel()
+          const finish = result => {
+            window.clearTimeout(timeout)
+            channel.port1.close()
+            resolve(result)
+          }
+          const timeout = window.setTimeout(() => finish(false), identityTimeoutMs)
+          channel.port1.onmessage = event => finish(typeof event.data?.count === 'number')
+          try {
+            worker.postMessage({ type: identityMessage }, [channel.port2])
+          } catch {
+            finish(false)
+          }
+        })
+        const verifyMoviePilotWorker = worker =>
+          retryIdentityVerification(() => verifyMoviePilotWorkerOnce(worker), identityAttempts)
+        const cleanup = async () => {
+          if (sessionStorage.getItem(cleanupAttemptKey) !== 'pending') {
+            throw new Error('Missing Service Worker cleanup context for current application scope')
+          }
+          const registrations = 'serviceWorker' in navigator ? await navigator.serviceWorker.getRegistrations() : []
+          const managedRegistrations = []
+          for (const registration of registrations) {
+            const worker = getCandidateWorker(registration)
+            if (worker && await verifyMoviePilotWorker(worker)) managedRegistrations.push(registration)
+          }
+          if (!managedRegistrations.length) throw new Error('MoviePilot Service Worker identity verification failed')
+          await Promise.allSettled(managedRegistrations.map(registration => registration.unregister()))
+
+          // Vite dev server 使用独立 origin；仅在确认 MoviePilot Worker 后清除其遗留模块响应。
+          if ('caches' in window) await deleteCurrentOriginCaches(caches)
+
+          // 回跳入口后由 head-prepend 脚本完成第二次导航，避免同一 client 继续复用旧模块响应。
+          sessionStorage.setItem(cleanupAttemptKey, 'complete')
+          location.replace(returnUrl.href)
+        }
+
+        void cleanup().catch(error => {
+          console.error('[PWA] Failed to clean stale development Service Worker state', error)
+          document.body.textContent = 'Failed to clean stale development Service Worker state. Reload to retry.'
+        })
+      })()
+    </script>
+  </body>
+</html>`
+
+  return {
+    name: 'moviepilot:dev-service-worker-cleanup',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use((request, response, next) => {
+        const pathname = new URL(request.url || '/', 'http://localhost').pathname
+        if (!pathname.endsWith(DEV_SW_CLEANUP_PATH)) {
+          next()
+          return
+        }
+
+        response.statusCode = 200
+        response.setHeader('Content-Type', 'text/html; charset=utf-8')
+        response.setHeader('Cache-Control', 'no-store')
+        response.end(cleanupDocument)
+      })
+    },
+    transformIndexHtml: {
+      order: 'pre',
+      handler(html) {
+        if (!html.includes(devEntryScriptTag)) {
+          throw new Error(`Expected development entry tag: ${devEntryScriptTag}`)
+        }
+
+        return {
+          html: html.replace(devEntryScriptTag, ''),
+          tags: [{ tag: 'script', children: redirectScript, injectTo: 'head-prepend' }],
+        }
+      },
+    },
+  }
+}

scripts/pwa-splash-specs.json

@@ -0,0 +1,22 @@
+[
+  { "width": 2048, "height": 2732, "scaleFactor": 2 },
+  { "width": 1668, "height": 2388, "scaleFactor": 2 },
+  { "width": 1536, "height": 2048, "scaleFactor": 2 },
+  { "width": 1640, "height": 2360, "scaleFactor": 2 },
+  { "width": 1668, "height": 2224, "scaleFactor": 2 },
+  { "width": 1620, "height": 2160, "scaleFactor": 2 },
+  { "width": 1488, "height": 2266, "scaleFactor": 2 },
+  { "width": 1320, "height": 2868, "scaleFactor": 3 },
+  { "width": 1206, "height": 2622, "scaleFactor": 3 },
+  { "width": 1260, "height": 2736, "scaleFactor": 3 },
+  { "width": 1290, "height": 2796, "scaleFactor": 3 },
+  { "width": 1179, "height": 2556, "scaleFactor": 3 },
+  { "width": 1170, "height": 2532, "scaleFactor": 3 },
+  { "width": 1284, "height": 2778, "scaleFactor": 3 },
+  { "width": 1125, "height": 2436, "scaleFactor": 3 },
+  { "width": 1242, "height": 2688, "scaleFactor": 3 },
+  { "width": 828, "height": 1792, "scaleFactor": 2 },
+  { "width": 1242, "height": 2208, "scaleFactor": 3 },
+  { "width": 750, "height": 1334, "scaleFactor": 2 },
+  { "width": 640, "height": 1136, "scaleFactor": 2 }
+]

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

@@ -96,7 +96,8 @@
 
     // 👉 Nav Link
     .nav-link {
-      overflow: hidden;
+      // 交互项已预留下边距承接激活阴影，父级不能再次裁切这段视觉溢出。
+      overflow: visible;
 
       > :first-child {
         @extend %vertical-nav-item;

src/@core/scss/libs/perfect-scrollbar.scss

@@ -34,10 +34,15 @@ $ps-track-size: 0.5rem;
   inline-size: $ps-hover-size;
 }
 
-// fix bug
-@media(hover: none) {
-  .ps > .ps__rail-x,
-  .ps > .ps__rail-y {
-    opacity: 0.6;
-  }
-} 
+// 滚动条只反馈实际滚动状态，鼠标经过容器或键盘聚焦不应让轨道常驻。
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y {
+  opacity: 0 !important;
+}
+
+.ps.ps--scrolling-x > .ps__rail-x,
+.ps.ps--scrolling-y > .ps__rail-y {
+  opacity: 0.6 !important;
+}

src/@core/utils/__tests__/image.spec.ts

@@ -0,0 +1,53 @@
+import { vi } from 'vitest'
+
+vi.mock('colorthief', () => ({
+  default: class ColorThief {},
+}))
+
+import { preloadCorsImage } from '@/@core/utils/image'
+import { afterEach, describe, expect, it } from 'vitest'
+
+describe('preloadCorsImage', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('uses a CORS-clean cached response without reloading it', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      blob: vi.fn().mockResolvedValue(new Blob(['image'])),
+      ok: true,
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(preloadCorsImage('https://image.example/wallpaper.jpg')).resolves.toBe(true)
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    expect(fetchMock).toHaveBeenCalledWith(
+      new URL('https://image.example/wallpaper.jpg'),
+      expect.objectContaining({ cache: 'force-cache', credentials: 'omit', mode: 'cors' }),
+    )
+  })
+
+  it('reloads a response when an earlier non-CORS cache entry blocks the first request', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockRejectedValueOnce(new TypeError('Failed to fetch'))
+      .mockResolvedValueOnce({
+        blob: vi.fn().mockResolvedValue(new Blob(['image'])),
+        ok: true,
+      })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(preloadCorsImage('/wallpaper.jpg')).resolves.toBe(true)
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      2,
+      new URL('/wallpaper.jpg', window.location.href),
+      expect.objectContaining({ cache: 'reload', credentials: 'same-origin', mode: 'cors' }),
+    )
+  })
+
+  it('returns false when the source cannot be read with CORS', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new TypeError('Failed to fetch')))
+
+    await expect(preloadCorsImage('https://image.example/wallpaper.jpg')).resolves.toBe(false)
+  })
+})

src/@core/utils/image.ts

@@ -70,22 +70,57 @@ export async function getDominantColor(
 export async function preloadImage(url: string): Promise<boolean> {
   return new Promise(resolve => {
     const img = new Image()
+    let settled = false
+    const finish = (available: boolean) => {
+      if (settled) return
 
-    img.onload = () => resolve(true)
-    img.onerror = () => resolve(false)
+      settled = true
+      clearTimeout(timeout)
+      resolve(available)
+    }
+
+    img.onload = () => finish(true)
+    img.onerror = () => finish(false)
 
     // 设置超时，防止图片长时间加载
     const timeout = setTimeout(() => {
       img.src = ''
-      resolve(false)
+      finish(false)
     }, 5000) // 5秒超时
 
     img.src = url
 
     // 如果图片已经缓存，onload可能不会触发
     if (img.complete) {
-      clearTimeout(timeout)
-      resolve(true)
+      finish(img.naturalWidth > 0)
     }
   })
 }
+
+/** 在纹理加载前建立带 CORS 响应头的缓存，避免普通图片缓存污染 WebGL 读取。 */
+export async function preloadCorsImage(url: string): Promise<boolean> {
+  const request = async (cache: RequestCache) => {
+    const source = new URL(url, window.location.href)
+    const response = await fetch(source, {
+      cache,
+      credentials: source.origin === window.location.origin ? 'same-origin' : 'omit',
+      mode: 'cors',
+    })
+    if (!response.ok) return false
+
+    await response.blob()
+    return true
+  }
+
+  try {
+    if (await request('force-cache')) return true
+  } catch {
+    // 缓存中的非 CORS 响应可能使首次读取失败，重新验证后再决定是否回退。
+  }
+
+  try {
+    return await request('reload')
+  } catch {
+    return false
+  }
+}

src/@core/utils/theme.ts

@@ -3,4 +3,9 @@ export function saveLocalTheme(name: string, theme: any) {
   localStorage.setItem('theme', name)
   localStorage.setItem('materio-initial-loader-bg', theme.current.value.colors.background)
   localStorage.setItem('materio-initial-loader-color', theme.current.value.colors.primary)
+
+  // 自动主题下次恢复时需要一个稳定的首帧明暗结果，避免媒体查询短暂返回浅色。
+  if (name === 'auto') {
+    localStorage.setItem('materio-initial-resolved-theme', theme.current.value.dark ? 'dark' : 'light')
+  }
 }

src/App.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { usePreferredReducedMotion } from '@vueuse/core'
 import { useTheme } from 'vuetify'
 import { ensureRenderComplete, removeEl } from './@core/utils/dom'
 import api, { type ConnectionAwareRequestConfig } from '@/api'
@@ -6,12 +7,12 @@ 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 { preloadCorsImage, preloadImage } from './@core/utils/image'
 import { globalLoadingStateManager } from '@/utils/loadingStateManager'
 import { addBackgroundTimer, removeBackgroundTimer } from '@/utils/backgroundManager'
 import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
 import SharedDialogHost from '@/components/dialog/SharedDialogHost.vue'
-import { applyStoredThemeCustomizerAppearance } from '@/composables/useThemeCustomizer'
+import { applyStoredThemeCustomizerAppearance, useEffectiveGlassSettings } from '@/composables/useThemeCustomizer'
 import {
   applyStoredTransparencySettings,
   TRANSPARENCY_SETTINGS_CHANGED_EVENT,
@@ -22,21 +23,86 @@ import { completeLaunchLoading } from '@/composables/useLaunchLoading'
 import { usePWA } from '@/composables/usePWA'
 import { themeManager } from '@/utils/themeManager'
 import { applyDocumentThemeChrome, resolveThemeName } from '@/utils/themePalette'
+import { getDisplayImageUrl } from '@/utils/imageUtils'
 import { configureApexChartsTheme } from '@/utils/apexCharts'
+import { useGlobalOfflineStatus, type ConnectionFailureReason } from '@/composables/useOfflineStatus'
+import { useAppActivityLifecycle } from '@/composables/useAppActivityLifecycle'
 import {
-  useGlobalOfflineStatus,
-  type ConnectionFailureReason,
-} from '@/composables/useOfflineStatus'
+  BACKGROUND_ROTATION_GRACE_MS,
+  createBackgroundCandidateOrderResolver,
+  findFirstAvailableBackground,
+  preloadBackgroundRotationImages,
+  shouldAllowBackgroundRotation,
+} from '@/utils/backgroundRotation'
+import {
+  activateLoginBackgroundLayer,
+  createLoginBackgroundLayers,
+  getLoginGlassOpticalSettings,
+  getLoginVisualProfile,
+  prepareLoginBackgroundLayer,
+  settleLoginBackgroundLayers,
+  type LoginBackgroundLayer,
+} from '@/utils/loginPresentation'
+import {
+  DEFAULT_GLASS_WALLPAPER_TONE_PROFILE,
+  loadGlassWallpaperToneProfile,
+  type GlassWallpaperToneProfile,
+} from '@/utils/glassWallpaperTone'
 
 const LOGIN_WALLPAPER_ROUTE = '/login'
 const BACKGROUND_CROSSFADE_DURATION_MS = 1500
-const WINDOW_BLUR_RENDER_THROTTLE_DELAY_MS = 180_000
+const LAUNCH_MIN_VISIBLE_MS = 320
+const LAUNCH_MAX_WAIT_MS = 1200
+const LAUNCH_EXIT_DURATION_MS = 180
+
+function getLaunchNow() {
+  return globalThis.performance?.now?.() ?? Date.now()
+}
+
+const launchStartedAt = Number.parseFloat(document.documentElement.dataset.launchStartedAt || '') || getLaunchNow()
+
+function getRemainingLaunchBudget() {
+  return Math.max(0, LAUNCH_MAX_WAIT_MS - (getLaunchNow() - launchStartedAt))
+}
+
+async function waitForLaunchTask(task: Promise<unknown>, timeoutMs: number, label: string) {
+  if (timeoutMs <= 0) return
+
+  await Promise.race([
+    task.catch(error => {
+      console.warn(`[Launch] ${label} failed`, error)
+    }),
+    new Promise<void>(resolve => window.setTimeout(resolve, timeoutMs)),
+  ])
+}
+
+async function waitForMinimumLaunchVisibility() {
+  const remaining = LAUNCH_MIN_VISIBLE_MS - (getLaunchNow() - launchStartedAt)
+  if (remaining > 0) {
+    await new Promise<void>(resolve => window.setTimeout(resolve, remaining))
+  }
+}
+
+function getCachedAutoResolvedTheme() {
+  const cachedTheme = localStorage.getItem('materio-initial-resolved-theme')
+
+  return cachedTheme === 'dark' || cachedTheme === 'light' ? cachedTheme : null
+}
+
+function resolveInitialThemeName(themePreference: string) {
+  if (themePreference === 'auto') {
+    return getCachedAutoResolvedTheme() || resolveThemeName(themePreference)
+  }
+
+  return resolveThemeName(themePreference)
+}
 
 // 生效主题
 const vuetifyTheme = useTheme()
 const { global: globalTheme } = vuetifyTheme
 let themeValue = localStorage.getItem('theme') || 'auto'
-globalTheme.name.value = resolveThemeName(themeValue)
+let resumeThemeSyncTimer: number | null = null
+globalTheme.name.value = resolveInitialThemeName(themeValue)
 applyStoredThemeCustomizerAppearance(vuetifyTheme)
 
 // 启动屏和 iOS safe area 在同一层显示，根节点底色需要尽早和当前主题保持一致。
@@ -59,25 +125,110 @@ setI18nLanguage(localeValue as SupportedLocale)
 const authStore = useAuthStore()
 const isLogin = computed(() => authStore.token)
 const route = useRoute()
+const router = useRouter()
 const { initializePWA } = usePWA()
 const offlineStatus = useGlobalOfflineStatus()
 
 // 全局设置store
 const globalSettingsStore = useGlobalSettingsStore()
 
-// 生成背景图片key
-const loginStateKey = computed(() => (isLogin.value ? 'logged-in' : 'logged-out'))
-
 // 背景图片
 const backgroundImages = ref<string[]>([])
+const backgroundLayers = ref(createLoginBackgroundLayers())
+const backgroundToneProfiles = ref<Record<string, GlassWallpaperToneProfile>>({})
 const activeImageIndex = ref(0)
 const previousImageIndex = ref<number | null>(null)
-const isTransparentTheme = computed(() => globalTheme.name.value === 'transparent')
-const isLoginWallpaperRoute = computed(() => !isLogin.value && route.path === LOGIN_WALLPAPER_ROUTE)
-const shouldUseTransparentBackgroundTreatment = computed(() => Boolean(isLogin.value) && isTransparentTheme.value)
-const shouldLoadBackgroundImages = computed(
-  () => isLoginWallpaperRoute.value || (Boolean(isLogin.value) && isTransparentTheme.value),
+const isBackgroundCrossfading = ref(false)
+const backgroundCrossfadeStartedAt = ref(0)
+const pendingOpticalBackgroundImage = ref('')
+const resolveBackgroundCandidateOrder = createBackgroundCandidateOrderResolver()
+const { allowsDecorativeMotion, isSuspended: isRenderThrottled, state: appActivityState } = useAppActivityLifecycle()
+const preferredMotion = usePreferredReducedMotion()
+const backgroundRotationGraceActive = ref(false)
+let backgroundRotationGraceTimer: number | null = null
+// 壁纸时钟允许短时后台续跑；指针、滚动和流场仍服从更严格的应用活动状态。
+const allowsBackgroundRotation = computed(() =>
+  shouldAllowBackgroundRotation(
+    appActivityState.value,
+    backgroundRotationGraceActive.value,
+    preferredMotion.value === 'reduce',
+  ),
 )
+const isTransparentTheme = computed(() => globalTheme.name.value === 'transparent')
+const isGlassTheme = computed(() => globalTheme.name.value === 'glass')
+const effectiveGlassSettings = useEffectiveGlassSettings()
+const isInitialRouteReady = ref(false)
+const isBackdropTheme = computed(() => isTransparentTheme.value || isGlassTheme.value)
+const isLoginWallpaperRoute = computed(() => !isLogin.value && route.path === LOGIN_WALLPAPER_ROUTE)
+const loginVisualProfile = computed(() => getLoginVisualProfile(globalTheme.name.value))
+const loginGlassSettings = computed(() =>
+  getLoginGlassOpticalSettings({
+    appearance: effectiveGlassSettings.value.glassAppearance,
+    deformationStrength: effectiveGlassSettings.value.glassDeformationStrength,
+    flowStrength: effectiveGlassSettings.value.glassFlowStrength,
+    preset: effectiveGlassSettings.value.glassPreset,
+    reflectionStrength: effectiveGlassSettings.value.glassReflectionStrength,
+    transmissionStrength: effectiveGlassSettings.value.glassTransmissionStrength,
+    translationStrength: effectiveGlassSettings.value.glassTranslationStrength,
+    transparencyStrength: effectiveGlassSettings.value.glassTransparencyStrength,
+  }),
+)
+const opticalDeformationStrength = computed(() =>
+  isLoginWallpaperRoute.value
+    ? loginGlassSettings.value.deformationStrength
+    : effectiveGlassSettings.value.glassDeformationStrength,
+)
+const opticalFlowStrength = computed(() =>
+  isLoginWallpaperRoute.value ? loginGlassSettings.value.flowStrength : effectiveGlassSettings.value.glassFlowStrength,
+)
+const opticalQuality = computed(() =>
+  isLoginWallpaperRoute.value ? loginGlassSettings.value.quality : effectiveGlassSettings.value.glassQuality,
+)
+const opticalReflectionStrength = computed(() =>
+  isLoginWallpaperRoute.value
+    ? loginGlassSettings.value.reflectionStrength
+    : effectiveGlassSettings.value.glassReflectionStrength,
+)
+const opticalTransparencyStrength = computed(() =>
+  isLoginWallpaperRoute.value
+    ? loginGlassSettings.value.transparencyStrength
+    : effectiveGlassSettings.value.glassTransparencyStrength,
+)
+const opticalTranslationStrength = computed(() =>
+  isLoginWallpaperRoute.value
+    ? loginGlassSettings.value.translationStrength
+    : effectiveGlassSettings.value.glassTranslationStrength,
+)
+const opticalTransmissionStrength = computed(() =>
+  isLoginWallpaperRoute.value
+    ? loginGlassSettings.value.transmissionStrength
+    : effectiveGlassSettings.value.glassTransmissionStrength,
+)
+const shouldUseTransparentBackgroundTreatment = computed(() => isTransparentTheme.value && Boolean(isLogin.value))
+const shouldUseGlassBackgroundTreatment = computed(
+  () => isGlassTheme.value && (Boolean(isLogin.value) || isLoginWallpaperRoute.value),
+)
+const shouldLoadBackgroundImages = computed(
+  () => isLoginWallpaperRoute.value || (Boolean(isLogin.value) && isBackdropTheme.value),
+)
+const activeBackgroundImage = computed(() => backgroundImages.value[activeImageIndex.value] ?? '')
+const renderedBackgroundLayers = computed(() => backgroundLayers.value)
+const getOpticalBackgroundImage = (imageUrl: string) => getDisplayImageUrl(imageUrl, Boolean(isLogin.value))
+const activeOpticalBackgroundImage = computed(() => getOpticalBackgroundImage(activeBackgroundImage.value))
+const previousOpticalBackgroundImage = computed(() => {
+  const previousIndex = previousImageIndex.value
+  if (previousIndex === null) return ''
+
+  return getOpticalBackgroundImage(backgroundImages.value[previousIndex] ?? '')
+})
+const shouldRenderGlassOpticalLayer = computed(
+  () =>
+    isGlassTheme.value &&
+    opticalQuality.value !== 'css' &&
+    isInitialRouteReady.value &&
+    Boolean(activeBackgroundImage.value),
+)
+const GlassOpticalLayer = defineAsyncComponent(() => import('@/components/theme/GlassOpticalLayer.vue'))
 const transparentBackgroundBlur = ref(16)
 const transparencyGlassQuality = ref<TransparencyGlassQuality>(
   localStorage.getItem('transparency-glass-quality') === 'realtime' ? 'realtime' : 'lightweight',
@@ -88,12 +239,15 @@ const shouldRenderGlobalBlurLayer = computed(
     transparentBackgroundBlur.value > 0 &&
     transparencyGlassQuality.value === 'realtime',
 )
-const isRenderThrottled = ref(document.visibilityState === 'hidden')
 let backgroundRetryTimer: number | null = null
 let backgroundRequestController: AbortController | null = null
 let backgroundCrossfadeTimer: number | null = null
+let pendingOpticalWallpaperTimer: number | null = null
+let pendingOpticalWallpaperResolve: ((ready: boolean) => void) | null = null
 let authenticatedStateTimer: number | null = null
-let windowBlurRenderThrottleTimer: number | null = null
+let backgroundLoadVersion = 0
+let backgroundRecoveryAttemptedVersion = -1
+let backgroundRotationVersion = 0
 
 // 读取并同步透明主题背景设置到根组件响应式状态。
 function applyTransparentBackgroundSettings() {
@@ -111,53 +265,36 @@ function handleTransparencySettingsChanged(event: Event) {
   transparencyGlassQuality.value = glassQuality
 }
 
+/** 在壁纸可见前准备稳健曝光；不可读跨域图片回落中性 profile，不阻断 CSS 背景。 */
+async function ensureBackgroundToneProfile(imageUrl: string) {
+  if (!imageUrl || !isGlassTheme.value) return DEFAULT_GLASS_WALLPAPER_TONE_PROFILE
+
+  const profile = await loadGlassWallpaperToneProfile(getOpticalBackgroundImage(imageUrl))
+  backgroundToneProfiles.value = {
+    ...backgroundToneProfiles.value,
+    [imageUrl]: profile,
+  }
+
+  return profile
+}
+
+/** 让稳定双槽位分别携带当前壁纸的曝光，交叉淡化期间不共享新图参数。 */
+function getBackgroundLayerStyle(layer: LoginBackgroundLayer) {
+  const profile = backgroundToneProfiles.value[layer.url] ?? DEFAULT_GLASS_WALLPAPER_TONE_PROFILE
+  const appearance = effectiveGlassSettings.value.glassAppearance
+  const materialExposure = appearance === 'frosted' ? 0.82 : appearance === 'tinted' ? 0.85 : 0.86
+
+  return {
+    'backgroundImage': layer.url ? `url(${layer.url})` : undefined,
+    '--glass-wallpaper-brightness': String(materialExposure * profile.exposure),
+  }
+}
+
 applyTransparentBackgroundSettings()
 
-function clearWindowBlurRenderThrottleTimer() {
-  if (windowBlurRenderThrottleTimer) {
-    window.clearTimeout(windowBlurRenderThrottleTimer)
-    windowBlurRenderThrottleTimer = null
-  }
-}
-
-function restoreForegroundRendering() {
-  const wasRenderThrottled = isRenderThrottled.value
-
-  clearWindowBlurRenderThrottleTimer()
-  isRenderThrottled.value = false
-
-  if (wasRenderThrottled && backgroundImages.value.length > 1) {
-    startBackgroundRotation()
-    rotateBackgroundImage()
-  }
-}
-
-function throttleBackgroundRendering() {
-  clearWindowBlurRenderThrottleTimer()
-  resetBackgroundCrossfade()
-  isRenderThrottled.value = true
-}
-
-function handleWindowBlurRenderThrottle() {
-  clearWindowBlurRenderThrottleTimer()
-  if (document.visibilityState === 'hidden') {
-    throttleBackgroundRendering()
-    return
-  }
-
-  windowBlurRenderThrottleTimer = window.setTimeout(() => {
-    if (document.visibilityState === 'visible' && !document.hasFocus()) {
-      isRenderThrottled.value = true
-    }
-    windowBlurRenderThrottleTimer = null
-  }, WINDOW_BLUR_RENDER_THROTTLE_DELAY_MS)
-}
-
-function handleWindowFocusRenderThrottle() {
-  if (document.visibilityState === 'visible') {
-    restoreForegroundRendering()
-  }
-}
+void router.isReady().then(() => {
+  isInitialRouteReady.value = true
+})
 
 let heartbeatInterval: number | null = null
 let connectionRetryTimer: number | null = null
@@ -209,13 +346,10 @@ async function probeServerConnection(showChecking = false): Promise<boolean> {
   const successSequenceAtProbeStart = offlineStatus.serverSuccessSequence.value
   const probePromise = (async () => {
     try {
-      await api.get(
-        'system/ping',
-        {
-          skipConnectionTracking: true,
-          timeout: SERVER_PROBE_TIMEOUT_MS,
-        } as ConnectionAwareRequestConfig,
-      )
+      await api.get('system/ping', {
+        skipConnectionTracking: true,
+        timeout: SERVER_PROBE_TIMEOUT_MS,
+      } as ConnectionAwareRequestConfig)
       connectionProbeFailures = 0
       return true
     } catch (error) {
@@ -258,9 +392,12 @@ function startHeartbeat() {
 
   void probeServerConnection()
 
-  heartbeatInterval = window.setInterval(async () => {
-    if (isLogin.value) await probeServerConnection()
-  }, 5 * 60 * 1000)
+  heartbeatInterval = window.setInterval(
+    async () => {
+      if (isLogin.value) await probeServerConnection()
+    },
+    5 * 60 * 1000,
+  )
 }
 
 /** 停止心跳和等待中的自动重连任务。 */
@@ -306,10 +443,18 @@ function updateHtmlThemeAttribute(themeName: string) {
 }
 
 // 从本地存储重新同步主题偏好、DOM 主题属性和相关外观配置。
-function syncThemePreferenceFromStorage() {
+function syncThemePreferenceFromStorage(preferCachedAuto = false) {
+  if (resumeThemeSyncTimer !== null) {
+    window.clearTimeout(resumeThemeSyncTimer)
+    resumeThemeSyncTimer = null
+  }
+
   themeValue = localStorage.getItem('theme') || 'auto'
 
-  const resolvedTheme = resolveThemeName(themeValue)
+  const resolvedTheme =
+    themeValue === 'auto' && preferCachedAuto
+      ? getCachedAutoResolvedTheme() || resolveThemeName(themeValue)
+      : resolveThemeName(themeValue)
   if (globalTheme.name.value !== resolvedTheme) {
     globalTheme.name.value = resolvedTheme
   }
@@ -320,13 +465,20 @@ function syncThemePreferenceFromStorage() {
 
   // 前台恢复时重新跑一次主题管理器，补齐 transparent CSS 和 auto 的实际 DOM 主题。
   void themeManager
-    .setTheme(themeValue)
+    .setTheme(themeValue === 'auto' ? resolvedTheme : themeValue)
     .then(() => {
       updateHtmlThemeAttribute(globalTheme.name.value)
     })
     .catch(error => {
       console.error('同步主题管理器失败:', error)
     })
+
+  if (preferCachedAuto && themeValue === 'auto') {
+    resumeThemeSyncTimer = window.setTimeout(() => {
+      resumeThemeSyncTimer = null
+      syncThemePreferenceFromStorage()
+    }, 180)
+  }
 }
 
 // 系统配色变化时，在自动主题模式下刷新当前实际主题。
@@ -339,21 +491,17 @@ function handleSystemThemeChange() {
 /** 页面重新可见时同步主题，并在连接异常时立即重新探测服务。 */
 function handleVisibilityThemeSync() {
   if (document.visibilityState === 'visible') {
-    restoreForegroundRendering()
-    syncThemePreferenceFromStorage()
+    syncThemePreferenceFromStorage(true)
     if (isLogin.value && !offlineStatus.isOnline.value) offlineStatus.requestConnectionCheck()
-  } else {
-    throttleBackgroundRendering()
   }
 }
 
 /** 页面从缓存或重新聚焦恢复时刷新主题偏好和异常连接状态。 */
 function handlePageShowThemeSync() {
   if (document.visibilityState === 'visible') {
-    restoreForegroundRendering()
     if (isLogin.value && !offlineStatus.isOnline.value) offlineStatus.requestConnectionCheck()
   }
-  syncThemePreferenceFromStorage()
+  syncThemePreferenceFromStorage(true)
 }
 
 // 清理背景图交叉淡入淡出定时器。
@@ -364,10 +512,44 @@ function clearBackgroundCrossfadeTimer() {
   }
 }
 
+/** 结束当前 GPU 纹理预备等待，旧请求不得继续提交壁纸切换。 */
+function settlePendingOpticalWallpaper(ready: boolean) {
+  if (pendingOpticalWallpaperTimer !== null) {
+    window.clearTimeout(pendingOpticalWallpaperTimer)
+    pendingOpticalWallpaperTimer = null
+  }
+  pendingOpticalBackgroundImage.value = ''
+  pendingOpticalWallpaperResolve?.(ready)
+  pendingOpticalWallpaperResolve = null
+}
+
+/** 等待两个 WebGL 呈现 context 完成下一张纹理上传。 */
+function prepareOpticalWallpaper(url: string) {
+  if (!shouldRenderGlassOpticalLayer.value || !url || url === activeOpticalBackgroundImage.value) {
+    return Promise.resolve(true)
+  }
+
+  settlePendingOpticalWallpaper(false)
+  pendingOpticalBackgroundImage.value = url
+
+  return new Promise<boolean>(resolve => {
+    pendingOpticalWallpaperResolve = resolve
+    pendingOpticalWallpaperTimer = window.setTimeout(() => settlePendingOpticalWallpaper(false), 10000)
+  })
+}
+
+/** 只接受当前待切换 URL 的 renderer 就绪回执。 */
+function handleOpticalWallpaperPrepared(url: string) {
+  if (url === pendingOpticalBackgroundImage.value) settlePendingOpticalWallpaper(true)
+}
+
 // 重置背景图交叉淡入淡出状态。
 function resetBackgroundCrossfade() {
   clearBackgroundCrossfadeTimer()
   previousImageIndex.value = null
+  isBackgroundCrossfading.value = false
+  backgroundCrossfadeStartedAt.value = 0
+  backgroundLayers.value = createLoginBackgroundLayers(activeBackgroundImage.value)
 }
 
 // 切换期保留上一张背景的渲染状态，避免图片合成层重建时露出透明底。
@@ -375,67 +557,180 @@ function activateBackgroundImage(nextIndex: number) {
   if (nextIndex === activeImageIndex.value) return
 
   clearBackgroundCrossfadeTimer()
+  backgroundLayers.value = prepareLoginBackgroundLayer(backgroundLayers.value, backgroundImages.value[nextIndex] ?? '')
   previousImageIndex.value = activeImageIndex.value
+  isBackgroundCrossfading.value = true
+  backgroundCrossfadeStartedAt.value = performance.now()
   activeImageIndex.value = nextIndex
+  backgroundLayers.value = activateLoginBackgroundLayer(backgroundLayers.value)
   backgroundCrossfadeTimer = window.setTimeout(() => {
     previousImageIndex.value = null
+    isBackgroundCrossfading.value = false
+    backgroundLayers.value = settleLoginBackgroundLayers(backgroundLayers.value)
     backgroundCrossfadeTimer = null
   }, BACKGROUND_CROSSFADE_DURATION_MS)
 }
 
-// 获取背景图片
+// 获取背景图片列表；只有选出实际可用的首图后才提交到可见状态。
 async function fetchBackgroundImages() {
+  backgroundRequestController?.abort()
+  const controller = new AbortController()
+  backgroundRequestController = controller
   try {
-    backgroundRequestController?.abort()
-    backgroundRequestController = new AbortController()
-    backgroundImages.value = await api.get(`/login/wallpapers`, {
-      signal: backgroundRequestController.signal,
+    return await api.get<string[], string[]>(`/login/wallpapers`, {
+      signal: controller.signal,
     })
-    resetBackgroundCrossfade()
-    activeImageIndex.value = 0
-  } catch (e) {
-    throw e
+  } finally {
+    if (backgroundRequestController === controller) backgroundRequestController = null
   }
 }
 
-// 背景图片轮换函数
-function rotateBackgroundImage() {
-  if (isRenderThrottled.value) return
+/** 仅提前加载当前图的下一项，不建立全目录预载队列。 */
+function preloadNextBackgroundImage() {
+  if (!allowsBackgroundRotation.value || backgroundImages.value.length <= 1) return
+  const nextIndex = (activeImageIndex.value + 1) % backgroundImages.value.length
+  void preloadBackgroundCandidate(backgroundImages.value[nextIndex])
+}
 
-  if (backgroundImages.value.length > 1) {
-    // 计算下一个图片索引
-    const nextIndex = (activeImageIndex.value + 1) % backgroundImages.value.length
-    // 预加载下一张图片
-    preloadImage(backgroundImages.value[nextIndex]).then(success => {
-      // 只有图片成功加载才切换
-      if (success) {
-        activateBackgroundImage(nextIndex)
-      }
-    })
+/** 实时玻璃先建立可供 WebGL 读取的缓存，失败时仍允许 CSS 材质显示该壁纸。 */
+async function preloadBackgroundCandidate(imageUrl: string) {
+  const toneProfile = isGlassTheme.value
+    ? ensureBackgroundToneProfile(imageUrl)
+    : Promise.resolve(DEFAULT_GLASS_WALLPAPER_TONE_PROFILE)
+  if (!shouldRenderGlassOpticalLayer.value) {
+    const [available] = await Promise.all([preloadImage(imageUrl), toneProfile])
+
+    return available
   }
+
+  const opticalUrl = getOpticalBackgroundImage(imageUrl)
+  const opticalReady = await preloadCorsImage(opticalUrl)
+  if (!opticalReady) {
+    const [displayReady] = await Promise.all([preloadImage(imageUrl), toneProfile])
+
+    return displayReady
+  }
+
+  const [displayReady] = await Promise.all([
+    opticalUrl === imageUrl ? Promise.resolve(true) : preloadImage(imageUrl),
+    toneProfile,
+  ])
+
+  return displayReady
+}
+
+// 背景图片轮换函数
+async function rotateBackgroundImage() {
+  if (!allowsBackgroundRotation.value || backgroundImages.value.length <= 1) return
+
+  const requestVersion = ++backgroundRotationVersion
+  const activeIndex = activeImageIndex.value
+  for (let offset = 1; offset < backgroundImages.value.length; offset += 1) {
+    if (!allowsBackgroundRotation.value || requestVersion !== backgroundRotationVersion) return
+
+    const nextIndex = (activeIndex + offset) % backgroundImages.value.length
+    const nextImage = backgroundImages.value[nextIndex]
+    const opticalImage = shouldRenderGlassOpticalLayer.value ? getOpticalBackgroundImage(nextImage) : undefined
+    if (opticalImage && !(await prepareOpticalWallpaper(opticalImage))) continue
+    const imagesReady = await preloadBackgroundRotationImages({
+      displayUrl: nextImage,
+      opticalUrl: opticalImage,
+      preload: preloadImage,
+    })
+    if (!imagesReady) continue
+    await ensureBackgroundToneProfile(nextImage)
+    if (!allowsBackgroundRotation.value || requestVersion !== backgroundRotationVersion) return
+
+    activateBackgroundImage(nextIndex)
+    preloadNextBackgroundImage()
+    return
+  }
+
+  if (requestVersion === backgroundRotationVersion && backgroundRecoveryAttemptedVersion !== backgroundLoadVersion) {
+    stopBackgroundRotation()
+    const recoveryVersion = ++backgroundLoadVersion
+    backgroundRecoveryAttemptedVersion = recoveryVersion
+    void loadBackgroundImages(recoveryVersion)
+  }
+}
+
+// 停止轮询并使已经发起的下一图准备失效，避免非活动状态收到迟到提交。
+function stopBackgroundRotation() {
+  backgroundRotationVersion += 1
+  removeBackgroundTimer('background-rotation')
+  settlePendingOpticalWallpaper(false)
+}
+
+function clearBackgroundRotationGrace() {
+  if (backgroundRotationGraceTimer !== null) {
+    window.clearTimeout(backgroundRotationGraceTimer)
+    backgroundRotationGraceTimer = null
+  }
+}
+
+function startBackgroundRotationGrace() {
+  if (backgroundRotationGraceActive.value) return
+
+  backgroundRotationGraceActive.value = true
+  clearBackgroundRotationGrace()
+  backgroundRotationGraceTimer = window.setTimeout(() => {
+    backgroundRotationGraceTimer = null
+    backgroundRotationGraceActive.value = false
+  }, BACKGROUND_ROTATION_GRACE_MS)
 }
 
 // 开始背景图片轮换
 function startBackgroundRotation() {
-  // 清除现有定时器
-  removeBackgroundTimer('background-rotation')
+  stopBackgroundRotation()
 
-  if (backgroundImages.value.length > 1) {
-    // 使用优化的定时器管理器，后台时自动暂停
+  if (allowsBackgroundRotation.value && backgroundImages.value.length > 1) {
+    preloadNextBackgroundImage()
+    // 隐藏页面也允许在有界宽限期内轮换，回调自身会再次核对生命周期。
     addBackgroundTimer(
       'background-rotation',
-      rotateBackgroundImage,
+      () => void rotateBackgroundImage(),
       10000, // 每10秒切换一次
       {
-        runInBackground: false, // 后台时不运行
+        runInBackground: true,
         skipInitialRun: true, // 不需要立即执行
       },
     )
   }
 }
 
-// 停止登录页或透明主题背景图加载、重试和轮播。
+watch(
+  appActivityState,
+  (state, previousState) => {
+    if (state === 'active') {
+      clearBackgroundRotationGrace()
+      backgroundRotationGraceActive.value = false
+      return
+    }
+
+    if (state === 'idle') {
+      clearBackgroundRotationGrace()
+      backgroundRotationGraceActive.value = false
+      return
+    }
+
+    if (previousState === 'active') startBackgroundRotationGrace()
+  },
+  { flush: 'sync' },
+)
+
+watch(allowsBackgroundRotation, allowsRotation => {
+  resetBackgroundCrossfade()
+
+  if (allowsRotation) {
+    startBackgroundRotation()
+  } else {
+    stopBackgroundRotation()
+  }
+})
+
+// 停止登录页、透明主题或玻璃主题背景图加载、重试和轮播。
 function stopBackgroundLoading() {
+  backgroundLoadVersion += 1
   backgroundRequestController?.abort()
   backgroundRequestController = null
 
@@ -445,7 +740,7 @@ function stopBackgroundLoading() {
   }
 
   resetBackgroundCrossfade()
-  removeBackgroundTimer('background-rotation')
+  stopBackgroundRotation()
 }
 
 // 初始化登录后的全局设置和用户设置状态。
@@ -490,7 +785,7 @@ async function animateAndRemoveLoader() {
         document.body.style.removeProperty('overflow')
         completeLaunchLoading()
         resolve()
-      }, 120)
+      }, LAUNCH_EXIT_DURATION_MS)
     })
   } else {
     completeLaunchLoading()
@@ -503,19 +798,27 @@ async function removeLoadingWithStateCheck() {
     // 设置各个组件的加载状态
     globalLoadingStateManager.setLoadingState('pwa-state', true)
 
-    // 静默检查PWA状态恢复
+    // 静默检查PWA状态恢复，但不能让恢复异常或慢请求挡住应用外壳。
     const pwaController = (window as any).pwaStateController
-    if (pwaController) {
-      await pwaController.waitForStateRestore()
+    if (pwaController?.waitForStateRestore) {
+      await waitForLaunchTask(
+        Promise.resolve().then(() => pwaController.waitForStateRestore()),
+        getRemainingLaunchBudget(),
+        'PWA state restore',
+      )
     }
     globalLoadingStateManager.setLoadingState('pwa-state', false)
 
     // PWA/App 模式会影响布局和底部导航，必须在启动屏退场前稳定下来。
-    await initializePWA()
-    await initializeAuthenticatedState()
+    await waitForLaunchTask(initializePWA(), getRemainingLaunchBudget(), 'PWA detection')
 
-    // 等待所有加载完成
-    await globalLoadingStateManager.waitForAllComplete()
+    // 用户设置不影响首帧布局，交给应用外壳出现后继续加载。
+    void initializeAuthenticatedState().catch(error => {
+      console.warn('[Launch] Authenticated state initialization failed', error)
+    })
+
+    // 快速缓存命中时至少保留短暂的稳定画面，避免 iOS 只闪过一帧。
+    await waitForMinimumLaunchVisibility()
 
     // 移除加载界面
     await animateAndRemoveLoader()
@@ -532,19 +835,43 @@ async function removeLoadingWithStateCheck() {
 }
 
 // 加载背景图片
-async function loadBackgroundImages(retryCount = 0) {
+async function loadBackgroundImages(loadVersion: number, retryCount = 0) {
   const maxRetries = 3
   try {
-    await fetchBackgroundImages()
+    const images = resolveBackgroundCandidateOrder(await fetchBackgroundImages())
+    if (loadVersion !== backgroundLoadVersion) return
+
+    const firstAvailableIndex = await findFirstAvailableBackground({
+      urls: images,
+      canContinue: () => loadVersion === backgroundLoadVersion,
+      preload: preloadBackgroundCandidate,
+    })
+    if (firstAvailableIndex === null) throw new Error('没有可用的登录壁纸')
+    if (loadVersion !== backgroundLoadVersion) return
+
+    const currentImage = activeBackgroundImage.value
+    const currentIndex = images.indexOf(currentImage)
+    if (currentImage && currentIndex < 0) {
+      backgroundImages.value = [currentImage, ...images]
+      activeImageIndex.value = 0
+    } else {
+      backgroundImages.value = images
+      activeImageIndex.value = currentIndex >= 0 ? currentIndex : firstAvailableIndex
+    }
+    backgroundRecoveryAttemptedVersion = -1
+    resetBackgroundCrossfade()
     startBackgroundRotation()
   } catch (error: any) {
+    if (loadVersion !== backgroundLoadVersion) return
     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)
+        if (loadVersion === backgroundLoadVersion) {
+          void loadBackgroundImages(loadVersion, retryCount + 1)
+        }
       }, retryDelay)
     }
   }
@@ -566,7 +893,7 @@ onMounted(async () => {
   updateHtmlThemeAttribute(globalTheme.name.value)
 
   // 初始化主题管理器 - 统一处理主题初始化
-  await themeManager.setTheme(themeValue)
+  await themeManager.setTheme(themeValue === 'auto' ? globalTheme.name.value : themeValue)
   applyStoredThemeCustomizerAppearance(vuetifyTheme)
   updateHtmlThemeAttribute(globalTheme.name.value)
 
@@ -586,24 +913,30 @@ onMounted(async () => {
   document.addEventListener('visibilitychange', handleVisibilityThemeSync)
   window.addEventListener('pageshow', handlePageShowThemeSync)
   window.addEventListener('focus', handlePageShowThemeSync)
-  window.addEventListener('focus', handleWindowFocusRenderThrottle)
-  window.addEventListener('blur', handleWindowBlurRenderThrottle)
   window.addEventListener(TRANSPARENCY_SETTINGS_CHANGED_EVENT, handleTransparencySettingsChanged)
 
-  // 登录页壁纸仅在未登录登录页需要，避免其他首屏额外发起图片列表请求。
+  // 登录前后复用同一壁纸列表和活动项，主题变化只改变呈现方式。
   watch(
     shouldLoadBackgroundImages,
     shouldLoad => {
       stopBackgroundLoading()
       if (shouldLoad) {
-        loadBackgroundImages()
-      } else if (!isTransparentTheme.value) {
+        void loadBackgroundImages(backgroundLoadVersion)
+      } else if (!isBackdropTheme.value) {
         backgroundImages.value = []
       }
     },
     { immediate: true },
   )
 
+  watch(isGlassTheme, enabled => {
+    if (!enabled) return
+
+    void Promise.all(
+      renderedBackgroundLayers.value.filter(layer => layer.url).map(layer => ensureBackgroundToneProfile(layer.url)),
+    )
+  })
+
   // 使用优化后的加载界面移除逻辑
   ensureRenderComplete(() => {
     nextTick(removeLoadingWithStateCheck)
@@ -632,11 +965,11 @@ onMounted(async () => {
 onUnmounted(() => {
   // 清除背景轮换定时器
   stopBackgroundLoading()
+  clearBackgroundRotationGrace()
   if (authenticatedStateTimer) {
     window.clearTimeout(authenticatedStateTimer)
     authenticatedStateTimer = null
   }
-  clearWindowBlurRenderThrottleTimer()
   // 停止心跳
   stopHeartbeat()
   prefersColorSchemeMediaQuery?.removeEventListener('change', handleSystemThemeChange)
@@ -644,36 +977,67 @@ onUnmounted(() => {
   document.removeEventListener('visibilitychange', handleVisibilityThemeSync)
   window.removeEventListener('pageshow', handlePageShowThemeSync)
   window.removeEventListener('focus', handlePageShowThemeSync)
-  window.removeEventListener('focus', handleWindowFocusRenderThrottle)
-  window.removeEventListener('blur', handleWindowBlurRenderThrottle)
   window.removeEventListener(TRANSPARENCY_SETTINGS_CHANGED_EVENT, handleTransparencySettingsChanged)
 })
 </script>
 
 <template>
-  <div class="app-wrapper" :class="{ 'app-wrapper--render-throttled': isRenderThrottled }">
-    <!-- 透明主题背景 -->
+  <div
+    class="app-wrapper"
+    :class="{
+      'app-wrapper--background-transition': isBackgroundCrossfading,
+      'app-wrapper--decorative-motion-paused': !allowsDecorativeMotion,
+      'app-wrapper--login-glass-high': isLoginWallpaperRoute && loginVisualProfile === 'glass',
+      'app-wrapper--login-wallpaper': isLoginWallpaperRoute,
+      'app-wrapper--render-throttled': isRenderThrottled,
+    }"
+    :data-app-activity-state="appActivityState"
+  >
+    <!-- 登录页、透明主题和玻璃主题共用动态壁纸场景。 -->
     <div
-      v-if="backgroundImages.length > 0 && (isTransparentTheme || !isLogin)"
+      v-if="backgroundImages.length > 0 && (isBackdropTheme || !isLogin)"
       class="background-container"
       :class="{
         'is-transparent-theme': shouldUseTransparentBackgroundTreatment,
+        'is-glass-theme': shouldUseGlassBackgroundTreatment,
         'is-transparent-glass-lightweight':
           shouldUseTransparentBackgroundTreatment && transparencyGlassQuality === 'lightweight',
       }"
     >
       <div
-        v-for="(imageUrl, index) in backgroundImages"
-        :key="`bg-${index}-${loginStateKey}`"
+        v-for="layer in renderedBackgroundLayers"
+        :key="layer.key"
         class="background-image"
-        :class="{ 'active': index === activeImageIndex, 'previous': index === previousImageIndex }"
-        :style="{ 'backgroundImage': `url(${imageUrl})` }"
+        :class="layer.role"
+        :style="getBackgroundLayerStyle(layer)"
       />
       <!-- 全局磨砂层 -->
       <div v-if="shouldRenderGlobalBlurLayer" class="global-blur-layer"></div>
     </div>
+    <GlassOpticalLayer
+      v-if="shouldRenderGlassOpticalLayer"
+      :appearance="effectiveGlassSettings.glassAppearance"
+      :deformation-strength="opticalDeformationStrength"
+      :flow-strength="opticalFlowStrength"
+      :quality="opticalQuality === 'high' ? 'high' : 'balanced'"
+      :reflection-strength="opticalReflectionStrength"
+      :transparency-strength="opticalTransparencyStrength"
+      :transmission-strength="opticalTransmissionStrength"
+      :translation-strength="opticalTranslationStrength"
+      :route-key="route.fullPath"
+      :tint-color="globalTheme.current.value.colors.primary"
+      :transition-duration="BACKGROUND_CROSSFADE_DURATION_MS"
+      :transition-started-at="backgroundCrossfadeStartedAt"
+      :wallpaper-url="activeOpticalBackgroundImage"
+      :previous-wallpaper-url="previousOpticalBackgroundImage"
+      :pending-wallpaper-url="pendingOpticalBackgroundImage"
+      @wallpaper-prepared="handleOpticalWallpaperPrepared"
+    />
     <!-- 页面内容 -->
-    <VApp :class="{ 'app-shell--login-wallpaper': isLoginWallpaperRoute }">
+    <VApp
+      :class="{ 'app-shell--login-wallpaper': isLoginWallpaperRoute }"
+      :data-login-visual-profile="isLoginWallpaperRoute ? loginVisualProfile : undefined"
+    >
       <RouterView />
       <!-- 全局共享弹窗入口，列表与卡片按需在这里挂载业务弹窗。 -->
       <SharedDialogHost />
@@ -701,6 +1065,14 @@ onUnmounted(() => {
   inset-inline-start: 0;
 }
 
+// 登录内容与壁纸进入同一文档弹性合成上下文；sticky 仍保持普通滚动时的 viewport 锁定。
+.app-wrapper--login-wallpaper .background-container {
+  position: sticky;
+  block-size: 100dvh;
+  margin-block-end: -100dvh;
+  inset-block-start: 0;
+}
+
 .background-image {
   position: absolute;
   background-position: center;
@@ -737,6 +1109,52 @@ onUnmounted(() => {
   opacity: var(--transparent-background-poster-opacity, 1);
 }
 
+.background-container.is-glass-theme .background-image.active,
+.background-container.is-glass-theme .background-image.previous {
+  filter: brightness(var(--glass-wallpaper-brightness, 0.86)) saturate(0.95) contrast(1.02);
+}
+
+.background-container.is-glass-theme .background-image.active {
+  opacity: 0.94;
+}
+
+.background-container.is-glass-theme .background-image.active::after,
+.background-container.is-glass-theme .background-image.previous::after {
+  background:
+    radial-gradient(circle at 50% 18%, transparent 24%, rgba(6, 10, 19, 12%) 100%),
+    linear-gradient(rgba(6, 10, 19, 10%) 0%, rgba(6, 10, 19, 30%) 100%);
+}
+
+html[data-glass-appearance='tinted'] .background-container.is-glass-theme .background-image.active,
+html[data-glass-appearance='tinted'] .background-container.is-glass-theme .background-image.previous {
+  filter: brightness(var(--glass-wallpaper-brightness, 0.85)) saturate(0.97) contrast(1.02);
+}
+
+html[data-glass-appearance='tinted'] .background-container.is-glass-theme .background-image.active {
+  opacity: 0.93;
+}
+
+html[data-glass-appearance='tinted'] .background-container.is-glass-theme .background-image.active::after,
+html[data-glass-appearance='tinted'] .background-container.is-glass-theme .background-image.previous::after {
+  background:
+    radial-gradient(circle at 50% 18%, transparent 22%, rgba(6, 10, 19, 14%) 100%),
+    linear-gradient(rgba(6, 10, 19, 10%) 0%, rgba(6, 10, 19, 32%) 100%), rgba(var(--v-theme-primary), 3%);
+}
+
+html[data-glass-appearance='frosted'] .background-container.is-glass-theme .background-image.active,
+html[data-glass-appearance='frosted'] .background-container.is-glass-theme .background-image.previous {
+  filter: brightness(var(--glass-wallpaper-brightness, 0.82)) saturate(0.9);
+}
+
+html[data-glass-appearance='frosted'] .background-container.is-glass-theme .background-image.active {
+  opacity: 0.92;
+}
+
+html[data-glass-appearance='frosted'] .background-container.is-glass-theme .background-image.active::after,
+html[data-glass-appearance='frosted'] .background-container.is-glass-theme .background-image.previous::after {
+  background: linear-gradient(rgba(6, 10, 19, 24%) 0%, rgba(6, 10, 19, 48%) 100%), rgba(11, 19, 34, 8%);
+}
+
 .background-container.is-transparent-glass-lightweight .background-image.active,
 .background-container.is-transparent-glass-lightweight .background-image.previous {
   filter: blur(var(--transparent-background-blur, 16px));
@@ -745,9 +1163,7 @@ onUnmounted(() => {
 
 .background-container.is-transparent-glass-lightweight .background-image.active::after,
 .background-container.is-transparent-glass-lightweight .background-image.previous::after {
-  background:
-    linear-gradient(rgba(0, 0, 0, 30%) 0%, rgba(0, 0, 0, 60%) 100%),
-    rgba(128, 128, 128, 30%);
+  background: linear-gradient(rgba(0, 0, 0, 30%) 0%, rgba(0, 0, 0, 60%) 100%), rgba(128, 128, 128, 30%);
 }
 
 /* 全局磨砂层 */
@@ -766,14 +1182,15 @@ onUnmounted(() => {
   .global-blur-layer {
     backdrop-filter: none;
   }
+}
 
-  .login-bg-decor *,
+.app-wrapper--decorative-motion-paused {
+  .login-ambient-light *,
   .login-logo,
   .login-logo-wrapper,
   .login-logo-wrapper::before,
   .login-title,
-  .login-subtitle,
-  .agent-assistant-fab * {
+  .login-subtitle {
     animation-play-state: paused !important;
   }
 }

src/__tests__/ace-config.spec.ts

@@ -0,0 +1,62 @@
+import ace from 'ace-builds'
+import { describe, expect, it } from 'vitest'
+import '@/ace-config'
+
+interface AceToken {
+  type: string
+  value: string
+}
+
+interface WordListSyntaxMode {
+  getTokenizer: () => {
+    getLineTokens: (line: string, state: string) => { tokens: AceToken[] }
+  }
+}
+
+const WordListSyntaxMode = ace.require('ace/mode/word_list_syntax').Mode as new () => WordListSyntaxMode
+const tokenizer = new WordListSyntaxMode().getTokenizer()
+
+function tokenize(line: string) {
+  return tokenizer.getLineTokens(line, 'start').tokens
+}
+
+describe('word list syntax mode', () => {
+  it('highlights a block word as one field', () => {
+    expect(tokenize('屏蔽词')).toEqual([{ type: 'word_list_block', value: '屏蔽词' }])
+  })
+
+  it('separates replaced and replacement fields without parsing their content', () => {
+    expect(tokenize('旧名.* => 新名 {[tmdbid=123;type=tv]}')).toEqual([
+      { type: 'word_list_replaced', value: '旧名.*' },
+      { type: 'keyword.operator.word-list', value: ' => ' },
+      { type: 'word_list_replacement', value: '新名 {[tmdbid=123;type=tv]}' },
+    ])
+  })
+
+  it('separates front, back, and episode offset fields', () => {
+    expect(tokenize('第 <> 集 >> EP+1')).toEqual([
+      { type: 'word_list_front', value: '第' },
+      { type: 'keyword.operator.word-list', value: ' <> ' },
+      { type: 'word_list_back', value: '集' },
+      { type: 'keyword.operator.word-list', value: ' >> ' },
+      { type: 'word_list_offset', value: 'EP+1' },
+    ])
+  })
+
+  it('uses all six field types in combined and standalone rules', () => {
+    const combinedTokens = tokenize('旧名 => 新名 && 第 <> 集 >> 2*EP-1')
+
+    expect(combinedTokens).toEqual([
+      { type: 'word_list_replaced', value: '旧名' },
+      { type: 'keyword.operator.word-list', value: ' => ' },
+      { type: 'word_list_replacement', value: '新名' },
+      { type: 'keyword.operator.word-list', value: ' && ' },
+      { type: 'word_list_front', value: '第' },
+      { type: 'keyword.operator.word-list', value: ' <> ' },
+      { type: 'word_list_back', value: '集' },
+      { type: 'keyword.operator.word-list', value: ' >> ' },
+      { type: 'word_list_offset', value: '2*EP-1' },
+    ])
+    expect(tokenize('屏蔽词')[0].type).toBe('word_list_block')
+  })
+})

src/ace-config.ts

@@ -70,7 +70,7 @@ function registerJinja2Mode() {
           '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__'
+          'title|en_title|original_title|season|season_fmt|year|title_year|type|category|vote_average|poster|backdrop|season_year|actors|overview|tmdbid|imdbid|doubanid|bangumiid|anilistid|media_source|media_id|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(
           {
@@ -282,7 +282,7 @@ function registerJinja2Mode() {
           '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__'
+          'title|en_title|original_title|season|season_fmt|year|title_year|type|category|vote_average|poster|backdrop|season_year|actors|overview|tmdbid|imdbid|doubanid|bangumiid|anilistid|media_source|media_id|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(
           {
@@ -578,6 +578,90 @@ function registerWordListMode() {
       exports.Mode = Mode
     },
   )
+
+  aceModule.define?.(
+    'ace/mode/word_list_syntax_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 WordListSyntaxHighlightRules = function (this: any) {
+        this.$rules = {
+          start: [
+            {
+              token: 'comment.word-list',
+              regex: /^#.*/,
+            },
+            {
+              token: [
+                'text',
+                'word_list_replaced',
+                'keyword.operator.word-list',
+                'word_list_replacement',
+                'keyword.operator.word-list',
+                'word_list_front',
+                'keyword.operator.word-list',
+                'word_list_back',
+                'keyword.operator.word-list',
+                'word_list_offset',
+                'text',
+              ],
+              regex: /^(\s*)(.*?)( +=> +)(.*?)( +&& +)(.*?)( +<> +)(.*?)( +>> +)(.*?)(\s*)$/,
+            },
+            {
+              token: ['text', 'word_list_replaced', 'keyword.operator.word-list', 'word_list_replacement', 'text'],
+              regex: /^(\s*)(.*?)( +=> +)(.*?)(\s*)$/,
+            },
+            {
+              token: [
+                'text',
+                'word_list_front',
+                'keyword.operator.word-list',
+                'word_list_back',
+                'keyword.operator.word-list',
+                'word_list_offset',
+                'text',
+              ],
+              regex: /^(\s*)(.*?)( +<> +)(.*?)( +>> +)(.*?)(\s*)$/,
+            },
+            {
+              token: ['text', 'word_list_block', 'text'],
+              regex: /^(\s*)(\S(?:.*?\S)?)(\s*)$/,
+            },
+          ],
+        }
+
+        this.normalizeRules()
+      }
+
+      oop.inherits(WordListSyntaxHighlightRules, TextHighlightRules)
+      exports.WordListSyntaxHighlightRules = WordListSyntaxHighlightRules
+    },
+  )
+
+  aceModule.define?.(
+    'ace/mode/word_list_syntax',
+    ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/word_list_syntax_highlight_rules'],
+    (require: any, exports: any) => {
+      const oop = require('../lib/oop')
+      const TextMode = require('./text').Mode
+      const WordListSyntaxHighlightRules = require('./word_list_syntax_highlight_rules').WordListSyntaxHighlightRules
+
+      const Mode = function (this: any) {
+        TextMode.call(this)
+        this.HighlightRules = WordListSyntaxHighlightRules
+      }
+
+      oop.inherits(Mode, TextMode)
+
+      ;(function (this: any) {
+        this.$id = 'ace/mode/word_list_syntax'
+      }).call(Mode.prototype)
+
+      exports.Mode = Mode
+    },
+  )
 }
 
 ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)

src/api/types.ts

@@ -1,3 +1,15 @@
+export type MediaDataSource = 'themoviedb' | 'douban' | 'bangumi' | 'anilist' | (string & {})
+
+// 手动刮削选项
+export interface ManualScrapeOptions {
+  // 媒体数据源
+  media_source: MediaDataSource
+  // 数据源原生ID
+  media_id?: string
+  // 媒体类型
+  type_name?: string
+}
+
 // 订阅
 export interface Subscribe {
   // 订阅ID
@@ -15,7 +27,13 @@ export interface Subscribe {
   // 豆瓣ID
   doubanid?: string
   // Bangumi ID
-  bangumiid?: string
+  bangumiid?: number
+  // AniList ID
+  anilistid?: number
+  // 主媒体数据源
+  media_source?: MediaDataSource
+  // 数据源原生ID
+  media_id?: string
   // 其它媒体ID
   mediaid?: string
   // 季号
@@ -114,6 +132,14 @@ export interface SubscribeShare {
   tmdbid?: number
   // 豆瓣ID
   doubanid?: string
+  // Bangumi ID
+  bangumiid?: number
+  // AniList ID
+  anilistid?: number
+  // 主媒体数据源
+  media_source?: MediaDataSource
+  // 数据源原生ID
+  media_id?: string
   // 季号
   season?: number
   // 海报
@@ -216,6 +242,14 @@ export interface TransferHistory {
   tvdbid?: number
   // 豆瓣ID
   doubanid?: string
+  // Bangumi ID
+  bangumiid?: number
+  // AniList ID
+  anilistid?: number
+  // 媒体数据源
+  media_source?: MediaDataSource
+  // 数据源原生ID
+  media_id?: string
   // 季Sxx
   seasons?: string
   // 集Exx
@@ -236,7 +270,7 @@ export interface TransferHistory {
 
 // 媒体信息
 export interface MediaInfo {
-  // 来源：themoviedb、douban、bangumi
+  // 来源：themoviedb、douban、bangumi、anilist
   source?: string
   // 类型 电影、电视剧、合集
   type?: string
@@ -257,7 +291,11 @@ export interface MediaInfo {
   // 豆瓣ID
   douban_id?: string
   // Bangumi ID
-  bangumi_id?: string
+  bangumi_id?: string | number
+  // AniList ID
+  anilist_id?: number
+  // AniDB ID
+  anidb_id?: number
   // 合集ID
   collection_id?: number
   // 其它媒体ID前缀
@@ -414,7 +452,7 @@ export interface TmdbEpisode {
 
 // TMDB人物信息
 export interface Person {
-  // 来源：themoviedb、douban、bangumi
+  // 来源：themoviedb、douban、bangumi、anilist
   source?: string
   // ID
   id?: number
@@ -962,7 +1000,7 @@ export interface User {
   is_superuser: boolean
   // 头像
   avatar: string
-  // 是否开启双重验证
+  // 是否开启二次验证
   is_otp: boolean
   // 用户权限 json
   permissions: { [key: string]: any }
@@ -1351,6 +1389,8 @@ export interface MediaServerConf {
   enabled: boolean
   // 同步媒体体库列表
   sync_libraries?: string[]
+  // 自动同步间隔（小时），为空时使用旧全局配置
+  sync_interval?: number | null
 }
 
 // 文件整理目录配置
@@ -1511,6 +1551,14 @@ export interface TransferForm {
   tmdbid?: number
   // 豆瓣 ID
   doubanid?: string
+  // Bangumi ID
+  bangumiid?: number
+  // AniList ID
+  anilistid?: number
+  // 媒体数据源
+  media_source?: MediaDataSource
+  // 数据源原生ID
+  media_id?: string | null
   // 季号
   season?: number
   // 类型
@@ -1539,6 +1587,8 @@ export interface TransferForm {
   episode_group?: string | null
   // 预览模式
   preview?: boolean
+  // 清理已有成功记录后重新整理
+  reorganize: boolean
 }
 
 // 手动整理请求
@@ -1565,6 +1615,14 @@ export interface ManualTransferTargetPathData {
   library_category_folder?: boolean | null
 }
 
+// 手动整理命中的成功历史摘要
+export interface ManualTransferHistoryInfo {
+  // 是否应执行重新整理
+  reorganize: boolean
+  // 命中的成功历史数量
+  history_count: number
+}
+
 // 手动整理预览统计
 export interface ManualTransferPreviewSummary {
   // 总数

src/components/agent/AgentAssistantEntry.vue

@@ -35,10 +35,13 @@ interface AgentAssistantEntryBubbleInput {
 const props = withDefaults(
   defineProps<{
     active?: boolean
+    /** 是否允许入口的随机动作、指针跟随和自动贴边，不影响 thinking 等业务状态。 */
+    motionActive?: boolean
     thinking?: boolean
   }>(),
   {
     active: true,
+    motionActive: true,
     thinking: false,
   },
 )
@@ -214,7 +217,7 @@ const {
   playAction: playAgentPetAction,
   scheduleRandomAction: scheduleFabRandomAction,
 } = useAgentPetMachine({
-  active: () => props.active,
+  active: () => props.active && props.motionActive,
   docked: fabDocked,
   dragging: fabDragging,
   pressed: fabPressed,
@@ -237,8 +240,7 @@ function getViewportSize() {
 
   // 取布局视口和可见视口的较小值，避免两者短暂不同步时把入口计算到屏幕外。
   return {
-    height:
-      visualHeight > 0 && layoutHeight > 0 ? Math.min(visualHeight, layoutHeight) : visualHeight || layoutHeight,
+    height: visualHeight > 0 && layoutHeight > 0 ? Math.min(visualHeight, layoutHeight) : visualHeight || layoutHeight,
     width: visualWidth > 0 && layoutWidth > 0 ? Math.min(visualWidth, layoutWidth) : visualWidth || layoutWidth,
   }
 }
@@ -826,17 +828,18 @@ function updateFabPointerFromPoint(point: FabPointerPoint) {
 
 // 使用 requestAnimationFrame 合并高频指针事件，降低全局跟随的渲染开销。
 function queueFabPointerUpdate(clientX: number, clientY: number) {
-  if (!props.active) return
+  if (!props.active || !props.motionActive) return
 
   fabPendingPointerPoint = { clientX, clientY }
   if (fabPointerFrame) return
 
   fabPointerFrame = window.requestAnimationFrame(() => {
     fabPointerFrame = 0
-    if (!fabPendingPointerPoint) return
-
-    updateFabPointerFromPoint(fabPendingPointerPoint)
+    const point = fabPendingPointerPoint
     fabPendingPointerPoint = null
+    if (!point || !props.active || !props.motionActive) return
+
+    updateFabPointerFromPoint(point)
   })
 }
 
@@ -850,22 +853,6 @@ function updateFabPointer(event: PointerEvent) {
   queueFabPointerUpdate(event.clientX, event.clientY)
 }
 
-// 重置机器人按压状态和眼神跟随位移。
-function resetFabPointer() {
-  fabPressed.value = false
-  fabPointerStyle.value = {
-    '--agent-assistant-body-x': '0px',
-    '--agent-assistant-body-y': '0px',
-    '--agent-assistant-eye-x': '0px',
-    '--agent-assistant-eye-y': '0px',
-    '--agent-assistant-head-x': '0px',
-    '--agent-assistant-head-y': '0px',
-    '--agent-assistant-pointer-x': '0px',
-    '--agent-assistant-pointer-y': '0px',
-    '--agent-assistant-robot-tilt': '0deg',
-  }
-}
-
 // 清理入口自动贴边计时器。
 function clearFabIdleTimer() {
   if (fabIdleTimer === null) return
@@ -895,11 +882,20 @@ function suppressNextFabClick() {
 // 在入口靠近右侧边缘且空闲时安排自动贴边收起。
 function scheduleFabAutoDock() {
   clearFabIdleTimer()
-  if (fabDocked.value || hasKeepOpenFabBubbles.value || fabRandomAction.value || !shouldFabAutoDock()) return
+  if (
+    !props.active ||
+    !props.motionActive ||
+    fabDocked.value ||
+    hasKeepOpenFabBubbles.value ||
+    fabRandomAction.value ||
+    !shouldFabAutoDock()
+  )
+    return
 
   fabIdleTimer = window.setTimeout(() => {
     fabIdleTimer = null
-    if (fabDocked.value || hasKeepOpenFabBubbles.value || !shouldFabAutoDock()) return
+    if (!props.active || !props.motionActive || fabDocked.value || hasKeepOpenFabBubbles.value || !shouldFabAutoDock())
+      return
 
     if (fabRandomAction.value) {
       scheduleFabAutoDock()
@@ -915,14 +911,36 @@ function pauseFabAutoDock() {
   clearFabIdleTimer()
 }
 
-// 取消挂起的全局指针帧并移除监听器。
-function teardownFabPointerTracking() {
+// 取消挂起的全局指针帧，避免状态切换后迟到回调重新写入位移。
+function cancelFabPointerUpdate() {
   if (fabPointerFrame) {
     window.cancelAnimationFrame(fabPointerFrame)
     fabPointerFrame = 0
   }
 
   fabPendingPointerPoint = null
+}
+
+// 重置机器人按压状态和眼神跟随位移。
+function resetFabPointer() {
+  cancelFabPointerUpdate()
+  fabPressed.value = false
+  fabPointerStyle.value = {
+    '--agent-assistant-body-x': '0px',
+    '--agent-assistant-body-y': '0px',
+    '--agent-assistant-eye-x': '0px',
+    '--agent-assistant-eye-y': '0px',
+    '--agent-assistant-head-x': '0px',
+    '--agent-assistant-head-y': '0px',
+    '--agent-assistant-pointer-x': '0px',
+    '--agent-assistant-pointer-y': '0px',
+    '--agent-assistant-robot-tilt': '0deg',
+  }
+}
+
+// 取消挂起的全局指针帧并移除监听器。
+function teardownFabPointerTracking() {
+  cancelFabPointerUpdate()
   window.removeEventListener('pointermove', handleGlobalFabPointer)
   window.removeEventListener('pointerdown', handleGlobalFabPointer)
 }
@@ -1432,6 +1450,19 @@ watch(
   },
 )
 
+watch(
+  () => props.motionActive,
+  motionActive => {
+    if (motionActive) {
+      if (props.active && shouldFabAutoDock()) scheduleFabAutoDock()
+      return
+    }
+
+    clearFabIdleTimer()
+    resetFabPointer()
+  },
+)
+
 onScopeDispose(clearFabIdleTimer)
 onScopeDispose(clearFabSuppressNextClickTimer)
 onScopeDispose(resetFabBubbles)
@@ -1752,12 +1783,8 @@ defineExpose({
 
 .agent-assistant-fab__bubbles--arrow-notification::before {
   --agent-assistant-bubble-arrow-border: rgba(var(--v-theme-primary), 0.22);
-  --agent-assistant-bubble-arrow-bg: linear-gradient(
-      135deg,
-      rgba(var(--v-theme-primary), 0.1),
-      transparent 48%
-    ),
-    rgba(var(--v-theme-surface), 0.94);
+  --agent-assistant-bubble-arrow-bg:
+    linear-gradient(135deg, rgba(var(--v-theme-primary), 0.1), transparent 48%), rgba(var(--v-theme-surface), 0.94);
 }
 
 .agent-assistant-fab__bubbles--arrow-success::before {
@@ -1778,11 +1805,8 @@ defineExpose({
 
 .agent-assistant-fab__bubbles--arrow-toast::before {
   --agent-assistant-bubble-arrow-border: rgba(var(--agent-assistant-bubble-arrow-accent-rgb), 0.3);
-  --agent-assistant-bubble-arrow-bg: linear-gradient(
-      135deg,
-      rgba(var(--agent-assistant-bubble-arrow-accent-rgb), 0.12),
-      transparent 54%
-    ),
+  --agent-assistant-bubble-arrow-bg:
+    linear-gradient(135deg, rgba(var(--agent-assistant-bubble-arrow-accent-rgb), 0.12), transparent 54%),
     rgba(var(--v-theme-surface), 0.95);
 }
 

src/components/agent/AgentAssistantPanel.vue

@@ -158,9 +158,12 @@ const userStore = useUserStore()
 const props = withDefaults(
   defineProps<{
     modelValue?: boolean
+    /** 是否允许面板的装饰性动效，不影响消息流、thinking 或输入反馈。 */
+    motionActive?: boolean
   }>(),
   {
     modelValue: false,
+    motionActive: true,
   },
 )
 
@@ -211,13 +214,11 @@ let pendingMessageScrollToBottom = false
 let streamPersistTimer: number | null = null
 let userAbortRequested = false
 let streamRecoveryTimer: number | null = null
-let pendingStreamRecovery:
-  | {
-      sessionId: string
-      startedAt: number
-      attempts: number
-    }
-  | null = null
+let pendingStreamRecovery: {
+  sessionId: string
+  startedAt: number
+  attempts: number
+} | null = null
 
 const md = new MarkdownIt({
   html: true,
@@ -250,12 +251,11 @@ const filteredSlashCommands = computed(() => {
   const query = slashCommandQuery.value
   if (!query) return slashCommands.value
 
-  return slashCommands.value
-    .filter(command => {
-      const haystack = `${command.command} ${command.description} ${command.category || ''}`.toLowerCase()
+  return slashCommands.value.filter(command => {
+    const haystack = `${command.command} ${command.description} ${command.category || ''}`.toLowerCase()
 
-      return haystack.includes(query)
-    })
+    return haystack.includes(query)
+  })
 })
 // 判断是否展示命令建议浮层。
 const showSlashCommandMenu = computed(
@@ -1956,6 +1956,7 @@ onScopeDispose(() => {
   <aside
     v-show="isOpen"
     class="agent-assistant-panel"
+    :class="{ 'is-motion-paused': !props.motionActive, 'is-open': isOpen }"
     :style="drawerStyle"
     role="dialog"
     :aria-label="t('agentAssistant.title')"
@@ -2515,13 +2516,16 @@ onScopeDispose(() => {
   position: absolute;
   display: block;
   border-radius: 0 0 999px 999px;
-  animation: agent-fab-blink 4.8s ease-in-out infinite;
   block-size: 0.24rem;
   border-block-end: 0.1rem solid var(--agent-assistant-mini-robot-eye);
   inline-size: 0.22rem;
   inset-block-start: 0.16rem;
 }
 
+.agent-assistant-panel.is-open:not(.is-motion-paused) .agent-assistant-mini-bot__eye {
+  animation: agent-fab-blink 4.8s ease-in-out 1;
+}
+
 .agent-assistant-mini-bot__eye--left {
   inset-inline-start: 0.22rem;
 }

src/components/agent/AgentAssistantWidget.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import AgentAssistantEntry from './AgentAssistantEntry.vue'
 import AgentAssistantPanel from './AgentAssistantPanel.vue'
+import { useAppActivityLifecycle } from '@/composables/useAppActivityLifecycle'
 
 type AgentAssistantEntryRef = InstanceType<typeof AgentAssistantEntry>
 
 const panelOpen = ref(false)
 const thinking = ref(false)
 const entryRef = ref<AgentAssistantEntryRef | null>(null)
+const { allowsDecorativeMotion } = useAppActivityLifecycle()
 
 // 打开 Agent 面板并清空入口预览气泡。
 function openPanel() {
@@ -23,6 +25,17 @@ function handleAssistantPreview(value: string) {
 </script>
 
 <template>
-  <AgentAssistantEntry ref="entryRef" :active="!panelOpen" :thinking="thinking" @open="openPanel" />
-  <AgentAssistantPanel v-model="panelOpen" @assistant-preview="handleAssistantPreview" @thinking-change="thinking = $event" />
+  <AgentAssistantEntry
+    ref="entryRef"
+    :active="!panelOpen"
+    :motion-active="allowsDecorativeMotion"
+    :thinking="thinking"
+    @open="openPanel"
+  />
+  <AgentAssistantPanel
+    v-model="panelOpen"
+    :motion-active="allowsDecorativeMotion"
+    @assistant-preview="handleAssistantPreview"
+    @thinking-change="thinking = $event"
+  />
 </template>

src/components/agent/__tests__/AgentAssistantEntry.spec.ts

@@ -0,0 +1,71 @@
+import { shallowMount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import AgentAssistantEntry from '@/components/agent/AgentAssistantEntry.vue'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+describe('AgentAssistantEntry lifecycle motion', () => {
+  let animationFrameCallbacks: Map<number, FrameRequestCallback>
+  let nextAnimationFrameId: number
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    animationFrameCallbacks = new Map()
+    nextAnimationFrameId = 1
+    vi.stubGlobal(
+      'requestAnimationFrame',
+      vi.fn((callback: FrameRequestCallback) => {
+        const id = nextAnimationFrameId++
+        animationFrameCallbacks.set(id, callback)
+        return id
+      }),
+    )
+    vi.stubGlobal(
+      'cancelAnimationFrame',
+      vi.fn((id: number) => {
+        animationFrameCallbacks.delete(id)
+      }),
+    )
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('cancels pointer frames and auto-dock timers when decorative motion stops', async () => {
+    const wrapper = shallowMount(AgentAssistantEntry, {
+      global: {
+        stubs: {
+          AgentPetStage: true,
+          VIcon: true,
+        },
+      },
+      props: {
+        active: true,
+        motionActive: true,
+      },
+    })
+    await nextTick()
+
+    const pointerEvent = new Event('pointermove')
+    Object.assign(pointerEvent, { clientX: 480, clientY: 320 })
+    const frameCountBeforePointer = animationFrameCallbacks.size
+    window.dispatchEvent(pointerEvent)
+    const pointerFrameId = nextAnimationFrameId - 1
+
+    expect(animationFrameCallbacks.size).toBe(frameCountBeforePointer + 1)
+    expect(vi.getTimerCount()).toBeGreaterThanOrEqual(2)
+
+    await wrapper.setProps({ motionActive: false })
+    await nextTick()
+
+    expect(cancelAnimationFrame).toHaveBeenCalledWith(pointerFrameId)
+    expect(animationFrameCallbacks.has(pointerFrameId)).toBe(false)
+    expect(vi.getTimerCount()).toBe(0)
+
+    wrapper.unmount()
+  })
+})

src/components/agent/pet/__tests__/useAgentPetMachine.spec.ts

@@ -0,0 +1,58 @@
+import { effectScope, nextTick, ref } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { AGENT_PET_RANDOM_ACTION_MIN_DELAY } from '../agentPetActions'
+import { useAgentPetMachine } from '../useAgentPetMachine'
+
+describe('useAgentPetMachine', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.spyOn(Math, 'random').mockReturnValue(0)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('runs finite random actions and clears the queue when decorative motion stops', async () => {
+    const active = ref(true)
+    const docked = ref(false)
+    const dragging = ref(false)
+    const pressed = ref(false)
+    const thinking = ref(false)
+    const scope = effectScope()
+    const machine = scope.run(() =>
+      useAgentPetMachine({
+        active,
+        docked,
+        dragging,
+        pressed,
+        scheduleAutoDock: vi.fn(),
+        shouldAutoDock: () => false,
+        thinking,
+      }),
+    )
+
+    expect(machine).toBeDefined()
+
+    machine?.scheduleRandomAction()
+    vi.advanceTimersByTime(AGENT_PET_RANDOM_ACTION_MIN_DELAY)
+
+    expect(machine?.currentAction.value).toBe('wave')
+
+    active.value = false
+    await nextTick()
+
+    expect(machine?.currentAction.value).toBeNull()
+    expect(vi.getTimerCount()).toBe(0)
+
+    active.value = true
+    await nextTick()
+    vi.advanceTimersByTime(AGENT_PET_RANDOM_ACTION_MIN_DELAY)
+
+    expect(machine?.currentAction.value).not.toBeNull()
+
+    scope.stop()
+    expect(vi.getTimerCount()).toBe(0)
+  })
+})

src/components/agent/pet/renderers/cssRobotBase.scss

@@ -27,7 +27,6 @@
   z-index: 3;
   display: block;
   border-radius: 999px;
-  animation: agent-fab-antenna-idle 3.9s ease-in-out infinite;
   background: var(--agent-assistant-robot-outline);
   block-size: 0.66rem;
   inline-size: 0.18rem;
@@ -58,7 +57,6 @@
   display: block;
   border: 2px solid var(--agent-assistant-robot-outline);
   border-radius: 11px;
-  animation: agent-fab-head-idle 4.6s ease-in-out infinite;
   background: linear-gradient(
     145deg,
     var(--agent-assistant-robot-shell-start) 0%,
@@ -97,7 +95,6 @@
   position: absolute;
   display: block;
   border-radius: 0 0 999px 999px;
-  animation: agent-fab-blink 4.8s ease-in-out infinite;
   block-size: 0.42rem;
   border-block-end: 0.15rem solid var(--agent-assistant-robot-eye);
   inline-size: 0.42rem;
@@ -136,7 +133,6 @@
   display: block;
   border: 2px solid var(--agent-assistant-robot-outline);
   border-radius: 0.65rem 0.65rem 0.55rem 0.55rem;
-  animation: agent-fab-body-idle 4.2s ease-in-out infinite;
   background: linear-gradient(
     145deg,
     var(--agent-assistant-robot-shell-mid) 0%,
@@ -204,14 +200,12 @@
 }
 
 .agent-assistant-fab__arm--left {
-  animation: agent-fab-arm-left-idle 3.8s ease-in-out infinite;
   inset-inline-start: 0.9rem;
   transform: rotate(17deg);
   transform-origin: top center;
 }
 
 .agent-assistant-fab__arm--right {
-  animation: agent-fab-arm-right-idle 4.1s ease-in-out infinite;
   inset-inline-start: 3.08rem;
   transform: rotate(-17deg);
   transform-origin: top center;
@@ -225,13 +219,11 @@
 }
 
 .agent-assistant-fab__leg--left {
-  animation: agent-fab-leg-left-idle 4.8s ease-in-out infinite;
   inset-inline-start: 1.48rem;
   transform-origin: top center;
 }
 
 .agent-assistant-fab__leg--right {
-  animation: agent-fab-leg-right-idle 4.8s ease-in-out 0.35s infinite;
   inset-inline-start: 2.46rem;
   transform-origin: top center;
 }
@@ -257,8 +249,7 @@
 }
 
 .agent-assistant-fab__trigger:focus-visible .agent-assistant-fab__bot {
-  filter:
-    drop-shadow(0 0.55rem 0.55rem var(--agent-assistant-robot-shadow))
+  filter: drop-shadow(0 0.55rem 0.55rem var(--agent-assistant-robot-shadow))
     drop-shadow(0 0 0.34rem rgba(var(--v-theme-primary), 0.55));
 }
 
@@ -315,83 +306,6 @@
   transform: translate(0.34rem, 0.02rem) rotate(2deg) scale(0.82);
 }
 
-@keyframes agent-fab-head-idle {
-  0%,
-  100% {
-    transform: translate(var(--agent-assistant-head-x), var(--agent-assistant-head-y)) rotate(0deg);
-  }
-
-  50% {
-    transform: translate(var(--agent-assistant-head-x), calc(var(--agent-assistant-head-y) - 0.06rem)) rotate(-1.8deg);
-  }
-}
-
-@keyframes agent-fab-body-idle {
-  0%,
-  100% {
-    transform: translate(var(--agent-assistant-body-x), var(--agent-assistant-body-y)) scaleY(1);
-  }
-
-  50% {
-    transform: translate(var(--agent-assistant-body-x), calc(var(--agent-assistant-body-y) + 0.04rem)) scaleY(0.97);
-  }
-}
-
-@keyframes agent-fab-antenna-idle {
-  0%,
-  100% {
-    transform: translate(var(--agent-assistant-head-x), var(--agent-assistant-head-y)) rotate(22deg);
-  }
-
-  50% {
-    transform: translate(var(--agent-assistant-head-x), var(--agent-assistant-head-y)) rotate(15deg);
-  }
-}
-
-@keyframes agent-fab-arm-left-idle {
-  0%,
-  100% {
-    transform: rotate(17deg);
-  }
-
-  50% {
-    transform: rotate(12deg) translateY(0.05rem);
-  }
-}
-
-@keyframes agent-fab-arm-right-idle {
-  0%,
-  100% {
-    transform: rotate(-17deg);
-  }
-
-  50% {
-    transform: rotate(-11deg) translateY(0.05rem);
-  }
-}
-
-@keyframes agent-fab-leg-left-idle {
-  0%,
-  100% {
-    transform: rotate(0deg);
-  }
-
-  50% {
-    transform: rotate(4deg) translateY(0.03rem);
-  }
-}
-
-@keyframes agent-fab-leg-right-idle {
-  0%,
-  100% {
-    transform: rotate(0deg);
-  }
-
-  50% {
-    transform: rotate(-4deg) translateY(0.03rem);
-  }
-}
-
 @keyframes agent-fab-core-pulse {
   0%,
   100% {

src/components/auth/LoginMfaStep.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { MfaMethod } from '@/types/auth'
+
+interface Props {
+  /** 当前验证步骤的错误信息。 */
+  errorMessage: string
+  /** 密码验证通过后服务端声明的可用方式。 */
+  methods: MfaMethod[]
+  /** OTP 提交状态。 */
+  otpLoading: boolean
+  /** 当前输入的 OTP。 */
+  otpPassword: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (event: 'back'): void
+  (event: 'otp'): void
+  (event: 'update:otpPassword', value: string): void
+}>()
+
+const { t } = useI18n()
+const hasOtp = computed(() => props.methods.includes('otp'))
+</script>
+
+<template>
+  <section class="mfa-step" :class="{ 'mfa-step--unavailable': !hasOtp }" aria-labelledby="mfa-step-title">
+    <header class="mfa-step__header">
+      <VBtn
+        data-testid="mfa-back"
+        icon="mdi-arrow-left"
+        size="small"
+        variant="text"
+        :aria-label="t('login.mfa.back')"
+        :disabled="props.otpLoading"
+        @click="emit('back')"
+      />
+      <div>
+        <h2 id="mfa-step-title" class="mfa-step__title">{{ t('login.secondaryVerification') }}</h2>
+      </div>
+    </header>
+
+    <form v-if="hasOtp" data-testid="mfa-otp-form" class="mfa-step__method" @submit.prevent="emit('otp')">
+      <p class="mfa-step__description">{{ t('login.mfa.otpPrompt') }}</p>
+      <div class="mfa-step__field">
+        <VIcon icon="mdi-shield-key" class="mfa-step__field-icon" aria-hidden="true" />
+        <input
+          :value="props.otpPassword"
+          class="mfa-step__input"
+          type="text"
+          name="otp"
+          autocomplete="one-time-code"
+          inputmode="numeric"
+          maxlength="6"
+          :placeholder="t('login.otpCode')"
+          :aria-label="t('login.otpCode')"
+          autofocus
+          :disabled="props.otpLoading"
+          @input="emit('update:otpPassword', ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+      <VBtn
+        block
+        type="submit"
+        color="primary"
+        class="mfa-step__submit"
+        prepend-icon="mdi-login"
+        :loading="props.otpLoading"
+        :disabled="!props.otpPassword"
+      >
+        {{ t('login.loginWithOtp') }}
+      </VBtn>
+    </form>
+
+    <VAlert v-if="props.errorMessage" class="mfa-step__alert" type="error" variant="tonal" role="alert">
+      {{ props.errorMessage }}
+    </VAlert>
+  </section>
+</template>
+
+<style scoped>
+.mfa-step {
+  display: flex;
+  flex-direction: column;
+}
+
+.mfa-step__header {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 40px 1fr 40px;
+  margin-block-end: 20px;
+}
+
+.mfa-step__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.3;
+  text-align: center;
+}
+
+.mfa-step__method {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mfa-step__field {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  border: 1px solid rgba(var(--v-border-color), 0.38);
+  min-block-size: 52px;
+  border-radius: 12px;
+  background: rgba(var(--v-theme-surface), 0.13);
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    background 220ms ease;
+}
+
+.mfa-step__field:focus-within {
+  border-color: rgb(var(--v-theme-primary));
+  box-shadow: inset 0 0 0 1px rgb(var(--v-theme-primary));
+}
+
+.mfa-step__field-icon {
+  position: absolute;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  inset-inline-start: 16px;
+  pointer-events: none;
+}
+
+.mfa-step__input {
+  border: 0;
+  appearance: none;
+  background: transparent;
+  block-size: 50px;
+  color: rgb(var(--v-theme-on-surface));
+  font: inherit;
+  inline-size: 100%;
+  outline: none;
+  padding-block: 0;
+  padding-inline: 48px 16px;
+}
+
+.mfa-step__input::placeholder {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  opacity: 1;
+}
+
+.mfa-step__input:disabled {
+  cursor: not-allowed;
+  opacity: var(--v-disabled-opacity);
+}
+
+.mfa-step__submit {
+  flex: 0 0 48px !important;
+  block-size: 48px !important;
+  max-block-size: 48px !important;
+  min-block-size: 48px !important;
+  border-radius: 12px;
+  font-weight: 600;
+}
+
+.mfa-step__description {
+  margin: 0;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  line-height: 1.6;
+  text-align: center;
+}
+
+.mfa-step__alert {
+  margin-block-start: 18px;
+  border-radius: 8px;
+}
+
+.mfa-step--unavailable {
+  min-block-size: 0;
+}
+
+.mfa-step--unavailable .mfa-step__header {
+  margin-block-end: 16px;
+}
+
+.mfa-step--unavailable .mfa-step__alert {
+  margin-block-start: 0;
+}
+</style>

src/components/auth/__tests__/LoginMfaStep.spec.ts

@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import LoginMfaStep from '@/components/auth/LoginMfaStep.vue'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+const slotStub = { template: '<div><slot /></div>' }
+const buttonStub = {
+  emits: ['click'],
+  props: ['loading'],
+  template: '<button :disabled="loading" @click="$emit(\'click\')"><slot /></button>',
+}
+
+function mountStep(methods: Array<'otp'>) {
+  return shallowMount(LoginMfaStep, {
+    global: {
+      stubs: {
+        VAlert: slotStub,
+        VBtn: buttonStub,
+        VIcon: true,
+        VTextField: true,
+      },
+    },
+    props: {
+      errorMessage: '',
+      methods,
+      otpLoading: false,
+      otpPassword: '',
+    },
+  })
+}
+
+describe('LoginMfaStep', () => {
+  it('shows only the OTP form for an OTP-only account', () => {
+    const wrapper = mountStep(['otp'])
+
+    expect(wrapper.find('[data-testid="mfa-otp-form"]').exists()).toBe(true)
+  })
+
+  it('shows no authentication action when the server declares no supported method', () => {
+    const wrapper = mountStep([])
+
+    expect(wrapper.find('[data-testid="mfa-otp-form"]').exists()).toBe(false)
+  })
+})

src/components/cache/RecognitionCachePanel.vue

@@ -376,7 +376,7 @@ watch(recognitionSource, () => {
         >
           <template #default="{ item }">
             <article class="recognition-cache-mobile-item">
-              <div class="recognition-cache-poster">
+              <div class="recognition-cache-poster rounded-md">
                 <VImg v-if="getPosterUrl(item)" :src="getPosterUrl(item)" :alt="item.title || item.key" cover />
                 <VIcon v-else icon="mdi-image-off-outline" size="28" />
               </div>
@@ -432,7 +432,7 @@ watch(recognitionSource, () => {
       :loading-text="t('common.loadingText')"
     >
       <template #item.poster="{ item }">
-        <div class="recognition-cache-table__poster">
+        <div class="recognition-cache-table__poster rounded-md">
           <VImg v-if="getPosterUrl(item)" :src="getPosterUrl(item)" :alt="item.title || item.key" cover />
           <VIcon v-else icon="mdi-image-off-outline" />
         </div>
@@ -590,7 +590,6 @@ watch(recognitionSource, () => {
   overflow: hidden;
   align-items: center;
   justify-content: center;
-  border-radius: var(--app-control-radius);
   background: rgba(var(--v-theme-on-surface), 0.06);
   color: rgba(var(--v-theme-on-surface), 0.36);
 }

src/components/cards/MediaCard.vue

@@ -166,12 +166,17 @@ function getExistsStatusKey() {
 }
 
 function isSameSubscribeMedia(subscribe: Subscribe) {
+  const mediaId = getMediaId()
+  if (subscribe.media_source && subscribe.media_id) {
+    const prefix = subscribe.media_source === 'themoviedb' ? 'tmdb' : subscribe.media_source
+    return mediaId === `${prefix}:${subscribe.media_id}`
+  }
+  if (subscribe.mediaid) return mediaId === subscribe.mediaid
   if (props.media?.tmdb_id && subscribe.tmdbid) return props.media.tmdb_id === subscribe.tmdbid
   if (props.media?.douban_id && subscribe.doubanid) return props.media.douban_id === subscribe.doubanid
   if (props.media?.bangumi_id && subscribe.bangumiid) return props.media.bangumi_id === subscribe.bangumiid
-
-  const mediaId = props.media?.media_id ? `${props.media.mediaid_prefix}:${props.media.media_id}` : ''
-  return Boolean(mediaId && subscribe.mediaid === mediaId)
+  if (props.media?.anilist_id && subscribe.anilistid) return props.media.anilist_id === subscribe.anilistid
+  return false
 }
 
 // 角标颜色
@@ -459,6 +464,7 @@ onBeforeUnmount(() => {
           class="app-hover-lift-card outline-none ring-gray-500 media-card"
           :class="{
             'app-hover-lift-card--hovering': isMediaCardActive(hover.isHovering),
+            'media-card--image-loaded': isImageLoaded,
             'ring-1': isImageLoaded,
           }"
           @click.stop="handleMediaCardClick(hover.isHovering)"
@@ -535,7 +541,8 @@ onBeforeUnmount(() => {
             tile
             v-if="!isMediaCardActive(hover.isHovering) && isImageLoaded && props.media?.source && !imageLoadError"
           >
-            <VImg cover :src="sourceIconDict[props.media?.source]" class="shadow-lg" />
+            <VIcon v-if="props.media?.source === 'anilist'" color="#02a9ff" icon="mdi-alpha-a-circle" size="24" />
+            <VImg v-else cover :src="sourceIconDict[props.media?.source]" class="shadow-lg" />
           </VAvatar>
         </VCard>
       </div>

src/components/cards/MediaServerCard.vue

@@ -25,6 +25,11 @@ const props = defineProps({
     type: Array as PropType<MediaServerConf[]>,
     required: true,
   },
+  // 旧版全局同步间隔，用作服务器未单独设置时的默认值
+  defaultSyncInterval: {
+    type: Number,
+    default: null,
+  },
 })
 
 // 定义触发的自定义事件
@@ -56,6 +61,7 @@ function openMediaServerInfoDialog() {
     {
       mediaserver: props.mediaserver,
       mediaservers: props.mediaservers,
+      defaultSyncInterval: props.defaultSyncInterval,
     },
     {
       change: (...args: unknown[]) => emit('change', ...args),

src/components/cards/PersonCard.vue

@@ -38,6 +38,9 @@ function getPersonImage() {
   } else if (personProps.person?.source === 'bangumi') {
     if (!personInfo.value?.images) return personIcon
     url = personInfo.value?.images?.medium
+  } else if (personProps.person?.source === 'anilist') {
+    if (!personInfo.value?.images) return personIcon
+    url = personInfo.value?.images?.large || personInfo.value?.images?.medium
   } else {
     return personIcon
   }

src/components/cards/PlayingBackdropCard.vue

@@ -105,6 +105,7 @@ async function goPlay() {
         >
           <VImg
             :src="imageUrl"
+            crossorigin="anonymous"
             class="playing-card__image"
             :class="{ 'playing-card__image--loaded': imageLoaded }"
             cover
@@ -216,8 +217,7 @@ async function goPlay() {
 }
 
 .playing-card__bottom-scrim {
-  background:
-    linear-gradient(180deg, rgba(2, 6, 12, 0%) 24%, rgba(2, 6, 12, 72%) 68%, rgba(2, 6, 12, 96%) 100%);
+  background: linear-gradient(180deg, rgba(2, 6, 12, 0%) 24%, rgba(2, 6, 12, 72%) 68%, rgba(2, 6, 12, 96%) 100%);
 }
 
 .playing-card__percent,

src/components/cards/PluginAppCard.vue

@@ -2,7 +2,7 @@
 import api from '@/api'
 import type { Plugin } from '@/api/types'
 import { getLogoUrl } from '@/utils/imageUtils'
-import { getDominantColor } from '@/@core/utils/image'
+import { getCardAccentRgbFromImage } from '@/composables/useCardAccentColor'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { formatDownloadCount } from '@/@core/utils/formatters'
 import { useToast } from 'vue-toastification'
@@ -35,8 +35,8 @@ const $toast = useToast()
 
 const createConfirm = useConfirm()
 
-// 背景颜色
-const backgroundColor = ref('#28A9E1')
+// 卡片头部染色所用的图标主色（CSS 变量可直接消费的 RGB 通道值）
+const accentRgb = ref('40, 169, 225')
 
 // 图片对象
 const imageRef = ref<any>()
@@ -76,8 +76,8 @@ function closeInstallProgress() {
 async function imageLoaded() {
   isImageLoaded.value = true
   const imageElement = imageRef.value?.$el.querySelector('img') as HTMLImageElement
-  // 从图片中提取背景色
-  backgroundColor.value = await getDominantColor(imageElement)
+  // 从图标中提取主色，作为卡片头部染色玻璃的色相来源
+  accentRgb.value = await getCardAccentRgbFromImage(imageElement, '#28A9E1')
 }
 
 // 计算图标路径
@@ -236,15 +236,13 @@ onUnmounted(() => {
             :width="props.width"
             :height="props.height"
             @click="showPluginDetail"
-            class="app-hover-lift-card flex flex-col h-full"
+            class="plugin-card app-hover-lift-card flex flex-col h-full"
             :class="{
               'app-hover-lift-card--hovering': hover.isHovering,
             }"
+            :style="{ '--plugin-card-accent-rgb': accentRgb }"
           >
-          <div
-            class="flex-grow"
-            :style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
-          >
+          <div class="plugin-card__banner flex-grow">
             <VCardText class="px-2 pt-2 pb-0">
               <VCardTitle
                 class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"

src/components/cards/PluginCard.vue

@@ -4,7 +4,7 @@ import { useConfirm } from '@/composables/useConfirm'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
 import { getLogoUrl } from '@/utils/imageUtils'
-import { getDominantColor } from '@/@core/utils/image'
+import { getCardAccentRgbFromImage } from '@/composables/useCardAccentColor'
 import { formatDownloadCount } from '@/@core/utils/formatters'
 import { useDisplay } from 'vuetify'
 import { useI18n } from 'vue-i18n'
@@ -40,8 +40,8 @@ const { t } = useI18n()
 // 显示器宽度
 const display = useDisplay()
 
-// 背景颜色
-const backgroundColor = ref('#28A9E1')
+// 卡片头部染色所用的图标主色（CSS 变量可直接消费的 RGB 通道值）
+const accentRgb = ref('40, 169, 225')
 
 // 图片对象
 const imageRef = ref<any>()
@@ -98,8 +98,8 @@ watch(
 async function imageLoaded() {
   isImageLoaded.value = true
   const imageElement = imageRef.value?.$el.querySelector('img') as HTMLImageElement
-  // 从图片中提取背景色
-  backgroundColor.value = await getDominantColor(imageElement)
+  // 从图标中提取主色，作为卡片头部染色玻璃的色相来源
+  accentRgb.value = await getCardAccentRgbFromImage(imageElement, '#28A9E1')
 }
 
 // 显示更新日志
@@ -573,17 +573,15 @@ watch(
             :width="props.width"
             :height="props.height"
             @click="handleCardClick"
-            class="app-hover-lift-card flex flex-col h-full"
+            class="plugin-card app-hover-lift-card flex flex-col h-full"
             :class="{
               'app-hover-lift-card--hovering': hover.isHovering && !props.sortable,
               'cursor-move': props.sortable,
             }"
+            :style="{ '--plugin-card-accent-rgb': accentRgb }"
             :ripple="!props.sortable"
           >
-          <div
-            class="flex-grow"
-            :style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
-          >
+          <div class="plugin-card__banner flex-grow">
             <VCardText class="px-2 pt-2 pb-0">
               <VCardTitle
                 class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"

src/components/cards/PosterCard.vue

@@ -37,7 +37,7 @@ const getImgUrl = computed(() => {
   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)}`
+    url += `&use_cookies=${encodeURIComponent(use_cookies)}`
   }
   return url
 })
@@ -63,43 +63,44 @@ async function goPlay(isHovering: boolean | null = false) {
             'ring-1': isImageLoaded,
           }"
         >
-        <VImg
-          aspect-ratio="2/3"
-          :src="getImgUrl"
-          class="poster-card-image object-cover aspect-w-2 aspect-h-3"
-          :class="{ 'poster-card-image--loaded': isImageLoaded }"
-          cover
-          @load="isImageLoaded = true"
-          @error="imageLoadError = true"
-        >
-          <template #placeholder>
-            <div class="w-full h-full">
-              <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-            </div>
-          </template>
-        </VImg>
-        <!-- 类型角标 -->
-        <VChip
-          v-show="isImageLoaded"
-          variant="elevated"
-          size="small"
-          :class="getChipColor(props.media?.type || '')"
-          class="poster-card-chip absolute left-2 top-2 bg-opacity-80 text-white font-bold"
-        >
-          {{ props.media?.type }}
-        </VChip>
-        <!-- 详情 -->
-        <VCardText
-          v-show="hover.isHovering || imageLoadError"
-          class="w-full h-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2 pb-5"
-          style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
-          @click.stop="goPlay(hover.isHovering)"
-        >
-          <span class="font-semibold text-sm">{{ props.media?.subtitle }}</span>
-          <h1 class="mb-1 text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
-            {{ props.media?.title }}
-          </h1>
-        </VCardText>
+          <VImg
+            aspect-ratio="2/3"
+            :src="getImgUrl"
+            crossorigin="anonymous"
+            class="poster-card-image object-cover aspect-w-2 aspect-h-3"
+            :class="{ 'poster-card-image--loaded': isImageLoaded }"
+            cover
+            @load="isImageLoaded = true"
+            @error="imageLoadError = true"
+          >
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+              </div>
+            </template>
+          </VImg>
+          <!-- 类型角标 -->
+          <VChip
+            v-show="isImageLoaded"
+            variant="elevated"
+            size="small"
+            :class="getChipColor(props.media?.type || '')"
+            class="poster-card-chip absolute left-2 top-2 bg-opacity-80 text-white font-bold"
+          >
+            {{ props.media?.type }}
+          </VChip>
+          <!-- 详情 -->
+          <VCardText
+            v-show="hover.isHovering || imageLoadError"
+            class="w-full h-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2 pb-5"
+            style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
+            @click.stop="goPlay(hover.isHovering)"
+          >
+            <span class="font-semibold text-sm">{{ props.media?.subtitle }}</span>
+            <h1 class="mb-1 text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
+              {{ props.media?.title }}
+            </h1>
+          </VCardText>
         </VCard>
       </div>
     </template>

src/components/cards/SiteCard.vue

@@ -4,7 +4,7 @@ import { getLogoUrl } from '@/utils/imageUtils'
 import { useToast } from 'vue-toastification'
 import { useI18n } from 'vue-i18n'
 import api from '@/api'
-import type { Site, SiteStatistic, SiteUserData } from '@/api/types'
+import type { ApiResponse, Site, SiteStatistic, SiteUserData } from '@/api/types'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { formatFileSize } from '@/@core/utils/formatters'
 import { useConfirm } from '@/composables/useConfirm'
@@ -79,17 +79,17 @@ async function testSite() {
     testButtonText.value = t('site.testing')
     testButtonDisable.value = true
 
-    const result: { [key: string]: any } = await api.get(`site/test/${cardProps.site?.id}`)
+    const result = (await api.get(`site/test/${cardProps.site?.id}`)) as ApiResponse<unknown>
     if (result.success) $toast.success(t('site.testSuccess', { name: cardProps.site?.name }))
     else $toast.error(t('site.testFailed', { name: cardProps.site?.name, message: result.message }))
 
-    testButtonText.value = t('site.testConnectivity')
-    testButtonDisable.value = false
-
     // 测试完成后刷新统计数据
     emit('refresh-stats', cardProps.site?.domain)
   } catch (error) {
     console.error(error)
+  } finally {
+    testButtonText.value = t('site.testConnectivity')
+    testButtonDisable.value = false
   }
 }
 
@@ -166,7 +166,7 @@ async function deleteSiteInfo() {
   if (!isConfirmed) return
 
   try {
-    const result: { [key: string]: any } = await api.delete(`site/${cardProps.site?.id}`)
+    const result = (await api.delete(`site/${cardProps.site?.id}`)) as ApiResponse<unknown>
     if (result.success) emit('remove')
     else $toast.error(t('site.deleteFailed', { name: cardProps.site?.name, message: result.message }))
   } catch (error) {
@@ -260,167 +260,182 @@ onMounted(() => {
         :hover="!cardProps.sortable"
         @click="handleCardClick"
       >
-      <!-- 装饰性状态指示器 -->
-      <div v-if="cardProps.site?.is_active" class="site-status-indicator" :class="statColor"></div>
+        <!-- 装饰性状态指示器 -->
+        <div v-if="cardProps.site?.is_active" class="site-status-indicator" :class="statColor"></div>
 
-      <!-- 主体部分 -->
-      <div class="relative z-1 flex flex-1 flex-col p-3 pr-12">
-        <!-- 顶部：图标和站点名称 -->
-        <div class="mb-1 flex min-w-0 items-center gap-2">
-          <!-- 站点图标 -->
-          <VAvatar
-            tile
-            rounded="lg"
-            size="32"
-            class="shrink-0"
-            :class="{ 'cursor-move': cardProps.sortable && display.mdAndUp.value }"
-          >
-            <VImg :src="siteIcon" class="w-full h-full" :alt="cardProps.site?.name" cover>
-              <template #placeholder>
-                <div class="w-full h-full">
-                  <VSkeletonLoader class="object-cover aspect-square" />
+        <!-- 主体部分 -->
+        <div class="relative z-1 flex flex-1 flex-col p-3 pr-12">
+          <!-- 顶部：图标和站点名称 -->
+          <div class="mb-1 flex min-w-0 items-center gap-2">
+            <!-- 站点图标 -->
+            <VAvatar
+              tile
+              rounded="lg"
+              size="32"
+              class="shrink-0"
+              :class="{ 'cursor-move': cardProps.sortable && display.mdAndUp.value }"
+            >
+              <VImg :src="siteIcon" class="w-full h-full" :alt="cardProps.site?.name" cover>
+                <template #placeholder>
+                  <div class="w-full h-full">
+                    <VSkeletonLoader class="object-cover aspect-square" />
+                  </div>
+                </template>
+              </VImg>
+            </VAvatar>
+
+            <!-- 站点名称和特性图标 -->
+            <div class="flex min-w-0 flex-1 items-center gap-2">
+              <h3 class="min-w-0 flex-1 truncate text-lg font-semibold leading-tight">{{ cardProps.site?.name }}</h3>
+
+              <!-- 站点特性图标 -->
+              <div class="ml-auto flex shrink-0 items-center gap-2">
+                <div
+                  v-if="cardProps.site?.limit_interval"
+                  :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'"
+                >
+                  <VIcon
+                    icon="mdi-speedometer"
+                    size="16"
+                    color="primary"
+                    :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
+                  />
+                </div>
+                <div
+                  v-if="cardProps.site?.proxy"
+                  :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'"
+                >
+                  <VIcon
+                    icon="mdi-network-outline"
+                    size="16"
+                    color="primary"
+                    :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
+                  />
+                </div>
+                <div
+                  v-if="cardProps.site?.render"
+                  :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'"
+                >
+                  <VIcon
+                    icon="mdi-apple-safari"
+                    size="16"
+                    color="primary"
+                    :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
+                  />
+                </div>
+                <div
+                  v-if="cardProps.site?.filter"
+                  :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'"
+                >
+                  <VIcon
+                    icon="mdi-filter-cog-outline"
+                    size="16"
+                    color="primary"
+                    :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
+                  />
                 </div>
-              </template>
-            </VImg>
-          </VAvatar>
-
-          <!-- 站点名称和特性图标 -->
-          <div class="flex min-w-0 flex-1 items-center gap-2">
-            <h3 class="min-w-0 flex-1 truncate text-lg font-semibold leading-tight">{{ cardProps.site?.name }}</h3>
-
-            <!-- 站点特性图标 -->
-            <div class="ml-auto flex shrink-0 items-center gap-2">
-              <div v-if="cardProps.site?.limit_interval" :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'">
-                <VIcon
-                  icon="mdi-speedometer"
-                  size="16"
-                  color="primary"
-                  :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
-                />
-              </div>
-              <div v-if="cardProps.site?.proxy" :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'">
-                <VIcon
-                  icon="mdi-network-outline"
-                  size="16"
-                  color="primary"
-                  :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
-                />
-              </div>
-              <div v-if="cardProps.site?.render" :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'">
-                <VIcon
-                  icon="mdi-apple-safari"
-                  size="16"
-                  color="primary"
-                  :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
-                />
-              </div>
-              <div v-if="cardProps.site?.filter" :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'">
-                <VIcon
-                  icon="mdi-filter-cog-outline"
-                  size="16"
-                  color="primary"
-                  :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
-                />
               </div>
             </div>
           </div>
-        </div>
 
-        <!-- 中间部分：网址 -->
-        <div class="my-3">
+          <!-- 中间部分：网址 -->
+          <div class="my-3">
             <div class="min-w-0 truncate text-sm text-medium-emphasis" @click.stop="handleSiteUrlClick">
               {{ cardProps.site?.url }}
             </div>
           </div>
 
-        <!-- 底部：数据统计 -->
-        <div class="flex-1 flex flex-col justify-end">
-          <!-- 更直观的上传下载数据条 -->
-          <div class="border-t mt-1.5 pt-1.5">
-            <!-- 上传数据 -->
-            <div class="flex items-center justify-between gap-3 mb-1.5">
-              <div class="text-sm text-medium-emphasis min-w-[70px]">
-                <VIcon icon="mdi-arrow-up" size="14" color="info" class="mr-1" />
-                <span>{{ formatFileSize(cardProps.data?.upload || 0) }}</span>
+          <!-- 底部：数据统计 -->
+          <div class="flex-1 flex flex-col justify-end">
+            <!-- 更直观的上传下载数据条 -->
+            <div class="border-t mt-1.5 pt-1.5">
+              <!-- 上传数据 -->
+              <div class="flex items-center justify-between gap-3 mb-1.5">
+                <div class="text-sm text-medium-emphasis min-w-[70px]">
+                  <VIcon icon="mdi-arrow-up" size="14" color="info" class="mr-1" />
+                  <span>{{ formatFileSize(cardProps.data?.upload || 0) }}</span>
+                </div>
+                <div class="flex-grow h-1 rounded bg-on-surface/8 relative overflow-hidden">
+                  <VProgressLinear :model-value="getUploadPercent" color="info" height="4" rounded="lg" />
+                </div>
               </div>
-              <div class="flex-grow h-1 rounded bg-on-surface/8 relative overflow-hidden">
-                <VProgressLinear :model-value="getUploadPercent" color="info" height="4" rounded="lg" />
-              </div>
-            </div>
 
-            <!-- 下载数据 -->
-            <div class="flex items-center justify-between gap-3">
-              <div class="flex items-center text-[0.8rem] text-medium-emphasis min-w-[70px]">
-                <VIcon icon="mdi-arrow-down" size="14" color="success" class="mr-1" />
-                <span>{{ formatFileSize(cardProps.data?.download || 0) }}</span>
-              </div>
-              <div class="flex-grow h-1 rounded bg-on-surface/8 relative overflow-hidden">
-                <VProgressLinear :model-value="getDownloadPercent" color="warning" height="4" rounded="lg" />
+              <!-- 下载数据 -->
+              <div class="flex items-center justify-between gap-3">
+                <div class="flex items-center text-[0.8rem] text-medium-emphasis min-w-[70px]">
+                  <VIcon icon="mdi-arrow-down" size="14" color="success" class="mr-1" />
+                  <span>{{ formatFileSize(cardProps.data?.download || 0) }}</span>
+                </div>
+                <div class="flex-grow h-1 rounded bg-on-surface/8 relative overflow-hidden">
+                  <VProgressLinear :model-value="getDownloadPercent" color="warning" height="4" rounded="lg" />
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 右侧操作按钮区 -->
-      <VSheet v-if="!cardProps.sortable" class="site-card-actions absolute inset-y-0 right-0 z-20 flex flex-col py-2 px-1">
-        <!-- 测试按钮 -->
-        <VBtn
-          icon
-          variant="text"
-          density="comfortable"
-          class="mb-1 relative flex items-center justify-center rounded-full mx-auto"
-          :disabled="testButtonDisable"
-          @click.stop="testSite"
-          size="36"
+        <!-- 右侧操作按钮区 -->
+        <VSheet
+          v-if="!cardProps.sortable"
+          class="site-card-actions absolute inset-y-0 right-0 z-20 flex flex-col py-2 px-1"
         >
-          <div class="relative flex items-center justify-center w-full h-full">
-            <div
-              class="w-[20px] h-[20px] rounded-full shadow-[inset_0_0_0_2px_rgba(var(--v-theme-on-surface),0.1)] pulse-dot"
-              :class="statColor"
-            ></div>
-          </div>
-          <div
-            v-if="testButtonDisable"
-            class="absolute inset-0 flex flex-col items-center justify-center bg-surface/95 rounded-full shadow-md animate-fade-in"
+          <!-- 测试按钮 -->
+          <VBtn
+            icon
+            variant="text"
+            density="comfortable"
+            class="mb-1 relative flex items-center justify-center rounded-full mx-auto"
+            :disabled="testButtonDisable"
+            @click.stop="testSite"
+            size="36"
           >
-            <div class="relative w-6 h-6">
-              <div class="spinner-circle"></div>
+            <div class="relative flex items-center justify-center w-full h-full">
+              <div
+                class="w-[20px] h-[20px] rounded-full shadow-[inset_0_0_0_2px_rgba(var(--v-theme-on-surface),0.1)] pulse-dot"
+                :class="statColor"
+              ></div>
             </div>
-          </div>
-        </VBtn>
+            <div
+              v-if="testButtonDisable"
+              class="absolute inset-0 flex flex-col items-center justify-center bg-surface/95 rounded-full shadow-md animate-fade-in"
+            >
+              <div class="relative w-6 h-6">
+                <div class="spinner-circle"></div>
+              </div>
+            </div>
+          </VBtn>
 
-        <!-- 用户数据按钮 -->
-        <VBtn icon variant="text" @click.stop="handleSiteUserData" size="36">
-          <VIcon icon="mdi-chart-bell-curve" size="20" />
-        </VBtn>
+          <!-- 用户数据按钮 -->
+          <VBtn icon variant="text" @click.stop="handleSiteUserData" size="36">
+            <VIcon icon="mdi-chart-bell-curve" size="20" />
+          </VBtn>
 
-        <!-- 更新按钮 -->
-        <VBtn icon variant="text" @click.stop="handleSiteUpdate" size="36">
-          <VIcon icon="mdi-refresh" size="20" />
-        </VBtn>
+          <!-- 更新按钮 -->
+          <VBtn icon variant="text" @click.stop="handleSiteUpdate" size="36">
+            <VIcon icon="mdi-refresh" size="20" />
+          </VBtn>
 
-        <!-- 更多选项按钮 -->
-        <VBtn icon variant="text" class="mt-auto" size="36" @click.stop>
-          <VIcon icon="mdi-dots-vertical" size="20" />
-          <VMenu :activator="'parent'" :close-on-content-click="true" :location="'left'">
-            <VList>
-              <VListItem @click="handleSiteEdit" base-color="info">
-                <template #prepend>
-                  <VIcon icon="mdi-file-edit-outline" size="20" />
-                </template>
-                <VListItemTitle>{{ t('site.actions.edit') }}</VListItemTitle>
-              </VListItem>
-              <VListItem @click="deleteSiteInfo">
-                <template #prepend>
-                  <VIcon icon="mdi-delete-outline" size="20" color="error" />
-                </template>
-                <VListItemTitle class="text-error">{{ t('site.deleteSite') }}</VListItemTitle>
-              </VListItem>
-            </VList>
-          </VMenu>
-        </VBtn>
-      </VSheet>
+          <!-- 更多选项按钮 -->
+          <VBtn icon variant="text" class="mt-auto" size="36" @click.stop>
+            <VIcon icon="mdi-dots-vertical" size="20" />
+            <VMenu :activator="'parent'" :close-on-content-click="true" :location="'left'">
+              <VList>
+                <VListItem @click="handleSiteEdit" base-color="info">
+                  <template #prepend>
+                    <VIcon icon="mdi-file-edit-outline" size="20" />
+                  </template>
+                  <VListItemTitle>{{ t('site.actions.edit') }}</VListItemTitle>
+                </VListItem>
+                <VListItem @click="deleteSiteInfo">
+                  <template #prepend>
+                    <VIcon icon="mdi-delete-outline" size="20" color="error" />
+                  </template>
+                  <VListItemTitle class="text-error">{{ t('site.deleteSite') }}</VListItemTitle>
+                </VListItem>
+              </VList>
+            </VMenu>
+          </VBtn>
+        </VSheet>
       </VCard>
     </div>
   </div>
@@ -442,7 +457,9 @@ onMounted(() => {
   inset-block-start: 0;
   inset-inline: 0;
   opacity: 0.5;
-  transition: block-size 0.3s ease, opacity 0.3s ease;
+  transition:
+    block-size 0.3s ease,
+    opacity 0.3s ease;
 }
 
 .site-status-indicator.error {

src/components/cards/SubscribeCard.vue

@@ -264,9 +264,14 @@ async function editSubscribeDialog() {
 
 // 获得mediaid
 function getMediaId() {
+  if (props.media?.media_source && props.media?.media_id) {
+    const prefix = props.media.media_source === 'themoviedb' ? 'tmdb' : props.media.media_source
+    return `${prefix}:${props.media.media_id}`
+  }
   if (props.media?.tmdbid) return `tmdb:${props.media?.tmdbid}`
   else if (props.media?.doubanid) return `douban:${props.media?.doubanid}`
   else if (props.media?.bangumiid) return `bangumi:${props.media?.bangumiid}`
+  else if (props.media?.anilistid) return `anilist:${props.media?.anilistid}`
   else return props.media?.mediaid
 }
 
@@ -480,13 +485,7 @@ function handleCardClick() {
 
               <template v-if="display.xs.value">
                 <div class="subscribe-card-mobile-media">
-                  <VImg
-                    :src="backdropUrl || posterUrl"
-                    :aspect-ratio="2"
-                    cover
-                    position="top"
-                    @load="imageLoadHandler"
-                  >
+                  <VImg :src="backdropUrl || posterUrl" :aspect-ratio="2" cover position="top" @load="imageLoadHandler">
                     <template #placeholder>
                       <VSkeletonLoader class="h-full w-full" />
                     </template>
@@ -535,12 +534,7 @@ function handleCardClick() {
                         </span>
                       </div>
 
-                      <IconBtn
-                        v-if="!props.sortable"
-                        class="subscribe-card-mobile-menu"
-                        size="small"
-                        @click.stop
-                      >
+                      <IconBtn v-if="!props.sortable" class="subscribe-card-mobile-menu" size="small" @click.stop>
                         <VIcon icon="mdi-dots-horizontal" size="20" />
                         <VMenu activator="parent" close-on-content-click>
                           <VList>
@@ -576,112 +570,114 @@ function handleCardClick() {
               </template>
 
               <div v-else>
-              <VCardText class="flex items-center pt-3 pb-2">
-                <div
-                  class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md relative"
-                  v-if="imageLoaded"
-                  :class="{ 'cursor-move': props.sortable && display.mdAndUp.value }"
-                >
-                  <VImg :src="posterUrl" aspect-ratio="2/3" cover>
-                    <template #placeholder>
-                      <div class="w-full h-full">
-                        <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-                      </div>
-                    </template>
-                  </VImg>
-                </div>
-                <div class="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
-                  <div class="text-sm font-medium text-white sm:pt-1">{{ props.media?.year }}</div>
-                  <div class="mr-2 min-w-0 text-lg font-bold text-white text-ellipsis overflow-hidden line-clamp-2 ...">
-                    {{ props.media?.name }}
-                    {{ formatSeasonLabel(props.media?.season, t('media.specials')) }}
-                  </div>
-                </div>
-              </VCardText>
-              <VCardText class="flex min-w-0 justify-space-between align-center flex-wrap px-3">
-                <div class="flex min-w-0 max-w-full align-center">
-                  <VIcon
-                    v-if="props.media?.total_episode && props.sortable"
-                    icon="mdi-progress-download"
-                    size="small"
-                    color="white"
-                    class="me-1"
-                  />
-                  <IconBtn
-                    v-else-if="props.media?.total_episode"
-                    size="small"
-                    v-bind="props"
-                    icon="mdi-progress-download"
-                    color="white"
-                  />
-                  <!-- 守卫改用 total_episode：电视剧订阅可能不带 season 字段（旧数据或自定义来源），仍应展示集数进度 -->
-                  <div v-if="props.media?.total_episode" class="flex-shrink-0 text-subtitle-2 me-2 text-white">
-                    {{ subscribeProgressText }}
-                    <VTooltip v-if="subscribeProgressTooltip" activator="parent" location="top">
-                      {{ subscribeProgressTooltip }}
-                    </VTooltip>
-                  </div>
-                  <VIcon
-                    v-if="props.media?.username && props.sortable"
-                    icon="mdi-account"
-                    size="small"
-                    color="white"
-                    class="flex-shrink-0 me-1"
-                  />
-                  <IconBtn
-                    v-else-if="props.media?.username"
-                    icon="mdi-account"
-                    size="small"
-                    color="white"
-                    class="flex-shrink-0"
-                  />
-                  <!-- 用户名过长时限制在卡片宽度内，并用省略号展示剩余内容 -->
-                  <span
-                    v-if="props.media?.username"
-                    class="min-w-0 truncate text-subtitle-2 text-white"
-                    :title="props.media?.username"
+                <VCardText class="flex items-center pt-3 pb-2">
+                  <div
+                    class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md relative"
+                    v-if="imageLoaded"
+                    :class="{ 'cursor-move': props.sortable && display.mdAndUp.value }"
                   >
-                    {{ props.media?.username }}
-                  </span>
-                </div>
-              </VCardText>
-              <!-- 右下角元数据：暂停 / 待定时替换"x 天前"为状态文案 -->
-              <VCardText
-                v-if="rightBottomStateDisplay"
-                class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300 text-xs"
-              >
-                <VIcon :icon="rightBottomStateDisplay.icon" class="me-1" />
-                {{ rightBottomStateDisplay.label }}
-              </VCardText>
-              <VCardText
-                v-else-if="lastUpdateText"
-                class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300 text-xs"
-              >
-                <VIcon icon="mdi-download" class="me-1" />
-                {{ lastUpdateText }}
-              </VCardText>
-              <div class="w-full absolute bottom-0">
-                <!--
+                    <VImg :src="posterUrl" aspect-ratio="2/3" cover>
+                      <template #placeholder>
+                        <div class="w-full h-full">
+                          <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                        </div>
+                      </template>
+                    </VImg>
+                  </div>
+                  <div class="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
+                    <div class="text-sm font-medium text-white sm:pt-1">{{ props.media?.year }}</div>
+                    <div
+                      class="mr-2 min-w-0 text-lg font-bold text-white text-ellipsis overflow-hidden line-clamp-2 ..."
+                    >
+                      {{ props.media?.name }}
+                      {{ formatSeasonLabel(props.media?.season, t('media.specials')) }}
+                    </div>
+                  </div>
+                </VCardText>
+                <VCardText class="flex min-w-0 justify-space-between align-center flex-wrap px-3">
+                  <div class="flex min-w-0 max-w-full align-center">
+                    <VIcon
+                      v-if="props.media?.total_episode && props.sortable"
+                      icon="mdi-progress-download"
+                      size="small"
+                      color="white"
+                      class="me-1"
+                    />
+                    <IconBtn
+                      v-else-if="props.media?.total_episode"
+                      size="small"
+                      v-bind="props"
+                      icon="mdi-progress-download"
+                      color="white"
+                    />
+                    <!-- 守卫改用 total_episode：电视剧订阅可能不带 season 字段（旧数据或自定义来源），仍应展示集数进度 -->
+                    <div v-if="props.media?.total_episode" class="flex-shrink-0 text-subtitle-2 me-2 text-white">
+                      {{ subscribeProgressText }}
+                      <VTooltip v-if="subscribeProgressTooltip" activator="parent" location="top">
+                        {{ subscribeProgressTooltip }}
+                      </VTooltip>
+                    </div>
+                    <VIcon
+                      v-if="props.media?.username && props.sortable"
+                      icon="mdi-account"
+                      size="small"
+                      color="white"
+                      class="flex-shrink-0 me-1"
+                    />
+                    <IconBtn
+                      v-else-if="props.media?.username"
+                      icon="mdi-account"
+                      size="small"
+                      color="white"
+                      class="flex-shrink-0"
+                    />
+                    <!-- 用户名过长时限制在卡片宽度内，并用省略号展示剩余内容 -->
+                    <span
+                      v-if="props.media?.username"
+                      class="min-w-0 truncate text-subtitle-2 text-white"
+                      :title="props.media?.username"
+                    >
+                      {{ props.media?.username }}
+                    </span>
+                  </div>
+                </VCardText>
+                <!-- 右下角元数据：暂停 / 待定时替换"x 天前"为状态文案 -->
+                <VCardText
+                  v-if="rightBottomStateDisplay"
+                  class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300 text-xs"
+                >
+                  <VIcon :icon="rightBottomStateDisplay.icon" class="me-1" />
+                  {{ rightBottomStateDisplay.label }}
+                </VCardText>
+                <VCardText
+                  v-else-if="lastUpdateText"
+                  class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300 text-xs"
+                >
+                  <VIcon icon="mdi-download" class="me-1" />
+                  {{ lastUpdateText }}
+                </VCardText>
+                <div class="w-full absolute bottom-0">
+                  <!--
                   分集洗版模式：底色保持深绿、buffer 段显示"已下载未洗版"为浅绿、model 段显示"已洗版完成"为亮绿，
                   形成两段语义；其余订阅维持原有单段进度条
                 -->
-                <VProgressLinear
-                  v-if="isBestVersion && getBufferPercentage() > 0"
-                  :model-value="getPercentage()"
-                  :buffer-value="getBufferPercentage()"
-                  bg-color="success"
-                  bg-opacity="0.25"
-                  color="success"
-                  buffer-color="success"
-                  buffer-opacity="0.55"
-                />
-                <VProgressLinear
-                  v-else-if="getPercentage() > 0"
-                  :model-value="getPercentage()"
-                  bg-color="success"
-                  color="success"
-                />
-              </div>
+                  <VProgressLinear
+                    v-if="isBestVersion && getBufferPercentage() > 0"
+                    :model-value="getPercentage()"
+                    :buffer-value="getBufferPercentage()"
+                    bg-color="success"
+                    bg-opacity="0.25"
+                    color="success"
+                    buffer-color="success"
+                    buffer-opacity="0.55"
+                  />
+                  <VProgressLinear
+                    v-else-if="getPercentage() > 0"
+                    :model-value="getPercentage()"
+                    bg-color="success"
+                    color="success"
+                  />
+                </div>
               </div>
             </VCard>
           </div>

src/components/cards/SubscribeShareCard.vue

@@ -47,8 +47,14 @@ const posterUrl = computed(() => {
 
 // 获得mediaid
 function getMediaId() {
+  if (props.media?.media_source && props.media?.media_id) {
+    const prefix = props.media.media_source === 'themoviedb' ? 'tmdb' : props.media.media_source
+    return `${prefix}:${props.media.media_id}`
+  }
   if (props.media?.tmdbid) return `tmdb:${props.media?.tmdbid}`
   else if (props.media?.doubanid) return `douban:${props.media?.doubanid}`
+  else if (props.media?.bangumiid) return `bangumi:${props.media?.bangumiid}`
+  else if (props.media?.anilistid) return `anilist:${props.media?.anilistid}`
 }
 
 // 查看媒体详情
@@ -101,61 +107,65 @@ function doDelete() {
               'app-hover-lift-card--hovering': hover.isHovering,
             }"
           >
-          <VCard
-            :key="props.media?.id"
-            class="app-hover-lift-card flex flex-col h-full"
-            min-height="150"
-            @click="showForkSubscribe"
-          >
-            <template #image>
-              <VImg :src="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
-                <template #placeholder>
-                  <div class="w-full h-full">
-                    <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+            <VCard
+              :key="props.media?.id"
+              class="app-hover-lift-card flex flex-col h-full"
+              min-height="150"
+              @click="showForkSubscribe"
+            >
+              <template #image>
+                <VImg :src="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
+                  <template #placeholder>
+                    <div class="w-full h-full">
+                      <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+                    </div>
+                  </template>
+                  <template #default>
+                    <div class="absolute inset-0 subscribe-card-background"></div>
+                  </template>
+                </VImg>
+              </template>
+              <div class="h-full flex flex-col">
+                <VCardText class="flex items-center pa-3 pb-1 grow">
+                  <div class="h-auto w-16 flex-shrink-0 overflow-hidden rounded-md" v-if="imageLoaded">
+                    <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
+                      <template #placeholder>
+                        <div class="w-full h-full">
+                          <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                        </div>
+                      </template>
+                    </VImg>
                   </div>
-                </template>
-                <template #default>
-                  <div class="absolute inset-0 subscribe-card-background"></div>
-                </template>
-              </VImg>
-            </template>
-            <div class="h-full flex flex-col">
-              <VCardText class="flex items-center pa-3 pb-1 grow">
-                <div class="h-auto w-16 flex-shrink-0 overflow-hidden rounded-md" v-if="imageLoaded">
-                  <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
-                    <template #placeholder>
-                      <div class="w-full h-full">
-                        <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-                      </div>
-                    </template>
-                  </VImg>
-                </div>
-                <div class="flex flex-col justify-center pl-2 xl:pl-4">
-                  <div class="mr-2 min-w-0 text-lg font-bold text-white line-clamp-2 overflow-hidden text-ellipsis ...">
-                    {{ props.media?.share_title }}
+                  <div class="flex flex-col justify-center pl-2 xl:pl-4">
+                    <div
+                      class="mr-2 min-w-0 text-lg font-bold text-white line-clamp-2 overflow-hidden text-ellipsis ..."
+                    >
+                      {{ props.media?.share_title }}
+                    </div>
+                    <div
+                      class="text-sm font-medium text-gray-200 sm:pt-1 line-clamp-3 overflow-hidden text-ellipsis ..."
+                    >
+                      {{ props.media?.share_comment }}
+                    </div>
                   </div>
-                  <div class="text-sm font-medium text-gray-200 sm:pt-1 line-clamp-3 overflow-hidden text-ellipsis ...">
-                    {{ props.media?.share_comment }}
+                </VCardText>
+                <VCardText class="flex justify-space-between align-center flex-wrap py-2">
+                  <div class="flex align-center">
+                    <IconBtn v-bind="props" icon="mdi-account" color="white" class="me-1" />
+                    <div class="text-subtitle-2 me-4 text-white">
+                      {{ props.media?.share_user }}
+                    </div>
+                    <IconBtn v-if="props.media?.count" icon="mdi-fire" color="white" class="me-1" />
+                    <span v-if="props.media?.count" class="text-subtitle-2 me-4 text-white">
+                      {{ props.media?.count.toLocaleString() }}
+                    </span>
                   </div>
-                </div>
-              </VCardText>
-              <VCardText class="flex justify-space-between align-center flex-wrap py-2">
-                <div class="flex align-center">
-                  <IconBtn v-bind="props" icon="mdi-account" color="white" class="me-1" />
-                  <div class="text-subtitle-2 me-4 text-white">
-                    {{ props.media?.share_user }}
-                  </div>
-                  <IconBtn v-if="props.media?.count" icon="mdi-fire" color="white" class="me-1" />
-                  <span v-if="props.media?.count" class="text-subtitle-2 me-4 text-white">
-                    {{ props.media?.count.toLocaleString() }}
-                  </span>
-                </div>
-              </VCardText>
-              <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
-                <VIcon icon="mdi-calcdar" class="me-1" />
-                {{ dateText }}
-              </VCardText>
-            </div>
+                </VCardText>
+                <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
+                  <VIcon icon="mdi-calendar" class="me-1" />
+                  {{ dateText }}
+                </VCardText>
+              </div>
             </VCard>
           </div>
         </div>

src/components/cards/__tests__/MediaCard.spec.ts

@@ -0,0 +1,616 @@
+import type { MediaInfo } from '@/api/types'
+import MediaCard from '@/components/cards/MediaCard.vue'
+import { clearCachedMediaSubscribeStatuses } from '@/utils/mediaStatusCache'
+import { fireEvent, waitFor } from '@testing-library/vue'
+import { createMediaInfo } from '@tests/support/factories/media'
+import { mediaExistsHandler } from '@tests/support/msw/handlers/media'
+import { querySubscribeByMediaHandler, subscribeListHandler } from '@tests/support/msw/handlers/subscribe'
+import { server } from '@tests/support/msw/server'
+import { renderWithProviders } from '@tests/support/render'
+import { HttpResponse, http } from 'msw'
+import { defineComponent, h } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  openSharedDialog: vi.fn(),
+  routerPush: vi.fn(),
+}))
+
+vi.mock('@/composables/useSharedDialog', () => ({
+  openSharedDialog: (...args: unknown[]) => mocks.openSharedDialog(...args),
+}))
+
+vi.mock('@/router', () => ({
+  default: {
+    push: (...args: unknown[]) => mocks.routerPush(...args),
+  },
+}))
+
+const API_BASE_URL = 'http://localhost/api/v1/'
+const siteListUrl = new URL('site/', API_BASE_URL).href
+const selectedSitesUrl = new URL('system/setting/public/IndexerSites', API_BASE_URL).href
+
+let intersectionObservers: IntersectionObserverMock[] = []
+
+class IntersectionObserverMock implements IntersectionObserver {
+  readonly root: Element | Document | null
+  readonly rootMargin: string
+  readonly thresholds: readonly number[]
+  readonly disconnect = vi.fn()
+  readonly observe = vi.fn((target: Element) => {
+    this.target = target
+  })
+  readonly unobserve = vi.fn()
+  private target: Element = document.body
+
+  constructor(
+    private readonly callback: IntersectionObserverCallback,
+    options: IntersectionObserverInit = {},
+  ) {
+    this.root = options.root ?? null
+    this.rootMargin = options.rootMargin ?? '0px'
+    this.thresholds = Array.isArray(options.threshold) ? options.threshold : [options.threshold ?? 0]
+    intersectionObservers.push(this)
+  }
+
+  takeRecords(): IntersectionObserverEntry[] {
+    return []
+  }
+
+  trigger(isIntersecting = true) {
+    const bounds = this.target.getBoundingClientRect()
+    this.callback(
+      [
+        {
+          boundingClientRect: bounds,
+          intersectionRatio: isIntersecting ? 1 : 0,
+          intersectionRect: bounds,
+          isIntersecting,
+          rootBounds: null,
+          target: this.target,
+          time: 0,
+        },
+      ],
+      this,
+    )
+  }
+}
+
+interface RenderCardOptions {
+  permissions?: Record<string, boolean>
+  superUser?: boolean
+}
+
+async function renderCard(media: MediaInfo, options: RenderCardOptions = {}) {
+  return renderWithProviders(MediaCard, {
+    props: {
+      media,
+      width: '9rem',
+    },
+    initialState: {
+      user: {
+        permissions: options.permissions ?? {
+          discovery: true,
+          manage: false,
+          search: true,
+          subscribe: true,
+        },
+        superUser: options.superUser ?? true,
+      },
+    },
+  })
+}
+
+function getCard(container: Element) {
+  const card = container.querySelector<HTMLElement>('.media-card')
+  expect(card).not.toBeNull()
+  return card as HTMLElement
+}
+
+function getHoverArea(container: Element) {
+  const area = container.querySelector<HTMLElement>('.media-card-hover-area')
+  expect(area).not.toBeNull()
+  return area as HTMLElement
+}
+
+function getActionButtons(container: Element) {
+  return [...container.querySelectorAll<HTMLButtonElement>('.media-card .v-card-text button')]
+}
+
+function getSearchButton(container: Element) {
+  const button = getActionButtons(container)[0]
+  expect(button).toBeDefined()
+  return button
+}
+
+function getStatusObservers() {
+  return intersectionObservers.filter(observer => observer.thresholds.includes(0.1))
+}
+
+function installSearchHandlers(sites: Record<string, unknown>[], selected: number[]) {
+  server.use(
+    http.get(siteListUrl, () => HttpResponse.json(sites)),
+    http.get(selectedSitesUrl, () => HttpResponse.json({ data: { value: selected }, success: true })),
+  )
+}
+
+describe('MediaCard', () => {
+  beforeEach(() => {
+    intersectionObservers = []
+    clearCachedMediaSubscribeStatuses()
+    vi.stubGlobal('IntersectionObserver', IntersectionObserverMock)
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    vi.spyOn(console, 'log').mockImplementation(() => {})
+    mocks.openSharedDialog.mockReturnValue({ close: vi.fn(), id: 1, updateProps: vi.fn() })
+  })
+
+  it('loads exact subscribe and exists status only after entering the viewport', async () => {
+    const media = createMediaInfo({ season: 2, title: '视口状态剧集', tmdb_id: 9101, type: '电视剧' })
+    const subscribeRequest = vi.fn<(url: URL) => void>()
+    const existsRequest = vi.fn<(url: URL) => void>()
+    server.use(
+      querySubscribeByMediaHandler('tmdb:9101', { id: 71, season: 2 }, 200, subscribeRequest),
+      mediaExistsHandler({ data: { item: { id: 'library-item' } }, success: true }, 200, existsRequest),
+    )
+
+    const { container } = await renderCard(media)
+    expect(subscribeRequest).not.toHaveBeenCalled()
+    expect(existsRequest).not.toHaveBeenCalled()
+
+    getStatusObservers()[0]?.trigger()
+
+    await waitFor(() => {
+      expect(subscribeRequest).toHaveBeenCalledOnce()
+      expect(existsRequest).toHaveBeenCalledOnce()
+    })
+    expect(subscribeRequest.mock.calls[0][0].searchParams.get('season')).toBe('2')
+    expect(subscribeRequest.mock.calls[0][0].searchParams.get('title')).toBe('视口状态剧集')
+    expect(Object.fromEntries(existsRequest.mock.calls[0][0].searchParams)).toEqual({
+      mtype: '电视剧',
+      season: '2',
+      title: '视口状态剧集',
+      tmdbid: '9101',
+      year: '2026',
+    })
+    await waitFor(() => expect(getActionButtons(container).at(-1)).toHaveClass('text-error'))
+    expect(getStatusObservers()[0]?.disconnect).toHaveBeenCalledOnce()
+  })
+
+  it('coalesces status requests for duplicate cards while updating both card states', async () => {
+    const media = createMediaInfo({ title: '重复媒体', tmdb_id: 9102 })
+    const subscribeRequest = vi.fn<(url: URL) => void>()
+    const existsRequest = vi.fn<(url: URL) => void>()
+    server.use(
+      querySubscribeByMediaHandler('tmdb:9102', { id: 72 }, 200, subscribeRequest),
+      mediaExistsHandler({ data: { item: {} }, success: false }, 200, existsRequest),
+    )
+
+    const Harness = {
+      components: { MediaCard },
+      data: () => ({ media }),
+      template: '<div><MediaCard :media="media" width="9rem" /><MediaCard :media="media" width="9rem" /></div>',
+    }
+    const { container } = await renderWithProviders(Harness, {
+      initialState: { user: { superUser: true } },
+    })
+
+    expect(getStatusObservers()).toHaveLength(2)
+    getStatusObservers().forEach(observer => observer.trigger())
+
+    await waitFor(() => {
+      expect(subscribeRequest).toHaveBeenCalledOnce()
+      expect(existsRequest).toHaveBeenCalledOnce()
+      expect(container.querySelectorAll('.media-card .v-card-text button.text-error')).toHaveLength(2)
+    })
+  })
+
+  it.each([
+    ['TMDB', createMediaInfo({ season: 3, tmdb_id: 9201, type: '电视剧' }), 'tmdb:9201', '3'],
+    [
+      'Douban',
+      createMediaInfo({ douban_id: 'db-9202', season: undefined, tmdb_id: undefined }),
+      'douban:db-9202',
+      null,
+    ],
+    [
+      'Bangumi',
+      createMediaInfo({ bangumi_id: '9203', season: 1, tmdb_id: undefined, type: '电视剧' }),
+      'bangumi:9203',
+      '1',
+    ],
+    [
+      'extension',
+      createMediaInfo({ media_id: 'item-9204', mediaid_prefix: 'custom', tmdb_id: undefined }),
+      'custom:item-9204',
+      null,
+    ],
+  ])('queries the current %s media identifier and season', async (_source, media, mediaId, season) => {
+    const subscribeRequest = vi.fn<(url: URL) => void>()
+    server.use(
+      querySubscribeByMediaHandler(mediaId, {}, 200, subscribeRequest),
+      mediaExistsHandler({ data: { item: {} }, success: false }),
+    )
+
+    await renderCard(media)
+    getStatusObservers()[0]?.trigger()
+
+    await waitFor(() => expect(subscribeRequest).toHaveBeenCalledOnce())
+    expect(subscribeRequest.mock.calls[0][0].searchParams.get('season')).toBe(season)
+  })
+
+  it('skips status requests for collections and releases observer and touch listeners on unmount', async () => {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      ...window.matchMedia(''),
+      matches: true,
+    })
+    const subscribeRequest = vi.fn<(url: URL) => void>()
+    const existsRequest = vi.fn<(url: URL) => void>()
+    const addListener = vi.spyOn(document, 'addEventListener')
+    const removeListener = vi.spyOn(document, 'removeEventListener')
+    server.use(
+      querySubscribeByMediaHandler('tmdb:9301', {}, 200, subscribeRequest),
+      mediaExistsHandler({ data: { item: {} }, success: false }, 200, existsRequest),
+    )
+
+    const { unmount } = await renderCard(createMediaInfo({ collection_id: 44, tmdb_id: 9301 }))
+    getStatusObservers()[0]?.trigger()
+    await Promise.resolve()
+
+    expect(subscribeRequest).not.toHaveBeenCalled()
+    expect(existsRequest).not.toHaveBeenCalled()
+    expect(addListener).toHaveBeenCalledWith('pointerdown', expect.any(Function))
+
+    unmount()
+
+    expect(getStatusObservers()[0]?.disconnect).toHaveBeenCalledOnce()
+    expect(removeListener).toHaveBeenCalledWith('pointerdown', expect.any(Function))
+  })
+
+  it.each([
+    [
+      'media details',
+      createMediaInfo({ title: '详情电影', tmdb_id: 9401 }),
+      '/media',
+      { mediaid: 'tmdb:9401', title: '详情电影', type: '电影', year: '2026' },
+    ],
+    [
+      'collection browse',
+      createMediaInfo({ collection_id: 88, title: '合集入口', tmdb_id: 9402 }),
+      '/browse/tmdb/collection/88',
+      { title: '合集入口' },
+    ],
+  ])('opens %s from the desktop hover state', async (_case, media, path, query) => {
+    const { container } = await renderCard(media)
+
+    await fireEvent.mouseEnter(getHoverArea(container))
+    await waitFor(() => expect(getCard(container)).toHaveClass('app-hover-lift-card--hovering'))
+    await fireEvent.click(getCard(container))
+
+    await waitFor(() => expect(mocks.routerPush).toHaveBeenCalledWith({ path, query }))
+  })
+
+  it('routes directly to resource search when no active sites are available', async () => {
+    installSearchHandlers([], [3, 5])
+    const media = createMediaInfo({ season: 4, title: '直接搜索剧集', tmdb_id: 9501, type: '电视剧' })
+    const { container } = await renderCard(media)
+
+    await fireEvent.mouseEnter(getHoverArea(container))
+    await fireEvent.click(getSearchButton(container))
+
+    await waitFor(() =>
+      expect(mocks.routerPush).toHaveBeenCalledWith({
+        path: '/resource',
+        query: {
+          area: 'title',
+          keyword: 'tmdb:9501',
+          season: 4,
+          sites: '3,5',
+          title: '直接搜索剧集',
+          type: '电视剧',
+          year: '2026',
+        },
+      }),
+    )
+    expect(mocks.openSharedDialog).not.toHaveBeenCalled()
+  })
+
+  it('falls back to global search when site settings cannot provide active selections', async () => {
+    server.use(
+      http.get(siteListUrl, () => HttpResponse.json({ message: 'temporary failure' }, { status: 500 })),
+      http.get(selectedSitesUrl, () => HttpResponse.json({ success: true })),
+    )
+    const media = createMediaInfo({ title: '站点失败搜索', tmdb_id: 9503 })
+    const { container } = await renderCard(media)
+
+    await fireEvent.mouseEnter(getHoverArea(container))
+    await fireEvent.click(getSearchButton(container))
+
+    await waitFor(() =>
+      expect(mocks.routerPush).toHaveBeenCalledWith(
+        expect.objectContaining({ path: '/resource', query: expect.objectContaining({ sites: '' }) }),
+      ),
+    )
+    expect(mocks.openSharedDialog).not.toHaveBeenCalled()
+  })
+
+  it('opens site selection and routes with the selected sites when active sites exist', async () => {
+    installSearchHandlers(
+      [
+        {
+          domain: 'tracker.example',
+          downloader: 'default',
+          id: 7,
+          is_active: true,
+          name: '测试站点',
+          url: 'https://tracker.example',
+        },
+      ],
+      [7],
+    )
+    const media = createMediaInfo({ title: '多站搜索电影', tmdb_id: 9502 })
+    const { container } = await renderCard(media)
+
+    await fireEvent.mouseEnter(getHoverArea(container))
+    await fireEvent.click(getSearchButton(container))
+    await waitFor(() => expect(mocks.openSharedDialog).toHaveBeenCalledOnce())
+
+    const [, dialogProps, dialogEvents] = mocks.openSharedDialog.mock.calls[0] as [
+      unknown,
+      { selected: number[]; sites: Array<{ id: number }> },
+      { search: (sites: number[]) => void },
+    ]
+    expect(dialogProps.selected).toEqual([7])
+    expect(dialogProps.sites.map(site => site.id)).toEqual([7])
+    dialogEvents.search([7, 9])
+
+    await waitFor(() =>
+      expect(mocks.routerPush).toHaveBeenCalledWith(
+        expect.objectContaining({
+          path: '/resource',
+          query: expect.objectContaining({ sites: '7,9' }),
+        }),
+      ),
+    )
+  })
+
+  it('opens active sites with an empty selection when the saved setting fails', async () => {
+    server.use(
+      http.get(siteListUrl, () =>
+        HttpResponse.json([
+          {
+            domain: 'fallback.example',
+            downloader: 'default',
+            id: 8,
+            is_active: true,
+            name: '备用站点',
+            url: 'https://fallback.example',
+          },
+        ]),
+      ),
+      http.get(selectedSitesUrl, () => HttpResponse.json({ message: 'temporary failure' }, { status: 500 })),
+    )
+    const { container } = await renderCard(createMediaInfo({ tmdb_id: 9504 }))
+
+    await fireEvent.mouseEnter(getHoverArea(container))
+    await fireEvent.click(getSearchButton(container))
+
+    await waitFor(() => expect(mocks.openSharedDialog).toHaveBeenCalledOnce())
+    const [, dialogProps] = mocks.openSharedDialog.mock.calls[0] as [unknown, { selected: number[] }]
+    expect(dialogProps.selected).toEqual([])
+  })
+
+  it('loads matching TV seasons before opening the subscription dialog', async () => {
+    const media = createMediaInfo({ season: 2, title: '多季剧集', tmdb_id: 9551, type: '电视剧' })
+    server.use(
+      querySubscribeByMediaHandler('tmdb:9551', { id: 81, season: 2 }),
+      mediaExistsHandler({ data: { item: {} }, success: false }),
+      subscribeListHandler([
+        { best_version: 0, id: 81, season: 3, tmdbid: 9551, type: '电视剧' },
+        { best_version: 1, best_version_full: 1, id: 82, season: 1, tmdbid: 9551, type: '电视剧' },
+        { id: 83, season: 4, tmdbid: 9999, type: '电视剧' },
+        { id: 84, tmdbid: 9551, type: '电影' },
+      ]),
+      http.get(new URL('system/setting/public/DefaultTvSubscribeConfig', API_BASE_URL).href, () =>
+        HttpResponse.json({ data: { value: { best_version: 0 } }, success: true }),
+      ),
+    )
+    const { container } = await renderCard(media)
+    getStatusObservers()[0]?.trigger()
+    await waitFor(() => expect(getActionButtons(container).at(-1)).toHaveClass('text-error'))
+
+    await fireEvent.mouseEnter(getHoverArea(container))
+    await fireEvent.click(getActionButtons(container).at(-1) as HTMLButtonElement)
+
+    await waitFor(() => expect(mocks.openSharedDialog).toHaveBeenCalledOnce())
+    const [, dialogProps] = mocks.openSharedDialog.mock.calls[0] as [unknown, Record<string, unknown>]
+    expect(dialogProps).toMatchObject({
+      selectedSeason: undefined,
+      subscribedSeasonModes: { 1: 'best_version_full', 3: 'normal' },
+      subscribedSeasons: [1, 3],
+    })
+  })
+
+  it('matches custom media IDs when collecting subscribed TV seasons', async () => {
+    const media = createMediaInfo({
+      media_id: 'series-9553',
+      mediaid_prefix: 'custom',
+      season: 2,
+      tmdb_id: undefined,
+      type: '电视剧',
+    })
+    server.use(
+      querySubscribeByMediaHandler('custom:series-9553', { id: 91, season: 2 }),
+      mediaExistsHandler({ data: { item: {} }, success: false }),
+      subscribeListHandler([
+        { id: 91, mediaid: 'custom:series-9553', season: 2, type: '电视剧' },
+        { id: 92, mediaid: 'custom:other', season: 5, type: '电视剧' },
+      ]),
+      http.get(new URL('system/setting/public/DefaultTvSubscribeConfig', API_BASE_URL).href, () =>
+        HttpResponse.json({ data: { value: {} }, success: true }),
+      ),
+    )
+    const { container } = await renderCard(media)
+    getStatusObservers()[0]?.trigger()
+    await waitFor(() => expect(getActionButtons(container).at(-1)).toHaveClass('text-error'))
+
+    await fireEvent.mouseEnter(getHoverArea(container))
+    await fireEvent.click(getActionButtons(container).at(-1) as HTMLButtonElement)
+
+    await waitFor(() => expect(mocks.openSharedDialog).toHaveBeenCalledOnce())
+    const [, dialogProps] = mocks.openSharedDialog.mock.calls[0] as [unknown, Record<string, unknown>]
+    expect(dialogProps).toMatchObject({ subscribedSeasons: [2] })
+  })
+
+  it.each([
+    [
+      'structured TMDB identity',
+      createMediaInfo({
+        media_id: 'series-9554',
+        mediaid_prefix: undefined,
+        season: 2,
+        source: 'themoviedb',
+        tmdb_id: undefined,
+        type: '电视剧',
+      }),
+      'tmdb:series-9554',
+      [
+        { id: 93, media_id: 'series-9554', media_source: 'themoviedb', season: 4, type: '电视剧' },
+        { id: 94, media_id: 'other', media_source: 'themoviedb', season: 5, type: '电视剧' },
+      ],
+      [4],
+    ],
+    [
+      'legacy AniList identity',
+      createMediaInfo({ anilist_id: 154588, season: 2, source: 'anilist', tmdb_id: undefined, type: '电视剧' }),
+      'anilist:154588',
+      [
+        { anilistid: 154588, id: 95, season: 1, type: '电视剧' },
+        { anilistid: 154589, id: 96, season: 3, type: '电视剧' },
+      ],
+      [1],
+    ],
+  ])('matches %s when collecting subscribed TV seasons', async (_label, media, mediaId, subscribes, expected) => {
+    server.use(
+      querySubscribeByMediaHandler(mediaId, { id: 93, season: 2 }),
+      mediaExistsHandler({ data: { item: {} }, success: false }),
+      subscribeListHandler(subscribes),
+      http.get(new URL('system/setting/public/DefaultTvSubscribeConfig', API_BASE_URL).href, () =>
+        HttpResponse.json({ data: { value: {} }, success: true }),
+      ),
+    )
+    const { container } = await renderCard(media)
+    getStatusObservers()[0]?.trigger()
+    await waitFor(() => expect(getActionButtons(container).at(-1)).toHaveClass('text-error'))
+
+    await fireEvent.mouseEnter(getHoverArea(container))
+    await fireEvent.click(getActionButtons(container).at(-1) as HTMLButtonElement)
+
+    await waitFor(() => expect(mocks.openSharedDialog).toHaveBeenCalledOnce())
+    const [, dialogProps] = mocks.openSharedDialog.mock.calls[0] as [unknown, Record<string, unknown>]
+    expect(dialogProps).toMatchObject({ subscribedSeasons: expected })
+  })
+
+  it('updates image badges on load and falls back after an image error', async () => {
+    const media = createMediaInfo({
+      poster_path: '/original/poster.jpg',
+      source: 'themoviedb',
+      tmdb_id: 9552,
+      type: '电视剧',
+      vote_average: 8.6,
+    })
+    const VImgStub = defineComponent({
+      name: 'VImg',
+      emits: ['error', 'load'],
+      props: { src: String },
+      setup(props, { emit, slots }) {
+        return () =>
+          h('div', { 'data-src': props.src }, [
+            h('button', { 'aria-label': '图片加载成功', onClick: () => emit('load') }),
+            h('button', { 'aria-label': '图片加载失败', onClick: () => emit('error') }),
+            slots.default?.(),
+          ])
+      },
+    })
+    const { container } = await renderWithProviders(MediaCard, {
+      props: { media, width: '9rem' },
+      initialState: { user: { superUser: true } },
+      global: { stubs: { VImg: VImgStub } },
+    })
+
+    await fireEvent.click(container.querySelector('[aria-label="图片加载成功"]') as HTMLElement)
+    await waitFor(() => expect(container.querySelector('.media-card')).toHaveClass('ring-1'))
+    expect(container).toHaveTextContent('TV')
+    expect(container).toHaveTextContent('8.6')
+
+    await fireEvent.click(container.querySelector('[aria-label="图片加载失败"]') as HTMLElement)
+    await waitFor(() =>
+      expect(container.querySelector('.media-card-title')?.parentElement).not.toHaveStyle({ display: 'none' }),
+    )
+  })
+
+  it('renders the AniList source badge after the poster loads', async () => {
+    const media = createMediaInfo({
+      anilist_id: 154588,
+      poster_path: '/original/anilist.jpg',
+      source: 'anilist',
+      tmdb_id: undefined,
+      type: '电视剧',
+    })
+    const VImgStub = defineComponent({
+      name: 'VImg',
+      emits: ['load'],
+      props: { src: String },
+      setup(_props, { emit, slots }) {
+        return () =>
+          h('div', [h('button', { 'aria-label': '图片加载成功', onClick: () => emit('load') }), slots.default?.()])
+      },
+    })
+    const { container } = await renderWithProviders(MediaCard, {
+      props: { media, width: '9rem' },
+      initialState: { user: { superUser: true } },
+      global: { stubs: { VImg: VImgStub } },
+    })
+
+    await fireEvent.click(container.querySelector('[aria-label="图片加载成功"]') as HTMLElement)
+
+    await waitFor(() => expect(container.querySelector('.v-avatar .iconify--mdi')).not.toBeNull())
+  })
+
+  it('hides search and subscribe actions when the user lacks both permissions', async () => {
+    const { container } = await renderCard(createMediaInfo({ tmdb_id: 9601 }), {
+      permissions: {
+        discovery: true,
+        manage: false,
+        search: false,
+        subscribe: false,
+      },
+      superUser: false,
+    })
+
+    await fireEvent.mouseEnter(getHoverArea(container))
+
+    expect(getActionButtons(container)).toHaveLength(0)
+  })
+
+  it('uses first tap to reveal details, second tap to route, and outside pointerdown to collapse', async () => {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      ...window.matchMedia(''),
+      matches: true,
+    })
+    const media = createMediaInfo({ title: '触摸卡片', tmdb_id: 9701 })
+    const { container } = await renderCard(media)
+    const detail = container.querySelector<HTMLElement>('.media-card-title')?.parentElement
+    expect(detail).not.toBeNull()
+
+    await fireEvent.click(getCard(container))
+    expect(detail).not.toHaveStyle({ display: 'none' })
+    expect(mocks.routerPush).not.toHaveBeenCalled()
+
+    await fireEvent.pointerDown(document.body)
+    expect(detail).toHaveStyle({ display: 'none' })
+
+    await fireEvent.click(getCard(container))
+    await fireEvent.click(getCard(container))
+    await waitFor(() => expect(mocks.routerPush).toHaveBeenCalledWith(expect.objectContaining({ path: '/media' })))
+  })
+})

src/components/cards/__tests__/MediaServerImageCards.spec.ts

@@ -0,0 +1,39 @@
+import type { MediaServerPlayItem } from '@/api/types'
+import PlayingBackdropCard from '@/components/cards/PlayingBackdropCard.vue'
+import PosterCard from '@/components/cards/PosterCard.vue'
+import { renderWithProviders } from '@tests/support/render'
+import { defineComponent, h } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/utils/appDeepLink', () => ({
+  openMediaServerItem: vi.fn(),
+}))
+
+const media: MediaServerPlayItem = {
+  id: 'media-1',
+  image: 'https://media.example.com/poster.jpg',
+  title: 'Test media',
+}
+
+const VImgStub = defineComponent({
+  inheritAttrs: false,
+  props: {
+    crossorigin: String,
+    src: String,
+  },
+  setup: props => () => h('img', { crossorigin: props.crossorigin, src: props.src }),
+})
+
+describe.each([
+  ['PosterCard', PosterCard],
+  ['PlayingBackdropCard', PlayingBackdropCard],
+])('%s image request mode', (_name, component) => {
+  it('loads the media server image anonymously', async () => {
+    const { container } = await renderWithProviders(component, {
+      global: { stubs: { VImg: VImgStub } },
+      props: { media },
+    })
+
+    expect(container.querySelector('img')).toHaveAttribute('crossorigin', 'anonymous')
+  })
+})

src/components/cards/__tests__/SiteCard.spec.ts

@@ -0,0 +1,253 @@
+import type { Site, SiteStatistic, SiteUserData } from '@/api/types'
+import SiteCard from '@/components/cards/SiteCard.vue'
+import { getActiveRequestsCount } from '@/utils/requestOptimizer'
+import { fireEvent, screen, waitFor } from '@testing-library/vue'
+import { createSite, createSiteStatistic, createSiteUserData } from '@tests/support/factories/site'
+import { deleteSiteHandler, siteIconHandler, testSiteConnectionHandler } from '@tests/support/msw/handlers/site'
+import { server } from '@tests/support/msw/server'
+import { renderWithProviders } from '@tests/support/render'
+import { defineComponent, h } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  confirm: vi.fn(),
+  openSharedDialog: vi.fn(),
+  toastError: vi.fn(),
+  toastSuccess: vi.fn(),
+}))
+
+vi.mock('vue-toastification', () => ({
+  useToast: () => ({ error: mocks.toastError, success: mocks.toastSuccess }),
+}))
+
+vi.mock('@/composables/useConfirm', () => ({
+  useConfirm: () => mocks.confirm,
+}))
+
+vi.mock('@/composables/useSharedDialog', () => ({
+  openSharedDialog: (...args: unknown[]) => mocks.openSharedDialog(...args),
+}))
+
+const ImageStub = defineComponent({
+  inheritAttrs: false,
+  props: {
+    alt: String,
+    src: String,
+  },
+  setup: props => () => h('img', { alt: props.alt, src: props.src }),
+})
+
+const imageStubs = { VImg: ImageStub }
+
+async function renderCard(
+  siteOverrides: Partial<Site> = {},
+  props: Partial<{ data: SiteUserData; sortable: boolean; stats: SiteStatistic }> = {},
+) {
+  const site = createSite(siteOverrides)
+  server.use(siteIconHandler(site.id, `https://images.example.com/site-${site.id}.png`))
+  const result = await renderWithProviders(SiteCard, {
+    global: { stubs: imageStubs },
+    props: { site, ...props },
+  })
+
+  await waitFor(() => {
+    expect(result.container.querySelector<HTMLImageElement>('img')?.src).toContain(`site-${site.id}.png`)
+  })
+  await waitFor(() => expect(getActiveRequestsCount()).toBe(0))
+  return { ...result, site }
+}
+
+function getActionButton(container: Element, index: number) {
+  const button = container.querySelectorAll<HTMLButtonElement>('.site-card-actions > button')[index]
+  if (!button) throw new Error(`Missing action button ${index}`)
+  return button
+}
+
+function getTestButton(container: Element) {
+  const button = container.querySelector('.pulse-dot')?.closest('button')
+  if (!button) throw new Error('Missing connectivity test button')
+  return button
+}
+
+function getDialogCall(index = 0) {
+  const [, props, events, options] = mocks.openSharedDialog.mock.calls[index] as [
+    unknown,
+    Record<string, unknown>,
+    Record<string, () => void>,
+    Record<string, unknown>,
+  ]
+  return { events, options, props }
+}
+
+describe('SiteCard display', () => {
+  beforeEach(() => {
+    mocks.confirm.mockResolvedValue(true)
+    mocks.openSharedDialog.mockReturnValue({ close: vi.fn(), id: 1, updateProps: vi.fn() })
+  })
+
+  it('renders active site metadata, transfer values, feature flags, and a healthy border', async () => {
+    const { container, site } = await renderCard(
+      { filter: 'free', limit_interval: 10, proxy: true, render: true },
+      {
+        data: createSiteUserData({ download: 1024, upload: 2048 }),
+        stats: createSiteStatistic({ lst_state: 0, seconds: 2 }),
+      },
+    )
+
+    expect(screen.getByText(site.name)).toBeInTheDocument()
+    expect(screen.getByText(site.url)).toBeInTheDocument()
+    expect(screen.getByText('2.00 KB')).toBeInTheDocument()
+    expect(screen.getByText('1.00 KB')).toBeInTheDocument()
+    expect(container.querySelector('.site-card')).toHaveClass('border-success')
+    expect(container.querySelectorAll('.ml-auto.flex.shrink-0.items-center.gap-2 > div')).toHaveLength(4)
+    expect(
+      [...container.querySelectorAll('.border-t .v-progress-linear')].map(progress =>
+        progress.getAttribute('aria-valuenow'),
+      ),
+    ).toEqual(['100', '50'])
+  })
+
+  it.each([
+    ['failed', createSiteStatistic({ lst_state: 1 }), 'border-error'],
+    ['slow', createSiteStatistic({ lst_state: 0, seconds: 5 }), 'border-warning'],
+    ['unknown without stats', undefined, null],
+    ['unknown without duration', createSiteStatistic({ lst_state: 0, seconds: 0 }), null],
+  ] as const)('projects %s connection state without inventing status', async (_case, stats, borderClass) => {
+    const { container } = await renderCard({}, stats ? { stats } : {})
+    const card = container.querySelector('.site-card')
+
+    if (borderClass) expect(card).toHaveClass(borderClass)
+    else expect(card).not.toHaveClass('border-error', 'border-warning', 'border-success')
+  })
+
+  it('keeps zero transfer data visible with stable minimum progress', async () => {
+    await renderCard({ is_active: false }, { data: createSiteUserData({ download: 0, upload: 0 }) })
+
+    expect(screen.getAllByText('0.00 B')).toHaveLength(2)
+    expect(
+      [...document.querySelectorAll('.border-t .v-progress-linear')].map(progress =>
+        progress.getAttribute('aria-valuenow'),
+      ),
+    ).toEqual(['3', '3'])
+  })
+})
+
+describe('SiteCard interactions', () => {
+  beforeEach(() => {
+    mocks.confirm.mockResolvedValue(true)
+    mocks.openSharedDialog.mockReturnValue({ close: vi.fn(), id: 1, updateProps: vi.fn() })
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  it.each([
+    ['success', 200, { success: true }, 'success'],
+    ['business failure', 200, { message: '认证失败', success: false }, 'error'],
+  ] as const)(
+    'reports connectivity %s and refreshes the current domain',
+    async (_case, status, response, toastType) => {
+      const requested = vi.fn()
+      const { container, emitted, site } = await renderCard()
+      server.use(testSiteConnectionHandler(site.id, response, status, requested))
+
+      await fireEvent.click(getTestButton(container))
+
+      await waitFor(() => expect(requested).toHaveBeenCalledOnce())
+      const toast = toastType === 'success' ? mocks.toastSuccess : mocks.toastError
+      await waitFor(() => expect(toast).toHaveBeenCalledOnce())
+      expect(emitted('refresh-stats')).toEqual([[site.domain]])
+      expect(getTestButton(container)).not.toBeDisabled()
+    },
+  )
+
+  it('restores connectivity controls after an HTTP failure', async () => {
+    const requested = vi.fn()
+    const { container, emitted, site } = await renderCard()
+    server.use(testSiteConnectionHandler(site.id, { message: 'server down', success: false }, 500, requested))
+
+    await fireEvent.click(getTestButton(container))
+    await waitFor(() => expect(requested).toHaveBeenCalledOnce())
+
+    await waitFor(() => expect(getTestButton(container)).not.toBeDisabled())
+    expect(emitted('refresh-stats') ?? []).toHaveLength(0)
+  })
+
+  it.each([
+    ['cancelled', false, 200, { success: true }, false, null],
+    ['success', true, 200, { success: true }, true, null],
+    ['business failure', true, 200, { message: '仍在使用', success: false }, false, '仍在使用'],
+    ['HTTP failure', true, 500, { message: 'server down', success: false }, false, null],
+  ] as const)('handles deletion when %s', async (_case, confirmed, status, response, removed, expectedMessage) => {
+    const requested = vi.fn()
+    mocks.confirm.mockResolvedValue(confirmed)
+    const { container, emitted, site } = await renderCard()
+    server.use(deleteSiteHandler(site.id, response, status, requested))
+
+    await fireEvent.click(getActionButton(container, 3))
+    await fireEvent.click(await screen.findByText('删除站点'))
+    await waitFor(() => expect(mocks.confirm).toHaveBeenCalledOnce())
+
+    if (confirmed) await waitFor(() => expect(requested).toHaveBeenCalledOnce())
+    else expect(requested).not.toHaveBeenCalled()
+    expect(emitted('remove') ?? []).toHaveLength(removed ? 1 : 0)
+    if (expectedMessage) expect(mocks.toastError).toHaveBeenCalledWith(expect.stringContaining(expectedMessage))
+    if (_case === 'HTTP failure') expect(mocks.toastError).toHaveBeenCalledOnce()
+  })
+
+  it('opens each shared dialog with exact props, close events, and refresh ownership', async () => {
+    const { container, emitted, site } = await renderCard()
+
+    await fireEvent.click(container.querySelector('.site-card') as Element)
+    expect(getDialogCall().props).toEqual({ site })
+    expect(getDialogCall().options).toEqual({ closeOn: ['close'] })
+    getDialogCall().events.close()
+    expect(emitted('refresh-stats')).toEqual([[site.domain]])
+
+    await fireEvent.click(getActionButton(container, 1))
+    expect(getDialogCall(1).props).toEqual({ site })
+    expect(getDialogCall(1).options).toEqual({ closeOn: ['close'] })
+
+    await fireEvent.click(getActionButton(container, 2))
+    expect(getDialogCall(2).props).toEqual({ site })
+    expect(getDialogCall(2).options).toEqual({ closeOn: ['close', 'done'] })
+    getDialogCall(2).events.done()
+    expect(emitted('refresh-stats')).toEqual([[site.domain], [site.domain]])
+
+    await fireEvent.click(getActionButton(container, 3))
+    await fireEvent.click(await screen.findByText('编辑站点'))
+    expect(getDialogCall(3).props).toEqual({ siteid: site.id })
+    expect(getDialogCall(3).options).toEqual({ closeOn: ['close', 'save', 'remove'] })
+    getDialogCall(3).events.save()
+    getDialogCall(3).events.remove()
+    expect(emitted('update')).toHaveLength(1)
+    expect(emitted('remove')).toHaveLength(1)
+  })
+
+  it('opens the site URL normally and isolates every card action in sortable mode', async () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null)
+    const { container, rerender, site } = await renderCard()
+
+    await fireEvent.click(screen.getByText(site.url))
+    expect(open).toHaveBeenCalledWith(site.url, '_blank')
+
+    await rerender({ site, sortable: true })
+    expect(container.querySelector('.site-card-actions')).not.toBeInTheDocument()
+    await fireEvent.click(screen.getByText(site.url))
+    await fireEvent.click(container.querySelector('.site-card') as Element)
+    expect(open).toHaveBeenCalledOnce()
+    expect(mocks.openSharedDialog).not.toHaveBeenCalled()
+  })
+
+  it('falls back to the default icon when the icon request fails', async () => {
+    const site = createSite()
+    const requested = vi.fn()
+    server.use(siteIconHandler(site.id, null, 500, requested))
+    const { container } = await renderWithProviders(SiteCard, {
+      global: { stubs: imageStubs },
+      props: { site },
+    })
+
+    await waitFor(() => expect(requested).toHaveBeenCalledOnce())
+    await waitFor(() => expect(getActiveRequestsCount()).toBe(0))
+    await waitFor(() => expect(container.querySelector<HTMLImageElement>('img')?.src).toContain('/site.webp'))
+  })
+})

src/components/cards/__tests__/SubscribeCard.spec.ts

@@ -164,7 +164,16 @@ describe('SubscribeCard display and progress', () => {
     ['disabled flag', false, true, 3, '电视剧', 80, false, false],
   ])(
     'normalizes %s for wash progress and badges',
-    async (_case, bestVersion, bestVersionFull, completedEpisode, type, expectedProgress, expectedWash, expectedFull) => {
+    async (
+      _case,
+      bestVersion,
+      bestVersionFull,
+      completedEpisode,
+      type,
+      expectedProgress,
+      expectedWash,
+      expectedFull,
+    ) => {
       const { container } = await renderCard({
         best_version: bestVersion,
         best_version_full: bestVersionFull,
@@ -291,10 +300,20 @@ describe('SubscribeCard interaction boundaries', () => {
   })
 
   it.each([
-    ['TMDB before all fallbacks', { bangumiid: '33', doubanid: '22', mediaid: 'custom:44', tmdbid: 11 }, 'tmdb:11'],
-    ['Douban before Bangumi', { bangumiid: '33', doubanid: '22', mediaid: 'custom:44', tmdbid: 0 }, 'douban:22'],
-    ['Bangumi before custom', { bangumiid: '33', doubanid: undefined, mediaid: 'custom:44', tmdbid: 0 }, 'bangumi:33'],
-    ['custom media ID last', { bangumiid: undefined, doubanid: undefined, mediaid: 'custom:44', tmdbid: 0 }, 'custom:44'],
+    ['TMDB before all fallbacks', { bangumiid: 33, doubanid: '22', mediaid: 'custom:44', tmdbid: 11 }, 'tmdb:11'],
+    ['Douban before Bangumi', { bangumiid: 33, doubanid: '22', mediaid: 'custom:44', tmdbid: 0 }, 'douban:22'],
+    ['Bangumi before custom', { bangumiid: 33, doubanid: undefined, mediaid: 'custom:44', tmdbid: 0 }, 'bangumi:33'],
+    [
+      'AniList before legacy custom',
+      { anilistid: 55, bangumiid: undefined, mediaid: 'custom:44', tmdbid: 0 },
+      'anilist:55',
+    ],
+    ['selected primary identity', { media_id: '66', media_source: 'anilist', tmdbid: 11 }, 'anilist:66'],
+    [
+      'custom media ID last',
+      { bangumiid: undefined, doubanid: undefined, mediaid: 'custom:44', tmdbid: 0 },
+      'custom:44',
+    ],
   ])('routes media details with %s', async (_case, identifiers, expectedMediaId) => {
     const { container, media } = await renderCard(identifiers)
 
@@ -364,30 +383,34 @@ describe('SubscribeCard item operations', () => {
     ['confirmation cancellation', false, 200, { success: true }, null],
     ['business failure', true, 200, { message: 'rejected', success: false }, '暂停失败：rejected'],
     ['HTTP failure', true, 500, { message: 'server down', success: false }, '请求失败，请稍后重试'],
-  ] as const)(
-    'keeps status unchanged after %s',
-    async (_case, confirmed, status, response, expectedError) => {
-      const requested = vi.fn()
-      mocks.confirm.mockResolvedValue(confirmed)
-      const { container, emitted, media } = await renderCard({ state: 'R' })
-      server.use(updateSubscribeStatusHandler(media.id, response, status, requested))
+  ] as const)('keeps status unchanged after %s', async (_case, confirmed, status, response, expectedError) => {
+    const requested = vi.fn()
+    mocks.confirm.mockResolvedValue(confirmed)
+    const { container, emitted, media } = await renderCard({ state: 'R' })
+    server.use(updateSubscribeStatusHandler(media.id, response, status, requested))
 
-      await chooseMenuItem(container, '暂停')
-      await waitFor(() => expect(mocks.confirm).toHaveBeenCalledOnce())
+    await chooseMenuItem(container, '暂停')
+    await waitFor(() => expect(mocks.confirm).toHaveBeenCalledOnce())
 
-      if (confirmed) await waitFor(() => expect(requested).toHaveBeenCalledOnce())
-      else expect(requested).not.toHaveBeenCalled()
-      if (expectedError) await waitFor(() => expect(mocks.toastError).toHaveBeenCalledWith(expectedError))
-      else expect(mocks.toastError).not.toHaveBeenCalled()
-      expect(container.querySelector('.subscribe-card')).not.toHaveClass('subscribe-card-paused')
-      expect(emitted('save') ?? []).toHaveLength(0)
-    },
-  )
+    if (confirmed) await waitFor(() => expect(requested).toHaveBeenCalledOnce())
+    else expect(requested).not.toHaveBeenCalled()
+    if (expectedError) await waitFor(() => expect(mocks.toastError).toHaveBeenCalledWith(expectedError))
+    else expect(mocks.toastError).not.toHaveBeenCalled()
+    expect(container.querySelector('.subscribe-card')).not.toHaveClass('subscribe-card-paused')
+    expect(emitted('save') ?? []).toHaveLength(0)
+  })
 
   it.each([
     ['success', true, 200, { success: true }, 'success', '卡片测试媒体 重置成功！'],
     ['confirmation cancellation', false, 200, { success: true }, null, null],
-    ['business failure', true, 200, { message: 'rejected', success: false }, 'error', '卡片测试媒体 重置失败：rejected'],
+    [
+      'business failure',
+      true,
+      200,
+      { message: 'rejected', success: false },
+      'error',
+      '卡片测试媒体 重置失败：rejected',
+    ],
     ['HTTP failure', true, 500, { message: 'server down', success: false }, 'error', '请求失败，请稍后重试'],
   ] as const)(
     'handles reset %s without speculative state',
@@ -423,16 +446,19 @@ describe('SubscribeCard item operations', () => {
   it.each([
     ['success', 200, { success: true }, true, null],
     ['HTTP failure', 500, { message: 'server down', success: false }, false, '请求失败，请稍后重试'],
-  ] as const)('handles delete %s without a synthetic business-failure branch', async (_case, status, response, removed, error) => {
-    const requested = vi.fn()
-    const { container, emitted, media } = await renderCard()
-    server.use(deleteSubscribeByIdHandler(media.id, response, status, requested))
+  ] as const)(
+    'handles delete %s without a synthetic business-failure branch',
+    async (_case, status, response, removed, error) => {
+      const requested = vi.fn()
+      const { container, emitted, media } = await renderCard()
+      server.use(deleteSubscribeByIdHandler(media.id, response, status, requested))
 
-    await chooseMenuItem(container, '取消订阅')
+      await chooseMenuItem(container, '取消订阅')
 
-    await waitFor(() => expect(requested).toHaveBeenCalledOnce())
-    expect(emitted('remove') ?? []).toHaveLength(removed ? 1 : 0)
-    if (error) await waitFor(() => expect(mocks.toastError).toHaveBeenCalledWith(error))
-    else expect(mocks.toastError).not.toHaveBeenCalled()
-  })
+      await waitFor(() => expect(requested).toHaveBeenCalledOnce())
+      expect(emitted('remove') ?? []).toHaveLength(removed ? 1 : 0)
+      if (error) await waitFor(() => expect(mocks.toastError).toHaveBeenCalledWith(error))
+      else expect(mocks.toastError).not.toHaveBeenCalled()
+    },
+  )
 })

src/components/cards/__tests__/SubscribeShareCard.spec.ts

@@ -0,0 +1,181 @@
+import { formatDateDifference } from '@/@core/utils/formatters'
+import type { SubscribeShare } from '@/api/types'
+import SubscribeShareCard from '@/components/cards/SubscribeShareCard.vue'
+import { fireEvent, screen, waitFor } from '@testing-library/vue'
+import { createSubscribeShare } from '@tests/support/factories/subscribe'
+import { renderWithProviders } from '@tests/support/render'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  openSharedDialog: vi.fn(),
+  routerPush: vi.fn(),
+}))
+
+vi.mock('@/composables/useSharedDialog', () => ({
+  openSharedDialog: (...args: unknown[]) => mocks.openSharedDialog(...args),
+}))
+
+vi.mock('@/router', () => ({
+  default: { push: (...args: unknown[]) => mocks.routerPush(...args) },
+}))
+
+vi.mock('@iconify/vue', () => ({
+  Icon: {
+    props: ['icon'],
+    template: '<span :data-icon="icon" />',
+  },
+}))
+
+type ShareOverrides = Partial<SubscribeShare>
+
+function observeElementsImmediately() {
+  class ImmediateIntersectionObserver {
+    readonly root = null
+    readonly rootMargin = '0px'
+    readonly thresholds = [0]
+
+    constructor(private readonly callback: IntersectionObserverCallback) {}
+
+    disconnect() {}
+
+    observe(target: Element) {
+      this.callback([{ intersectionRatio: 1, isIntersecting: true, target } as IntersectionObserverEntry], this)
+    }
+
+    takeRecords(): IntersectionObserverEntry[] {
+      return []
+    }
+
+    unobserve() {}
+  }
+
+  vi.stubGlobal('IntersectionObserver', ImmediateIntersectionObserver)
+}
+
+async function renderCard(overrides: ShareOverrides = {}, globalImageCache = false) {
+  const media = createSubscribeShare(overrides)
+  const result = await renderWithProviders(SubscribeShareCard, {
+    initialState: {
+      globalSettings: {
+        data: { GLOBAL_IMAGE_CACHE: globalImageCache },
+        initialized: true,
+        loading: false,
+      },
+    },
+    props: { media },
+  })
+
+  return { ...result, media }
+}
+
+async function loadPoster(container: Element) {
+  const backdrop = container.querySelector<HTMLImageElement>('img')
+  expect(backdrop).not.toBeNull()
+  await fireEvent.load(backdrop as HTMLImageElement)
+  await waitFor(() => expect(container.querySelectorAll('img')).toHaveLength(2))
+  return container.querySelectorAll<HTMLImageElement>('img')[1]
+}
+
+function getDialogCall(index = 0) {
+  const [, props, events, options] = mocks.openSharedDialog.mock.calls[index] as [
+    unknown,
+    Record<string, unknown>,
+    Record<string, (...args: unknown[]) => void>,
+    Record<string, unknown>,
+  ]
+  return { events, options, props }
+}
+
+describe('SubscribeShareCard', () => {
+  beforeEach(() => {
+    observeElementsImmediately()
+    mocks.openSharedDialog.mockReturnValue({ close: vi.fn(), id: 1, updateProps: vi.fn() })
+  })
+
+  it('renders sharing metadata and reveals the cached poster after the backdrop loads', async () => {
+    const { container, media } = await renderCard({}, true)
+
+    expect(screen.getByText(media.share_title!)).toBeInTheDocument()
+    expect(screen.getByText(media.share_comment!)).toBeInTheDocument()
+    expect(screen.getByText(media.share_user!)).toBeInTheDocument()
+    expect(screen.getByText(media.count!.toLocaleString())).toBeInTheDocument()
+    expect(screen.getByText(formatDateDifference(media.date!))).toBeInTheDocument()
+
+    const backdrop = container.querySelector<HTMLImageElement>('img')
+    expect(backdrop).not.toBeNull()
+    expect((backdrop as HTMLImageElement).src).toContain('system/cache/image?url=')
+    expect((backdrop as HTMLImageElement).src).toContain(encodeURIComponent(media.backdrop!))
+
+    const poster = await loadPoster(container)
+    expect(poster.src).toContain('system/cache/image?url=')
+    expect(poster.src).toContain(encodeURIComponent(media.poster!))
+
+    const dateMetadata = screen.getByText(formatDateDifference(media.date!)).closest('.v-card-text')
+    expect(dateMetadata?.querySelector('[data-icon="mdi-calendar"], [data-icon="mdi:calendar"]')).not.toBeNull()
+  })
+
+  it('falls back to the poster when the backdrop is missing and hides a zero reuse count', async () => {
+    const { container, media } = await renderCard({ backdrop: undefined, count: 0 })
+
+    const backdrop = container.querySelector<HTMLImageElement>('img')
+    expect(backdrop).not.toBeNull()
+    expect((backdrop as HTMLImageElement).src).toContain(media.poster!)
+    expect(screen.queryByText('0')).not.toBeInTheDocument()
+  })
+
+  it.each([
+    ['TMDB before Douban', { doubanid: '2202', tmdbid: 1101 }, 'tmdb:1101'],
+    ['Douban without TMDB', { doubanid: '2202', tmdbid: undefined }, 'douban:2202'],
+    ['Bangumi without TMDB or Douban', { bangumiid: 3303, doubanid: undefined, tmdbid: undefined }, 'bangumi:3303'],
+    ['AniList without other IDs', { anilistid: 4404, bangumiid: undefined, tmdbid: undefined }, 'anilist:4404'],
+  ] as const)('routes media details with %s while keeping the fork dialog closed', async (_case, ids, mediaid) => {
+    const { container, media } = await renderCard(ids)
+    const poster = await loadPoster(container)
+
+    await fireEvent.click(poster)
+
+    expect(mocks.routerPush).toHaveBeenCalledWith({
+      path: '/media',
+      query: {
+        mediaid,
+        title: media.name,
+        type: media.type,
+        year: media.year,
+      },
+    })
+    expect(mocks.openSharedDialog).not.toHaveBeenCalled()
+  })
+
+  it('opens the fork dialog with the exact media and replaces it with editing after fork success', async () => {
+    const { container, media } = await renderCard()
+    const card = container.querySelector<HTMLElement>('.v-card')
+    expect(card).not.toBeNull()
+
+    await fireEvent.click(card as HTMLElement)
+
+    expect(mocks.openSharedDialog).toHaveBeenCalledOnce()
+    const forkDialog = getDialogCall()
+    expect(forkDialog.props).toEqual({ media })
+    expect(forkDialog.options).toEqual({ closeOn: ['close', 'fork', 'delete'] })
+
+    forkDialog.events.fork(4701)
+
+    expect(mocks.openSharedDialog).toHaveBeenCalledTimes(2)
+    const editDialog = getDialogCall(1)
+    expect(editDialog.props).toEqual({ subid: 4701 })
+    expect(editDialog.events).toEqual({})
+    expect(editDialog.options).toEqual({ closeOn: ['close', 'save', 'remove'] })
+  })
+
+  it('forwards deletion from the fork dialog without depending on its response payload', async () => {
+    const { container, emitted } = await renderCard()
+    const card = container.querySelector<HTMLElement>('.v-card')
+    expect(card).not.toBeNull()
+    await fireEvent.click(card as HTMLElement)
+
+    getDialogCall().events.delete({ id: 9999 })
+
+    expect(emitted('delete')).toHaveLength(1)
+    expect(emitted('delete')?.[0]).toEqual([])
+  })
+})

src/components/dialog/AddDownloadDialog.vue

@@ -2,7 +2,7 @@
 import { useToast } from 'vue-toastification'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
-import type { DownloaderConf, MediaInfo, TorrentInfo, TransferDirectoryConf } from '@/api/types'
+import type { DownloaderConf, MediaDataSource, MediaInfo, TorrentInfo, TransferDirectoryConf } from '@/api/types'
 import { formatFileSize } from '@/@core/utils/formatters'
 import { VCardTitle, VChip } from 'vuetify/lib/components/index.mjs'
 import { useI18n } from 'vue-i18n'
@@ -18,7 +18,11 @@ const globalSettingsStore = useGlobalSettingsStore()
 const globalSettings = globalSettingsStore.globalSettings
 
 // 当前识别类型
-const mediaSource = ref(globalSettings.RECOGNIZE_SOURCE || 'themoviedb')
+const mediaSource = ref<MediaDataSource>(
+  ['themoviedb', 'douban', 'bangumi', 'anilist'].includes(globalSettings.RECOGNIZE_SOURCE)
+    ? globalSettings.RECOGNIZE_SOURCE
+    : 'themoviedb',
+)
 
 // 输入参数
 const props = defineProps({
@@ -51,11 +55,19 @@ const loading = ref(false)
 // 是否显示高级选项
 const showAdvancedOptions = ref(false)
 
-// TMDB ID
-const tmdbid = ref<number | undefined>(undefined)
+// 当前数据源的原生媒体ID
+const mediaId = ref<string | undefined>(undefined)
 
-// 豆瓣ID
-const doubanId = ref<string | undefined>(undefined)
+// 当前数据源对应的原生ID标签。
+const mediaIdLabel = computed(() => {
+  const labels: Record<MediaDataSource, string> = {
+    themoviedb: t('dialog.reorganize.tmdbId'),
+    douban: t('dialog.reorganize.doubanId'),
+    bangumi: t('dialog.reorganize.bangumiId'),
+    anilist: t('dialog.reorganize.anilistId'),
+  }
+  return labels[mediaSource.value]
+})
 
 // TMDB选择对话框
 const mediaSelectorDialog = ref(false)
@@ -140,11 +152,9 @@ async function addDownload() {
     }
 
     // 添加媒体ID辅助识别
-    if (tmdbid.value) {
-      payload.tmdbid = tmdbid.value
-    }
-    if (doubanId.value) {
-      payload.doubanid = doubanId.value
+    if (mediaId.value) {
+      payload.media_source = mediaSource.value
+      payload.media_id = mediaId.value
     }
 
     const endpoint = props.media ? 'download/' : 'download/add'
@@ -269,23 +279,9 @@ onMounted(() => {
         <VRow v-show="showAdvancedOptions" class="px-5">
           <VCol cols="12">
             <VTextField
-              v-if="mediaSource === 'themoviedb'"
-              v-model="tmdbid"
-              :label="t('dialog.reorganize.tmdbId')"
-              :placeholder="t('dialog.reorganize.mediaIdPlaceholder')"
-              :rules="[numberValidator]"
-              append-inner-icon="mdi-magnify"
-              :hint="t('dialog.reorganize.mediaIdHint')"
-              persistent-hint
-              prepend-inner-icon="mdi-identifier"
-              variant="underlined"
-              density="comfortable"
-              @click:append-inner="mediaSelectorDialog = true"
-            />
-            <VTextField
-              v-else
-              v-model="doubanId"
-              :label="t('dialog.reorganize.doubanId')"
+              v-model="mediaId"
+              class="app-responsive-input--keep-append-action"
+              :label="mediaIdLabel"
               :placeholder="t('dialog.reorganize.mediaIdPlaceholder')"
               :rules="[numberValidator]"
               append-inner-icon="mdi-magnify"
@@ -307,13 +303,7 @@ onMounted(() => {
     </VCard>
     <!-- 媒体ID选择器 -->
     <VDialog v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
-      <MediaIdSelector
-        v-if="mediaSource === 'themoviedb'"
-        v-model="tmdbid"
-        @close="mediaSelectorDialog = false"
-        :type="mediaSource"
-      />
-      <MediaIdSelector v-else v-model="doubanId" @close="mediaSelectorDialog = false" :type="mediaSource" />
+      <MediaIdSelector v-model="mediaId" @close="mediaSelectorDialog = false" :type="mediaSource" />
     </VDialog>
   </VDialog>
 </template>

src/components/dialog/AddSubtitleDownloadDialog.vue

@@ -2,7 +2,7 @@
 import { useToast } from 'vue-toastification'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
-import type { SubtitleInfo, TransferDirectoryConf } from '@/api/types'
+import type { MediaDataSource, SubtitleInfo, TransferDirectoryConf } from '@/api/types'
 import { formatFileSize } from '@/@core/utils/formatters'
 import { useI18n } from 'vue-i18n'
 import MediaIdSelector from '../misc/MediaIdSelector.vue'
@@ -17,7 +17,11 @@ const globalSettingsStore = useGlobalSettingsStore()
 const globalSettings = globalSettingsStore.globalSettings
 
 // 当前识别类型
-const mediaSource = ref(globalSettings.RECOGNIZE_SOURCE || 'themoviedb')
+const mediaSource = ref<MediaDataSource>(
+  ['themoviedb', 'douban', 'bangumi', 'anilist'].includes(globalSettings.RECOGNIZE_SOURCE)
+    ? globalSettings.RECOGNIZE_SOURCE
+    : 'themoviedb',
+)
 
 // 输入参数
 const props = defineProps({
@@ -43,11 +47,19 @@ const loading = ref(false)
 // 是否显示高级选项
 const showAdvancedOptions = ref(false)
 
-// TMDB ID
-const tmdbid = ref<number | undefined>(undefined)
+// 当前数据源的原生媒体ID
+const mediaId = ref<string | undefined>(undefined)
 
-// 豆瓣ID
-const doubanId = ref<string | undefined>(undefined)
+// 当前数据源对应的原生ID标签。
+const mediaIdLabel = computed(() => {
+  const labels: Record<MediaDataSource, string> = {
+    themoviedb: t('dialog.reorganize.tmdbId'),
+    douban: t('dialog.reorganize.doubanId'),
+    bangumi: t('dialog.reorganize.bangumiId'),
+    anilist: t('dialog.reorganize.anilistId'),
+  }
+  return labels[mediaSource.value]
+})
 
 // TMDB选择对话框
 const mediaSelectorDialog = ref(false)
@@ -98,11 +110,9 @@ async function addSubtitleDownload() {
       save_path: selectedDirectory.value,
     }
 
-    if (tmdbid.value) {
-      payload.tmdbid = tmdbid.value
-    }
-    if (doubanId.value) {
-      payload.doubanid = doubanId.value
+    if (mediaId.value) {
+      payload.media_source = mediaSource.value
+      payload.media_id = mediaId.value
     }
 
     const result: { [key: string]: any } = await api.post('download/subtitle', payload)
@@ -221,23 +231,9 @@ onMounted(() => {
         <VRow v-show="showAdvancedOptions" class="px-5">
           <VCol cols="12">
             <VTextField
-              v-if="mediaSource === 'themoviedb'"
-              v-model="tmdbid"
-              :label="t('dialog.reorganize.tmdbId')"
-              :placeholder="t('dialog.reorganize.mediaIdPlaceholder')"
-              :rules="[numberValidator]"
-              append-inner-icon="mdi-magnify"
-              :hint="t('dialog.reorganize.mediaIdHint')"
-              persistent-hint
-              prepend-inner-icon="mdi-identifier"
-              variant="underlined"
-              density="comfortable"
-              @click:append-inner="mediaSelectorDialog = true"
-            />
-            <VTextField
-              v-else
-              v-model="doubanId"
-              :label="t('dialog.reorganize.doubanId')"
+              v-model="mediaId"
+              class="app-responsive-input--keep-append-action"
+              :label="mediaIdLabel"
               :placeholder="t('dialog.reorganize.mediaIdPlaceholder')"
               :rules="[numberValidator]"
               append-inner-icon="mdi-magnify"
@@ -258,13 +254,7 @@ onMounted(() => {
       </VCardText>
     </VCard>
     <VDialog v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
-      <MediaIdSelector
-        v-if="mediaSource === 'themoviedb'"
-        v-model="tmdbid"
-        @close="mediaSelectorDialog = false"
-        :type="mediaSource"
-      />
-      <MediaIdSelector v-else v-model="doubanId" @close="mediaSelectorDialog = false" :type="mediaSource" />
+      <MediaIdSelector v-model="mediaId" @close="mediaSelectorDialog = false" :type="mediaSource" />
     </VDialog>
   </VDialog>
 </template>

src/components/dialog/CacheReidentifyDialog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import type { MediaDataSource } from '@/api/types'
 
 const { t } = useI18n()
 
@@ -20,12 +21,28 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (event: 'close'): void
-  (event: 'confirm', payload: { doubanId?: string; tmdbId?: number }): void
+  (event: 'confirm', payload: { mediaSource?: MediaDataSource; mediaId?: string }): void
   (event: 'update:modelValue', value: boolean): void
 }>()
 
-const tmdbId = ref<number | undefined>()
-const doubanId = ref<string | undefined>()
+const mediaSource = ref<MediaDataSource>((props.recognizeSource as MediaDataSource) || 'themoviedb')
+const mediaId = ref<string>()
+const mediaSourceItems = computed<{ title: string; value: MediaDataSource }[]>(() => [
+  { title: t('setting.cache.recognitionSource.themoviedb'), value: 'themoviedb' },
+  { title: t('setting.cache.recognitionSource.douban'), value: 'douban' },
+  { title: t('setting.cache.recognitionSource.bangumi'), value: 'bangumi' },
+  { title: t('setting.cache.recognitionSource.anilist'), value: 'anilist' },
+])
+
+const mediaIdLabel = computed(() => {
+  const labels: Record<string, string> = {
+    themoviedb: t('setting.cache.reidentifyDialog.tmdbId'),
+    douban: t('setting.cache.reidentifyDialog.doubanId'),
+    bangumi: t('setting.cache.reidentifyDialog.bangumiId'),
+    anilist: t('setting.cache.reidentifyDialog.anilistId'),
+  }
+  return labels[mediaSource.value] || t('setting.cache.reidentifyDialog.mediaId')
+})
 
 const visible = computed({
   get: () => props.modelValue,
@@ -38,8 +55,8 @@ const visible = computed({
 // 提交重新识别参数给缓存页执行接口调用。
 function submitReidentify() {
   emit('confirm', {
-    doubanId: doubanId.value,
-    tmdbId: tmdbId.value,
+    mediaSource: mediaSource.value,
+    mediaId: mediaId.value?.trim() || undefined,
   })
 }
 </script>
@@ -59,20 +76,20 @@ function submitReidentify() {
       <VCardText>
         <VRow>
           <VCol cols="12">
-            <VTextField
-              v-if="props.recognizeSource === 'themoviedb'"
-              v-model="tmdbId"
-              :label="t('setting.cache.reidentifyDialog.tmdbId')"
-              :hint="t('setting.cache.reidentifyDialog.tmdbIdHint')"
-              clearable
-              prepend-inner-icon="mdi-id-card"
+            <VSelect
+              v-model="mediaSource"
+              :items="mediaSourceItems"
+              :label="t('setting.cache.reidentifyDialog.mediaSource')"
+              :hint="t('setting.cache.reidentifyDialog.mediaSourceHint')"
+              prepend-inner-icon="mdi-database-search"
               persistent-hint
             />
+          </VCol>
+          <VCol cols="12">
             <VTextField
-              v-else
-              v-model="doubanId"
-              :label="t('setting.cache.reidentifyDialog.doubanId')"
-              :hint="t('setting.cache.reidentifyDialog.doubanIdHint')"
+              v-model="mediaId"
+              :label="mediaIdLabel"
+              :hint="t('setting.cache.reidentifyDialog.mediaIdHint')"
               clearable
               prepend-inner-icon="mdi-id-card"
               persistent-hint

src/components/dialog/FileRenameDialog.vue

@@ -74,6 +74,7 @@ function closeDialog() {
               :label="t('file.newName')"
               :loading="loading"
               prepend-inner-icon="mdi-format-text"
+              mobile-control-width="80%"
             />
           </VCol>
           <VCol v-if="item && item.type == 'dir'" cols="12">

src/components/dialog/ForkSubscribeDialog.vue

@@ -54,7 +54,8 @@ async function queryFollowUsers() {
     const result: { [key: string]: any } = await api.get('system/setting/public/FollowSubscribers')
     followUsers.value = result.data?.value ?? []
   } catch (error) {
-    console.log(error)
+    console.error(error)
+    $toast.error(t('subscribe.requestFailed'))
   }
 }
 
@@ -66,7 +67,8 @@ async function followUser() {
       queryFollowUsers()
     }
   } catch (error) {
-    console.log(error)
+    console.error(error)
+    $toast.error(t('subscribe.requestFailed'))
   }
 }
 
@@ -82,7 +84,8 @@ async function unfollowUser() {
       queryFollowUsers()
     }
   } catch (error) {
-    console.log(error)
+    console.error(error)
+    $toast.error(t('subscribe.requestFailed'))
   }
 }
 
@@ -94,8 +97,14 @@ const posterUrl = computed(() => {
 
 // 获得mediaid
 function getMediaId() {
+  if (props.media?.media_source && props.media?.media_id) {
+    const prefix = props.media.media_source === 'themoviedb' ? 'tmdb' : props.media.media_source
+    return `${prefix}:${props.media.media_id}`
+  }
   if (props.media?.tmdbid) return `tmdb:${props.media?.tmdbid}`
   else if (props.media?.doubanid) return `douban:${props.media?.doubanid}`
+  else if (props.media?.bangumiid) return `bangumi:${props.media?.bangumiid}`
+  else if (props.media?.anilistid) return `anilist:${props.media?.anilistid}`
 }
 
 // 查看媒体详情
@@ -129,6 +138,12 @@ async function doFork() {
     }
   } catch (error) {
     console.error(error)
+    $toast.error(
+      t('subscribe.addFailed', {
+        name: props.media?.share_title,
+        message: t('subscribe.requestFailed'),
+      }),
+    )
   } finally {
     processing.value = false
     doneNProgress()
@@ -151,12 +166,13 @@ async function doDelete() {
     if (result.success) {
       $toast.success(t('subscribe.cancelSuccess'))
       // 完成
-      emit('delete', result.data.id)
+      emit('delete')
     } else {
       $toast.error(t('subscribe.cancelFailed', { message: result.message }))
     }
   } catch (error) {
     console.error(error)
+    $toast.error(t('subscribe.cancelFailed', { message: t('subscribe.requestFailed') }))
   } finally {
     deleting.value = false
     doneNProgress()

src/components/dialog/GlassSettingsDialog.vue

@@ -0,0 +1,566 @@
+<script setup lang="ts">
+import {
+  cancelGlassPreview,
+  commitGlassPreview,
+  previewGlassSettings,
+  useThemeCustomizer,
+  type ThemeCustomizerGlassAppearance,
+  type ThemeCustomizerGlassQuality,
+} from '@/composables/useThemeCustomizer'
+import {
+  GLASS_OPTICAL_STRENGTH_MAX,
+  GLASS_OPTICAL_STRENGTH_MIN,
+  getAvailableGlassOpticalPresets,
+  getGlassOpticalPresetParameters,
+  normalizeGlassOpticalStrength,
+  type GlassOpticalPreset,
+} from '@/utils/glassOptics'
+import { useI18n } from 'vue-i18n'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+  }>(),
+  {
+    modelValue: true,
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const { t } = useI18n()
+const { settings } = useThemeCustomizer()
+const draftAppearance = ref<ThemeCustomizerGlassAppearance>(settings.value.glassAppearance)
+const draftDeformationStrength = ref(settings.value.glassDeformationStrength)
+const draftFlowStrength = ref(settings.value.glassFlowStrength)
+const draftPreset = ref<GlassOpticalPreset>(settings.value.glassPreset)
+const draftQuality = ref<ThemeCustomizerGlassQuality>(settings.value.glassQuality)
+const draftReflectionStrength = ref(settings.value.glassReflectionStrength)
+const draftTransmissionStrength = ref(settings.value.glassTransmissionStrength)
+const draftTranslationStrength = ref(settings.value.glassTranslationStrength)
+const draftTransparencyStrength = ref(settings.value.glassTransparencyStrength)
+const isSaving = ref(false)
+const usesRealtimeOptics = computed(() => draftQuality.value !== 'css')
+const showsDynamicTuning = computed(() => usesRealtimeOptics.value)
+const availablePresets = computed(() => getAvailableGlassOpticalPresets(draftQuality.value))
+const activePreset = computed<GlassOpticalPreset>(() =>
+  availablePresets.value.includes(draftPreset.value) ? draftPreset.value : 'natural',
+)
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    if (!value) cancelGlassPreview()
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+/** 父级控制弹窗生命周期时，同步结束旧预览并重建持久化草稿。 */
+watch(
+  () => props.modelValue,
+  (value, previous) => {
+    if (value) {
+      draftAppearance.value = settings.value.glassAppearance
+      draftDeformationStrength.value = settings.value.glassDeformationStrength
+      draftFlowStrength.value = settings.value.glassFlowStrength
+      draftPreset.value = settings.value.glassPreset
+      draftQuality.value = settings.value.glassQuality
+      draftReflectionStrength.value = settings.value.glassReflectionStrength
+      draftTransmissionStrength.value = settings.value.glassTransmissionStrength
+      draftTranslationStrength.value = settings.value.glassTranslationStrength
+      draftTransparencyStrength.value = settings.value.glassTransparencyStrength
+    } else if (previous) {
+      cancelGlassPreview()
+    }
+  },
+)
+
+const appearanceOptions: Array<{
+  label: string
+  value: ThemeCustomizerGlassAppearance
+}> = [
+  { label: 'theme.glassAppearanceClear', value: 'clear' },
+  { label: 'theme.glassAppearanceTinted', value: 'tinted' },
+  { label: 'theme.glassAppearanceFrosted', value: 'frosted' },
+]
+
+const qualityOptions: Array<{
+  hint: string
+  label: string
+  value: ThemeCustomizerGlassQuality
+}> = [
+  { hint: 'theme.glassQualityCssHint', label: 'theme.glassQualityCss', value: 'css' },
+  { hint: 'theme.glassQualityBalancedHint', label: 'theme.glassQualityBalanced', value: 'balanced' },
+  { hint: 'theme.glassQualityHighHint', label: 'theme.glassQualityHigh', value: 'high' },
+]
+const qualityHint = computed(() => qualityOptions.find(option => option.value === draftQuality.value)?.hint ?? '')
+const presetOptions: Array<{ label: string; value: GlassOpticalPreset }> = [
+  { label: 'theme.glassPresetNatural', value: 'natural' },
+  { label: 'theme.glassPresetGlide', value: 'glide' },
+  { label: 'theme.glassPresetLiquid', value: 'liquid' },
+]
+const visiblePresetOptions = computed(() =>
+  presetOptions.filter(option => availablePresets.value.includes(option.value)),
+)
+
+/** 仅允许已实现的材质进入待保存设置。 */
+function updateAppearance(value: unknown) {
+  if (value !== 'clear' && value !== 'tinted' && value !== 'frosted') return
+
+  draftAppearance.value = value
+  previewGlassSettings({ glassAppearance: value })
+}
+
+/** 仅允许面板声明的质量档位进入待保存设置。 */
+function updateQuality(value: unknown) {
+  const option = qualityOptions.find(item => item.value === value)
+  if (!option) return
+
+  draftQuality.value = option.value
+  previewGlassSettings({ glassQuality: option.value })
+}
+
+/** 将六个具体参数作为一个预览事务同步，预置只负责生成这些值。 */
+function previewDraftParameters() {
+  previewGlassSettings({
+    glassDeformationStrength: draftDeformationStrength.value,
+    glassFlowStrength: draftFlowStrength.value,
+    glassPreset: draftPreset.value,
+    glassReflectionStrength: draftReflectionStrength.value,
+    glassTransmissionStrength: draftTransmissionStrength.value,
+    glassTranslationStrength: draftTranslationStrength.value,
+    glassTransparencyStrength: draftTransparencyStrength.value,
+  })
+}
+
+/** 应用当前材质与质量下的方案建议值，并将该方案作为后续重置目标。 */
+function applyPreset(value: unknown) {
+  if (value !== 'natural' && value !== 'glide' && value !== 'liquid') return
+  if (!availablePresets.value.includes(value)) return
+
+  const parameters = getGlassOpticalPresetParameters(draftAppearance.value, draftQuality.value, value)
+  draftPreset.value = value
+  draftDeformationStrength.value = parameters.deformation
+  draftFlowStrength.value = parameters.flow
+  draftReflectionStrength.value = parameters.reflection
+  draftTransmissionStrength.value = parameters.transmission
+  draftTranslationStrength.value = parameters.translation
+  draftTransparencyStrength.value = parameters.transparency
+  previewDraftParameters()
+}
+
+/** 将采样平移限制为 renderer 支持的稳定范围。 */
+function updateTranslationStrength(value: unknown) {
+  draftTranslationStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassTranslationStrength: draftTranslationStrength.value })
+}
+
+/** 将局部形变限制为质量档软上限所消费的用户范围。 */
+function updateDeformationStrength(value: unknown) {
+  draftDeformationStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassDeformationStrength: draftDeformationStrength.value })
+}
+
+/** 将尾波、惯性与收敛输入限制为 renderer 的稳定范围。 */
+function updateFlowStrength(value: unknown) {
+  draftFlowStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassFlowStrength: draftFlowStrength.value })
+}
+
+/** 将滑杆输入限制为 renderer 的稳定范围并即时预览反射亮度。 */
+function updateReflectionStrength(value: unknown) {
+  draftReflectionStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassReflectionStrength: draftReflectionStrength.value })
+}
+
+/** 将透射亮度限制为稳定范围并即时调整卡片内部壁纸的明暗。 */
+function updateTransmissionStrength(value: unknown) {
+  draftTransmissionStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassTransmissionStrength: draftTransmissionStrength.value })
+}
+
+/** 将通透度限制为稳定范围并即时调整材质与真实壁纸的占比。 */
+function updateTransparencyStrength(value: unknown) {
+  draftTransparencyStrength.value = normalizeGlassOpticalStrength(Array.isArray(value) ? value[0] : value)
+  previewGlassSettings({ glassTransparencyStrength: draftTransparencyStrength.value })
+}
+
+/** 保留当前材质与质量，将参数恢复为当前高亮方案的建议值。 */
+function resetSettings() {
+  applyPreset(activePreset.value)
+}
+
+/** 一次提交当前预览，持久化后关闭不会发生视觉回跳。 */
+async function saveSettings() {
+  if (isSaving.value) return
+
+  isSaving.value = true
+
+  try {
+    previewGlassSettings({
+      glassAppearance: draftAppearance.value,
+      glassDeformationStrength: draftDeformationStrength.value,
+      glassFlowStrength: draftFlowStrength.value,
+      glassPreset: draftPreset.value,
+      glassQuality: draftQuality.value,
+      glassReflectionStrength: draftReflectionStrength.value,
+      glassTransmissionStrength: draftTransmissionStrength.value,
+      glassTranslationStrength: draftTranslationStrength.value,
+      glassTransparencyStrength: draftTransparencyStrength.value,
+    })
+    commitGlassPreview()
+    visible.value = false
+  } finally {
+    isSaving.value = false
+  }
+}
+
+// 弹窗的任意未保存销毁路径都应恢复持久化快照。
+onScopeDispose(cancelGlassPreview)
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" width="100%" max-width="30rem" scrollable>
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-blur-radial" class="me-2" />
+          {{ t('theme.glassSettings') }}
+        </VCardTitle>
+        <VDialogCloseBtn v-model="visible" />
+      </VCardItem>
+      <VDivider />
+
+      <VCardText class="glass-settings-dialog__body">
+        <section>
+          <h3 class="glass-settings-dialog__label">{{ t('theme.glassAppearance') }}</h3>
+          <VBtnToggle
+            :model-value="draftAppearance"
+            mandatory
+            color="primary"
+            variant="text"
+            class="glass-settings-dialog__appearance"
+            @update:model-value="updateAppearance"
+          >
+            <VBtn
+              v-for="option in appearanceOptions"
+              :key="option.value"
+              :value="option.value"
+              class="glass-settings-dialog__appearance-option"
+            >
+              {{ t(option.label) }}
+            </VBtn>
+          </VBtnToggle>
+        </section>
+
+        <section>
+          <h3 class="glass-settings-dialog__label">{{ t('theme.glassQuality') }}</h3>
+          <VBtnToggle
+            :model-value="draftQuality"
+            mandatory
+            color="primary"
+            variant="text"
+            class="glass-settings-dialog__quality"
+            @update:model-value="updateQuality"
+          >
+            <VBtn
+              v-for="option in qualityOptions"
+              :key="option.value"
+              :value="option.value"
+              class="glass-settings-dialog__quality-option"
+            >
+              {{ t(option.label) }}
+            </VBtn>
+          </VBtnToggle>
+          <p class="glass-settings-dialog__hint">{{ t(qualityHint) }}</p>
+        </section>
+
+        <section v-if="usesRealtimeOptics">
+          <div class="glass-settings-dialog__preset-header">
+            <h3 class="glass-settings-dialog__label">{{ t('theme.glassPreset') }}</h3>
+          </div>
+          <VBtnToggle
+            :model-value="activePreset"
+            mandatory
+            color="primary"
+            variant="text"
+            class="glass-settings-dialog__preset"
+            @update:model-value="applyPreset"
+          >
+            <VBtn
+              v-for="option in visiblePresetOptions"
+              :key="option.value"
+              :value="option.value"
+              class="glass-settings-dialog__preset-option"
+            >
+              {{ t(option.label) }}
+            </VBtn>
+          </VBtnToggle>
+        </section>
+
+        <section class="glass-settings-dialog__tuning">
+          <h3 class="glass-settings-dialog__group-label">{{ t('theme.glassMaterialTuning') }}</h3>
+          <div class="glass-settings-dialog__slider-header">
+            <h3 class="glass-settings-dialog__label">{{ t('theme.glassTransparencyStrength') }}</h3>
+            <output>{{ draftTransparencyStrength }}%</output>
+          </div>
+          <VSlider
+            :model-value="draftTransparencyStrength"
+            :aria-label="t('theme.glassTransparencyStrength')"
+            :min="GLASS_OPTICAL_STRENGTH_MIN"
+            :max="GLASS_OPTICAL_STRENGTH_MAX"
+            :step="1"
+            color="primary"
+            density="comfortable"
+            hide-details
+            thumb-label
+            @update:model-value="updateTransparencyStrength"
+          />
+
+          <div class="glass-settings-dialog__slider-header glass-settings-dialog__slider-header--spaced">
+            <h3 class="glass-settings-dialog__label">{{ t('theme.glassTransmissionStrength') }}</h3>
+            <output>{{ draftTransmissionStrength }}%</output>
+          </div>
+          <VSlider
+            :model-value="draftTransmissionStrength"
+            :aria-label="t('theme.glassTransmissionStrength')"
+            :min="GLASS_OPTICAL_STRENGTH_MIN"
+            :max="GLASS_OPTICAL_STRENGTH_MAX"
+            :step="1"
+            color="primary"
+            density="comfortable"
+            hide-details
+            thumb-label
+            @update:model-value="updateTransmissionStrength"
+          />
+
+          <div class="glass-settings-dialog__slider-header glass-settings-dialog__slider-header--spaced">
+            <h3 class="glass-settings-dialog__label">{{ t('theme.glassReflectionStrength') }}</h3>
+            <output>{{ draftReflectionStrength }}%</output>
+          </div>
+          <VSlider
+            :model-value="draftReflectionStrength"
+            :aria-label="t('theme.glassReflectionStrength')"
+            :min="GLASS_OPTICAL_STRENGTH_MIN"
+            :max="GLASS_OPTICAL_STRENGTH_MAX"
+            :step="1"
+            color="primary"
+            density="comfortable"
+            hide-details
+            thumb-label
+            @update:model-value="updateReflectionStrength"
+          />
+
+          <div v-if="showsDynamicTuning" class="glass-settings-dialog__live-controls">
+            <h3 class="glass-settings-dialog__group-label">{{ t('theme.glassDynamicTuning') }}</h3>
+            <div class="glass-settings-dialog__slider-header">
+              <h3 class="glass-settings-dialog__label">{{ t('theme.glassTranslationStrength') }}</h3>
+              <output>{{ draftTranslationStrength }}%</output>
+            </div>
+            <VSlider
+              :model-value="draftTranslationStrength"
+              :aria-label="t('theme.glassTranslationStrength')"
+              :min="GLASS_OPTICAL_STRENGTH_MIN"
+              :max="GLASS_OPTICAL_STRENGTH_MAX"
+              :step="1"
+              color="primary"
+              density="comfortable"
+              hide-details
+              thumb-label
+              @update:model-value="updateTranslationStrength"
+            />
+
+            <div class="glass-settings-dialog__slider-header glass-settings-dialog__slider-header--spaced">
+              <h3 class="glass-settings-dialog__label">{{ t('theme.glassDeformationStrength') }}</h3>
+              <output>{{ draftDeformationStrength }}%</output>
+            </div>
+            <VSlider
+              :model-value="draftDeformationStrength"
+              :aria-label="t('theme.glassDeformationStrength')"
+              :min="GLASS_OPTICAL_STRENGTH_MIN"
+              :max="GLASS_OPTICAL_STRENGTH_MAX"
+              :step="1"
+              color="primary"
+              density="comfortable"
+              hide-details
+              thumb-label
+              @update:model-value="updateDeformationStrength"
+            />
+
+            <div class="glass-settings-dialog__slider-header glass-settings-dialog__slider-header--spaced">
+              <h3 class="glass-settings-dialog__label">{{ t('theme.glassFlowStrength') }}</h3>
+              <output>{{ draftFlowStrength }}%</output>
+            </div>
+            <VSlider
+              :model-value="draftFlowStrength"
+              :aria-label="t('theme.glassFlowStrength')"
+              :min="GLASS_OPTICAL_STRENGTH_MIN"
+              :max="GLASS_OPTICAL_STRENGTH_MAX"
+              :step="1"
+              color="primary"
+              density="comfortable"
+              hide-details
+              thumb-label
+              @update:model-value="updateFlowStrength"
+            />
+          </div>
+          <p class="glass-settings-dialog__hint">
+            {{ t(showsDynamicTuning ? 'theme.glassOpticalStrengthHint' : 'theme.glassOpticalStrengthUnavailableHint') }}
+          </p>
+        </section>
+      </VCardText>
+
+      <VDivider />
+      <VCardText class="text-center">
+        <VBtn variant="outlined" prepend-icon="mdi-refresh" class="me-2" @click="resetSettings">
+          {{ t('common.reset') }}
+        </VBtn>
+        <VBtn color="primary" prepend-icon="mdi-content-save" :loading="isSaving" @click="saveSettings">
+          {{ t('common.save') }}
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped lang="scss">
+.glass-settings-dialog__body {
+  display: grid;
+  align-content: start;
+  gap: 24px;
+  grid-auto-rows: max-content;
+  padding: 20px 24px 24px;
+}
+
+.glass-settings-dialog__label {
+  margin: 0 0 10px;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.glass-settings-dialog__hint {
+  margin: 8px 0 0;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+
+.glass-settings-dialog__group-label {
+  margin: 0 0 14px;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.glass-settings-dialog__slider-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+
+  .glass-settings-dialog__label {
+    margin-block-end: 0;
+  }
+
+  output {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+.glass-settings-dialog__slider-header--spaced,
+.glass-settings-dialog__slider-header + .glass-settings-dialog__slider-header {
+  margin-block-start: 18px;
+}
+
+.glass-settings-dialog__live-controls {
+  border-block-start: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  margin-block-start: 24px;
+  padding-block-start: 20px;
+
+  :deep(.v-slider) {
+    margin-block-start: 4px;
+  }
+}
+
+.glass-settings-dialog__preset-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+
+  .glass-settings-dialog__label {
+    margin-block-end: 0;
+  }
+}
+
+.glass-settings-dialog__appearance,
+.glass-settings-dialog__quality,
+.glass-settings-dialog__preset {
+  display: grid;
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  border-radius: 10px;
+  background: rgba(var(--v-theme-on-surface), 0.035);
+  gap: 4px;
+  inline-size: 100%;
+  padding: 4px;
+}
+
+.glass-settings-dialog__appearance {
+  block-size: 42px !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.glass-settings-dialog__quality {
+  block-size: 42px !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.glass-settings-dialog__preset {
+  block-size: 42px !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-block-start: 10px;
+}
+
+.glass-settings-dialog__appearance-option {
+  block-size: 32px !important;
+  inline-size: 100%;
+  letter-spacing: 0;
+}
+
+.glass-settings-dialog__appearance-option,
+.glass-settings-dialog__quality-option,
+.glass-settings-dialog__preset-option {
+  border: 0 !important;
+  border-radius: 7px !important;
+  box-shadow: none !important;
+  min-inline-size: 0;
+  inline-size: 100%;
+  letter-spacing: 0;
+  padding-inline: 8px;
+}
+
+.glass-settings-dialog__quality-option {
+  block-size: 32px !important;
+}
+
+.glass-settings-dialog__preset-option {
+  block-size: 32px !important;
+}
+
+.glass-settings-dialog__appearance-option:deep(.v-btn--active),
+.glass-settings-dialog__quality-option:deep(.v-btn--active),
+.glass-settings-dialog__preset-option:deep(.v-btn--active) {
+  background-color: rgba(var(--v-theme-primary), 0.14) !important;
+  box-shadow: inset 0 0 0 1px rgba(var(--v-theme-primary), 0.38) !important;
+}
+</style>

src/components/dialog/LoginMfaDialog.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const props = withDefaults(
-  defineProps<{
-    errorMessage?: string
-    modelValue?: boolean
-    otpPassword?: string
-    passkeyLoading?: boolean
-  }>(),
-  {
-    errorMessage: '',
-    modelValue: true,
-    otpPassword: '',
-    passkeyLoading: false,
-  },
-)
-
-const emit = defineEmits<{
-  (event: 'close'): void
-  (event: 'otp'): void
-  (event: 'passkey'): void
-  (event: 'update:modelValue', value: boolean): void
-  (event: 'update:otpPassword', value: string): void
-}>()
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: value => {
-    emit('update:modelValue', value)
-    if (!value) emit('close')
-  },
-})
-
-const otpValue = computed({
-  get: () => props.otpPassword,
-  set: value => emit('update:otpPassword', value),
-})
-
-// 提交 OTP 登录请求。
-function submitOtp() {
-  emit('otp')
-}
-</script>
-
-<template>
-  <VDialog v-if="visible" v-model="visible" max-width="400" persistent>
-    <VCard>
-      <VCardTitle class="text-h5 text-center mt-4 pb-2">{{ t('login.secondaryVerification') }}</VCardTitle>
-      <VCardText class="pt-0">
-        <p class="text-center mb-4">{{ t('login.mfa.selectVerificationMethod') }}</p>
-
-        <VCard variant="tonal" class="mb-3">
-          <VCardText>
-            <VForm @submit.prevent="submitOtp">
-              <VTextField
-                v-model="otpValue"
-                :label="t('login.otpCode')"
-                :placeholder="t('login.otpPlaceholder')"
-                type="text"
-                name="otp"
-                id="otp"
-                autocomplete="one-time-code"
-                inputmode="numeric"
-                prepend-inner-icon="mdi-shield-key"
-                class="mb-2"
-              />
-              <VBtn block type="submit" color="primary" :disabled="!otpValue">
-                {{ t('login.loginWithOtp') }}
-              </VBtn>
-            </VForm>
-          </VCardText>
-        </VCard>
-
-        <VCard variant="tonal">
-          <VCardText>
-            <p class="text-body-2 mb-2">{{ t('login.orUsePasskey') }}</p>
-            <VBtn
-              block
-              variant="tonal"
-              color="success"
-              class="passkey-btn"
-              prepend-icon="material-symbols:passkey"
-              :loading="props.passkeyLoading"
-              @click="emit('passkey')"
-            >
-              {{ t('login.verifyWithPasskey') }}
-            </VBtn>
-          </VCardText>
-        </VCard>
-
-        <VAlert v-if="props.errorMessage" type="error" variant="tonal" class="mt-3">
-          {{ props.errorMessage }}
-        </VAlert>
-
-        <VBtn block variant="text" class="mt-4" @click="visible = false">{{ t('common.cancel') }}</VBtn>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>

src/components/dialog/MediaServerInfoDialog.vue

@@ -26,6 +26,10 @@ const props = defineProps({
     type: Array as PropType<MediaServerConf[]>,
     required: true,
   },
+  defaultSyncInterval: {
+    type: Number,
+    default: null,
+  },
 })
 
 // 定义触发的自定义事件
@@ -203,6 +207,20 @@ onMounted(() => {
                   prepend-inner-icon="mdi-key"
                 />
               </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model.number="mediaServerInfo.sync_interval"
+                  type="number"
+                  min="0"
+                  step="1"
+                  clearable
+                  :label="t('mediaserver.syncInterval')"
+                  :hint="t('mediaserver.syncIntervalHint', { interval: props.defaultSyncInterval ?? 6 })"
+                  persistent-hint
+                  suffix="h"
+                  prepend-inner-icon="mdi-sync"
+                />
+              </VCol>
               <VCol cols="12">
                 <VAutocomplete
                   v-model="mediaServerInfo.sync_libraries"
@@ -243,7 +261,7 @@ onMounted(() => {
                   prepend-inner-icon="mdi-server"
                 />
               </VCol>
-              <VCol cols="12">
+              <VCol cols="6">
                 <VTextField
                   v-model="mediaServerInfo.config.play_host"
                   :label="t('mediaserver.playHost')"
@@ -269,11 +287,26 @@ onMounted(() => {
                   type="password"
                   v-model="mediaServerInfo.config.password"
                   :label="t('mediaserver.password')"
+                  :hint="t('mediaserver.passwordHint')"
                   persistent-hint
                   active
                   prepend-inner-icon="mdi-lock"
                 />
               </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model.number="mediaServerInfo.sync_interval"
+                  type="number"
+                  min="0"
+                  step="1"
+                  clearable
+                  :label="t('mediaserver.syncInterval')"
+                  :hint="t('mediaserver.syncIntervalHint', { interval: props.defaultSyncInterval ?? 6 })"
+                  persistent-hint
+                  suffix="h"
+                  prepend-inner-icon="mdi-sync"
+                />
+              </VCol>
               <VCol cols="12">
                 <VAutocomplete
                   v-model="mediaServerInfo.sync_libraries"
@@ -335,6 +368,20 @@ onMounted(() => {
                   prepend-inner-icon="mdi-key"
                 />
               </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model.number="mediaServerInfo.sync_interval"
+                  type="number"
+                  min="0"
+                  step="1"
+                  clearable
+                  :label="t('mediaserver.syncInterval')"
+                  :hint="t('mediaserver.syncIntervalHint', { interval: props.defaultSyncInterval ?? 6 })"
+                  persistent-hint
+                  suffix="h"
+                  prepend-inner-icon="mdi-sync"
+                />
+              </VCol>
               <VCol cols="12">
                 <VAutocomplete
                   v-model="mediaServerInfo.sync_libraries"
@@ -375,7 +422,7 @@ onMounted(() => {
                   prepend-inner-icon="mdi-server"
                 />
               </VCol>
-              <VCol cols="12">
+              <VCol cols="6">
                 <VTextField
                   v-model="mediaServerInfo.config.play_host"
                   :label="t('mediaserver.playHost')"
@@ -390,6 +437,8 @@ onMounted(() => {
                 <VTextField
                   v-model="mediaServerInfo.config.username"
                   :label="t('mediaserver.username')"
+                  :hint="t('mediaserver.usernameHint')"
+                  persistent-hint
                   active
                   prepend-inner-icon="mdi-account"
                 />
@@ -399,10 +448,37 @@ onMounted(() => {
                   type="password"
                   v-model="mediaServerInfo.config.password"
                   :label="t('mediaserver.password')"
+                  :hint="t('mediaserver.passwordHint')"
+                  persistent-hint
                   active
                   prepend-inner-icon="mdi-lock"
                 />
               </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  type="password"
+                  v-model="mediaServerInfo.config.access_code"
+                  :label="t('mediaserver.accessCode')"
+                  :hint="t('mediaserver.accessCodeHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-shield-key"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model.number="mediaServerInfo.sync_interval"
+                  type="number"
+                  min="0"
+                  step="1"
+                  clearable
+                  :label="t('mediaserver.syncInterval')"
+                  :hint="t('mediaserver.syncIntervalHint', { interval: props.defaultSyncInterval ?? 6 })"
+                  persistent-hint
+                  suffix="h"
+                  prepend-inner-icon="mdi-sync"
+                />
+              </VCol>
               <VCol cols="12">
                 <VAutocomplete
                   v-model="mediaServerInfo.sync_libraries"
@@ -443,7 +519,7 @@ onMounted(() => {
                   prepend-inner-icon="mdi-server"
                 />
               </VCol>
-              <VCol cols="12">
+              <VCol cols="6">
                 <VTextField
                   v-model="mediaServerInfo.config.play_host"
                   :label="t('mediaserver.playHost')"
@@ -458,6 +534,8 @@ onMounted(() => {
                 <VTextField
                   v-model="mediaServerInfo.config.username"
                   :label="t('mediaserver.username')"
+                  :hint="t('mediaserver.usernameHint')"
+                  persistent-hint
                   active
                   prepend-inner-icon="mdi-account"
                 />
@@ -467,24 +545,24 @@ onMounted(() => {
                   type="password"
                   v-model="mediaServerInfo.config.password"
                   :label="t('mediaserver.password')"
+                  :hint="t('mediaserver.passwordHint')"
+                  persistent-hint
                   active
                   prepend-inner-icon="mdi-lock"
                 />
               </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model.number="mediaServerInfo.sync_interval"
+                  type="number"
+                  min="0"
+                  step="1"
                   clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
+                  :label="t('mediaserver.syncInterval')"
+                  :hint="t('mediaserver.syncIntervalHint', { interval: props.defaultSyncInterval ?? 6 })"
                   persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                  suffix="h"
+                  prepend-inner-icon="mdi-sync"
                 />
               </VCol>
               <VCol cols="12" md="6">
@@ -508,6 +586,22 @@ onMounted(() => {
                   inset
                 />
               </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">
@@ -553,6 +647,20 @@ onMounted(() => {
                   prepend-inner-icon="mdi-key"
                 />
               </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model.number="mediaServerInfo.sync_interval"
+                  type="number"
+                  min="0"
+                  step="1"
+                  clearable
+                  :label="t('mediaserver.syncInterval')"
+                  :hint="t('mediaserver.syncIntervalHint', { interval: props.defaultSyncInterval ?? 6 })"
+                  persistent-hint
+                  suffix="h"
+                  prepend-inner-icon="mdi-sync"
+                />
+              </VCol>
               <VCol cols="12">
                 <VAutocomplete
                   v-model="mediaServerInfo.sync_libraries"