fix(site): 静默处理站点图标缺失

* feat(settings): add database backup management

* feat(settings): complete database backup controls

.env.test

@@ -0,0 +1 @@
+VITE_API_BASE_URL=/api/v1/

.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/build.yml

@@ -1,19 +1,23 @@
-name: Build Moviepilot-Frontend v2
+name: Build Moviepilot-Frontend v3
 
 on:
   workflow_dispatch:
   push:
     branches:
-      - v2
+      - v3
     paths:
       - 'package.json'
 
+permissions:
+  contents: write
+
 jobs:
   build:
     runs-on: ubuntu-latest
+    timeout-minutes: 30
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v7
 
       - name: Release version
         id: release_version
@@ -22,22 +26,30 @@ jobs:
           echo "frontend_version=v$frontend_version" >> $GITHUB_ENV
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v7
         with:
-          node-version: '20'
-          cache: 'yarn'
+          node-version: '24'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+
+      - name: Enable project Yarn version
+        run: |
+          corepack enable
+          corepack install --global yarn@1.22.22
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
 
       - name: Download Icons
         run: |
           pwd
-          curl -sL "https://github.com/jxxghp/MoviePilot-Plugins/archive/refs/heads/main.zip" | busybox unzip -d /tmp -
+          curl -fsSL --retry 3 "https://github.com/jxxghp/MoviePilot-Plugins/archive/refs/heads/main.zip" | busybox unzip -d /tmp -
           mv /tmp/MoviePilot-Plugins-main/icons public/plugin_icon
           rm -rf /tmp/MoviePilot-Plugins-main
 
       - name: Build frontend
         id: build_frontend
         run: |
-          yarn
           yarn build
           echo "$frontend_version" > dist/version.txt
           zip -r dist.zip dist

.github/workflows/pr-agent.yml

