From 3023214072fce7392c94059aa4a28546bc89c52e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 11 Jan 2025 16:24:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20PluginCard=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=9B=BF=E6=8D=A2=20FormRender=20=E4=B8=BA?=
 =?UTF-8?q?=20DynamicRender=EF=BC=8C=E4=BC=98=E5=8C=96=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E9=80=BB=E8=BE=91=EF=BC=9B=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E4=B8=8D=E5=86=8D=E4=BD=BF=E7=94=A8=E7=9A=84=20FormRender=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/PluginCard.vue     | 20 ++++-
 src/components/render/DynamicRender.vue | 98 +++++++++++++++++++++++++
 src/components/render/FormRender.vue    | 76 -------------------
 src/components/render/PageRender.vue    | 10 ---
 4 files changed, 115 insertions(+), 89 deletions(-)
 create mode 100644 src/components/render/DynamicRender.vue
 delete mode 100644 src/components/render/FormRender.vue

diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index f7cb8676..c3dafae3 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -3,7 +3,7 @@ import { useToast } from 'vue-toast-notification'
 import { useConfirm } from 'vuetify-use-dialog'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
-import FormRender from '@/components/render/FormRender.vue'
+import DynamicRender from '@/components/render/DynamicRender.vue'
 import PageRender from '@/components/render/PageRender.vue'
 import VersionHistory from '@/components/misc/VersionHistory.vue'
 import { isNullOrEmptyObject } from '@core/utils'
