@dao42/d42paas-front 0.7.35 → 0.7.36

package/dist/DaoPaaS.es.js

@@ -14944,6 +14944,12 @@ const dockerState = create$5(subscribeWithSelector$1((set2) => ({
     dockerStatus: arg
   })
 })));
+const ErrorMsgState = create$5(subscribeWithSelector$1((set2) => ({
+  message: {},
+  setMessage: (arg) => set2({
+    message: arg
+  })
+})));
 const oTStore = create$5(subscribeWithSelector$1((set2) => ({
   asyncType: void 0,
   appStatus: "code",
@@ -28639,6 +28645,25 @@ const PlaygroundInit = (arg) => {
     io.on("dockerStatus", (data) => {
       setDockerStatus(data || "STOP");
     });
+    io.on("folderEvent", async (d2) => {
+      var _a2, _b2;
+      const _d2 = JSON.parse(d2);
+      setCRDTInfo2(_d2);
+      setAsyncType("file");
+      setReplaySource(__spreadProps(__spreadValues({}, _d2), {
+        event: "file"
+      }));
+      const localReplayFile = await (await daopaasDB()).get("replayFiles", _d2.file.path);
+      if (!localReplayFile) {
+        setLocalReplayFile((_a2 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _a2.path, {
+          value: _d2.file.value,
+          revision: 0,
+          path: _d2.file.path
+        });
+      }
+      if (((_b2 = shadowUserStore.getState().shadowUser) == null ? void 0 : _b2.uuid) || IsMe(_d2 == null ? void 0 : _d2.userInfo) && _d2.file)
+        ;
+    });
     io.on("fileContent", async (d2) => {
       var _a2, _b2;
       const _d2 = JSON.parse(d2);
@@ -28704,6 +28729,9 @@ const PlaygroundInit = (arg) => {
         event: "media"
       }));
     });
+    io.on("errorHandler", (d2) => {
+      ErrorMsgState.getState().setMessage(d2);
+    });
     io.on("disconnect", (reason) => {
       if (reason === "io server disconnect") {
         return;
@@ -44602,6 +44630,7 @@ class DaoPaaS {
     __publicField(this, "playgroundId");
     __publicField(this, "serviceWorkerOrigin");
     __publicField(this, "onMessage");
+    __publicField(this, "onError");
     this.mode = mode;
     this.ticket = ticket;
     this.playgroundId = playgroundId;
@@ -44612,6 +44641,7 @@ class DaoPaaS {
     this.paasDomain = paasDomain;
     this.components = components;
     this.onMessage = onMessage;
+    this.onError = onError;
     this.serviceWorkerOrigin = serviceWorkerOrigin;
     sessionStorage.setItem("playgroundId", playgroundId);
     this.init();
@@ -44712,11 +44742,21 @@ class DaoPaaS {
     dockerState.subscribe((state2) => state2, (pre, next2) => {
       this.trigger(lodash$2.exports.pick(pre, ["dockerStatus"]), lodash$2.exports.pick(next2, ["dockerStatus"]));
     });
+    oTStore.subscribe((state2) => state2, (pre, next2) => {
+      this.trigger(lodash$2.exports.pick(pre, ["playgroundStatus"]), lodash$2.exports.pick(next2, ["playgroundStatus"]));
+    });
+    ErrorMsgState.subscribe((state2) => state2, (next2, pre) => {
+      this.trigger("error", lodash$2.exports.pick(next2, "message"));
+    });
     userListStore.subscribe((next2, pre) => {
       this.trigger(lodash$2.exports.pick(pre, ["userList"]), lodash$2.exports.pick(next2, ["userList"]));
     });
   }
   trigger(_d2, data) {
+    if (_d2 === "error") {
+      this.on(data, _d2);
+      return;
+    }
     this.on(data);
   }
   clearIDB(callback) {
@@ -44785,8 +44825,12 @@ class DaoPaaS {
       isRecording: !!setBoolean
     });
   }
-  on(data) {
-    this.onMessage && this.onMessage(data);
+  on(data, type) {
+    if (type === "error") {
+      this.onError && this.onError(data);
+    } else {
+      this.onMessage && this.onMessage(data);
+    }
   }
   mapRender(components) {
     components == null ? void 0 : components.forEach(({
@@ -44854,6 +44898,7 @@ class DaoPaaS {
     props: props2
   }) {
     this.editorDOM = container ? isHTMLElement$1(container) : this.editorDOM;
+    console.log(props2, 374);
     reactDom.exports.render(/* @__PURE__ */ jsx(react.exports.Suspense, {
       fallback: /* @__PURE__ */ jsx(Loading, {}),
       children: /* @__PURE__ */ jsx(LazyEditorComponent$1, __spreadProps(__spreadValues({}, props2), {
@@ -173945,9 +173990,125 @@ class EditorData {
   }
 }
 __publicField(EditorData, "EditorData");
+const FolderSVG = (props2) => /* @__PURE__ */ jsx("svg", {
+  className: props2.className,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "10",
+  viewBox: "0 0 12 10",
+  fill: "none",
+  children: /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0.398438 0.800006C0.398438 0.41341 0.711841 0.100006 1.09844 0.100006H5.29844C5.68503 0.100006 5.99844 0.41341 5.99844 0.800006C5.99844 1.1866 6.31183 1.50001 6.69844 1.50001H10.8984C11.285 1.50001 11.5984 1.81341 11.5984 2.20001V9.20001C11.5984 9.58662 11.285 9.90001 10.8984 9.90001H1.09844C0.711841 9.90001 0.398438 9.58662 0.398438 9.20001V2.90001V2.20001V0.800006ZM10.0234 3.27501H6.17344V4.32501H10.0234V3.27501Z",
+    fill: "#999999"
+  })
+});
+const FileSVG = react.exports.forwardRef((_props, ref) => /* @__PURE__ */ jsx("svg", {
+  className: `flex-shrink-0 ${(_props == null ? void 0 : _props.className) ? _props == null ? void 0 : _props.className : ""}`,
+  ref,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "10",
+  height: "11",
+  viewBox: "0 0 10 11",
+  fill: "none",
+  children: /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0.801562 0.100006C0.414966 0.100006 0.101562 0.41341 0.101562 0.800006V9.90001C0.101562 10.2866 0.414966 10.6 0.801562 10.6H9.20156C9.58817 10.6 9.90156 10.2866 9.90156 9.90001V3.88995C9.90156 3.70431 9.82778 3.52625 9.69653 3.39498L8.15156 1.85001L6.60659 0.305029C6.47534 0.173758 6.29726 0.100006 6.11162 0.100006H0.801562ZM6.22656 3.77501V1.67501H5.17656V4.30001C5.17656 4.58995 5.41162 4.82501 5.70156 4.82501H8.32656V3.77501H6.22656Z",
+    fill: "#666666"
+  })
+}));
+FileSVG.displayName = "FileSVG";
 const TreeRootLayout = newStyled.div`
   height: 100%;
   overflow: auto;
+
+  .folder-svg {
+    margin: 0 0.5rem 0 0.2rem;
+  }
+
+  .file-svg {
+    margin: 0 0.5rem 0 0.2rem;
+  }
+
+  ul.rct-tree-items-container {
+    position: relative;
+    ul.rct-tree-items-container:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 1px;
+      z-index: 8888;
+      left: 8px;
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .rct-tree-root {
+    background: ${(props2) => props2.bgColor};
+    color: ${(props2) => props2.fontColor};
+    overflow: auto;
+  }
+
+  .rct-tree-root.root-drag-over {
+    background-color: ${(props2) => props2.hoverBgColor};
+  }
+
+  .rct-tree-item-li {
+    .rct-tree-item-title-container {
+      .rct-tree-item-arrow {
+        flex-shrink: 0;
+      }
+      .rct-tree-item-avatar {
+        width: 20px;
+        height: 20px;
+        margin-left: 10px;
+        background-color: white;
+        right: 5px;
+      }
+      .rct-tree-item-toolbar {
+        display: none;
+      }
+      &:hover {
+        .rct-tree-item-toolbar {
+          display: flex;
+          gap: 8px;
+        }
+      }
+    }
+  }
+
+  .rct-tree-root-focus {
+    outline: none;
+    .rct-tree-item-li-selected {
+      .rct-tree-item-title-container-selected {
+        color: ${(props2) => props2.hoverTextColor};
+        background-color: ${(props2) => props2.hoverBgColor};
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .rct-tree-root-focus {
+    .rct-tree-item-title-container-focused {
+      border-color: transparent;
+    }
+  }
+
+  :not(.rct-tree-root-focus) {
+    .rct-tree-item-title-container-focused {
+      border-color: transparent;
+    }
+    .rct-tree-item-li-selected {
+      .rct-tree-item-title-container-selected {
+        color: ${(props2) => props2.hoverTextColor};
+        background-color: ${(props2) => props2.hoverBgColor};
+        border-radius: 4px;
+      }
+    }
+  }
 `;
 function addChildrenArray(children, parent2) {
   var _a2, _b2;
@@ -174016,7 +174177,13 @@ const getStringFromFile = async (file) => {
 };
 const FileTree = ({
   onCustomSelect,
-  className
+  dropBgColor = "pink",
+  dropTextColor = "black",
+  hoverBgColor = "rgb(37 45 124 / 80%)",
+  hoverTextColor = "#fff",
+  bgColor = "#15171c",
+  fontColor = "#fff",
+  onClick
 }) => {
   const addedFolder = {
     target: "",
@@ -174074,6 +174241,10 @@ const FileTree = ({
             path: items[0]
           }
         };
+        onClick && onClick({
+          uri: `${fileTree.data.uri}${items[0]}`,
+          path: items[0]
+        });
         (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("fileContent", JSON.stringify(crdt));
       }
     }
@@ -174356,8 +174527,14 @@ const FileTree = ({
   return /* @__PURE__ */ jsx(FollowLayout, {
     name: "file",
     children: /* @__PURE__ */ jsxs(TreeRootLayout, {
-      className: `tree-root-layout ${className ? className : ""}`,
       ref: treeRef,
+      className: `tree-root-layout`,
+      dropBgColor,
+      dropTextColor,
+      hoverBgColor,
+      hoverTextColor,
+      bgColor,
+      fontColor,
       children: [/* @__PURE__ */ jsx("input", {
         id: "manual-upload-file",
         type: "file",
@@ -174404,13 +174581,11 @@ const FileTree = ({
           context,
           children
         }) => {
+          var _a2;
           return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, context.itemContainerWithChildrenProps), {
             className: ["rct-tree-item-li", context.isSelected ? "rct-tree-item-li-selected" : "", context.isExpanded ? "rct-tree-item-li-expanded" : "", context.isFocused ? "rct-tree-item-li-focused" : "", children ? "rct-tree-item-li-hasChildren" : ""].join(" "),
             children: [/* @__PURE__ */ jsxs("div", {
               className: ["rct-tree-item-title-container", context.isSelected ? "rct-tree-item-title-container-selected" : "", context.isExpanded ? "rct-tree-item-title-container-expanded" : "", context.isFocused ? "rct-tree-item-title-container-focused" : "", children ? "rct-tree-item-title-container-hasChildren" : ""].join(" "),
-              style: {
-                paddingLeft: `${depth}0px`
-              },
               children: [remoteUserList[context.interactiveElementProps["data-rct-item-id"]] && remoteUserList[context.interactiveElementProps["data-rct-item-id"]].map((remoteUser) => /* @__PURE__ */ jsx("div", {
                 className: "rct-tree-item-avatar rounded-full absolute border",
                 style: {
@@ -174483,8 +174658,8 @@ const FileTree = ({
                             children: /* @__PURE__ */ jsx("button", {
                               className: "w-full justify-center my-2",
                               onClick: () => {
-                                var _a2;
-                                setRenameValue((_a2 = title == null ? void 0 : title.props) == null ? void 0 : _a2.children);
+                                var _a3;
+                                setRenameValue((_a3 = title == null ? void 0 : title.props) == null ? void 0 : _a3.children);
                                 setRenameItem(context.interactiveElementProps["data-rct-item-id"]);
                               },
                               children: "\u91CD\u547D\u540D"
@@ -174521,9 +174696,13 @@ const FileTree = ({
                       break;
                   }
                 }
-              }) : /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues(__spreadValues({}, context.itemContainerWithoutChildrenProps), context.interactiveElementProps), {
+              }) : /* @__PURE__ */ jsxs("button", __spreadProps(__spreadValues(__spreadValues({}, context.itemContainerWithoutChildrenProps), context.interactiveElementProps), {
                 className: ["rct-tree-item-button", context.isSelected ? "rct-tree-item-button-selected" : "", context.isExpanded ? "rct-tree-item-button-expanded" : "", context.isFocused ? "rct-tree-item-button-focused" : "", children ? "rct-tree-item-button-hasChildren" : ""].join(" "),
-                children: title
+                children: [((_a2 = arrow == null ? void 0 : arrow.props) == null ? void 0 : _a2.className.includes("rct-tree-item-arrow-hasChildren")) ? /* @__PURE__ */ jsx(FolderSVG, {
+                  className: "folder-svg"
+                }) : /* @__PURE__ */ jsx(FileSVG, {
+                  className: "file-svg"
+                }), title]
               }))]
             }), children]
           }));
@@ -174732,41 +174911,14 @@ const EditorLayout = newStyled.div`
     color: #666;
   }
 
-  .stack-list {
-    width: 100%;
-    height: 35px;
-    transform: translate(0, -1px);
-    overflow-x: auto;
-    flex-wrap: nowrap;
-    li {
-      /* width: 100px; */
-      height: 100%;
-      padding: 5px 25px;
-      color: #fff;
-      font-size: 12px;
-      flex: 0 0 auto;
-      &:hover {
-        background: #005391;
-      }
-    }
+  .margin-view-overlays {
+    background-color: ${(props2) => props2.theme.marginViewOverlays};
 
-    .active {
-      background: #004172;
+    .line-numbers {
+      color: ${(props2) => props2.theme.lineNumbers};
 
-      box-shadow: 0px 1px 0px 0 #333;
-      border-right: 1px solid rgb(42 96 231);
-      /* border-left: 1px solid rgb(42 96 231); */
-      /* background: red; */
-    }
-
-    .tree-closer {
-      right: 4px;
-      font-size: 14px;
-      opacity: 0;
-      line-height: 0;
-      transition: opacity 0.2s ease-in-out;
-      &.hover {
-        opacity: 1;
+      &.active-line-number {
+        color: ${(props2) => props2.theme.activeLineNumber};
       }
     }
   }
@@ -220182,6 +220334,214 @@ const Markdown = ({
     })
   }), document.body);
 };
+const Dracula = {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    {
+      background: "282a36",
+      token: ""
+    },
+    {
+      foreground: "6272a4",
+      token: "comment"
+    },
+    {
+      foreground: "f1fa8c",
+      token: "string"
+    },
+    {
+      foreground: "bd93f9",
+      token: "constant.numeric"
+    },
+    {
+      foreground: "bd93f9",
+      token: "constant.language"
+    },
+    {
+      foreground: "bd93f9",
+      token: "constant.character"
+    },
+    {
+      foreground: "bd93f9",
+      token: "constant.other"
+    },
+    {
+      foreground: "ffb86c",
+      token: "variable.other.readwrite.instance"
+    },
+    {
+      foreground: "ff79c6",
+      token: "constant.character.escaped"
+    },
+    {
+      foreground: "ff79c6",
+      token: "constant.character.escape"
+    },
+    {
+      foreground: "ff79c6",
+      token: "string source"
+    },
+    {
+      foreground: "ff79c6",
+      token: "string source.ruby"
+    },
+    {
+      foreground: "ff79c6",
+      token: "keyword"
+    },
+    {
+      foreground: "ff79c6",
+      token: "storage"
+    },
+    {
+      foreground: "8be9fd",
+      fontStyle: "italic",
+      token: "storage.type"
+    },
+    {
+      foreground: "50fa7b",
+      fontStyle: "underline",
+      token: "entity.name.class"
+    },
+    {
+      foreground: "50fa7b",
+      fontStyle: "italic underline",
+      token: "entity.other.inherited-class"
+    },
+    {
+      foreground: "50fa7b",
+      token: "entity.name.function"
+    },
+    {
+      foreground: "ffb86c",
+      fontStyle: "italic",
+      token: "variable.parameter"
+    },
+    {
+      foreground: "ff79c6",
+      token: "entity.name.tag"
+    },
+    {
+      foreground: "50fa7b",
+      token: "entity.other.attribute-name"
+    },
+    {
+      foreground: "8be9fd",
+      token: "support.function"
+    },
+    {
+      foreground: "6be5fd",
+      token: "support.constant"
+    },
+    {
+      foreground: "66d9ef",
+      fontStyle: " italic",
+      token: "support.type"
+    },
+    {
+      foreground: "66d9ef",
+      fontStyle: " italic",
+      token: "support.class"
+    },
+    {
+      foreground: "f8f8f0",
+      background: "ff79c6",
+      token: "invalid"
+    },
+    {
+      foreground: "f8f8f0",
+      background: "bd93f9",
+      token: "invalid.deprecated"
+    },
+    {
+      foreground: "cfcfc2",
+      token: "meta.structure.dictionary.json string.quoted.double.json"
+    },
+    {
+      foreground: "6272a4",
+      token: "meta.diff"
+    },
+    {
+      foreground: "6272a4",
+      token: "meta.diff.header"
+    },
+    {
+      foreground: "ff79c6",
+      token: "markup.deleted"
+    },
+    {
+      foreground: "50fa7b",
+      token: "markup.inserted"
+    },
+    {
+      foreground: "e6db74",
+      token: "markup.changed"
+    },
+    {
+      foreground: "bd93f9",
+      token: "constant.numeric.line-number.find-in-files - match"
+    },
+    {
+      foreground: "e6db74",
+      token: "entity.name.filename"
+    },
+    {
+      foreground: "f83333",
+      token: "message.error"
+    },
+    {
+      foreground: "eeeeee",
+      token: "punctuation.definition.string.begin.json - meta.structure.dictionary.value.json"
+    },
+    {
+      foreground: "eeeeee",
+      token: "punctuation.definition.string.end.json - meta.structure.dictionary.value.json"
+    },
+    {
+      foreground: "8be9fd",
+      token: "meta.structure.dictionary.json string.quoted.double.json"
+    },
+    {
+      foreground: "f1fa8c",
+      token: "meta.structure.dictionary.value.json string.quoted.double.json"
+    },
+    {
+      foreground: "50fa7b",
+      token: "meta meta meta meta meta meta meta.structure.dictionary.value string"
+    },
+    {
+      foreground: "ffb86c",
+      token: "meta meta meta meta meta meta.structure.dictionary.value string"
+    },
+    {
+      foreground: "ff79c6",
+      token: "meta meta meta meta meta.structure.dictionary.value string"
+    },
+    {
+      foreground: "bd93f9",
+      token: "meta meta meta meta.structure.dictionary.value string"
+    },
+    {
+      foreground: "50fa7b",
+      token: "meta meta meta.structure.dictionary.value string"
+    },
+    {
+      foreground: "ffb86c",
+      token: "meta meta.structure.dictionary.value string"
+    }
+  ],
+  colors: {
+    "editor.foreground": "#f8f8f2",
+    "editor.background": "#282a36",
+    "editor.selectionBackground": "#44475a",
+    "editor.lineHighlightBackground": "#44475a",
+    "editorCursor.foreground": "#f8f8f0",
+    "editorWhitespace.foreground": "#3B3A32",
+    "editorIndentGuide.activeBackground": "#9D550FB0",
+    "editor.selectionHighlightBorder": "#222218"
+  }
+};
 const APP_DIR = "/home/runner/app";
 let editor;
 const docServer = new Map();
@@ -220200,7 +220560,7 @@ const Editor = ({
   editorStyle,
   serviceWorkerOrigin,
   useLsp,
-  className
+  theme
 }) => {
   const divEl = react.exports.useRef(null);
   const [clientEditor, setClientEditor] = react.exports.useState(null);
@@ -220471,24 +220831,8 @@ const Editor = ({
         io == null ? void 0 : io.emit("fileTreeOp", JSON.stringify(payload));
       }
     });
-    editor$1.defineTheme("myCoolTheme", {
-      base: "vs-dark",
-      inherit: false,
-      rules: [{
-        token: "green",
-        background: "FF0000",
-        foreground: "00FF00",
-        fontStyle: "italic"
-      }, {
-        token: "red",
-        foreground: "FF0000",
-        fontStyle: "bold underline"
-      }],
-      colors: {
-        "editor.foreground": "#FFFFFF",
-        "editor.background": "#000000"
-      }
-    });
+    editor$1.defineTheme("myCoolTheme", Dracula);
+    editor$1.setTheme("myCoolTheme");
     setClientEditor(new MonacoAdapter(editor, serviceWorkerOrigin));
     setOtherClients(new ClientMeta(editor, userList.filter((x2) => !IsMe(x2))));
     serviceBinder();
@@ -220655,7 +220999,8 @@ const Editor = ({
       }
     }), /* @__PURE__ */ jsxs(EditorLayout, {
       style: containerStyle,
-      className: `editor-layout ${className ? className : ""} flex flex-col`,
+      theme,
+      className: `editor-layout flex flex-col`,
       children: [/* @__PURE__ */ jsx(FileTreeStack, {
         editor,
         menuStyle,
@@ -220670,11 +221015,56 @@ const Editor = ({
     })]
   });
 };
+const FileTreeStackLayout = newStyled.ul`
+  .active {
+    background-color: ${(props2) => props2.menuStyle.backgroundColor};
+    box-shadow: 0px 1px 0px 0 #333;
+    border-right: 1px solid ${(props2) => props2.menuStyle.backgroundColor};
+  }
+
+  width: 100%;
+  height: 35px;
+  transform: translate(0, -1px);
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  li {
+    /* width: 100px; */
+    height: 100%;
+    padding: 5px 25px;
+    color: ${(props2) => props2.menuStyle.textColor};
+    font-size: 12px;
+    flex: 0 0 auto;
+    &:hover {
+      background: ${(props2) => props2.menuStyle.hoverBgColor};
+      color: ${(props2) => props2.menuStyle.hoverTextColor};
+    }
+  }
+
+  .tree-closer {
+    right: 4px;
+    font-size: 14px;
+    opacity: 0;
+    line-height: 0;
+    transition: opacity 0.2s ease-in-out;
+    color: ${(props2) => props2.menuStyle.iconColor};
+    &.hover {
+      opacity: 1;
+      color: ${(props2) => props2.menuStyle.hoverIconColor};
+    }
+  }
+`;
 const FileTreeStack = ({
   editor: editor2,
-  menuStyle,
   switchModel,
-  clearPlayground
+  clearPlayground,
+  menuStyle = {
+    backgroundColor: "#005391",
+    textColor: "#fff",
+    hoverBgColor: "rgb(37 45 124 / 80%)",
+    hoverTextColor: "#fff",
+    iconColor: "#fff",
+    hoverIconColor: "#fff"
+  }
 }) => {
   const switchDoc2 = oTStore((state2) => state2.switchDoc);
   oTStore((state2) => state2.dockerInfo);
@@ -220698,11 +221088,11 @@ const FileTreeStack = ({
       switchModel(_fileTreeStackList.slice(-1)[0].model);
     }
   };
-  return fileTreeStack && fileTreeStack.length > 0 ? /* @__PURE__ */ jsx("ul", {
-    style: menuStyle,
+  return fileTreeStack && fileTreeStack.length > 0 ? /* @__PURE__ */ jsx(FileTreeStackLayout, {
+    menuStyle,
     id: "menu-list",
     ref,
-    className: "\r flex\r flex-row\r stack-list\r items-center\r flex-shrink-0\r scroll-smooth\r no-scrollbar\r overflow-x-scroll\r bg-codezone-black\r overflow-auto touch-pan-x",
+    className: "flex flex-row stack-list items-center flex-shrink-0 scroll-smooth no-scrollbar overflow-x-scroll bg-codezone-black overflow-auto touch-pan-x",
     children: fileTreeStack == null ? void 0 : fileTreeStack.map((f2, index2) => /* @__PURE__ */ jsxs("li", {
       className: `
             flex
@@ -227987,12 +228377,25 @@ var index$3 = /* @__PURE__ */ Object.freeze({
   "default": Console
 });
 const PROTOCOL = "https://";
+const BrowserLayout = newStyled.div``;
 const NavBar = newStyled.div`
   background-color: white;
   height: 30px;
   display: flex;
   align-items: center;
 
+  .reload {
+    color: ${(props2) => props2.freshIconColor};
+  }
+
+  .file-copy {
+    color: ${(props2) => props2.openIconColor};
+  }
+
+  input {
+    color: ${(props2) => props2.inputColor};
+  }
+
   i {
     margin: 0 10px;
     width: 24px;
@@ -228038,9 +228441,15 @@ const StopMask = newStyled.div`
 `;
 const OutputBrowser = (_g2) => {
   var _h2 = _g2, {
-    showURL = false
+    showURL = false,
+    freshIconColor = "#00bcd4",
+    inputColor = "#adacac",
+    openIconColor = "#adacac"
   } = _h2, props2 = __objRest(_h2, [
-    "showURL"
+    "showURL",
+    "freshIconColor",
+    "inputColor",
+    "openIconColor"
   ]);
   var _a2;
   const pStatus = oTStore((state2) => state2.playgroundStatus);
@@ -228094,33 +228503,39 @@ const OutputBrowser = (_g2) => {
       }
     }
   }, [playgroundStatus, dockerStatus]);
-  return /* @__PURE__ */ jsxs(FollowLayout, {
+  return /* @__PURE__ */ jsx(FollowLayout, {
     name: "browser",
-    children: [showURL ? /* @__PURE__ */ jsxs(NavBar, {
-      children: [/* @__PURE__ */ jsx("i", {
-        className: "d42 text-xl reload cursor-pointer",
-        onClick: onRefresh
-      }), /* @__PURE__ */ jsx("input", {
-        type: "text",
-        value: iframeSrc,
-        onChange: (e2) => setIframeSrc(e2.target.value),
-        onKeyDown: onEnterKey
-      }), /* @__PURE__ */ jsx("i", {
-        className: "d42 text-xl file-copy cursor-pointer",
-        onClick: onOpenInNewTab
+    children: /* @__PURE__ */ jsxs(BrowserLayout, {
+      className: "w-full h-full",
+      children: [showURL ? /* @__PURE__ */ jsxs(NavBar, {
+        freshIconColor,
+        inputColor,
+        openIconColor,
+        children: [/* @__PURE__ */ jsx("i", {
+          className: "d42 text-xl reload cursor-pointer",
+          onClick: onRefresh
+        }), /* @__PURE__ */ jsx("input", {
+          type: "text",
+          value: iframeSrc,
+          onChange: (e2) => setIframeSrc(e2.target.value),
+          onKeyDown: onEnterKey
+        }), /* @__PURE__ */ jsx("i", {
+          className: "d42 text-xl file-copy cursor-pointer",
+          onClick: onOpenInNewTab
+        })]
+      }) : null, dockerStatus === "STOP" && /* @__PURE__ */ jsx(StopMask, {
+        children: /* @__PURE__ */ jsx("span", {
+          children: "\u70B9\u51FB\u201C\u8FD0\u884C\u201D\uFF0C\u542F\u52A8\u5E94\u7528"
+        })
+      }), /* @__PURE__ */ jsx("iframe", {
+        ref: iframeRef,
+        src: iframeSrc,
+        style: {
+          width: "100%",
+          height: "calc(100% - 30px)"
+        }
       })]
-    }) : null, dockerStatus === "STOP" && /* @__PURE__ */ jsx(StopMask, {
-      children: /* @__PURE__ */ jsx("span", {
-        children: "\u70B9\u51FB\u201C\u8FD0\u884C\u201D\uFF0C\u542F\u52A8\u5E94\u7528"
-      })
-    }), /* @__PURE__ */ jsx("iframe", {
-      ref: iframeRef,
-      src: iframeSrc,
-      style: {
-        width: "100%",
-        height: "calc(100% - 30px)"
-      }
-    })]
+    })
   });
 };
 var index$2 = /* @__PURE__ */ Object.freeze({
@@ -228885,9 +229300,9 @@ const HeaderLayout = newStyled.header`
 `;
 const ContainerLayout = newStyled.div`
   height: calc(100% - 4.625rem);
-  section {
+  /* section {
     height: calc(100% - 0.625rem);
-  }
+  } */
 `;
 const RunnerLayout = newStyled.section`
   background: #202327;
@@ -228960,7 +229375,6 @@ const Index = (props2) => {
               count: 10
             }),
             children: /* @__PURE__ */ jsx(LazyEditorComponent, {
-              className: "editor-custom-style",
               serviceWorkerOrigin: props2.serviceWorkerOrigin,
               useLsp: true
             })
@@ -228970,7 +229384,8 @@ const Index = (props2) => {
           children: [/* @__PURE__ */ jsx(PreviewWrapper, {
             className: "mb-2.5 relative",
             children: /* @__PURE__ */ jsx(OutputBrowser, {
-              url: url2
+              url: url2,
+              showURL: true
             })
           }), /* @__PURE__ */ jsx(Tabs, {
             className: "mb-1",