@@ -0,0 +1,52 @@
+name: PR-Agent
+
+on:
+  pull_request_target:
+    # Fork 审查需要目标仓库凭据；该 job 仅通过 GitHub API 读取 PR 内容，不 checkout 或执行 PR 分支代码。
+    types:
+      - opened
+      - reopened
+      - ready_for_review
+      - review_requested
+      - synchronize
+  issue_comment:
+    types:
+      - created
+      - edited
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+
+jobs:
+  pr-agent:
+    if: >-
+      github.event.sender.type != 'Bot' &&
+      (
+        github.event_name == 'pull_request_target' ||
+        (
+          github.event_name == 'issue_comment' &&
+          github.event.issue.pull_request != null &&
+          contains(fromJSON('["OWNER", "MEMBER", "COLLABORATOR", "CONTRIBUTOR", "FIRST_TIME_CONTRIBUTOR"]'), github.event.comment.author_association)
+        )
+      )
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.event.issue.number }}
+      cancel-in-progress: ${{ github.event_name == 'pull_request_target' }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    steps:
+      - name: Run PR Review
+        uses: docker://ghcr.io/infinitypacer/pr-review-runner:latest
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+          OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
+          OPENAI.API_BASE: ${{ secrets.OPENAI_API_BASE }}
+          PRR_AUTO_REVIEW_SCOPE: all
+          PRR_ALLOWED_ASSOCIATIONS: '["OWNER", "MEMBER", "COLLABORATOR", "CONTRIBUTOR", "FIRST_TIME_CONTRIBUTOR"]'
+          PRR_DISABLED_COMMANDS: '["/improve"]'
+          PRR_SKIP_LABEL: skip pr-agent
+          PRR_SKIP_TITLE_PATTERN: '^(?:\[Auto\]|Auto)'
+          config.response_language: zh-CN

.github/workflows/test.yml

@@ -0,0 +1,93 @@
+name: Frontend Tests
+
+on:
+  pull_request:
+    branches:
+      - v3
+  push:
+    branches:
+      - v3
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  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
+
+      - name: Typecheck
+        run: yarn typecheck
+
+  typecheck-and-tests:
+    runs-on: ubuntu-latest
+    name: Unit tests (${{ matrix.shard }})
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        shard:
+          - 1/2
+          - 2/2
+    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: Unit tests
+        run: yarn test:run --shard=${{ matrix.shard }} --silent=passed-only

.gitignore

@@ -12,6 +12,7 @@ node_modules
 dist
 dist-ssr
 dev-dist
+coverage
 *.local
 package-lock.json
 
@@ -37,3 +38,5 @@ src/@iconify/*.js
 public/plugin_icon/**
 docs-lock/
 .trae/
+output/
+.codex-qa/

.node-version

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

.nvmrc

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

.prettierignore

@@ -1,2 +1,9 @@
 dist
-node_modules
+node_modules
+/.worktrees/
+
+# 自动生成文件的格式由各自生成器决定。
+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`。
 
 ## 特性
 
@@ -11,15 +11,6 @@
 - 支持多语言（中文/英文）
 - 完整的插件系统支持，包括远程组件动态加载
 
-## 模块联邦功能
-
-MoviePilot 现已支持模块联邦（Module Federation）功能，允许插件开发者创建可动态加载的远程组件，实现更丰富的插件用户界面。
-
-### 相关文档
-
-- [模块联邦开发指南](docs/module-federation-guide.md) - 如何开发远程组件插件
-- [模块联邦问题排查指南](docs/federation-troubleshooting.md) - 常见问题和解决方案
-- [插件远程组件示例](examples/plugin-component/) - 开发插件组件的完整示例项目 
 
 ## 开发部署
 
@@ -49,6 +40,17 @@ yarn dev
 yarn build
 ```
 
+### 单元测试
+
+```sh
+yarn test:run
+yarn test:coverage
+```
+
+测试文件组织、共享测试设施、HTTP mock、覆盖率门禁和新增用例规范见[单元测试架构](docs/testing.md)。
+
+ESLint、Prettier、Node 兼容范围及渐进式 CI 门禁见[前端代码质量工具链演进](docs/code-quality.md)。
+
 ### 静态运行
 
 1. 使用 `nginx` 等Web服务器托管 `dist` 静态文件，nginx配置参考 `public/nginx.conf`。
@@ -58,3 +60,12 @@ yarn build
 ```shell
 node dist/service.js
 ```
+
+
+### 模块联邦功能
+
+MoviePilot 现已支持模块联邦（Module Federation）功能，允许插件开发者创建可动态加载的远程组件，实现更丰富的插件用户界面。
+
+- [模块联邦开发指南](docs/module-federation-guide.md) - 如何开发远程组件插件
+- [模块联邦问题排查指南](docs/federation-troubleshooting.md) - 常见问题和解决方案
+- [插件远程组件示例](examples/plugin-component/) - 开发插件组件的完整示例项目 

README_EN.md

@@ -1,8 +1,9 @@
 # MoviePilot-Frontend
 
-*[中文](README.md) | English*
+_[中文](README.md) | English_
 
-Frontend project for [MoviePilot](https://github.com/jxxghp/MoviePilot), NodeJS version required: >= `v20.12.1`.
+Frontend project for [MoviePilot](https://github.com/jxxghp/MoviePilot). The minimum supported Node.js version is
+`20.19`; Node.js `24` is recommended.
 
 ## Features
 
@@ -11,22 +12,13 @@ Frontend project for [MoviePilot](https://github.com/jxxghp/MoviePilot), NodeJS
 - Multi-language support (Chinese/English)
 - Complete plugin system with dynamic remote component loading
 
-## Module Federation
-
-MoviePilot now supports Module Federation, allowing plugin developers to create dynamically loadable remote components for richer plugin user interfaces.
-
-### Documentation
-
-- [Module Federation Troubleshooting Guide](docs/federation-troubleshooting.md) - Common issues and solutions
-- [Plugin Remote Component Example](examples/plugin-component/) - Complete example project for developing plugin components
-
 ## Development
 
 ### Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (disable Vetur).
 
-### Configure Vite 
+### Configure Vite
 
 See [Vite Configuration Reference](https://vitejs.dev/config/).
 
@@ -48,6 +40,17 @@ yarn dev
 yarn build
 ```
 
+### Unit Tests
+
+```sh
+yarn test:run
+yarn test:coverage
+```
+
+See the [unit testing architecture](docs/testing.md) for test organization, shared facilities, HTTP fixtures, and
+coverage conventions. See the [frontend code quality evolution](docs/code-quality.md) for ESLint, Prettier, Node.js
+compatibility, and incremental CI gates.
+
 ### Static Deployment
 
 1. Host the `dist` static files using a web server like `nginx`. Refer to `public/nginx.conf` for nginx configuration.
@@ -56,4 +59,11 @@ yarn build
 
 ```shell
 node dist/service.js
-``` 
+```
+
+### Module Federation
+
+MoviePilot now supports Module Federation, allowing plugin developers to create dynamically loadable remote components for richer plugin user interfaces.
+
+- [Module Federation Troubleshooting Guide](docs/federation-troubleshooting.md) - Common issues and solutions
+- [Plugin Remote Component Example](examples/plugin-component/) - Complete example project for developing plugin components

docs/code-quality.md

@@ -0,0 +1,191 @@
+# 前端代码质量工具链演进
+
+本文档定义 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；主测试 job 使用 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       # 本地默认并行执行两个 Vitest shard
+yarn test:run --serial
+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:run` CI 自动执行。
+
+`eslint-suppressions.json` 只冻结迁移时已经确认的文件、规则和数量。新增问题不得加入 baseline；修复存量问题后运行 `yarn lint:suppressions:prune`，并把裁剪结果与代码修复一同提交。日常开发和 CI 不得使用 `--suppress-all`。
+
+baseline 是刻意设计的渐进治理机制，不等于被抑制的违规已被认可为长期编码规范。2026-08-24 的基线快照为
+141 个文件、564 项受控违规、23 条规则，其中 `@typescript-eslint/no-explicit-any` 300 项、
+`vue/no-mutating-props` 82 项、`@typescript-eslint/no-unused-vars` 64 项。生产 PR 修改到某个受控文件时，
+应审计并偿还该文件内不改变业务语义且可安全处理的存量，随后 prune；纯测试、文档或 CI 变更不为清理
+未触及生产文件扩大 diff。
+
+迁移完成的最低验收为：
+
+```sh
+yarn --frozen-lockfile
+yarn lint
+yarn typecheck
+yarn test:run
+yarn build
+```
+
+若新配置导致大量与业务目标无关的格式、排序或额外文件类型问题，应停止扩大规则范围，先调整配置职责；不得以一次性自动修复数百个文件作为通过迁移的手段。
+
+## ESLint CI：先观察，再强制
+
+第二阶段在 Pull Request workflow 中增加独立的全仓 `yarn lint` job：
+
+1. `lint` job 集中执行 ESLint 与 typecheck，单元测试使用独立的两分片 job，使静态检查与测试关键路径并行；本地默认并行执行两个 Vitest shard，并与 CI 共用 `yarn test:run` 入口。
+2. 初始阶段作为普通 check 运行，不立即配置 required check。
+3. workflow 使用 Node 24、frozen lockfile 和只读 `yarn lint` / `yarn typecheck`，不执行自动修复或更新 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/v3`、`refs/remotes/origin/v3`、`refs/heads/v3` 的顺序选择与当前提交具有共同祖先的基线，并合并当前工作区与未跟踪文件。完整引用可避免同名标签造成歧义；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，不因此要求在本阶段批量格式化已有文件。
+
+2026-08-25 在 `upstream/v3@c2b21f7e` 使用仓库锁定的 Prettier 3.9.5 运行
+`yarn format:all:check`，剩余 112 个存量文件不符合格式：Vue 36 个、TypeScript 29 个、SCSS 26 个、JSON 5 个、
+YAML 4 个、代码片段 4 个、JavaScript 3 个、Markdown 3 个、HTML 2 个。该快照用于观察渐进收敛趋势，
+不改变“只检查和格式化本次触及文件”的日常边界，也不触发全仓格式化提交。
+
+变更文件 required check 不需要等待全仓收敛。只有同时满足以下条件，才把 Prettier 从变更文件 required check 切换为全仓 required check：
+
+- 全仓 `yarn format:all:check` 已通过，或仅剩少量可在独立机械提交中安全处理的文件。
+- 最近的活跃分支已合并或完成同步，避免集中格式变化制造冲突。
+- `yarn lint`、`yarn typecheck`、`yarn test:run` 和 `yarn build` 在格式收敛后全部通过。
+- Prettier 与 ESLint 不存在反复改写同一文件的规则冲突。
+- workflow 已以非 required 状态稳定运行多个 PR。
+
+最终 Pull Request 门禁目标为：
+
+```sh
+yarn --frozen-lockfile
+yarn format:all:check
+yarn lint
+yarn typecheck
+yarn test:run
+yarn build
+```
+
+PR-Agent、编辑器诊断和人工 review 可以补充判断，但不能替代可重复执行的项目命令。
+
+## Agent 与开发者提交规范
+
+无论改动由 Agent 还是人工完成，提交前遵循同一顺序：
+
+1. 只对本次新增或修改的文件执行 Prettier。
+2. 运行全仓只读 lint。
+3. 运行 typecheck。
+4. 按影响面运行聚焦测试；覆盖率报告按需本地运行，不作为 Actions 门禁。
+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,18 @@ export default defineConfig({
 // 自定义事件，用于通知主应用刷新数据
 const emit = defineEmits(['action', 'switch', 'close'])
 
-// 接收API对象
+// 接收主应用能力
 const props = defineProps({
   api: {
     type: Object,
-    default: () => {}
-  }
+    default: () => {},
+  },
+  pluginId: { type: String, default: '' },
+  sourcePluginId: { type: String, default: '' },
+  nativeSubscribe: {
+    type: Function,
+    default: null,
+  },
 })
 
 // 页面逻辑代码...
@@ -179,20 +181,26 @@ function notifyClose() {
 
 ```vue
 <script setup lang="ts">
-// 接收初始配置和API对象
+// 接收初始配置和主应用能力
 const props = defineProps({
   initialConfig: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
   },
   api: {
     type: Object,
-    default: () => {}
-  }
+    default: () => {},
+  },
+  pluginId: { type: String, default: '' },
+  sourcePluginId: { type: String, default: '' },
+  nativeSubscribe: {
+    type: Function,
+    default: null,
+  },
 })
 
 // 配置数据
-const config = ref({...props.initialConfig})
+const config = ref({ ...props.initialConfig })
 
 // 自定义事件，用于保存配置
 const emit = defineEmits(['save', 'close', 'switch'])
@@ -217,7 +225,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 +242,23 @@ function notifyClose() {
 
 ```vue
 <script setup lang="ts">
-// 接收配置和刷新控制
+// 接收配置、刷新控制和主应用能力
 const props = defineProps({
   config: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
   },
   allowRefresh: {
     type: Boolean,
-    default: true
-  }
+    default: true,
+  },
+  api: { type: Object, default: () => ({}) },
+  pluginId: { type: String, default: '' },
+  sourcePluginId: { type: String, default: '' },
+  nativeSubscribe: {
+    type: Function,
+    default: null,
+  },
 })
 
 // 仪表板逻辑...
@@ -276,18 +291,22 @@ const props = defineProps({
 
 主应用传入的 props：
 
-| 属性 | 说明 |
-|------|------|
-| `api` | 与 `Page` 相同，用于 `bear` 认证的插件 HTTP 调用 |
-| `navKey` | 与侧栏声明的 `nav_key` 一致，同一插件多入口时用于区分 |
-| `pluginId` | 当前插件 ID |
+| 属性              | 说明                                                  |
+| ----------------- | ----------------------------------------------------- |
+| `api`             | 与 `Page` 相同，用于 `bear` 认证的插件 HTTP 调用      |
+| `nativeSubscribe` | 打开主应用原生订阅交互                                |
+| `navKey`          | 与侧栏声明的 `nav_key` 一致，同一插件多入口时用于区分 |
+| `pluginId`        | 当前插件 ID                                           |
+| `sourcePluginId`  | 虚拟分身共享资源的源插件 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: '' },
+  sourcePluginId: { type: String, default: '' },
 })
 const emit = defineEmits(['action'])
 </script>
@@ -300,18 +319,198 @@ const emit = defineEmits(['action'])
 </template>
 ```
 
+### 5.5 主应用宿主能力
+
+登录后的联邦组件宿主会向插件开放以下能力：
+
+| 能力             | Page | Config | Dashboard | AppPage | 调用方式                                                         |
+| ---------------- | ---- | ------ | --------- | ------- | ---------------------------------------------------------------- |
+| 认证 API         | ✓    | ✓      | ✓         | ✓       | `api` prop                                                       |
+| 当前实例 ID      | ✓    | ✓      | ✓         | ✓       | `pluginId` prop                                                  |
+| 共享源码 ID      | ✓    | ✓      | ✓         | ✓       | `sourcePluginId` prop；普通插件为空                              |
+| 原生订阅交互     | ✓    | ✓      | ✓         | ✓       | `nativeSubscribe` prop 或 `inject('moviepilot:nativeSubscribe')` |
+| 主应用统一 Toast | ✓    | ✓      | ✓         | ✓       | `inject('moviepilot:toast')`                                     |
+| 主应用公共弹窗   | ✓    | ✓      | ✓         | ✓       | `inject('moviepilot:dialog')`                                    |
+| 主应用确认弹窗   | ✓    | ✓      | ✓         | ✓       | `inject('moviepilot:confirm')`                                   |
+
+`nativeSubscribe`、Toast、公共弹窗和确认弹窗都由主应用宿主提供。插件不应复制主程序订阅弹窗、创建另一套 Toast 容器或自行挂载全局弹窗。插件在旧版主程序或能力不存在的环境中运行时，应保留空值判断和必要的页面内 fallback。
+
+V3 新建插件分身会复用源插件的同一份联邦产物。宿主传入的 `api` 已绑定当前
+`pluginId`：即使旧组件仍调用 `plugin/<sourcePluginId>/...`，也会被映射到实例 API。
+新组件应直接用 `pluginId` 拼接路径，并始终优先使用 `api` prop；只读取全局
+`window.MoviePilotAPI` 会绕过实例作用域，不适合多实例插件。
+
+### 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`。注入不存在时应静默降级，关键错误仍需保留页面内状态提示。
+
+### 5.9 调用主应用公共弹窗
+
+`Page`、`Config`、`Dashboard` 与 `AppPage` 的宿主容器会通过固定键提供主应用公共弹窗函数。该函数会将插件组件挂载到主应用 `App.vue` 的 `SharedDialogHost`，因此弹窗不会受插件页面、卡片或父级容器的层叠上下文限制。远程组件应复用该入口，不要自行创建额外的弹窗容器：
+
+```vue
+<script setup lang="ts">
+import { inject, type Component } from 'vue'
+
+interface DialogController {
+  id: number
+  close(): void
+  updateProps(props: Record<string, unknown>): void
+}
+
+type HostDialog = (
+  component: Component,
+  props?: Record<string, unknown>,
+  events?: Record<string, (...args: unknown[]) => unknown>,
+  options?: { closeOn?: string[] | false; replace?: boolean },
+) => DialogController
+
+const openDialog = inject<HostDialog | null>('moviepilot:dialog', null)
+
+function openPluginDialog(DialogComponent: Component, props: Record<string, unknown>) {
+  return openDialog?.(
+    DialogComponent,
+    props,
+    {
+      close: () => {
+        // 处理插件弹窗关闭后的业务逻辑。
+      },
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
+}
+</script>
+```
+
+公共弹窗函数签名为 `openDialog(component, props, events, options)`，返回控制器：
+
+- `closeOn`：收到指定事件后自动从公共层移除，默认监听 `close`；传 `false` 表示不自动关闭；
+- `replace`：是否替换当前公共弹窗栈；
+- `props` 和 `events`：也可以使用 `openDialogWithOptions` 的对象参数形式传入；
+- `close()`：主动关闭当前弹窗；
+- `updateProps(props)`：合并更新已打开弹窗的 props。
+
+插件弹窗组件应提供 `close` 或 `update:modelValue` 事件，并自行处理组件内部交互。旧版主应用未提供该注入时，插件应保留页面内弹窗或其他 fallback。
+
+### 5.10 调用主应用确认弹窗
+
+确认弹窗使用独立的固定键，适合不需要自定义组件内容的确认场景：
+
+```vue
+<script setup lang="ts">
+import { inject } from 'vue'
+
+interface ConfirmOptions {
+  type?: 'info' | 'warn' | 'error'
+  title?: string
+  content?: string
+  confirmText?: string
+  cancelText?: string
+  width?: string | number
+}
+
+type HostConfirm = (options?: ConfirmOptions) => Promise<boolean>
+
+const confirm = inject<HostConfirm | null>('moviepilot:confirm', null)
+
+async function removeItem() {
+  const confirmed = await confirm?.({
+    type: 'warn',
+    title: '确认删除',
+    content: '删除后无法恢复，是否继续？',
+  })
+  if (!confirmed) return
+
+  // 执行删除请求。
+}
+</script>
+```
+
+确认弹窗返回 `Promise<boolean>`：用户点击确认时为 `true`，点击取消或关闭按钮时为 `false`；注入能力不存在时返回 `undefined`，插件应按未确认处理。可用配置项包括 `type`（`info` / `warn` / `error`）、`title`、`content`、`confirmText`、`cancelText` 和 `width`。
+
 #### 后端：注册侧栏入口
 
 插件需为 **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 +532,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 +564,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,10 +578,11 @@ 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`)
+// 使用宿主传入的当前实例 ID，普通插件和虚拟分身使用同一份组件代码
+recentItems.value = await props.api.get(`plugin/${props.pluginId}/history`)
 ```
 
 ```python
@@ -402,7 +601,6 @@ def get_api(self) -> List[Dict[str, Any]]:
     ]
 ```
 
-
 ## 7. 调试与排错
 
 ### 常见问题
@@ -449,24 +647,19 @@ shared: {
 }
 ```
 
-### 8.3 开发环境测试
+### 8.3 本地监听构建
 
-开发期间可以使用以下配置在本地测试：
+插件前端可使用 Vite 的监听构建模式：
 
-```typescript
-// vite.config.ts
-export default defineConfig({
-  server: {
-    port: 5001,   // 使用不同于主应用的端口
-    cors: true,   // 启用CORS
-    origin: 'http://localhost:5001'
-  }
-})
+```bash
+yarn dev
 ```
 
+将 `dev` 脚本配置为 `vite build --watch` 后，源码变化会自动重新构建。使用本地插件仓并启用 `DEV` 或 `PLUGIN_AUTO_RELOAD` 时，MoviePilot 会同步新的构建产物；刷新页面即可看到修改。
+
 ## 9. 示例代码
 
-- [插件远程组件示例](../examples/plugin-component/) - 开发插件组件的完整示例项目 
+- [插件远程组件示例](../examples/plugin-component/) - 开发插件组件的完整示例项目
 - [模块联邦问题排查指南](./federation-troubleshooting.md) - 常见问题排查
 
 ## 10. 参考资料
@@ -476,4 +669,4 @@ export default defineConfig({
 
 ---
 
-如有问题，请提交Issue。 
+如有问题，请提交Issue。

docs/testing.md

@@ -0,0 +1,119 @@
+# 单元测试架构
+
+MoviePilot-Frontend 使用 Vitest 运行单元测试和组件测试，使用 jsdom 提供 DOM 环境。测试代码参与 TypeScript 类型检查，但不作为生产构建入口。
+
+## 测试类型
+
+- 单元测试覆盖纯函数、store、composable、路由规则和独立模块的输入、输出及副作用。
+- 组件测试挂载 Vue 组件或页面，覆盖 props、emits、用户交互、可见 DOM、Router、Pinia、HTTP 请求和生命周期清理。
+- PWA、Service Worker、模块联邦远程入口、真实布局、拖拽和浏览器原生能力由真实浏览器验证，不由 jsdom 测试单独证明。
+
+## 目录结构
+
+业务 spec 与源码共置在对应责任域的 `__tests__/` 目录中，文件名与被测源码保持一致并使用 `*.spec.ts`：
+
+```text
+src/
+├── pages/
+│   ├── recommend.vue
+│   └── __tests__/recommend.spec.ts
+├── stores/
+│   ├── auth.ts
+│   └── __tests__/auth.spec.ts
+├── utils/
+│   ├── permission.ts
+│   └── __tests__/permission.spec.ts
+└── views/dashboard/
+    ├── MediaRecommend.vue
+    └── __tests__/MediaRecommend.spec.ts
+```
+
+跨业务 spec 复用的测试设施位于 `tests/`：
+
+```text
+tests/
+├── setup.ts
+└── support/
+    ├── render.ts
+    ├── factories/
+    └── msw/
+        ├── server.ts
+        └── handlers/
+```
+
+- `tests/setup.ts` 注册 DOM matcher、MSW 生命周期、浏览器 API stub 和每例清理逻辑。
+- `tests/support/render.ts` 提供带 Vuetify、i18n、Router 和 Pinia 的标准渲染入口。
+- `tests/support/factories/` 按业务对象提供最小有效测试数据工厂。
+- `tests/support/msw/handlers/` 按业务域定义 HTTP handler；`server.ts` 只负责 MSW server 实例。
+- `tests/support/msw/response.ts` 显式构造主程序普通 API 的成功或业务失败 envelope。
+- spec 通过 `@tests/*` 访问共享测试设施，通过 `@/*` 访问生产源码。
+
+## 工具职责
+
+- Vitest 提供 runner、断言、mock、fake timers 和覆盖率执行入口。
+- Vue Test Utils 用于 Vue 特有的 props、emits、slots 和局部组件控制。
+- Testing Library、jest-dom 和 user-event 用于按角色、可访问名称和用户操作验证可见行为。
+- MSW 在 HTTP 边界拦截真实 API 客户端请求。未声明请求会使测试失败，测试不得访问真实后端或外网。
+- `@pinia/testing` 用于依赖 store 的组件测试；store 自身使用真实 `createPinia()` 测试。
+
+## 编写规范
+
+- 一个 spec 对应一个主要源码文件；测试名称描述可观察行为或业务规则。
+- 组件测试断言可见 DOM、emits、路由、请求和持久化结果，不读取组件私有状态或私有方法。
+- 纯逻辑优先直接调用；依赖生命周期、provide 或 inject 的 composable 通过宿主组件挂载。
+- HTTP handler 和 factory 按业务域拆分，不建立包含所有接口或所有数据字段的全局万能 mock。
+- 只在与当前断言无关或无法由 jsdom 正确执行时 stub 子组件、浏览器能力或第三方重型组件。
+- 每个用例保持独立，不依赖文件执行顺序；timer、mock、storage、DOM 和未完成请求由全局 setup 恢复。
+- 不使用大面积快照或覆盖率占位用例。
+
+## HTTP 响应夹具
+
+主程序普通 API 使用固定的 `{ success, message, data }` envelope。MSW handler 必须通过
+`apiJson(data)` 或 `apiFailureJson(message, data)` 显式声明成功或业务失败，不得在全局 setup 中改写
+`HttpResponse.json()`、自动包装裸数据或补齐缺失字段。这样测试夹具与当前后端协议不一致时会直接失败，
+不会由兼容层掩盖。
+
+HTTP 4xx/5xx 的原始错误体、插件自定义端点和其他明确不使用主程序 envelope 的协议继续直接调用
+`HttpResponse.json()`。是否使用 envelope 由端点契约决定，不根据状态码或载荷形状自动猜测。
+
+## 测试性能
+
+- 根据逐文件和逐用例耗时日志识别热点，不按文件行数或用例数量机械拆分。
+- 业务测试可以对与断言无关的第三方重型 UI 边界使用局部 test double，但必须保留 props、emits、
+  `v-model`、可访问名称及被测业务使用的值类型；不得以直接赋值组件私有状态替代用户交互。
+- 优先减少动画、布局、定位和重复挂载等 jsdom 无法证明的成本。真实组件集成仍由代表性组件测试或浏览器回归负责。
+- 优化前后使用同一命令和 reporter 比较 focused 文件与热点用例；只有保持断言和业务契约后取得稳定收益才保留优化。
+
+## 新增测试
+
+1. 业务测试在被测源码所在目录的 `__tests__/` 中创建同名 `*.spec.ts`；工具链配置契约测试放在 `tests/config/`。
+2. 纯函数、store 和无渲染模块直接使用 Vitest；Vue 组件使用标准渲染入口。
+3. 需要 HTTP 请求时，在 `tests/support/msw/handlers/<domain>.ts` 增加对应 handler。
+   主程序普通 API 响应使用 `apiJson()` / `apiFailureJson()`；只有明确的非 envelope 协议才直接使用
+   `HttpResponse.json()`。
+4. 需要结构化业务数据时，在 `tests/support/factories/` 增加最小工厂。
+5. 核心覆盖范围发生变化时，同步更新 `vite.config.ts` 的 `coverage.include`。
+6. 提交前按影响面运行测试、类型检查、lint 和生产构建；覆盖率报告按需本地执行。
+
+## 配置边界
+
+Vitest 收集 `src/**/__tests__/**/*.spec.ts` 和 `tests/config/**/*.spec.ts`。测试模式保留 Vue、Vue JSX、Vuetify、自动导入、自动组件和 i18n 插件，并禁用 PWA、模块联邦和 top-level-await 构建插件。配置契约测试随全量测试执行，但不加入业务源码覆盖率统计范围。
+
+当前核心覆盖范围在 `vite.config.ts` 的 `coverage.include` 中显式维护，覆盖率报告写入 `coverage/`。覆盖率配置保留给本地质量分析，不作为 GitHub Actions 的单元测试门禁。
+
+## 命令与 CI
+
+```sh
+yarn test          # watch 模式
+yarn test:run      # 默认并行两个 shard 单次运行
+yarn test:run --serial # 单进程运行，适合排查顺序或共享状态问题
+yarn test:coverage # 单次运行并检查覆盖率
+yarn test:lint-config # 聚焦执行 ESLint 配置契约测试
+yarn typecheck
+yarn lint
+yarn build
+```
+
+`yarn test:run` 默认并行执行两个 Vitest shard，本地全量测试和 CI 使用同一个入口。传入 `--shard=1/2` 之类的显式分片参数时只执行对应 shard；`yarn test:run --serial` 强制单进程运行。传入测试文件或名称过滤条件时自动使用单进程，避免聚焦测试因文件数不足而无法分片。
+
+`Frontend Tests` 工作流使用 Node 24 LTS 和 frozen lockfile，在面向 `v3` 的 Pull Request 和推送到 `v3` 时运行。`lint` job 依次执行全仓只读 ESLint 和类型检查；单元测试 matrix 通过统一入口分别执行两个 Vitest shard，成功用例的标准输出默认静默，失败详情仍保留。CI 不要求覆盖率达标；覆盖率可按需在本地运行 `yarn test:coverage`。变更文件格式检查依赖 Pull Request 的 base/head SHA，因此只在 Pull Request 事件运行。Prettier 和 Node 兼容范围按[前端代码质量工具链演进](code-quality.md)继续渐进接入，新增测试代码不得引入新的 lint 或格式问题。

eslint-suppressions.json

@@ -0,0 +1,911 @@
+{
+  "examples/plugin-component/src/components/AppPage.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "examples/plugin-component/src/components/AppPageSettings.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/@core/libs/apex-chart/apexCharConfig.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "src/@core/utils/formatters.ts": {
+    "sonarjs/super-linear-regex": {
+      "count": 1
+    }
+  },
+  "src/@core/utils/index.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 5
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/@core/utils/navigator.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "src/@core/utils/theme.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/@core/utils/workflow.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "src/@validators/index.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "src/App.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    },
+    "sonarjs/no-ignored-exceptions": {
+      "count": 1
+    }
+  },
+  "src/ace-config.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 24
+    },
+    "no-useless-escape": {
+      "count": 4
+    },
+    "sonarjs/empty-string-repetition": {
+      "count": 1
+    },
+    "sonarjs/super-linear-regex": {
+      "count": 9
+    }
+  },
+  "src/api/types.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 38
+    },
+    "@typescript-eslint/no-wrapper-object-types": {
+      "count": 2
+    }
+  },
+  "src/components/agent/AgentAssistantEntry.vue": {
+    "no-useless-escape": {
+      "count": 1
+    },
+    "sonarjs/super-linear-regex": {
+      "count": 1
+    }
+  },
+  "src/components/agent/AgentAssistantPanel.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 7
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 10
+    },
+    "sonarjs/no-ignored-exceptions": {
+      "count": 5
+    }
+  },
+  "src/components/cards/DirectoryCard.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "sonarjs/super-linear-regex": {
+      "count": 1
+    },
+    "vue/no-mutating-props": {
+      "count": 27
+    }
+  },
+  "src/components/cards/FilterRuleCard.vue": {
+    "vue/no-mutating-props": {
+      "count": 1
+    }
+  },
+  "src/components/cards/FilterRuleGroupCard.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/components/cards/MediaCard.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    },
+    "no-useless-assignment": {
+      "count": 1
+    }
+  },
+  "src/components/cards/PersonCard.vue": {
+    "no-useless-assignment": {
+      "count": 1
+    }
+  },
+  "src/components/cards/PluginMixedSortCard.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "src/components/cards/SubscribeCard.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    },
+    "vue/no-v-text-v-html-on-component": {
+      "count": 2
+    }
+  },
+  "src/components/dialog/AboutDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 8
+    },
+    "vue/no-parsing-error": {
+      "count": 1
+    },
+    "vue/no-v-text-v-html-on-component": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/AlistConfigDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "vue/no-mutating-props": {
+      "count": 4
+    }
+  },
+  "src/components/dialog/AliyunAuthDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/CategoryEditDialog.vue": {
+    "@typescript-eslint/ban-ts-comment": {
+      "count": 16
+    },
+    "@typescript-eslint/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "src/components/dialog/ContentToggleSettingsDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/FilterRuleGroupInfoDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    },
+    "prefer-const": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/MediaInfoDialog.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/NotificationChannelInfoDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/RcloneConfigDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "vue/no-mutating-props": {
+      "count": 4
+    }
+  },
+  "src/components/dialog/ReorganizeDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 5
+    },
+    "sonarjs/super-linear-regex": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/SharedDialogHost.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "src/components/dialog/SiteAddEditDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/SiteCookieUpdateDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/SiteImportDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/SiteStatisticsDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/SmbConfigDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "vue/no-mutating-props": {
+      "count": 5
+    }
+  },
+  "src/components/dialog/SubscribeEditDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "src/components/dialog/SubscribeHistoryDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "vue/no-v-text-v-html-on-component": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/SubscribeSeasonDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/SubscribeShareStatisticsDialog.vue": {
+    "vue/no-side-effects-in-computed-properties": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/U115AuthDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/UserAuthDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "src/components/dialog/WorkflowActionsDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 17
+    }
+  },
+  "src/components/dialog/WorkflowAddEditDialog.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/__tests__/ForkSubscribeDialog.spec.ts": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/components/dialog/__tests__/SubscribeSeasonDialog.spec.ts": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 2
+    }
+  },
+  "src/components/field/CronField.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/components/field/PathField.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/components/filebrowser/FileList.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    },
+    "vue/no-v-text-v-html-on-component": {
+      "count": 2
+    }
+  },
+  "src/components/input/PathInput.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "src/components/misc/DashboardElement.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "src/components/misc/MediaIdSelector.vue": {
+    "vue/no-v-text-v-html-on-component": {
+      "count": 1
+    }
+  },
+  "src/components/misc/OpticalLogoLab.vue": {
+    "no-useless-assignment": {
+      "count": 1
+    }
+  },
+  "src/components/misc/ProgressiveCardGrid.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 4
+    },
+    "@typescript-eslint/no-unused-expressions": {
+      "count": 1
+    }
+  },
+  "src/components/pwa/PWAInstallPrompt.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 3
+    },
+    "sonarjs/no-ignored-exceptions": {
+      "count": 1
+    }
+  },
+  "src/components/render/DashboardRender.vue": {
+    "vue/no-v-text-v-html-on-component": {
+      "count": 1
+    }
+  },
+  "src/components/render/FormRender.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 17
+    },
+    "sonarjs/code-eval": {
+      "count": 4
+    }
+  },
+  "src/components/render/PageRender.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "prefer-const": {
+      "count": 1
+    },
+    "vue/no-v-text-v-html-on-component": {
+      "count": 1
+    }
+  },
+  "src/components/slide/SlideViewTitle.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/components/slide/VirtualSlideView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 4
+    },
+    "no-useless-assignment": {
+      "count": 1
+    }
+  },
+  "src/components/workflow/AddDownloadAction.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "vue/no-mutating-props": {
+      "count": 4
+    }
+  },
+  "src/components/workflow/FetchDownloadsAction.vue": {
+    "vue/no-mutating-props": {
+      "count": 2
+    }
+  },
+  "src/components/workflow/FetchMediasAction.vue": {
+    "vue/no-mutating-props": {
+      "count": 3
+    }
+  },
+  "src/components/workflow/FetchRssAction.vue": {
+    "vue/no-mutating-props": {
+      "count": 5
+    }
+  },
+  "src/components/workflow/FetchTorrentsAction.vue": {
+    "vue/no-mutating-props": {
+      "count": 7
+    }
+  },
+  "src/components/workflow/FilterMediasAction.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    },
+    "vue/no-mutating-props": {
+      "count": 3
+    }
+  },
+  "src/components/workflow/FilterTorrentsAction.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "vue/no-mutating-props": {
+      "count": 7
+    }
+  },
+  "src/components/workflow/InvokePluginAction.vue": {
+    "vue/no-mutating-props": {
+      "count": 4
+    }
+  },
+  "src/components/workflow/NoteAction.vue": {
+    "vue/no-mutating-props": {
+      "count": 1
+    }
+  },
+  "src/components/workflow/ScanFileAction.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "vue/no-mutating-props": {
+      "count": 2
+    }
+  },
+  "src/components/workflow/SendMessageAction.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "vue/no-mutating-props": {
+      "count": 2
+    }
+  },
+  "src/components/workflow/TransferFileAction.vue": {
+    "vue/no-mutating-props": {
+      "count": 1
+    }
+  },
+  "src/composables/__tests__/useMediaSubscribe.spec.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/composables/useCacheManager.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "src/composables/useCardAccentColor.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/composables/useConfirm.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/composables/useDynamicButton.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "src/composables/useDynamicHeaderTab.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    },
+    "no-useless-assignment": {
+      "count": 1
+    },
+    "sonarjs/no-dead-store": {
+      "count": 1
+    }
+  },
+  "src/composables/useMediaSubscribe.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/composables/usePWA.ts": {
+    "no-async-promise-executor": {
+      "count": 1
+    }
+  },
+  "src/composables/usePWAInstall.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "src/composables/useSetupWizard.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/composables/useSharedDialog.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/composables/useStateRestore.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/composables/useTorrentFilter.ts": {
+    "no-useless-assignment": {
+      "count": 1
+    }
+  },
+  "src/layouts/default/components/Footer.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 6
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/layouts/default/components/QuickAccess.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 2
+    },
+    "no-useless-assignment": {
+      "count": 1
+    },
+    "sonarjs/no-ignored-exceptions": {
+      "count": 2
+    }
+  },
+  "src/layouts/default/components/UserNotification.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/layouts/default/components/UserProfile.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 5
+    },
+    "sonarjs/no-ignored-exceptions": {
+      "count": 2
+    }
+  },
+  "src/pages/__tests__/subscribe.spec.ts": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/pages/credits.vue": {
+    "prefer-const": {
+      "count": 1
+    }
+  },
+  "src/pages/resource.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 3
+    },
+    "sonarjs/no-duplicated-branches": {
+      "count": 2
+    }
+  },
+  "src/pages/setting.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/plugins/i18n.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/plugins/stateRestore.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/plugins/vuetify/AppDialog.ts": {
+    "sonarjs/super-linear-regex": {
+      "count": 1
+    }
+  },
+  "src/plugins/vuetify/icons.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/router/index.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "src/service-worker.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 3
+    },
+    "no-useless-assignment": {
+      "count": 1
+    },
+    "sonarjs/no-ignored-exceptions": {
+      "count": 2
+    }
+  },
+  "src/stores/global.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "src/stores/types.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "src/utils/agentAssistantBubble.ts": {
+    "@typescript-eslint/no-empty-object-type": {
+      "count": 1
+    }
+  },
+  "src/utils/apexCharts.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "src/utils/appDeepLink.ts": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 3
+    },
+    "no-case-declarations": {
+      "count": 1
+    },
+    "no-useless-escape": {
+      "count": 10
+    },
+    "sonarjs/no-dead-store": {
+      "count": 1
+    }
+  },
+  "src/utils/backgroundManager.ts": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 2
+    }
+  },
+  "src/utils/badge.ts": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 2
+    },
+    "sonarjs/no-ignored-exceptions": {
+      "count": 2
+    }
+  },
+  "src/utils/globalSetting.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/utils/loadingStateManager.ts": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/utils/permission.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 9
+    }
+  },
+  "src/utils/requestOptimizer.ts": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 5
+    },
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/utils/themeLogo.ts": {
+    "no-useless-assignment": {
+      "count": 1
+    }
+  },
+  "src/views/dashboard/AnalyticsCpu.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/views/dashboard/AnalyticsMemory.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/views/dashboard/AnalyticsSpeed.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/views/dashboard/MediaServerLibrary.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/views/dashboard/MediaServerPlaying.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/views/discover/MediaCardSlideView.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/views/discover/PersonCardListView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "src/views/discover/PersonDetailView.vue": {
+    "no-useless-assignment": {
+      "count": 1
+    }
+  },
+  "src/views/reorganize/TransferHistoryView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 5
+    },
+    "vue/no-v-text-v-html-on-component": {
+      "count": 3
+    }
+  },
+  "src/views/setting/AccountSettingDirectory.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 4
+    },
+    "sonarjs/super-linear-regex": {
+      "count": 1
+    }
+  },
+  "src/views/setting/AccountSettingRule.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "src/views/setting/AccountSettingSearch.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "src/views/setting/AccountSettingSite.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "src/views/setting/AccountSettingSubscribe.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "src/views/setting/AccountSettingSystem.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/views/setup/MediaServerSettingsStep.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/views/setup/PreferencesSettingsStep.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/views/subscribe/FullCalendarView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/views/subscribe/SubscribeListView.vue": {
+    "prefer-const": {
+      "count": 1
+    }
+  },
+  "src/views/subscribe/SubscribePopularView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "prefer-const": {
+      "count": 1
+    }
+  },
+  "src/views/subscribe/SubscribeShareView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "prefer-const": {
+      "count": 1
+    }
+  },
+  "src/views/system/CacheView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/views/system/LoggingView.vue": {
+    "@typescript-eslint/no-unused-vars": {
+      "count": 1
+    },
+    "no-control-regex": {
+      "count": 1
+    },
+    "sonarjs/super-linear-regex": {
+      "count": 8
+    }
+  },
+  "src/views/system/ModuleTestView.vue": {
+    "vue/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "src/views/system/NameTestView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/views/system/RuleTestView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "src/views/system/WordsView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "src/views/workflow/WorkflowShareView.vue": {
+    "@typescript-eslint/no-explicit-any": {
+      "count": 1
+    },
+    "prefer-const": {
+      "count": 1
+    }
+  },
+  "vite.config.ts": {
+    "@typescript-eslint/ban-ts-comment": {
+      "count": 1
+    }
+  }
+}

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, includeIgnoreFile } from 'eslint/config'
+import { fileURLToPath } from 'node:url'
+
+const gitignorePath = fileURLToPath(new URL('.gitignore', import.meta.url))
+
+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([
+  includeIgnoreFile(gitignorePath, {
+    gitignoreResolution: true,
+    name: 'moviepilot/gitignore',
+  }),
+  globalIgnores(
+    ['**/.worktrees/**', '**/vite.config.*.timestamp-*.mjs', 'src/@iconify/**', '**/*.d.ts'],
+    'moviepilot/eslint-only-ignores',
+  ),
+  {
+    ...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,16 +1,28 @@
 {
   "name": "moviepilot",
-  "version": "2.13.0",
+  "version": "3.0.0",
   "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": "node scripts/run-tests.mjs",
+    "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"
@@ -20,6 +32,10 @@
       "dist/**/*"
     ]
   },
+  "resolutions": {
+    "vitest/**/vite": "5.4.18",
+    "vitest/vite": "5.4.18"
+  },
   "dependencies": {
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
@@ -49,6 +65,8 @@
     "dayjs": "^1.11.13",
     "express": "^4.21.2",
     "express-http-proxy": "^2.1.1",
+    "gridstack": "^12.6.0",
+    "gsap": "^3.15.0",
     "http-proxy-middleware": "^3.0.0",
     "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
@@ -56,11 +74,12 @@
     "markdown-it-link-attributes": "^4.0.1",
     "mousetrap": "^1.6.5",
     "nprogress": "^0.2.0",
-    "pinia": "^3.0.1",
+    "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.2.0",
     "qrcode": "^1.5.4",
     "sass": "^1.83.4",
     "tailwindcss": "^ 3.4.17",
+    "three": "^0.185.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "vue-toastification": "^2.0.0-rc.5",
@@ -72,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",
@@ -81,7 +101,12 @@
     "@iconify/vue": "^4.3.0",
     "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@originjs/vite-plugin-federation": "^1.4.1",
+    "@pinia/testing": "1.0.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@testing-library/dom": "9.3.4",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/user-event": "14.6.1",
+    "@testing-library/vue": "8.1.0",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
@@ -90,22 +115,24 @@
     "@types/node": "^20.1.4",
     "@types/nprogress": "^0.2.3",
     "@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",
@@ -113,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",
@@ -122,10 +150,15 @@
     "vite-plugin-top-level-await": "^1.5.0",
     "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.22",
+  "engines": {
+    "node": ">=20.19"
+  }
 }

public/nginx.conf

@@ -35,6 +35,23 @@ http {
             try_files $uri $uri/ /index.html;
         }
 
+        location = /service-worker.js {
+            # Service Worker 必须保持稳定 URL 并每次重新验证，避免前端更新后继续注册旧版本。
+            expires off;
+            add_header Cache-Control "no-cache, must-revalidate";
+            root html;
+            try_files $uri =404;
+        }
+
+        location = /manifest.webmanifest {
+            # Web App Manifest 参与 PWA 安装与资源发现，不能跟普通静态资源一起长缓存。
+            expires off;
+            default_type application/manifest+json;
+            add_header Cache-Control "no-cache, must-revalidate";
+            root html;
+            try_files $uri =404;
+        }
+
         location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
             # 静态资源
             expires 1y;
@@ -44,18 +61,18 @@ http {
 
         location /assets {
             # 静态资源
-            expires 1y;
-            add_header Cache-Control "public";
+            add_header Cache-Control "public, max-age=31536000, immutable";
             root html;
         }
 
-        location ~ ^/api/v1/(system/(message|progress/|logging)|search/.*/stream$) {
+        location ~ ^/api/v1/(system/(message|progress/|logging)|search/.*/stream$|message/agent/stream$) {
             # SSE MIME类型设置
             default_type text/event-stream;
 
             # 禁用缓存
-            add_header Cache-Control no-cache;
+            add_header Cache-Control "no-cache, no-transform";
             add_header X-Accel-Buffering no;
+            gzip off;
             proxy_buffering off;
             proxy_cache off;
 

public/offline.html

@@ -7,7 +7,7 @@
   <link rel="icon" href="/favicon.ico">
   <style>
     :root {
-      --primary-color: #9155FD;
+      --primary-color: #8D51F9;
       --surface-color: #FFFFFF;
       --text-color: #333333;
       --border-color: rgba(0, 0, 0, 0.12);
@@ -52,7 +52,7 @@
       width: 120px;
       height: 120px;
       margin: 0 auto 32px;
-      background: rgba(145, 85, 253, 0.1);
+      background: rgba(141, 81, 249, 0.1);
       border-radius: 50%;
       display: flex;
       align-items: center;
@@ -100,7 +100,7 @@
       gap: 8px;
       margin-top: 24px;
       padding: 8px 16px;
-      background: rgba(145, 85, 253, 0.1);
+      background: rgba(141, 81, 249, 0.1);
       border-radius: 20px;
       font-size: 0.875rem;
     }

scripts/check-season-label.ts

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

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/v3', 'refs/remotes/origin/v3', 'refs/heads/v3']
+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
+}
+
+/** 为本地命令选择与当前提交具有共同祖先的 v3 基线。 */
+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('无法定位可比较的 v3 基线，请通过 --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 }
+]

scripts/run-tests.mjs

@@ -0,0 +1,56 @@
+import { spawn } from 'node:child_process'
+import { fileURLToPath } from 'node:url'
+
+const defaultShards = ['1/2', '2/2']
+const serialFlag = '--serial'
+const vitestCliPath = fileURLToPath(import.meta.resolve('vitest/vitest.mjs'))
+
+/**
+ * 生成一次 test:run 所需的 Vitest 参数组。全量测试默认并行；显式分片、串行模式和聚焦过滤保持单进程。
+ *
+ * @param {string[]} args test:run 接收的命令行参数
+ * @returns {string[][]} 每个 Vitest 进程接收的一组参数
+ */
+export function planTestRuns(args) {
+  const vitestArgs = args.filter(arg => arg !== serialFlag)
+  const hasExplicitShard = vitestArgs.some(arg => arg === '--shard' || arg.startsWith('--shard='))
+  const hasPositionalFilter = vitestArgs.some(arg => !arg.startsWith('-'))
+
+  if (args.includes(serialFlag) || hasExplicitShard || hasPositionalFilter) return [vitestArgs]
+
+  return defaultShards.map(shard => [...vitestArgs, `--shard=${shard}`])
+}
+
+function runVitest(args) {
+  return new Promise(resolveRun => {
+    const child = spawn(process.execPath, [vitestCliPath, 'run', ...args], {
+      env: process.env,
+      stdio: 'inherit',
+    })
+
+    child.on('error', error => {
+      console.error(`无法启动 Vitest: ${error.message}`)
+      resolveRun(1)
+    })
+    child.on('close', (code, signal) => {
+      if (signal) {
+        console.error(`Vitest 被信号 ${signal} 终止`)
+        resolveRun(1)
+        return
+      }
+
+      resolveRun(code ?? 1)
+    })
+  })
+}
+
+async function main() {
+  const runs = planTestRuns(process.argv.slice(2))
+  const exitCodes = await Promise.all(runs.map(runVitest))
+
+  process.exitCode = exitCodes.find(code => code !== 0) ?? 0
+}
+
+if (process.argv[1] && fileURLToPath(import.meta.url) === process.argv[1]) {
+  await main()
+}

src/@core/components/ConfirmDialog.vue

@@ -4,6 +4,8 @@ import { computed } from 'vue'
 interface Props {
   modelValue: boolean
   type?: 'info' | 'warn' | 'error'
+  /** 覆盖确认类型的默认图标，用于表达更具体的操作语义。 */
+  icon?: string
   title?: string
   content?: string
   confirmText?: string
@@ -64,15 +66,15 @@ function handleCancel() {
       <VCardItem>
         <div class="d-flex align-center justify-start mt-3">
           <VAvatar :color="currentType.color" variant="text" size="x-large">
-            <VIcon size="x-large" :icon="currentType.icon" />
+            <VIcon size="x-large" :icon="icon || currentType.icon" />
           </VAvatar>
           <div class="mx-3">
             <p class="font-weight-bold text-xl text-high-emphasis">{{ title }}</p>
-            <p>{{ content }}</p>
+            <p class="app-confirm-dialog-content">{{ content }}</p>
           </div>
         </div>
       </VCardItem>
-      <VCardActions class="mx-auto">
+      <VCardActions class="app-confirm-dialog-actions mx-auto">
         <VBtn variant="tonal" color="secondary" class="px-5" @click="handleCancel">
           {{ cancelText }}
         </VBtn>
@@ -84,3 +86,9 @@ function handleCancel() {
     </VCard>
   </VDialog>
 </template>
+
+<style scoped>
+.app-confirm-dialog-content {
+  white-space: pre-line;
+}
+</style>

src/@core/components/DialogCloseBtn.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-// 定义输入参数
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 const props = defineProps({
-  // 是否显示
+  /** 覆盖关闭按钮默认的右上角定位 class。 */
   innerClass: String,
 })
-// 定义触发的自定义事件
 const emit = defineEmits(['click', 'update:modelValue'])
-// 按钮点击
+
 function onClick() {
   emit('update:modelValue', false)
   emit('click')
@@ -15,6 +16,7 @@ function onClick() {
 
 <template>
   <IconBtn
+    :aria-label="t('common.close')"
     :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3 z-10'"
     @click.stop="onClick"
   >

src/@core/components/__tests__/DialogCloseBtn.spec.ts

@@ -0,0 +1,37 @@
+import DialogCloseBtn from '@/@core/components/DialogCloseBtn.vue'
+import i18n from '@/plugins/i18n'
+import { screen, waitFor } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { renderWithProviders } from '@tests/support/render'
+import { afterEach, describe, expect, it } from 'vitest'
+
+afterEach(() => {
+  i18n.global.locale.value = 'zh-CN'
+})
+
+describe('DialogCloseBtn', () => {
+  it('keeps its visual and event contracts while exposing a localized name', async () => {
+    const user = userEvent.setup()
+    const { container, emitted, rerender } = await renderWithProviders(DialogCloseBtn)
+    const button = screen.getByRole('button', { name: '关闭' })
+
+    expect(button).toHaveClass('absolute', 'right-3', 'top-3', 'z-10')
+    const icon = button.querySelector('svg.v-icon')
+    expect(container.querySelectorAll('svg.v-icon')).toHaveLength(1)
+    expect(icon).toHaveAttribute('aria-hidden', 'true')
+    expect(icon).toHaveAttribute('role', 'img')
+    expect(icon).toHaveAttribute('height', '1em')
+    expect(icon).toHaveAttribute('width', '1em')
+
+    i18n.global.locale.value = 'en-US'
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Close' })).toBe(button))
+
+    await user.click(button)
+    expect(emitted()['update:modelValue']).toEqual([[false]])
+    expect(emitted().click).toEqual([[]])
+
+    await rerender({ innerClass: 'dialog-close-custom' })
+    expect(button).toHaveClass('dialog-close-custom')
+    expect(button).not.toHaveClass('absolute', 'right-3', 'top-3', 'z-10')
+  })
+})

src/@core/scss/_misc.scss

@@ -22,8 +22,8 @@ code {
 
 %blurry-bg {
   position: relative;
-  isolation: isolate;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
+  isolation: isolate;
 
   @media (width >= 1280px) and (hover: hover) {
     background: rgba(var(--v-theme-background), 1);

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/apex-chart.scss

@@ -3,6 +3,9 @@
 
 // 👉 Apex chart
 .apexcharts-canvas {
+  // 图表仅保留纵向页面滚动，禁止双指缩放等触摸手势。
+  touch-action: pan-y;
+
   // For RTL alignment
   .apexcharts-yaxis-texts-g {
     text-align: start;

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

@@ -33,11 +33,3 @@ $ps-track-size: 0.5rem;
 .ps__rail-y:hover > .ps__thumb-y {
   inline-size: $ps-hover-size;
 }
-
-// fix bug
-@media(hover: none) {
-  .ps > .ps__rail-x,
-  .ps > .ps__rail-y {
-    opacity: 0.6;
-  }
-} 

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

@@ -5,13 +5,13 @@
 // Vertical nav scrolled sticky elevated nav
 %default-layout-vertical-nav-scrolled-sticky-elevated-nav {
   background-color: rgb(var(--v-theme-surface));
-  box-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
+  box-shadow: var(--app-surface-shadow);
 }
 
 // Floating navbar and sticky elevated navbar scrolled
 %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
   background-color: rgb(var(--v-theme-surface));
-  box-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
+  box-shadow: var(--app-surface-shadow);
 }
 
 // Floating navbar overlay

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

@@ -0,0 +1,115 @@
+import { vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  getColor: vi.fn(),
+}))
+
+vi.mock('colorthief', () => ({
+  default: class ColorThief {
+    getColor(image: HTMLImageElement, quality?: number) {
+      return mocks.getColor(image, quality)
+    }
+  },
+}))
+
+import { extractDominantColor, getDominantColor, preloadCorsImage } from '@/@core/utils/image'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+function createImage(cacheKey: string) {
+  const image = document.createElement('img')
+  Object.defineProperty(image, 'currentSrc', { configurable: true, value: `https://image.example/${cacheKey}.png` })
+
+  return image
+}
+
+describe('dominant color extraction', () => {
+  beforeEach(() => {
+    mocks.getColor.mockReset()
+  })
+
+  it('shares a pending extraction and reuses only the successful result', async () => {
+    const image = createImage('shared-success')
+    mocks.getColor.mockReturnValue([18, 52, 86])
+
+    await expect(Promise.all([extractDominantColor(image), extractDominantColor(image)])).resolves.toEqual([
+      '#123456',
+      '#123456',
+    ])
+    await expect(extractDominantColor(image)).resolves.toBe('#123456')
+    expect(mocks.getColor).toHaveBeenCalledOnce()
+  })
+
+  it('does not cache failures or let one caller fallback pollute another', async () => {
+    const image = createImage('retry-after-failure')
+    mocks.getColor.mockImplementation(() => {
+      throw new Error('tainted canvas')
+    })
+    vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+
+    await expect(getDominantColor(image, { fallback: '#111111' })).resolves.toBe('#111111')
+    await expect(getDominantColor(image, { fallback: '#222222' })).resolves.toBe('#222222')
+    expect(mocks.getColor).toHaveBeenCalledTimes(2)
+  })
+
+  it('keeps the existing default fallback contract for callers such as QuickAccess', async () => {
+    await expect(getDominantColor(null)).resolves.toBe('#28A9E1')
+    expect(mocks.getColor).not.toHaveBeenCalled()
+  })
+
+  it('retains the bounded FIFO success cache', async () => {
+    mocks.getColor.mockReturnValue([1, 2, 3])
+
+    for (let index = 0; index <= 100; index += 1) await extractDominantColor(createImage(`fifo-${index}`))
+
+    expect(mocks.getColor).toHaveBeenCalledTimes(101)
+    await extractDominantColor(createImage('fifo-50'))
+    expect(mocks.getColor).toHaveBeenCalledTimes(101)
+    await extractDominantColor(createImage('fifo-0'))
+    expect(mocks.getColor).toHaveBeenCalledTimes(102)
+  })
+})
+
+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/__tests__/workflow.spec.ts

