发布2.8.1 beta版本 (#2014)

AI: 增加了AI前端绘制功能，可以根据描述生成客户端页面【授权用户专属】

自动化： 自动化模板采用了function模式，更加方便用户二次开发和自定义改动

自动化： 默认携带ID和CreatedAt排序

自动化： 所有自动化Select模板默认支持select搜索

优化：http交互报错信息增加防止多次弹出错误遮罩机制

ICON: 优化ICON逻辑，防止多次加载svg

布局：增加侧边分栏模式
布局： 顶栏模式样式优化和高亮逻辑调整
优化： 个人配置不再需要手动点击保存，会根据变化自动保存

BUG: 修复了菜单点击设为主页勾选被取消的bug
安全： 更新了jwt版本，修复CVE-2025-30204
导出： 默认支持软删除过滤
代码： 优化了部分代码逻辑
本次更新需要重新执行 npm i

---------

Signed-off-by: joohwan <zhouhuan.chen@yunqutech.com　>
Co-authored-by: huiyifyj <jxfengyijie@gmail.com>
Co-authored-by: piexlMax(奇淼 <qimiaojiangjizhao@gmail.com>
Co-authored-by: okppop <okppop@protonmail.com>
Co-authored-by: joohwan <zhouhuan.chen@yunqutech.com　>
Co-authored-by: xuedinge <781408517@qq.com>

web/src/view/systemTools/autoCode/picture.vue

@@ -1,24 +1,120 @@
 <template>
   <div>
     <warning-bar
-        href="https://www.bilibili.com/video/BV1kv4y1g7nT?p=3"
-        title="此功能为开发环境使用，不建议发布到生产，具体使用效果请点我观看。"
+        href="https://www.gin-vue-admin.com/empower/"
+        title="此功能只针对授权用户开放，点我【购买授权】"
     />
     <div class="gva-search-box">
-      <div class="text-lg mb-2 text-gray-600">
-        使用AI创建<a
+      <div class="text-xl mb-2 text-gray-600">
+        AI前端工程师<a
           class="text-blue-600 text-sm ml-4"
           href="https://plugin.gin-vue-admin.com/#/layout/userInfo/center"
           target="_blank"
       >获取AiPath</a
       >
       </div>
+      
+      <!-- 选项模式 -->
+      <div class="mb-4">
+        <div class="mb-3">
+          <div class="text-base font-medium mb-2">页面用途</div>
+          <el-radio-group v-model="pageType" class="mb-2" @change="handlePageTypeChange">
+            <el-radio label="企业官网">企业官网</el-radio>
+            <el-radio label="电商页面">电商页面</el-radio>
+            <el-radio label="个人博客">个人博客</el-radio>
+            <el-radio label="产品介绍">产品介绍</el-radio>
+            <el-radio label="活动落地页">活动落地页</el-radio>
+            <el-radio label="其他">其他</el-radio>
+          </el-radio-group>
+          <el-input v-if="pageType === '其他'" v-model="pageTypeCustom" placeholder="请输入页面用途" class="w-full" />
+        </div>
+        
+        <div class="mb-3">
+          <div class="text-base font-medium mb-2">主要内容板块</div>
+          <el-checkbox-group v-model="contentBlocks" class="flex flex-wrap gap-2 mb-2">
+            <el-checkbox label="Banner轮播图">Banner轮播图</el-checkbox>
+            <el-checkbox label="产品/服务介绍">产品/服务介绍</el-checkbox>
+            <el-checkbox label="功能特点展示">功能特点展示</el-checkbox>
+            <el-checkbox label="客户案例">客户案例</el-checkbox>
+            <el-checkbox label="团队介绍">团队介绍</el-checkbox>
+            <el-checkbox label="联系表单">联系表单</el-checkbox>
+            <el-checkbox label="新闻/博客列表">新闻/博客列表</el-checkbox>
+            <el-checkbox label="价格表">价格表</el-checkbox>
+            <el-checkbox label="FAQ/常见问题">FAQ/常见问题</el-checkbox>
+            <el-checkbox label="用户评价">用户评价</el-checkbox>
+            <el-checkbox label="数据统计">数据统计</el-checkbox>
+            <el-checkbox label="商品列表">商品列表</el-checkbox>
+            <el-checkbox label="商品卡片">商品卡片</el-checkbox>
+            <el-checkbox label="购物车">购物车</el-checkbox>
+            <el-checkbox label="结算页面">结算页面</el-checkbox>
+            <el-checkbox label="订单跟踪">订单跟踪</el-checkbox>
+            <el-checkbox label="商品分类">商品分类</el-checkbox>
+            <el-checkbox label="热门推荐">热门推荐</el-checkbox>
+            <el-checkbox label="限时特惠">限时特惠</el-checkbox>
+            <el-checkbox label="其他">其他</el-checkbox>
+          </el-checkbox-group>
+          <el-input v-if="contentBlocks.includes('其他')" v-model="contentBlocksCustom" placeholder="请输入其他内容板块" class="w-full" />
+        </div>
+        
+        <div class="mb-3">
+          <div class="text-base font-medium mb-2">风格偏好</div>
+          <el-radio-group v-model="stylePreference" class="mb-2">
+            <el-radio label="简约">简约</el-radio>
+            <el-radio label="科技感">科技感</el-radio>
+            <el-radio label="温馨">温馨</el-radio>
+            <el-radio label="专业">专业</el-radio>
+            <el-radio label="创意">创意</el-radio>
+            <el-radio label="复古">复古</el-radio>
+            <el-radio label="奢华">奢华</el-radio>
+            <el-radio label="其他">其他</el-radio>
+          </el-radio-group>
+          <el-input v-if="stylePreference === '其他'" v-model="stylePreferenceCustom" placeholder="请输入风格偏好" class="w-full" />
+        </div>
+        
+        <div class="mb-3">
+          <div class="text-base font-medium mb-2">设计布局</div>
+          <el-radio-group v-model="layoutDesign" class="mb-2">
+            <el-radio label="单栏布局">单栏布局</el-radio>
+            <el-radio label="双栏布局">双栏布局</el-radio>
+            <el-radio label="三栏布局">三栏布局</el-radio>
+            <el-radio label="网格布局">网格布局</el-radio>
+            <el-radio label="画廊布局">画廊布局</el-radio>
+            <el-radio label="瀑布流">瀑布流</el-radio>
+            <el-radio label="卡片式">卡片式</el-radio>
+            <el-radio label="侧边栏+内容布局">侧边栏+内容布局</el-radio>
+            <el-radio label="分屏布局">分屏布局</el-radio>
+            <el-radio label="全屏滚动布局">全屏滚动布局</el-radio>
+            <el-radio label="混合布局">混合布局</el-radio>
+            <el-radio label="响应式">响应式</el-radio>
+            <el-radio label="其他">其他</el-radio>
+          </el-radio-group>
+          <el-input v-if="layoutDesign === '其他'" v-model="layoutDesignCustom" placeholder="请输入设计布局" class="w-full" />
+        </div>
+        
+        <div class="mb-3">
+          <div class="text-base font-medium mb-2">配色方案</div>
+          <el-radio-group v-model="colorScheme" class="mb-2">
+            <el-radio label="蓝色系">蓝色系</el-radio>
+            <el-radio label="绿色系">绿色系</el-radio>
+            <el-radio label="红色系">红色系</el-radio>
+            <el-radio label="黑白灰">黑白灰</el-radio>
+            <el-radio label="纯黑白">纯黑白</el-radio>
+            <el-radio label="暖色调">暖色调</el-radio>
+            <el-radio label="冷色调">冷色调</el-radio>
+            <el-radio label="其他">其他</el-radio>
+          </el-radio-group>
+          <el-input v-if="colorScheme === '其他'" v-model="colorSchemeCustom" placeholder="请输入配色方案" class="w-full" />
+        </div>
+      </div>
+      
+      <!-- 详细描述输入框 -->
       <div class="relative">
+        <div class="text-base font-medium mb-2">详细描述（可选）</div>
         <el-input
             v-model="prompt"
             :maxlength="2000"
             :placeholder="placeholder"
-            :rows="8"
+            :rows="5"
             resize="none"
             type="textarea"
             @blur="handleBlur"
@@ -28,12 +124,12 @@
           <el-tooltip effect="light">
             <template #content>
               <div>
-                【完全免费】前往<a
+                此功能仅针对授权用户开放，前往<a
                   class="text-blue-600"
-                  href="https://plugin.gin-vue-admin.com/#/layout/userInfo/center"
+                  href="https://www.gin-vue-admin.com/empower/"
                   target="_blank"
-              >插件市场个人中心</a
-              >申请AIPath，填入config.yaml的ai-path属性即可使用。
+              >购买授权</a
+              >
               </div>
             </template>
             <el-button
@@ -53,32 +149,54 @@
       <div v-if="!outPut">
         <el-empty :image-size="200"/>
       </div>
-      <div v-if="outPut">
-        <div v-for="(snippet, index) in htmlFromLLM" :key="index" class="mb-6 p-4 border">
-          <el-button type="primary" :icon="Upload" class="px-2 py-1" @click="copySnippet(snippet)" plain>复制</el-button>
-          <div class="mt-2">
-            <iframe-renderer :html="snippet" />
-          </div>
-        </div>
+      <div v-if="outPut && htmlFromLLM">
+        <el-tabs type="border-card">
+          <el-tab-pane label="页面预览">
+            <div class="h-[500px] overflow-auto bg-gray-50 p-4 rounded">
+              <div v-if="!loadedComponents" class="text-gray-500 text-center py-4">
+                组件加载中...
+              </div>
+              <component
+                v-else
+                :is="loadedComponents" 
+                class="vue-component-container w-full"
+              />
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="源代码">
+            <div class="relative h-[500px] overflow-auto bg-gray-50 p-4 rounded">
+              <el-button 
+                type="primary" 
+                :icon="DocumentCopy" 
+                class="absolute top-2 right-2 px-2 py-1" 
+                @click="copySnippet(htmlFromLLM)" 
+                plain
+              >
+                复制
+              </el-button>
+              <pre class="mt-10 whitespace-pre-wrap">{{ htmlFromLLM }}</pre>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { createWeb
-} from '@/api/autoCode'
-import {ref} from 'vue'
+import { createWeb } from '@/api/autoCode'
+import { ref, reactive, markRaw } from 'vue'
+import * as Vue from "vue";
 import WarningBar from '@/components/warningBar/warningBar.vue'
 import { ElMessage } from 'element-plus'
-
+import { defineAsyncComponent } from 'vue'
+import { DocumentCopy } from '@element-plus/icons-vue'
+import { loadModule } from "vue3-sfc-loader";
 
 defineOptions({
   name: 'Picture'
 })
 
-import IframeRenderer from '@/view/systemTools/autoCode/component/iframeRenderer.vue'
-
 const handleFocus = () => {
   document.addEventListener('keydown', handleKeydown);
 }
@@ -94,8 +212,8 @@ const handleKeydown = (event) => {
 }
 
 // 复制方法：把某个字符串写进剪贴板
-const copySnippet = (htmlString) => {
-  navigator.clipboard.writeText(htmlString)
+const copySnippet = (vueString) => {
+  navigator.clipboard.writeText(vueString)
       .then(() => {
         ElMessage({
           message: '复制成功',
@@ -110,32 +228,199 @@ const copySnippet = (htmlString) => {
       })
 }
 
+// 选项模式相关变量
+const pageType = ref('企业官网')
+const pageTypeCustom = ref('')
+const contentBlocks = ref(['Banner轮播图', '产品/服务介绍'])
+const contentBlocksCustom = ref('')
+const stylePreference = ref('简约')
+const stylePreferenceCustom = ref('')
+const layoutDesign = ref('响应式')
+const layoutDesignCustom = ref('')
+const colorScheme = ref('蓝色系')
+const colorSchemeCustom = ref('')
+
+// 页面用途与内容板块的推荐映射关系
+const pageTypeContentMap = {
+  '企业官网': ['Banner轮播图', '产品/服务介绍', '功能特点展示', '客户案例', '联系表单'],
+  '电商页面': ['Banner轮播图', '商品列表', '商品卡片', '购物车', '商品分类', '热门推荐', '限时特惠', '结算页面', '用户评价'],
+  '个人博客': ['Banner轮播图', '新闻/博客列表', '用户评价', '联系表单'],
+  '产品介绍': ['Banner轮播图', '产品/服务介绍', '功能特点展示', '价格表', 'FAQ/常见问题'],
+  '活动落地页': ['Banner轮播图', '功能特点展示', '联系表单', '数据统计']
+}
 
 const prompt = ref('')
 
 // 判断是否返回的标志
 const outPut = ref(false)
-// 容纳llm返回的html
-const htmlFromLLM = ref([])
+// 容纳llm返回的vue组件代码
+const htmlFromLLM = ref("")
 
-const llmAutoFunc = async () => {
-  const res = await createWeb({web: prompt.value, command: 'createWeb'})
-  if (res.code === 0) {
-    outPut.value = true
-    // 使用mock数据模拟大模型返回值
-    htmlFromLLM.value.push(res.data)
+// 存储加载的组件
+const loadedComponents = ref(null)
+
+const loadVueComponent = async (vueCode) => {
+  try {
+    // 使用内存中的虚拟路径
+    const fakePath = `virtual:component-0.vue`
+    
+    const component = defineAsyncComponent({
+      loader: async () => {
+        try {
+          const options = {
+            moduleCache: {
+              vue: Vue,
+            },
+            getFile(url) {
+              // 处理所有可能的URL格式，包括相对路径、绝对路径等
+              // 提取路径的最后部分，忽略查询参数
+              const fileName = url.split('/').pop().split('?')[0]
+              const componentFileName = fakePath.split('/').pop()
+              
+              // 如果文件名包含我们的组件名称，或者url完全匹配fakePath
+              if (fileName === componentFileName || url === fakePath || 
+                  url === `./component/0.vue`) {
+                return Promise.resolve({
+                  type: '.vue',
+                  getContentData: () => vueCode
+                })
+              }
+              
+              console.warn('请求未知文件:', url)
+              return Promise.reject(new Error(`找不到文件: ${url}`))
+            },
+            addStyle(textContent) {
+              // 不再将样式添加到document.head，而是返回样式内容
+              // 稍后会将样式添加到Shadow DOM中
+              return textContent
+            },
+            handleModule(type, source, path, options) {
+              // 默认处理器
+              return undefined
+            },
+            log(type, ...args) {
+              console.log(`[vue3-sfc-loader] [${type}]`, ...args)
+            }
+          }
+          
+          // 尝试加载组件
+          const comp = await loadModule(fakePath, options)
+          return comp.default || comp
+        } catch (error) {
+          console.error('组件加载详细错误:', error)
+          throw error
+        }
+      },
+      loadingComponent: {
+        template: '<div>加载中...</div>'
+      },
+      errorComponent: {
+        props: ['error'],
+        template: '<div>组件加载失败: {{ error && error.message }}</div>',
+        setup(props) {
+          console.error('错误组件收到的错误:', props.error)
+          return {}
+        }
+      },
+      // 添加超时和重试选项
+      timeout: 30000,
+      delay: 200,
+      suspensible: false,
+      onError(error, retry, fail) {
+        console.error('加载错误，细节:', error)
+        fail()
+      }
+    })
+
+    // 创建一个包装组件，使用Shadow DOM隔离样式
+    const ShadowWrapper = {
+      name: 'ShadowWrapper',
+      setup() {
+        return {}
+      },
+      render() {
+        return Vue.h('div', { class: 'shadow-wrapper' })
+      },
+      mounted() {
+        // 创建Shadow DOM
+        const shadowRoot = this.$el.attachShadow({ mode: 'open' })
+        
+        // 创建一个容器元素
+        const container = document.createElement('div')
+        container.className = 'shadow-container'
+        shadowRoot.appendChild(container)
+        
+        // 提取组件中的样式
+        const styleContent = vueCode.match(/<style[^>]*>([\s\S]*?)<\/style>/i)?.[1] || ''
+        
+        // 创建样式元素并添加到Shadow DOM
+        if (styleContent) {
+          const style = document.createElement('style')
+          style.textContent = styleContent
+          shadowRoot.appendChild(style)
+        }
+        
+        // 创建Vue应用并挂载到Shadow DOM容器中
+        const app = Vue.createApp({
+          render: () => Vue.h(component)
+        })
+        app.mount(container)
+      }
+    }
+
+    loadedComponents.value = markRaw(ShadowWrapper)
+    return ShadowWrapper
+  } catch (error) {
+    console.error('组件创建总错误:', error)
+    return null
   }
 }
 
-const placeholder = ref(`"✨ 请详细描述您想要的页面，例如：
-• 页面用途（企业官网/电商页面/个人博客等）
-• 需要包含的主要内容板块
-• 偏好的风格（简约/科技感/温馨/专业等）
-• 需要特别强调的元素
-• 参考网站或配色建议
-
-示例：'需要一个科技公司的产品介绍页，包含banner轮播图、三栏功能特点展示、客户案例模块，喜欢深蓝色调，参考苹果官网的简洁风格'"`)
-
+// 当页面用途改变时，更新内容板块的选择
+const handlePageTypeChange = (value) => {
+  if (value !== '其他' && pageTypeContentMap[value]) {
+    contentBlocks.value = [...pageTypeContentMap[value]]
+  }
+}
 
+const llmAutoFunc = async () => {
+  // 构建完整的描述，包含选项模式的选择
+  let fullPrompt = ''
+  
+  // 添加页面用途
+  fullPrompt += `页面用途: ${pageType.value === '其他' ? pageTypeCustom.value : pageType.value}\n`
+  
+  // 添加内容板块
+  fullPrompt += '主要内容板块: '
+  const blocks = contentBlocks.value.filter(block => block !== '其他')
+  if (contentBlocksCustom.value) {
+    blocks.push(contentBlocksCustom.value)
+  }
+  fullPrompt += blocks.join(', ') + '\n'
+  
+  // 添加风格偏好
+  fullPrompt += `风格偏好: ${stylePreference.value === '其他' ? stylePreferenceCustom.value : stylePreference.value}\n`
+  
+  // 添加设计布局
+  fullPrompt += `设计布局: ${layoutDesign.value === '其他' ? layoutDesignCustom.value : layoutDesign.value}\n`
+  
+  // 添加配色方案
+  fullPrompt += `配色方案: ${colorScheme.value === '其他' ? colorSchemeCustom.value : colorScheme.value}\n`
+  
+  // 添加用户的详细描述
+  if (prompt.value) {
+    fullPrompt += `\n详细描述: ${prompt.value}`
+  }
+  
+  const res = await createWeb({web: fullPrompt, command: 'createWeb'})
+  if (res.code === 0) {
+    outPut.value = true
+    // 添加返回的Vue组件代码到数组
+    htmlFromLLM.value = res.data
+    // 加载新生成的组件
+    await loadVueComponent(res.data)
+  }
+}
 
+const placeholder = ref(`补充您对页面的其他要求或特殊需求，例如：特别强调的元素、参考网站、交互效果等。`)
 </script>