Add tool edit page

src/components/Playground/Output/Preview/index.tsx

@@ -8,9 +8,18 @@ interface PreviewProps {
     files: IFiles
     importMap: IImportMap
     entryPoint: string
+    preExpansionCode?: string
+    postExpansionCode?: string
 }
 
-const Preview = ({ iframeKey, files, importMap, entryPoint }: PreviewProps) => {
+const Preview = ({
+    iframeKey,
+    files,
+    importMap,
+    entryPoint,
+    preExpansionCode = '',
+    postExpansionCode = ''
+}: PreviewProps) => {
     const [errorMsg, setErrorMsg] = useState('')
     const [compiledCode, setCompiledCode] = useState('')
 
@@ -19,14 +28,19 @@ const Preview = ({ iframeKey, files, importMap, entryPoint }: PreviewProps) => {
     }
 
     useEffect(() => {
+        if (!Object.keys(files).length || !importMap || !entryPoint.length) {
+            return
+        }
         Compiler.compile(files, importMap, entryPoint)
             .then((result) => {
-                setCompiledCode(result.outputFiles[0].text)
+                setCompiledCode(
+                    `${preExpansionCode}\n${result.outputFiles[0].text}\n${postExpansionCode}`
+                )
             })
             .catch((e: Error) => {
                 setErrorMsg(`编译失败：${e.message}`)
             })
-    }, [files, Compiler])
+    }, [files, Compiler, importMap, entryPoint])
 
     return (
         <div data-component={'playground-preview'}>

src/components/Playground/Output/Preview/preview.scss

@@ -3,4 +3,14 @@
   position: relative;
   width: 100%;
   height: 100%;
+
+  .playground-error-message {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background-color: #FF4D4FAA;
+    padding: 5px 10px;
+    font-size: 1.2em;
+  }
 }

src/components/Playground/Output/index.tsx

@@ -9,9 +9,18 @@ interface OutputProps {
     selectedFileName: string
     importMap: IImportMap
     entryPoint: string
+    preExpansionCode?: string
+    postExpansionCode?: string
 }
 
-const Output = ({ files, selectedFileName, importMap, entryPoint }: OutputProps) => {
+const Output = ({
+    files,
+    selectedFileName,
+    importMap,
+    entryPoint,
+    preExpansionCode,
+    postExpansionCode
+}: OutputProps) => {
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (
@@ -31,6 +40,8 @@ const Output = ({ files, selectedFileName, importMap, entryPoint }: OutputProps)
                     files={files}
                     importMap={importMap}
                     entryPoint={entryPoint}
+                    preExpansionCode={preExpansionCode}
+                    postExpansionCode={postExpansionCode}
                 />
             )}
             {selectedTab === 'Transform' && <Transform file={files[selectedFileName]} />}