@@ -490,7 +490,12 @@ watch(
         <DialogCloseBtn v-model="pluginConfigDialog" />
         <VDivider />
         <VCardText>
-          <FormRender v-for="(item, index) in pluginFormItems" :key="index" :config="item" :form="pluginConfigForm" />
+          <DynamicRender
+            v-for="(item, index) in pluginFormItems"
+            :key="index"
+            :config="item"
+            :model="pluginConfigForm"
+          />
         </VCardText>
         <VCardActions class="pt-3">
           <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo" variant="outlined" color="info">
@@ -509,7 +514,16 @@ watch(
         <VCardText class="min-h-40">
           <PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
         </VCardText>
-        <VFab icon="mdi-cog" location="bottom" size="x-large" fixed app appear @click="showPluginConfig" :class="{ 'mb-10': appMode }" />
+        <VFab
+          icon="mdi-cog"
+          location="bottom"
+          size="x-large"
+          fixed
+          app
+          appear
+          @click="showPluginConfig"
+          :class="{ 'mb-10': appMode }"
+        />
       </VCard>
     </VDialog>
 
diff --git a/src/components/render/DynamicRender.vue b/src/components/render/DynamicRender.vue
new file mode 100644
index 00000000..ba1bc57f
--- /dev/null
+++ b/src/components/render/DynamicRender.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { h, resolveComponent, defineProps } from 'vue'
+
+// 定义 props
+const props = defineProps<{
+  config: Record<string, any> // JSON 配置
+  model: Record<string, any> // 数据模型
+}>()
+
+/**
+ * 解析属性，支持 v-model 和动态绑定
+ * @param rawProps 原始属性
+ * @param model 数据模型
+ * @returns 解析后的属性
+ */
+const parseProps = (rawProps: Record<string, any>, model: Record<string, any>) => {
+  const parsedProps: Record<string, any> = {}
+
+  for (const [key, value] of Object.entries(rawProps)) {
+    if (key === 'modelvalue') {
+      // 将 modelvalue 转换为 v-model:value 的形式
+      parsedProps['value'] = model[value]
+      parsedProps['onUpdate:value'] = (newValue: any) => {
+        model[value] = newValue
+      }
+    } else if (key === 'model') {
+      // 处理 v-model
+      parsedProps['modelValue'] = model[value]
+      parsedProps['onUpdate:modelValue'] = (newValue: any) => {
+        model[value] = newValue
+      }
+    } else if (key.startsWith('model:')) {
+      // 处理 v-model:<prop>
+      const propName = key.replace('model:', '')
+      parsedProps[propName] = model[value]
+      parsedProps[`onUpdate:${propName}`] = (newValue: any) => {
+        model[value] = newValue
+      }
+    } else {
+      // 普通属性直接赋值
+      parsedProps[key] = typeof value === 'string' && value in model ? model[value] : value
+    }
+  }
+
+  return parsedProps
+}
+
+/**
+ * 渲染插槽内容
+ * @param slotContent 插槽配置
+ * @param model 数据模型
+ * @param slotScope 插槽作用域
+ */
+const renderSlotContent = (slotContent: any, model: any, slotScope: any) => {
+  if (Array.isArray(slotContent)) {
+    // 如果插槽内容是数组，递归渲染
+    return slotContent.map(childConfig => renderComponent(childConfig, model, slotScope))
+  }
+  // 如果插槽内容是单个配置，递归渲染
+  return renderComponent(slotContent, model, slotScope)
+}
+
+/**
+ * 渲染组件函数（递归支持嵌套）
+ * @param config JSON 配置
+ * @param model 数据模型
+ * @param slotScope 插槽作用域
+ * @returns 渲染的组件 VNode
+ */
+const renderComponent = (config: any, model: any, slotScope: any = {}) => {
+  const { component, props: componentProps = {}, content = [], slots = {} } = config
+
+  // 动态解析组件
+  const Component = resolveComponent(component)
+
+  // 解析属性
+  const parsedProps = parseProps(componentProps, model)
+
+  // 动态插槽解析
+  const slotNodes: Record<string, any> = {}
+  for (const [slotName, slotContent] of Object.entries(slots)) {
+    slotNodes[slotName] = (slotScopeData: any) => renderSlotContent(slotContent, model, slotScopeData)
+  }
+
+  // 渲染组件
+  return h(Component, parsedProps, {
+    ...slotNodes,
+    default: () => content.map((childConfig: any) => renderComponent(childConfig, model)),
+  })
+}
+</script>
+
+<template>
+  <!-- 调用递归渲染函数 -->
+  <div>
+    <component :is="renderComponent(config, model)" />
+  </div>
+</template>
diff --git a/src/components/render/FormRender.vue b/src/components/render/FormRender.vue
deleted file mode 100644
index e16e661c..00000000
--- a/src/components/render/FormRender.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts" setup>
-import { RenderProps } from '@/api/types'
-import { type PropType, ref } from 'vue'
-
-// 输入参数
-defineProps({
-  config: Object as PropType<RenderProps>,
-  form: Object as PropType<any>,
-})
-</script>
-
-<template>
-  <!-- 使用modelvalue -->
-  <Component
-    :is="config.component"
-    v-if="!config.html && !!config.props?.modelvalue"
-    v-bind="config.props"
-    v-model:value="form[config.props?.modelvalue]"
-  >
-    {{ config.text }}
-    <!-- slots -->
-    <template v-for="(slotContents, name) in config.slots || {}" :key="name" v-slot:[name]="{ _props }">
-      <slot :name="name" v-bind="_props">
-        <template v-for="(slotItem, slotIndex) in slotContents || []" :key="slotIndex">
-          <FormRender
-            v-if="!!slotItem.props?.modelvalue"
-            v-model:value="form[slotItem.props?.modelvalue]"
-            :config="slotItem"
-            :form="form"
-          />
-          <FormRender v-else v-model="form[slotItem.props?.model]" :config="slotItem" :form="form" />
-        </template>
-      </slot>
-    </template>
-    <!-- content -->
-    <template v-for="(innerItem, innerIndex) in config.content || []" :key="innerIndex">
-      <FormRender
-        v-if="!!innerItem.props?.modelvalue"
-        v-model:value="form[innerItem.props?.modelvalue]"
-        :config="innerItem"
-        :form="form"
-      />
-      <FormRender v-else v-model="form[innerItem.props?.model]" :config="innerItem" :form="form" />
-    </template>
-  </Component>
-  <!-- 使用html -->
-  <Component :is="config.component" v-else-if="config.html" v-bind="config.props" v-html="config.html" />
-  <!-- 使用model -->
-  <Component :is="config.component" v-else v-bind="config.props" v-model="form[config.props?.model]">
-    {{ config.text }}
-    <!-- slots -->
-    <template v-for="(slotContents, name) in config.slots || {}" :key="name" v-slot:[name]="{ _props }">
-      <slot :name="name" v-bind="_props">
-        <template v-for="(slotItem, slotIndex) in slotContents || []" :key="slotIndex">
-          <FormRender
-            v-if="!!slotItem.props?.modelvalue"
-            v-model:value="form[slotItem.props?.modelvalue]"
-            :config="slotItem"
-            :form="form"
-          />
-          <FormRender v-else v-model="form[slotItem.props?.model]" :config="slotItem" :form="form" />
-        </template>
-      </slot>
-    </template>
-    <!-- content -->
-    <template v-for="(innerItem, innerIndex) in config.content || []" :key="innerIndex">
-      <FormRender
-        v-if="!!innerItem.props?.modelvalue"
-        v-model:value="form[innerItem.props?.modelvalue]"
-        :config="innerItem"
-        :form="form"
-      />
-      <FormRender v-else v-model="form[innerItem.props?.model]" :config="innerItem" :form="form" />
-    </template>
-  </Component>
-</template>
diff --git a/src/components/render/PageRender.vue b/src/components/render/PageRender.vue
index a2c72f88..59e1f2ef 100644
--- a/src/components/render/PageRender.vue
+++ b/src/components/render/PageRender.vue
@@ -56,16 +56,6 @@ watchEffect(() => {
 <template>
   <Component :is="config?.component" v-if="!config?.html" v-bind="config?.props" v-on="componentEvents">
     {{ config?.text }}
-    <template v-for="(content, name) in config?.slots || {}" :key="name" v-slot:[name]="{ _props }">
-      <slot :name="name" v-bind="_props">
-        <PageRender
-          v-for="(slotItem, slotIndex) in content || []"
-          :key="slotIndex"
-          :config="slotItem"
-          @action="emit('action')"
-        />
-      </slot>
-    </template>
     <PageRender
       v-for="(innerItem, innerIndex) in config?.content || []"
       :key="innerIndex"