From c1675873a3543cd0884242227af232aee204e0d6 Mon Sep 17 00:00:00 2001
From: zheng Wei <weiz@apple.com>
Date: Thu, 5 Jun 2025 11:26:42 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E7=AC=AC=E4=B8=80=E6=AC=A1=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E6=B2=A1=E6=9C=89=E9=80=89=E4=B8=AD=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../codegen/[codegenId]/[componentId]/useComponentDetail.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/main/codegen/[codegenId]/[componentId]/useComponentDetail.ts b/app/main/codegen/[codegenId]/[componentId]/useComponentDetail.ts
index f6f08276..daf64000 100644
--- a/app/main/codegen/[codegenId]/[componentId]/useComponentDetail.ts
+++ b/app/main/codegen/[codegenId]/[componentId]/useComponentDetail.ts
@@ -152,7 +152,7 @@ export function useComponentDetail() {
         version => version._id.toString() === activeVersionId,
       )?.code || "",
     )
-  }, [activeVersionId])
+  }, [activeVersionId, componentDetail])
 
   useEffect(() => {
     if (!componentDetail || !provider || !model) return

From 7c7604d2b106773008046aa6edd1545a037bc226 Mon Sep 17 00:00:00 2001
From: zheng Wei <weiz@apple.com>
Date: Thu, 5 Jun 2025 15:13:37 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20ant=20design=20vue=20=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 artifacts/antdv-ui-renderer/.gitignore        |  24 ++
 .../antdv-ui-renderer/.vscode/extensions.json |   3 +
 artifacts/antdv-ui-renderer/README.md         |   5 +
 artifacts/antdv-ui-renderer/components.d.ts   |  16 +
 artifacts/antdv-ui-renderer/index.html        |  13 +
 artifacts/antdv-ui-renderer/package.json      |  25 ++
 artifacts/antdv-ui-renderer/public/vite.svg   |   1 +
 artifacts/antdv-ui-renderer/src/App.vue       |  51 ++++
 .../antdv-ui-renderer/src/assets/vue.svg      |   1 +
 .../src/components/ErrorDisplay.vue           | 160 ++++++++++
 .../antdv-ui-renderer/src/components/Test.vue | 102 +++++++
 .../antdv-ui-renderer/src/components/index.ts |   3 +
 artifacts/antdv-ui-renderer/src/main.ts       |  16 +
 artifacts/antdv-ui-renderer/src/style.css     |  87 ++++++
 artifacts/antdv-ui-renderer/src/utils.ts      | 282 ++++++++++++++++++
 artifacts/antdv-ui-renderer/src/vite-env.d.ts |   9 +
 artifacts/antdv-ui-renderer/tsconfig.app.json |  18 ++
 artifacts/antdv-ui-renderer/tsconfig.json     |   7 +
 .../antdv-ui-renderer/tsconfig.node.json      |  25 ++
 artifacts/antdv-ui-renderer/vite.config.ts    |  30 ++
 .../element-ui-plus-renderer/src/utils.ts     |   2 +
 data/codegens.template.json                   |  30 +-
 22 files changed, 909 insertions(+), 1 deletion(-)
 create mode 100644 artifacts/antdv-ui-renderer/.gitignore
 create mode 100644 artifacts/antdv-ui-renderer/.vscode/extensions.json
 create mode 100644 artifacts/antdv-ui-renderer/README.md
 create mode 100644 artifacts/antdv-ui-renderer/components.d.ts
 create mode 100644 artifacts/antdv-ui-renderer/index.html
 create mode 100644 artifacts/antdv-ui-renderer/package.json
 create mode 100644 artifacts/antdv-ui-renderer/public/vite.svg
 create mode 100644 artifacts/antdv-ui-renderer/src/App.vue
 create mode 100644 artifacts/antdv-ui-renderer/src/assets/vue.svg
 create mode 100644 artifacts/antdv-ui-renderer/src/components/ErrorDisplay.vue
 create mode 100644 artifacts/antdv-ui-renderer/src/components/Test.vue
 create mode 100644 artifacts/antdv-ui-renderer/src/components/index.ts
 create mode 100644 artifacts/antdv-ui-renderer/src/main.ts
 create mode 100644 artifacts/antdv-ui-renderer/src/style.css
 create mode 100644 artifacts/antdv-ui-renderer/src/utils.ts
 create mode 100644 artifacts/antdv-ui-renderer/src/vite-env.d.ts
 create mode 100644 artifacts/antdv-ui-renderer/tsconfig.app.json
 create mode 100644 artifacts/antdv-ui-renderer/tsconfig.json
 create mode 100644 artifacts/antdv-ui-renderer/tsconfig.node.json
 create mode 100644 artifacts/antdv-ui-renderer/vite.config.ts

diff --git a/artifacts/antdv-ui-renderer/.gitignore b/artifacts/antdv-ui-renderer/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/artifacts/antdv-ui-renderer/.vscode/extensions.json b/artifacts/antdv-ui-renderer/.vscode/extensions.json
new file mode 100644
index 00000000..a7cea0b0
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/artifacts/antdv-ui-renderer/README.md b/artifacts/antdv-ui-renderer/README.md
new file mode 100644
index 00000000..33895ab2
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
diff --git a/artifacts/antdv-ui-renderer/components.d.ts b/artifacts/antdv-ui-renderer/components.d.ts
new file mode 100644
index 00000000..8faefc4f
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/components.d.ts
@@ -0,0 +1,16 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    ATable: typeof import('ant-design-vue/es')['Table']
+    ATag: typeof import('ant-design-vue/es')['Tag']
+    ErrorDisplay: typeof import('./src/components/ErrorDisplay.vue')['default']
+    Test: typeof import('./src/components/Test.vue')['default']
+  }
+}
diff --git a/artifacts/antdv-ui-renderer/index.html b/artifacts/antdv-ui-renderer/index.html
new file mode 100644
index 00000000..dde16aaf
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/artifacts/antdv-ui-renderer/package.json b/artifacts/antdv-ui-renderer/package.json
new file mode 100644
index 00000000..b01c0f88
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "antdv-ui-renderer",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "ant-design-vue": "^4.0.0",
+    "@ant-design/icons-vue": "^7.0.1",
+    "dayjs": "^1.11.13",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.5",
+    "vue-tsc": "^2.2.8",
+    "unplugin-vue-components": "^0.26.0"
+  }
+}
diff --git a/artifacts/antdv-ui-renderer/public/vite.svg b/artifacts/antdv-ui-renderer/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/artifacts/antdv-ui-renderer/src/App.vue b/artifacts/antdv-ui-renderer/src/App.vue
new file mode 100644
index 00000000..dc663844
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/src/App.vue
@@ -0,0 +1,51 @@
+<template>
+  <div id="artifacts-container"></div>
+  <!-- <Test /> -->
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted } from "vue"
+// import Test from "./components/Test.vue"
+import { createComponentFromString } from "./utils"
+
+export default {
+  name: "AntdvUIPlusRenderer",
+  setup() {
+    const codeContent = ref("")
+    const key = ref(0)
+
+    const handleSuccess = () => {
+      window.parent.postMessage(
+        {
+          type: "artifacts-success",
+        },
+        "*",
+      )
+    }
+
+    const handleMessage = event => {
+      const { type, data } = event.data
+      console.log(" event.data", event.data)
+      if (type === "artifacts") {
+        codeContent.value = data.files[data.entryFile]
+        createComponentFromString(codeContent.value)
+        key.value += 1 // Update the key to force remount
+      }
+    }
+
+    onMounted(() => {
+      window.addEventListener("message", handleMessage)
+      window.parent.postMessage("IFRAME_LOADED", "*")
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener("message", handleMessage)
+    })
+
+    return {
+      codeContent,
+      key,
+    }
+  },
+}
+</script>
diff --git a/artifacts/antdv-ui-renderer/src/assets/vue.svg b/artifacts/antdv-ui-renderer/src/assets/vue.svg
new file mode 100644
index 00000000..770e9d33
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/artifacts/antdv-ui-renderer/src/components/ErrorDisplay.vue b/artifacts/antdv-ui-renderer/src/components/ErrorDisplay.vue
new file mode 100644
index 00000000..6e1214c0
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/src/components/ErrorDisplay.vue
@@ -0,0 +1,160 @@
+<template>
+  <div
+    class="error-display"
+    :style="{
+      width: '90%',
+      maxWidth: '800px',
+      margin: '20px auto',
+      padding: '24px',
+      backgroundColor: '#1a1a1a',
+      borderRadius: '8px',
+      boxShadow: '0 0 10px rgba(0, 255, 0, 0.2)',
+      opacity: visible ? 1 : 0,
+      transform: `translateY(${visible ? 0 : '20px'})`,
+      transition: 'all 0.3s ease-out',
+    }"
+  >
+    <div
+      :style="{
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '20px',
+        borderBottom: '1px solid #333',
+        paddingBottom: '12px',
+      }"
+    >
+      <div
+        :style="{
+          width: '12px',
+          height: '12px',
+          backgroundColor: '#ff5f56',
+          borderRadius: '50%',
+          marginRight: '8px',
+        }"
+      />
+      <div
+        :style="{
+          width: '12px',
+          height: '12px',
+          backgroundColor: '#ffbd2e',
+          borderRadius: '50%',
+          marginRight: '8px',
+        }"
+      />
+      <div
+        :style="{
+          width: '12px',
+          height: '12px',
+          backgroundColor: '#27c93f',
+          borderRadius: '50%',
+        }"
+      />
+    </div>
+
+    <h1
+      :style="{
+        fontSize: '24px',
+        fontWeight: '600',
+        color: '#00ff00',
+        margin: '0 0 20px 0',
+        fontFamily: 'monospace',
+        textShadow: '0 0 5px rgba(0, 255, 0, 0.5)',
+      }"
+    >
+      > SYSTEM ERROR DETECTED
+    </h1>
+
+    <div
+      :style="{
+        padding: '16px',
+        backgroundColor: '#000',
+        borderRadius: '4px',
+        border: '1px solid #333',
+        fontFamily: 'monospace',
+        position: 'relative',
+      }"
+    >
+      <div :style="{ color: '#ff0000', marginBottom: '8px' }">
+        > Error Stack Trace:
+      </div>
+      <pre
+        :style="{
+          margin: 0,
+          color: '#fff',
+          fontSize: '14px',
+          lineHeight: 1.5,
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+        }"
+      >
+        <div
+          v-for="(line, index) in errorLines"
+          :key="index"
+          :style="{
+            opacity: visible ? 1 : 0,
+            transform: `translateX(${visible ? 0 : '20px'})`,
+            transition: `all 0.3s ease-out ${index * 0.1}s`,
+          }"
+        >
+          {{ line }}
+        </div>
+      </pre>
+    </div>
+
+    <div
+      :style="{
+        marginTop: '20px',
+        color: '#666',
+        fontSize: '12px',
+        fontFamily: 'monospace',
+        textAlign: 'center',
+      }"
+    >
+      * Please try clicking "
+      <span :style="{ fontWeight: 'bold' }">EXECUTE AUTO FIX</span>
+      " in the bottom right corner to fix the issue. If you think this is
+      a bug, please
+      <a
+        href="https://github.com/IamLiuLv/compoder/issues"
+        target="_blank"
+        rel="noopener noreferrer"
+        :style="{ color: '#666', textDecoration: 'underline' }"
+      >
+        report it in Compoder's GitHub issues
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, onMounted } from 'vue'
+
+export default defineComponent({
+  name: 'ErrorDisplay',
+  props: {
+    errorMessage: {
+      type: String,
+      default: null
+    }
+  },
+  setup(props) {
+    const visible = ref(false)
+    
+    const errorLines = computed(() => {
+      if (!props.errorMessage) return []
+      return props.errorMessage.split('\n')
+    })
+    
+    onMounted(() => {
+      setTimeout(() => {
+        visible.value = true
+      }, 100)
+    })
+    
+    return {
+      visible,
+      errorLines
+    }
+  }
+})
+</script> 
\ No newline at end of file
diff --git a/artifacts/antdv-ui-renderer/src/components/Test.vue b/artifacts/antdv-ui-renderer/src/components/Test.vue
new file mode 100644
index 00000000..da4a1457
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/src/components/Test.vue
@@ -0,0 +1,102 @@
+<template>
+  <a-table :columns="columns" :data-source="data">
+    <template #headerCell="{ column }">
+      <template v-if="column.key === 'name'">
+        <span>
+          <smile-outlined />
+          Name
+        </span>
+      </template>
+    </template>
+
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'name'">
+        <a>
+          {{ record.name }}
+        </a>
+      </template>
+      <template v-else-if="column.key === 'tags'">
+        <span>
+          <a-tag
+            v-for="tag in record.tags"
+            :key="tag"
+            :color="
+              tag === 'loser'
+                ? 'volcano'
+                : tag.length > 5
+                ? 'geekblue'
+                : 'green'
+            "
+          >
+            {{ tag.toUpperCase() }}
+          </a-tag>
+        </span>
+      </template>
+      <template v-else-if="column.key === 'action'">
+        <span>
+          <a>Invite 一 {{ record.name }}</a>
+          <a-divider type="vertical" />
+          <a>Delete</a>
+          <a-divider type="vertical" />
+          <a class="ant-dropdown-link">
+            More actions
+            <down-outlined />
+          </a>
+        </span>
+      </template>
+    </template>
+  </a-table>
+</template>
+<script lang="ts" setup>
+import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue"
+const columns = [
+  {
+    name: "Name",
+    dataIndex: "name",
+    key: "name",
+  },
+  {
+    title: "Age",
+    dataIndex: "age",
+    key: "age",
+  },
+  {
+    title: "Address",
+    dataIndex: "address",
+    key: "address",
+  },
+  {
+    title: "Tags",
+    key: "tags",
+    dataIndex: "tags",
+  },
+  {
+    title: "Action",
+    key: "action",
+  },
+]
+
+const data = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    address: "New York No. 1 Lake Park",
+    tags: ["nice", "developer"],
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 42,
+    address: "London No. 1 Lake Park",
+    tags: ["loser"],
+  },
+  {
+    key: "3",
+    name: "Joe Black",
+    age: 32,
+    address: "Sidney No. 1 Lake Park",
+    tags: ["cool", "teacher"],
+  },
+]
+</script>
diff --git a/artifacts/antdv-ui-renderer/src/components/index.ts b/artifacts/antdv-ui-renderer/src/components/index.ts
new file mode 100644
index 00000000..b07c3336
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/src/components/index.ts
@@ -0,0 +1,3 @@
+import ErrorDisplay from "./ErrorDisplay.vue"
+
+export { ErrorDisplay }
diff --git a/artifacts/antdv-ui-renderer/src/main.ts b/artifacts/antdv-ui-renderer/src/main.ts
new file mode 100644
index 00000000..4ce26453
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/src/main.ts
@@ -0,0 +1,16 @@
+import { createApp } from "vue"
+import "./style.css"
+import App from "./App.vue"
+import "ant-design-vue/dist/reset.css"
+
+import Antdv from "ant-design-vue"
+import * as AntdvIconsVue from "@ant-design/icons-vue"
+
+const app = createApp(App)
+app.use(Antdv)
+
+for (const [key, component] of Object.entries(AntdvIconsVue)) {
+  app.component(key, component)
+}
+
+app.mount("#app")
diff --git a/artifacts/antdv-ui-renderer/src/style.css b/artifacts/antdv-ui-renderer/src/style.css
new file mode 100644
index 00000000..9e683cea
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/src/style.css
@@ -0,0 +1,87 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+  width: 100%;
+  background-color: #fff;
+  height: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
\ No newline at end of file
diff --git a/artifacts/antdv-ui-renderer/src/utils.ts b/artifacts/antdv-ui-renderer/src/utils.ts
new file mode 100644
index 00000000..caab7d4a
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/src/utils.ts
@@ -0,0 +1,282 @@
+import { createApp, defineComponent, h } from "vue/dist/vue.esm-bundler.js"
+
+import * as Vue from "vue/dist/vue.esm-bundler.js"
+import * as Antdv from "ant-design-vue"
+import * as AntdvIcons from "@ant-design/icons-vue"
+import * as dayjs from "dayjs"
+import ErrorDisplay from "./components/ErrorDisplay.vue"
+
+const mockModules: Record<string, any> = {
+  vue: Vue,
+  "ant-design-vue": Antdv,
+  "@ant-design/icons-vue": AntdvIcons,
+  dayjs: dayjs,
+}
+
+// 添加错误处理和成功处理函数
+const handleError = (errorMessage: string) => {
+  window.parent.postMessage(
+    {
+      type: "artifacts-error",
+      errorMessage,
+    },
+    "*",
+  )
+}
+
+const handleSuccess = () => {
+  window.parent.postMessage(
+    {
+      type: "artifacts-success",
+    },
+    "*",
+  )
+}
+
+export function createComponentFromString(componentString: string) {
+  const templateMatch = componentString.match(/<template>([\s\S]*)<\/template>/)
+
+  // 匹配不同顺序的script setup标签
+  const scriptSetupMatch =
+    componentString.match(
+      /<script\s+setup\s+lang=["']ts["']>([\s\S]*)<\/script>/,
+    ) ||
+    componentString.match(
+      /<script\s+lang=["']ts["']\s+setup>([\s\S]*)<\/script>/,
+    ) ||
+    componentString.match(/<script\s+setup>([\s\S]*)<\/script>/)
+
+  // 匹配普通script标签
+  const scriptMatch =
+    componentString.match(/<script\s+lang=["']ts["']>([\s\S]*)<\/script>/) ||
+    componentString.match(/<script>([\s\S]*)<\/script>/)
+
+  // 匹配style标签
+  const styleMatch =
+    componentString.match(/<style\s+scoped>([\s\S]*)<\/style>/) ||
+    componentString.match(/<style>([\s\S]*)<\/style>/)
+
+  const template = templateMatch ? templateMatch[1].trim() : ""
+  const style = styleMatch ? styleMatch[1].trim() : ""
+
+  // 检测是否使用setup语法
+  const isSetup = !!scriptSetupMatch
+  const scriptContent = isSetup
+    ? scriptSetupMatch[1].trim()
+    : scriptMatch
+    ? scriptMatch[1].trim()
+    : "export default {}"
+
+  console.log("Script content:", scriptContent)
+  console.log("Is setup:", isSetup)
+
+  // 提取导入语句和变量声明
+  const imports: Record<string, string[]> = {}
+  let processedScript = scriptContent.replace(
+    /import\s+(\{[^}]+\}|\w+)\s+from\s+['"]([^'"]+)['"]/g,
+    (match, importNames, moduleName) => {
+      console.log("Import match:", match, importNames, moduleName)
+      imports[moduleName] = importNames
+        .replace(/[{}]/g, "")
+        .split(",")
+        .map((name: string) => name.trim())
+      return ""
+    },
+  )
+
+  console.log("Processed script:", processedScript)
+  console.log("Imports:", imports)
+
+  try {
+    // 准备模拟导入
+    const mockImports = Object.entries(imports).reduce(
+      (acc: Record<string, any>, [moduleName, importNames]) => {
+        const moduleExports = mockModules[moduleName] || {}
+        console.log("Module exports for", moduleName, ":", moduleExports)
+        importNames.forEach(name => {
+          if (name === "default") {
+            acc[moduleName] = moduleExports
+          } else {
+            acc[name] = moduleExports[name]
+            console.log("Imported", name, ":", moduleExports[name])
+          }
+        })
+        return acc
+      },
+      {},
+    )
+
+    console.log("Mock imports:", mockImports)
+
+    let componentOptions: any = {}
+
+    if (isSetup) {
+      // 处理<script setup>语法
+      // 1. 提取变量和函数声明
+      const setupVars: string[] = []
+      const setupContent = processedScript
+
+      // 提取变量声明 (const, let, var)
+      const varRegex = /(const|let|var)\s+(\w+)\s*=/g
+      let match
+      while ((match = varRegex.exec(setupContent)) !== null) {
+        setupVars.push(match[2])
+      }
+
+      // 提取函数声明
+      const funcRegex = /function\s+(\w+)/g
+      while ((match = funcRegex.exec(setupContent)) !== null) {
+        setupVars.push(match[1])
+      }
+
+      // 提取箭头函数
+      const arrowFuncRegex = /const\s+(\w+)\s*=\s*(\([^)]*\)|[^=]*)\s*=>/g
+      while ((match = arrowFuncRegex.exec(setupContent)) !== null) {
+        setupVars.push(match[1])
+      }
+
+      console.log("Setup variables:", setupVars)
+
+      // 2. 创建setup函数
+      const setupFunction = new Function(
+        ...Object.keys(mockImports),
+        `
+        try {
+          ${setupContent}
+          return { ${[...setupVars, ...Object.keys(mockImports)].join(", ")} }
+        } catch (error) {
+          console.error("Error in setup function:", error)
+          return {}
+        }
+        `,
+      )
+
+      // 3. 创建组件选项
+      componentOptions = {
+        setup() {
+          try {
+            const setupResult = setupFunction(...Object.values(mockImports))
+            console.log("Setup result:", setupResult)
+            return setupResult
+          } catch (error) {
+            console.error("Error executing setup function:", error)
+            return {}
+          }
+        },
+      }
+    } else {
+      // 处理传统的export default语法
+      processedScript = processedScript.replace(
+        /export\s+default\s*(\{[\s\S]*\}|[^{;\n]+)/,
+        (match, exportedContent) => `return ${exportedContent}`,
+      )
+
+      const scriptFunction = new Function(
+        ...Object.keys(mockImports),
+        `
+        try {
+          ${processedScript}
+        } catch (error) {
+          console.error("Error in component options:", error)
+          return {}
+        }
+        `,
+      )
+
+      componentOptions = scriptFunction(...Object.values(mockImports))
+    }
+
+    console.log("Component options:", componentOptions)
+
+    // 使用defineComponent创建组件
+    const component = defineComponent({
+      ...componentOptions,
+      template,
+    })
+
+    console.log("Defined component:", component)
+
+    // 渲染组件
+    const renderComponent = () => {
+      try {
+        const container = document.getElementById("artifacts-container")
+        if (container) {
+          container.innerHTML = ""
+
+          // 创建应用实例
+          const app = createApp(component)
+
+          // 注册Antdv
+          app.use(Antdv)
+
+          // 注册所有图标组件
+          for (const [key, iconComponent] of Object.entries(AntdvIcons)) {
+            if (typeof iconComponent === "object" && iconComponent !== null) {
+              app.component(key, iconComponent)
+            }
+          }
+
+          // 挂载应用
+          app.mount(container)
+
+          setTimeout(() => {
+            handleSuccess()
+          }, 100)
+        }
+      } catch (error) {
+        console.error("Error rendering component:", error)
+        handleError(`Error rendering component: ${error}`)
+
+        const app = createApp({
+          render() {
+            return h(ErrorDisplay, {
+              errorMessage: `Error rendering component: ${error}`,
+            })
+          },
+        })
+
+        const container = document.getElementById("artifacts-container")
+        if (container) {
+          container.innerHTML = ""
+          app.mount(container)
+        }
+      }
+    }
+
+    // 处理样式
+    if (style) {
+      const existingStyle = document.querySelector("[data-artifacts-style]")
+      if (existingStyle) {
+        document.head.removeChild(existingStyle)
+      }
+
+      const styleElement = document.createElement("style")
+      styleElement.textContent = style
+      styleElement.setAttribute("data-artifacts-style", "true")
+      document.head.appendChild(styleElement)
+    }
+
+    // 渲染组件
+    renderComponent()
+    return true
+  } catch (error) {
+    console.error("Error creating component:", error)
+    handleError(`Error creating component: ${error}`)
+
+    const app = createApp({
+      render() {
+        return h(ErrorDisplay, {
+          errorMessage: `Error creating component: ${error}`,
+        })
+      },
+    })
+
+    const container = document.getElementById("artifacts-container")
+    if (container) {
+      container.innerHTML = ""
+      app.mount(container)
+    }
+
+    return null
+  }
+}
diff --git a/artifacts/antdv-ui-renderer/src/vite-env.d.ts b/artifacts/antdv-ui-renderer/src/vite-env.d.ts
new file mode 100644
index 00000000..bed9d138
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+declare module "*.vue" {
+  import { DefineComponent } from "vue"
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+declare module "vue/dist/vue.esm-bundler.js" {
+  export * from "vue"
+}
diff --git a/artifacts/antdv-ui-renderer/tsconfig.app.json b/artifacts/antdv-ui-renderer/tsconfig.app.json
new file mode 100644
index 00000000..1df2aa20
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/tsconfig.app.json
@@ -0,0 +1,18 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
+}
\ No newline at end of file
diff --git a/artifacts/antdv-ui-renderer/tsconfig.json b/artifacts/antdv-ui-renderer/tsconfig.json
new file mode 100644
index 00000000..1ffef600
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/artifacts/antdv-ui-renderer/tsconfig.node.json b/artifacts/antdv-ui-renderer/tsconfig.node.json
new file mode 100644
index 00000000..9728af2d
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/artifacts/antdv-ui-renderer/vite.config.ts b/artifacts/antdv-ui-renderer/vite.config.ts
new file mode 100644
index 00000000..d209ae41
--- /dev/null
+++ b/artifacts/antdv-ui-renderer/vite.config.ts
@@ -0,0 +1,30 @@
+import path from "path"
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+
+import Components from "unplugin-vue-components/vite"
+import { AntDesignVueResolver } from "unplugin-vue-components/resolvers"
+
+const pathSrc = path.resolve(__dirname, "src")
+
+// https://vite.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      "~/": `${pathSrc}/`,
+    },
+  },
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [
+        AntDesignVueResolver({
+          importStyle: false, // css in js
+        }),
+      ],
+    }),
+  ],
+  server: {
+    port: 3007,
+  },
+})
diff --git a/artifacts/element-ui-plus-renderer/src/utils.ts b/artifacts/element-ui-plus-renderer/src/utils.ts
index c76e38ef..e57c33b8 100644
--- a/artifacts/element-ui-plus-renderer/src/utils.ts
+++ b/artifacts/element-ui-plus-renderer/src/utils.ts
@@ -106,6 +106,8 @@ export function createComponentFromString(componentString: string) {
     return null
   }
 
