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

examples/plugin-component/README.md

@@ -36,175 +36,7 @@ plugin-component/
 └── package.json           # 依赖配置
 ```
 
-## 3. 配置说明
+## 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)。
+- [模块联邦开发指南](../../docs/module-federation-guide.md)
+- [模块联邦问题排查指南](../../docs/federation-troubleshooting.md)。

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

@@ -99,6 +99,7 @@
         <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>
@@ -113,6 +114,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  api: {
+    type: any,
+    default: () => {},
+  },
 })
 
 // 表单状态
@@ -162,7 +167,7 @@ onMounted(() => {
 })
 
 // 自定义事件，用于保存配置
-const emit = defineEmits(['save'])
+const emit = defineEmits(['save', 'close', 'switch'])
 
 // 保存配置
 async function saveConfig() {
@@ -198,6 +203,11 @@ function resetForm() {
     form.value.resetValidation()
   }
 }
+
+// 通知主应用关闭组件
+function notifyClose() {
+  emit('close')
+}
 </script>
 
 <style scoped>

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

@@ -59,6 +59,10 @@
           <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>
@@ -67,6 +71,14 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 
+// 接收初始配置
+const props = defineProps({
+  api: {
+    type: any,
+    default: () => {},
+  },
+})
+
 // 组件状态
 const title = ref('插件详情页面')
 const loading = ref(true)
@@ -77,7 +89,7 @@ const status = ref('running')
 const lastUpdated = ref('')
 
 // 自定义事件，用于通知主应用刷新数据
-const emit = defineEmits(['action', 'switch'])
+const emit = defineEmits(['action', 'switch', 'close'])
 
 // 获取状态图标
 function getItemIcon(type) {
@@ -147,6 +159,11 @@ function notifySwitch() {
   emit('switch')
 }
 
+// 通知主应用关闭组件
+function notifyClose() {
+  emit('close')
+}
+
 // 组件挂载时加载数据
 onMounted(() => {
   refreshData()

examples/plugin-component/vite.config.js

@@ -6,7 +6,7 @@ export default defineConfig({
   plugins: [
     vue(),
     federation({
-      name: 'LogsClean',
+      name: 'MyPlugin',
       filename: 'remoteEntry.js',
       exposes: {
         './Page': './src/components/Page.vue',
@@ -27,9 +27,4 @@ export default defineConfig({
     cors: true,   // 启用CORS
     origin: 'http://localhost:5001'
   },
-  preview: {
-    port: 5001,   // 保持与server相同的端口
-    cors: true,   // 启用CORS
-    origin: 'http://localhost:5001'
-  }
 })