@@ -0,0 +1,199 @@
+import useDragAndDrop from '@core/utils/workflow'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h, nextTick } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  addNodes: vi.fn(),
+  screenToFlowCoordinate: vi.fn(),
+  onNodesInitialized: vi.fn(),
+  updateNode: vi.fn(),
+  off: vi.fn(),
+  onNodesInitializedCallback: undefined as (() => void) | undefined,
+}))
+
+vi.mock('@vue-flow/core', () => ({
+  useVueFlow: () => ({
+    addNodes: mocks.addNodes,
+    screenToFlowCoordinate: mocks.screenToFlowCoordinate,
+    onNodesInitialized: mocks.onNodesInitialized,
+    updateNode: mocks.updateNode,
+  }),
+}))
+
+type DragAndDrop = ReturnType<typeof useDragAndDrop>
+
+let current: DragAndDrop | undefined
+let wrapper: ReturnType<typeof mount> | undefined
+
+const Harness = defineComponent({
+  name: 'WorkflowDragAndDropHarness',
+  setup() {
+    current = useDragAndDrop()
+    return () => h('div')
+  },
+})
+
+function mountHarness() {
+  wrapper = mount(Harness)
+  return current!
+}
+
+function createDataTransfer() {
+  return {
+    effectAllowed: '',
+    dropEffect: '',
+    setData: vi.fn(),
+  }
+}
+
+describe('useDragAndDrop', () => {
+  beforeEach(() => {
+    mocks.addNodes.mockReset()
+    mocks.screenToFlowCoordinate.mockReset().mockImplementation(({ x, y }: { x: number; y: number }) => ({ x, y }))
+    mocks.onNodesInitialized.mockReset().mockImplementation((callback: () => void) => {
+      mocks.onNodesInitializedCallback = callback
+      return { off: mocks.off }
+    })
+    mocks.updateNode.mockReset()
+    mocks.off.mockReset()
+    mocks.onNodesInitializedCallback = undefined
+    document.body.style.userSelect = ''
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+    wrapper = undefined
+    current = undefined
+    document.body.style.userSelect = ''
+  })
+
+  it('does not enter drag-over or create a node before a drag starts', async () => {
+    const dnd = mountHarness()
+    const preventDefault = vi.fn()
+
+    dnd.onDragOver({ preventDefault, dataTransfer: createDataTransfer() })
+    dnd.onDrop({ clientX: 10, clientY: 20 })
+    await nextTick()
+
+    expect(preventDefault).toHaveBeenCalledOnce()
+    expect(dnd.isDragOver.value).toBe(false)
+    expect(mocks.addNodes).not.toHaveBeenCalled()
+  })
+
+  it('tracks drag state, prevents selection, and clears everything on document drop', async () => {
+    const dnd = mountHarness()
+    const dataTransfer = createDataTransfer()
+    const data = { type: 'ScanFileAction', name: '扫描目录' }
+    const addEventListener = vi.spyOn(document, 'addEventListener')
+    const removeEventListener = vi.spyOn(document, 'removeEventListener')
+
+    dnd.onDragStart({ dataTransfer }, data)
+    await nextTick()
+    expect(dataTransfer.setData).toHaveBeenCalledWith('application/vueflow', data)
+    expect(dataTransfer.effectAllowed).toBe('move')
+    expect(dnd.draggedData.value).toEqual(data)
+    expect(dnd.isDragging.value).toBe(true)
+    expect(document.body.style.userSelect).toBe('none')
+    expect(addEventListener).toHaveBeenCalledWith('drop', expect.any(Function))
+    expect(addEventListener).toHaveBeenCalledWith('dragend', expect.any(Function))
+
+    const dragOverTransfer = createDataTransfer()
+    const preventDefault = vi.fn()
+    dnd.onDragOver({ preventDefault, dataTransfer: dragOverTransfer })
+    await nextTick()
+    expect(dnd.isDragOver.value).toBe(true)
+    expect(dragOverTransfer.dropEffect).toBe('move')
+    dnd.onDragLeave()
+    expect(dnd.isDragOver.value).toBe(false)
+
+    document.dispatchEvent(new Event('drop'))
+    await nextTick()
+    expect(dnd.draggedData.value).toBeNull()
+    expect(dnd.isDragging.value).toBe(false)
+    expect(dnd.isDragOver.value).toBe(false)
+    expect(document.body.style.userSelect).toBe('')
+    expect(removeEventListener).toHaveBeenCalledWith('drop', expect.any(Function))
+    expect(removeEventListener).toHaveBeenCalledWith('dragend', expect.any(Function))
+  })
+
+  it('clears the drag state when the browser cancels the native drag', async () => {
+    const dnd = mountHarness()
+    const removeEventListener = vi.spyOn(document, 'removeEventListener')
+
+    dnd.onDragStart({ dataTransfer: createDataTransfer() }, { type: 'NoteAction', name: '备注' })
+    await nextTick()
+    dnd.onDragOver({ preventDefault: vi.fn(), dataTransfer: createDataTransfer() })
+    await nextTick()
+
+    document.dispatchEvent(new Event('dragend'))
+    await nextTick()
+
+    expect(dnd.draggedData.value).toBeNull()
+    expect(dnd.isDragging.value).toBe(false)
+    expect(dnd.isDragOver.value).toBe(false)
+    expect(document.body.style.userSelect).toBe('')
+    expect(removeEventListener).toHaveBeenCalledWith('drop', expect.any(Function))
+    expect(removeEventListener).toHaveBeenCalledWith('dragend', expect.any(Function))
+  })
+
+  it('deep clones dropped data and centers the node after Vue Flow initializes it', async () => {
+    const dnd = mountHarness()
+    const data = {
+      type: 'ScanFileAction',
+      name: '扫描目录',
+      description: '扫描媒体目录',
+      data: { nested: { enabled: true } },
+    }
+
+    dnd.onDragStart({ dataTransfer: createDataTransfer() }, data)
+    dnd.onDrop({ clientX: 80, clientY: 120 })
+
+    expect(mocks.screenToFlowCoordinate).toHaveBeenCalledWith({ x: 80, y: 120 })
+    expect(mocks.addNodes).toHaveBeenCalledOnce()
+    const node = mocks.addNodes.mock.calls[0][0]
+    expect(node).toMatchObject({
+      type: 'ScanFileAction',
+      name: '扫描目录',
+      description: '扫描媒体目录',
+      position: { x: 80, y: 120 },
+      data: { nested: { enabled: true } },
+    })
+    expect(node.id).toMatch(/^act_/)
+    expect(node.data).not.toBe(data.data)
+
+    data.data.nested.enabled = false
+    expect(node.data.nested.enabled).toBe(true)
+
+    expect(mocks.onNodesInitialized).toHaveBeenCalledOnce()
+    mocks.onNodesInitializedCallback?.()
+    expect(mocks.updateNode).toHaveBeenCalledWith(node.id, expect.any(Function))
+    const update = mocks.updateNode.mock.calls[0][1] as (node: {
+      position: { x: number; y: number }
+      dimensions: { width: number; height: number }
+    }) => { position: { x: number; y: number } }
+    expect(update({ position: { x: 80, y: 120 }, dimensions: { width: 40, height: 20 } })).toEqual({
+      position: { x: 60, y: 110 },
+    })
+    expect(mocks.off).toHaveBeenCalledOnce()
+  })
+
+  it('cleans the global selection style and drop listener when unmounted during a drag', async () => {
+    const dnd = mountHarness()
+    const removeEventListener = vi.spyOn(document, 'removeEventListener')
+
+    dnd.onDragStart({ dataTransfer: createDataTransfer() }, { type: 'NoteAction', name: '备注' })
+    await nextTick()
+    expect(document.body.style.userSelect).toBe('none')
+
+    wrapper!.unmount()
+    await nextTick()
+
+    expect(document.body.style.userSelect).toBe('')
+    expect(dnd.isDragging.value).toBe(false)
+    expect(dnd.isDragOver.value).toBe(false)
+    expect(dnd.draggedData.value).toBeNull()
+    expect(removeEventListener).toHaveBeenCalledWith('drop', expect.any(Function))
+    expect(removeEventListener).toHaveBeenCalledWith('dragend', expect.any(Function))
+  })
+})

