更新插件组件文档，调整多个组件以支持关闭功能，增强用户交互体验，并修正配置示例以反映最新的代码结构和依赖关系。

添加关闭页面的功能，更新多个组件以支持新的事件通知机制，并调整文档以反映最新的功能变化，提升用户交互体验。
更新 PluginConfigDialog.vue
2026-05-09 20:12:40 +08:00 · 2025-05-07 08:21:44 +08:00 · 2025-05-07 06:59:53 +08:00 · 2025-05-07 00:25:19 +08:00 · 2025-05-07 00:05:25 +08:00 · 2025-05-07 00:00:02 +08:00
55 changed files with 3170 additions and 259 deletions
--- a/README.md
+++ b/README.md
@@ -4,15 +4,34 @@

 [MoviePilot](https://github.com/jxxghp/MoviePilot) 的前端项目，NodeJS版本：>= `v20.12.1`。

-## 推荐的IDE设置
+## 特性
+
+- 基于 Vue 3 和 Vuetify 3 构建的现代化界面
+- 使用 Vite 作为构建工具，提供快速的开发体验
+- 支持多语言（中文/英文）
+- 完整的插件系统支持，包括远程组件动态加载
+
+## 模块联邦功能
+
+MoviePilot 现已支持模块联邦（Module Federation）功能，允许插件开发者创建可动态加载的远程组件，实现更丰富的插件用户界面。
+
+### 相关文档
+
+- [模块联邦开发指南](docs/module-federation-guide.md) - 如何开发远程组件插件
+- [模块联邦问题排查指南](docs/federation-troubleshooting.md) - 常见问题和解决方案
+- [插件远程组件示例](examples/plugin-component/) - 开发插件组件的完整示例项目 
+
+## 开发部署
+
+### 推荐的IDE设置

 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (并禁用 Vetur).

-## 配置Vite
+### 配置Vite

 请参阅 [Vite 配置参考](https://vitejs.dev/config/).

-## 依赖安装
+### 依赖安装

 ```sh
 yarn
--- a/README_EN.md
+++ b/README_EN.md
@@ -2,39 +2,57 @@

 *[中文](README.md) | English*

-Frontend project for [MoviePilot](https://github.com/jxxghp/MoviePilot), NodeJS version: >= `v20.12.1`.
+Frontend project for [MoviePilot](https://github.com/jxxghp/MoviePilot), NodeJS version required: >= `v20.12.1`.

-## Recommended IDE Setup
+## Features
+
+- Modern interface built with Vue 3 and Vuetify 3
+- Fast development experience with Vite build tool
+- 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).

-## Vite Configuration
+### Configure Vite 

-Please refer to [Vite Configuration Reference](https://vitejs.dev/config/).
+See [Vite Configuration Reference](https://vitejs.dev/config/).

-## Installation
+### Install Dependencies

 ```sh
 yarn
 ```

-### Development
+### Development Server

 ```sh
 yarn dev
 ```

-### Build
+### Build for Production

 ```sh
 yarn build
 ```

-### Production Deployment
+### Static Deployment

-1. Use `nginx` or other web servers to host the `dist` static files. See `public/nginx.conf` for nginx configuration reference.
+1. Host the `dist` static files using a web server like `nginx`. Refer to `public/nginx.conf` for nginx configuration.

-2. Use `node` command to run `service.js` directly. It listens on port `3000` by default. Set the environment variable `NGINX_PORT` to adjust the port.
+2. Alternatively, run the `service.js` directly with the `node` command. It listens on port `3000` by default. Set the `NGINX_PORT` environment variable to adjust the port.

 ```shell
 node dist/service.js
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,13 +12,11 @@ declare module 'vue' {
    ErrorHeader: typeof import('./src/@core/components/ErrorHeader.vue')['default']
    ExistIcon: typeof import('./src/@core/components/ExistIcon.vue')['default']
    LoadingBanner: typeof import('./src/@core/components/LoadingBanner.vue')['default']
-    LocaleSwitcher: typeof import('./src/@core/components/LocaleSwitcher.vue')['default']
    MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
    PageContentTitle: typeof import('./src/@core/components/PageContentTitle.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    ScrollToTopBtn: typeof import('./src/@core/components/ScrollToTopBtn.vue')['default']
    StatIcon: typeof import('./src/@core/components/StatIcon.vue')['default']
-    ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default']
  }
 }
--- a/docs/federation-troubleshooting.md
+++ b/docs/federation-troubleshooting.md
@@ -0,0 +1,110 @@
+# MoviePilot 模块联邦问题排查指南
+
+本文档提供了针对 MoviePilot 项目中使用模块联邦时可能遇到的常见问题及解决方案。
+
+## 远程组件注册机制
+
+MoviePilot 使用自动注册机制来加载远程组件：
+
+1. 对于使用 Vue 渲染模式的插件，自动注册其远程组件
+2. 每个远程组件根据插件 ID 唯一标识，确保不会冲突
+3. 在需要加载组件时，会优先检查已注册的组件信息
+
+这种设计使得插件开发者只需专注于组件开发，而不需要担心加载机制的复杂性。
+
+## 常见错误
+
+### 1. "Module name 'vue' does not resolve to a valid URL"
+
+**原因**：远程组件无法正确解析共享依赖的 URL，通常是因为共享依赖配置不正确。
+
+**解决方案**：
+
+1. 在 **插件组件项目** 的 `vite.config.js` 中正确配置共享依赖：
+
+```js
+federation({
+  // ...
+  shared: {
+    vue: {
+      singleton: true,
+      requiredVersion: false // 关闭版本检查
+    }
+  }
+})
+```
+
+2. 在 **主应用** 的 `vite.config.ts` 中确保共享依赖配置正确：
+
+```ts
+federation({
+  name: 'host',
+  remotes: {},
+  shared: ['vue', 'vuetify']
+})
+```
+
+### 2. "Top-level await is not available in the configured target environment"
+
+**原因**：模块联邦使用了顶层 await，但目标构建环境不支持此功能。
+
+**解决方案**：
+
+在 **主应用** 和 **插件组件项目** 的构建配置中添加 `target: 'esnext'`：
+
+```js
+build: {
+  target: 'esnext', // 支持顶层await
+  // 其他配置...
+}
+```
+
+### 3. "TypeError: Failed to fetch dynamically imported module"
+
+**原因**：远程组件 JS 文件无法被正确加载，可能是路径错误或网络问题。
+
+**解决方案**：
+
+1. 检查网络请求是否成功（状态码200）
+2. 确认组件 URL 是否正确
+3. 确保服务器允许访问该 JS 文件（CORS 配置）
+4. 检查插件后端是否正确提供了静态文件服务
+
+### 4. 组件加载后渲染为空白或出现错误
+
+**原因**：组件内部代码错误或与主应用不兼容。
+
+**解决方案**：
+
+1. 检查浏览器控制台错误信息
+2. 确保组件代码没有语法错误
+3. 避免在组件中使用主应用未提供的依赖
+4. 确保所有路径（如图片、API请求URL等）都是正确的
+
+## 调试技巧
+
+### 1. 启用详细日志
+
+在浏览器控制台中设置：
+
+```js
+localStorage.setItem('debug', 'vite:*')
+```
+
+### 2. 分析网络请求
+
+1. 打开浏览器开发者工具
+2. 转到 Network 标签页
+3. 确认远程组件 JS 文件请求是否成功
+4. 分析响应内容是否为有效的 JavaScript
+
+### 3. 隔离测试远程组件
+
+创建一个独立的简单页面来测试插件组件，排除主应用的干扰因素。
+
+## 其他资源
+
+- [MoviePilot 插件组件示例](../examples/plugin-component/) 
+- [Vite 模块联邦插件文档](https://github.com/originjs/vite-plugin-federation)
+- [Vite 官方文档](https://vitejs.dev/guide/build.html)
+- [Origin.js 模块联邦示例](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples)
--- a/docs/module-federation-guide.md
+++ b/docs/module-federation-guide.md
@@ -0,0 +1,303 @@
+# MoviePilot前端远程模块开发指南
+
+## 1. 概述
+
+MoviePilot前端采用模块联邦(Module Federation)技术实现插件的动态加载和集成。本文档详细说明如何开发符合要求的远程模块，以便在MoviePilot中作为插件使用。
+
+关联阅读后端插件开发文档：[第三方插件开发说明](https://github.com/jxxghp/MoviePilot-Plugins/blob/main/README.md)
+
+
+## 2. 技术要求
+
+- Node.js 16+
+- Vue 3
+- Vite 4+
+- TypeScript 5+
+
+## 3. 核心概念
+
+每个插件需要提供三个标准组件：
+
+| 组件名称 | 文件名 | 用途 |
+|---------|-------|------|
+| Page | Page.vue | 插件详情页面 |
+| Config | Config.vue | 插件配置页面 |
+| Dashboard | Dashboard.vue | 仪表板组件 |
+
+## 4. 快速开始
+
+### 创建项目
+
+```bash
+# 创建项目
+npm create vite@latest my-plugin -- --template vue-ts
+
+# 进入项目目录
+cd my-plugin
+
+# 安装依赖
+yarn
+```
+
+### 配置vite.config.ts
+
+```typescript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import federation from '@originjs/vite-plugin-federation'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    federation({
+      name: 'LogsClean',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './Page': './src/components/Page.vue',
+        './Config': './src/components/Config.vue',
+        './Dashboard': './src/components/Dashboard.vue',
+      },
+      shared: ['vue', 'vuetify'],
+      format: 'esm'
+    })
+  ],
+  build: {
+    target: 'esnext',   // 必须设置为esnext以支持顶层await
+    minify: false,      // 开发阶段建议关闭混淆
+    cssCodeSplit: false,
+  },
+  server: {
+    port: 5001,   // 使用不同于主应用的端口
+    cors: true,   // 启用CORS
+    origin: 'http://localhost:5001'
+  },
+})
+```
+
+## 5. 组件开发规范
+
+### 5.1 Page组件（详情页面）
+
+```vue
+<script setup lang="ts">
+// 自定义事件，用于通知主应用刷新数据
+const emit = defineEmits(['action', 'switch', 'close'])
+
+// 接收API对象
+const props = defineProps({
+  api: {
+    type: any,
+    default: () => {}
+  }
+})
+
+// 页面逻辑代码...
+
+// 通知主应用刷新数据
+function notifyRefresh() {
+  emit('action')
+}
+
+// 通知主应用切换到配置页面
+function notifySwitch() {
+  emit('switch')
+}
+
+// 通知主应用关闭当前页面
+function notifyClose() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div class="plugin-page">
+    <!-- 插件详情页面操作按钮 -->
+    <v-btn @click="notifyRefresh">刷新数据</v-btn>
+    <v-btn @click="notifySwitch">配置插件</v-btn>
+    <v-btn @click="notifyClose">关闭页面</v-btn>
+  </div>
+</template>
+```
+
+### 5.2 Config组件（配置页面）
+
+```vue
+<script setup lang="ts">
+// 接收初始配置和API对象
+const props = defineProps({
+  initialConfig: {
+    type: Object,
+    default: () => ({})
+  },
+  api: {
+    type: any,
+    default: () => {}
+  }
+})
+
+// 配置数据
+const config = ref({...props.initialConfig})
+
+// 自定义事件，用于保存配置
+const emit = defineEmits(['save', 'close', 'switch'])
+
+// 保存配置
+function saveConfig() {
+  emit('save', config.value)
+}
+
+// 通知主应用切换到详情页面
+function notifySwitch() {
+  emit('switch')
+}
+
+// 通知主应用关闭当前页面
+function notifyClose() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div class="plugin-config">
+    <!-- 配置表单 -->
+    <v-text-field v-model="config.someField" label="配置项"></v-text-field>
+    
+    <!-- 保存按钮 -->
+    <v-btn color="primary" @click="saveConfig">保存配置</v-btn>
+
+    <!-- 关闭按钮 -->
+    <v-btn color="primary" @click="notifyClose">关闭页面</v-btn>
+
+    <!-- 切换按钮 -->
+    <v-btn color="primary" @click="notifySwitch">切换到详情页面</v-btn>
+  </div>
+</template>
+```
+
+### 5.3 Dashboard组件（仪表板）
+
+```vue
+<script setup lang="ts">
+// 接收配置和刷新控制
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({})
+  },
+  allowRefresh: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// 仪表板逻辑...
+</script>
+
+<template>
+  <div class="dashboard-widget">
+    <!-- 仪表板内容 -->
+    <v-card>
+      <v-card-title>{{ config.title || '仪表板组件' }}</v-card-title>
+      <v-card-text>
+        <!-- 组件内容 -->
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+```
+
+## 6. 构建和部署
+
+### 构建项目
+
+```bash
+yarn build
+```
+
+将生成的dist文件夹上传到插件后端目录下（默认为`dist/assets`），在插件的后端代码中，实现以下方法来集成远程组件：
+
+```python
+def get_render_mode() -> Tuple[str, str]:
+    """
+    获取插件渲染模式
+    :return: 1、渲染模式，支持：vue/vuetify，默认vuetify
+    :return: 2、组件路径，默认 dist/assets
+    """
+    return "vue", "dist/assets"
+```
+
+
+## 7. 调试与排错
+
+### 常见问题
+
+1. **模块无法加载**
+   - 检查网络请求是否成功（状态码200）
+   - 确认文件路径是否正确
+   - 检查CORS跨域设置
+
+2. **模块加载但组件不显示**
+   - 检查控制台错误信息
+   - 确认组件是否正确导出
+   - 验证共享依赖配置
+
+3. **"Module name 'vue' does not resolve to a valid URL"**
+   - 检查`shared`配置是否正确
+   - 设置`requiredVersion: false`尝试解决
+
+4. **"Top-level await is not available"**
+   - 确保`build.target`设置为`esnext`
+
+## 8. 高级配置
+
+### 8.1 CSS隔离
+
+为防止样式冲突，建议使用CSS Modules或scoped样式：
+
+```vue
+<style scoped>
+/* 组件样式 */
+</style>
+```
+
+### 8.2 共享更多依赖
+
+如果您的插件需要共享更多依赖，可以扩展shared配置：
+
+```js
+shared: {
+  vue: { requiredVersion: false },
+  vuetify: { requiredVersion: false },
+  '@vueuse/core': { requiredVersion: false },
+  pinia: { requiredVersion: false }
+}
+```
+
+### 8.3 开发环境测试
+
+开发期间可以使用以下配置在本地测试：
+
+```typescript
+// vite.config.ts
+export default defineConfig({
+  server: {
+    port: 5001,   // 使用不同于主应用的端口
+    cors: true,   // 启用CORS
+    origin: 'http://localhost:5001'
+  }
+})
+```
+
+## 9. 示例代码
+
+- [插件远程组件示例](../examples/plugin-component/) - 开发插件组件的完整示例项目 
+- [模块联邦问题排查指南](./federation-troubleshooting.md) - 常见问题排查
+
+## 10. 参考资料
+
+- [Vite Plugin Federation](https://github.com/originjs/vite-plugin-federation)
+- [Vue 3官方文档](https://vuejs.org/)
+
+---
+
+如有问题，请提交Issue。 
--- a/env.d.ts
+++ b/env.d.ts
@@ -8,3 +8,10 @@ declare module 'vue-router' {
    navActiveLink?: RouteLocationRaw
  }
 }
+
+// 支持动态导入远程模块
+declare module '*' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/examples/plugin-component/README.md
+++ b/examples/plugin-component/README.md
@@ -0,0 +1,42 @@
+# MoviePilot 插件远程组件示例
+
+这是 MoviePilot 插件远程组件的示例项目，展示了如何正确配置和开发与主应用兼容的远程组件。本示例实现了三个标准组件：Page（详情页面）、Config（配置页面）和Dashboard（仪表板组件）。
+
+## 1. 开发环境准备
+
+### 安装依赖
+
+```bash
+npm install
+# 或
+yarn
+```
+
+### 开发模式运行
+
+```bash
+npm run dev
+# 或
+yarn dev
+```
+
+## 2. 项目结构
+
+```
+plugin-component/
+├── src/
+│   ├── components/
+│   │   ├── Page.vue       # 插件详情页面组件
+│   │   ├── Config.vue     # 插件配置页面组件
+│   │   └── Dashboard.vue  # 插件仪表板组件
+│   ├── App.vue            # 本地开发入口组件
+│   └── main.js            # 本地开发入口文件
+├── vite.config.js         # Vite和模块联邦配置
+├── index.html             # 本地开发HTML入口
+└── package.json           # 依赖配置
+```
+
+## 3. 开发指引
+
+- [模块联邦开发指南](../../docs/module-federation-guide.md)
+- [模块联邦问题排查指南](../../docs/federation-troubleshooting.md)。
--- a/examples/plugin-component/index.html
+++ b/examples/plugin-component/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MoviePilot插件组件示例</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet" />
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: 'Roboto', sans-serif;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
--- a/examples/plugin-component/package.json
+++ b/examples/plugin-component/package.json
@@ -0,0 +1,23 @@
+{
+    "name": "moviepilot-plugin-component",
+    "private": true,
+    "version": "1.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "vue": "^3.3.4",
+        "vuetify": "^3.4.0",
+        "echarts": "^5.4.3",
+        "vue-echarts": "^6.6.1",
+        "@vueuse/core": "^10.6.0"
+    },
+    "devDependencies": {
+        "@originjs/vite-plugin-federation": "^1.3.5",
+        "@vitejs/plugin-vue": "^4.4.0",
+        "vite": "^5.0.0"
+    }
+}
--- a/examples/plugin-component/src/App.vue
+++ b/examples/plugin-component/src/App.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="app-container">
+    <v-app>
+      <v-app-bar color="primary" app>
+        <v-app-bar-title>MoviePilot插件组件示例</v-app-bar-title>
+      </v-app-bar>
+
+      <v-main>
+        <v-container>
+          <v-tabs v-model="activeTab" bg-color="primary">
+            <v-tab value="page">详情页面</v-tab>
+            <v-tab value="config">配置页面</v-tab>
+            <v-tab value="dashboard">仪表板</v-tab>
+          </v-tabs>
+
+          <v-window v-model="activeTab" class="mt-4">
+            <v-window-item value="page">
+              <h2 class="text-h5 mb-4">Page组件</h2>
+              <div class="component-preview">
+                <page-component @action="handleAction"></page-component>
+              </div>
+            </v-window-item>
+
+            <v-window-item value="config">
+              <h2 class="text-h5 mb-4">Config组件</h2>
+              <div class="component-preview">
+                <config-component :initial-config="initialConfig" @save="handleConfigSave"></config-component>
+              </div>
+            </v-window-item>
+
+            <v-window-item value="dashboard">
+              <h2 class="text-h5 mb-4">Dashboard组件</h2>
+              <v-switch v-model="dashboardConfig.attrs.border" label="显示边框" color="primary" class="mb-4"></v-switch>
+              <div class="component-preview">
+                <dashboard-component :config="dashboardConfig" :allow-refresh="true"></dashboard-component>
+              </div>
+            </v-window-item>
+          </v-window>
+        </v-container>
+      </v-main>
+
+      <v-footer app color="primary" class="text-center d-flex justify-center">
+        <span class="text-white">MoviePilot 模块联邦示例 ©{{ new Date().getFullYear() }}</span>
+      </v-footer>
+    </v-app>
+
+    <!-- 通知弹窗 -->
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout">
+      {{ snackbar.text }}
+      <template v-slot:actions>
+        <v-btn variant="text" @click="snackbar.show = false"> 关闭 </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import PageComponent from './components/Page.vue'
+import ConfigComponent from './components/Config.vue'
+import DashboardComponent from './components/Dashboard.vue'
+
+// 活动标签页
+const activeTab = ref('page')
+
+// 配置初始值
+const initialConfig = {
+  name: '测试插件',
+  description: '这是一个测试配置',
+  enable_notifications: true,
+  update_interval: 30,
+  api_url: 'https://api.example.com',
+  api_key: 'test_api_key_123',
+  concurrent_tasks: 2,
+  tags: ['电影', '测试'],
+}
+
+// 仪表板配置
+const dashboardConfig = reactive({
+  id: 'test_plugin',
+  name: '测试插件',
+  attrs: {
+    title: '仪表板示例',
+    subtitle: '插件数据展示',
+    border: true,
+  },
+})
+
+// 通知状态
+const snackbar = reactive({
+  show: false,
+  text: '',
+  color: 'success',
+  timeout: 3000,
+})
+
+// 显示通知
+function showNotification(text, color = 'success') {
+  snackbar.text = text
+  snackbar.color = color
+  snackbar.show = true
+}
+
+// 处理详情页面操作
+function handleAction() {
+  showNotification('Page组件触发了action事件')
+}
+
+// 处理配置保存
+function handleConfigSave(config) {
+  console.log('配置已保存:', config)
+  showNotification('配置已保存')
+}
+</script>
+
+<style scoped>
+/* 为了使测试应用更美观 */
+.app-container {
+  block-size: 100vh;
+  inline-size: 100vw;
+}
+
+.component-preview {
+  overflow: hidden;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+</style>
--- a/examples/plugin-component/src/components/Config.vue
+++ b/examples/plugin-component/src/components/Config.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="plugin-config">
+    <v-card>
+      <v-card-title>插件配置</v-card-title>
+      <v-card-text>
+        <v-alert v-if="error" type="error" class="mb-4">{{ error }}</v-alert>
+
+        <v-form ref="form" v-model="isFormValid" @submit.prevent="saveConfig">
+          <!-- 基本设置区域 -->
+          <div class="text-subtitle-1 font-weight-bold mt-4 mb-2">基本设置</div>
+
+          <v-text-field
+            v-model="config.name"
+            label="插件名称"
+            variant="outlined"
+            :rules="[v => !!v || '名称不能为空']"
+            hint="显示在插件列表中的名称"
+          ></v-text-field>
+
+          <v-textarea
+            v-model="config.description"
+            label="插件描述"
+            variant="outlined"
+            rows="3"
+            hint="简要说明插件的功能和用途"
+          ></v-textarea>
+
+          <!-- 功能配置区域 -->
+          <div class="text-subtitle-1 font-weight-bold mt-4 mb-2">功能配置</div>
+
+          <v-switch
+            v-model="config.enable_notifications"
+            label="启用通知"
+            color="primary"
+            inset
+            hint="接收插件状态变更通知"
+            persistent-hint
+          ></v-switch>
+
+          <v-select
+            v-model="config.update_interval"
+            label="更新频率"
+            :items="updateIntervalOptions"
+            variant="outlined"
+            item-title="text"
+            item-value="value"
+          ></v-select>
+
+          <!-- API配置区域 -->
+          <div class="text-subtitle-1 font-weight-bold mt-4 mb-2">API设置</div>
+
+          <v-text-field
+            v-model="config.api_url"
+            label="API地址"
+            variant="outlined"
+            hint="外部服务API地址"
+            :rules="[v => !v || v.startsWith('http') || '请输入有效的URL']"
+          ></v-text-field>
+
+          <v-text-field
+            v-model="config.api_key"
+            label="API密钥"
+            variant="outlined"
+            :append-inner-icon="showApiKey ? 'mdi-eye-off' : 'mdi-eye'"
+            :type="showApiKey ? 'text' : 'password'"
+            @click:append-inner="showApiKey = !showApiKey"
+          ></v-text-field>
+
+          <!-- 高级选项区域 -->
+          <div class="text-subtitle-1 font-weight-bold mt-4 mb-2">高级选项</div>
+
+          <v-expansion-panels variant="accordion">
+            <v-expansion-panel>
+              <v-expansion-panel-title>高级选项</v-expansion-panel-title>
+              <v-expansion-panel-text>
+                <v-slider
+                  v-model="config.concurrent_tasks"
+                  label="并发任务数"
+                  min="1"
+                  max="10"
+                  step="1"
+                  thumb-label
+                ></v-slider>
+
+                <v-combobox
+                  v-model="config.tags"
+                  label="标签"
+                  variant="outlined"
+                  chips
+                  multiple
+                  closable-chips
+                ></v-combobox>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="secondary" variant="outlined" @click="resetForm">重置</v-btn>
+        <v-btn color="primary" :disabled="!isFormValid" @click="saveConfig" :loading="saving">保存配置</v-btn>
+        <v-btn color="primary" @click="notifyClose">关闭</v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+
+// 接收初始配置
+const props = defineProps({
+  initialConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  api: {
+    type: any,
+    default: () => {},
+  },
+})
+
+// 表单状态
+const form = ref(null)
+const isFormValid = ref(true)
+const error = ref(null)
+const saving = ref(false)
+const showApiKey = ref(false)
+
+// 更新频率选项
+const updateIntervalOptions = [
+  { text: '5分钟', value: 5 },
+  { text: '15分钟', value: 15 },
+  { text: '30分钟', value: 30 },
+  { text: '1小时', value: 60 },
+  { text: '2小时', value: 120 },
+  { text: '6小时', value: 360 },
+  { text: '12小时', value: 720 },
+  { text: '1天', value: 1440 },
+]
+
+// 配置数据，使用默认值和初始配置合并
+const defaultConfig = {
+  name: '我的插件',
+  description: '',
+  enable_notifications: true,
+  update_interval: 60,
+  api_url: '',
+  api_key: '',
+  concurrent_tasks: 3,
+  tags: [],
+}
+
+// 合并默认配置和初始配置
+const config = reactive({ ...defaultConfig })
+
+// 初始化配置
+onMounted(() => {
+  // 加载初始配置
+  if (props.initialConfig) {
+    Object.keys(props.initialConfig).forEach(key => {
+      if (key in config) {
+        config[key] = props.initialConfig[key]
+      }
+    })
+  }
+})
+
+// 自定义事件，用于保存配置
+const emit = defineEmits(['save', 'close', 'switch'])
+
+// 保存配置
+async function saveConfig() {
+  if (!isFormValid.value) {
+    error.value = '请修正表单错误'
+    return
+  }
+
+  saving.value = true
+  error.value = null
+
+  try {
+    // 模拟API调用等待
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    // 发送保存事件
+    emit('save', { ...config })
+  } catch (err) {
+    console.error('保存配置失败:', err)
+    error.value = err.message || '保存配置失败'
+  } finally {
+    saving.value = false
+  }
+}
+
+// 重置表单
+function resetForm() {
+  Object.keys(defaultConfig).forEach(key => {
+    config[key] = defaultConfig[key]
+  })
+
+  if (form.value) {
+    form.value.resetValidation()
+  }
+}
+
+// 通知主应用关闭组件
+function notifyClose() {
+  emit('close')
+}
+</script>
+
+<style scoped>
+.plugin-config {
+  padding: 16px;
+  inline-size: 100%;
+}
+</style>
--- a/examples/plugin-component/src/components/Dashboard.vue
+++ b/examples/plugin-component/src/components/Dashboard.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="dashboard-widget">
+    <v-card v-if="!config?.attrs?.border" flat>
+      <v-card-text class="pa-0">
+        <div class="dashboard-content">
+          <!-- 加载中状态 -->
+          <div v-if="loading" class="d-flex justify-center align-center py-4">
+            <v-progress-circular indeterminate color="primary"></v-progress-circular>
+          </div>
+
+          <!-- 数据内容 -->
+          <div v-else>
+            <!-- 数据图表 -->
+            <div v-if="chartData" class="chart-container">
+              <v-chart class="chart" :option="chartOptions" autoresize />
+            </div>
+
+            <!-- 数据列表 -->
+            <v-list v-if="items.length" density="compact" class="py-0">
+              <v-list-item v-for="(item, index) in items" :key="index" :title="item.title" :subtitle="item.subtitle">
+                <template v-slot:prepend>
+                  <v-avatar :color="getStatusColor(item.status)" size="small">
+                    <v-icon size="small" color="white">{{ getStatusIcon(item.status) }}</v-icon>
+                  </v-avatar>
+                </template>
+                <template v-slot:append v-if="item.value">
+                  <span class="text-caption">{{ item.value }}</span>
+                </template>
+              </v-list-item>
+            </v-list>
+          </div>
+        </div>
+      </v-card-text>
+    </v-card>
+
+    <!-- 带边框的卡片 -->
+    <v-card v-else>
+      <v-card-item>
+        <v-card-title>{{ config?.attrs?.title || '仪表板组件' }}</v-card-title>
+        <v-card-subtitle v-if="config?.attrs?.subtitle">{{ config.attrs.subtitle }}</v-card-subtitle>
+      </v-card-item>
+
+      <v-card-text>
+        <!-- 加载中状态 -->
+        <div v-if="loading" class="d-flex justify-center align-center py-4">
+          <v-progress-circular indeterminate color="primary"></v-progress-circular>
+        </div>
+
+        <!-- 数据内容 -->
+        <div v-else>
+          <!-- 数据图表 -->
+          <div v-if="chartData" class="chart-container">
+            <v-chart class="chart" :option="chartOptions" autoresize />
+          </div>
+
+          <!-- 数据列表 -->
+          <v-list v-if="items.length" density="compact" class="rounded pa-0">
+            <v-list-item v-for="(item, index) in items" :key="index" :title="item.title" :subtitle="item.subtitle">
+              <template v-slot:prepend>
+                <v-avatar :color="getStatusColor(item.status)" size="small">
+                  <v-icon size="small" color="white">{{ getStatusIcon(item.status) }}</v-icon>
+                </v-avatar>
+              </template>
+              <template v-slot:append v-if="item.value">
+                <span class="text-caption">{{ item.value }}</span>
+              </template>
+            </v-list-item>
+          </v-list>
+        </div>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, PieChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
+
+// 注册ECharts组件
+try {
+  use([CanvasRenderer, LineChart, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
+} catch (e) {
+  console.warn('ECharts components registration failed', e)
+}
+
+// 接收仪表板配置
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+  allowRefresh: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+// 组件状态
+const loading = ref(true)
+const items = ref([])
+const chartData = ref(null)
+let refreshTimer = null
+
+// 获取状态图标
+function getStatusIcon(status) {
+  const icons = {
+    'success': 'mdi-check-circle',
+    'warning': 'mdi-alert',
+    'error': 'mdi-alert-circle',
+    'info': 'mdi-information',
+    'running': 'mdi-play-circle',
+    'pending': 'mdi-clock-outline',
+    'completed': 'mdi-check-circle-outline',
+  }
+  return icons[status] || 'mdi-help-circle'
+}
+
+// 获取状态颜色
+function getStatusColor(status) {
+  const colors = {
+    'success': 'success',
+    'warning': 'warning',
+    'error': 'error',
+    'info': 'info',
+    'running': 'primary',
+    'pending': 'secondary',
+    'completed': 'success',
+  }
+  return colors[status] || 'grey'
+}
+
+// 图表选项
+const chartOptions = computed(() => {
+  if (!chartData.value) return {}
+
+  const { type, data } = chartData.value
+
+  if (type === 'line') {
+    return {
+      tooltip: {
+        trigger: 'axis',
+      },
+      xAxis: {
+        type: 'category',
+        data: data.xAxis,
+        axisLabel: {
+          color: '#888',
+        },
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          color: '#888',
+        },
+      },
+      series: data.series.map(series => ({
+        name: series.name,
+        type: 'line',
+        smooth: true,
+        data: series.data,
+        areaStyle: { opacity: 0.1 },
+      })),
+    }
+  }
+
+  if (type === 'pie') {
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b}: {c} ({d}%)',
+      },
+      series: [
+        {
+          name: data.name,
+          type: 'pie',
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          label: {
+            show: false,
+            position: 'center',
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '12',
+              fontWeight: 'bold',
+            },
+          },
+          labelLine: {
+            show: false,
+          },
+          data: data.items,
+        },
+      ],
+    }
+  }
+
+  return {}
+})
+
+// 获取仪表板数据
+async function fetchDashboardData() {
+  if (!props.allowRefresh) return
+
+  loading.value = true
+
+  try {
+    // 模拟API调用
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    // 随机决定显示饼图或折线图
+    const showPie = Math.random() > 0.5
+
+    if (showPie) {
+      // 饼图数据
+      chartData.value = {
+        type: 'pie',
+        data: {
+          name: '文件分布',
+          items: [
+            { value: Math.floor(Math.random() * 50) + 30, name: '电影' },
+            { value: Math.floor(Math.random() * 40) + 20, name: '电视剧' },
+            { value: Math.floor(Math.random() * 30) + 10, name: '动漫' },
+            { value: Math.floor(Math.random() * 20) + 5, name: '纪录片' },
+          ],
+        },
+      }
+    } else {
+      // 折线图数据
+      const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+      chartData.value = {
+        type: 'line',
+        data: {
+          xAxis: days,
+          series: [
+            {
+              name: '下载量',
+              data: days.map(() => Math.floor(Math.random() * 10) + 1),
+            },
+            {
+              name: '完成量',
+              data: days.map(() => Math.floor(Math.random() * 8) + 1),
+            },
+          ],
+        },
+      }
+    }
+
+    // 生成列表数据
+    const statuses = ['success', 'warning', 'error', 'info', 'running', 'pending', 'completed']
+    items.value = Array.from({ length: 5 }, (_, i) => {
+      const status = statuses[Math.floor(Math.random() * statuses.length)]
+      return {
+        title: `项目 ${i + 1}`,
+        subtitle: `上次更新: ${new Date().toLocaleTimeString()}`,
+        status,
+        value: Math.floor(Math.random() * 100) + '%',
+      }
+    })
+  } catch (error) {
+    console.error('获取仪表板数据失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 设置定时刷新
+function setupRefreshTimer() {
+  if (props.allowRefresh) {
+    // 每30秒刷新一次
+    refreshTimer = setInterval(() => {
+      fetchDashboardData()
+    }, 30000)
+  }
+}
+
+// 初始化
+onMounted(() => {
+  fetchDashboardData()
+  setupRefreshTimer()
+})
+
+// 清理
+onUnmounted(() => {
+  if (refreshTimer) {
+    clearInterval(refreshTimer)
+  }
+})
+</script>
+
+<style scoped>
+.dashboard-widget {
+  inline-size: 100%;
+}
+
+.chart-container {
+  block-size: 200px;
+  margin-block-end: 16px;
+}
+
+.chart {
+  block-size: 100%;
+  inline-size: 100%;
+}
+</style>
--- a/examples/plugin-component/src/components/Page.vue
+++ b/examples/plugin-component/src/components/Page.vue
@@ -0,0 +1,178 @@
+<template>
+  <div class="plugin-page">
+    <v-card>
+      <v-card-title>{{ title }}</v-card-title>
+      <v-card-text>
+        <v-alert v-if="error" type="error" class="mb-4">{{ error }}</v-alert>
+        <v-skeleton-loader v-if="loading" type="card"></v-skeleton-loader>
+        <div v-else>
+          <!-- 数据统计展示 -->
+          <v-row v-if="stats">
+            <v-col v-for="(value, key) in stats" :key="key" cols="12" sm="6" md="4">
+              <v-card variant="outlined" class="text-center">
+                <v-card-text>
+                  <div class="text-h4 font-weight-bold">{{ value }}</div>
+                  <div class="text-subtitle-1">{{ key }}</div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+
+          <!-- 最近记录展示 -->
+          <div v-if="recentItems && recentItems.length" class="mt-4">
+            <div class="text-h6 mb-2">最近记录</div>
+            <v-timeline density="compact">
+              <v-timeline-item
+                v-for="(item, index) in recentItems"
+                :key="index"
+                :dot-color="getItemColor(item.type)"
+                size="small"
+              >
+                <div class="d-flex align-center">
+                  <v-icon :color="getItemColor(item.type)" size="small" class="mr-2">
+                    {{ getItemIcon(item.type) }}
+                  </v-icon>
+                  <span class="font-weight-medium">{{ item.title }}</span>
+                </div>
+                <div class="text-caption text-secondary">{{ item.time }}</div>
+              </v-timeline-item>
+            </v-timeline>
+          </div>
+
+          <!-- 当前状态 -->
+          <div class="mt-4 text-subtitle-2">
+            <div>
+              <strong>状态:</strong>
+              <v-chip size="small" :color="status === 'running' ? 'success' : 'warning'">{{ status }}</v-chip>
+            </div>
+            <div><strong>最后更新:</strong> {{ lastUpdated }}</div>
+          </div>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" @click="refreshData" :loading="loading">
+          <v-icon left>mdi-refresh</v-icon>
+          刷新数据
+        </v-btn>
+        <v-btn color="primary" @click="notifySwitch">
+          <v-icon left>mdi-cog</v-icon>
+          配置
+        </v-btn>
+        <v-btn color="primary" @click="notifyClose">
+          <v-icon left>mdi-close</v-icon>
+          关闭
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+// 接收初始配置
+const props = defineProps({
+  api: {
+    type: any,
+    default: () => {},
+  },
+})
+
+// 组件状态
+const title = ref('插件详情页面')
+const loading = ref(true)
+const error = ref(null)
+const stats = ref(null)
+const recentItems = ref([])
+const status = ref('running')
+const lastUpdated = ref('')
+
+// 自定义事件，用于通知主应用刷新数据
+const emit = defineEmits(['action', 'switch', 'close'])
+
+// 获取状态图标
+function getItemIcon(type) {
+  const icons = {
+    'movie': 'mdi-movie',
+    'tv': 'mdi-television-classic',
+    'download': 'mdi-download',
+    'error': 'mdi-alert-circle',
+    'success': 'mdi-check-circle',
+  }
+  return icons[type] || 'mdi-information'
+}
+
+// 获取状态颜色
+function getItemColor(type) {
+  const colors = {
+    'movie': 'blue',
+    'tv': 'green',
+    'download': 'purple',
+    'error': 'red',
+    'success': 'success',
+  }
+  return colors[type] || 'grey'
+}
+
+// 获取和刷新数据
+async function refreshData() {
+  loading.value = true
+  error.value = null
+
+  try {
+    // 模拟API调用 - 实际开发中应使用 fetch 调用真实API
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    // 模拟数据
+    stats.value = {
+      '电影': Math.floor(Math.random() * 100) + 50,
+      '电视剧': Math.floor(Math.random() * 100) + 30,
+      '动漫': Math.floor(Math.random() * 100) + 20,
+      '纪录片': Math.floor(Math.random() * 100) + 10,
+      '综艺': Math.floor(Math.random() * 100) + 5,
+    }
+
+    // 模拟最近记录
+    recentItems.value = [
+      { type: 'movie', title: '肖申克的救赎 (1994)', time: '今天 12:30' },
+      { type: 'tv', title: '绝命毒师 S01E01', time: '昨天 18:45' },
+      { type: 'download', title: '开始下载：星际穿越', time: '2天前' },
+      { type: 'success', title: '下载完成：黑客帝国', time: '3天前' },
+      { type: 'error', title: '下载失败：泰坦尼克号', time: '一周前' },
+    ]
+
+    status.value = Math.random() > 0.2 ? 'running' : 'paused'
+    lastUpdated.value = new Date().toLocaleString()
+  } catch (err) {
+    console.error('获取数据失败:', err)
+    error.value = err.message || '获取数据失败'
+  } finally {
+    loading.value = false
+    // 通知主应用组件已更新
+    emit('action')
+  }
+}
+
+// 通知主应用切换到配置页面
+function notifySwitch() {
+  emit('switch')
+}
+
+// 通知主应用关闭组件
+function notifyClose() {
+  emit('close')
+}
+
+// 组件挂载时加载数据
+onMounted(() => {
+  refreshData()
+})
+</script>
+
+<style scoped>
+.plugin-page {
+  padding: 16px;
+  inline-size: 100%;
+}
+</style>
--- a/examples/plugin-component/src/main.js
+++ b/examples/plugin-component/src/main.js
@@ -0,0 +1,24 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import 'vuetify/styles'
+
+// 创建Vuetify实例
+const vuetify = createVuetify({
+  components,
+  directives,
+  theme: {
+    defaultTheme: 'dark'
+  }
+})
+
+// 创建应用
+const app = createApp(App)
+
+// 使用插件
+app.use(vuetify)
+
+// 挂载应用
+app.mount('#app') 
--- a/examples/plugin-component/vite.config.js
+++ b/examples/plugin-component/vite.config.js
@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import federation from '@originjs/vite-plugin-federation'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    federation({
+      name: 'MyPlugin',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './Page': './src/components/Page.vue',
+        './Config': './src/components/Config.vue',
+        './Dashboard': './src/components/Dashboard.vue',
+      },
+      shared: ['vue', 'vuetify'],
+      format: 'esm'
+    })
+  ],
+  build: {
+    target: 'esnext',   // 必须设置为esnext以支持顶层await
+    minify: false,      // 开发阶段建议关闭混淆
+    cssCodeSplit: false,
+  },
+  server: {
+    port: 5001,   // 使用不同于主应用的端口
+    cors: true,   // 启用CORS
+    origin: 'http://localhost:5001'
+  },
+}) 
--- a/examples/plugin-component/yarn.lock
+++ b/examples/plugin-component/yarn.lock
@@ -0,0 +1,566 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/helper-string-parser@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687"
+  integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
+
+"@babel/helper-validator-identifier@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
+  integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
+
+"@babel/parser@^7.25.3":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.27.1.tgz#c55d5bed74449d1223701f1869b9ee345cc94cc9"
+  integrity sha512-I0dZ3ZpCrJ1c04OqlNsQcKiZlsrXf/kkE4FXzID9rIOYICsAbA8mMDzhW/luRNAHdCNt7os/u8wenklZDlUVUQ==
+  dependencies:
+    "@babel/types" "^7.27.1"
+
+"@babel/types@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.27.1.tgz#9defc53c16fc899e46941fc6901a9eea1c9d8560"
+  integrity sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.27.1"
+
+"@esbuild/aix-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
+  integrity sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==
+
+"@esbuild/android-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz#09d9b4357780da9ea3a7dfb833a1f1ff439b4052"
+  integrity sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==
+
+"@esbuild/android-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz#9b04384fb771926dfa6d7ad04324ecb2ab9b2e28"
+  integrity sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==
+
+"@esbuild/android-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz#29918ec2db754cedcb6c1b04de8cd6547af6461e"
+  integrity sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==
+
+"@esbuild/darwin-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz#e495b539660e51690f3928af50a76fb0a6ccff2a"
+  integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==
+
+"@esbuild/darwin-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz#c13838fa57372839abdddc91d71542ceea2e1e22"
+  integrity sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==
+
+"@esbuild/freebsd-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz#646b989aa20bf89fd071dd5dbfad69a3542e550e"
+  integrity sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==
+
+"@esbuild/freebsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz#aa615cfc80af954d3458906e38ca22c18cf5c261"
+  integrity sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==
+
+"@esbuild/linux-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz#70ac6fa14f5cb7e1f7f887bcffb680ad09922b5b"
+  integrity sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==
+
+"@esbuild/linux-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz#fc6fd11a8aca56c1f6f3894f2bea0479f8f626b9"
+  integrity sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==
+
+"@esbuild/linux-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz#3271f53b3f93e3d093d518d1649d6d68d346ede2"
+  integrity sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==
+
+"@esbuild/linux-loong64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz#ed62e04238c57026aea831c5a130b73c0f9f26df"
+  integrity sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==
+
+"@esbuild/linux-mips64el@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz#e79b8eb48bf3b106fadec1ac8240fb97b4e64cbe"
+  integrity sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==
+
+"@esbuild/linux-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz#5f2203860a143b9919d383ef7573521fb154c3e4"
+  integrity sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==
+
+"@esbuild/linux-riscv64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz#07bcafd99322d5af62f618cb9e6a9b7f4bb825dc"
+  integrity sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==
+
+"@esbuild/linux-s390x@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz#b7ccf686751d6a3e44b8627ababc8be3ef62d8de"
+  integrity sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==
+
+"@esbuild/linux-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz#6d8f0c768e070e64309af8004bb94e68ab2bb3b0"
+  integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==
+
+"@esbuild/netbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz#bbe430f60d378ecb88decb219c602667387a6047"
+  integrity sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==
+
+"@esbuild/openbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz#99d1cf2937279560d2104821f5ccce220cb2af70"
+  integrity sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==
+
+"@esbuild/sunos-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz#08741512c10d529566baba837b4fe052c8f3487b"
+  integrity sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==
+
+"@esbuild/win32-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz#675b7385398411240735016144ab2e99a60fc75d"
+  integrity sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==
+
+"@esbuild/win32-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz#1bfc3ce98aa6ca9a0969e4d2af72144c59c1193b"
+  integrity sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==
+
+"@esbuild/win32-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
+  integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
+
+"@jridgewell/sourcemap-codec@^1.4.13", "@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@originjs/vite-plugin-federation@^1.3.5":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@originjs/vite-plugin-federation/-/vite-plugin-federation-1.4.1.tgz#e6abc8f18f2cf82783eb87853f4d03e6358b43c2"
+  integrity sha512-Uo08jW5pj1t58OUKuZNkmzcfTN2pqeVuAWCCiKf/75/oll4Efq4cHOqSE1FXMlvwZNGDziNdDyBbQ5IANem3CQ==
+  dependencies:
+    estree-walker "^3.0.2"
+    magic-string "^0.27.0"
+
+"@rollup/rollup-android-arm-eabi@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.2.tgz#c228d00a41f0dbd6fb8b7ea819bbfbf1c1157a10"
+  integrity sha512-JkdNEq+DFxZfUwxvB58tHMHBHVgX23ew41g1OQinthJ+ryhdRk67O31S7sYw8u2lTjHUPFxwar07BBt1KHp/hg==
+
+"@rollup/rollup-android-arm64@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.2.tgz#e2b38d0c912169fd55d7e38d723aada208d37256"
+  integrity sha512-13unNoZ8NzUmnndhPTkWPWbX3vtHodYmy+I9kuLxN+F+l+x3LdVF7UCu8TWVMt1POHLh6oDHhnOA04n8oJZhBw==
+
+"@rollup/rollup-darwin-arm64@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.2.tgz#1fddb3690f2ae33df16d334c613377f05abe4878"
+  integrity sha512-Gzf1Hn2Aoe8VZzevHostPX23U7N5+4D36WJNHK88NZHCJr7aVMG4fadqkIf72eqVPGjGc0HJHNuUaUcxiR+N/w==
+
+"@rollup/rollup-darwin-x64@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.2.tgz#818298d11c8109e1112590165142f14be24b396d"
+  integrity sha512-47N4hxa01a4x6XnJoskMKTS8XZ0CZMd8YTbINbi+w03A2w4j1RTlnGHOz/P0+Bg1LaVL6ufZyNprSg+fW5nYQQ==
+
+"@rollup/rollup-freebsd-arm64@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.2.tgz#91a28dc527d5bed7f9ecf0e054297b3012e19618"
+  integrity sha512-8t6aL4MD+rXSHHZUR1z19+9OFJ2rl1wGKvckN47XFRVO+QL/dUSpKA2SLRo4vMg7ELA8pzGpC+W9OEd1Z/ZqoQ==
+
+"@rollup/rollup-freebsd-x64@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.2.tgz#28acadefa76b5c7bede1576e065b51d335c62c62"
+  integrity sha512-C+AyHBzfpsOEYRFjztcYUFsH4S7UsE9cDtHCtma5BK8+ydOZYgMmWg1d/4KBytQspJCld8ZIujFMAdKG1xyr4Q==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.2.tgz#819691464179cbcd9a9f9d3dc7617954840c6186"
+  integrity sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q==
+
+"@rollup/rollup-linux-arm-musleabihf@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.2.tgz#d149207039e4189e267e8724050388effc80d704"
+  integrity sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg==
+
+"@rollup/rollup-linux-arm64-gnu@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.2.tgz#fa72ebddb729c3c6d88973242f1a2153c83e86ec"
+  integrity sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg==
+
+"@rollup/rollup-linux-arm64-musl@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.2.tgz#2054216e34469ab8765588ebf343d531fc3c9228"
+  integrity sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg==
+
+"@rollup/rollup-linux-loongarch64-gnu@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.2.tgz#818de242291841afbfc483a84f11e9c7a11959bc"
+  integrity sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.2.tgz#0bb4cb8fc4a2c635f68c1208c924b2145eb647cb"
+  integrity sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q==
+
+"@rollup/rollup-linux-riscv64-gnu@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.2.tgz#4b3b8e541b7b13e447ae07774217d98c06f6926d"
+  integrity sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg==
+
+"@rollup/rollup-linux-riscv64-musl@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.2.tgz#e065405e67d8bd64a7d0126c931bd9f03910817f"
+  integrity sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg==
+
+"@rollup/rollup-linux-s390x-gnu@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.2.tgz#dda3265bbbfe16a5d0089168fd07f5ebb2a866fe"
+  integrity sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ==
+
+"@rollup/rollup-linux-x64-gnu@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.2.tgz#90993269b8b995b4067b7b9d72ff1c360ef90a17"
+  integrity sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng==
+
+"@rollup/rollup-linux-x64-musl@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.2.tgz#fdf5b09fd121eb8d977ebb0fda142c7c0167b8de"
+  integrity sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA==
+
+"@rollup/rollup-win32-arm64-msvc@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.2.tgz#6397e1e012db64dfecfed0774cb9fcf89503d716"
+  integrity sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg==
+
+"@rollup/rollup-win32-ia32-msvc@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.2.tgz#df0991464a52a35506103fe18d29913bf8798a0c"
+  integrity sha512-dt1llVSGEsGKvzeIO76HToiYPNPYPkmjhMHhP00T9S4rDern8P2ZWvWAQUEJ+R1UdMWJ/42i/QqJ2WV765GZcA==
+
+"@rollup/rollup-win32-x64-msvc@4.40.2":
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.2.tgz#8dae04d01a2cbd84d6297d99356674c6b993f0fc"
+  integrity sha512-bwspbWB04XJpeElvsp+DCylKfF4trJDa2Y9Go8O6A7YLX2LIKGcNK/CYImJN6ZP4DcuOHB4Utl3iCbnR62DudA==
+
+"@types/estree@1.0.7", "@types/estree@^1.0.0":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.7.tgz#4158d3105276773d5b7695cd4834b1722e4f37a8"
+  integrity sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==
+
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
+
+"@vitejs/plugin-vue@^4.4.0":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz#057d2ded94c4e71b94e9814f92dcd9306317aa46"
+  integrity sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==
+
+"@vue/compiler-core@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.13.tgz#b0ae6c4347f60c03e849a05d34e5bf747c9bda05"
+  integrity sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==
+  dependencies:
+    "@babel/parser" "^7.25.3"
+    "@vue/shared" "3.5.13"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.0"
+
+"@vue/compiler-dom@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz#bb1b8758dbc542b3658dda973b98a1c9311a8a58"
+  integrity sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==
+  dependencies:
+    "@vue/compiler-core" "3.5.13"
+    "@vue/shared" "3.5.13"
+
+"@vue/compiler-sfc@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz#461f8bd343b5c06fac4189c4fef8af32dea82b46"
+  integrity sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==
+  dependencies:
+    "@babel/parser" "^7.25.3"
+    "@vue/compiler-core" "3.5.13"
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/compiler-ssr" "3.5.13"
+    "@vue/shared" "3.5.13"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.11"
+    postcss "^8.4.48"
+    source-map-js "^1.2.0"
+
+"@vue/compiler-ssr@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz#e771adcca6d3d000f91a4277c972a996d07f43ba"
+  integrity sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==
+  dependencies:
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/shared" "3.5.13"
+
+"@vue/reactivity@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.13.tgz#b41ff2bb865e093899a22219f5b25f97b6fe155f"
+  integrity sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==
+  dependencies:
+    "@vue/shared" "3.5.13"
+
+"@vue/runtime-core@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.13.tgz#1fafa4bf0b97af0ebdd9dbfe98cd630da363a455"
+  integrity sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==
+  dependencies:
+    "@vue/reactivity" "3.5.13"
+    "@vue/shared" "3.5.13"
+
+"@vue/runtime-dom@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz#610fc795de9246300e8ae8865930d534e1246215"
+  integrity sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==
+  dependencies:
+    "@vue/reactivity" "3.5.13"
+    "@vue/runtime-core" "3.5.13"
+    "@vue/shared" "3.5.13"
+    csstype "^3.1.3"
+
+"@vue/server-renderer@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.13.tgz#429ead62ee51de789646c22efe908e489aad46f7"
+  integrity sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==
+  dependencies:
+    "@vue/compiler-ssr" "3.5.13"
+    "@vue/shared" "3.5.13"
+
+"@vue/shared@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.13.tgz#87b309a6379c22b926e696893237826f64339b6f"
+  integrity sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==
+
+"@vueuse/core@^10.6.0":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.11.1.tgz#15d2c0b6448d2212235b23a7ba29c27173e0c2c6"
+  integrity sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.11.1"
+    "@vueuse/shared" "10.11.1"
+    vue-demi ">=0.14.8"
+
+"@vueuse/metadata@10.11.1":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.11.1.tgz#209db7bb5915aa172a87510b6de2ca01cadbd2a7"
+  integrity sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==
+
+"@vueuse/shared@10.11.1":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.11.1.tgz#62b84e3118ae6e1f3ff38f4fbe71b0c5d0f10938"
+  integrity sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==
+  dependencies:
+    vue-demi ">=0.14.8"
+
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+echarts@^5.4.3:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
+  integrity sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.6.1"
+
+entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
+esbuild@^0.21.3:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
+  integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
+  optionalDependencies:
+    "@esbuild/aix-ppc64" "0.21.5"
+    "@esbuild/android-arm" "0.21.5"
+    "@esbuild/android-arm64" "0.21.5"
+    "@esbuild/android-x64" "0.21.5"
+    "@esbuild/darwin-arm64" "0.21.5"
+    "@esbuild/darwin-x64" "0.21.5"
+    "@esbuild/freebsd-arm64" "0.21.5"
+    "@esbuild/freebsd-x64" "0.21.5"
+    "@esbuild/linux-arm" "0.21.5"
+    "@esbuild/linux-arm64" "0.21.5"
+    "@esbuild/linux-ia32" "0.21.5"
+    "@esbuild/linux-loong64" "0.21.5"
+    "@esbuild/linux-mips64el" "0.21.5"
+    "@esbuild/linux-ppc64" "0.21.5"
+    "@esbuild/linux-riscv64" "0.21.5"
+    "@esbuild/linux-s390x" "0.21.5"
+    "@esbuild/linux-x64" "0.21.5"
+    "@esbuild/netbsd-x64" "0.21.5"
+    "@esbuild/openbsd-x64" "0.21.5"
+    "@esbuild/sunos-x64" "0.21.5"
+    "@esbuild/win32-arm64" "0.21.5"
+    "@esbuild/win32-ia32" "0.21.5"
+    "@esbuild/win32-x64" "0.21.5"
+
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+estree-walker@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
+  integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+
+fsevents@~2.3.2, fsevents@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+magic-string@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
+  integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
+magic-string@^0.30.11:
+  version "0.30.17"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
+  integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+
+nanoid@^3.3.8:
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
+  integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
+
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+postcss@^8.4.43, postcss@^8.4.48:
+  version "8.5.3"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.3.tgz#1463b6f1c7fb16fe258736cba29a2de35237eafb"
+  integrity sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==
+  dependencies:
+    nanoid "^3.3.8"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+resize-detector@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/resize-detector/-/resize-detector-0.3.0.tgz#fe495112e184695500a8f51e0389f15774cb1cfc"
+  integrity sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==
+
+rollup@^4.20.0:
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.40.2.tgz#778e88b7a197542682b3e318581f7697f55f0619"
+  integrity sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg==
+  dependencies:
+    "@types/estree" "1.0.7"
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.40.2"
+    "@rollup/rollup-android-arm64" "4.40.2"
+    "@rollup/rollup-darwin-arm64" "4.40.2"
+    "@rollup/rollup-darwin-x64" "4.40.2"
+    "@rollup/rollup-freebsd-arm64" "4.40.2"
+    "@rollup/rollup-freebsd-x64" "4.40.2"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.40.2"
+    "@rollup/rollup-linux-arm-musleabihf" "4.40.2"
+    "@rollup/rollup-linux-arm64-gnu" "4.40.2"
+    "@rollup/rollup-linux-arm64-musl" "4.40.2"
+    "@rollup/rollup-linux-loongarch64-gnu" "4.40.2"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.40.2"
+    "@rollup/rollup-linux-riscv64-gnu" "4.40.2"
+    "@rollup/rollup-linux-riscv64-musl" "4.40.2"
+    "@rollup/rollup-linux-s390x-gnu" "4.40.2"
+    "@rollup/rollup-linux-x64-gnu" "4.40.2"
+    "@rollup/rollup-linux-x64-musl" "4.40.2"
+    "@rollup/rollup-win32-arm64-msvc" "4.40.2"
+    "@rollup/rollup-win32-ia32-msvc" "4.40.2"
+    "@rollup/rollup-win32-x64-msvc" "4.40.2"
+    fsevents "~2.3.2"
+
+source-map-js@^1.2.0, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
+vite@^5.0.0:
+  version "5.4.19"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.19.tgz#20efd060410044b3ed555049418a5e7d1998f959"
+  integrity sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==
+  dependencies:
+    esbuild "^0.21.3"
+    postcss "^8.4.43"
+    rollup "^4.20.0"
+  optionalDependencies:
+    fsevents "~2.3.3"
+
+vue-demi@>=0.14.8:
+  version "0.14.10"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
+  integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
+
+vue-demi@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
+vue-echarts@^6.6.1:
+  version "6.7.3"
+  resolved "https://registry.yarnpkg.com/vue-echarts/-/vue-echarts-6.7.3.tgz#30efafc51a4a9de1b8117d3b63e74b0c761ff3ba"
+  integrity sha512-vXLKpALFjbPphW9IfQPOVfb1KjGZ/f8qa/FZHi9lZIWzAnQC1DgnmEK3pJgEkyo6EP7UnX6Bv/V3Ke7p+qCNXA==
+  dependencies:
+    resize-detector "^0.3.0"
+    vue-demi "^0.13.11"
+
+vue@^3.3.4:
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.13.tgz#9f760a1a982b09c0c04a867903fc339c9f29ec0a"
+  integrity sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==
+  dependencies:
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/compiler-sfc" "3.5.13"
+    "@vue/runtime-dom" "3.5.13"
+    "@vue/server-renderer" "3.5.13"
+    "@vue/shared" "3.5.13"
+
+vuetify@^3.4.0:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.8.3.tgz#6bee55aefdf0b3789f6a2e53058c88c63b54db44"
+  integrity sha512-hzlYRGY6O+GB2R2Ujg1HBtHjVAgJc3NkeymZl1IahZ+0vEyV0qLCFvTqYhXziB04O5roidBe6sca9TED7VYA/A==
+
+zrender@5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"
+  integrity sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==
+  dependencies:
+    tslib "2.3.0"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "moviepilot",
-  "version": "2.4.3",
+  "version": "2.4.4",
  "private": true,
  "type": "module",
  "bin": "dist/service.js",
@@ -70,6 +70,7 @@
    "@iconify/tools": "^4.0.4",
    "@iconify/vue": "^4.3.0",
    "@intlify/unplugin-vue-i18n": "^6.0.3",
+    "@originjs/vite-plugin-federation": "^1.4.1",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@types/lodash-es": "^4.17.12",
    "@types/mousetrap": "^1.6.15",
--- a/src/@validators/index.ts
+++ b/src/@validators/index.ts
@@ -1,7 +1,11 @@
 import type { ValidationRule } from 'vuetify/types/services/validation'

 // 必输校验
-export const requiredValidator: ValidationRule = (value: any) => !!value || '此项为必填项'
+export const requiredValidator: ValidationRule = (value: any) => {
+  return !!value
+}

 // 数字校验
-export const numberValidator: ValidationRule = (value: any) => !isNaN(value) || '请输入数字'
+export const numberValidator: ValidationRule = (value: any) => {
+  return !isNaN(value)
+}
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -1,39 +1,79 @@
 import i18n from '@/plugins/i18n'

-export const storageOptions = [
+export const storageAttributes = [
  {
-    title: i18n.global.t('storage.local'),
-    value: 'local',
+    type: 'local',
    icon: 'mdi-folder-multiple-outline',
    remote: false,
  },
  {
-    title: i18n.global.t('storage.alipan'),
-    value: 'alipan',
+    type: 'alipan',
    icon: 'mdi-cloud-outline',
    remote: true,
  },
  {
-    title: i18n.global.t('storage.u115'),
-    value: 'u115',
+    type: 'u115',
    icon: 'mdi-cloud-outline',
    remote: true,
  },
  {
-    title: i18n.global.t('storage.rclone'),
-    value: 'rclone',
+    type: 'rclone',
    icon: 'mdi-server-network-outline',
    remote: true,
  },
  {
-    title: i18n.global.t('storage.alist'),
-    value: 'alist',
+    type: 'alist',
    icon: 'mdi-server-network-outline',
    remote: true,
  },
 ]

-export const storageDict = storageOptions.reduce((dict, item) => {
+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 downloaderOptions = [
+  {
+    value: 'qbittorrent',
+    title: i18n.global.t('setting.system.qbittorrent'),
+  },
+  {
+    value: 'transmission',
+    title: i18n.global.t('setting.system.transmission'),
+  },
+]
+
+export const downloaderDict = downloaderOptions.reduce((dict, item) => {
+  dict[item.value] = item.title
+  return dict
+}, {} as Record<string, string>)
+
+export const mediaServerOptions = [
+  {
+    value: 'emby',
+    title: i18n.global.t('setting.system.emby'),
+  },
+  {
+    value: 'jellyfin',
+    title: i18n.global.t('setting.system.jellyfin'),
+  },
+  {
+    value: 'plex',
+    title: i18n.global.t('setting.system.plex'),
+  },
+  {
+    value: 'trimemedia',
+    title: i18n.global.t('setting.system.trimeMedia'),
+  },
+]
+
+export const mediaServerDict = mediaServerOptions.reduce((dict, item) => {
  dict[item.value] = item.title
  return dict
 }, {} as Record<string, string>)
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -7,6 +7,16 @@ const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
 })

+// 声明全局变量类型
+declare global {
+  interface Window {
+    MoviePilotAPI: typeof api
+  }
+}
+
+// 将 API 实例暴露到全局，供插件使用
+window.MoviePilotAPI = api
+
 // 添加请求拦截器
 api.interceptors.request.use(config => {
  // 认证 Store
@@ -41,17 +51,3 @@ api.interceptors.response.use(
 )

 export default api
-
-export async function fetchGlobalSettings() {
-  try {
-    const result: { [key: string]: any } = await api.get('system/global', {
-      params: {
-        token: 'moviepilot',
-      },
-    })
-    return result.data || {}
-  } catch (error) {
-    console.error('Failed to fetch global settings', error)
-    throw error
-  }
-}
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -631,6 +631,10 @@ export interface DashboardItem {
  cols: { [key: string]: number }
  // 页面元素
  elements: RenderProps[]
+  // 渲染方式
+  render_mode: string
+  // 组件地址
+  component_url: string
 }

 // 种子信息
--- a/src/assets/images/logos/downloader.png
+++ b/src/assets/images/logos/downloader.png
--- a/src/assets/images/logos/mediaserver.png
+++ b/src/assets/images/logos/mediaserver.png
--- a/src/assets/images/misc/database.png
+++ b/src/assets/images/misc/database.png
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -3,12 +3,8 @@ import FileList from './filebrowser/FileList.vue'
 import FileToolbar from './filebrowser/FileToolbar.vue'
 import FileNavigator from './filebrowser/FileNavigator.vue'
 import type { EndPoints, FileItem, StorageConf } from '@/api/types'
-import { storageOptions } from '@/api/constants'
 import { useDisplay } from 'vuetify'
-import { useI18n } from 'vue-i18n'
-
-// 国际化
-const { t } = useI18n()
+import { storageIconDict } from '@/api/constants'

 // 输入参数
 const props = defineProps({
@@ -142,8 +138,11 @@ const showDirTree = ref(false)

 // 计算属性
 const storagesArray = computed(() => {
-  const storageCodes = props.storages?.map(item => item.type)
-  return storageOptions.filter(item => storageCodes?.includes(item.value))
+  return props.storages?.map(item => ({
+    title: item.name,
+    value: item.type,
+    icon: storageIconDict[item.type] ?? 'mdi-server-network-outline',
+  }))
 })

 // 方法
--- a/src/components/cards/BackdropCard.vue
+++ b/src/components/cards/BackdropCard.vue
@@ -28,7 +28,7 @@ const getImgUrl = computed(() => {
 </script>

 <template>
-  <VHover v-bind="props">
+  <VHover>
    <template #default="hover">
      <VCard
        v-bind="hover.props"
--- a/src/components/cards/DirectoryCard.vue
+++ b/src/components/cards/DirectoryCard.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { TransferDirectoryConf } from '@/api/types'
+import type { StorageConf, TransferDirectoryConf } from '@/api/types'
 import api from '@/api'
 import { nextTick } from 'vue'
-import { storageOptions } from '@/api/constants'
 import { useI18n } from 'vue-i18n'
+import { storageRemoteDict } from '@/api/constants'

 // 国际化
 const { t } = useI18n()
@@ -19,6 +19,10 @@ const props = defineProps({
    type: Object as PropType<{ [key: string]: any }>,
    required: true,
  },
+  storages: {
+    type: Array as PropType<StorageConf[]>,
+    required: true,
+  },
  width: String,
  height: String,
 })
@@ -29,13 +33,26 @@ const isCollapsed = ref(true)
 // 类型下拉字典
 const typeItems = computed(() => [
  { title: t('common.all'), value: '' },
-  { title: t('media.movie'), value: '电影' },
-  { title: t('media.tv'), value: '电视剧' },
+  { title: t('mediaType.movie'), value: '电影' },
+  { title: t('mediaType.tv'), value: '电视剧' },
 ])

 // 计算资源存储字典（整理方式为下载器时不能为远程存储）
 const resourceStorageOptions = computed(() => {
-  return storageOptions.filter(item => !item.remote || props.directory.monitor_type !== 'downloader')
+  return props.storages
+    .filter(item => !storageRemoteDict[item.type] || props.directory.monitor_type !== 'downloader')
+    .map(item => ({
+      title: item.name,
+      value: item.type,
+    }))
+})
+
+// 存储字典
+const libraryStorageOptions = computed(() => {
+  return props.storages.map(item => ({
+    title: item.name,
+    value: item.type,
+  }))
 })

 // 自动整理方式下拉字典
@@ -263,7 +280,7 @@ watch(
            <VSelect
              v-model="props.directory.library_storage"
              variant="underlined"
-              :items="storageOptions"
+              :items="libraryStorageOptions"
              :label="t('directory.libraryStorage')"
            />
          </VCol>
--- a/src/components/cards/DownloaderCard.vue
+++ b/src/components/cards/DownloaderCard.vue
@@ -6,8 +6,10 @@ import { useToast } from 'vue-toast-notification'
 import type { DownloaderInfo } from '@/api/types'
 import qbittorrent_image from '@images/logos/qbittorrent.png'
 import transmission_image from '@images/logos/transmission.png'
+import custom_image from '@images/logos/downloader.png'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
+import { downloaderDict } from '@/api/constants'

 // 获取i18n实例
 const { t } = useI18n()
@@ -126,7 +128,7 @@ const getIcon = computed(() => {
    case 'transmission':
      return transmission_image
    default:
-      return qbittorrent_image
+      return custom_image
  }
 })

@@ -172,10 +174,13 @@ onUnmounted(() => {
              />
              <span class="text-h6">{{ downloader.name }}</span>
            </div>
-            <div class="mt-1 flex flex-wrap text-sm" v-if="props.downloader.enabled">
+            <div v-if="downloaderDict[downloader.type] && props.downloader.enabled" class="mt-1 flex flex-wrap text-sm">
              <span class="me-2">{{ `↑ ${formatFileSize(upload_rate, 1)}/s ` }}</span>
              <span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
            </div>
+            <div v-else-if="!downloaderDict[downloader.type]" class="mt-1 flex flex-wrap text-sm">
+              <span class="me-2">自定义下载器</span>
+            </div>
          </div>
          <div class="h-20">
            <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
@@ -183,8 +188,8 @@ onUnmounted(() => {
        </VCardText>
      </VCard>
    </VHover>
-    <VDialog v-if="downloaderInfoDialog" v-model="downloaderInfoDialog" scrollable max-width="40rem" persistent>
-      <VCard :title="`${props.downloader.name} - ${t('downloader.title')}`" class="rounded-t">
+    <VDialog v-if="downloaderInfoDialog" v-model="downloaderInfoDialog" scrollable max-width="40rem">
+      <VCard :title="`${props.downloader.name} - ${t('downloader.title')}`">
        <VDialogCloseBtn v-model="downloaderInfoDialog" />
        <VDivider />
        <VCardText>
@@ -278,7 +283,7 @@ onUnmounted(() => {
                />
              </VCol>
            </VRow>
-            <VRow v-if="downloaderInfo.type == 'transmission'">
+            <VRow v-else-if="downloaderInfo.type == 'transmission'">
              <VCol cols="12" md="6">
                <VTextField
                  v-model="downloaderInfo.name"
@@ -319,6 +324,26 @@ onUnmounted(() => {
                />
              </VCol>
            </VRow>
+            <VRow v-else>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.type"
+                  :label="t('downloader.type')"
+                  :hint="t('downloader.customTypeHint')"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.name"
+                  :label="t('downloader.name')"
+                  :hint="t('downloader.nameRequired')"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+            </VRow>
          </VForm>
        </VCardText>
        <VCardActions class="pt-3">
--- a/src/components/cards/LibraryCard.vue
+++ b/src/components/cards/LibraryCard.vue
@@ -151,7 +151,7 @@ onMounted(async () => {
 </script>

 <template>
-  <VHover v-bind="props" :height="props.height" :width="props.width">
+  <VHover>
    <template #default="hover">
      <VCard
        v-bind="hover.props"
--- a/src/components/cards/MediaServerCard.vue
+++ b/src/components/cards/MediaServerCard.vue
@@ -5,9 +5,11 @@ import emby_image from '@images/logos/emby.png'
 import jellyfin_image from '@images/logos/jellyfin.png'
 import plex_image from '@images/logos/plex.png'
 import trimemedia_image from '@images/logos/trimemedia.png'
+import custom_image from '@images/logos/mediaserver.png'
 import api from '@/api'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
+import { mediaServerDict } from '@/api/constants'

 // 获取i18n实例
 const { t } = useI18n()
@@ -108,8 +110,10 @@ const getIcon = computed(() => {
      return jellyfin_image
    case 'trimemedia':
      return trimemedia_image
-    default:
+    case 'plex':
      return plex_image
+    default:
+      return custom_image
  }
 })

@@ -183,11 +187,14 @@ onMounted(() => {
      <VCardText class="flex justify-space-between align-center gap-3">
        <div class="align-self-start flex-1">
          <div class="text-h6 mb-1">{{ mediaserver.name }}</div>
-          <div class="text-sm mt-5 flex flex-wrap">
+          <div v-if="mediaServerDict[mediaserver.type] && mediaserver.enabled" class="text-sm mt-5 flex flex-wrap">
            <span v-for="item in infoItems" :key="item.title" class="me-2 mb-1">
              <VIcon rounded :icon="item.avatar" class="me-1" />{{ item.amount }}
            </span>
          </div>
+          <div v-else-if="!mediaServerDict[mediaserver.type]" class="text-sm mt-5 flex flex-wrap">
+            <span class="me-2 mb-1">自定义媒体服务器</span>
+          </div>
        </div>
        <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
      </VCardText>
@@ -243,8 +250,23 @@ onMounted(() => {
                  active
                />
              </VCol>
+              <VCol cols="12">
+                <VSelect
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
            </VRow>
-            <VRow v-if="mediaServerInfo.type == 'jellyfin'">
+            <VRow v-else-if="mediaServerInfo.type == 'jellyfin'">
              <VCol cols="12" md="6">
                <VTextField
                  v-model="mediaServerInfo.name"
@@ -284,8 +306,23 @@ onMounted(() => {
                  active
                />
              </VCol>
+              <VCol cols="12">
+                <VSelect
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
            </VRow>
-            <VRow v-if="mediaServerInfo.type == 'trimemedia'">
+            <VRow v-else-if="mediaServerInfo.type == 'trimemedia'">
              <VCol cols="12" md="6">
                <VTextField
                  v-model="mediaServerInfo.name"
@@ -327,8 +364,23 @@ onMounted(() => {
                  active
                />
              </VCol>
+              <VCol cols="12">
+                <VSelect
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
            </VRow>
-            <VRow v-if="mediaServerInfo.type == 'plex'">
+            <VRow v-else-if="mediaServerInfo.type == 'plex'">
              <VCol cols="12" md="6">
                <VTextField
                  v-model="mediaServerInfo.name"
@@ -368,8 +420,21 @@ onMounted(() => {
                  active
                />
              </VCol>
-            </VRow>
-            <VRow>
+              <VCol cols="12">
+                <VSelect
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
              <VCol cols="12">
                <VSelect
                  v-model="mediaServerInfo.sync_libraries"
@@ -386,6 +451,19 @@ onMounted(() => {
                />
              </VCol>
            </VRow>
+            <VRow v-else>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.type"
+                  :label="t('mediaserver.type')"
+                  :hint="t('mediaserver.customTypeHint')"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField :label="t('common.name')" :hint="t('mediaserver.nameRequired')" persistent-hint />
+              </VCol>
+            </VRow>
          </VForm>
        </VCardText>
        <VCardActions class="pt-3">
--- a/src/components/cards/PosterCard.vue
+++ b/src/components/cards/PosterCard.vue
@@ -37,7 +37,7 @@ function goPlay(isHovering: boolean | null = false) {
 </script>

 <template>
-  <VHover v-bind="props">
+  <VHover>
    <template #default="hover">
      <VCard
        v-bind="hover.props"
--- a/src/components/cards/StorageCard.vue
+++ b/src/components/cards/StorageCard.vue
@@ -6,6 +6,7 @@ import alipan_png from '@images/misc/alipan.webp'
 import u115_png from '@images/misc/u115.png'
 import rclone_png from '@images/misc/rclone.png'
 import alist_png from '@images/misc/alist.svg'
+import custom_png from '@images/misc/database.png'
 import api from '@/api'
 import AliyunAuthDialog from '../dialog/AliyunAuthDialog.vue'
 import U115AuthDialog from '../dialog/U115AuthDialog.vue'
@@ -14,7 +15,7 @@ import AlistConfigDialog from '../dialog/AlistConfigDialog.vue'
 import { useToast } from 'vue-toast-notification'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { useI18n } from 'vue-i18n'
-import { storageOptions } from '@/api/constants'
+import { storageIconDict } from '@/api/constants'

 // 国际化
 const { t } = useI18n()
@@ -28,7 +29,7 @@ const props = defineProps({
 })

 // 定义事件
-const emit = defineEmits(['done'])
+const emit = defineEmits(['done', 'close'])

 // 提示信息
 const $toast = useToast()
@@ -44,6 +45,15 @@ const used = computed(() => {
  return total.value - available.value
 })

+// 存储
+const storage_ref = ref(props.storage)
+
+// 自定义存储名称
+const customName = ref(props.storage.name)
+
+// 自定义存储类型
+const storageType = ref(props.storage.type)
+
 // 阿里云盘认证对话框
 const aliyunAuthDialog = ref(false)
 // 115网盘认证对话框
@@ -52,6 +62,8 @@ const u115AuthDialog = ref(false)
 const rcloneConfigDialog = ref(false)
 // AList配置对话框
 const aListConfigDialog = ref(false)
+// 自定义存储配置对话框
+const customConfigDialog = ref(false)

 // 打开存储对话框
 function openStorageDialog() {
@@ -68,9 +80,12 @@ function openStorageDialog() {
    case 'alist':
      aListConfigDialog.value = true
      break
-    default:
+    case 'local':
      $toast.info(t('storage.noConfigNeeded'))
      break
+    default:
+      customConfigDialog.value = true
+      break
  }
 }

@@ -88,7 +103,7 @@ const getIcon = computed(() => {
    case 'alist':
      return alist_png
    default:
-      return storage_png
+      return custom_png
  }
 })

@@ -125,28 +140,33 @@ function handleDone() {
  u115AuthDialog.value = false
  rcloneConfigDialog.value = false
  aListConfigDialog.value = false
-  emit('done')
-}
-
-// 根据存储类型获取文本
-function getStorageTypeText(type: string) {
-  return storageOptions.find((option) => option.value === type)?.title
+  customConfigDialog.value = false
+  // 更新存储
+  storage_ref.value.name = customName.value
+  storage_ref.value.type = storageType.value
+  emit('done', storage_ref.value)
 }

 onMounted(() => {
  queryStorage()
 })
+
+// 关闭
+function onClose() {
+  emit('close')
+}
 </script>
 <template>
  <div>
    <VCard variant="tonal" @click="openStorageDialog">
+      <VDialogCloseBtn v-if="!storageIconDict[storage.type]" @click="onClose" />
      <VCardText class="flex justify-space-between align-center gap-3">
        <div class="align-self-start flex-1">
-          <h5 class="text-h6 mb-1">{{ getStorageTypeText(storage.type) }}</h5>
+          <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
          <div class="mb-3 text-sm" v-if="total">{{ formatBytes(used, 1) }} / {{ formatBytes(total, 1) }}</div>
          <div v-else-if="isNullOrEmptyObject(storage.config)">{{ t('storage.notConfigured') }}</div>
        </div>
-        <VImg :src="getIcon" cover class="mt-5" max-width="3rem" min-width="3rem" />
+        <VImg :src="getIcon" cover class="mt-7" max-width="3rem" min-width="3rem" />
      </VCardText>
      <div class="w-full absolute bottom-0">
        <VProgressLinear v-if="usage > 0" :model-value="usage" :bg-color="progressColor" :color="progressColor" />
@@ -180,5 +200,35 @@ onMounted(() => {
      @close="aListConfigDialog = false"
      @done="handleDone"
    />
+    <VDialog v-if="customConfigDialog" v-model="customConfigDialog" scrollable max-width="30rem">
+      <VCard>
+        <VCardItem>
+          <VCardTitle>{{ t('storage.custom') }}</VCardTitle>
+          <VDialogCloseBtn v-model="customConfigDialog" />
+        </VCardItem>
+        <VDivider />
+        <VCardText>
+          <VRow>
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="storageType"
+                :label="t('storage.type')"
+                :hint="t('storage.customTypeHint')"
+                persistent-hint
+                active
+              />
+            </VCol>
+            <VCol cols="12" md="6">
+              <VTextField v-model="customName" :label="t('storage.name')" persistent-hint active />
+            </VCol>
+          </VRow>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn @click="handleDone" variant="elevated" prepend-icon="mdi-content-save" class="px-5">
+            {{ t('common.save') }}
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
  </div>
 </template>
--- a/src/components/cards/TorrentItem.vue
+++ b/src/components/cards/TorrentItem.vue
@@ -121,12 +121,12 @@ onMounted(() => {
      </div>

      <template v-slot:prepend>
-        <div class="d-flex align-center">
-          <img v-if="siteIcon" :src="siteIcon" :alt="torrent?.site_name" class="rounded mr-2" width="32" height="32" />
-          <VAvatar v-else size="24" class="mr-2 text-caption bg-primary-lighten-4 text-primary font-weight-bold">
+        <div class="d-flex flex-column align-center pr-3">
+          <VImg v-if="siteIcon" :src="siteIcon" :alt="torrent?.site_name" class="rounded mb-1" width="32" height="32" />
+          <VAvatar v-else size="24" class="mb-1 text-caption bg-primary-lighten-4 text-primary font-weight-bold">
            {{ torrent?.site_name?.substring(0, 1) }}
          </VAvatar>
-          <div class="font-weight-bold text-body-2 d-none d-sm-block">{{ torrent?.site_name }}</div>
+          <div class="font-weight-bold text-body-2 text-center d-none d-sm-block">{{ torrent?.site_name }}</div>
        </div>
      </template>

--- a/src/components/dialog/PluginConfigDialog.vue
+++ b/src/components/dialog/PluginConfigDialog.vue
@@ -7,6 +7,7 @@ import { useToast } from 'vue-toast-notification'
 import FormRender from '../render/FormRender.vue'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
+import { loadRemoteComponent } from '@/utils/federationLoader'

 // 国际化
 const { t } = useI18n()
@@ -42,29 +43,84 @@ const $toast = useToast()
 // 是否刷新
 const isRefreshed = ref(false)

-// 调用API读取表单页面
-async function loadPluginForm() {
-  try {
-    const result: { [key: string]: any } = await api.get(`plugin/form/${props.plugin?.id}`)
-    if (result) {
-      pluginFormItems = result.conf
-      if (result.model) pluginConfigForm.value = result.model
+// 渲染模式: 'vuetify' 或 'vue'
+const renderMode = ref('vuetify')
+
+// Vue 模式：动态加载的组件
+const dynamicComponent = defineAsyncComponent({
+  // 工厂函数
+  loader: async () => {
+    try {
+      if (!props.plugin?.id) {
+        throw new Error('插件ID不存在')
+      }
+
+      // 动态加载远程组件
+      const module = await loadRemoteComponent(props.plugin.id, 'Config')
+
+      // 直接返回加载的组件，无需再获取default
+      return module
+    } catch (error) {
+      console.error('加载远程组件失败:', error)
    }
-  } catch (error) {
+  },
+  // 加载中显示的组件
+  loadingComponent: {
+    template: '<VSkeletonLoader type="card"></VSkeletonLoader>',
+  },
+  // 添加错误处理
+  errorComponent: {
+    template: `
+      <div class="pa-4">
+        <VAlert type="error" title="组件加载错误">
+          无法加载组件，请稍后再试
+        </VAlert>
+      </div>
+    `,
+  },
+  // 添加超时设置
+  timeout: 20000,
+})
+
+//调用API读取UI和配置数据
+async function loadPluginUIData() {
+  // 重置
+  isRefreshed.value = false
+  pluginFormItems = []
+  pluginConfigForm.value = {}
+  renderMode.value = 'vuetify'
+
+  try {
+    // 获取UI定义
+    const result: { [key: string]: any } = await api.get(`plugin/form/${props.plugin?.id}`)
+    if (!result) {
+      console.error(`插件 ${props.plugin?.plugin_name} UI数据加载失败：无效的响应`)
+      return
+    }
+    renderMode.value = result.render_mode
+    if (renderMode.value === 'vue') {
+      // Vue模式下，初始配置在同一个API返回
+      if (!isNullOrEmptyObject(result.model)) {
+        pluginConfigForm.value = result.model
+      }
+    } else {
+      // Vuetify模式
+      pluginFormItems = result.conf || []
+      if (result.model) {
+        pluginConfigForm.value = result.model
+      }
+    }
+  } catch (error: any) {
    console.error(error)
+  } finally {
+    isRefreshed.value = true
  }
-  isRefreshed.value = true
 }

-// 调用API读取配置数据
-async function loadPluginConf() {
-  try {
-    const result: { [key: string]: any } = await api.get(`plugin/${props.plugin?.id}`)
-    if (!isNullOrEmptyObject(result)) pluginConfigForm.value = result
-  } catch (error) {
-    console.error(error)
-  }
-  isRefreshed.value = true
+// 处理 Vue 组件触发的保存事件
+function handleVueComponentSave(newConfig: Record<string, any>) {
+  pluginConfigForm.value = newConfig
+  savePluginConf()
 }

 // 调用API保存配置数据
@@ -75,42 +131,67 @@ async function savePluginConf() {
  try {
    const result: { [key: string]: any } = await api.put(`plugin/${props.plugin?.id}`, pluginConfigForm.value)
    if (result.success) {
-      progressDialog.value = false
      $toast.success(t('dialog.pluginConfig.saveSuccess', { name: props.plugin?.plugin_name }))
      // 通知父组件刷新
      emit('save')
    } else {
-      progressDialog.value = false
      $toast.error(t('dialog.pluginConfig.saveFailed', { name: props.plugin?.plugin_name, message: result.message }))
    }
  } catch (error) {
    console.error(error)
  }
+  progressDialog.value = false
 }

 onBeforeMount(async () => {
-  await loadPluginForm()
-  await loadPluginConf()
+  await loadPluginUIData()
 })
 </script>
 <template>
  <VDialog scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
-    <VCard :title="`${props.plugin?.plugin_name} - ${t('dialog.pluginConfig.title')}`" class="rounded-t">
+    <!-- Vuetify 渲染模式 -->
+    <VCard
+      v-if="renderMode === 'vuetify'"
+      :title="`${props.plugin?.plugin_name} - ${t('dialog.pluginConfig.title')}`"
+      class="rounded-t"
+    >
      <VDialogCloseBtn @click="emit('close')" />
      <VDivider />
-      <VCardText v-if="isRefreshed">
-        <FormRender v-for="(item, index) in pluginFormItems" :key="index" :config="item" :model="pluginConfigForm" />
+      <LoadingBanner v-if="!isRefreshed" class="mt-5" />
+      <VCardText v-else="isRefreshed">
+        <div>
+          <FormRender v-for="(item, index) in pluginFormItems" :key="index" :config="item" :model="pluginConfigForm" />
+          <div v-if="!pluginFormItems || pluginFormItems.length === 0">此插件没有可配置项</div>
+        </div>
      </VCardText>
      <VCardActions class="pt-3">
        <VBtn v-if="props.plugin?.has_page" @click="emit('switch')" variant="outlined" color="info">
          {{ t('dialog.pluginConfig.viewData') }}
        </VBtn>
        <VSpacer />
-        <VBtn @click="savePluginConf" variant="elevated" prepend-icon="mdi-content-save" class="px-5">
-          {{ t('dialog.pluginConfig.save') }}
+        <!-- 只有Vuetify模式显示默认保存按钮，Vue模式由组件内部控制 -->
+        <VBtn
+          v-if="renderMode === 'vuetify'"
+          @click="savePluginConf"
+          variant="elevated"
+          prepend-icon="mdi-content-save"
+          class="px-5"
+        >
+          保存
        </VBtn>
      </VCardActions>
    </VCard>
+    <!-- Vue 渲染模式 -->
+    <div v-else-if="renderMode === 'vue'">
+      <component
+        :is="dynamicComponent"
+        :initial-config="pluginConfigForm"
+        :api="api"
+        @save="handleVueComponentSave"
+        @switch="emit('switch')"
+        @close="emit('close')"
+      />
+    </div>
    <!-- 进度框 -->
    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
  </VDialog>
--- a/src/components/dialog/PluginDataDialog.vue
+++ b/src/components/dialog/PluginDataDialog.vue
@@ -3,6 +3,7 @@ import { useDisplay } from 'vuetify'
 import type { Plugin } from '@/api/types'
 import PageRender from '@/components/render/PageRender.vue'
 import api from '@/api'
+import { loadRemoteComponent } from '@/utils/federationLoader'

 // 输入参数
 const props = defineProps({
@@ -21,32 +22,112 @@ const appMode = inject('pwaMode') && display.mdAndDown.value

 // 是否刷新
 const isRefreshed = ref(false)
+// 组件是否已加载成功
+const componentLoaded = ref(false)
+// 是否正在加载数据
+const isLoading = ref(false)
+
+// 渲染模式: 'vuetify' 或 'vue'
+const renderMode = ref('vuetify')

 // 插件数据页面配置项
 let pluginPageItems = ref([])

-// 调用API读取数据页面
-async function loadPluginPage() {
+// Vue 模式：动态加载的组件
+const dynamicComponent = defineAsyncComponent({
+  // 工厂函数
+  loader: async () => {
+    try {
+      if (!props.plugin?.id) {
+        throw new Error('插件ID不存在')
+      }
+
+      // 动态加载远程组件
+      const module = await loadRemoteComponent(props.plugin.id, 'Page')
+      componentLoaded.value = true
+      return module
+    } catch (error) {
+      console.error('加载远程组件失败:', error)
+      componentLoaded.value = false
+    }
+  },
+  // 加载中显示的组件
+  loadingComponent: {
+    template: '<VSkeletonLoader type="card"></VSkeletonLoader>',
+  },
+  // 添加错误处理
+  errorComponent: {
+    template: `
+      <div class="pa-4">
+        <VAlert type="error" title="组件加载错误">
+          无法加载组件，请稍后再试
+        </VAlert>
+      </div>
+    `,
+  },
+  // 添加超时设置
+  timeout: 20000,
+})
+
+// 调用API读取数据页面UI
+async function loadPluginUIData() {
+  // 如果正在加载，则不重复加载
+  if (isLoading.value) return
+
+  isLoading.value = true
+  isRefreshed.value = false
+  pluginPageItems.value = []
+
  try {
-    const result: [] = await api.get(`plugin/page/${props.plugin?.id}`)
-    if (result) pluginPageItems.value = result
-  } catch (error) {
+    // 如果已经是vue模式且组件已加载成功，不需要再请求模式
+    if (renderMode.value === 'vue' && componentLoaded.value) {
+      isRefreshed.value = true
+      isLoading.value = false
+      return
+    }
+
+    const result: { [key: string]: any } = await api.get(`plugin/page/${props.plugin?.id}`)
+    if (!result || !result.render_mode) {
+      console.error(`插件 ${props.plugin?.plugin_name} UI数据加载失败：无效的响应`)
+      return
+    }
+    renderMode.value = result.render_mode
+    if (renderMode.value === 'vuetify') {
+      // Vuetify模式
+      pluginPageItems.value = result.page || []
+    }
+  } catch (error: any) {
    console.error(error)
+  } finally {
+    isRefreshed.value = true
+    isLoading.value = false
  }
-  isRefreshed.value = true
+}
+
+// 重新加载数据（可由 PageRender 或 Vue component 触发）
+function handleAction(event: any) {
+  // 避免在组件已加载的情况下重复调用loadPluginUIData
+  if (renderMode.value === 'vue' && componentLoaded.value) {
+    return
+  }
+  loadPluginUIData()
 }

 onMounted(() => {
-  loadPluginPage()
+  loadPluginUIData()
 })
 </script>
 <template>
  <VDialog scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
-    <VCard :title="`${props.plugin?.plugin_name}`" class="rounded-t">
+    <!-- Vuetify 渲染模式 -->
+    <VCard v-if="renderMode === 'vuetify'" :title="`${props.plugin?.plugin_name}`" class="rounded-t">
      <VDialogCloseBtn @click="emit('close')" />
      <LoadingBanner v-if="!isRefreshed" class="mt-5" />
      <VCardText v-else class="min-h-40">
-        <PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
+        <div>
+          <PageRender @action="handleAction" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
+          <div v-if="!pluginPageItems || pluginPageItems.length === 0">此插件没有详情页面</div>
+        </div>
      </VCardText>
      <VFab
        icon="mdi-cog"
@@ -59,5 +140,9 @@ onMounted(() => {
        :class="{ 'mb-10': appMode }"
      />
    </VCard>
+    <!-- Vue 渲染模式 -->
+    <div v-else-if="renderMode === 'vue'">
+      <component :is="dynamicComponent" :api="api" @action="handleAction" @switch="emit('switch')" @close="emit('close')" />
+    </div>
  </VDialog>
 </template>
--- a/src/components/dialog/ReorganizeDialog.vue
+++ b/src/components/dialog/ReorganizeDialog.vue
@@ -2,11 +2,11 @@
 import { useToast } from 'vue-toast-notification'
 import MediaIdSelector from '../misc/MediaIdSelector.vue'
 import api from '@/api'
-import { storageOptions, transferTypeOptions } from '@/api/constants'
+import { transferTypeOptions } from '@/api/constants'
 import { numberValidator } from '@/@validators'
 import { useDisplay } from 'vuetify'
 import ProgressDialog from './ProgressDialog.vue'
-import { FileItem, TransferDirectoryConf, TransferForm } from '@/api/types'
+import { FileItem, StorageConf, TransferDirectoryConf, TransferForm } from '@/api/types'
 import { useI18n } from 'vue-i18n'

 // 国际化
@@ -58,6 +58,28 @@ const progressText = ref(t('dialog.reorganize.processing'))
 // 整理进度
 const progressValue = ref(0)

+// 所有存储
+const storages = ref<StorageConf[]>([])
+
+// 查询存储
+async function loadStorages() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Storages')
+
+    storages.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 存储字典
+const storageOptions = computed(() => {
+  return storages.value.map(item => ({
+    title: item.name,
+    value: item.type,
+  }))
+})
+
 // 标题
 const dialogTitle = computed(() => {
  if (props.items) {
@@ -218,6 +240,7 @@ async function transfer(background: boolean = false) {

 onMounted(() => {
  loadDirectories()
+  loadStorages()
 })

 onUnmounted(() => {
--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -700,27 +700,21 @@ onMounted(() => {
      <VDialogCloseBtn @click="renamePopper = false" />
      <VDivider />
      <VCardText>
-        <div class="mb-3">
-          <span>{{ t('file.currentName') }}: {{ currentItem?.name }}</span>
-        </div>
-        <VTextField v-model="newName" :label="t('file.newName')" />
-        <VCheckbox
-          v-if="false && currentItem?.type == 'dir'"
-          v-model="renameAll"
-          :label="t('file.includeSubfolders')"
-        ></VCheckbox>
+        <VRow>
+          <VCol cols="12">
+            <VTextField v-model="newName" :label="t('file.newName')" :loading="renameLoading" />
+          </VCol>
+          <VCol cols="12" v-if="currentItem && currentItem.type == 'dir'">
+            <VSwitch v-model="renameAll" :label="t('file.includeSubfolders')" />
+          </VCol>
+        </VRow>
      </VCardText>
      <VCardActions>
-        <div class="flex-grow-1" />
-        <VBtn
-          :disabled="!newName"
-          variant="elevated"
-          :loading="renameLoading"
-          @click="rename"
-          prepend-icon="mdi-check"
-          class="px-5 me-3"
-        >
-          {{ t('common.save') }}
+        <VBtn color="success" variant="elevated" @click="get_recommend_name" prepend-icon="mdi-magic" class="px-5 me-3">
+          {{ t('file.autoRecognizeName') }}
+        </VBtn>
+        <VBtn :disabled="!newName" variant="elevated" @click="rename" prepend-icon="mdi-check" class="px-5 me-3">
+          {{ t('common.confirm') }}
        </VBtn>
      </VCardActions>
    </VCard>
--- a/src/components/misc/DashboardElement.vue
+++ b/src/components/misc/DashboardElement.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, computed, defineAsyncComponent } from 'vue'
 import { DashboardItem } from '@/api/types'
 import AnalyticsMediaStatistic from '@/views/dashboard/AnalyticsMediaStatistic.vue'
 import AnalyticsScheduler from '@/views/dashboard/AnalyticsScheduler.vue'
@@ -12,6 +13,7 @@ import MediaServerLibrary from '@/views/dashboard/MediaServerLibrary.vue'
 import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
 import DashboardRender from '@/components/render/DashboardRender.vue'
 import { isNullOrEmptyObject } from '@/@core/utils'
+import { loadRemoteComponent } from '@/utils/federationLoader'

 // 输入参数
 const props = defineProps({
@@ -28,6 +30,43 @@ const props = defineProps({

 const emit = defineEmits(['update:refreshStatus'])

+// 插件UI渲染模式 ('vuetify' 或 'vue')
+const pluginRenderMode = computed(() => props.config?.render_mode || 'vuetify')
+
+// Vue 模式：动态加载的组件
+const dynamicPluginComponent = defineAsyncComponent({
+  // 工厂函数
+  loader: async () => {
+    try {
+      if (!props.config?.id) {
+        throw new Error('插件ID不存在')
+      }
+
+      // 动态加载远程组件
+      const module = await loadRemoteComponent(props.config.id, 'Dashboard')
+
+      // 直接返回加载的组件，无需再获取default
+      return module
+    } catch (error) {
+      console.error('加载远程组件失败:', error)
+    }
+  },
+  // 加载中显示的组件
+  loadingComponent: {
+    template: '<VSkeletonLoader type="card"></VSkeletonLoader>',
+  },
+  // 添加错误处理
+  errorComponent: {
+    template: `
+      <div class="pa-4">
+        <VAlert type="error" title="组件加载错误">
+          无法加载组件，请稍后再试
+        </VAlert>
+      </div>
+    `,
+  },
+})
+
 onUnmounted(() => {
  // 组件卸载时禁用刷新状态
  emit('update:refreshStatus', false)
@@ -46,34 +85,49 @@ onUnmounted(() => {
  <MediaServerPlaying v-else-if="config?.id === 'playing'" />
  <MediaServerLatest v-else-if="config?.id === 'latest'" />
  <!-- 插件仪表板 -->
-  <VHover v-else-if="!isNullOrEmptyObject(props.config)">
-    <template #default="hover">
-      <!-- 无边框 -->
-      <div v-if="props.config?.attrs.border === false">
-        <VCard v-bind="hover.props">
-          <VCardText class="p-0">
+  <template v-else-if="!isNullOrEmptyObject(props.config)">
+    <!-- Vue 渲染模式 -->
+    <div v-if="pluginRenderMode === 'vue'">
+      <component :is="dynamicPluginComponent" :config="props.config" :allow-refresh="props.allowRefresh" />
+      <!-- Vue 模式下也可以显示拖拽句柄 -->
+      <div class="absolute right-5 top-5">
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </div>
+    </div>
+    <!-- Vuetify 渲染模式 -->
+    <VHover v-else-if="pluginRenderMode === 'vuetify'">
+      <template #default="hover">
+        <!-- 无边框 -->
+        <div v-if="props.config?.attrs.border === false">
+          <VCard v-bind="hover.props">
+            <VCardText class="p-0">
+              <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
+            </VCardText>
+            <div v-if="hover.isHovering" class="absolute right-5 top-5">
+              <VIcon class="cursor-move">mdi-drag</VIcon>
+            </div>
+          </VCard>
+        </div>
+        <!-- 有边框 -->
+        <VCard v-else v-bind="hover.props">
+          <VCardItem v-if="props.config?.attrs.border !== false">
+            <template #append>
+              <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+            </template>
+            <VCardTitle>
+              {{ props.config?.attrs?.title ?? props.config?.name }}
+            </VCardTitle>
+            <VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
+          </VCardItem>
+          <VCardText>
            <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
          </VCardText>
-          <div v-if="hover.isHovering" class="absolute right-5 top-5">
-            <VIcon class="cursor-move">mdi-drag</VIcon>
-          </div>
        </VCard>
-      </div>
-      <!-- 有边框 -->
-      <VCard v-else v-bind="hover.props">
-        <VCardItem v-if="props.config?.attrs.border !== false">
-          <template #append>
-            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
-          </template>
-          <VCardTitle>
-            {{ props.config?.attrs?.title ?? props.config?.name }}
-          </VCardTitle>
-          <VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
-        </VCardItem>
-        <VCardText>
-          <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
-        </VCardText>
-      </VCard>
-    </template>
-  </VHover>
+      </template>
+    </VHover>
+    <!-- 未知模式或错误 -->
+    <VCard v-else>
+      <VCardText>无法渲染插件仪表盘部件: 未知渲染模式或配置错误</VCardText>
+    </VCard>
+  </template>
 </template>
--- a/src/components/workflow/ScanFileAction.vue
+++ b/src/components/workflow/ScanFileAction.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import api from '@/api'
+import { StorageConf } from '@/api/types'
 import { Handle, Position } from '@vue-flow/core'
-import { storageOptions } from '@/api/constants'
 import { useI18n } from 'vue-i18n'

 const { t } = useI18n()
@@ -15,6 +16,27 @@ defineProps({
    required: true,
  },
 })
+
+// 所有存储
+const storages = ref<StorageConf[]>([])
+
+// 查询存储
+async function loadStorages() {
+  const result: { [key: string]: any } = await api.get('system/setting/Storages')
+  storages.value = result.data?.value ?? []
+}
+
+// 存储字典
+const storageOptions = computed(() => {
+  return storages.value.map(item => ({
+    title: item.name,
+    value: item.type,
+  }))
+})
+
+onMounted(() => {
+  loadStorages()
+})
 </script>
 <template>
  <div>
--- a/src/layouts/components/UserNotification.vue
+++ b/src/layouts/components/UserNotification.vue
@@ -86,32 +86,46 @@ onBeforeUnmount(() => {
        </template>
      </VCardItem>
      <VDivider />
-      <div v-if="notificationList.length > 0">
-        <VListItem v-for="(item, i) in notificationList" :key="i" lines="two" class="mb-1">
-          <template #prepend>
-            <VAvatar rounded>
-              <VIcon v-if="item.type === 'user'" icon="mdi-account-alert" size="large"></VIcon>
-              <VIcon v-else-if="item.type === 'plugin'" icon="mdi-robot" size="large"></VIcon>
-              <VIcon v-else icon="mdi-laptop" size="large"></VIcon>
-            </VAvatar>
-          </template>
-          <div>
-            <div class="text-body-1 text-high-emphasis break-words whitespace-break-spaces">
-              {{ item.title }}
+      <div class="notification-list-container">
+        <div v-if="notificationList.length > 0" class="notification-list">
+          <VListItem v-for="(item, i) in notificationList" :key="i" lines="two" class="mb-1">
+            <template #prepend>
+              <VAvatar rounded>
+                <VIcon v-if="item.type === 'user'" icon="mdi-account-alert" size="large"></VIcon>
+                <VIcon v-else-if="item.type === 'plugin'" icon="mdi-robot" size="large"></VIcon>
+                <VIcon v-else icon="mdi-laptop" size="large"></VIcon>
+              </VAvatar>
+            </template>
+            <div>
+              <div class="text-body-1 text-high-emphasis break-words whitespace-break-spaces">
+                {{ item.title }}
+              </div>
+              <div class="text-caption mt-1.5">
+                {{ item.text }}
+              </div>
+              <div class="text-sm text-primary mt-1.5">
+                {{ formatDateDifference(item.date) }}
+              </div>
            </div>
-            <div class="text-caption mt-1.5">
-              {{ item.text }}
-            </div>
-            <div class="text-sm text-primary mt-1.5">
-              {{ formatDateDifference(item.date) }}
-            </div>
-          </div>
-        </VListItem>
-      </div>
-      <div v-else class="py-8 text-center">
-        <VIcon icon="mdi-bell-sleep-outline" size="40" class="mb-3" />
-        <div>{{ t('notification.empty') }}</div>
+          </VListItem>
+        </div>
+        <div v-else class="py-8 text-center">
+          <VIcon icon="mdi-bell-sleep-outline" size="40" class="mb-3" />
+          <div>{{ t('notification.empty') }}</div>
+        </div>
      </div>
    </VCard>
  </VMenu>
 </template>
+
+<style scoped>
+.notification-list-container {
+  max-height: 50vh;
+  overflow: hidden;
+}
+
+.notification-list {
+  max-height: 100%;
+  overflow-y: auto;
+}
+</style>
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -38,6 +38,7 @@ export default {
    share: 'Share',
    unsubscribe: 'Unsubscribe',
    media: 'Media',
+    unknown: 'Unknown',
  },
  mediaType: {
    movie: 'Movie',
@@ -296,6 +297,7 @@ export default {
      encodingAesKeyHint: 'EncodingAESKey in WeChat Work self-built app -> API message receiving configuration',
      admins: 'Admin Whitelist',
      adminsHint: 'User IDs that can use admin menu and commands, separated by commas',
+      adminsPlaceholder: 'User IDs list, separated by commas',
    },
    telegram: {
      name: 'Telegram',
@@ -307,6 +309,8 @@ export default {
      usersHint: 'User IDs that can use Telegram bot, separated by commas. Leave empty to allow all users',
      admins: 'Admin Whitelist',
      adminsHint: 'User IDs that can use admin menu and commands, separated by commas',
+      adminsPlaceholder: 'User IDs list, separated by commas',
+      usersPlaceholder: 'User IDs list, separated by commas',
    },
    slack: {
      name: 'Slack',
@@ -722,11 +726,15 @@ export default {
    filterEdition: 'Edition',
    filterResolution: 'Resolution',
    filterReleaseGroup: 'Release Group',
+    noMatchingResults: 'No matching data',
  },
  calendar: {
    episode: 'Episode {number}',
  },
  storage: {
+    name: 'Name',
+    type: 'Type',
+    customTypeHint: 'Custom storage type, used for plugins and other scenarios',
    usedPercent: '{percent}% Used',
    noConfigNeeded: 'This storage type does not require configuration, please configure the directory directly!',
    notConfigured: 'Not Configured',
@@ -735,6 +743,7 @@ export default {
    u115: '115 Cloud',
    rclone: 'RClone',
    alist: 'AList',
+    custom: 'Custom',
  },
  filterRules: {
    specSub: 'Special Subtitle',
@@ -784,6 +793,7 @@ export default {
  },
  site: {
    noSites: 'No Sites',
+    noFilterData: 'No matching sites found',
    sitesWillBeShownHere: 'Added and supported sites will be displayed here.',
    title: 'Site',
    status: {
@@ -911,6 +921,7 @@ export default {
      dataDirectory: '/moviepilot',
    },
    system: {
+      custom: 'Custom',
      basicSettings: 'Basic Settings',
      basicSettingsDesc: 'Configure server global functions.',
      appDomain: 'Access Domain',
@@ -1107,6 +1118,15 @@ export default {
    notification: {
      channels: 'Notification Channels',
      channelsDesc: 'Set message sending channel parameters.',
+      organizeSuccess: 'Media Import',
+      downloadAdded: 'Download Added',
+      subscribeAdded: 'Subscribe Added', 
+      subscribeComplete: 'Subscribe Complete',
+      templateConfigTitle: 'Message Template',
+      templateConfigDesc: 'Set message template, support Jinja2 syntax.',
+      templateSaveFailed: 'Failed to save template!',
+      templateSaveSuccess: 'Template saved successfully',
+      templateLoadFailed: 'Failed to load template!',
      scope: 'Notification Scope',
      scopeDesc: 'Corresponding message types will only be sent to specified users.',
      messageType: 'Message Type',
@@ -1826,6 +1846,7 @@ export default {
  },
  file: {
    newFolder: 'New Folder',
+    autoRecognizeName: 'Auto Recognize Name',
    createFolder: 'Create Folder',
    fileName: 'File Name',
    fileSize: 'File Size',
@@ -2081,6 +2102,7 @@ export default {
    name: 'Name',
    type: 'Type',
    enabled: 'Enabled',
+    customTypeHint: 'Custom downloader type, for plugin scenarios',
    default: 'Default',
    host: 'Host',
    username: 'Username',
@@ -2121,6 +2143,8 @@ export default {
    },
  },
  mediaserver: {
+    type: 'Type',
+    customTypeHint: 'Custom media server type, for plugin scenarios',
    enableMediaServer: 'Enable Media Server',
    nameRequired: 'Required; cannot be duplicated',
    serverAlias: 'Media server alias',
@@ -2320,4 +2344,8 @@ export default {
    byFileSize: 'By File Size',
    keepLatestOnly: 'Keep Latest Only',
  },
+  validators: {
+    required: 'This field is required',
+    number: 'Please enter a number',
+  },
 }
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -38,6 +38,7 @@ export default {
    share: '分享',
    unsubscribe: '取消订阅',
    media: '媒体',
+    unknown: '未知',
  },
  mediaType: {
    movie: '电影',
@@ -294,6 +295,7 @@ export default {
      encodingAesKeyHint: '微信企业自建应用->API接收消息配置中的EncodingAESKey',
      admins: '管理员白名单',
      adminsHint: '可使用管理菜单及命令的用户ID列表，多个ID使用,分隔',
+      adminsPlaceholder: '用户ID列表，多个ID使用,分隔',
    },
    telegram: {
      name: 'Telegram',
@@ -305,6 +307,8 @@ export default {
      usersHint: '可使用Telegram机器人的用户ID清单，多个用户用,分隔，不填写则所有用户都能使用',
      admins: '管理员白名单',
      adminsHint: '可使用管理菜单及命令的用户ID列表，多个ID使用,分隔',
+      adminsPlaceholder: '用户ID列表，多个ID使用,分隔',
+      usersPlaceholder: '用户ID列表，多个ID使用,分隔',
    },
    slack: {
      name: 'Slack',
@@ -505,8 +509,8 @@ export default {
    sendMessage: {
      title: '发送消息',
      subtitle: '发送系统消息',
-      type: '类型',
-      content: '内容',
+      channel: '渠道',
+      userId: '用户ID',
    },
    transferFile: {
      title: '传输文件',
@@ -719,11 +723,15 @@ export default {
    filterEdition: '质量',
    filterResolution: '分辨率',
    filterReleaseGroup: '制作组',
+    noMatchingResults: '没有数据',
  },
  calendar: {
    episode: '第{number}集',
  },
  storage: {
+    name: '名称',
+    type: '类型',
+    customTypeHint: '自定义存储类型，用于插件等场景',
    usedPercent: '已使用 {percent}%',
    noConfigNeeded: '此存储类型无需配置参数，请直接配置目录！',
    notConfigured: '未配置',
@@ -732,6 +740,7 @@ export default {
    u115: '115网盘',
    rclone: 'RClone',
    alist: 'AList',
+    custom: '自定义',
  },
  filterRules: {
    specSub: '特效字幕',
@@ -782,6 +791,7 @@ export default {
  site: {
    noSites: '没有站点',
    sitesWillBeShownHere: '已添加并支持的站点将会在这里显示。',
+    noFilterData: '没有符合条件的站点',
    title: '站点',
    status: {
      enabled: '启用',
@@ -908,6 +918,7 @@ export default {
      dataDirectory: '/moviepilot',
    },
    system: {
+      custom: '自定义',
      basicSettings: '基础设置',
      basicSettingsDesc: '设置服务器的全局功能。',
      appDomain: '访问域名',
@@ -1095,6 +1106,15 @@ export default {
    notification: {
      channels: '通知渠道',
      channelsDesc: '设置消息发送渠道参数。',
+      organizeSuccess: '资源入库',
+      downloadAdded: '资源下载',
+      subscribeAdded: '添加订阅',
+      subscribeComplete: '订阅完成',
+      templateConfigTitle: '通知模板',
+      templateConfigDesc: '设置通知模板，支持Jinja2语法。',
+      templateSaveFailed: '模板保存失败！',
+      templateSaveSuccess: '模板保存成功',
+      templateLoadFailed: '模板加载失败！',
      scope: '通知发送范围',
      scopeDesc: '对应消息类型只会发送给设定的用户。',
      messageType: '消息类型',
@@ -1804,6 +1824,7 @@ export default {
  },
  file: {
    newFolder: '新建文件夹',
+    autoRecognizeName: '自动识别名称',
    createFolder: '创建文件夹',
    fileName: '文件名',
    fileSize: '文件大小',
@@ -1851,7 +1872,7 @@ export default {
    renamingAll: '正在重命名 {path} 及目录内所有文件...',
    close: '关闭',
    loadingDirectoryStructure: '加载目录结构...',
-    reorganize: '重新整理',
+    reorganize: '整理',
  },
  person: {
    alias: '别名：',
@@ -2057,6 +2078,7 @@ export default {
    name: '名称',
    type: '类型',
    enabled: '启用',
+    customTypeHint: '自定义下载器类型，用于插件等场景',
    default: '默认',
    host: '地址',
    username: '用户名',
@@ -2067,7 +2089,7 @@ export default {
    first_last_piece: '优先首尾文件',
    saveSuccess: '下载器设置保存成功',
    saveFailed: '下载器设置保存失败',
-    nameRequired: '名称不能为空',
+    nameRequired: '不能为空，且不能重名',
    nameDuplicate: '名称已存在',
    defaultChanged: '存在默认下载器，已替换',
  },
@@ -2097,8 +2119,10 @@ export default {
    },
  },
  mediaserver: {
+    type: '类型',
+    customTypeHint: '自定义媒体服务器类型，用于插件等场景',
    enableMediaServer: '启用媒体服务器',
-    nameRequired: '必填；不可与其他名称重名',
+    nameRequired: '必填，不可重名',
    serverAlias: '媒体服务器的别名',
    host: '地址',
    hostPlaceholder: 'http(s)://ip:port',
@@ -2296,4 +2320,8 @@ export default {
    byFileSize: '按文件大小',
    keepLatestOnly: '仅保留最新',
  },
+  validators: {
+    required: '此项为必填项',
+    number: '请输入数字',
+  },
 }
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -38,6 +38,7 @@ export default {
    share: '分享',
    unsubscribe: '取消訂閱',
    media: '媒體',
+    unknown: '未知',
  },
  mediaType: {
    movie: '電影',
@@ -295,6 +296,7 @@ export default {
      encodingAesKeyHint: '微信企業自建應用->API接收消息配置中的EncodingAESKey',
      admins: '管理員白名單',
      adminsHint: '可使用管理菜單及命令的用戶ID列表，多個ID使用,分隔',
+      adminsPlaceholder: '用戶ID列表，多個ID使用,分隔',
    },
    telegram: {
      name: 'Telegram',
@@ -306,6 +308,8 @@ export default {
      usersHint: '可使用Telegram機器人的用戶ID清單，多個用戶用,分隔，不填寫則所有用戶都能使用',
      admins: '管理員白名單',
      adminsHint: '可使用管理菜單及命令的用戶ID列表，多個ID使用,分隔',
+      adminsPlaceholder: '用戶ID列表，多個ID使用,分隔',
+      usersPlaceholder: '用戶ID列表，多個ID使用,分隔',
    },
    slack: {
      name: 'Slack',
@@ -506,8 +510,8 @@ export default {
    sendMessage: {
      title: '發送消息',
      subtitle: '發送任務執行消息',
-      type: '類型',
-      content: '內容',
+      channel: '渠道',
+      userId: '用戶ID',
    },
    transferFile: {
      title: '整理文件',
@@ -720,11 +724,15 @@ export default {
    filterEdition: '质量',
    filterResolution: '分辨率',
    filterReleaseGroup: '製作組',
+    noMatchingResults: '沒有數據',
  },
  calendar: {
    episode: '第{number}集',
  },
  storage: {
+    name: '名稱',
+    type: '類型',
+    customTypeHint: '自定義存儲類型，用於插件等場景',
    usedPercent: '已使用 {percent}%',
    noConfigNeeded: '此存儲類型無需配置參數，請直接配置目錄！',
    notConfigured: '未配置',
@@ -733,6 +741,7 @@ export default {
    u115: '115網盤',
    rclone: 'RClone',
    alist: 'AList',
+    custom: '自定義',
  },

  filterRules: {
@@ -783,6 +792,7 @@ export default {
  },
  site: {
    noSites: '沒有站點',
+    noFilterData: '沒有符合條件的站點',
    sitesWillBeShownHere: '已添加並支持的站點將會在這裡顯示。',
    title: '站點',
    status: {
@@ -910,6 +920,7 @@ export default {
      dataDirectory: '/moviepilot',
    },
    system: {
+      custom: '自定義',
      basicSettings: '基礎設置',
      basicSettingsDesc: '設置服務器的全局功能。',
      appDomain: '訪問域名',
@@ -1097,6 +1108,15 @@ export default {
    notification: {
      channels: '通知渠道',
      channelsDesc: '設置消息發送渠道參數。',
+      organizeSuccess: '資源入庫',
+      downloadAdded: '資源下載',
+      subscribeAdded: '添加訂閱',
+      subscribeComplete: '訂閱完成',
+      templateConfigTitle: '通知模板',
+      templateConfigDesc: '設置通知模板，支持Jinja2語法。',
+      templateSaveFailed: '模板保存失敗！',
+      templateSaveSuccess: '模板保存成功',
+      templateLoadFailed: '模板載入失敗！',
      scope: '通知發送範圍',
      scopeDesc: '對應消息類型只會發送給設定的用戶。',
      messageType: '消息類型',
@@ -1806,6 +1826,7 @@ export default {
  },
  file: {
    newFolder: '新建文件夾',
+    autoRecognizeName: '自動識別名稱',
    createFolder: '創建文件夾',
    fileName: '文件名',
    fileSize: '文件大小',
@@ -2058,6 +2079,7 @@ export default {
    title: '下載器',
    name: '名稱',
    type: '類型',
+    customTypeHint: '自定義下載器類型，用於插件等場景',
    enabled: '啟用',
    default: '預設',
    host: '地址',
@@ -2099,6 +2121,8 @@ export default {
    },
  },
  mediaserver: {
+    type: '類型',
+    customTypeHint: '自定義媒體伺服器類型，用於插件等場景',
    enableMediaServer: '啟用媒體伺服器',
    nameRequired: '必填；不可與其他名稱重名',
    serverAlias: '媒體伺服器的別名',
@@ -2298,4 +2322,8 @@ export default {
    byFileSize: '按文件大小',
    keepLatestOnly: '僅保留最新',
  },
+  validators: {
+    required: '此項為必填項',
+    number: '請輸入數字',
+  },
 }
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,8 +18,9 @@ import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar'
 import { CronVuetify } from '@vue-js-cron/vuetify'

 // 4. 工具函数和其他辅助模块
-import { fetchGlobalSettings } from './api'
 import { isPWA } from './@core/utils/navigator'
+import { loadRemoteComponents } from './utils/federationLoader'
+import { fetchGlobalSettings } from './utils/globalSetting'

 // 5. 其他插件和功能模块
 import ToastPlugin from 'vue-toast-notification'
@@ -60,6 +61,9 @@ async function initializeApp() {
    // 全局设置
    const globalSettings = await fetchGlobalSettings()
    app.provide('globalSettings', globalSettings)
+
+    // 加载并注册远程联邦组件
+    await loadRemoteComponents()
  } catch (error) {
    console.error('Failed to initialize app', error)
  }
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -7,20 +7,16 @@ import { requiredValidator } from '@/@validators'
 import api from '@/api'
 import router from '@/router'
 import logo from '@images/logo.png'
-import { useTheme } from 'vuetify'
 import { urlBase64ToUint8Array } from '@/@core/utils/navigator'
-import { useI18n } from 'vue-i18n'
 import { SUPPORTED_LOCALES, SupportedLocale } from '@/types/i18n'
 import { getCurrentLocale, setI18nLanguage } from '@/plugins/i18n'

-// 主题
-const { global: globalTheme } = useTheme()
+// 国际化
+const { t } = useI18n()
 // 认证 Store
 const authStore = useAuthStore()
 //用户 Store
 const userStore = useUserStore()
-// 国际化
-const { t } = useI18n()

 // 表单
 const form = ref({
--- a/src/pages/resource.vue
+++ b/src/pages/resource.vue
@@ -202,9 +202,11 @@ onUnmounted(() => {

    <!-- 精简标题栏 -->
    <VCard v-if="isRefreshed" class="search-header d-flex align-center mb-3">
-      <div class="search-info-container d-flex align-center flex-wrap">
-        <div class="search-title text-primary">{{ t('resource.searchResults') }}</div>
-        <div class="search-tags d-flex flex-wrap">
+      <div class="search-info-container">
+        <div class="search-title text-moviepilot">
+          {{ t('resource.searchResults') }}
+        </div>
+        <div class="search-tags d-flex flex-wrap mt-1">
          <VChip v-if="keyword" class="search-tag" color="primary" size="small" variant="flat">
            {{ t('resource.keyword') }}: {{ keyword }}
          </VChip>
@@ -346,7 +348,7 @@ onUnmounted(() => {
 }

 .search-title {
-  font-size: 1.1rem;
+  font-size: 1.2rem;
  font-weight: 600;
 }

@@ -526,7 +528,7 @@ onUnmounted(() => {
  }

  .search-title {
-    font-size: 0.95rem;
+    font-size: 1.2rem;
    white-space: nowrap;
  }

--- a/src/styles/custom.scss
+++ b/src/styles/custom.scss
@@ -42,6 +42,12 @@ html.v-overlay-scroll-blocked {
      transform: rotate(0deg) translate(0, 0);
 }

+.match-height.v-row {
+  .v-card {
+    block-size: 100%;
+  }
+}
+
 .v-toast--bottom {
  z-index: 2500;
  margin-block-end: env(safe-area-inset-bottom);
--- a/src/utils/federationLoader.ts
+++ b/src/utils/federationLoader.ts
@@ -0,0 +1,76 @@
+import api from '@/api'
+import {
+  __federation_method_setRemote,
+  __federation_method_getRemote,
+  __federation_method_unwrapDefault,
+  // @ts-ignore
+} from 'virtual:__federation__'
+
+// 定义远程模块接口
+interface RemoteModule {
+  id: string
+  url: string
+}
+
+/**
+ * 加载远程组件
+ * @param id 远程模块ID
+ * @param componentName 组件名称 (如 'Page')
+ */
+export async function loadRemoteComponent(id: string, componentName: string = 'Page') {
+  try {
+    const module = await __federation_method_getRemote(id, `./${componentName}`)
+    return __federation_method_unwrapDefault(module)
+  } catch (error) {
+    console.error(`加载远程组件失败: ${id}/${componentName}`, error)
+    throw error
+  }
+}
+
+/**
+ * 从API获取远程模块列表
+ */
+async function fetchRemoteModules(): Promise<RemoteModule[]> {
+  try {
+    const response = await api.get('plugin/remotes?token=moviepilot')
+    return (response as any) || []
+  } catch (error) {
+    console.error('获取远程模块列表失败:', error)
+    return []
+  }
+}
+
+/**
+ * 动态注入Federation Remote模块
+ * @param modules 远程模块列表
+ */
+function injectRemoteModule(module: RemoteModule): void {
+  __federation_method_setRemote(module.id, {
+    url: () => Promise.resolve(`${import.meta.env.VITE_API_BASE_URL}/${module.url}`),
+    format: 'esm',
+    from: 'vite',
+  })
+  console.log('已注入远程模块:', module)
+}
+
+/**
+ * 初始化并加载所有远程组件
+ */
+export async function loadRemoteComponents(): Promise<void> {
+  try {
+    // 获取远程模块列表
+    const modules = await fetchRemoteModules()
+
+    // 确保有模块才注入
+    if (modules && modules.length > 0) {
+      // 注入远程模块
+      modules.forEach(module => {
+        injectRemoteModule(module)
+      })
+    } else {
+      console.log('没有发现可用的远程模块')
+    }
+  } catch (error) {
+    console.error('加载远程组件失败:', error)
+  }
+}
--- a/src/utils/globalSetting.ts
+++ b/src/utils/globalSetting.ts
@@ -0,0 +1,14 @@
+import api from '@/api'
+export async function fetchGlobalSettings() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/global', {
+      params: {
+        token: 'moviepilot',
+      },
+    })
+    return result.data || {}
+  } catch (error) {
+    console.error('Failed to fetch global settings', error)
+    throw error
+  }
+}
--- a/src/views/reorganize/TransferHistoryView.vue
+++ b/src/views/reorganize/TransferHistoryView.vue
@@ -2,16 +2,16 @@
 import { debounce } from 'lodash-es'
 import { useToast } from 'vue-toast-notification'
 import api from '@/api'
-import type { TransferHistory } from '@/api/types'
+import type { StorageConf, TransferHistory } from '@/api/types'
 import ReorganizeDialog from '@/components/dialog/ReorganizeDialog.vue'
 import TransferQueueDialog from '@/components/dialog/TransferQueueDialog.vue'
 import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 import { useRoute } from 'vue-router'
 import router from '@/router'
 import { useDisplay } from 'vuetify'
-import { storageDict } from '@/api/constants'
 import { formatFileSize } from '@/@core/utils/formatters'
 import { useI18n } from 'vue-i18n'
+import { storageAttributes } from '@/api/constants'

 // i18n
 const { t } = useI18n()
@@ -181,6 +181,28 @@ const deleteConfirmDialog = ref(false)
 // 确认框标题
 const confirmTitle = ref('')

+// 所有存储
+const storages = ref<StorageConf[]>([])
+
+// 查询存储
+async function loadStorages() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Storages')
+
+    storages.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 存储字典
+const storageDict = computed(() => {
+  return storages.value.reduce((dict, item) => {
+    dict[item.type] = item.name
+    return dict
+  }, {} as Record<string, string>)
+})
+
 // 转移方式字典
 const TransferDict: { [key: string]: string } = {
  copy: t('transferHistory.transferMode.copy'),
@@ -432,7 +454,10 @@ function ensureNumber(value: any, defaultValue: number = 0) {
 }

 // 初始加载数据
-onMounted(fetchData)
+onMounted(() => {
+  loadStorages()
+  fetchData()
+})
 </script>

 <template>
--- a/src/views/setting/AccountSettingDirectory.vue
+++ b/src/views/setting/AccountSettingDirectory.vue
@@ -102,11 +102,6 @@ async function saveStorages() {
  }
 }

-// 修改后生效
-async function updatedStorage() {
-  await loadStorages()
-}
-
 // 查询目录
 async function loadDirectories() {
  try {
@@ -174,6 +169,31 @@ async function loadMediaCategories() {
  }
 }

+// 添加存储
+function addStorage() {
+  storages.value.push({
+    name: `${t('storage.custom')} ${storages.value.length + 1}`,
+    type: 'custom',
+    config: {},
+  })
+}
+
+// 移除存储
+function removeStorage(storage: StorageConf) {
+  const index = storages.value.indexOf(storage)
+  if (index > -1) {
+    storages.value.splice(index, 1)
+  }
+}
+
+// 更新存储
+async function updatedStorage(storage: StorageConf) {
+  const index = storages.value.indexOf(storage)
+  if (index > -1) {
+    storages.value[index] = storage
+  }
+}
+
 // 保存设置
 async function saveSystemSettings(value: any) {
  try {
@@ -212,7 +232,7 @@ onMounted(() => {
            :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
          >
            <template #item="{ element }">
-              <StorageCard :storage="element" @done="updatedStorage" />
+              <StorageCard :storage="element" @close="removeStorage(element)" @done="updatedStorage" />
            </template>
          </draggable>
        </VCardText>
@@ -220,6 +240,9 @@ onMounted(() => {
          <VForm @submit.prevent="() => {}">
            <div class="d-flex flex-wrap gap-4 mt-4">
              <VBtn type="submit" class="me-2" @click="saveStorages"> {{ t('common.save') }} </VBtn>
+              <VBtn color="success" variant="tonal" @click="addStorage">
+                <VIcon icon="mdi-plus" />
+              </VBtn>
            </div>
          </VForm>
        </VCardText>
@@ -246,6 +269,7 @@ onMounted(() => {
              <DirectoryCard
                :directory="element"
                :categories="mediaCategories"
+                :storages="storages"
                @update:modelValue="(value: any) => {element.download_path = value?.download; element.library_path = value?.library}"
                @close="removeDirectory(element)"
              />
--- a/src/views/setting/AccountSettingNotification.vue
+++ b/src/views/setting/AccountSettingNotification.vue
@@ -7,10 +7,45 @@ import NotificationChannelCard from '@/components/cards/NotificationChannelCard.
 import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
 import { notificationSwitchDict } from '@/api/constants'
+import { useTheme } from 'vuetify'

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

+// 初始化模板配置字典
+const templateConfigs = ref<Record<string, string>>({
+  organizeSuccess: '{}',
+  downloadAdded: '{}',
+  subscribeAdded: '{}',
+  subscribeComplete: '{}',
+})
+
+// 模板类型配置
+const templateTypes = ref([
+  {
+    type: 'organizeSuccess',
+    label: t('setting.notification.organizeSuccess'),
+  },
+  {
+    type: 'downloadAdded',
+    label: t('setting.notification.downloadAdded'),
+  },
+  {
+    type: 'subscribeAdded',
+    label: t('setting.notification.subscribeAdded'),
+  },
+  {
+    type: 'subscribeComplete',
+    label: t('setting.notification.subscribeComplete'),
+  },
+])
+
+// 编辑器主题
+const { name: themeName, global: globalTheme } = useTheme()
+const savedTheme = ref(localStorage.getItem('theme') ?? themeName)
+const currentThemeName = ref(savedTheme.value)
+const editorTheme = computed(() => (currentThemeName.value === 'light' ? 'github' : 'monokai'))
+
 // 所有消息渠道
 const notifications = ref<NotificationConf[]>([])

@@ -19,6 +54,9 @@ const $toast = useToast()

 // 进度框
 const progressDialog = ref(false)
+const editorVisible = ref(false)
+const currentTemplate = ref('')
+const editorContent = ref('')

 // 消息类型开关
 const notificationSwitchs = ref<NotificationSwitchConf[]>([
@@ -105,6 +143,43 @@ async function loadNotificationSetting() {
  }
 }

+async function openEditor(type: string) {
+  try {
+    currentTemplate.value = type
+    const result: { [key: string]: any } = await api.get('system/setting/NotificationTemplates')
+    templateConfigs.value = result.data?.value || {}
+    editorContent.value = templateConfigs.value[type] || '{}'
+    editorVisible.value = true
+  } catch (error) {
+    console.error(error)
+    $toast.error(t('setting.notification.templateLoadFailed'))
+  }
+}
+
+async function saveTemplate() {
+  try {
+    await api.post('system/setting/NotificationTemplates', {
+      ...templateConfigs.value,
+      [currentTemplate.value]: editorContent.value,
+    })
+    $toast.success(t('setting.notification.templateSaveSuccess'))
+    editorVisible.value = false
+  } catch (error) {
+    console.error(error)
+    $toast.error(t('setting.notification.templateSaveFailed'))
+  }
+}
+
+async function loadTemplateConfigs() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/NotificationTemplates')
+    templateConfigs.value = result.data?.value || {}
+  } catch (error) {
+    console.error(error)
+    $toast.error(t('setting.notification.templateLoadFailed'))
+  }
+}
+
 // 调用API查询通知发送时间设置
 async function loadNotificationTime() {
  try {
@@ -182,6 +257,7 @@ onMounted(() => {
  loadNotificationSetting()
  loadNotificationSwitchs()
  loadNotificationTime()
+  loadTemplateConfigs()
 })
 </script>

@@ -217,7 +293,7 @@ onMounted(() => {
              <VBtn mtype="submit" @click="saveNotificationSetting"> {{ t('common.save') }} </VBtn>
              <VBtn color="success" variant="tonal">
                <VIcon icon="mdi-plus" />
-                <VMenu activator="parent" close-on-content-click>
+                <VMenu :activator="'parent'" :close-on-content-click="true">
                  <VList>
                    <VListItem @click="addNotification('wechat')">
                      <VListItemTitle>{{ t('setting.notification.wechat') }}</VListItemTitle>
@@ -246,6 +322,46 @@ onMounted(() => {
      </VCard>
    </VCol>
  </VRow>
+  <VRow>
+    <VCol cols="12">
+      <VCard>
+        <VCardItem>
+          <VCardTitle>{{ t('setting.notification.templateConfigTitle') }}</VCardTitle>
+          <VCardSubtitle>{{ t('setting.notification.templateConfigDesc') }}</VCardSubtitle>
+        </VCardItem>
+        <VCardText>
+          <VRow>
+            <VCol v-for="item in templateTypes" :key="item.type" cols="12" sm="6" md="3">
+              <VCard variant="tonal" class="template-card" :class="{ 'on-hover': true }" @click="openEditor(item.type)">
+                <VCardItem>
+                  <template #prepend>
+                    <VAvatar color="primary" variant="tonal" rounded size="42" class="me-3">
+                      <VIcon
+                        size="24"
+                        :icon="
+                          item.type === 'organizeSuccess'
+                            ? 'mdi-folder-check'
+                            : item.type === 'downloadAdded'
+                            ? 'mdi-download'
+                            : item.type === 'subscribeAdded'
+                            ? 'mdi-rss'
+                            : 'mdi-check-circle'
+                        "
+                      />
+                    </VAvatar>
+                  </template>
+                  <VCardTitle>{{ item.label }}</VCardTitle>
+                  <template #append>
+                    <VIcon icon="mdi-chevron-right" />
+                  </template>
+                </VCardItem>
+              </VCard>
+            </VCol>
+          </VRow>
+        </VCardText>
+      </VCard>
+    </VCol>
+  </VRow>
  <VRow>
    <VCol cols="12">
      <VCard>
@@ -321,4 +437,47 @@ onMounted(() => {
    :text="t('setting.system.reloading')"
    :indeterminate="true"
  />
+  <!-- 模板编辑器对话框 -->
+  <VDialog v-model="editorVisible" v-if="editorVisible" max-width="50rem">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          {{ templateTypes.find(t => t.type === currentTemplate)?.label }}
+          {{ t('setting.notification.templateConfigTitle') }}
+        </VCardTitle>
+        <VDialogCloseBtn @click="editorVisible = false" />
+      </VCardItem>
+      <VCardText class="py-0">
+        <VAceEditor
+          v-model:value="editorContent"
+          lang="json"
+          :theme="editorTheme"
+          class="w-full min-h-[30rem] rounded"
+        />
+      </VCardText>
+      <VCardActions class="mx-auto pt-3">
+        <VBtn variant="elevated" color="primary" @click="saveTemplate" prepend-icon="mdi-content-save" class="px-5">
+          {{ t('common.save') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
 </template>
+<style scoped>
+/* Monaco编辑器容器样式 */
+.monaco-editor-container {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 8px;
+  overflow: hidden;
+  margin-top: 1rem;
+}
+
+.template-card {
+  cursor: pointer;
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.template-card.on-hover:hover {
+  transform: translateY(-4px);
+}
+</style>
--- a/src/views/setting/AccountSettingSystem.vue
+++ b/src/views/setting/AccountSettingSystem.vue
@@ -10,6 +10,7 @@ import MediaServerCard from '@/components/cards/MediaServerCard.vue'
 import { copyToClipboard } from '@/@core/utils/navigator'
 import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
+import { downloaderOptions, mediaServerOptions } from '@/api/constants'

 // 国际化
 const { t } = useI18n()
@@ -535,11 +536,11 @@ onDeactivated(() => {
                <VIcon icon="mdi-plus" />
                <VMenu activator="parent" close-on-content-click>
                  <VList>
-                    <VListItem @click="addDownloader('qbittorrent')">
-                      <VListItemTitle>{{ t('setting.system.qbittorrent') }}</VListItemTitle>
+                    <VListItem v-for="item in downloaderOptions" @click="addDownloader(item.value)">
+                      <VListItemTitle>{{ item.title }}</VListItemTitle>
                    </VListItem>
-                    <VListItem @click="addDownloader('transmission')">
-                      <VListItemTitle>{{ t('setting.system.transmission') }}</VListItemTitle>
+                    <VListItem @click="addDownloader('custom')">
+                      <VListItemTitle>{{ t('setting.system.custom') }}</VListItemTitle>
                    </VListItem>
                  </VList>
                </VMenu>
@@ -583,17 +584,11 @@ onDeactivated(() => {
                <VIcon icon="mdi-plus" />
                <VMenu activator="parent" close-on-content-click>
                  <VList>
-                    <VListItem @click="addMediaServer('emby')">
-                      <VListItemTitle>{{ t('setting.system.emby') }}</VListItemTitle>
+                    <VListItem v-for="item in mediaServerOptions" @click="addMediaServer(item.value)">
+                      <VListItemTitle>{{ item.title }}</VListItemTitle>
                    </VListItem>
-                    <VListItem @click="addMediaServer('jellyfin')">
-                      <VListItemTitle>{{ t('setting.system.jellyfin') }}</VListItemTitle>
-                    </VListItem>
-                    <VListItem @click="addMediaServer('plex')">
-                      <VListItemTitle>{{ t('setting.system.plex') }}</VListItemTitle>
-                    </VListItem>
-                    <VListItem @click="addMediaServer('trimemedia')">
-                      <VListItemTitle>{{ t('setting.system.trimeMedia') }}</VListItemTitle>
+                    <VListItem @click="addMediaServer('custom')">
+                      <VListItemTitle>{{ t('setting.system.custom') }}</VListItemTitle>
                    </VListItem>
                  </VList>
                </VMenu>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,6 +8,7 @@ import vuetify from 'vite-plugin-vuetify'
 import { VitePWA } from 'vite-plugin-pwa'
 import VueI18n from '@intlify/unplugin-vue-i18n/vite'
 import { resolve } from 'node:path'
+import federation from '@originjs/vite-plugin-federation'

 // https://vitejs.dev/config/
 export default defineConfig({
@@ -31,6 +32,21 @@ export default defineConfig({
    VueI18n({
      include: [resolve(__dirname, 'src/locales/*.ts')],
    }),
+    federation({
+      name: 'MoviePilot',
+      filename: 'remoteEntry.js',
+      remotes: {
+        // 动态remotes将在运行时通过__FEDERATION__注入
+      },
+      shared: {
+        vue: {
+          requiredVersion: false,
+        },
+        vuetify: {
+          requiredVersion: false,
+        },
+      },
+    }),
    VitePWA({
      injectRegister: 'script',
      registerType: 'autoUpdate',
@@ -116,8 +132,8 @@ export default defineConfig({
            ],
          },
          {
-            'name': '电影订阅',
-            'url': './subscribe/movie',
+            'name': '探索',
+            'url': './discover',
            'icons': [
              {
                'src': './clock-icon-192x192.png',
@@ -127,19 +143,8 @@ export default defineConfig({
            ],
          },
          {
-            'name': '电视剧订阅',
-            'url': './subscribe/tv',
-            'icons': [
-              {
-                'src': './clock-icon-192x192.png',
-                'sizes': '192x192',
-                'type': 'image/png',
-              },
-            ],
-          },
-          {
-            'name': '设置',
-            'url': './setting',
+            'name': '更多',
+            'url': './apps',
            'icons': [
              {
                'src': './cog-icon-192x192.png',
@@ -165,6 +170,7 @@ export default defineConfig({
    },
  },
  build: {
+    target: 'esnext',
    minify: 'terser',
    terserOptions: {
      compress: {
--- a/yarn.lock
+++ b/yarn.lock
@@ -1428,7 +1428,7 @@
    "@jridgewell/gen-mapping" "^0.3.5"
    "@jridgewell/trace-mapping" "^0.3.25"

-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0":
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
@@ -1516,6 +1516,14 @@
    unimport "^5.0.0"
    untyped "^2.0.0"

+"@originjs/vite-plugin-federation@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@originjs/vite-plugin-federation/-/vite-plugin-federation-1.4.1.tgz#e6abc8f18f2cf82783eb87853f4d03e6358b43c2"
+  integrity sha512-Uo08jW5pj1t58OUKuZNkmzcfTN2pqeVuAWCCiKf/75/oll4Efq4cHOqSE1FXMlvwZNGDziNdDyBbQ5IANem3CQ==
+  dependencies:
+    estree-walker "^3.0.2"
+    magic-string "^0.27.0"
+
 "@parcel/watcher-android-arm64@2.5.1":
  version "2.5.1"
  resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz#507f836d7e2042f798c7d07ad19c3546f9848ac1"
@@ -3989,7 +3997,7 @@ estree-walker@^2.0.2:
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==

-estree-walker@^3.0.3:
+estree-walker@^3.0.2, estree-walker@^3.0.3:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
  integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
@@ -5260,6 +5268,13 @@ magic-string@^0.25.0, magic-string@^0.25.7:
  dependencies:
    sourcemap-codec "^1.4.8"

+magic-string@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
+  integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
 magic-string@^0.30.11, magic-string@^0.30.17:
  version "0.30.17"
  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
@@ -6703,7 +6718,16 @@ std-env@^3.9.0:
  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.9.0.tgz#1a6f7243b339dca4c9fd55e1c7504c77ef23e8f1"
  integrity sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==

-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6788,7 +6812,14 @@ stringify-object@^3.3.0:
    is-obj "^1.0.1"
    is-regexp "^1.0.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Author	SHA1	Message	Date
jxxghp	d3f9c04209	更新插件组件文档，调整多个组件以支持关闭功能，增强用户交互体验，并修正配置示例以反映最新的代码结构和依赖关系。	2025-05-07 08:21:44 +08:00
jxxghp	d3a6703a77	添加关闭页面的功能，更新多个组件以支持新的事件通知机制，并调整文档以反映最新的功能变化，提升用户交互体验。	2025-05-07 06:59:53 +08:00
jxxghp	1100fa47be	更新 PluginConfigDialog.vue	2025-05-07 00:25:19 +08:00
jxxghp	1e33087786	更新插件组件文档	2025-05-07 00:05:25 +08:00
jxxghp	e59423e912	将样式标签修改为 scoped，以提高样式的局部作用域，增强组件的样式隔离性。	2025-05-07 00:00:02 +08:00
jxxghp	146a1fe23d	更新多个组件以支持新的事件通知机制，添加切换到配置页面的功能，调整文档以反映组件文件名的变化，提升用户交互体验。	2025-05-06 23:56:28 +08:00
jxxghp	4586f6982a	优化多个组件的远程加载逻辑，移除不必要的属性绑定，增强错误处理机制，提升用户体验。	2025-05-06 23:31:37 +08:00
jxxghp	703204c69a	优化 Vite 配置，移除不再使用的代理规则，更新多个组件以增强远程组件加载逻辑，添加错误处理和加载状态显示，提升用户体验。	2025-05-06 21:34:49 +08:00
jxxghp	05cc160311	在 Vite 配置中添加新的代理规则，支持 '/plugin_static' 路径的请求转发至本地 API	2025-05-06 13:16:35 +08:00
jxxghp	0568f8a85d	更新 Vite 配置，修改主机名称为 'MoviePilot'，优化插件配置，调整共享依赖格式以简化配置。	2025-05-06 13:00:36 +08:00
jxxghp	36b113ef1c	更新 module-federation-guide.md	2025-05-06 11:58:01 +08:00
jxxghp	520180f6f5	更新模块联邦文档，调整远程组件API路径格式，优化组件加载逻辑，移除不必要的注册步骤，增强代码可读性。	2025-05-06 11:44:08 +08:00
jxxghp	d349d2b500	增强模块联邦支持，添加动态导入远程模块的声明，更新示例项目以展示新组件结构和配置，调整 Vite 配置以支持更灵活的远程组件加载。	2025-05-06 08:53:33 +08:00
jxxghp	643ca35aed	增强远程组件注册机制，添加动态注册和获取功能，更新相关文档以指导插件开发者。调整多个组件以支持新注册逻辑。	2025-05-05 22:13:07 +08:00
jxxghp	36ef7ba589	更新 README 文档，调整开发和配置部分的标题格式，以提高可读性和一致性。	2025-05-05 21:44:22 +08:00
jxxghp	b5761bd18d	更新组件声明，移除 LocaleSwitcher 和 ThemeSwitcher，更新 README 文档以增强模块联邦功能的描述，并调整 Vite 配置以支持 ESNext 目标。	2025-05-05 21:41:03 +08:00
jxxghp	047e827884	添加 @originjs/vite-plugin-federation 依赖，并在多个组件中实现远程组件加载功能	2025-05-05 21:26:53 +08:00
jxxghp	48828fd72d	更新消息模板标题，添加国际化支持	2025-05-05 20:34:13 +08:00
jxxghp	3f4165e4b1	更新国际化文件，添加消息模板相关文本，并优化模板编辑器界面	2025-05-05 20:31:15 +08:00
jxxghp	6d789ed73b	Merge pull request #330 from wikrin/template feat(setting): 添加消息推送自定义选项	2025-05-05 19:30:42 +08:00
Attente	e77297f7b2	feat(setting): 添加消息推送自定义选项 - wikrin/MoviePilot@20c1f30	2025-05-05 05:43:48 +08:00
jxxghp	bb52a4704f	更新 zh-TW.ts	2025-05-04 14:44:13 +08:00
jxxghp	127df15674	更新 zh-CN.ts	2025-05-04 14:43:45 +08:00
jxxghp	95bcc263e8	更新 en-US.ts	2025-05-04 14:43:04 +08:00
jxxghp	20b120c247	在 PluginConfigDialog.vue 和 PluginDataDialog.vue 中，将错误提示从 $toast 更改为 console.error，以便更好地调试组件加载失败的情况，并在错误信息中添加详细的错误描述。	2025-05-03 23:29:24 +08:00
jxxghp	e644f6bacc	更新 DashboardElement.vue	2025-05-03 22:55:03 +08:00
jxxghp	5e9c7124ce	更新 PluginConfigDialog.vue	2025-05-03 22:54:19 +08:00
jxxghp	84e121bc0e	更新 PluginDataDialog.vue	2025-05-03 22:53:32 +08:00
jxxghp	abff2071bd	在多个组件中优化动态加载逻辑，使用 API 获取组件并处理加载失败情况，以提升用户体验和代码健壮性	2025-05-03 22:31:38 +08:00
jxxghp	078afd5174	在多语言文件中添加管理员和用户ID列表的占位符文本，以提升用户输入体验	2025-05-03 21:36:38 +08:00
jxxghp	4a8cf16012	在多个组件中添加渲染模式支持，优化插件配置和数据加载逻辑，增强用户体验和代码可读性	2025-05-03 10:04:50 +08:00
jxxghp	04e9b68e4a	在 custom.scss 中添加 .match-height.v-row 样式，确保 .v-card 组件的高度为 100%，以提升布局一致性	2025-05-02 22:03:17 +08:00
jxxghp	f12c3dac9f	在 FileBrowser.vue 组件中，更新存储图标逻辑，添加默认图标以提升用户体验	2025-05-02 21:50:08 +08:00
jxxghp	73b9663b27	优化 resource.vue 中搜索标题栏的样式，调整字体类名和布局，以提升界面美观性和一致性	2025-05-02 21:14:24 +08:00
jxxghp	a73068069c	调整 TorrentItem.vue 组件，修改图标和名称的布局样式，以提升界面美观性和可读性	2025-05-02 21:07:39 +08:00
jxxghp	2f963ba7ab	调整 resource.vue 中搜索标题的字体大小，从 1.5rem 修改为 1.2rem，以改善界面一致性	2025-05-02 20:50:31 +08:00
jxxghp	9df70e5485	优化 StorageCard.vue 组件，简化存储信息显示逻辑，提升代码可读性	2025-05-02 20:43:37 +08:00
jxxghp	dfa34f090b	更新 resource.vue	2025-05-02 20:26:04 +08:00
jxxghp	388e9987cd	更新 resource.vue	2025-05-02 20:17:28 +08:00
jxxghp	9fe434849c	优化用户通知组件，增加通知列表容器样式以支持滚动，提升用户体验	2025-05-02 13:28:59 +08:00
jxxghp	95edaa99b6	更新国际化文本，将“类型”和“内容”替换为“渠道”和“用户ID”以提升用户体验	2025-05-02 12:09:14 +08:00
jxxghp	b3501d791e	更新 StorageCard.vue	2025-05-02 09:57:16 +08:00
jxxghp	5f2e93dde3	添加下载器和媒体服务器选项，重构相关组件以支持新功能，并更新国际化文本以提升用户体验	2025-05-02 08:01:19 +08:00
jxxghp	bf22d7f5e9	更新 package.json	2025-05-01 22:44:35 +08:00
jxxghp	08bbe8d841	优化文件重命名对话框，添加“自动识别名称”按钮，并更新国际化文本以支持新功能	2025-05-01 20:27:56 +08:00
jxxghp	572293bb4d	重构存储选项，更新为存储属性，优化存储字典和图标字典的生成逻辑，提升组件对存储配置的支持	2025-05-01 19:56:06 +08:00
jxxghp	f56d1c68c7	更新存储卡组件，添加自定义存储配置对话框，优化存储名称显示，并完善国际化文本	2025-05-01 19:35:08 +08:00
jxxghp	900dd6e958	添加自定义存储选项，更新存储卡组件以支持关闭事件，并完善国际化文本	2025-05-01 13:51:13 +08:00
jxxghp	5327c04e7e	添加自定义下载器和媒体服务器选项	2025-05-01 13:41:02 +08:00
jxxghp	f1835dd46c	更新验证器：为必填项和数字输入添加国际化支持，提升用户体验	2025-04-30 10:57:35 +08:00