edit

src/app.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 
 const functionBlockList = [
   `
-const cpn = () => {
+  const cpn = () => {
   function handleClick() {
     console.log("Hi there!");
   }
@@ -227,12 +227,9 @@ ${func}
 render(cpn)
 `;
 
-const editor = (
-  func: string,
-  setShowEdit: React.Dispatch<React.SetStateAction<boolean>>
-) => {
+const editor = (setShowEdit: React.Dispatch<React.SetStateAction<boolean>>) => {
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-gray-900">
+    <div className="fixed inset-0 flex flex-col items-center bg-gray-900 p-4 overflow-y-auto">
       <div className="fixed top-4 right-2">
         <button
           className="bg-primary-6 text-white py-2 px-4 rounded-lg mr-2"
@@ -241,11 +238,24 @@ const editor = (
           关闭编辑框
         </button>
       </div>
-      <LiveEditor
-        className="w-full h-full p-4 text-white bg-gray-800 font-mono overflow-y-auto"
-        code={func}
-        language={"tsx"}
-      />
+      <div className="flex flex-col items-center w-full space-y-4 mt-12">
+        {functionBlockList.map((func, index) => {
+          return (
+            <div
+              className="w-full p-4 text-white bg-gray-800 font-mono"
+              key={index}
+            >
+              <LiveEditor
+                code={code(func)}
+                language={"tsx"}
+                onChange={(code) => {
+                  functionBlockList[index] = code;
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };
@@ -258,8 +268,7 @@ export const DemoApp = () => {
   return (
     <div>
       <ThemeProvider activeTheme={theme}>
-        {showEdit && editor(functionBlockList.join("\n"), setShowEdit)}
-        {/* 主题切换页面和代码动态编辑页面 */}
+        {showEdit && editor(setShowEdit)}
         {!showEdit && (
           <>
             <div className="fixed top-4 right-4">
@@ -281,7 +290,6 @@ export const DemoApp = () => {
               >
                 浅色模式
               </button>
-              {/* 打开代码编辑框 */}
               <button
                 className="bg-primary-6 text-white py-2 px-4 rounded-lg ml-2"
                 onClick={() => setShowEdit(true)}