src/@core/utils/corsImage.ts

@@ -0,0 +1,27 @@
+/** 建立带 CORS 响应头的浏览器缓存，必要时修复旧的非 CORS 缓存条目。 */
+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/formatters.ts

@@ -66,6 +66,43 @@ export const prefixWithPlus = (value: number) => (value > 0 ? `+${value}` : valu
 // 格式化为Sxx
 export const formatSeason = (value: string) => (value ? `S${value.padStart(2, '0')}` : '')
 
+/**
+ * 格式化为 SxxExx 季集标识，多个连续集会合并为范围。
+ */
+export function formatSeasonEpisode(
+  season: number | string | null | undefined,
+  episodeNumbers: number[],
+): string {
+  const seasonText = season === null || season === undefined || season === '' ? '' : formatSeason(String(season))
+  const normalizedNumbers = [...new Set(episodeNumbers)]
+    .map(number => Number(number))
+    .filter(number => Number.isFinite(number) && number > 0)
+    .sort((first, second) => first - second)
+
+  if (!normalizedNumbers.length) return seasonText
+
+  const formatEpisode = (number: number) => `E${String(number).padStart(2, '0')}`
+  const ranges: string[] = []
+  let start = normalizedNumbers[0]
+  let end = normalizedNumbers[0]
+
+  for (let index = 1; index < normalizedNumbers.length; index++) {
+    const currentNumber = normalizedNumbers[index]
+
+    if (currentNumber === end + 1) {
+      end = currentNumber
+    } else {
+      ranges.push(start === end ? formatEpisode(start) : `${formatEpisode(start)}-${formatEpisode(end)}`)
+      start = currentNumber
+      end = currentNumber
+    }
+  }
+
+  ranges.push(start === end ? formatEpisode(start) : `${formatEpisode(start)}-${formatEpisode(end)}`)
+
+  return `${seasonText}${ranges.join('、')}`
+}
+
 // 格式化为xx[TGMK]B
 export function formatFileSize(bytes: number, decimals = 2, prefix = false) {
   // 负数标记

src/@core/utils/image.ts

@@ -1,9 +1,11 @@
 import ColorThief from 'colorthief'
+export { preloadCorsImage } from './corsImage'
 
 const DEFAULT_DOMINANT_COLOR = '#28A9E1'
 const DOMINANT_COLOR_CACHE_LIMIT = 100
 const colorThief = new ColorThief()
-const dominantColorCache = new Map<string, Promise<string>>()
+const dominantColorCache = new Map<string, string>()
+const pendingDominantColorRequests = new Map<string, Promise<string | undefined>>()
 
 interface DominantColorOptions {
   fallback?: string
@@ -28,64 +30,89 @@ function getImageCacheKey(image: HTMLImageElement) {
   return image.currentSrc || image.src || ''
 }
 
-function rememberDominantColor(key: string, colorPromise: Promise<string>) {
-  if (!key) return colorPromise
+function rememberDominantColor(key: string, color: string) {
+  if (!key) return
 
   if (dominantColorCache.size >= DOMINANT_COLOR_CACHE_LIMIT) {
     const firstKey = dominantColorCache.keys().next().value
     if (firstKey) dominantColorCache.delete(firstKey)
   }
 
-  dominantColorCache.set(key, colorPromise)
+  dominantColorCache.set(key, color)
+}
+
+/** 提取真实主色；失败不写入成功缓存，允许后续请求重试。 */
+export async function extractDominantColor(
+  image: HTMLImageElement | undefined | null,
+  options: Pick<DominantColorOptions, 'quality'> = {},
+): Promise<string | undefined> {
+  if (!image) return undefined
+
+  const cacheKey = getImageCacheKey(image)
+  const cachedColor = cacheKey ? dominantColorCache.get(cacheKey) : undefined
+  if (cachedColor) return cachedColor
+
+  const pendingRequest = cacheKey ? pendingDominantColorRequests.get(cacheKey) : undefined
+  if (pendingRequest) return pendingRequest
+
+  const colorPromise = Promise.resolve()
+    .then(() => {
+      const dominantColor = colorThief.getColor(image, options.quality ?? 20)
+      const color = rgbStringToHex(dominantColor)
+      rememberDominantColor(cacheKey, color)
+
+      return color
+    })
+    .catch(error => {
+      console.warn('Failed to extract dominant color:', error)
+      return undefined
+    })
+    .finally(() => {
+      if (cacheKey) pendingDominantColorRequests.delete(cacheKey)
+    })
+
+  if (cacheKey) pendingDominantColorRequests.set(cacheKey, colorPromise)
+
   return colorPromise
 }
 
-// 提取主要颜色
+/** 提取主色并在失败时解析调用方 fallback，保持既有调用合同。 */
 export async function getDominantColor(
   image: HTMLImageElement | undefined | null,
   options: DominantColorOptions = {},
 ): Promise<string> {
   const fallback = options.fallback ?? DEFAULT_DOMINANT_COLOR
 
-  if (!image) return fallback
-
-  const cacheKey = getImageCacheKey(image)
-  const cachedColor = cacheKey ? dominantColorCache.get(cacheKey) : undefined
-  if (cachedColor) return cachedColor
-
-  const colorPromise = Promise.resolve()
-    .then(() => {
-      const dominantColor = colorThief.getColor(image, options.quality ?? 20)
-      return rgbStringToHex(dominantColor)
-    })
-    .catch(error => {
-      console.warn('Failed to extract dominant color:', error)
-      return fallback
-    })
-
-  return rememberDominantColor(cacheKey, colorPromise)
+  return (await extractDominantColor(image, options)) ?? fallback
 }
 
 // 预加载图片
 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)
     }
   })
 }

src/@core/utils/season.ts

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

src/@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/@core/utils/workflow.ts

@@ -1,5 +1,5 @@
 import { useVueFlow } from '@vue-flow/core'
-import { ref, watch } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 import { cloneDeep } from 'lodash-es'
 
 /**
@@ -18,7 +18,7 @@ const state = {
   /**
    * The type of the node being dragged.
    */
-  draggedData: ref<any | null>({}),
+  draggedData: ref<any | null>(null),
   isDragOver: ref(false),
   isDragging: ref(false),
 }
