@dao42/d42paas-front 0.5.20 → 0.5.26

package/dist/DaoPaaS.es.js

@@ -29401,7 +29401,7 @@ const Loading = () => {
     })
   });
 };
-let index$5 = 0;
+let index$7 = 0;
 const REPLAY_INTERVAL = 250;
 let timer;
 let timeOutT;
@@ -29418,7 +29418,7 @@ const replayHandler = async () => {
     data: dockerInfo.fileTree
   });
   const crdts = await getLocalCRDTs();
-  const filterData = crdts[index$5];
+  const filterData = crdts[index$7];
   const cdata = __spreadValues({}, filterData);
   timeOutT = setTimeout(async () => {
     if (!cdata.timestamp) {
@@ -29440,7 +29440,7 @@ const replayHandler = async () => {
     }
     setCRDTInfo(__spreadValues({}, cdata));
   }, 0);
-  index$5++;
+  index$7++;
   return {};
 };
 const replay = async (status2) => {
@@ -29460,7 +29460,7 @@ const replay = async (status2) => {
         content: "\u64AD\u653E\u5B8C\u6BD5",
         placement: "topCenter"
       });
-      index$5 = 0;
+      index$7 = 0;
       break;
     case "disabled":
       clearInterval(timer);
@@ -29469,7 +29469,7 @@ const replay = async (status2) => {
         path: ""
       });
       setAppStatus("code");
-      index$5 = 0;
+      index$7 = 0;
       break;
     case "pause":
       clearInterval(timer);
@@ -29492,13 +29492,19 @@ const replay = async (status2) => {
       break;
   }
 };
-var index$4 = "";
+var index$6 = "";
 const LazyTreeComponent = lazy$2(async () => (await Promise.resolve().then(function() {
-  return index$3;
+  return index$5;
 })).FileTree);
 const LazyEditorComponent = lazy$2(async () => (await Promise.resolve().then(function() {
-  return index$2;
+  return index$4;
 })).Editor);
+const LazyConsoleComponent = lazy$2(async () => (await Promise.resolve().then(function() {
+  return index$3;
+})).default);
+const LazyBrowserComponent = lazy$2(async () => (await Promise.resolve().then(function() {
+  return index$2;
+})).default);
 const LazyShellComponent = lazy$2(async () => (await Promise.resolve().then(function() {
   return index$1;
 })).default);
@@ -29604,6 +29610,14 @@ class DaoPaaS {
     var _a2;
     (_a2 = this.io) == null ? void 0 : _a2.emit("active");
   }
+  runPlayground() {
+    var _a2;
+    (_a2 = this.io) == null ? void 0 : _a2.emit("run");
+  }
+  stopPlayground() {
+    var _a2;
+    (_a2 = this.io) == null ? void 0 : _a2.emit("stop");
+  }
   switchLspServer(arg) {
     this.otstore.switchLspServer(arg);
   }
@@ -29666,6 +29680,26 @@ class DaoPaaS {
       children: /* @__PURE__ */ jsx(LazyTreeComponent, __spreadValues({}, props))
     }), this.editorDOM);
   }
+  Console({
+    container,
+    props
+  }) {
+    this.editorDOM = container ? isHTMLElement$1(container) : this.editorDOM;
+    reactDom.exports.render(/* @__PURE__ */ jsx(react.exports.Suspense, {
+      fallback: /* @__PURE__ */ jsx(Loading, {}),
+      children: /* @__PURE__ */ jsx(LazyConsoleComponent, __spreadValues({}, props))
+    }), this.editorDOM);
+  }
+  Browser({
+    container,
+    props
+  }) {
+    this.editorDOM = container ? isHTMLElement$1(container) : this.editorDOM;
+    reactDom.exports.render(/* @__PURE__ */ jsx(react.exports.Suspense, {
+      fallback: /* @__PURE__ */ jsx(Loading, {}),
+      children: /* @__PURE__ */ jsx(LazyBrowserComponent, __spreadValues({}, props))
+    }), this.editorDOM);
+  }
 }
 function isHTMLElement$1(arg) {
   if (!/HTMLDivElement|HTMLElement/.test(Object.prototype.toString.call(arg))) {
@@ -32056,7 +32090,7 @@ const FileTree = ({
     })
   });
 };
