IamLiuLv · weizheng1992 · Jun 5, 2025 · Jun 5, 2025 · Jun 23, 2025 · Jun 23, 2025
diff --git 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

diff --git a/artifacts/antdv-ui-renderer/.gitignore 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
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/artifacts/antdv-ui-renderer/README.md 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
@@ -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
@@ -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
@@ -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
diff --git a/artifacts/antdv-ui-renderer/src/App.vue 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
diff --git a/artifacts/antdv-ui-renderer/src/components/ErrorDisplay.vue 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>