+  console.log("componentOptions", componentOptions)
+
   // 使用 defineComponent 来创建组件
   const component = defineComponent({
     ...componentOptions,
diff --git a/data/codegens.template.json b/data/codegens.template.json
index 0a498c51..0a1b4f0f 100644
--- a/data/codegens.template.json
+++ b/data/codegens.template.json
@@ -439,5 +439,33 @@
                 "prompt": "Components have been globally registered, use component names with 'a-' prefix directly in templates (e.g., <a-button>). No need to import @arco-design/web-vue components in each component file. If types or utility functions are needed in script section, use named imports, e.g.: import { type ButtonProps } from '@arco-design/web-vue'. Do not use default imports, namespace imports, or side effect imports. Only use vue and @arco-design/web-vue packages."
             }
         ]
-    }
+    },
+     {
+    "title": "Ant Design Vue Codegen",
+    "description": "Code generator based on Vue3 and Ant Design Vue",
+    "fullStack": "Vue",
+    "guides": [
+      "Generate a login page",
+      "Generate a Table component, include 3 columns: name, age, address"
+    ],
+    "model": "gpt-4o",
+    "codeRendererUrl": "http://localhost:3007",
+    "rules": [
+      {
+        "type": "public-components",
+        "description": "Define which public components to use",
+        "dataSet": ["ant-design-vue"]
+      },
+      {
+        "type": "file-structure",
+        "description": "Define the file structure for the project",
+        "prompt": "Output component code in XML format as follows: <ComponentArtifact name=\"ComponentName\"><ComponentFile fileName=\"App.vue\" isEntryFile=\"true\"><template>\n  <!-- Write template content here -->\n</template>\n\n<script>\n// Import required components and dependencies\nimport { ... } from '...'\n\nexport default {\n  name: 'ComponentName',\n  \n  components: {\n    // Register components\n  },\n\n  props: {\n    // Component properties\n    // IMPORTANT: Every prop MUST include a default value\n    propName: {\n      type: Type,\n      default: defaultValue,\n      required: false\n    }\n  },\n  \n  data() {\n    return {\n      // Component data\n    }\n  },\n  \n  computed: {\n    // Computed properties\n  },\n  \n  methods: {\n    // Methods\n  }\n}\n</script>\n\n<style scoped>\n/* Component styles */\n/* IMPORTANT: Do NOT use @apply in styles. Write CSS rules directly. */\n</style></ComponentFile></ComponentArtifact>\n\nIMPORTANT RULES:\n1. Every prop MUST include a default value\n2. Do NOT use @apply in styles. Write CSS rules directly."
+      },
+      {
+        "type": "attention-rules",
+        "description": "Attention rules for the code generator",
+        "prompt": "1. Use Vue 3 Composition API with <script setup> syntax\n2. Ant Design Vue components are globally registered - use them directly in templates with 'a-' prefix (e.g., <a-button>)\n3. For types or utilities, use named imports: import { type ButtonProps } from 'ant-design-vue'\n4. Every prop MUST include a default value\n5. Keep components focused on a single responsibility\n6. Use responsive design principles"
+      }
+    ]
+  }
 ]
