From 0cb42c11173f78862daf9b5bb6c301597b713be8 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 12 Jan 2025 18:05:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20FormRender=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E4=BD=BF=E7=94=A8=20RenderProps=20=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E6=9B=BF=E4=BB=A3=E5=8E=9F=E6=9C=89=E7=9A=84=20config?=
 =?UTF-8?q?=20=E7=B1=BB=E5=9E=8B=EF=BC=8C=E5=B9=B6=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E9=80=BB=E8=BE=91=E4=BB=A5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=20html=20=E5=92=8C=20text=20=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/render/FormRender.vue | 35 +++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/render/FormRender.vue b/src/components/render/FormRender.vue
index 419496d6..7cde9579 100644
--- a/src/components/render/FormRender.vue
+++ b/src/components/render/FormRender.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { RenderProps } from '@/api/types'
 import { h, resolveComponent, defineProps } from 'vue'
 
 // 定义 props
-const props = defineProps<{
-  config: Record<string, any> // JSON 配置
+defineProps<{
+  config: RenderProps // JSON 配置
   model: Record<string, any> // 数据模型
 }>()
 
@@ -68,7 +69,7 @@ const renderSlotContent = (slotContent: any, model: any, slotScope: any) => {
  * @returns 渲染的组件 VNode
  */
 const renderComponent = (config: any, model: any, slotScope: any = {}) => {
-  const { component, props: componentProps = {}, content = [], slots = {} } = config
+  const { component, props: componentProps = {}, content = [], slots = {}, html, text } = config
 
   // 动态解析组件
   const Component = resolveComponent(component)
@@ -82,10 +83,30 @@ const renderComponent = (config: any, model: any, slotScope: any = {}) => {
     slotNodes[slotName] = (slotScopeData: any) => renderSlotContent(slotContent, model, slotScopeData)
   }
 
+  // 渲染组件内容
+  const renderContent = () => {
+    // 如果配置了 `html`，直接渲染为 HTML 内容
+    if (html) {
+      return h('div', { innerHTML: typeof html === 'string' ? html : model[html] })
+    }
+
+    // 如果配置了 `text`，直接渲染为文本内容
+    if (text) {
+      return typeof text === 'string' ? text : model[text]
+    }
+
+    // 如果配置了 `content`，递归渲染子组件
+    if (Array.isArray(content)) {
+      return content.map((childConfig: any) => renderComponent(childConfig, model))
+    }
+
+    return null
+  }
+
   // 渲染组件
   return h(Component, parsedProps, {
     ...slotNodes,
-    default: () => content.map((childConfig: any) => renderComponent(childConfig, model)),
+    default: renderContent, // 确保默认插槽只包含当前组件的内容
   })
 }
 </script>
@@ -93,10 +114,6 @@ const renderComponent = (config: any, model: any, slotScope: any = {}) => {
 <template>
   <!-- 调用递归渲染函数 -->
   <div>
-    <Component v-if="config.html" :is="config.component" v-bind="config.props" v-html="config.html" />
-    <Component v-else-if="config.text" :is="config.component" v-bind="config.props">
-      {{ config.text }}
-    </Component>
-    <Component v-else :is="renderComponent(config, model)" />
+    <Component :is="renderComponent(config, model)" />
   </div>
 </template>