@@ -27,6 +27,7 @@ export default function useDragAndDrop() {
   const { draggedData, isDragOver, isDragging } = state
 
   const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()
+  let ownsDragListeners = false
 
   watch(isDragging, dragging => {
     document.body.style.userSelect = dragging ? 'none' : ''
@@ -42,6 +43,8 @@ export default function useDragAndDrop() {
     isDragging.value = true
 
     document.addEventListener('drop', onDragEnd)
+    document.addEventListener('dragend', onDragEnd)
+    ownsDragListeners = true
   }
 
   /**
@@ -70,6 +73,8 @@ export default function useDragAndDrop() {
     isDragOver.value = false
     draggedData.value = null
     document.removeEventListener('drop', onDragEnd)
+    document.removeEventListener('dragend', onDragEnd)
+    ownsDragListeners = false
   }
 
   /**
@@ -78,6 +83,8 @@ export default function useDragAndDrop() {
    * @param {DragEvent} event
    */
   function onDrop(event: any) {
+    if (!draggedData.value) return
+
     const position = screenToFlowCoordinate({
       x: event.clientX,
       y: event.clientY,
@@ -110,6 +117,12 @@ export default function useDragAndDrop() {
     addNodes(newNode)
   }
 
+  onUnmounted(() => {
+    if (!ownsDragListeners) return
+    onDragEnd()
+    document.body.style.userSelect = ''
+  })
+
   return {
     draggedData,
     isDragOver,

src/@layouts/components/VerticalNav.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { Component } from 'vue'
 import { useDisplay } from 'vuetify'
-import logo from '@images/logo.svg?raw'
+import { useI18n } from 'vue-i18n'
+import ThemeLogoMark from '@/components/misc/ThemeLogoMark.vue'
+import { useGlobalSettingsStore } from '@/stores'
 
 interface Props {
   tag?: string | Component
@@ -14,6 +16,17 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { mdAndDown } = useDisplay()
+const { t } = useI18n()
+const globalSettingsStore = useGlobalSettingsStore()
+const pythonFreeThreaded = computed(() => globalSettingsStore.get('PYTHON_FREE_THREADED') === true)
+const runtimeVersion = computed(() => (pythonFreeThreaded.value ? 'v3t' : 'v3'))
+const runtimeGilFallback = computed(
+  () => pythonFreeThreaded.value && globalSettingsStore.get('PYTHON_GIL_ENABLED') === true,
+)
+const runtimeStatusIcon = computed(() => (runtimeGilFallback.value ? 'mdi-alert-circle-outline' : 'mdi-flask-outline'))
+const runtimeStatusHint = computed(() =>
+  t(runtimeGilFallback.value ? 'app.freeThreadedGilFallbackWarning' : 'app.freeThreadedExperimentalHint'),
+)
 const refNav = ref()
 const route = useRoute()
 
@@ -51,10 +64,23 @@ function handleNavScroll(evt: Event) {
     <div class="nav-header">
       <slot name="nav-header">
         <RouterLink to="/" class="app-logo d-flex align-center app-title-wrapper">
-          <div class="d-flex" v-html="logo" />
+          <ThemeLogoMark />
 
-          <h1 class="font-weight-bold leading-normal text-xl">
-            MOVIEPILOT <span class="text-sm text-gray-500">v2</span>
+          <h1 class="leading-normal text-xl">
+            <span class="moviepilot-wordmark">MOVIEPILOT</span>
+            <span
+              class="runtime-version text-sm text-gray-500 d-inline-flex align-center"
+              :class="{
+                'runtime-version--free-threaded': pythonFreeThreaded,
+                'runtime-version--degraded': runtimeGilFallback,
+              }"
+            >
+              {{ runtimeVersion }}
+              <VIcon v-if="pythonFreeThreaded" :icon="runtimeStatusIcon" size="13" :aria-label="runtimeStatusHint" />
+              <VTooltip v-if="pythonFreeThreaded" activator="parent" location="bottom">
+                {{ runtimeStatusHint }}
+              </VTooltip>
+            </span>
           </h1>
         </RouterLink>
       </slot>
@@ -92,7 +118,10 @@ function handleNavScroll(evt: Event) {
   inline-size: variables.$layout-vertical-nav-width;
   inset-block-start: 0;
   inset-inline-start: 0;
-  transition: transform 0.25s ease-in-out, inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+  transition:
+    transform 0.25s ease-in-out,
+    inline-size 0.25s ease-in-out,
+    box-shadow 0.25s ease-in-out;
   visibility: hidden;
   will-change: transform, inline-size;
 
@@ -113,6 +142,20 @@ function handleNavScroll(evt: Event) {
     margin-inline-end: auto;
   }
 
+  .runtime-version {
+    margin-inline-start: 0.25rem;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .runtime-version--free-threaded {
+    gap: 0.2rem;
+  }
+
+  .runtime-version--degraded {
+    color: rgb(var(--v-theme-warning)) !important;
+  }
+
   .nav-items {
     block-size: 100%;
 

src/@layouts/components/VerticalNavLayout.vue

@@ -1,7 +1,14 @@
 <script lang="ts">
-import { Transition } from 'vue'
 import { useDisplay } from 'vuetify'
 import VerticalNav from '@layouts/components/VerticalNav.vue'
+import GlassFixedShellBackplate from '@/components/theme/GlassFixedShellBackplate.vue'
+import {
+  readThemeCustomizerSettings,
+  THEME_CUSTOMIZER_CHANGE_EVENT,
+  type ThemeCustomizerSettings,
+} from '@/composables/useThemeCustomizer'
+import { useGlassFixedShellBackplate } from '@/composables/useGlassFixedShellBackplate'
+import { usePWA } from '@/composables/usePWA'
 
 export default defineComponent({
   setup(props, { slots }) {
@@ -11,6 +18,12 @@ export default defineComponent({
 
     const route = useRoute()
     const { mdAndDown } = useDisplay()
+    const { appMode } = usePWA()
+    const fixedShellBackplate = useGlassFixedShellBackplate()
+    const themeLayout = ref(readThemeCustomizerSettings().layout)
+    const canUseDesktopLayout = computed(() => !mdAndDown.value && !appMode.value)
+    const isCollapsedLayout = computed(() => canUseDesktopLayout.value && themeLayout.value === 'collapsed')
+    const isHorizontalLayout = computed(() => canUseDesktopLayout.value && themeLayout.value === 'horizontal')
 
     // ℹ️ This is alternative to below two commented watcher
     // We want to show overlay if overlay nav is visible and want to hide overlay if overlay is hidden and vice versa.
@@ -25,6 +38,10 @@ export default defineComponent({
       scrollDistance.value = window.scrollY
     }
 
+    const handleThemeCustomizerChange = (event: Event) => {
+      themeLayout.value = (event as CustomEvent<ThemeCustomizerSettings>).detail.layout
+    }
+
     // 监听弹窗状态变化
     const checkDialogState = () => {
       const wasDialogOpen = isDialogOpen.value
@@ -32,12 +49,13 @@ export default defineComponent({
 
       // 当弹窗刚打开时，记录当前的滚动状态
       if (!wasDialogOpen && isDialogOpen.value) {
-        wasScrolledBeforeDialog.value = scrollDistance.value > 0
+        wasScrolledBeforeDialog.value = scrollDistance.value > 10
       }
     }
 
     onMounted(() => {
       window.addEventListener('scroll', handleScroll)
+      window.addEventListener(THEME_CUSTOMIZER_CHANGE_EVENT, handleThemeCustomizerChange)
 
       // 初始检查弹窗状态
       checkDialogState()
@@ -52,11 +70,14 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener(THEME_CUSTOMIZER_CHANGE_EVENT, handleThemeCustomizerChange)
       dialogObserver?.disconnect()
       dialogObserver = null
     })
 
     return () => {
+      const hasFixedShellBackplate = fixedShellBackplate.layers.value.length > 0
+
       // 👉 Vertical nav
       const verticalNav = h(
         VerticalNav,
@@ -69,6 +90,15 @@ export default defineComponent({
         },
       )
 
+      const fixedShellBackplateNode = hasFixedShellBackplate
+        ? h(GlassFixedShellBackplate, {
+            isOverlayNav: mdAndDown.value,
+            isOverlayNavActive: isOverlayNavActive.value,
+            layers: fixedShellBackplate.layers.value,
+            transitionDurationMs: fixedShellBackplate.transitionDurationMs,
+          })
+        : null
+
       // 👉 Navbar
       const navbar = h(
         'header',
@@ -93,13 +123,12 @@ export default defineComponent({
       const main = h(
         'main',
         { class: 'layout-page-content' },
-        h(Transition, { name: 'fade-slide', mode: 'out-in', appear: true }, () =>
-          h('section', { class: 'page-content-container' }, slots.default?.()),
-        ),
+        h('section', { class: 'page-content-container' }, slots.default?.()),
       )
 
       // 👉 根据路由 meta 决定 footer 高度
       const shouldShowFooter = !route.meta.hideFooter
+      const isNavbarScrolled = scrollDistance.value > 5 || (isDialogOpen.value && wasScrolledBeforeDialog.value)
 
       // 👉 Footer
       const footer = h('footer', { class: 'layout-footer' }, [
@@ -127,11 +156,20 @@ export default defineComponent({
             'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid',
             'layout-navbar-fixed',
             mdAndDown.value && 'layout-overlay-nav',
+            isCollapsedLayout.value && 'layout-vertical-nav-collapsed',
+            isHorizontalLayout.value && 'layout-horizontal-nav-active',
+            isHorizontalLayout.value && isNavbarScrolled && 'layout-horizontal-nav-scrolled',
+            hasFixedShellBackplate && 'layout-fixed-shell-backplate-active',
             route.meta.layoutWrapperClasses,
-            (scrollDistance.value > 5 || (isDialogOpen.value && wasScrolledBeforeDialog.value)) && 'window-scrolled',
+            !isHorizontalLayout.value && isNavbarScrolled && 'window-scrolled',
           ],
         },
-        [verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay],
+        [
+          fixedShellBackplateNode,
+          verticalNav,
+          h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]),
+          layoutOverlay,
+        ],
       )
     }
   },
@@ -139,6 +177,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+/* stylelint-disable no-descending-specificity */
+
 @use '@configured-variables' as variables;
 @use '@layouts/styles/placeholders';
 @use '@layouts/styles/mixins';
@@ -150,6 +190,10 @@ export default defineComponent({
 }
 
 .layout-wrapper.layout-nav-type-vertical {
+  --layout-navbar-block-size: calc(
+    env(safe-area-inset-top, 0px) + #{variables.$layout-vertical-nav-navbar-height} + var(--navbar-tab-height)
+  );
+
   // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
   min-block-size: 100%;
 
@@ -165,13 +209,16 @@ export default defineComponent({
   .layout-navbar {
     position: fixed;
     z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
-    inline-size: calc(100vw - variables.$layout-vertical-nav-width - 0.5rem);
+    // iOS Safari 在地址栏收起和惯性滚动时可能把 fixed 顶栏和页面滚动层合成到一起，
+    // 单独提升顶栏图层可避免导航栏短暂上移到安全区下方。
+    backface-visibility: hidden;
+    block-size: var(--layout-navbar-block-size);
+    inline-size: calc(100% - variables.$layout-vertical-nav-width);
     inset-block-start: 0;
+    transform: translate3d(0, 0, 0);
 
     .navbar-content-container {
-      block-size: calc(
-        env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height + var(--navbar-tab-height)
-      );
+      block-size: var(--layout-navbar-block-size);
     }
 
     @at-root {
@@ -223,6 +270,202 @@ export default defineComponent({
   // Adjust right column pl when vertical nav is collapsed
   &.layout-vertical-nav-collapsed .layout-content-wrapper {
     padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
+
+    .page-content-container > div:first-child {
+      inline-size: calc(100vw - variables.$layout-vertical-nav-collapsed-width - 1rem);
+    }
+  }
+
+  &.layout-vertical-nav-collapsed .layout-navbar {
+    inline-size: calc(100% - variables.$layout-vertical-nav-collapsed-width);
+  }
+
+  &.layout-vertical-nav-collapsed .layout-vertical-nav:not(.overlay-nav) {
+    .nav-header {
+      justify-content: center;
+      margin-inline: 0;
+      padding-inline: 0;
+    }
+
+    .app-logo {
+      justify-content: center;
+      inline-size: 100%;
+      transform: none !important;
+    }
+
+    .app-logo .theme-logo-mark {
+      block-size: 2.5rem;
+      inline-size: 2.5rem;
+    }
+
+    .app-logo h1,
+    .nav-item-title,
+    .nav-section-title {
+      display: none;
+    }
+
+    .nav-link > a {
+      justify-content: center;
+      border-radius: 0.75rem !important;
+      block-size: 2.75rem;
+      margin-inline: 0.75rem;
+      padding-inline: 0;
+    }
+
+    .nav-item-icon {
+      margin-inline-end: 0 !important;
+    }
+  }
+
+  &.layout-horizontal-nav-active {
+    .layout-vertical-nav:not(.overlay-nav) {
+      pointer-events: none;
+      transform: translateX(-100%);
+      visibility: hidden;
+    }
+
+    .layout-content-wrapper {
+      padding-inline-start: 0;
+    }
+
+    .layout-navbar {
+      background: rgb(var(--v-theme-background));
+      border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+      inline-size: 100%;
+      max-inline-size: none;
+      padding-inline: 0;
+    }
+
+    .navbar-content-container {
+      border: 0 !important;
+      border-radius: 0 !important;
+      background: transparent !important;
+      inline-size: 100%;
+      margin-inline: auto;
+      max-inline-size: variables.$layout-boxed-content-width;
+      padding-inline: 1.5rem;
+    }
+
+    .layout-page-content {
+      inline-size: 100%;
+      margin-inline: auto;
+      max-inline-size: variables.$layout-boxed-content-width;
+      padding-inline: 1rem;
+    }
+
+    .page-content-container > div:first-child {
+      inline-size: 100%;
+    }
+  }
+
+  @at-root {
+    .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed .layout-navbar {
+      backdrop-filter: blur(12px) saturate(1.2);
+      background: rgb(var(--v-theme-surface)) !important;
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 4%),
+        0 1px 2px rgba(0, 0, 0, 2%);
+    }
+
+    .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
+      .navbar-content-container {
+      backdrop-filter: none !important;
+      background: transparent !important;
+      background-color: transparent !important;
+      box-shadow: none !important;
+      filter: none !important;
+      padding-inline: 1.5rem !important;
+
+      &::before {
+        display: none !important;
+        backdrop-filter: none !important;
+        background: transparent !important;
+        background-color: transparent !important;
+        content: none !important;
+        filter: none !important;
+      }
+    }
+
+    html[data-theme='transparent'] .layout-wrapper.layout-horizontal-nav-active .layout-navbar,
+    .v-theme--transparent .layout-wrapper.layout-horizontal-nav-active .layout-navbar {
+      backdrop-filter: none !important;
+      background: transparent !important;
+      border-block-end-color: rgba(var(--v-theme-on-surface), 0.04);
+      box-shadow: none !important;
+    }
+
+    html[data-theme='transparent'] .layout-wrapper.layout-horizontal-nav-active .navbar-content-container,
+    .v-theme--transparent .layout-wrapper.layout-horizontal-nav-active .navbar-content-container {
+      backdrop-filter: none !important;
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+
+    // 透明主题的水平导航不叠加滚动磨砂层，避免中间区域出现一块更深的背景。
+    html[data-theme='transparent']
+      .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
+      .layout-navbar,
+    .v-theme--transparent
+      .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
+      .layout-navbar {
+      backdrop-filter: blur(var(--transparent-blur-light, 6px)) !important;
+      background: rgba(var(--v-theme-surface), var(--transparent-opacity-light, 0.2)) !important;
+      box-shadow: none !important;
+    }
+
+    // 透明主题滚动时只让外层导航栏承载整屏背景，避免内部最大宽度容器单独变深。
+    html[data-theme='transparent']
+      .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
+      .navbar-content-container,
+    .v-theme--transparent
+      .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
+      .navbar-content-container {
+      backdrop-filter: none !important;
+      background: transparent !important;
+      background-color: transparent !important;
+      box-shadow: none !important;
+      filter: none !important;
+      padding-inline: 1.5rem !important;
+
+      &::before {
+        display: none !important;
+        backdrop-filter: none !important;
+        background: transparent !important;
+        background-color: transparent !important;
+        content: none !important;
+        filter: none !important;
+      }
+    }
+
+    html[data-theme='light'][data-theme-semi-dark-menu='true'][data-theme-layout='vertical']
+      .layout-wrapper.layout-nav-type-vertical:not(.layout-horizontal-nav-active)
+      .layout-vertical-nav:not(.overlay-nav),
+    html[data-theme='light'][data-theme-semi-dark-menu='true'][data-theme-layout='collapsed']
+      .layout-wrapper.layout-nav-type-vertical:not(.layout-horizontal-nav-active)
+      .layout-vertical-nav:not(.overlay-nav) {
+      background: #2f3349;
+      color: #e7e3fc;
+
+      .app-logo h1,
+      .nav-section-title,
+      .nav-link > a,
+      .nav-item-icon {
+        color: rgba(231, 227, 252, 78%) !important;
+      }
+
+      .nav-link > a:hover {
+        background-color: rgba(231, 227, 252, 6%);
+      }
+
+      .nav-link > .router-link-exact-active {
+        color: #fff !important;
+
+        .nav-item-icon,
+        .nav-item-title {
+          color: #fff !important;
+        }
+      }
+    }
   }
 
   // 👉 Content height fixed
@@ -233,9 +476,7 @@ export default defineComponent({
 
     .layout-page-content {
       // display: flex;
-      // 使用 clip 替代 hidden，避免 Chrome 144+ 滚动锁定问题
-      overflow-x: clip;
-      overflow-y: auto;
+      overflow: auto;
 
       .page-content-container {
         inline-size: 100%;

src/@layouts/components/__tests__/VerticalNav.spec.ts

@@ -0,0 +1,85 @@
+import VerticalNav from '@/@layouts/components/VerticalNav.vue'
+import { shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  freeThreaded: false,
+  gilEnabled: true,
+}))
+
+vi.mock('@/stores', () => ({
+  useGlobalSettingsStore: () => ({
+    get: (key: string) => {
+      if (key === 'PYTHON_FREE_THREADED') return mocks.freeThreaded
+      if (key === 'PYTHON_GIL_ENABLED') return mocks.gilEnabled
+      return undefined
+    },
+  }),
+}))
+
+vi.mock('vue-i18n', async importOriginal => ({
+  ...(await importOriginal<typeof import('vue-i18n')>()),
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('vue-router', async importOriginal => ({
+  ...(await importOriginal<typeof import('vue-router')>()),
+  useRoute: () => ({ path: '/' }),
+}))
+
+vi.mock('vuetify', async importOriginal => ({
+  ...(await importOriginal<typeof import('vuetify')>()),
+  useDisplay: () => ({ mdAndDown: { value: false } }),
+}))
+
+function renderNavigation() {
+  return shallowMount(VerticalNav, {
+    props: {
+      isOverlayNavActive: false,
+      toggleIsOverlayNavActive: vi.fn(),
+    },
+    global: {
+      stubs: {
+        PerfectScrollbar: { template: '<ul><slot /></ul>' },
+        RouterLink: { template: '<a><slot /></a>' },
+        ThemeLogoMark: true,
+        VIcon: { props: ['ariaLabel'], template: '<span>{{ ariaLabel }}</span>' },
+        VTooltip: { template: '<span><slot /></span>' },
+      },
+    },
+  })
+}
+
+describe('VerticalNav runtime version', () => {
+  beforeEach(() => {
+    mocks.freeThreaded = false
+    mocks.gilEnabled = true
+  })
+
+  it('shows v3 for the standard runtime', () => {
+    const navigation = renderNavigation()
+
+    expect(navigation.text()).toContain('MOVIEPILOT')
+    expect(navigation.get('.runtime-version').text()).toBe('v3')
+  })
+
+  it('shows v3t for the free-threaded runtime', () => {
+    mocks.freeThreaded = true
+    mocks.gilEnabled = false
+
+    const navigation = renderNavigation()
+
+    expect(navigation.get('.runtime-version--free-threaded').text()).toContain('v3t')
+    expect(navigation.get('.runtime-version--free-threaded').classes()).not.toContain('runtime-version--degraded')
+    expect(navigation.text()).toContain('app.freeThreadedExperimentalHint')
+  })
+
+  it('marks v3t when the runtime has enabled the GIL', () => {
+    mocks.freeThreaded = true
+
+    const navigation = renderNavigation()
+
+    expect(navigation.get('.runtime-version--degraded').text()).toContain('v3t')
+    expect(navigation.text()).toContain('app.freeThreadedGilFallbackWarning')
+  })
+})

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

@@ -11,12 +11,11 @@ html {
 }
 
 body {
+  overflow: visible !important;
   background: rgb(var(--v-theme-background));
   overscroll-behavior-y: contain;
-  // Chrome 144+ 兼容性：覆盖 Vuetify 的内联 overflow: hidden 样式
-  overflow: visible !important;
 
-  --webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch;
 }
 
 body,
@@ -37,10 +36,8 @@ body,
 .layout-page-content {
   @include mixins.boxed-content(true);
 
-  // Chrome 144+ 兼容性：使用 clip 替代 hidden，避免滚动锁定问题
-  // overflow: hidden 在新版 Chrome 中可能意外阻止垂直滚动
-  overflow: clip;
   flex-grow: 1;
+  overflow: clip visible;
 
   // TODO: Use grid gutter variable here;
   padding-block: 1.5rem;

src/@layouts/types.d.ts

@@ -1,5 +1,6 @@
 import type { Component, Ref, VNode } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
+import type { UserPermissionFeatureKey, UserPermissionKey } from '@/utils/permission'
 import { ContentWidth, FooterType, NavbarType } from './enums'
 
 export interface UserConfig {
@@ -112,13 +113,27 @@ export interface NavLinkProps {
   rel?: ATagRelAttrValues
 }
 
+export type NavMenuIconColor = 'primary' | 'info' | 'success' | 'warning' | 'secondary'
+
 export interface NavLink extends NavLinkProps, Partial<AclProperties> {
   title: string
   full_title?: string
   icon?: unknown
+  iconColor?: NavMenuIconColor
   badgeContent?: string
   badgeClass?: string
   disable?: boolean
+  permission?: UserPermissionKey
+  feature?: UserPermissionFeatureKey
+}
+
+export interface NavMenuTabItem {
+  title: string
+  icon?: string
+  tab: string
+  description?: string
+  permission?: UserPermissionKey
+  feature?: UserPermissionFeatureKey
 }
 
 export interface NavMenu extends NavLink {
@@ -126,6 +141,8 @@ export interface NavMenu extends NavLink {
   description?: string
   admin?: boolean
   footer?: boolean
+  // 水平三级菜单和页面动态标签页共用的静态标签定义。
+  tabs?: NavMenuTabItem[]
 }
 
 // 👉 Vertical nav group

src/__tests__/ace-config.spec.ts

@@ -0,0 +1,214 @@
+import ace from 'ace-builds'
+import { describe, expect, it } from 'vitest'
+import '@/ace-config'
+
+interface AceToken {
+  type: string
+  value: string
+}
+
+interface WordListMode {
+  getTokenizer: () => {
+    getLineTokens: (line: string, state: string) => { tokens: AceToken[] }
+  }
+}
+
+interface JinjaMode {
+  getTokenizer: () => {
+    getLineTokens: (line: string, state: string) => { tokens: AceToken[] }
+  }
+}
+
+const WordListMode = ace.require('ace/mode/word_list').Mode as new (options?: { syntax?: boolean }) => WordListMode
+const Jinja2Mode = ace.require('ace/mode/jinja2').Mode as new () => JinjaMode
+const Jinja2JsonMode = ace.require('ace/mode/jinja2_json').Mode as new () => JinjaMode
+const syntaxTokenizer = new WordListMode({ syntax: true }).getTokenizer()
+const plainTokenizer = new WordListMode().getTokenizer()
+
+function tokenize(line: string) {
+  return syntaxTokenizer.getLineTokens(line, 'start').tokens
+}
+
+function tokenizePlain(line: string) {
+  return plainTokenizer.getLineTokens(line, 'start').tokens
+}
+
+function findToken(mode: new () => JinjaMode, line: string, value: string) {
+  return new mode()
+    .getTokenizer()
+    .getLineTokens(line, 'start')
+    .tokens.find(token => token.value === value)
+}
+
+describe('Jinja context variables', () => {
+  it('keeps source-specific IDs and excludes unified identity from rename formats', () => {
+    expect(findToken(Jinja2Mode, '{{ tmdbid }}', 'tmdbid')?.type).toBe('variable.language.jinja2')
+    expect(findToken(Jinja2Mode, '{{ media_source }}', 'media_source')?.type).toBe('identifier')
+    expect(findToken(Jinja2Mode, '{{ media_id }}', 'media_id')?.type).toBe('identifier')
+  })
+
+  it('keeps unified identity available in notification JSON templates', () => {
+    const template = '{"source": "{{ media_source }}", "id": "{{ media_id }}"}'
+
+    expect(findToken(Jinja2JsonMode, template, 'media_source')?.type).toBe('variable.language.jinja2')
+    expect(findToken(Jinja2JsonMode, template, 'media_id')?.type).toBe('variable.language.jinja2')
+  })
+})
+
+describe('word list syntax mode', () => {
+  it('highlights a block word as one field', () => {
+    expect(tokenize('屏蔽词')).toEqual([{ type: 'word_list_block', value: '屏蔽词' }])
+  })
+
+  it('parses valid replacement parameters', () => {
+    expect(tokenize('旧名.* => 新名 {[tmdbid=123;type=tv]}')).toEqual([
+      { type: 'word_list_replaced', value: '旧名.*' },
+      { type: 'keyword.operator.word-list', value: ' => ' },
+      { type: 'word_list_replacement', value: '新名 ' },
+      { type: 'word_list_parameter_syntax', value: '{[' },
+      { type: 'word_list_parameter_key', value: 'tmdbid' },
+      { type: 'word_list_parameter_syntax', value: '=' },
+      { type: 'word_list_parameter_value', value: '123' },
+      { type: 'word_list_parameter_syntax', value: ';' },
+      { type: 'word_list_parameter_key', value: 'type' },
+      { type: 'word_list_parameter_syntax', value: '=' },
+      { type: 'word_list_parameter_value', value: 'tv' },
+      { type: 'word_list_parameter_syntax', value: ']}' },
+    ])
+  })
+
+  it('rejects unified media identity parameters in custom identifiers', () => {
+    const invalidKeys = tokenize('旧名 => {[media_source=douban;media_id=1295644]}')
+      .filter(token => token.type === 'invalid.word-list')
+      .map(token => token.value)
+
+    expect(invalidKeys).toEqual(['media_source', 'media_id'])
+  })
+
+  it('marks invalid replacement parameter keys and values', () => {
+    expect(tokenize('旧名 => 新名 {[unknown=1;tmdbid=abc;type=anime;g=group;s=2;e=3]}')).toEqual([
+      { type: 'word_list_replaced', value: '旧名' },
+      { type: 'keyword.operator.word-list', value: ' => ' },
+      { type: 'word_list_replacement', value: '新名 ' },
+      { type: 'word_list_parameter_syntax', value: '{[' },
+      { type: 'invalid.word-list', value: 'unknown' },
+      { type: 'word_list_parameter_syntax', value: '=' },
+      { type: 'word_list_parameter_value', value: '1' },
+      { type: 'word_list_parameter_syntax', value: ';' },
+      { type: 'word_list_parameter_key', value: 'tmdbid' },
+      { type: 'word_list_parameter_syntax', value: '=' },
+      { type: 'invalid.word-list', value: 'abc' },
+      { type: 'word_list_parameter_syntax', value: ';' },
+      { type: 'word_list_parameter_key', value: 'type' },
+      { type: 'word_list_parameter_syntax', value: '=' },
+      { type: 'invalid.word-list', value: 'anime' },
+      { type: 'word_list_parameter_syntax', value: ';' },
+      { type: 'word_list_parameter_key', value: 'g' },
+      { type: 'word_list_parameter_syntax', value: '=' },
+      { type: 'word_list_parameter_value', value: 'group' },
+      { type: 'word_list_parameter_syntax', value: ';' },
+      { type: 'word_list_parameter_key', value: 's' },
+      { type: 'word_list_parameter_syntax', value: '=' },
+      { type: 'word_list_parameter_value', value: '2' },
+      { type: 'word_list_parameter_syntax', value: ';' },
+      { type: 'word_list_parameter_key', value: 'e' },
+      { type: 'word_list_parameter_syntax', value: '=' },
+      { type: 'word_list_parameter_value', value: '3' },
+      { type: 'word_list_parameter_syntax', value: ']}' },
+    ])
+  })
+
+  it('marks an unknown replacement parameter key as invalid', () => {
+    expect(tokenize('旧名 => {[unknown=1]}')).toContainEqual({ type: 'invalid.word-list', value: 'unknown' })
+  })
+
+  it('marks visible syntax for missing or malformed replacement parameters', () => {
+    const invalidTokenValues = tokenize('旧名 => {[tmdbid=;=123;broken;;]}')
+      .filter(token => token.type === 'invalid.word-list')
+      .map(token => token.value)
+
+    expect(invalidTokenValues).toEqual(['tmdbid=', '=123', 'broken;;'])
+    expect(tokenize('旧名 => {[]}')).toContainEqual({ type: 'invalid.word-list', value: '{[]}' })
+  })
+
+  it('marks the second semicolon when it creates an empty parameter', () => {
+    const semicolonTokens = tokenize('旧名 => {[tmdbid=1;;type=tv]}').filter(token => token.value.includes(';'))
+
+    expect(semicolonTokens).toEqual([{ type: 'invalid.word-list', value: ';;' }])
+  })
+
+  it('marks both sides of missing keys and values', () => {
+    const invalidTokenValues = tokenize('旧名 => {[tmdbid=;=123]}')
+      .filter(token => token.type === 'invalid.word-list')
+      .map(token => token.value)
+
+    expect(invalidTokenValues).toEqual(['tmdbid=', '=123'])
+  })
+
+  it('treats an unclosed parameter block as ordinary replacement text', () => {
+    expect(tokenize('旧名 => 新名 {[tmdbid=1')).toEqual([
+      { type: 'word_list_replaced', value: '旧名' },
+      { type: 'keyword.operator.word-list', value: ' => ' },
+      { type: 'word_list_replacement', value: '新名 {[tmdbid=1' },
+    ])
+  })
+
+  it('accepts every supported replacement parameter type', () => {
+    expect(
+      tokenize('旧名 => {[tmdbid=1;doubanid=2;bangumiid=3;anilistid=4;type=movie;g=group;s=5;e=6]}'),
+    ).not.toContainEqual(expect.objectContaining({ type: 'invalid.word-list' }))
+  })
+
+  it('accepts season and episode number ranges', () => {
+    expect(tokenize('旧名 => {[s=1-2;e=3-5]}')).not.toContainEqual(
+      expect.objectContaining({ type: 'invalid.word-list' }),
+    )
+  })
+
+  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')
+  })
+
+  it('highlights comment lines', () => {
+    expect(tokenize('# 这是一个注释')).toEqual([{ type: 'comment.word-list', value: '# 这是一个注释' }])
+  })
+})
+
+describe('word list plain mode', () => {
+  it('does not highlight comment lines', () => {
+    expect(tokenizePlain('# 这是一个注释')).toEqual([{ type: 'text', value: '# 这是一个注释' }])
+  })
+
+  it('does not highlight word list fields', () => {
+    expect(tokenizePlain('旧名 => 新名 && 第 <> 集 >> 2*EP-1')).toEqual([
+      { type: 'text', value: '旧名 => 新名 && 第 <> 集 >> 2*EP-1' },
+    ])
+  })
+
+  it('returns no tokens for empty lines', () => {
+    expect(tokenizePlain('')).toEqual([])
+  })
+})

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|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(
           {
@@ -530,6 +530,278 @@ function registerJinja2Mode() {
   )
 }
 
+interface WordListToken {
+  type: string
+  value: string
+}
+
+const wordListReplacementParametersPattern = /\{\[([^\]]*)\]\}/g
+const wordListUnsignedIntegerPattern = /^\d+$/
+const wordListUnsignedIntegerOrRangePattern = /^\d+(?:-\d+)?$/
+const wordListParameterTypes = {
+  tmdbid: 'uint',
+  doubanid: 'uint',
+  bangumiid: 'uint',
+  anilistid: 'uint',
+  type: 'media-type',
+  g: 'string',
+  s: 'uint-or-range',
+  e: 'uint-or-range',
+} as const
+
+function appendWordListToken(tokens: WordListToken[], type: string, value: string) {
+  if (!value) return
+
+  const previousToken = tokens.at(-1)
+  if (previousToken?.type === type) previousToken.value += value
+  else tokens.push({ type, value })
+}
+
+function isValidWordListParameterValue(key: keyof typeof wordListParameterTypes, value: string) {
+  switch (wordListParameterTypes[key]) {
+    case 'uint':
+      return wordListUnsignedIntegerPattern.test(value)
+    case 'uint-or-range':
+      return wordListUnsignedIntegerOrRangePattern.test(value)
+    case 'media-type':
+      return value === 'movie' || value === 'tv'
+    case 'string':
+      return value.length > 0
+  }
+}
+
+function tokenizeWordListParameters(parameters: string): WordListToken[] {
+  const tokens: WordListToken[] = []
+  const parameterList = parameters.split(';')
+
+  parameterList.forEach((parameter, index) => {
+    const isEmptyParameter = parameter.length === 0
+    if (index > 0) {
+      appendWordListToken(
+        tokens,
+        parameterList[index - 1] === '' || isEmptyParameter ? 'invalid.word-list' : 'word_list_parameter_syntax',
+        ';',
+      )
+    }
+    if (isEmptyParameter) return
+
+    const equalsIndex = parameter.indexOf('=')
+    if (equalsIndex === -1) {
+      appendWordListToken(tokens, 'invalid.word-list', parameter)
+      return
+    }
+
+    const key = parameter.slice(0, equalsIndex)
+    const value = parameter.slice(equalsIndex + 1)
+    const hasKey = key.length > 0
+    const hasValue = value.length > 0
+    const isKnownKey = hasKey && Object.hasOwn(wordListParameterTypes, key)
+
+    appendWordListToken(tokens, isKnownKey && hasValue ? 'word_list_parameter_key' : 'invalid.word-list', key)
+    appendWordListToken(tokens, hasKey && hasValue ? 'word_list_parameter_syntax' : 'invalid.word-list', '=')
+
+    const isValidValue =
+      isKnownKey &&
+      !value.includes('=') &&
+      isValidWordListParameterValue(key as keyof typeof wordListParameterTypes, value)
+    appendWordListToken(
+      tokens,
+      isValidValue || (!isKnownKey && hasKey) ? 'word_list_parameter_value' : 'invalid.word-list',
+      value,
+    )
+  })
+
+  return tokens
+}
+
+function tokenizeWordListReplacement(replacement: string): WordListToken[] {
+  const tokens: WordListToken[] = []
+  let replacementStart = 0
+
+  for (const match of replacement.matchAll(wordListReplacementParametersPattern)) {
+    const parameterStart = match.index ?? 0
+    appendWordListToken(tokens, 'word_list_replacement', replacement.slice(replacementStart, parameterStart))
+    if (!match[1]) appendWordListToken(tokens, 'invalid.word-list', match[0])
+    else {
+      appendWordListToken(tokens, 'word_list_parameter_syntax', '{[')
+      tokenizeWordListParameters(match[1]).forEach(token => appendWordListToken(tokens, token.type, token.value))
+      appendWordListToken(tokens, 'word_list_parameter_syntax', ']}')
+    }
+    replacementStart = parameterStart + match[0].length
+  }
+
+  appendWordListToken(tokens, 'word_list_replacement', replacement.slice(replacementStart))
+  return tokens
+}
+
+function splitWordListField(value: string, operator: string) {
+  let operatorIndex = value.indexOf(operator)
+
+  while (operatorIndex !== -1) {
+    const operatorEnd = operatorIndex + operator.length
+    if (value[operatorIndex - 1] === ' ' && value[operatorEnd] === ' ') {
+      let operatorStart = operatorIndex
+      while (value[operatorStart - 1] === ' ') operatorStart -= 1
+
+      let operatorWithSpacesEnd = operatorEnd
+      while (value[operatorWithSpacesEnd] === ' ') operatorWithSpacesEnd += 1
+
+      return {
+        before: value.slice(0, operatorStart),
+        operator: value.slice(operatorStart, operatorWithSpacesEnd),
+        after: value.slice(operatorWithSpacesEnd),
+      }
+    }
+
+    operatorIndex = value.indexOf(operator, operatorEnd)
+  }
+}
+
+function getWordListLineWhitespace(value: string) {
+  const leadingSpaceLength = value.length - value.trimStart().length
+  const trailingSpaceLength = value.length - value.trimEnd().length
+
+  return {
+    leadingSpace: value.slice(0, leadingSpaceLength),
+    content: value.slice(leadingSpaceLength, value.length - trailingSpaceLength),
+    trailingSpace: value.slice(value.length - trailingSpaceLength),
+  }
+}
+
+function tokenizeWordListReplacementLine(value: string): WordListToken[] {
+  const { leadingSpace, content, trailingSpace } = getWordListLineWhitespace(value)
+  const replacementField = splitWordListField(content, '=>')
+  if (!replacementField) return [{ type: 'text', value }]
+
+  const tokens: WordListToken[] = []
+  appendWordListToken(tokens, 'text', leadingSpace)
+  appendWordListToken(tokens, 'word_list_replaced', replacementField.before)
+  appendWordListToken(tokens, 'keyword.operator.word-list', replacementField.operator)
+  tokenizeWordListReplacement(replacementField.after).forEach(token =>
+    appendWordListToken(tokens, token.type, token.value),
+  )
+  appendWordListToken(tokens, 'text', trailingSpace)
+  return tokens
+}
+
+function tokenizeCombinedWordListLine(value: string): WordListToken[] {
+  const { leadingSpace, content, trailingSpace } = getWordListLineWhitespace(value)
+  const replacementField = splitWordListField(content, '=>')
+  const frontField = replacementField && splitWordListField(replacementField.after, '&&')
+  const backField = frontField && splitWordListField(frontField.after, '<>')
+  const offsetField = backField && splitWordListField(backField.after, '>>')
+  if (!replacementField || !frontField || !backField || !offsetField) return [{ type: 'text', value }]
+
+  const tokens: WordListToken[] = []
+  appendWordListToken(tokens, 'text', leadingSpace)
+  appendWordListToken(tokens, 'word_list_replaced', replacementField.before)
+  appendWordListToken(tokens, 'keyword.operator.word-list', replacementField.operator)
+  tokenizeWordListReplacement(frontField.before).forEach(token => appendWordListToken(tokens, token.type, token.value))
+  appendWordListToken(tokens, 'keyword.operator.word-list', frontField.operator)
+  appendWordListToken(tokens, 'word_list_front', backField.before)
+  appendWordListToken(tokens, 'keyword.operator.word-list', backField.operator)
+  appendWordListToken(tokens, 'word_list_back', offsetField.before)
+  appendWordListToken(tokens, 'keyword.operator.word-list', offsetField.operator)
+  appendWordListToken(tokens, 'word_list_offset', offsetField.after)
+  appendWordListToken(tokens, 'text', trailingSpace)
+  return tokens
+}
+
+function buildWordListRules(syntax: boolean) {
+  if (!syntax) {
+    return {
+      start: [
+        {
+          token: 'empty_line',
+          regex: '^$',
+        },
+        {
+          defaultToken: 'text',
+        },
+      ],
+    }
+  }
+
+  return {
+    start: [
+      {
+        token: 'comment.word-list',
+        regex: /^#.*/,
+      },
+      {
+        token: 'text',
+        regex: /^(\s*)(.*?)( +=> +)(.*?)( +&& +)(.*?)( +<> +)(.*?)( +>> +)(.*?)(\s*)$/,
+        onMatch: tokenizeCombinedWordListLine,
+      },
+      {
+        token: 'text',
+        regex: /^(\s*)(.*?)( +=> +)(.*?)(\s*)$/,
+        onMatch: tokenizeWordListReplacementLine,
+      },
+      {
+        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*)$/,
+      },
+    ],
+  }
+}
+
+function registerWordListMode() {
+  aceModule.define?.(
+    'ace/mode/word_list_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 WordListHighlightRules = function (this: any, options?: { syntax?: boolean }) {
+        this.$rules = buildWordListRules(options?.syntax === true)
+
+        this.normalizeRules()
+      }
+
+      oop.inherits(WordListHighlightRules, TextHighlightRules)
+      exports.WordListHighlightRules = WordListHighlightRules
+    },
+  )
+
+  aceModule.define?.(
+    'ace/mode/word_list',
+    ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/word_list_highlight_rules'],
+    (require: any, exports: any) => {
+      const oop = require('../lib/oop')
+      const TextMode = require('./text').Mode
+      const WordListHighlightRules = require('./word_list_highlight_rules').WordListHighlightRules
+
+      const Mode = function (this: any, options?: { syntax?: boolean }) {
+        TextMode.call(this)
+        this.HighlightRules = WordListHighlightRules
+        this.$highlightRuleConfig = options || {}
+      }
+
+      oop.inherits(Mode, TextMode)
+
+      ;(function (this: any) {
+        this.$id = 'ace/mode/word_list'
+      }).call(Mode.prototype)
+
+      exports.Mode = Mode
+    },
+  )
+}
+
 ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
 ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
 ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl)
@@ -555,4 +827,5 @@ ace.config.setModuleUrl('ace/snippets/css', snippertsCssUrl)
 ace.config.setModuleUrl('ace/snippets/ini', snippertsIniUrl)
 
 registerJinja2Mode()
+registerWordListMode()
 ace.require('ace/ext/language_tools')

src/api/__tests__/client.spec.ts

@@ -0,0 +1,457 @@
+import axios, {
+  AxiosError,
+  AxiosHeaders,
+  CanceledError,
+  type AxiosAdapter,
+  type AxiosResponse,
+  type InternalAxiosRequestConfig,
+} from 'axios'
+import { ApiRequestError, createApiClients, type ApiFeedbackNotifier } from '@/api/client'
+import type { ApiResponse } from '@/api/types'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const notifier: ApiFeedbackNotifier = {
+  error: vi.fn(),
+  success: vi.fn(),
+}
+
+/** 构造 Axios 适配器响应，避免客户端单测依赖真实网络。 */
+function createResponse<T>(
+  config: InternalAxiosRequestConfig,
+  data: T,
+  status = 200,
+  headers: Record<string, string> = {},
+): AxiosResponse<T> {
+  return {
+    config,
+    data,
+    headers: new AxiosHeaders(headers),
+    status,
+    statusText: status >= 400 ? 'Error' : 'OK',
+  }
+}
+
+/** 创建始终成功返回指定数据的 Axios 适配器。 */
+function resolveWith<T>(data: T, headers: Record<string, string> = {}): AxiosAdapter {
+  return async config => createResponse(config, data, 200, headers)
+}
+
+/** 创建带 Axios 响应元数据的 HTTP 失败适配器。 */
+function rejectWith<T>(data: T, status: number, headers: Record<string, string> = {}): AxiosAdapter {
+  return async config => {
+    const response = createResponse(config, data, status, headers)
+    throw new AxiosError('Request failed', AxiosError.ERR_BAD_RESPONSE, config, undefined, response)
+  }
+}
+
+/** 断言并收窄统一 API 错误，避免测试绕过 unknown 错误边界。 */
+function requireApiRequestError(reason: unknown): ApiRequestError {
+  expect(reason).toBeInstanceOf(ApiRequestError)
+  if (!(reason instanceof ApiRequestError)) throw reason
+  return reason
+}
+
+describe('MoviePilot API client', () => {
+  beforeEach(() => {
+    vi.mocked(notifier.error).mockReset()
+    vi.mocked(notifier.success).mockReset()
+  })
+
+  it.each([
+    ['object', { id: 7 }],
+    ['array', ['one', 'two']],
+    ['scalar', 42],
+    ['null', null],
+  ])('仅向内部调用方返回成功 envelope 的 data：%s', async (_label, data) => {
+    const envelope: ApiResponse<typeof data> = { success: true, message: '', data }
+    const { api } = createApiClients({ adapter: resolveWith(envelope), notifier })
+
+    await expect(api.get<typeof data>('/resource')).resolves.toEqual(data)
+    expect(notifier.error).not.toHaveBeenCalled()
+  })
+
+  it('只在 feedback=all 时展示后端成功消息', async () => {
+    const envelope: ApiResponse<{ saved: boolean }> = {
+      success: true,
+      message: 'Saved',
+      data: { saved: true },
+    }
+    const { api } = createApiClients({ adapter: resolveWith(envelope), notifier })
+
+    await api.post('/setting', {}, { feedback: 'default' })
+    await api.post('/setting', {}, { feedback: 'all' })
+
+    expect(notifier.success).toHaveBeenCalledOnce()
+    expect(notifier.success).toHaveBeenCalledWith('Saved')
+  })
+
+  it('将 success=false 转为保留完整响应元数据的 ApiRequestError', async () => {
+    const envelope: ApiResponse<{ reason: string }> = {
+      success: false,
+      message: 'Cannot save',
+      data: { reason: 'locked' },
+    }
+    const { api } = createApiClients({
+      adapter: resolveWith(envelope, { 'x-request-id': 'request-1' }),
+      notifier,
+    })
+
+    const error = requireApiRequestError(await api.post('/setting', {}).catch(reason => reason))
+
+    expect(axios.isAxiosError(error)).toBe(true)
+    expect(error).toMatchObject({
+      message: 'Cannot save',
+      payload: envelope,
+      status: 200,
+    })
+    expect(error.response?.data).toEqual(envelope)
+    expect(AxiosHeaders.from(error.headers as AxiosHeaders | undefined).get('x-request-id')).toBe('request-1')
+    expect(notifier.error).toHaveBeenCalledWith('Cannot save')
+  })
+
+  it('将 HTTP 错误统一转换为 ApiRequestError 并保留 payload、status 和 headers', async () => {
+    const envelope: ApiResponse<{ mfa_methods: string[] }> = {
+      success: false,
+      message: 'Additional verification required',
+      data: { mfa_methods: ['otp'] },
+    }
+    const { api } = createApiClients({
+      adapter: rejectWith(envelope, 403, { 'x-mfa-required': 'true' }),
+      notifier,
+    })
+
+    const error = requireApiRequestError(await api.post('/login/access-token', {}).catch(reason => reason))
+
+    expect(error.message).toBe('Additional verification required')
+    expect(error.status).toBe(403)
+    expect(error.payload).toEqual(envelope)
+    expect(error.response?.data).toEqual(envelope)
+    expect(AxiosHeaders.from(error.response?.headers as AxiosHeaders | undefined).get('x-mfa-required')).toBe('true')
+  })
+
+  it('silent 关闭失败 Toast，但不丢失错误元数据', async () => {
+    const envelope: ApiResponse<null> = { success: false, message: 'Invalid credentials', data: null }
+    const { api } = createApiClients({ adapter: rejectWith(envelope, 401), notifier })
+
+    const error = requireApiRequestError(
+      await api.post('/login/access-token', {}, { feedback: 'silent' }).catch(reason => reason),
+    )
+
+    expect(error.status).toBe(401)
+    expect(error.payload).toEqual(envelope)
+    expect(notifier.error).not.toHaveBeenCalled()
+  })
+
+  it('插件客户端保留完整 envelope，同时沿用统一失败反馈', async () => {
+    const envelope: ApiResponse<{ plugin: string }> = {
+      success: false,
+      message: 'Plugin rejected request',
+      data: { plugin: 'demo' },
+    }
+    const { pluginApi } = createApiClients({ adapter: resolveWith(envelope), notifier })
+
+    await expect(pluginApi.get<unknown, ApiResponse<{ plugin: string }>>('/plugin/demo')).resolves.toEqual(envelope)
+    expect(notifier.error).toHaveBeenCalledWith('Plugin rejected request')
+  })
+
+  it.each([
+    ['object', { plugin: 'demo', count: 2 }],
+    ['array', [{ id: 1 }, { id: 2 }]],
+    ['scalar', 'ready'],
+    ['null', null],
+  ])('插件客户端原样交付非 envelope payload：%s', async (_label, payload) => {
+    const { pluginApi } = createApiClients({ adapter: resolveWith(payload), notifier })
+
+    await expect(pluginApi.get('/plugin/demo')).resolves.toEqual(payload)
+    expect(notifier.error).not.toHaveBeenCalled()
+    expect(notifier.success).not.toHaveBeenCalled()
+  })
+
+  it('Blob 成功响应绕过 envelope 解包', async () => {
+    const blob = new Blob(['moviepilot'], { type: 'application/octet-stream' })
+    const { api } = createApiClients({ adapter: resolveWith(blob), notifier })
+
+    await expect(api.get<Blob>('/download', { responseType: 'blob' })).resolves.toBe(blob)
+  })
+
+  it('解析 Blob 中的 JSON HTTP 错误后再构造 ApiRequestError', async () => {
+    const envelope: ApiResponse<{ file: string }> = {
+      success: false,
+      message: 'File is unavailable',
+      data: { file: 'movie.mkv' },
+    }
+    const blob = new Blob([JSON.stringify(envelope)], { type: 'application/json' })
+    const { api } = createApiClients({
+      adapter: rejectWith(blob, 404, { 'content-type': 'application/json' }),
+      notifier,
+    })
+
+    const error = requireApiRequestError(await api.get('/download', { responseType: 'blob' }).catch(reason => reason))
+
+    expect(error.message).toBe('File is unavailable')
+    expect(error.payload).toEqual(envelope)
+    expect(error.response?.data).toEqual(envelope)
+  })
+
+  it('相同技术错误在去重窗口内只提示一次，避免并发失败刷屏', async () => {
+    const { api } = createApiClients({
+      adapter: rejectWith({ message: 'Server exploded' }, 500),
+      notifier,
+    })
+
+    await api.get('/a').catch(reason => reason)
+    await api.get('/b').catch(reason => reason)
+
+    expect(notifier.error).toHaveBeenCalledTimes(1)
+    expect(notifier.error).toHaveBeenCalledWith('Server exploded')
+  })
+
+  it('去重窗口过期后相同技术错误可以再次提示', async () => {
+    vi.useFakeTimers()
+    try {
+      const { api } = createApiClients({
+        adapter: rejectWith({ message: 'Server exploded' }, 500),
+        notifier,
+      })
+
+      await api.get('/a').catch(reason => reason)
+      expect(notifier.error).toHaveBeenCalledTimes(1)
+
+      // 窗口（15 秒）过后，新一轮相同错误应能再次提示。
+      vi.advanceTimersByTime(15000)
+      await api.get('/b').catch(reason => reason)
+      expect(notifier.error).toHaveBeenCalledTimes(2)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('成功响应后清空去重缓存，让后续技术错误可以再次提示', async () => {
+    vi.useFakeTimers()
+    try {
+      const { api } = createApiClients({
+        adapter: rejectWith({ message: 'Server exploded' }, 500),
+        notifier,
+      })
+
+      await api.get('/a').catch(reason => reason)
+      expect(notifier.error).toHaveBeenCalledTimes(1)
+
+      // 服务恢复后缓存应被清空，即使仍在窗口内，相同错误也可再次提示。
+      api.defaults.adapter = resolveWith<ApiResponse<{ ok: boolean }>>({
+        success: true,
+        message: '',
+        data: { ok: true },
+      })
+      await api.get('/ping')
+      api.defaults.adapter = rejectWith({ message: 'Server exploded' }, 500)
+      await api.get('/c').catch(reason => reason)
+
+      expect(notifier.error).toHaveBeenCalledTimes(2)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('连续无效 envelope 响应只提示一次，避免坏缓存命中时刷屏', async () => {
+    // 无效 envelope 是 HTTP 200 但响应体不是标准三键结构，模拟 SW 缓存回退出的坏响应。
+    const { api } = createApiClients({
+      adapter: resolveWith('<html>legacy app shell</html>'),
+      notifier,
+    })
+
+    await api.get('/a').catch(reason => reason)
+    await api.get('/b').catch(reason => reason)
+    await api.get('/c').catch(reason => reason)
+
+    expect(notifier.error).toHaveBeenCalledTimes(1)
+    expect(notifier.error).toHaveBeenCalledWith('Invalid API response envelope')
+  })
+
+  it('无效 envelope 响应不清空去重缓存，窗口内其他技术错误保持收敛', async () => {
+    const adapter: AxiosAdapter = async config => {
+      if (config.url === '/bad') return createResponse(config, '<html></html>', 200)
+      const response = createResponse(config, { message: 'Server exploded' }, 500)
+      throw new AxiosError('Request failed', AxiosError.ERR_BAD_RESPONSE, config, undefined, response)
+    }
+    const { api } = createApiClients({ adapter, notifier })
+
+    await api.get('/a').catch(reason => reason)
+    await api.get('/bad').catch(reason => reason)
+    await api.get('/b').catch(reason => reason)
+
+    // 500 技术错误在窗口内只提示一次；无效 envelope 属于不同消息单独提示一次，
+    // 且它不得清空去重缓存，否则第 3 个相同 500 错误会被再次弹出。
+    expect(notifier.error).toHaveBeenCalledTimes(2)
+    expect(notifier.error).toHaveBeenCalledWith('Server exploded')
+    expect(notifier.error).toHaveBeenCalledWith('Invalid API response envelope')
+  })
+
+  it('不同消息的技术错误互不影响，分别提示', async () => {
+    const adapter: AxiosAdapter = async config => {
+      const message = config.url === '/a' ? 'First failure' : 'Second failure'
+      const response = createResponse(config, { message }, 500)
+      throw new AxiosError('Request failed', AxiosError.ERR_BAD_RESPONSE, config, undefined, response)
+    }
+    const { api } = createApiClients({ adapter, notifier })
+
+    await api.get('/a').catch(reason => reason)
+    await api.get('/b').catch(reason => reason)
+
+    expect(notifier.error).toHaveBeenCalledTimes(2)
+    expect(notifier.error).toHaveBeenCalledWith('First failure')
+    expect(notifier.error).toHaveBeenCalledWith('Second failure')
+  })
+
+  it('业务失败不参与技术错误去重，始终逐条提示', async () => {
+    const envelope: ApiResponse<null> = { success: false, message: 'Cannot save', data: null }
+    const { api } = createApiClients({ adapter: resolveWith(envelope), notifier })
+
+    await api.post('/setting', {}).catch(reason => reason)
+    await api.post('/setting', {}).catch(reason => reason)
+
+    expect(notifier.error).toHaveBeenCalledTimes(2)
+    expect(notifier.error).toHaveBeenCalledWith('Cannot save')
+  })
+
+  it('取消请求保持原始 CanceledError，且不提示或触发离线探测', async () => {
+    const reportConnectionFailure = vi.fn()
+    const adapter: AxiosAdapter = async () => {
+      throw new CanceledError('Request cancelled')
+    }
+    const { api } = createApiClients({ adapter, hooks: { reportConnectionFailure }, notifier })
+
+    const error = await api.get('/slow').catch(reason => reason)
+
+    expect(error).toBeInstanceOf(CanceledError)
+    expect(error).not.toBeInstanceOf(ApiRequestError)
+    expect(notifier.error).not.toHaveBeenCalled()
+    expect(reportConnectionFailure).not.toHaveBeenCalled()
+  })
+
+  it.each([502, 503, 504])('网关错误 %d 上报连接失败且不弹请求层 Toast', async status => {
+    const reportConnectionFailure = vi.fn()
+    const { api } = createApiClients({
+      adapter: rejectWith({ message: 'Gateway unavailable' }, status),
+      hooks: { reportConnectionFailure },
+      notifier,
+    })
+
+    const error = requireApiRequestError(await api.get('/resource').catch(reason => reason))
+
+    expect(error.status).toBe(status)
+    expect(reportConnectionFailure).toHaveBeenCalledWith('server-unreachable')
+    expect(notifier.error).not.toHaveBeenCalled()
+  })
+
+  it('网络错误仅上报离线状态，不弹请求层 Toast', async () => {
+    const reportConnectionFailure = vi.fn()
+    const adapter: AxiosAdapter = async () => {
+      throw new AxiosError('Network Error', AxiosError.ERR_NETWORK)
+    }
+    const { api } = createApiClients({ adapter, hooks: { reportConnectionFailure }, notifier })
+
+    await api.get('/resource').catch(reason => reason)
+
+    expect(reportConnectionFailure).toHaveBeenCalledWith('network-error')
+    expect(notifier.error).not.toHaveBeenCalled()
+  })
+
+  it('网关错误不算服务在线证据，仅成功响应恢复在线状态', async () => {
+    const markServerOnline = vi.fn()
+    const reportConnectionFailure = vi.fn()
+    const { api } = createApiClients({
+      adapter: rejectWith({ message: 'Bad Gateway' }, 502),
+      hooks: { markServerOnline, reportConnectionFailure },
+      notifier,
+    })
+
+    await api.get('/resource').catch(reason => reason)
+
+    expect(markServerOnline).not.toHaveBeenCalled()
+    expect(reportConnectionFailure).toHaveBeenCalledWith('server-unreachable')
+  })
+
+  it('401 被 onUnauthorized 接管时不逐条弹请求层 Toast', async () => {
+    const onUnauthorized = vi.fn(() => true)
+    const { api } = createApiClients({
+      adapter: rejectWith({ detail: 'Not authenticated' }, 401),
+      hooks: { onUnauthorized },
+      notifier,
+    })
+
+    const error = requireApiRequestError(await api.get('/resource').catch(reason => reason))
+
+    expect(error.status).toBe(401)
+    expect(onUnauthorized).toHaveBeenCalledWith(error)
+    expect(notifier.error).not.toHaveBeenCalled()
+  })
+
+  it('403 被 onForbidden 接管时不逐条弹请求层 Toast', async () => {
+    const onForbidden = vi.fn(() => true)
+    const { api } = createApiClients({
+      adapter: rejectWith({ detail: 'token校验不通过' }, 403),
+      hooks: { onForbidden },
+      notifier,
+    })
+
+    const error = requireApiRequestError(await api.get('/resource').catch(reason => reason))
+
+    expect(error.status).toBe(403)
+    expect(onForbidden).toHaveBeenCalledWith(error)
+    expect(notifier.error).not.toHaveBeenCalled()
+  })
+
+  it('401 未被 onUnauthorized 接管时保留逐条错误提示', async () => {
+    const onUnauthorized = vi.fn(() => false)
+    const { api } = createApiClients({
+      adapter: rejectWith({ detail: 'Not authenticated' }, 401),
+      hooks: { onUnauthorized },
+      notifier,
+    })
+
+    const error = requireApiRequestError(await api.get('/resource').catch(reason => reason))
+
+    expect(error.status).toBe(401)
+    expect(notifier.error).toHaveBeenCalledWith('Not authenticated')
+  })
+
+  it('拒绝缺少标准字段的普通 JSON 响应', async () => {
+    const { api } = createApiClients({ adapter: resolveWith({ value: 1 }), notifier })
+
+    const error = requireApiRequestError(await api.get('/legacy').catch(reason => reason))
+
+    expect(error.message).toBe('Invalid API response envelope')
+  })
+
+  it('拒绝带旧顶层 message_i18n 的 envelope', async () => {
+    const legacyEnvelope = {
+      success: false,
+      message: 'Failed',
+      message_i18n: '旧版错误',
+      data: null,
+    }
+    const { api } = createApiClients({ adapter: resolveWith(legacyEnvelope), notifier })
+
+    const error = requireApiRequestError(await api.get('/legacy').catch(reason => reason))
+
+    expect(error.message).toBe('Invalid API response envelope')
+    expect(error.payload).toEqual(legacyEnvelope)
+  })
+
+  it.each([
+    ['zh-CN', '服务器返回了无效响应'],
+    ['en-US', 'The server returned an invalid response'],
+  ])('使用应用注入的 %s fallback 文案提示协议异常', async (_locale, translatedMessage) => {
+    const { api } = createApiClients({
+      adapter: resolveWith({ value: 1 }),
+      notifier,
+      resolveFallbackMessage: key => (key === 'invalid-envelope' ? translatedMessage : key),
+    })
+
+    const error = requireApiRequestError(await api.get('/legacy').catch(reason => reason))
+
+    expect(error.message).toBe(translatedMessage)
+    expect(notifier.error).toHaveBeenCalledWith(translatedMessage)
+  })
+})

src/api/__tests__/index.spec.ts

@@ -0,0 +1,131 @@
+import { AxiosError, AxiosHeaders, type AxiosResponse, type InternalAxiosRequestConfig } from 'axios'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  i18nT: vi.fn((key: string) => `translated:${key}`),
+  authState: { token: null as string | null },
+  logout: vi.fn(),
+  routerPush: vi.fn(),
+  toastError: vi.fn(),
+}))
+
+vi.mock('@/router', () => ({
+  default: { push: mocks.routerPush },
+}))
+vi.mock('@/stores', () => ({
+  useAuthStore: () => ({
+    get token() {
+      return mocks.authState.token
+    },
+    // 与真实 store 一致：登出时清空 token，后续在途请求按无 token 处理。
+    logout: mocks.logout.mockImplementation(() => {
+      mocks.authState.token = null
+    }),
+  }),
+}))
+vi.mock('@/utils/requestOptimizer', () => ({
+  initializeRequestOptimizer: vi.fn(),
+}))
+vi.mock('@/composables/useOfflineStatus', () => ({
+  useGlobalOfflineStatus: () => ({
+    markServerOnline: vi.fn(),
+    reportNetworkError: vi.fn(),
+  }),
+}))
+vi.mock('@/plugins/i18n', () => ({
+  default: { global: { t: mocks.i18nT } },
+  getCurrentLocale: () => 'zh-CN',
+}))
+vi.mock('vue-toastification', () => ({
+  useToast: () => ({ error: mocks.toastError, success: vi.fn() }),
+}))
+
+/** 安装始终返回指定 HTTP 失败的适配器。 */
+async function installFailingAdapter(status: number, data: unknown) {
+  const module = await import('@/api')
+  module.default.defaults.adapter = async config => {
+    const response: AxiosResponse = {
+      config: config as InternalAxiosRequestConfig,
+      data,
+      headers: new AxiosHeaders(),
+      status,
+      statusText: 'Error',
+    }
+    throw new AxiosError(
+      'Request failed',
+      AxiosError.ERR_BAD_RESPONSE,
+      config as InternalAxiosRequestConfig,
+      undefined,
+      response,
+    )
+  }
+  return module
+}
+
+describe('API application wiring', () => {
+  beforeEach(() => {
+    mocks.authState.token = null
+    mocks.logout.mockClear()
+    mocks.routerPush.mockClear()
+    mocks.toastError.mockClear()
+  })
+
+  it('向 window 暴露插件最终 payload 客户端，而内部默认导出数据客户端', async () => {
+    const module = await import('@/api')
+
+    expect(window.MoviePilotAPI).toBe(module.pluginApi)
+    expect(module.default).not.toBe(module.pluginApi)
+  })
+
+  it('通过 i18n 实例解析请求层 fallback 文案', async () => {
+    const module = await import('@/api')
+    module.default.defaults.adapter = async config => ({
+      config: config as InternalAxiosRequestConfig,
+      data: { legacy: true },
+      headers: new AxiosHeaders(),
+      status: 200,
+      statusText: 'OK',
+    })
+
+    const error = await module.default.get('/legacy').catch(reason => reason)
+
+    expect(error).toBeInstanceOf(module.ApiRequestError)
+    expect((error as Error).message).toBe('translated:common.invalidApiResponse')
+    expect(mocks.i18nT).toHaveBeenCalledWith('common.invalidApiResponse')
+  })
+
+  it('已登录时并发 401 只统一登出并静默返回登录页', async () => {
+    mocks.authState.token = 'expired-token'
+    const module = await installFailingAdapter(401, { detail: 'Not authenticated' })
+
+    await Promise.allSettled([module.default.get('/dashboard'), module.default.get('/subscribe')])
+
+    expect(mocks.logout).toHaveBeenCalledOnce()
+    expect(mocks.routerPush).toHaveBeenCalledWith('/login')
+    expect(mocks.toastError).not.toHaveBeenCalled()
+  })
+
+  it('登出后的在途 401 持续静默，不在登录页暴露认证错误', async () => {
+    mocks.authState.token = 'expired-token'
+    const module = await installFailingAdapter(401, { detail: 'Not authenticated' })
+
+    await module.default.get('/dashboard').catch(() => {})
+    await module.default.get('/subscribe').catch(() => {})
+    await module.default.get('/resource').catch(() => {})
+
+    expect(mocks.logout).toHaveBeenCalledOnce()
+    expect(mocks.routerPush).toHaveBeenCalledOnce()
+    expect(mocks.toastError).not.toHaveBeenCalled()
+  })
+
+  it('token 校验失败的 403 完成签退后不弹技术错误', async () => {
+    mocks.authState.token = 'invalid-token'
+    const module = await installFailingAdapter(403, { detail: 'token校验不通过' })
+
+    await Promise.allSettled([module.default.get('/dashboard'), module.default.get('/subscribe')])
+
+    expect(mocks.logout).toHaveBeenCalledOnce()
+    expect(mocks.routerPush).toHaveBeenCalledWith('/login')
+    expect(mocks.toastError).not.toHaveBeenCalled()
+  })
+})

src/api/__tests__/manage.spec.ts

@@ -0,0 +1,55 @@
+import { manageLlmProvider, manageNotificationChannel, manageStorage } from '@/api/manage'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  apiPost: vi.fn(),
+}))
+
+vi.mock('@/api', () => ({
+  default: createDataApiMock({
+    post: (...args: unknown[]) => mocks.apiPost(...args),
+  }),
+}))
+
+describe('manage API adapters', () => {
+  beforeEach(() => {
+    mocks.apiPost.mockReset()
+    mocks.apiPost.mockResolvedValue({ ok: true })
+  })
+
+  it('透传通知渠道的目标、动作、参数和请求配置', async () => {
+    const config = { timeout: 1200 }
+
+    await expect(manageNotificationChannel('telegram', 'refresh', { force: true }, config)).resolves.toEqual({
+      ok: true,
+    })
+
+    expect(mocks.apiPost).toHaveBeenCalledWith(
+      'notification/manage',
+      { target: 'telegram', action: 'refresh', params: { force: true } },
+      config,
+    )
+  })
+
+  it('为网盘存储动作补充空参数对象', async () => {
+    await manageStorage('alist', 'disconnect')
+
+    expect(mocks.apiPost).toHaveBeenCalledWith(
+      'storage/manage',
+      { target: 'alist', action: 'disconnect', params: {} },
+      undefined,
+    )
+  })
+
+  it('透传 LLM Provider 管理动作并返回已解包业务数据', async () => {
+    mocks.apiPost.mockResolvedValueOnce([{ id: 'openai' }])
+
+    await expect(manageLlmProvider('', 'list_providers')).resolves.toEqual([{ id: 'openai' }])
+
+    expect(mocks.apiPost).toHaveBeenCalledWith(
+      'llm/manage',
+      { target: '', action: 'list_providers', params: {} },
+      undefined,
+    )
+  })
+})

src/api/__tests__/pluginInstance.spec.ts

@@ -0,0 +1,57 @@
+import { createScopedPluginApi } from '@/api/pluginInstance'
+import type { PluginApiClient } from '@/api/client'
+import { describe, expect, it, vi } from 'vitest'
+
+/** 创建可调用且带 Axios 风格方法的最小插件客户端。 */
+function createClient() {
+  const client = Object.assign(vi.fn(), {
+    get: vi.fn(),
+    post: vi.fn(),
+    request: vi.fn(),
+  })
+  return client as unknown as PluginApiClient
+}
+
+describe('createScopedPluginApi', () => {
+  it('rewrites only the source plugin dynamic API namespace', () => {
+    const client = createClient()
+    const scoped = createScopedPluginApi(client, 'DemoPluginwork', 'DemoPlugin')
+
+    void scoped.get('plugin/DemoPlugin/items')
+    void scoped.post('/api/v1/plugin/demoplugin/action?sync=1', { value: 1 })
+    void scoped.get('system/config')
+
+    expect(client.get).toHaveBeenNthCalledWith(1, 'plugin/DemoPluginwork/items')
+    expect(client.post).toHaveBeenCalledWith(
+      '/api/v1/plugin/DemoPluginwork/action?sync=1',
+      { value: 1 },
+    )
+    expect(client.get).toHaveBeenNthCalledWith(2, 'system/config')
+  })
+
+  it('supports callable and request-config forms without mutating input', () => {
+    const client = createClient()
+    const scoped = createScopedPluginApi(client, 'DemoPluginhome', 'DemoPlugin')
+    const config = { url: '/plugin/DemoPlugin/status', method: 'GET' }
+
+    void scoped(config)
+    void scoped.request(config)
+
+    expect(client).toHaveBeenCalledWith({
+      url: '/plugin/DemoPluginhome/status',
+      method: 'GET',
+    })
+    expect(client.request).toHaveBeenCalledWith({
+      url: '/plugin/DemoPluginhome/status',
+      method: 'GET',
+    })
+    expect(config.url).toBe('/plugin/DemoPlugin/status')
+  })
+
+  it('returns the original client for ordinary plugins', () => {
+    const client = createClient()
+
+    expect(createScopedPluginApi(client, 'DemoPlugin')).toBe(client)
+    expect(createScopedPluginApi(client, 'DemoPlugin', 'DemoPlugin')).toBe(client)
+  })
+})

src/api/__tests__/pluginSource.spec.ts

@@ -0,0 +1,80 @@
+import { changePluginSource, getPluginSourceOptions, installPluginFromSource } from '@/api/pluginSource'
+import { ApiRequestError } from '@/api/client'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  apiGet: vi.fn(),
+  apiPost: vi.fn(),
+}))
+
+vi.mock('@/api', () => ({
+  default: createDataApiMock({
+    get: (...args: unknown[]) => mocks.apiGet(...args),
+    post: (...args: unknown[]) => mocks.apiPost(...args),
+  }),
+}))
+
+describe('plugin source API adapters', () => {
+  beforeEach(() => {
+    mocks.apiGet.mockReset()
+    mocks.apiPost.mockReset()
+    mocks.apiGet.mockResolvedValue({
+      plugin_id: 'DemoPlugin',
+      inventory_complete: true,
+      selection_status: 'selected',
+      selection_reason: '',
+      identity: null,
+      candidates: [],
+    })
+    mocks.apiPost.mockResolvedValue(undefined)
+  })
+
+  it('查询来源候选时编码插件 ID，并按需传递强制刷新参数', async () => {
+    await getPluginSourceOptions('Demo Plugin', true)
+
+    expect(mocks.apiGet).toHaveBeenCalledWith('plugin/source/Demo%20Plugin/options', { params: { force: true } })
+  })
+
+  it('默认查询不伪造 force 参数', async () => {
+    await getPluginSourceOptions('DemoPlugin')
+
+    expect(mocks.apiGet).toHaveBeenCalledWith('plugin/source/DemoPlugin/options')
+  })
+
+  it('按明确来源安装和 CAS 换源分别发送对应请求体', async () => {
+    const installRequest = {
+      repo_url: 'https://github.com/example/plugins',
+      release_version: '1.2.3',
+      force: true,
+    }
+    const changeRequest = {
+      repo_url: 'https://github.com/other/plugins',
+      expected_revision: 7,
+      release_version: null,
+    }
+
+    await installPluginFromSource('DemoPlugin', installRequest)
+    await changePluginSource('DemoPlugin', changeRequest)
+
+    expect(mocks.apiPost).toHaveBeenNthCalledWith(1, 'plugin/source/DemoPlugin/install', installRequest)
+    expect(mocks.apiPost).toHaveBeenNthCalledWith(2, 'plugin/source/DemoPlugin', changeRequest)
+  })
+
+  it('不吞掉后端业务失败，调用方仍可捕获 ApiRequestError', async () => {
+    mocks.apiPost.mockResolvedValueOnce({
+      success: false,
+      message: '来源 revision 已变化，请重新确认',
+      data: null,
+    })
+
+    const error = await installPluginFromSource('DemoPlugin', {
+      repo_url: 'https://github.com/example/plugins',
+    }).catch(reason => reason)
+
+    expect(error).toBeInstanceOf(ApiRequestError)
+    expect(error).toMatchObject({
+      message: '来源 revision 已变化，请重新确认',
+      businessFailure: true,
+    })
+  })
+})

src/api/client.ts

@@ -0,0 +1,417 @@
+import axios, {
+  AxiosError,
+  type AxiosInstance,
+  type AxiosRequestConfig,
+  type AxiosResponse,
+  type CreateAxiosDefaults,
+} from 'axios'
+import type { ApiResponse } from './types'
+
+/** 控制请求层是否展示成功或失败反馈。 */
+export type ApiFeedbackMode = 'silent' | 'default' | 'all'
+
+/** 请求层无法从后端取得 message 时使用的本地化文案类别。 */
+export type ApiFallbackMessageKey = 'invalid-envelope' | 'network-error' | 'request-failed' | 'timeout'
+
+/** 将请求层 fallback 类别解析为当前语言文案，避免基础客户端依赖 Vue i18n。 */
+export type ApiFallbackMessageResolver = (key: ApiFallbackMessageKey) => string
+
+declare module 'axios' {
+  interface AxiosRequestConfig {
+    feedback?: ApiFeedbackMode
+    skipNavigationCancellation?: boolean
+    skipConnectionTracking?: boolean
+  }
+}
+
+/** 普通 API 客户端在响应拦截器解包后返回业务数据，而不是 AxiosResponse。 */
+export interface DataApiClient extends Omit<
+  AxiosInstance,
+  'delete' | 'get' | 'head' | 'options' | 'patch' | 'patchForm' | 'post' | 'postForm' | 'put' | 'putForm' | 'request'
+> {
+  <T = unknown, R = T, D = AxiosRequestConfig['data']>(config: AxiosRequestConfig<D>): Promise<R>
+  <T = unknown, R = T, D = AxiosRequestConfig['data']>(url: string, config?: AxiosRequestConfig<D>): Promise<R>
+  request<T = unknown, R = T, D = AxiosRequestConfig['data']>(config: AxiosRequestConfig<D>): Promise<R>
+  get<T = unknown, R = T, D = AxiosRequestConfig['data']>(url: string, config?: AxiosRequestConfig<D>): Promise<R>
+  delete<T = unknown, R = T, D = AxiosRequestConfig['data']>(url: string, config?: AxiosRequestConfig<D>): Promise<R>
+  head<T = unknown, R = T, D = AxiosRequestConfig['data']>(url: string, config?: AxiosRequestConfig<D>): Promise<R>
+  options<T = unknown, R = T, D = AxiosRequestConfig['data']>(url: string, config?: AxiosRequestConfig<D>): Promise<R>
+  post<T = unknown, R = T, D = AxiosRequestConfig['data']>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  put<T = unknown, R = T, D = AxiosRequestConfig['data']>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  patch<T = unknown, R = T, D = AxiosRequestConfig['data']>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  postForm<T = unknown, R = T, D = AxiosRequestConfig['data']>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  putForm<T = unknown, R = T, D = AxiosRequestConfig['data']>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  patchForm<T = unknown, R = T, D = AxiosRequestConfig['data']>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+}
+
+/** 插件与联邦组件接收 endpoint 最终 payload，方法签名不暴露 AxiosResponse 外壳。 */
+export type PluginApiClient = DataApiClient
+
+/** 请求层使用的反馈出口，由应用入口接到全局 Toast。 */
+export interface ApiFeedbackNotifier {
+  error(message: string): void
+  success(message: string): void
+}
+
+/** 请求生命周期钩子用于隔离认证和离线状态等应用级副作用。 */
+export interface ApiClientHooks {
+  markServerOnline?(): void
+  /** 返回 true 表示认证失败已由应用层接管，请求层不再弹出逐条错误提示。 */
+  onForbidden?(error: ApiRequestError): boolean | void
+  onUnauthorized?(error: ApiRequestError): boolean | void
+  reportConnectionFailure?(reason: 'network-error' | 'timeout' | 'server-unreachable'): void
+}
+
+/** 创建内部数据客户端与插件最终 payload 客户端时所需的配置。 */
+export interface CreateApiClientsOptions extends CreateAxiosDefaults {
+  hooks?: ApiClientHooks
+  notifier?: ApiFeedbackNotifier
+  resolveFallbackMessage?: ApiFallbackMessageResolver
+  setupInstance?(instance: AxiosInstance): void
+}
+
+const defaultFallbackMessages: Record<ApiFallbackMessageKey, string> = {
+  'invalid-envelope': 'Invalid API response envelope',
+  'network-error': 'Network connection failed',
+  'request-failed': 'API request failed',
+  timeout: 'Request timeout',
+}
+
+/** 技术类失败提示的去重窗口：后端异常时并发请求会得到相同错误，窗口内只提示一次避免刷屏。 */
+const TECHNICAL_ERROR_DEDUP_MS = 15000
+
+interface ApiRequestErrorOptions<T> {
+  businessFailure?: boolean
+  cause?: unknown
+  code?: string
+  config?: AxiosRequestConfig
+  payload?: T
+  request?: unknown
+  response?: AxiosResponse<T>
+}
+
+/**
+ * 统一表示业务失败、HTTP 失败和请求协议错误。
+ *
+ * 该类型继承 AxiosError，确保认证流程和既有调用方仍可读取 response、status、headers 与 config。
+ */
+export class ApiRequestError<T = unknown> extends AxiosError<T> {
+  readonly businessFailure: boolean
+  readonly headers?: AxiosResponse<T>['headers']
+  readonly payload?: T
+
+  /** 保留原始 Axios 元数据，并额外暴露已解析的响应载荷。 */
+  constructor(message: string, options: ApiRequestErrorOptions<T> = {}) {
+    super(
+      message,
+      options.code,
+      options.config as AxiosResponse<T>['config'] | undefined,
+      options.request,
+      options.response,
+    )
+    this.name = 'ApiRequestError'
+    this.businessFailure = options.businessFailure ?? false
+    this.headers = options.response?.headers
+    this.payload = options.payload
+    this.status = options.response?.status
+    if (options.cause instanceof Error) this.cause = options.cause
+    Object.setPrototypeOf(this, new.target.prototype)
+  }
+}
+
+/** 仅返回后端在成功 HTTP 响应中声明的业务失败消息。 */
+export function getApiBusinessErrorMessage(error: unknown): string | undefined {
+  if (!(error instanceof ApiRequestError) || !error.businessFailure) return undefined
+  const payload = error.payload
+  if (!payload || typeof payload !== 'object') return undefined
+  const message = (payload as { message?: unknown }).message
+  return typeof message === 'string' && message.trim() ? message : undefined
+}
+
+/** 判断错误是否来自 HTTP 200 响应中的业务失败。 */
+export function isApiBusinessFailure(error: unknown): error is ApiRequestError {
+  return error instanceof ApiRequestError && error.businessFailure
+}
+
+/** 判断未知值是否为 MoviePilot 标准响应 envelope。 */
+export function isApiResponse<T = unknown>(value: unknown): value is ApiResponse<T> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false
+  const record = value as Record<string, unknown>
+  const keys = Object.keys(record)
+  if (keys.length !== 3 || !keys.every(key => key === 'success' || key === 'message' || key === 'data')) return false
+  return typeof record.success === 'boolean' && typeof record.message === 'string' && 'data' in record
+}
+
+/**
+ * 将 Axios 连接错误归类为全局服务探测可识别的原因。
+ *
+ * 网关不可用状态码（502/503/504）同样视为服务不可达：后端重启或崩溃时网关
+ * 会返回这类响应，若只按“无响应”判断会漏掉重启场景的离线检测。
+ */
+export function resolveConnectionFailureReason(
+  error: AxiosError,
+): 'network-error' | 'timeout' | 'server-unreachable' | null {
+  if (error.code === 'ECONNABORTED' || error.code === 'ETIMEDOUT') return 'timeout'
+  if (error.code === 'NETWORK_ERROR' || error.code === 'ERR_NETWORK' || error.name === 'NetworkError') {
+    return 'network-error'
+  }
+  const status = error.response?.status
+  if (status === 502 || status === 503 || status === 504) return 'server-unreachable'
+  return null
+}
+
+/** 创建普通数据客户端和保持插件自由响应 ABI 的最终 payload 客户端。 */
+export function createApiClients(options: CreateApiClientsOptions = {}): {
+  api: DataApiClient
+  pluginApi: PluginApiClient
+} {
+  const { hooks, notifier, resolveFallbackMessage, setupInstance, ...axiosConfig } = options
+  const api = axios.create(axiosConfig)
+  const pluginApi = axios.create(axiosConfig)
+
+  // 技术类失败提示的去重缓存：同一消息在窗口内只提示一次，避免后端异常时大量并发请求刷屏。
+  // 两个客户端共用同一份缓存，保证重复提示被整体收敛。
+  const technicalErrorDedup = new Map<string, number>()
+
+  // 优化器等底层拦截器必须先安装，确保它们在业务数据解包前仍能看到完整 AxiosResponse。
+  setupInstance?.(api)
+  setupInstance?.(pluginApi)
+  installResponseInterceptors(api, 'data', hooks, notifier, resolveFallbackMessage, technicalErrorDedup)
+  installResponseInterceptors(pluginApi, 'envelope', hooks, notifier, resolveFallbackMessage, technicalErrorDedup)
+
+  return {
+    api: api as DataApiClient,
+    pluginApi: pluginApi as PluginApiClient,
+  }
+}
+
+/** 为客户端安装统一的可达性、反馈、解包和错误标准化处理。 */
+function installResponseInterceptors(
+  instance: AxiosInstance,
+  responseMode: 'data' | 'envelope',
+  hooks?: ApiClientHooks,
+  notifier?: ApiFeedbackNotifier,
+  resolveFallbackMessage?: ApiFallbackMessageResolver,
+  technicalErrorDedup?: Map<string, number>,
+) {
+  instance.interceptors.response.use(
+    response => {
+      hooks?.markServerOnline?.()
+
+      if (isBinarySuccess(response)) return response.data
+
+      const payload: unknown = response.data
+      if (!isApiResponse(payload)) {
+        // 联邦插件自行声明 API 响应；非宿主 envelope 必须原样交给插件调用方。
+        if (responseMode === 'envelope') return payload
+        const error = new ApiRequestError(resolveFallback('invalid-envelope', resolveFallbackMessage), {
+          code: AxiosError.ERR_BAD_RESPONSE,
+          config: response.config,
+          payload,
+          request: response.request,
+          response,
+        })
+        // 无效 envelope 本身就是技术错误，必须留在去重窗口内收敛；
+        // 此处绝不能清空去重缓存，否则每个坏响应都会重置窗口并逐条弹 Toast 刷屏。
+        notifyFailure(response.config.feedback, notifier, error.message, technicalErrorDedup)
+        return Promise.reject(error)
+      }
+
+      // 只有通过 envelope 校验的真实响应才算“服务恢复在线”的证据，
+      // 此时清空技术错误去重缓存，让新一轮故障可以再次提示，避免永久静默。
+      technicalErrorDedup?.clear()
+
+      if (!payload.success) {
+        notifyFailure(response.config.feedback, notifier, payload.message)
+        if (responseMode === 'envelope') return payload
+        return Promise.reject(
+          new ApiRequestError(payload.message || resolveFallback('request-failed', resolveFallbackMessage), {
+            businessFailure: true,
+            code: AxiosError.ERR_BAD_RESPONSE,
+            config: response.config,
+            payload,
+            request: response.request,
+            response,
+          }),
+        )
+      }
+
+      notifySuccess(response.config.feedback, notifier, payload.message)
+      return responseMode === 'envelope' ? payload : payload.data
+    },
+    async (reason: unknown) => {
+      if (isCancellation(reason)) return Promise.reject(reason)
+      // fulfilled 分支生成的协议错误已经携带完整上下文，不应再次按响应 message 包装。
+      if (reason instanceof ApiRequestError) return Promise.reject(reason)
+
+      const original = reason instanceof AxiosError ? reason : undefined
+      const response = original?.response ? await normalizeErrorResponse(original.response) : undefined
+      // 只有成功响应才算服务在线证据；网关错误响应说明后端当前不可达，不能恢复在线状态。
+      if (response && response.status >= 200 && response.status < 300) hooks?.markServerOnline?.()
+
+      const payload = response?.data
+      const error = new ApiRequestError(resolveErrorMessage(payload, original, resolveFallbackMessage), {
+        cause: reason,
+        code: original?.code,
+        config: original?.config,
+        payload,
+        request: original?.request,
+        response,
+      })
+
+      const requestConfig = original?.config
+      const failureReason = original ? resolveConnectionFailureReason(original) : null
+      if (!requestConfig?.skipConnectionTracking && failureReason) {
+        hooks?.reportConnectionFailure?.(failureReason)
+      }
+      // 认证失败由应用层统一签退或交给登录流程处理，避免在登录页暴露技术错误。
+      const authenticationHandled =
+        (response?.status === 401 && hooks?.onUnauthorized?.(error) === true) ||
+        (response?.status === 403 && hooks?.onForbidden?.(error) === true)
+      if (authenticationHandled) {
+        return Promise.reject(error)
+      }
+
+      // 连接类失败（无响应、超时、网关不可用）统一交给离线状态系统按阈值提示，
+      // 不在请求层逐个弹出，避免后端重启时刷屏。
+      if (!failureReason) notifyFailure(requestConfig?.feedback, notifier, error.message, technicalErrorDedup)
+      return Promise.reject(error)
+    },
+  )
+}
+
+/** 二进制成功响应不参与 JSON envelope 校验和解包。 */
+function isBinarySuccess(response: AxiosResponse): boolean {
+  if (typeof Blob !== 'undefined' && response.data instanceof Blob) return true
+  return response.config.responseType === 'arraybuffer' || response.config.responseType === 'stream'
+}
+
+/** 将 Blob 形式的 JSON 错误响应解析为结构化载荷，便于调用方读取错误元数据。 */
+async function normalizeErrorResponse(response: AxiosResponse): Promise<AxiosResponse> {
+  if (typeof Blob === 'undefined' || !(response.data instanceof Blob) || !isJsonBlob(response)) return response
+
+  try {
+    const data = JSON.parse(await readBlobText(response.data)) as unknown
+    return { ...response, data }
+  } catch {
+    return response
+  }
+}
+
+/** 优先使用现代 Blob API，并为测试环境和旧浏览器保留 FileReader 回退。 */
+function readBlobText(blob: Blob): Promise<string> {
+  if (typeof blob.text === 'function') return blob.text()
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onerror = () => reject(reader.error ?? new Error('Failed to read response Blob'))
+    reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '')
+    reader.readAsText(blob)
+  })
+}
+
+/** 根据响应头或 Blob 自身类型识别 JSON 错误载荷。 */
+function isJsonBlob(response: AxiosResponse): boolean {
+  const blobType = response.data instanceof Blob ? response.data.type : ''
+  const headers = response.headers as AxiosResponse['headers'] & { get?: (name: string) => unknown }
+  const rawContentType = typeof headers.get === 'function' ? headers.get('content-type') : headers['content-type']
+  const contentType = typeof rawContentType === 'string' ? rawContentType : ''
+  return blobType.includes('json') || contentType.includes('json')
+}
+
+/** 取消属于正常控制流，保持原始取消对象且不触发 Toast 或离线探测。 */
+function isCancellation(reason: unknown): boolean {
+  if (axios.isCancel(reason)) return true
+  if (!(reason instanceof Error)) return false
+  return reason.name === 'AbortError' || reason.name === 'CanceledError'
+}
+
+/** 优先使用后端 message，并兼容尚未进入统一 envelope 的 detail 错误。 */
+function resolveErrorMessage(
+  payload: unknown,
+  error?: AxiosError,
+  resolveFallbackMessage?: ApiFallbackMessageResolver,
+): string {
+  if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
+    const record = payload as Record<string, unknown>
+    if (typeof record.message === 'string' && record.message) return record.message
+    if (typeof record.detail === 'string' && record.detail) return record.detail
+  }
+  if (error?.code === 'ECONNABORTED' || error?.code === 'ETIMEDOUT') {
+    return resolveFallback('timeout', resolveFallbackMessage)
+  }
+  if (error?.code === 'NETWORK_ERROR' || error?.code === 'ERR_NETWORK') {
+    return resolveFallback('network-error', resolveFallbackMessage)
+  }
+  if (error?.message) return error.message
+  return resolveFallback('request-failed', resolveFallbackMessage)
+}
+
+/** 调用应用注入的本地化 resolver，并为独立使用保留稳定默认值。 */
+function resolveFallback(key: ApiFallbackMessageKey, resolver?: ApiFallbackMessageResolver): string {
+  return resolver?.(key) || defaultFallbackMessages[key]
+}
+
+/** 默认模式只提示失败，silent 模式完全关闭请求层反馈。 */
+function notifyFailure(
+  mode: ApiFeedbackMode | undefined,
+  notifier: ApiFeedbackNotifier | undefined,
+  message: string,
+  technicalErrorDedup?: Map<string, number>,
+) {
+  if (mode !== 'silent' && message && !isTechnicalErrorCached(message, technicalErrorDedup)) {
+    notifier?.error(message)
+  }
+}
+
+/**
+ * 技术错误去重：相同消息在窗口内只提示一次。
+ *
+ * 后端异常或重启时大量并发请求会携带同一技术错误（协议错误、HTTP 5xx 等），
+ * 逐条弹出会占满屏幕；此处以消息为键缓存最近提示时间，窗口内重复消息不再提示。
+ */
+function isTechnicalErrorCached(message: string, dedup?: Map<string, number>): boolean {
+  if (!dedup) return false
+  const now = Date.now()
+  const lastShownAt = dedup.get(message)
+  dedup.set(message, now)
+  if (lastShownAt !== undefined && now - lastShownAt < TECHNICAL_ERROR_DEDUP_MS) {
+    return true
+  }
+  // 顺带清理过期缓存项，避免长时间运行后缓存无限增长。
+  if (dedup.size > 64) {
+    for (const [key, at] of dedup) {
+      if (now - at >= TECHNICAL_ERROR_DEDUP_MS) dedup.delete(key)
+    }
+  }
+  return false
+}
+
+/** all 模式用于显式要求请求层展示后端成功消息。 */
+function notifySuccess(mode: ApiFeedbackMode | undefined, notifier: ApiFeedbackNotifier | undefined, message: string) {
+  if (mode === 'all' && message) notifier?.success(message)
+}

src/api/constants.ts

@@ -26,6 +26,11 @@ export const storageAttributes = [
     icon: 'mdi-server-network-outline',
     remote: true,
   },
+  {
+    type: 'alistgo',
+    icon: 'mdi-server-network-outline',
+    remote: true,
+  },
   {
     type: 'smb',
     icon: 'mdi-folder-network-outline',
@@ -33,15 +38,21 @@ export const storageAttributes = [
   },
 ]
 
-export const storageIconDict = storageAttributes.reduce((dict, item) => {
-  dict[item.type] = item.icon
-  return dict
-}, {} as Record<string, string>)
+export const storageIconDict = storageAttributes.reduce(
+  (dict, item) => {
+    dict[item.type] = item.icon
+    return dict
+  },
+  {} as Record<string, string>,
+)
 
-export const storageRemoteDict = storageAttributes.reduce((dict, item) => {
-  dict[item.type] = item.remote
-  return dict
-}, {} as Record<string, boolean>)
+export const storageRemoteDict = storageAttributes.reduce(
+  (dict, item) => {
+    dict[item.type] = item.remote
+    return dict
+  },
+  {} as Record<string, boolean>,
+)
 
 export const downloaderOptions = [
   {
@@ -58,10 +69,13 @@ export const downloaderOptions = [
   },
 ]
 
-export const downloaderDict = downloaderOptions.reduce((dict, item) => {
-  dict[item.value] = item.title
-  return dict
-}, {} as Record<string, string>)
+export const downloaderDict = downloaderOptions.reduce(
+  (dict, item) => {
+    dict[item.value] = item.title
+    return dict
+  },
+  {} as Record<string, string>,
+)
 
 export const mediaServerOptions = [
   {
@@ -88,12 +102,19 @@ export const mediaServerOptions = [
     value: 'ugreen',
     title: i18n.global.t('setting.system.ugreen'),
   },
+  {
+    value: 'navidrome',
+    title: i18n.global.t('setting.system.navidrome'),
+  },
 ]
 
-export const mediaServerDict = mediaServerOptions.reduce((dict, item) => {
-  dict[item.value] = item.title
-  return dict
-}, {} as Record<string, string>)
+export const mediaServerDict = mediaServerOptions.reduce(
+  (dict, item) => {
+    dict[item.value] = item.title
+    return dict
+  },
+  {} as Record<string, string>,
+)
 
 export const innerFilterRules = [
   { title: i18n.global.t('filterRules.specSub'), value: ' SPECSUB ' },
@@ -104,6 +125,19 @@ export const innerFilterRules = [
   { title: i18n.global.t('filterRules.hkVoi'), value: ' HKVOI ' },
   { title: i18n.global.t('filterRules.notHkVoi'), value: ' !HKVOI ' },
   { title: i18n.global.t('filterRules.free'), value: ' FREE ' },
+  { title: i18n.global.t('filterRules.audioHires'), value: ' HIRES ' },
+  { title: i18n.global.t('filterRules.audioLossless'), value: ' LOSSLESS ' },
+  { title: i18n.global.t('filterRules.audioFlac'), value: ' FLAC ' },
+  { title: i18n.global.t('filterRules.audioAlac'), value: ' ALAC ' },
+  { title: i18n.global.t('filterRules.audioApe'), value: ' APE ' },
+  { title: i18n.global.t('filterRules.audioWav'), value: ' WAV ' },
+  { title: i18n.global.t('filterRules.audioDsd'), value: ' DSD ' },
+  { title: i18n.global.t('filterRules.audioMp3'), value: ' MP3 ' },
+  { title: i18n.global.t('filterRules.audioAac'), value: ' AAC ' },
+  { title: i18n.global.t('filterRules.audioOpus'), value: ' OPUS ' },
+  { title: i18n.global.t('filterRules.bitrate320'), value: ' BITRATE320 ' },
+  { title: i18n.global.t('filterRules.bitrate256'), value: ' BITRATE256 ' },
+  { title: i18n.global.t('filterRules.bitrate192'), value: ' BITRATE192 ' },
   { title: i18n.global.t('filterRules.resolution4k'), value: ' 4K ' },
   { title: i18n.global.t('filterRules.resolution1080p'), value: ' 1080P ' },
   { title: i18n.global.t('filterRules.resolution720p'), value: ' 720P ' },
@@ -226,6 +260,46 @@ export const effectOptions = ref([
   },
 ])
 
+// 音乐音质等级选择框数据
+export const audioQualityOptions = ref([
+  { title: i18n.global.t('audioQualityOptions.all'), value: '' },
+  { title: i18n.global.t('audioQualityOptions.hires'), value: 'hires' },
+  { title: i18n.global.t('audioQualityOptions.lossless'), value: 'hires|lossless' },
+  { title: i18n.global.t('audioQualityOptions.lossy'), value: 'lossy' },
+])
+
+// 音频格式选择框数据
+export const audioFormatOptions = ref([
+  { title: i18n.global.t('audioFormatOptions.all'), value: '' },
+  { title: i18n.global.t('audioFormatOptions.lossless'), value: 'DSD|FLAC|ALAC|APE|WAV|AIFF|PCM' },
+  ...['DSD', 'FLAC', 'ALAC', 'APE', 'WAV', 'AIFF', 'PCM', 'MP3', 'AAC', 'OGG', 'OPUS', 'WMA'].map(value => ({
+    title: value,
+    value,
+  })),
+])
+
+export const audioBitrateOptions = [
+  { title: '128 kbps', value: 128000 },
+  { title: '192 kbps', value: 192000 },
+  { title: '256 kbps', value: 256000 },
+  { title: '320 kbps', value: 320000 },
+]
+
+export const audioBitDepthOptions = [
+  { title: '16-bit', value: 16 },
+  { title: '24-bit', value: 24 },
+  { title: '32-bit', value: 32 },
+]
+
+export const audioSampleRateOptions = [
+  { title: '44.1 kHz', value: 44100 },
+  { title: '48 kHz', value: 48000 },
+  { title: '88.2 kHz', value: 88200 },
+  { title: '96 kHz', value: 96000 },
+  { title: '176.4 kHz', value: 176400 },
+  { title: '192 kHz', value: 192000 },
+]
+
 // 媒体类型选项
 export const mediaTypeOptions = [
   {
@@ -236,6 +310,10 @@ export const mediaTypeOptions = [
     title: i18n.global.t('mediaType.tv'),
     value: '电视剧',
   },
+  {
+    title: i18n.global.t('mediaType.music'),
+    value: '音乐',
+  },
   {
     title: i18n.global.t('mediaType.anime'),
     value: '动漫',
@@ -251,10 +329,13 @@ export const mediaTypeOptions = [
 ]
 
 // 媒体类型字典
-export const mediaTypeDict = mediaTypeOptions.reduce((dict, item) => {
-  dict[item.value] = item.title
-  return dict
-}, {} as Record<string, string>)
+export const mediaTypeDict = mediaTypeOptions.reduce(
+  (dict, item) => {
+    dict[item.value] = item.title
+    return dict
+  },
+  {} as Record<string, string>,
+)
 
 // 通知开关选项
 export const notificationSwitchOptions = [
@@ -297,10 +378,13 @@ export const notificationSwitchOptions = [
 ]
 
 // 通知开关字典
-export const notificationSwitchDict = notificationSwitchOptions.reduce((dict, item) => {
-  dict[item.value] = item.title
-  return dict
-}, {} as Record<string, string>)
+export const notificationSwitchDict = notificationSwitchOptions.reduce(
+  (dict, item) => {
+    dict[item.value] = item.title
+    return dict
+  },
+  {} as Record<string, string>,
+)
 
 // 操作步骤选项
 export const actionStepOptions = [
@@ -367,7 +451,10 @@ export const actionStepOptions = [
 ]
 
 // 操作步骤字典
-export const actionStepDict = actionStepOptions.reduce((dict, item) => {
-  dict[item.value] = item.title
-  return dict
-}, {} as Record<string, string>)
+export const actionStepDict = actionStepOptions.reduce(
+  (dict, item) => {
+    dict[item.value] = item.title
+    return dict
+  },
+  {} as Record<string, string>,
+)