feat: 调整自动引入组件，新增html展示页面。

web/src/view/systemTools/aiPainter/aiPainter.vue

@@ -1,27 +1,40 @@
 <template>
 <div>
-    <div class="w-full">
+  <div class="gva-search-box" >
+    <div class="w-full relative">
+      <el-input v-model="prompt" type="textarea" :rows="8" class="w-full"></el-input>
+      <div class="absolute right-2 bottom-2">
+        <el-button :loading="loading" @click="aiPainter()" type="primary"><ai-gva />{{html?'修改':'生成'}}</el-button>
+        <el-button :loading="loading" v-if="html" @click="aiPainter(true)" type="primary"><ai-gva />重新生成</el-button>
+        <el-button :loading="loading" v-if="html" @click="getCode" type="primary">复制代码</el-button>
+      </div>
     </div>
-    <div class="gva-search-box" >
-        <div class="w-full relative">
-        <el-input v-model="prompt" type="textarea" :rows="8" class="w-full"></el-input>
-        <el-button :loading="loading" @click="aiPainter" type="primary" class="absolute right-2 bottom-2"><ai-gva />{{html?'修改':'生成'}}</el-button>
-        </div>
+  </div>
+    <div class="w-full">
+      <DynamicHtmlRenderer :htmlContent="html" />
     </div>
 </div>
 </template>
 
 <script setup>
 import {painter} from "@/api/autoCode";
+import DynamicHtmlRenderer from "@/view/systemTools/aiPainter/components/dynamicHtmlRenderer.vue";
 import { ref } from 'vue'
 const loading = ref(false)
 const prompt = ref('')
 const html = ref(``)
-const aiPainter = async () => {
+const aiPainter = async (flag) => {
     const res = await painter({
-        html: html.value,
+        html: flag?'':html.value,
         prompt: prompt.value
     })
     html.value = res.data
 }
-</script>
+const getCode = () => {
+    navigator.clipboard.writeText(html.value).then(() => {
+       Message.success('复制成功');
+    }, () => {
+      Message.error('复制失败');
+    });
+}
+</script>

web/src/view/systemTools/aiPainter/components/dynamicHtmlRenderer.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <iframe ref="iframe" class="w-full h-screen"></iframe>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+
+const props = defineProps({
+  htmlContent: {
+    type: String,
+    required: true,
+  },
+});
+
+const iframe = ref(null);
+
+const updateIframeContent = () => {
+  if (iframe.value) {
+    const doc = iframe.value.contentDocument || iframe.value.contentWindow.document;
+    doc.open();
+    doc.write(`
+      <html>
+        <head>
+          <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+        </head>
+        <body>${props.htmlContent}</body>
+      </html>
+    `);
+    doc.close();
+  }
+};
+
+onMounted(() => {
+  updateIframeContent();
+});
+
+watch(() => props.htmlContent, () => {
+  updateIframeContent();
+});
+</script>
+
+<style scoped>
+
+</style>