-var index$3 = /* @__PURE__ */ Object.freeze({
+var index$5 = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
   FileTree
@@ -157483,24 +157517,6 @@ class ToggleHighContrast extends EditorAction {
   }
 }
 registerEditorAction(ToggleHighContrast);
-var monaco = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  [Symbol.toStringTag]: "Module",
-  CancellationTokenSource,
-  Emitter,
-  KeyCode,
-  KeyMod,
-  Position: Position$4,
-  Range: Range$4,
-  Selection: Selection$2,
-  SelectionDirection,
-  MarkerSeverity,
-  MarkerTag,
-  Uri,
-  Token,
-  editor: editor$1,
-  languages
-});
 var lib$2 = {};
 var textOperation = { exports: {} };
 (function(module2) {
@@ -162745,8 +162761,8 @@ var DEFAULT = {
   startClosed: false,
   debug: false
 };
-var ReconnectingWebSocket = function() {
-  function ReconnectingWebSocket2(url2, protocols, options) {
+(function() {
+  function ReconnectingWebSocket(url2, protocols, options) {
     var _this = this;
     if (options === void 0) {
       options = {};
@@ -162828,63 +162844,63 @@ var ReconnectingWebSocket = function() {
     }
     this._connect();
   }
-  Object.defineProperty(ReconnectingWebSocket2, "CONNECTING", {
+  Object.defineProperty(ReconnectingWebSocket, "CONNECTING", {
     get: function() {
       return 0;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2, "OPEN", {
+  Object.defineProperty(ReconnectingWebSocket, "OPEN", {
     get: function() {
       return 1;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2, "CLOSING", {
+  Object.defineProperty(ReconnectingWebSocket, "CLOSING", {
     get: function() {
       return 2;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2, "CLOSED", {
+  Object.defineProperty(ReconnectingWebSocket, "CLOSED", {
     get: function() {
       return 3;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "CONNECTING", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "CONNECTING", {
     get: function() {
-      return ReconnectingWebSocket2.CONNECTING;
+      return ReconnectingWebSocket.CONNECTING;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "OPEN", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "OPEN", {
     get: function() {
-      return ReconnectingWebSocket2.OPEN;
+      return ReconnectingWebSocket.OPEN;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "CLOSING", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "CLOSING", {
     get: function() {
-      return ReconnectingWebSocket2.CLOSING;
+      return ReconnectingWebSocket.CLOSING;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "CLOSED", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "CLOSED", {
     get: function() {
-      return ReconnectingWebSocket2.CLOSED;
+      return ReconnectingWebSocket.CLOSED;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "binaryType", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "binaryType", {
     get: function() {
       return this._ws ? this._ws.binaryType : this._binaryType;
     },
@@ -162897,14 +162913,14 @@ var ReconnectingWebSocket = function() {
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "retryCount", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "retryCount", {
     get: function() {
       return Math.max(this._retryCount, 0);
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "bufferedAmount", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "bufferedAmount", {
     get: function() {
       var bytes = this._messageQueue.reduce(function(acc, message) {
         if (typeof message === "string") {
@@ -162921,38 +162937,38 @@ var ReconnectingWebSocket = function() {
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "extensions", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "extensions", {
     get: function() {
       return this._ws ? this._ws.extensions : "";
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "protocol", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "protocol", {
     get: function() {
       return this._ws ? this._ws.protocol : "";
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "readyState", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "readyState", {
     get: function() {
       if (this._ws) {
         return this._ws.readyState;
       }
-      return this._options.startClosed ? ReconnectingWebSocket2.CLOSED : ReconnectingWebSocket2.CONNECTING;
+      return this._options.startClosed ? ReconnectingWebSocket.CLOSED : ReconnectingWebSocket.CONNECTING;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket2.prototype, "url", {
+  Object.defineProperty(ReconnectingWebSocket.prototype, "url", {
     get: function() {
       return this._ws ? this._ws.url : "";
     },
     enumerable: true,
     configurable: true
   });
-  ReconnectingWebSocket2.prototype.close = function(code2, reason) {
+  ReconnectingWebSocket.prototype.close = function(code2, reason) {
     if (code2 === void 0) {
       code2 = 1e3;
     }
@@ -162969,7 +162985,7 @@ var ReconnectingWebSocket = function() {
     }
     this._ws.close(code2, reason);
   };
-  ReconnectingWebSocket2.prototype.reconnect = function(code2, reason) {
+  ReconnectingWebSocket.prototype.reconnect = function(code2, reason) {
     this._shouldReconnect = true;
     this._closeCalled = false;
     this._retryCount = -1;
@@ -162980,7 +162996,7 @@ var ReconnectingWebSocket = function() {
       this._connect();
     }
   };
-  ReconnectingWebSocket2.prototype.send = function(data) {
+  ReconnectingWebSocket.prototype.send = function(data) {
     if (this._ws && this._ws.readyState === this.OPEN) {
       this._debug("send", data);
       this._ws.send(data);
@@ -162992,12 +163008,12 @@ var ReconnectingWebSocket = function() {
       }
     }
   };
-  ReconnectingWebSocket2.prototype.addEventListener = function(type, listener) {
+  ReconnectingWebSocket.prototype.addEventListener = function(type, listener) {
     if (this._listeners[type]) {
       this._listeners[type].push(listener);
     }
   };
-  ReconnectingWebSocket2.prototype.dispatchEvent = function(event) {
+  ReconnectingWebSocket.prototype.dispatchEvent = function(event) {
     var e_1, _a2;
     var listeners2 = this._listeners[event.type];
     if (listeners2) {
@@ -163020,14 +163036,14 @@ var ReconnectingWebSocket = function() {
     }
     return true;
   };
-  ReconnectingWebSocket2.prototype.removeEventListener = function(type, listener) {
+  ReconnectingWebSocket.prototype.removeEventListener = function(type, listener) {
     if (this._listeners[type]) {
       this._listeners[type] = this._listeners[type].filter(function(l2) {
         return l2 !== listener;
       });
     }
   };
-  ReconnectingWebSocket2.prototype._debug = function() {
+  ReconnectingWebSocket.prototype._debug = function() {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
       args[_i] = arguments[_i];
@@ -163036,7 +163052,7 @@ var ReconnectingWebSocket = function() {
       console.log.apply(console, __spread(["RWS>"], args));
     }
   };
-  ReconnectingWebSocket2.prototype._getNextDelay = function() {
+  ReconnectingWebSocket.prototype._getNextDelay = function() {
     var _a2 = this._options, _b2 = _a2.reconnectionDelayGrowFactor, reconnectionDelayGrowFactor = _b2 === void 0 ? DEFAULT.reconnectionDelayGrowFactor : _b2, _c2 = _a2.minReconnectionDelay, minReconnectionDelay = _c2 === void 0 ? DEFAULT.minReconnectionDelay : _c2, _d2 = _a2.maxReconnectionDelay, maxReconnectionDelay = _d2 === void 0 ? DEFAULT.maxReconnectionDelay : _d2;
     var delay = 0;
     if (this._retryCount > 0) {
@@ -163048,13 +163064,13 @@ var ReconnectingWebSocket = function() {
     this._debug("next delay", delay);
     return delay;
   };
-  ReconnectingWebSocket2.prototype._wait = function() {
+  ReconnectingWebSocket.prototype._wait = function() {
     var _this = this;
     return new Promise(function(resolve2) {
       setTimeout(resolve2, _this._getNextDelay());
     });
   };
-  ReconnectingWebSocket2.prototype._getNextUrl = function(urlProvider) {
+  ReconnectingWebSocket.prototype._getNextUrl = function(urlProvider) {
     if (typeof urlProvider === "string") {
       return Promise.resolve(urlProvider);
     }
@@ -163069,7 +163085,7 @@ var ReconnectingWebSocket = function() {
     }
     throw Error("Invalid URL");
   };
-  ReconnectingWebSocket2.prototype._connect = function() {
+  ReconnectingWebSocket.prototype._connect = function() {
     var _this = this;
     if (this._connectLock || !this._shouldReconnect) {
       return;
@@ -163102,11 +163118,11 @@ var ReconnectingWebSocket = function() {
       }, connectionTimeout);
     });
   };
-  ReconnectingWebSocket2.prototype._handleTimeout = function() {
+  ReconnectingWebSocket.prototype._handleTimeout = function() {
     this._debug("timeout event");
     this._handleError(new ErrorEvent$1(Error("TIMEOUT"), this));
   };
-  ReconnectingWebSocket2.prototype._disconnect = function(code2, reason) {
+  ReconnectingWebSocket.prototype._disconnect = function(code2, reason) {
     if (code2 === void 0) {
       code2 = 1e3;
     }
@@ -163121,18 +163137,18 @@ var ReconnectingWebSocket = function() {
     } catch (error2) {
     }
   };
-  ReconnectingWebSocket2.prototype._acceptOpen = function() {
+  ReconnectingWebSocket.prototype._acceptOpen = function() {
     this._debug("accept open");
     this._retryCount = 0;
   };
-  ReconnectingWebSocket2.prototype._callEventListener = function(event, listener) {
+  ReconnectingWebSocket.prototype._callEventListener = function(event, listener) {
     if ("handleEvent" in listener) {
       listener.handleEvent(event);
     } else {
       listener(event);
     }
   };
-  ReconnectingWebSocket2.prototype._removeListeners = function() {
+  ReconnectingWebSocket.prototype._removeListeners = function() {
     if (!this._ws) {
       return;
     }
@@ -163142,7 +163158,7 @@ var ReconnectingWebSocket = function() {
     this._ws.removeEventListener("message", this._handleMessage);
     this._ws.removeEventListener("error", this._handleError);
   };
-  ReconnectingWebSocket2.prototype._addListeners = function() {
+  ReconnectingWebSocket.prototype._addListeners = function() {
     if (!this._ws) {
       return;
     }
@@ -163152,12 +163168,12 @@ var ReconnectingWebSocket = function() {
     this._ws.addEventListener("message", this._handleMessage);
     this._ws.addEventListener("error", this._handleError);
   };
-  ReconnectingWebSocket2.prototype._clearTimeouts = function() {
+  ReconnectingWebSocket.prototype._clearTimeouts = function() {
     clearTimeout(this._connectTimeout);
     clearTimeout(this._uptimeTimeout);
   };
-  return ReconnectingWebSocket2;
-}();
+  return ReconnectingWebSocket;
+})();
 var lib = {};
 var disposable = {};
 var services = {};
@@ -174682,7 +174698,9 @@ const EditorLayout = newStyled.div`
   .stack-list {
     width: 100%;
     height: 40px;
-
+    transform: translate(0, -1px);
+    overflow-x: auto;
+    flex-wrap: nowrap;
     li {
       /* width: 100px; */
       height: 100%;
@@ -174693,6 +174711,7 @@ const EditorLayout = newStyled.div`
 
     .active {
       background: #1e1e1e;
+      box-shadow: 0px 1px 0px 0 #333;
       /* border-left: 1px solid rgb(42 96 231);
       border-right: 1px solid rgb(42 96 231); */
       /* background: red; */
@@ -174786,7 +174805,6 @@ const Editor = ({
           keepString += i2 === 0 ? 0 : change.text.length;
           return new TextOperation().retain(i2 === 0 ? change.rangeOffset : change.rangeOffset - rangeLengthamount + keepString).delete(change.rangeLength).insert(change.text).retain(valuelength - change.rangeOffset - change.rangeLength);
         }).reduce((a2, b2) => a2.compose(b2));
-        setLocalFile((doc2 == null ? void 0 : doc2.path) ? doc2 == null ? void 0 : doc2.path : "singleFile", editor.getValue());
         client2.applyClient(operation);
       } else {
         setValue(changes[0].text);
@@ -174875,45 +174893,7 @@ const Editor = ({
       extensions: [".ts"],
       aliases: ["TypeScript", "ts", "TS", "typescript"]
     });
-    if (disable)
-      return;
-    lib.MonacoServices.install(monaco);
-    const {
-      lspUrl,
-      ticket
-    } = oTStore.getState().dockerInfo;
-    if (!lspUrl)
-      return;
-    const webSocket = new ReconnectingWebSocket(`wss://${lspUrl}/${ticket}`, [], {
-      maxReconnectionDelay: 1e4,
-      minReconnectionDelay: 1e3,
-      reconnectionDelayGrowFactor: 1.3,
-      connectionTimeout: 1e4,
-      maxRetries: Infinity,
-      debug: false
-    });
-    lib$1.listen({
-      webSocket,
-      onConnection: (connection2) => {
-        const languageClient = new lib.MonacoLanguageClient({
-          name: "Language Client",
-          clientOptions: {
-            documentSelector: ["java", "ruby"],
-            errorHandler: {
-              error: () => lib.ErrorAction.Continue,
-              closed: () => lib.CloseAction.DoNotRestart
-            }
-          },
-          connectionProvider: {
-            get: (errorHandler2, closeHandler) => {
-              return Promise.resolve(lib.createConnection(connection2, errorHandler2, closeHandler));
-            }
-          }
-        });
-        const disposable2 = languageClient.start();
-        connection2.onClose(() => disposable2.dispose());
-      }
-    });
+    return;
   };
   const switchModel = (model) => {
     const {
@@ -175135,7 +175115,7 @@ const Editor = ({
     setUsersDelta(USERLISTSTORE.userList.filter((u2) => !IsMe(u2)).map((x2) => {
       return __spreadProps(__spreadValues({}, x2), {
         label: {
-          domNode: document.createElement("div"),
+          domNode: null,
           getId: function() {
             return `label-${x2.uuid}`;
           },
@@ -175167,7 +175147,6 @@ const Editor = ({
       }
     });
   }, [USERLISTSTORE.userList, file == null ? void 0 : file.path]);
-  console.log(file);
   return /* @__PURE__ */ jsxs(EditorLayout, {
     className: "editor-layout flex flex-col",
     children: [FileTreeStack.length > 0 ? /* @__PURE__ */ jsx("ul", {
@@ -175186,7 +175165,7 @@ const Editor = ({
     })]
   });
 };
-var index$2 = /* @__PURE__ */ Object.freeze({
+var index$4 = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
   Editor
@@ -182313,17 +182292,241 @@ const XTerm = (_a2) => {
     })
   });
 };
-const TerminalComponent = (_c2) => {
+const Console = (_c2) => {
   var _d2 = _c2, {
     options
   } = _d2, props = __objRest(_d2, [
     "options"
   ]);
+  const defaultOptions2 = __spreadValues({
+    convertEol: true,
+    fontSize: 12,
+    fontFamily: "Monaco, Menlo, monospace",
+    lineHeight: 1,
+    cursorBlink: true,
+    cursorWidth: 1,
+    cursorStyle: "block",
+    rightClickSelectsWord: true,
+    theme: {
+      background: "#1E1E1E"
+    }
+  }, options);
+  const [terminal, setTerminal] = react.exports.useState(null);
+  const {
+    CRDTInfo
+  } = oTStore((state) => state);
+  const {
+    dockerStatus
+  } = oTStore((state) => state);
+  const initTerminalText = (terminal2, text2) => {
+    terminal2.write("\r\n");
+    terminal2.clear();
+    writeText(terminal2, text2);
+  };
+  const writeText = (terminal2, text2) => {
+    terminal2.write(text2);
+  };
+  react.exports.useEffect(() => {
+    if (!terminal) {
+      const term = new xterm.exports.Terminal(defaultOptions2);
+      setTerminal(term);
+    }
+  }, []);
+  react.exports.useEffect(() => {
+    if (!terminal)
+      return;
+    if (dockerStatus === "STOP") {
+      initTerminalText(terminal, "\u5E94\u7528\u672A\u542F\u52A8\r\n");
+    } else {
+      initTerminalText(terminal, oTStore.getState().dockerInfo.consoleHistory);
+    }
+  }, [terminal]);
+  react.exports.useEffect(() => {
+    const crdt = CRDTInfo.console;
+    if (terminal && crdt) {
+      if (crdt.doc.value === "^C") {
+        writeText(terminal, crdt.doc.value);
+        initTerminalText(terminal, "");
+        return;
+      }
+      writeText(terminal, crdt.doc.value || "");
+    }
+  }, [CRDTInfo.console]);
+  react.exports.useEffect(() => {
+    if (!terminal)
+      return;
+    if (dockerStatus === "STOP") {
+      setTimeout(() => {
+        initTerminalText(terminal, "\u5E94\u7528\u672A\u542F\u52A8\r\n");
+      }, 400);
+    } else {
+      initTerminalText(terminal, "");
+    }
+  }, [dockerStatus]);
+  return /* @__PURE__ */ jsx("div", {
+    style: {
+      height: "100%",
+      width: "100%"
+    },
+    children: /* @__PURE__ */ jsx(XTerm, __spreadValues({
+      terminal
+    }, props))
+  });
+};
+var index$3 = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  "default": Console
+});
+const PROTOCOL = "https://";
+const NavBar = newStyled.div`
+  background-color: white;
+  height: 30px;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin: 0 10px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.disabled {
+      color: #f2fffe;
+      &:hover {
+        background-color: white;
+      }
+    }
+
+    &:hover {
+      background-color: #e0e0e0;
+    }
+  }
+
+  input {
+    flex: 1;
+    display: inline-block;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 8px;
+    border: 1px solid #adacac;
+    border-radius: 5px;
+  }
+`;
+const StopMask = newStyled.div`
+  width: 100%;
+  height: calc(100% - 30px);
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  color: #ffffff;
+  background-color: #5a5a5a;
+  opacity: 0.6;
+`;
+const OutputBrowser = (_e2) => {
+  var _f2 = _e2, {
+    url: url2
+  } = _f2, props = __objRest(_f2, [
+    "url"
+  ]);
+  const pStatus = oTStore((state) => state.playgroundStatus);
+  const dStatus = oTStore((state) => state.dockerStatus);
+  const [playgroundStatus, setPlaygroundStatus] = react.exports.useState("EMPTY");
+  const [dockerStatus, setDockerStatus] = react.exports.useState("STOP");
+  const urlWithProtocol = (url22) => {
+    if (!url22)
+      return `${PROTOCOL}showmebug.com`;
+    if (url22.indexOf("http://") !== 0 && url22.indexOf("https://") !== 0) {
+      url22 = `${PROTOCOL}${url22}`;
+    }
+    return url22;
+  };
+  react.exports.useEffect(() => {
+    setPlaygroundStatus(pStatus);
+  }, [pStatus]);
+  react.exports.useEffect(() => {
+    setDockerStatus(dStatus);
+    setTimeout(() => {
+      onRefresh();
+    }, 800);
+  }, [dStatus]);
+  const iframeRef = react.exports.useRef(null);
+  const [iframeSrc, setIframeSrc] = react.exports.useState(urlWithProtocol(url2));
+  react.exports.useEffect(() => {
+    setIframeSrc(urlWithProtocol(url2));
+  }, [url2]);
+  react.exports.useEffect(() => {
+  }, [iframeRef]);
+  const onEnterKey = (e2) => {
+    if (e2.keyCode !== 13)
+      return;
+    const url22 = urlWithProtocol(e2.target.value);
+    setIframeSrc(url22);
+    iframeRef.current.contentWindow.location.replace(url22);
+  };
+  const onRefresh = () => {
+    iframeRef.current.contentWindow.location.replace(iframeSrc);
+  };
+  const onOpenInNewTab = () => {
+    window.open(iframeSrc);
+  };
+  react.exports.useEffect(() => {
+    if (playgroundStatus === "EMPTY")
+      return;
+    if (playgroundStatus === "ACTIVE" && dockerStatus === "RUNNING") {
+      if (iframeSrc !== "http://" && iframeSrc !== "https://") {
+        iframeRef.current.contentWindow.location.replace(iframeSrc);
+      }
+    }
+  }, [playgroundStatus, dockerStatus]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__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
+      })]
+    }), 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({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  "default": OutputBrowser
+});
+const TerminalComponent = (_g2) => {
+  var _h2 = _g2, {
+    options
+  } = _h2, props = __objRest(_h2, [
+    "options"
+  ]);
   const defaultOptions2 = __spreadValues({}, options);
   const userLabel = document.createElement("div");
   userLabel.classList.add("xterm-helper-user-label");
   const [terminal, setTerminal] = react.exports.useState(null);
-  const io = useOT((state) => state.socket);
   const {
     CRDTInfo
   } = oTStore((state) => state);
@@ -182336,6 +182539,7 @@ const TerminalComponent = (_c2) => {
     terminal2.write(text2);
   };
   const onKey = (char2) => {
+    var _a2, _b2;
     if (oTStore.getState().appStatus === "replay") {
       return;
     }
@@ -182349,7 +182553,7 @@ const TerminalComponent = (_c2) => {
         }
       }
     };
-    io.emit("terminal", JSON.stringify(crdt));
+    (_b2 = (_a2 = useOT.getState()) == null ? void 0 : _a2.socket) == null ? void 0 : _b2.emit("terminal", JSON.stringify(crdt));
   };
   react.exports.useEffect(() => {
     if (!terminal) {
@@ -182358,22 +182562,23 @@ const TerminalComponent = (_c2) => {
     }
   }, []);
   react.exports.useEffect(() => {
-    var _a2;
+    var _a2, _b2, _c2, _d2;
     if (!terminal)
       return;
     if (CRDTInfo.terminal) {
-      initTerminalText(terminal, ((_a2 = oTStore.getState().CRDTInfo.terminal.doc) == null ? void 0 : _a2.value) || "");
+      initTerminalText(terminal, ((_d2 = (_c2 = (_b2 = (_a2 = oTStore.getState()) == null ? void 0 : _a2.CRDTInfo) == null ? void 0 : _b2.terminal) == null ? void 0 : _c2.doc) == null ? void 0 : _d2.value) || "");
     }
   }, [terminal]);
   react.exports.useEffect(() => {
+    var _a2, _b2, _c2;
     const crdt = CRDTInfo.terminal;
     if (terminal && crdt) {
-      if (crdt.doc.action === "Get") {
+      if (((_a2 = crdt == null ? void 0 : crdt.doc) == null ? void 0 : _a2.action) === "Get") {
         initTerminalText(terminal, crdt.doc.value);
         return;
       }
-      writeText(terminal, crdt.doc.value || "");
-      const postUser = userListStore.getState().userList[CRDTInfo.userInfo.uuid];
+      writeText(terminal, ((_b2 = crdt == null ? void 0 : crdt.doc) == null ? void 0 : _b2.value) || "");
+      const postUser = userListStore.getState().userList[(_c2 = CRDTInfo == null ? void 0 : CRDTInfo.userInfo) == null ? void 0 : _c2.uuid];
       if (postUser && !IsMe(CRDTInfo.userInfo)) {
         const helperContainer = terminal._core._helperContainer;
         userLabel.innerText = postUser.name;
@@ -182420,12 +182625,12 @@ var index$1 = /* @__PURE__ */ Object.freeze({
   [Symbol.toStringTag]: "Module",
   "default": TerminalComponent
 });
-const Tabs = (_e2) => {
-  var _f2 = _e2, {
+const Tabs = (_i) => {
+  var _j = _i, {
     activeKey,
     onSelect,
     tabItems
-  } = _f2, props = __objRest(_f2, [
+  } = _j, props = __objRest(_j, [
     "activeKey",
     "onSelect",
     "tabItems"
@@ -182743,10 +182948,10 @@ const AvatarLayout = newStyled.div`
   border-color: ${(props) => props.user.color};
   background-image: ${(props) => 'url("' + props.user.avatar + '")'};
 `;
-const Avatar = (_g2) => {
-  var _h2 = _g2, {
+const Avatar = (_k) => {
+  var _l = _k, {
     user
-  } = _h2, props = __objRest(_h2, [
+  } = _l, props = __objRest(_l, [
     "user"
   ]);
   return /* @__PURE__ */ jsx(AvatarLayout, __spreadValues({
@@ -182755,8 +182960,8 @@ const Avatar = (_g2) => {
   }, props));
 };
 const SkeletonThemeContext = React.createContext({});
-function SkeletonTheme(_i) {
-  var _j = _i, { children } = _j, styleOptions = __objRest(_j, ["children"]);
+function SkeletonTheme(_m) {
+  var _n = _m, { children } = _n, styleOptions = __objRest(_n, ["children"]);
   return React.createElement(SkeletonThemeContext.Provider, { value: styleOptions }, children);
 }
 const defaultEnableAnimation = true;
@@ -182782,8 +182987,8 @@ function styleOptionsToCssProperties({ baseColor, highlightColor, width, height,
     style["--highlight-color"] = highlightColor;
   return style;
 }
-function Skeleton$1(_k) {
-  var _l = _k, { count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp } = _l, propsStyleOptions = __objRest(_l, ["count", "wrapper", "className", "containerClassName", "containerTestId", "circle", "style"]);
+function Skeleton$1(_o) {
+  var _p = _o, { count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp } = _p, propsStyleOptions = __objRest(_p, ["count", "wrapper", "className", "containerClassName", "containerTestId", "circle", "style"]);
   var _a2, _b2;
   const contextStyleOptions = React.useContext(SkeletonThemeContext);
   const styleOptions = __spreadProps(__spreadValues(__spreadValues({}, contextStyleOptions), propsStyleOptions), {
@@ -182834,87 +183039,6 @@ function Box({
     children
   });
 }
-const Console = (_m) => {
-  var _n = _m, {
-    options
-  } = _n, props = __objRest(_n, [
-    "options"
-  ]);
-  const defaultOptions2 = __spreadValues({
-    convertEol: true,
-    fontSize: 12,
-    fontFamily: "Monaco, Menlo, monospace",
-    lineHeight: 1,
-    cursorBlink: true,
-    cursorWidth: 1,
-    cursorStyle: "block",
-    rightClickSelectsWord: true,
-    theme: {
-      background: "#1E1E1E"
-    }
-  }, options);
-  const [terminal, setTerminal] = react.exports.useState(null);
-  const {
-    CRDTInfo
-  } = oTStore((state) => state);
-  const {
-    dockerStatus
-  } = oTStore((state) => state);
-  const initTerminalText = (terminal2, text2) => {
-    terminal2.write("\r\n");
-    terminal2.clear();
-    writeText(terminal2, text2);
-  };
-  const writeText = (terminal2, text2) => {
-    terminal2.write(text2);
-  };
-  react.exports.useEffect(() => {
-    if (!terminal) {
-      const term = new xterm.exports.Terminal(defaultOptions2);
-      setTerminal(term);
-    }
-  }, []);
-  react.exports.useEffect(() => {
-    if (!terminal)
-      return;
-    if (dockerStatus === "STOP") {
-      initTerminalText(terminal, "\u5E94\u7528\u672A\u542F\u52A8\r\n");
-    } else {
-      initTerminalText(terminal, oTStore.getState().dockerInfo.consoleHistory);
-    }
-  }, [terminal]);
-  react.exports.useEffect(() => {
-    const crdt = CRDTInfo.console;
-    if (terminal && crdt) {
-      if (crdt.doc.value === "^C") {
-        writeText(terminal, crdt.doc.value);
-        initTerminalText(terminal, "");
-        return;
-      }
-      writeText(terminal, crdt.doc.value || "");
-    }
-  }, [CRDTInfo.console]);
-  react.exports.useEffect(() => {
-    if (!terminal)
-      return;
-    if (dockerStatus === "STOP") {
-      setTimeout(() => {
-        initTerminalText(terminal, "\u5E94\u7528\u672A\u542F\u52A8\r\n");
-      }, 400);
-    } else {
-      initTerminalText(terminal, "");
-    }
-  }, [dockerStatus]);
-  return /* @__PURE__ */ jsx("div", {
-    style: {
-      height: "100%",
-      width: "100%"
-    },
-    children: /* @__PURE__ */ jsx(XTerm, __spreadValues({
-      terminal
-    }, props))
-  });
-};
 const ToolBarWrapper = newStyled.div`
   position: relative;
   display: flex;
@@ -182987,8 +183111,8 @@ const ButtonContent = ({
     })()
   });
 };
-const ToolBar = (_o) => {
-  var props = __objRest(_o, []);
+const ToolBar = (_q) => {
+  var props = __objRest(_q, []);
   const io = useOT((state) => state.socket);
   const pStatus = oTStore((state) => state.playgroundStatus);
   const dStatus = oTStore((state) => state.dockerStatus);
@@ -183054,140 +183178,6 @@ const ToolBar = (_o) => {
     })]
   });
 };
-const PROTOCOL = "https://";
-const NavBar = newStyled.div`
-  background-color: white;
-  height: 30px;
-  display: flex;
-  align-items: center;
-
-  i {
-    margin: 0 10px;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.disabled {
-      color: #f2fffe;
-      &:hover {
-        background-color: white;
-      }
-    }
-
-    &:hover {
-      background-color: #e0e0e0;
-    }
-  }
-
-  input {
-    flex: 1;
-    display: inline-block;
-    height: 26px;
-    line-height: 26px;
-    padding: 0 8px;
-    border: 1px solid #adacac;
-    border-radius: 5px;
-  }
-`;
-const StopMask = newStyled.div`
-  width: 100%;
-  height: calc(100% - 30px);
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 18px;
-  color: #ffffff;
-  background-color: #5a5a5a;
-  opacity: 0.6;
-`;
-const OutputBrowser = (_p) => {
-  var _q = _p, {
-    url: url2
-  } = _q, props = __objRest(_q, [
-    "url"
-  ]);
-  const pStatus = oTStore((state) => state.playgroundStatus);
-  const dStatus = oTStore((state) => state.dockerStatus);
-  const [playgroundStatus, setPlaygroundStatus] = react.exports.useState("EMPTY");
-  const [dockerStatus, setDockerStatus] = react.exports.useState("STOP");
-  const urlWithProtocol = (url22) => {
-    if (!url22)
-      return `${PROTOCOL}showmebug.com`;
-    if (url22.indexOf("http://") !== 0 && url22.indexOf("https://") !== 0) {
-      url22 = `${PROTOCOL}${url22}`;
-    }
-    return url22;
-  };
-  react.exports.useEffect(() => {
-    setPlaygroundStatus(pStatus);
-  }, [pStatus]);
-  react.exports.useEffect(() => {
-    setDockerStatus(dStatus);
-    setTimeout(() => {
-      onRefresh();
-    }, 800);
-  }, [dStatus]);
-  const iframeRef = react.exports.useRef(null);
-  const [iframeSrc, setIframeSrc] = react.exports.useState(urlWithProtocol(url2));
-  react.exports.useEffect(() => {
-    setIframeSrc(urlWithProtocol(url2));
-  }, [url2]);
-  react.exports.useEffect(() => {
-  }, [iframeRef]);
-  const onEnterKey = (e2) => {
-    if (e2.keyCode !== 13)
-      return;
-    const url22 = urlWithProtocol(e2.target.value);
-    setIframeSrc(url22);
-    iframeRef.current.contentWindow.location.replace(url22);
-  };
-  const onRefresh = () => {
-    iframeRef.current.contentWindow.location.replace(iframeSrc);
-  };
-  const onOpenInNewTab = () => {
-    window.open(iframeSrc);
-  };
-  react.exports.useEffect(() => {
-    if (playgroundStatus === "EMPTY")
-      return;
-    if (playgroundStatus === "ACTIVE" && dockerStatus === "RUNNING") {
-      if (iframeSrc !== "http://" && iframeSrc !== "https://") {
-        iframeRef.current.contentWindow.location.replace(iframeSrc);
-      }
-    }
-  }, [playgroundStatus, dockerStatus]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__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
-      })]
-    }), 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 loglevel = { exports: {} };
 (function(module2) {
   (function(root2, definition) {