移除 Config.vue 和 Dashboard.vue 中的样式，更新 Page.vue 以使用 API 获取最近记录，增强组件功能和代码整洁性。

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

@@ -208,11 +208,4 @@ function resetForm() {
 function notifyClose() {
   emit('close')
 }
-</script>
+</script>
-
-<style scoped>
-.plugin-config {
-  padding: 16px;
-  inline-size: 100%;
-}
-</style>

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

@@ -295,20 +295,4 @@ onUnmounted(() => {
     clearInterval(refreshTimer)
   }
 })
-</script>
+</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>

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

@@ -73,6 +73,10 @@ import { ref, onMounted } from 'vue'
 
 // 接收初始配置
 const props = defineProps({
+  model: {
+    type: Object,
+    default: () => {},
+  },
   api: {
     type: Object,
     default: () => {},
@@ -121,8 +125,6 @@ async function refreshData() {
   error.value = null
 
   try {
-    // 模拟API调用 - 实际开发中应使用 fetch 调用真实API
-    await new Promise(resolve => setTimeout(resolve, 1000))
 
     // 模拟数据
     stats.value = {
@@ -133,14 +135,8 @@ async function refreshData() {
       '综艺': Math.floor(Math.random() * 100) + 5,
     }
 
-    // 模拟最近记录
+    // 演示使用api模块调用插件接口
-    recentItems.value = [
+    recentItems.value = await props.api.get(`plugin/MyPlugin/history`)
-      { 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()
@@ -169,10 +165,3 @@ onMounted(() => {
   refreshData()
 })
 </script>
-
-<style scoped>
-.plugin-page {
-  padding: 16px;
-  inline-size: 100%;
-}
-</style>