mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-15 20:39:34 +08:00
211 lines
4.8 KiB
Markdown
211 lines
4.8 KiB
Markdown
# 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. 配置说明
|
||
|
||
### vite.config.js
|
||
|
||
```js
|
||
import { defineConfig } from 'vite'
|
||
import vue from '@vitejs/plugin-vue'
|
||
import federation from '@originjs/vite-plugin-federation'
|
||
|
||
export default defineConfig({
|
||
plugins: [
|
||
vue(),
|
||
federation({
|
||
name: 'my_plugin', // 插件名称，建议与插件ID保持一致
|
||
filename: 'remoteEntry.js',
|
||
exposes: {
|
||
'./Page': './src/components/Page.vue',
|
||
'./Config': './src/components/Config.vue',
|
||
'./Dashboard': './src/components/Dashboard.vue',
|
||
},
|
||
shared: {
|
||
vue: { requiredVersion: false },
|
||
vuetify: { requiredVersion: false }
|
||
}
|
||
})
|
||
],
|
||
build: {
|
||
target: 'esnext', // 必须设置为esnext以支持顶层await
|
||
minify: false, // 开发阶段建议关闭混淆
|
||
cssCodeSplit: false,
|
||
rollupOptions: {
|
||
output: {
|
||
format: 'esm', // 必须使用ESM格式
|
||
entryFileNames: '[name].js',
|
||
chunkFileNames: '[name].js',
|
||
}
|
||
}
|
||
},
|
||
server: {
|
||
port: 5001, // 使用不同于主应用的端口
|
||
cors: true, // 启用CORS
|
||
origin: 'http://localhost:5001'
|
||
}
|
||
})
|
||
```
|
||
|
||
## 4. 组件规范
|
||
|
||
### Page.vue（详情页面）
|
||
|
||
详情页面用于展示插件的数据和状态：
|
||
|
||
- 接收 `action` 事件用于通知主应用刷新数据
|
||
- 可以包含交互功能和数据展示
|
||
|
||
```vue
|
||
<script setup>
|
||
// 自定义事件，用于通知主应用刷新数据
|
||
const emit = defineEmits(['action'])
|
||
|
||
// 通知主应用刷新数据
|
||
function notifyRefresh() {
|
||
emit('action')
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### Config.vue（配置页面）
|
||
|
||
配置页面用于接收和保存插件配置：
|
||
|
||
- 接收 `initialConfig` 属性获取初始配置
|
||
- 发出 `save` 事件保存配置数据
|
||
|
||
```vue
|
||
<script setup>
|
||
// 接收初始配置
|
||
const props = defineProps({
|
||
initialConfig: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
|
||
// 自定义事件，用于保存配置
|
||
const emit = defineEmits(['save'])
|
||
|
||
// 保存配置
|
||
function saveConfig() {
|
||
emit('save', configData)
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### Dashboard.vue（仪表板组件）
|
||
|
||
仪表板组件用于在主页上显示插件数据：
|
||
|
||
- 接收 `config` 属性获取仪表板配置
|
||
- 接收 `allowRefresh` 属性控制是否允许自动刷新
|
||
|
||
```vue
|
||
<script setup>
|
||
// 接收配置和刷新控制
|
||
const props = defineProps({
|
||
config: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
allowRefresh: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
|
||
## 5. 构建和部署
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
# 或
|
||
yarn build
|
||
```
|
||
|
||
构建后在 `dist` 目录生成以下关键文件：
|
||
|
||
- `remoteEntry.js` - 模块联邦入口文件
|
||
- `Page.js` - 详情页面组件
|
||
- `Config.js` - 配置页面组件
|
||
- `Dashboard.js` - 仪表板组件
|
||
|
||
### 部署到插件后端
|
||
|
||
将构建后的文件部署到插件后端插件目录下，并上传到Github仓库。
|
||
|
||
## 6. 插件后端集成
|
||
|
||
在插件的后端代码中，实现以下方法来集成远程组件：
|
||
|
||
```python
|
||
def get_render_mode() -> Tuple[str, str]:
|
||
"""
|
||
获取插件渲染模式
|
||
:return: 1、渲染模式，支持：vue/vuetify，默认vuetify
|
||
:return: 2、组件路径，默认 dist/assets
|
||
"""
|
||
return "vue", "dist/assets"
|
||
```
|
||
|
||
## 7. 常见问题排查
|
||
|
||
### 模块加载问题
|
||
|
||
如果遇到模块加载问题，请检查：
|
||
|
||
1. 确保 `build.target` 设置为 `esnext`
|
||
2. 验证共享依赖配置是否正确
|
||
3. 检查网络请求是否成功
|
||
4. 查看浏览器控制台错误信息
|
||
|
||
### 代码调试
|
||
|
||
在开发阶段可以：
|
||
|
||
1. 使用浏览器开发者工具进行调试
|
||
2. 启用 Vite 的详细日志：`localStorage.setItem('debug', 'vite:*')`
|
||
3. 使用 `console.log` 输出调试信息
|
||
|
||
更多详细说明请参考 [模块联邦开发指南](../../docs/module-federation-guide.md) 和 [模块联邦问题排查指南](../../docs/federation-troubleshooting.md)。
|