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

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()