test

package.json

@@ -29,6 +29,7 @@
     "@kevisual/resources": "workspace:*",
     "@monaco-editor/react": "^4.7.0",
     "@mui/material": "^6.4.8",
+    "@stackblitz/sdk": "^1.11.0",
     "@tailwindcss/vite": "^4.0.15",
     "@uiw/react-textarea-code-editor": "^3.1.0",
     "antd": "^5.24.4",

pnpm-lock.yaml

@@ -44,6 +44,9 @@ importers:
       '@mui/material':
         specifier: ^6.4.8
         version: 6.4.8(@emotion/react@11.14.0(@types/react@19.0.12)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.12)(react@19.0.0))(@types/react@19.0.12)(react@19.0.0))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@stackblitz/sdk':
+        specifier: ^1.11.0
+        version: 1.11.0
       '@tailwindcss/vite':
         specifier: ^4.0.15
         version: 4.0.15(vite@6.2.2(@types/node@22.13.11)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.5.1))
@@ -396,6 +399,9 @@ importers:
 
   packages/mark:
     dependencies:
+      '@kevisual/components':
+        specifier: workspace:*
+        version: link:../components
       '@kevisual/query-mark':
         specifier: workspace:*
         version: link:../../submodules/query-mark
@@ -432,6 +438,9 @@ importers:
       react-hook-form:
         specifier: ^7.54.2
         version: 7.54.2(react@19.0.0)
+      react-i18next:
+        specifier: ^15.4.1
+        version: 15.4.1(i18next@24.2.3(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react-toastify:
         specifier: ^11.0.5
         version: 11.0.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -1984,6 +1993,9 @@ packages:
   '@socket.io/component-emitter@3.1.2':
     resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
 
+  '@stackblitz/sdk@1.11.0':
+    resolution: {integrity: sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==}
+
   '@tailwindcss/node@4.0.15':
     resolution: {integrity: sha512-IODaJjNmiasfZX3IoS+4Em3iu0fD2HS0/tgrnkYfW4hyUor01Smnr5eY3jc4rRgaTDrJlDmBTHbFO0ETTDaxWA==}
 
@@ -6474,6 +6486,8 @@ snapshots:
 
   '@socket.io/component-emitter@3.1.2': {}
 
+  '@stackblitz/sdk@1.11.0': {}
+
   '@tailwindcss/node@4.0.15':
     dependencies:
       enhanced-resolve: 5.18.1

src/pages/container/module/DrawEdit.tsx

@@ -6,6 +6,8 @@ import { useContainerStore } from '../store';
 import { Tooltip } from '@mui/material';
 import { IconButton } from '@kevisual/components/button/index.tsx';
 import { LeftOutlined, SaveOutlined } from '@ant-design/icons';
+// import { previewCode } from './preview-code';
+// import { StackIcons } from './StackIcons';
 
 export const DrawEdit = () => {
   const editorElRef = useRef<HTMLDivElement>(null);
@@ -98,6 +100,19 @@ export const DrawEdit = () => {
                 <SaveOutlined />
               </IconButton>
             </Tooltip>
+            {/* <Tooltip title='预览'>
+              <IconButton
+                sx={{
+                  '&:hover': {
+                    color: 'primary.main',
+                  },
+                }}
+                onClick={() => {
+                  previewCode(editorRef.current?.getContent() || '', {});
+                }}>
+                <StackIcons />
+              </IconButton>
+            </Tooltip> */}
           </div>
           <div className='flex-1 ml-2 flex items-center'>{containerStore.data?.title}</div>
         </div>

src/pages/container/module/StackIcons.tsx

@@ -0,0 +1,8 @@
+export const StackIcons = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'>
+      <rect width='32' height='32' rx='5' fill='#1374EF' />
+      <path d='M8 18.1176H14.8868L10.8359 28L24 13.8824H17.1132L21.1641 4L8 18.1176Z' fill='white' />
+    </svg>
+  );
+};

src/pages/container/module/preview-code.ts

@@ -0,0 +1,25 @@
+import sdk from '@stackblitz/sdk';
+
+export const previewCode = async (code: string, options: any) => {
+  const el = document.querySelector('.cm-editor') as HTMLElement;
+  if (!el) {
+    return;
+  }
+  const vm = await sdk.embedProject(el, {
+    title: 'Preview Code',
+    template: 'javascript',
+    files: {
+      'index.html': '<h1>Hello World</h1>',
+      'a/index.js': code,
+    },
+
+    dependencies: {},
+  });
+  vm.editor.openFile('index.js');
+  setTimeout(() => {
+    vm.getFsSnapshot().then((snapshot) => {
+      console.log('files', snapshot);
+    });
+  }, 1000);
+  return vm;
+};