From e636b1e2259e964aa971a2949ae258536acfae25 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 25 Jul 2023 11:41:24 +0800
Subject: [PATCH] plugin page render

---
 src/components/cards/PluginCard.vue  | 18 +++++++++----
 src/components/render/FormRender.vue |  3 +++
 src/components/render/PageRender.vue | 39 ++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 src/components/render/PageRender.vue

diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index 6d0f7c32..075aad0f 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -3,6 +3,7 @@ import { useToast } from 'vue-toast-notification'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
 import FormRender from '@/components/render/FormRender.vue'
+import PageRender from '@/components/render/PageRender.vue'
 import { isNullOrEmptyObject } from '@core/utils'
 
 // 输入参数
@@ -112,7 +113,7 @@ async function savePluginConf() {
 }
 
 // 显示插件详情
-function showPluginInfo() {
+async function showPluginInfo() {
   pluginConfigDialog.value = false
   pluginInfoDialog.value = true
 }
@@ -140,7 +141,7 @@ const dropdownItems = ref([
 onBeforeMount(async () => {
   await loadPluginForm()
   await loadPluginConf()
-  await loadPluginPage()
+  loadPluginPage()
 })
 </script>
 
@@ -205,7 +206,7 @@ onBeforeMount(async () => {
     scrollable
     persistent
   >
-    <VCard :title="`插件 - ${props.plugin?.plugin_name}`">
+    <VCard :title="props.plugin?.plugin_name">
       <DialogCloseBtn @click="pluginConfigDialog = false" />
       <VCardText>
         <FormRender
@@ -234,9 +235,16 @@ onBeforeMount(async () => {
     scrollable
     persistent
   >
-    <VCard :title="`插件 - ${props.plugin?.plugin_name}`">
+    <VCard :title="`${props.plugin?.plugin_name} - 详情`">
       <DialogCloseBtn @click="pluginInfoDialog = false" />
-      <VCardText />
+      <VCardText>
+        <PageRender
+          v-for="(item, index) in pluginPageItems"
+          :key="index"
+          :config="item"
+          :handler="pluginInfoDialog"
+        />
+      </VCardText>
       <VCardActions>
         <VSpacer />
         <VBtn @click="pluginInfoDialog = false">
diff --git a/src/components/render/FormRender.vue b/src/components/render/FormRender.vue
index f1b72a8b..9b3056c1 100644
--- a/src/components/render/FormRender.vue
+++ b/src/components/render/FormRender.vue
@@ -4,6 +4,7 @@ import { type PropType, ref } from 'vue'
 // 组件接口
 interface RenderProps {
   component: string
+  text: string
   content?: any
   props?: any
 }
@@ -17,6 +18,7 @@ const elementProps = defineProps({
 // 配置元素
 const formItem = ref<RenderProps>(elementProps.config || {
   component: 'div',
+  text: '',
   props: {},
   content: [],
 })
@@ -31,6 +33,7 @@ const formData = ref<any>(elementProps.form || {})
     v-bind="formItem.props"
     v-model="formData[formItem.props?.model || '']"
   >
+    {{ formItem.text }}
     <FormRender
       v-for="(innerItem, innerIndex) in (formItem.content || [])"
       :key="innerIndex"
diff --git a/src/components/render/PageRender.vue b/src/components/render/PageRender.vue
new file mode 100644
index 00000000..fbe35e8c
--- /dev/null
+++ b/src/components/render/PageRender.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { type PropType, ref } from 'vue'
+
+// 组件接口
+interface RenderProps {
+  component: string
+  text: string
+  content?: any
+  props?: any
+}
+
+// 输入参数
+const elementProps = defineProps({
+  config: Object as PropType<RenderProps>,
+  handler: Boolean,
+})
+
+// 配置元素
+const formItem = ref<RenderProps>(elementProps.config || {
+  component: 'div',
+  text: '',
+  props: {},
+  content: [],
+})
+</script>
+
+<template>
+  <Component
+    :is="formItem.component"
+    v-bind="formItem.props"
+  >
+    {{ formItem.text }}
+    <PageRender
+      v-for="(innerItem, innerIndex) in (formItem.content || [])"
+      :key="innerIndex"
+      :config="innerItem"
+    />
+  </Component>
+</template>