From e95027d3ad72c84d5ca1cff8ac1a9532fe844aa5 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Tue, 24 Dec 2024 17:04:59 +0800
Subject: [PATCH] chore: fix box demo

---
 site/src/components/stackblitz/content.js | 8 ++++++--
 site/src/components/stackblitz/index.jsx  | 6 +++---
 src/form/_example/form-field-linkage.tsx  | 4 +---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/site/src/components/stackblitz/content.js b/site/src/components/stackblitz/content.js
index cf85fb9986..21ebbe5e95 100644
--- a/site/src/components/stackblitz/content.js
+++ b/site/src/components/stackblitz/content.js
@@ -1,11 +1,12 @@
 import orgPkg from '../../../../package.json';
 
 export const htmlContent = `
-  <div id="app" style="padding: 24px;"></div>
+  <div id="app"></div>
+  <script type="module" src="/src/index.jsx"></script>
 `;
 
 export const mainJsContent = `
-  import React from 'react';
+  import React, { StrictMode } from 'react';
   import { createRoot } from 'react-dom/client';
 
   import Demo from './demo';
@@ -105,10 +106,13 @@ export const packageJSONContent = JSON.stringify(
       'react-dom': orgPkg.devDependencies['react-dom'],
       'tdesign-react': orgPkg.version,
       'tdesign-icons-react': orgPkg.dependencies['tdesign-icons-react'],
+      '@types/react': orgPkg.devDependencies['@types/react'],
+      '@types/react-dom': orgPkg.devDependencies['@types/react-dom'],
     },
     devDependencies: {
       vite: orgPkg.devDependencies.vite,
       '@vitejs/plugin-react': orgPkg.devDependencies['@vitejs/plugin-react'],
+      typescript: orgPkg.devDependencies.typescript,
     },
   },
   null,
diff --git a/site/src/components/stackblitz/index.jsx b/site/src/components/stackblitz/index.jsx
index 13f7ddd724..2a4c118fcb 100644
--- a/site/src/components/stackblitz/index.jsx
+++ b/site/src/components/stackblitz/index.jsx
@@ -25,7 +25,6 @@ export default function Stackblitz(props) {
     setIsTypeScriptDemo(isTypeScriptDemo);
 
     setTimeout(() => {
-      console.log(formRef.current, 111);
       formRef.current.submit();
     });
   }
@@ -35,7 +34,7 @@ export default function Stackblitz(props) {
       <form
         ref={formRef}
         method="post"
-        action="https://stackblitz.com/run?file=package.json,src%2Fdemo.tsx"
+        action={`https://stackblitz.com/run?file=src%2F${isTypeScriptDemo ? 'demo.tsx' : 'demo.jsx'}`}
         target="_blank"
         onClick={submit}
       >
@@ -48,11 +47,12 @@ export default function Stackblitz(props) {
           <input type="hidden" name="project[files][src/demo.jsx]" value={code} />
         )}
         <input type="hidden" name="project[files][src/index.css]" value={styleContent} />
-        <input type="hidden" name="project[files][src/index.js]" value={mainJsContent} />
+        <input type="hidden" name="project[files][src/index.jsx]" value={mainJsContent} />
         <input type="hidden" name="project[files][index.html]" value={htmlContent} />
         <input type="hidden" name="project[files][vite.config.js]" value={viteConfigContent} />
         <input type="hidden" name="project[files][.stackblitzrc]" value={stackblitzRc} />
         <input type="hidden" name="project[files][package.json]" value={packageJSONContent} />
+        <input type="hidden" name="project[template]" value="node" />
 
         <div className="action-online">
           <svg viewBox="0 0 28 28" height="20">
diff --git a/src/form/_example/form-field-linkage.tsx b/src/form/_example/form-field-linkage.tsx
index 69f7790e74..5eee192845 100644
--- a/src/form/_example/form-field-linkage.tsx
+++ b/src/form/_example/form-field-linkage.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import Form from '../Form';
-import Radio from '../../radio';
-import Button from '../../button';
+import { Form, Radio, Button } from 'tdesign-react';
 
 const { FormItem } = Form;