\ No newline at end of file

From a0c0c14efa53daed526d181223f6747de176d0bf Mon Sep 17 00:00:00 2001
From: zheng Wei <weiz@apple.com>
Date: Mon, 23 Jun 2025 13:54:26 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20json=20=E6=A0=BC=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data/codegens.template.json | 58 +++++++++++++++++++------------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/data/codegens.template.json b/data/codegens.template.json
index 0a1b4f0f..875d66fd 100644
--- a/data/codegens.template.json
+++ b/data/codegens.template.json
@@ -440,32 +440,34 @@
             }
         ]
     },
-     {
-    "title": "Ant Design Vue Codegen",
-    "description": "Code generator based on Vue3 and Ant Design Vue",
-    "fullStack": "Vue",
-    "guides": [
-      "Generate a login page",
-      "Generate a Table component, include 3 columns: name, age, address"
-    ],
-    "model": "gpt-4o",
-    "codeRendererUrl": "http://localhost:3007",
-    "rules": [
-      {
-        "type": "public-components",
-        "description": "Define which public components to use",
-        "dataSet": ["ant-design-vue"]
-      },
-      {
-        "type": "file-structure",
-        "description": "Define the file structure for the project",
-        "prompt": "Output component code in XML format as follows: <ComponentArtifact name=\"ComponentName\"><ComponentFile fileName=\"App.vue\" isEntryFile=\"true\"><template>\n  <!-- Write template content here -->\n</template>\n\n<script>\n// Import required components and dependencies\nimport { ... } from '...'\n\nexport default {\n  name: 'ComponentName',\n  \n  components: {\n    // Register components\n  },\n\n  props: {\n    // Component properties\n    // IMPORTANT: Every prop MUST include a default value\n    propName: {\n      type: Type,\n      default: defaultValue,\n      required: false\n    }\n  },\n  \n  data() {\n    return {\n      // Component data\n    }\n  },\n  \n  computed: {\n    // Computed properties\n  },\n  \n  methods: {\n    // Methods\n  }\n}\n</script>\n\n<style scoped>\n/* Component styles */\n/* IMPORTANT: Do NOT use @apply in styles. Write CSS rules directly. */\n</style></ComponentFile></ComponentArtifact>\n\nIMPORTANT RULES:\n1. Every prop MUST include a default value\n2. Do NOT use @apply in styles. Write CSS rules directly."
-      },
-      {
-        "type": "attention-rules",
-        "description": "Attention rules for the code generator",
-        "prompt": "1. Use Vue 3 Composition API with <script setup> syntax\n2. Ant Design Vue components are globally registered - use them directly in templates with 'a-' prefix (e.g., <a-button>)\n3. For types or utilities, use named imports: import { type ButtonProps } from 'ant-design-vue'\n4. Every prop MUST include a default value\n5. Keep components focused on a single responsibility\n6. Use responsive design principles"
-      }
-    ]
-  }
+    {
+        "title": "Ant Design Vue Codegen",
+        "description": "Code generator based on Vue3 and Ant Design Vue",
+        "fullStack": "Vue",
+        "guides": [
+            "Generate a login page",
+            "Generate a Table component, include 3 columns: name, age, address"
+        ],
+        "model": "gpt-4o",
+        "codeRendererUrl": "http://localhost:3007",
+        "rules": [
+            {
+                "type": "public-components",
+                "description": "Define which public components to use",
+                "dataSet": [
+                    "ant-design-vue"
+                ]
+            },
+            {
+                "type": "file-structure",
+                "description": "Define the file structure for the project",
+                "prompt": "Output component code in XML format as follows: <ComponentArtifact name=\"ComponentName\"><ComponentFile fileName=\"App.vue\" isEntryFile=\"true\"><template>\n  <!-- Write template content here -->\n</template>\n\n<script>\n// Import required components and dependencies\nimport { ... } from '...'\n\nexport default {\n  name: 'ComponentName',\n  \n  components: {\n    // Register components\n  },\n\n  props: {\n    // Component properties\n    // IMPORTANT: Every prop MUST include a default value\n    propName: {\n      type: Type,\n      default: defaultValue,\n      required: false\n    }\n  },\n  \n  data() {\n    return {\n      // Component data\n    }\n  },\n  \n  computed: {\n    // Computed properties\n  },\n  \n  methods: {\n    // Methods\n  }\n}\n</script>\n\n<style scoped>\n/* Component styles */\n/* IMPORTANT: Do NOT use @apply in styles. Write CSS rules directly. */\n</style></ComponentFile></ComponentArtifact>\n\nIMPORTANT RULES:\n1. Every prop MUST include a default value\n2. Do NOT use @apply in styles. Write CSS rules directly."
+            },
+            {
+                "type": "attention-rules",
+                "description": "Attention rules for the code generator",
+                "prompt": "1. Use Vue 3 Composition API with <script setup> syntax\n2. Ant Design Vue components are globally registered - use them directly in templates with 'a-' prefix (e.g., <a-button>)\n3. For types or utilities, use named imports: import { type ButtonProps } from 'ant-design-vue'\n4. Every prop MUST include a default value\n5. Keep components focused on a single responsibility\n6. Use responsive design principles"
+            }
+        ]
+    }
 ]
\ No newline at end of file