test

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;
+};