@tuya-sat/micro-dev-loader 0.0.1-beta.3 → 0.0.4

package/.swcrc

@@ -0,0 +1,11 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript"
+    },
+    "target": "es2015"
+  },
+  "module": {
+    "type": "commonjs"
+  }
+}

package/dist/index.js

@@ -1,23 +1,36 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutMockPlugin = void 0;
-const loader_utils_1 = require("loader-utils");
-const transform_1 = __importDefault(require("./transform"));
-const parseManifest_1 = __importDefault(require("./utils/parseManifest"));
-const manifestDom_1 = __importDefault(require("./manifestDom"));
-const layoutMock_1 = __importDefault(require("./plugins/layoutMock"));
-exports.LayoutMockPlugin = layoutMock_1.default;
-const addjsLoader = function (sourceCode) {
-    const { authedCode = [], microFramework } = (0, loader_utils_1.getOptions)(this);
-    const { privileges } = (0, parseManifest_1.default)();
-    const codeMaker = new transform_1.default({ sourceCode, microFramework });
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LayoutMockPlugin", {
+    enumerable: true,
+    get: function() {
+        return _layoutMock.default;
+    }
+});
+exports.default = void 0;
+var _loaderUtils = require("loader-utils");
+var _transform = _interopRequireDefault(require("./transform"));
+var _parseManifest = _interopRequireDefault(require("./utils/parseManifest"));
+var _manifestDom = _interopRequireDefault(require("./manifestDom"));
+var _layoutMock = _interopRequireDefault(require("./plugins/layoutMock"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var addjsLoader = function addjsLoader(sourceCode) {
+    var ref = (0, _loaderUtils).getOptions(this), _authedCode = ref.authedCode, authedCode = _authedCode === void 0 ? [] : _authedCode, microFramework = ref.microFramework;
+    var privileges = (0, _parseManifest).default().privileges;
+    var codeMaker = new _transform.default({
+        sourceCode: sourceCode,
+        microFramework: microFramework
+    });
     codeMaker.changeAst({
-        privileges,
-        authedCode,
+        privileges: privileges,
+        authedCode: authedCode
     });
-    return codeMaker.gtAst() + manifestDom_1.default;
+    return codeMaker.gtAst() + _manifestDom.default;
 };
-exports.default = addjsLoader;
+var _default = addjsLoader;
+exports.default = _default;

package/dist/manifestDom.js

@@ -1,11 +1,8 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const manifestDom = `
-(function ExternalRender() {
-    const div = document.createElement('div');
-    const { insertDom } = require("@tuya-sat/micro-dev-component");
-    insertDom(div)
-    document.body.appendChild(div);
-})();
-`;
-exports.default = manifestDom;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = void 0;
+var manifestDom = "\n(function ExternalRender() {\n    const div = document.createElement('div');\n    const { insertDom } = require(\"@tuya-sat/micro-dev-component\");\n    insertDom(div)\n    document.body.appendChild(div);\n})();\n";
+var _default = manifestDom;
+exports.default = _default;

package/dist/plugins/layoutMock/index.js

@@ -1,46 +1,173 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fs_extra_1 = __importDefault(require("fs-extra"));
-const path_1 = __importDefault(require("path"));
-const ejs_1 = __importDefault(require("ejs"));
-const cheerio_1 = __importDefault(require("cheerio"));
-const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
-const parseManifest_1 = __importDefault(require("../../utils/parseManifest"));
-const manifest = (0, parseManifest_1.default)();
-const lang = fs_extra_1.default.readJSONSync(path_1.default.resolve(process.cwd(), "_locales/zh-CN.json"));
-const layoutMockTpl = fs_extra_1.default.readFileSync(path_1.default.resolve(__dirname, "./layout-static/index.html"), {
-    encoding: "utf-8",
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-class LayoutMockPlugin {
-    static useLayoutStatic(app) {
-        app.get("/layout-static/*", function (req, res) {
-            res.sendFile(path_1.default.join(__dirname, req.path));
+exports.default = void 0;
+var _fsExtra = _interopRequireDefault(require("fs-extra"));
+var _path = _interopRequireDefault(require("path"));
+var _ejs = _interopRequireDefault(require("ejs"));
+var _cheerio = _interopRequireDefault(require("cheerio"));
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+var _parseManifest = _interopRequireDefault(require("../../utils/parseManifest"));
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
         });
+    } else {
+        obj[key] = value;
     }
-    apply(compiler) {
-        compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
-            html_webpack_plugin_1.default.getHooks(compilation).beforeEmit.tapAsync("LayoutMockPlugin", (data, cb) => {
-                const $ = cheerio_1.default.load(data.html);
-                const { name, defaultMenuIcon, entries } = manifest;
-                data.html = ejs_1.default.render(layoutMockTpl, {
-                    appName: (() => {
-                        const [_, key] = name.split(".");
-                        return lang[key] || name;
-                    })(),
-                    appIcon: defaultMenuIcon.url,
-                    menus: entries.map((item) => {
-                        const { name } = item;
-                        const [_, key] = name.split(".");
-                        return Object.assign(Object.assign({}, item), { langName: lang[key] || name });
-                    }),
-                    appHtml: [$("head").html(), $("body").html()].join(""),
-                });
-                cb(null, data);
-            });
+    return obj;
+}
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {
+        };
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
         });
     }
+    return target;
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
+var manifest = (0, _parseManifest).default();
+var lang = _fsExtra.default.readJSONSync(_path.default.resolve(process.cwd(), "_locales/zh-CN.json"));
+var layoutMockTpl = _fsExtra.default.readFileSync(_path.default.resolve(__dirname, "./layout-static/index.html"), {
+    encoding: "utf-8"
+});
+var LayoutMockPlugin = /*#__PURE__*/ function() {
+    "use strict";
+    function LayoutMockPlugin() {
+        _classCallCheck(this, LayoutMockPlugin);
+    }
+    _createClass(LayoutMockPlugin, [
+        {
+            key: "apply",
+            value: function apply(compiler) {
+                compiler.hooks.compilation.tap("MyPlugin", function(compilation) {
+                    _htmlWebpackPlugin.default.getHooks(compilation).beforeEmit.tapAsync("LayoutMockPlugin", function(data, cb) {
+                        var $ = _cheerio.default.load(data.html);
+                        var name1 = manifest.name, defaultMenuIcon = manifest.defaultMenuIcon, entries = manifest.entries;
+                        var nameProcesser = function(name) {
+                            var ref = _slicedToArray(name.split("."), 2), _ = ref[0], key = ref[1];
+                            return lang[key] || name;
+                        };
+                        data.html = _ejs.default.render(layoutMockTpl, {
+                            appName: nameProcesser(name1),
+                            appIcon: defaultMenuIcon.url,
+                            menus: function() {
+                                var processer = function(item) {
+                                    return _objectSpread({
+                                    }, item, {
+                                        langName: nameProcesser(item.name)
+                                    });
+                                };
+                                var entries$ = entries.length ? entries : [
+                                    {
+                                        name: name1,
+                                        path: "/"
+                                    }, 
+                                ];
+                                return entries$.map(processer);
+                            }(),
+                            appHtml: [
+                                $("head").html(),
+                                $("body").html()
+                            ].join("")
+                        });
+                        cb(null, data);
+                    });
+                });
+            }
+        }
+    ], [
+        {
+            key: "useLayoutStatic",
+            value: function useLayoutStatic(app) {
+                app.get("/layout-static/*", function(req, res) {
+                    res.sendFile(_path.default.join(__dirname, req.path));
+                });
+            }
+        }
+    ]);
+    return LayoutMockPlugin;
+}();
 exports.default = LayoutMockPlugin;

package/dist/plugins/layoutMock/layout-static/index.html

@@ -1,187 +1,181 @@
 <!DOCTYPE html>
-<html lang="en" style="margin: 0; padding: 0;">
-<head>
-  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-  <meta charset="utf-8">
-  <link rel="icon" href="favicon.ico">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="theme-color" content="#000000">
-  <meta name="description" content="Tuya General Management Portal">
-  <title>IoT SaaS App</title>
-  <link href="/layout-static/2.c7981cdc.chunk.css" rel="stylesheet">
-  <link href="/layout-static/main.efdba179.chunk.css" rel="stylesheet">
-</head>
-<body style="margin: 0; padding: 0;">
+<html lang="en" style="margin: 0; padding: 0">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="favicon.ico" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Tuya General Management Portal" />
+    <title><%= appName %></title>
+    <style>
+      .c-debugger-container {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+      .c-debugger-header {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 55px;
+        padding: 0 16px;
+        border-bottom: 1px solid #eee;
+        color: rgba(0, 0, 0, 0.85);
+      }
+      .c-debugger-logo {
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+      }
+      .c-debugger-title {
+        color: #000;
+        font-size: 14px;
+        font-weight: 700;
+        height: 32px;
+        line-height: 32px;
+        margin: 0 0 0 12px;
+      }
+      .c-debugger-main {
+        display: flex;
+        flex: 1 1 auto;
+      }
+      .c-debugger-side {
+        flex: 0 0 auto;
+        width: 208px;
+        height: 100%;
+        border-right: 1px solid #f0f2f5;
+      }
+      .c-debugger-content {
+        flex: 1 1 auto;
+        height: 100%;
+        background-color: #f0f2f5;
+      }
+      #root {
+        width: 100%;
+        height: 100%;
+      }
+      .c-debugger-lang-trigger {
+        position: relative;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: normal;
+        height: 100%;
+      }
+      .c-debugger-lang-trigger:hover .c-debugger-lang-list {
+        display: block;
+        line-height: 1.5;
+      }
+      .c-debugger-lang-trigger .c-debugger-lang-list {
+        position: absolute;
+        top: 42px;
+        right: -5px;
+        display: none;
+        background: #ffffff;
+        border-radius: 2px;
+        outline: none;
+        box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%),
+          0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+        z-index: 100;
+      }
+      .c-debugger-lang-trigger .c-debugger-lang-list span {
+        display: block;
+        padding: 5px 12px;
+      }
+      .c-debugger-lang-trigger .c-debugger-lang-list span:hover {
+        background-color: #f5f5f5;
+      }
+      .c-debugger-menu {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 40px;
+        padding: 0 0 0 17px;
+        margin: 4px 0 8px;
+        cursor: pointer;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.85);
+      }
+      .c-debugger-menu-name {
+        margin-left: 10px;
+      }
+      .c-debugger-menu:hover {
+        color: #1890ff;
+      }
+    </style>
+  </head>
+  <body style="margin: 0; padding: 0">
+    <div class="c-debugger-container">
+      <div class="c-debugger-header">
+        <div class="c-debugger-logo">
+          <img
+            src="https://promotion-static.tuyacn.com/static/242969466160533504.png"
+            alt=""
+            style="height: 28px"
+          />
+          <div class="c-debugger-title"><%= appName %></div>
+        </div>
 
-<div id="mock-root">
-  <div>
-    <div class="pro-layout-master ant-design-pro ant-pro-basicLayout screen-xl ant-pro-basicLayout-fix-siderbar ant-pro-basicLayout-mix">
-      <section class="ant-layout ant-layout-has-sider" style="min-height: 100%;">
-        <div id="J_sider-slot" style="width: 208px; overflow: hidden; flex: 0 0 208px; max-width: 208px; min-width: 208px; transition: background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;"></div>
-        <aside
-          id="J_sider"
-          class="ant-layout-sider ant-layout-sider-light ant-pro-sider ant-pro-sider-fixed ant-pro-sider-layout-mix ant-pro-sider-light"
-          style="overflow: hidden; padding-top: 48px; flex: 0 0 208px; max-width: 208px; min-width: 208px; width: 208px;"
-        >
-          <div class="ant-layout-sider-children">
-            <div style="flex: 1 1 0%; overflow: hidden auto;">
-              <% if (menus.length>0) { %>
-                <ul class="ant-menu ant-menu-light ant-pro-sider-menu ant-menu-root ant-menu-inline" role="menu" style="width: 100%;">
-                  <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
-                    <div class="ant-menu-submenu-title" role="button" aria-expanded="true" aria-haspopup="true" aria-owns="/apps/1440611125199634515$Menu" style="padding-left: 16px;">
-                      <span class="ant-pro-menu-item" title="工单管理">
-                        <span class="ant-menu-item-icon">
-                          <img src="<%= appIcon %>" alt="" style="width: 16px; height: 16px; margin-top: -2px; margin-right: 10px;">
-                        </span>
-                        <span class="ant-pro-menu-item-title"><%= appName %></span>
-                      </span>
-                      <i class="ant-menu-submenu-arrow"></i>
-                    </div>
-                    <ul id="/apps/1440611125199634515$Menu" class="ant-menu ant-menu-sub ant-menu-inline" role="menu" style="">
-                      <% menus.forEach(function(menu){%>
-                        <li class="ant-menu-item ant-menu-item-only-child" role="menuitem" style="padding-left: 32px;">
-                          <a onclick="toPage('<%=menu.path %>')" style="height: 40px;">
-                            <span class="ant-pro-menu-item">
-                              <span class="ant-pro-menu-item-title"><%=menu.langName %></span>
-                            </span>
-                          </a>
-                        </li>
-                      <% }) %>
-                    </ul>
-                  </li>
-                </ul>
-              <%} else { %>
-                <ul style="width: 100%;" class="ant-menu ant-menu-light ant-pro-sider-menu ant-menu-root ant-menu-inline" role="menu">
-                <li class="ant-menu-item ant-menu-item-only-child" role="menuitem" style="padding-left: 16px;">
-                  <a style="height: 40px;" href="/">
-                    <span class="ant-pro-menu-item">
-                      <span class="ant-menu-item-icon">
-                        <img src="<%= appIcon %>" alt='' style="width: 16px; height: 16px; margin-top: -2px; margin-right: 10px;">
-                      </span>
-                      <span class="ant-pro-menu-item-title"><%= appName %></span>
-                    </span>
-                  </a>
-                </li>
-              </ul>
-              <% } %>
-            </div>
-            <div class="ant-pro-sider-links">
-              <ul class="ant-menu ant-menu-light ant-pro-sider-link-menu ant-menu-root ant-menu-inline" role="menu">
-                <li
-                  id="J_sider-trigger"
-                  class="ant-menu-item ant-menu-item-only-child ant-pro-sider-collapsed-button"
-                  role="menuitem"
-                  style="padding-left: 16px;"
-                >
-                  <span role="img" aria-label="menu-fold" class="anticon anticon-menu-fold">
-                    <svg viewBox="64 64 896 896" focusable="false" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true">
-                      <path
-                        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path>
-                    </svg>
-                  </span>
-                </li>
-              </ul>
-            </div>
+        <div class="c-debugger-lang-trigger">
+          <span id="c-debugger-lang-name"></span>
+          <div class="c-debugger-lang-list">
+            <span onclick="changeLng('en-US')">English</span>
+            <span onclick="changeLng('zh-CN')">简体中文</span>
           </div>
-        </aside>
-
-        <div style="position: relative;" class="ant-layout">
-          <header class="ant-layout-header" style="height: 48px;"></header>
-          <header class="ant-layout-header ant-pro-fixed-header ant-pro-fixed-header-action" style="padding: 0px; height: 48px; line-height: 48px; width: 100%; z-index: 100; right: 0px;">
-            <div class="ant-pro-global-header">
-              <div class="ant-pro-global-header-logo" style="flex: 1;">
-                <a>
-                  <img src="https://images.tuyacn.com/rms-static/3bb090e0-d7e2-11eb-815d-e39234ce96ff-1624865222894.png" alt='' style="height: 28px;">
-                  <h1>IoT SaaS App Demo</h1>
-                </a>
-              </div>
-              <style>
-                .lang-trigger {
-                  position: relative;
-                  white-space: nowrap;
-                  cursor: pointer;
-                }
-                .lang-trigger:hover .lang-list {
-                  display: block;
-                  line-height: 1.5;
-                }
-                .lang-trigger .lang-list {
-                  position: absolute;
-                  top: 40px;
-                  right: 0;
-                  display: none;
-                  background: #ffffff;
-                  border-radius: 2px;
-                  outline: none;
-                  box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
-                }
-                .lang-trigger .lang-list span {
-                  display: block;
-                  padding: 5px 12px;
-                }
-                .lang-trigger .lang-list span:hover {
-                  background-color: #f5f5f5;
-                }
-              </style>
-              <span class="lang-trigger">
-                <span id="J_lng-name"></span>
-                <div class="lang-list">
-                  <span onclick="changeLng('en-US')">English</span>
-                  <span onclick="changeLng('zh-CN')">简体中文</span>
-                </div>
-              </span>
-              <script>
-                ;(() => {
-                  const lngMap = {
-                    'en-US': 'English',
-                    'zh-CN': '简体中文',
-                  };
-                  const lng = localStorage.getItem('i18nextLng') || 'zh-CN';
-                  document.querySelector('#J_lng-name').innerHTML = lngMap[lng];
-                })();
-
-                function changeLng(lng, name) {
-                  localStorage.setItem('i18nextLng', lng);
-                  location.reload();
-                }
-                function toPage(path){
-                  mhistory && mhistory.push(path);
-                }
-              </script>
-            </div>
-          </header>
-          <main
-            class="ant-layout-content ant-pro-basicLayout-content ant-pro-basicLayout-has-header"
-            style="margin: 0;"
-          >
-            <div id="container" style="height: calc(-56px + 100vh);"><div id="__qiankun_microapp_wrapper_for_demo" style="height: 100%">
-
-                <%- appHtml %>
-
-            </div></div>
-          </main>
         </div>
-      </section>
+      </div>
+      <div class="c-debugger-main">
+        <div class="c-debugger-side">
+          <% menus.forEach(function(menu){ %>
+          <div class="c-debugger-menu" onclick="toPage('<%= menu.path %>')">
+            <svg
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="2323"
+              width="14"
+              height="14"
+            >
+              <path
+                d="M192.037 287.953h640.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H192.037c-17.673 0-32 14.327-32 32s14.327 32 32 32zM192.028 543.17h638.608c17.673 0 32-14.327 32-32s-14.327-32-32-32H192.028c-17.673 0-32 14.327-32 32s14.327 32 32 32zM832.161 735.802H192.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h640.124c17.673 0 32-14.327 32-32s-14.327-32-32-32z"
+                fill=""
+                p-id="2324"
+              ></path>
+            </svg>
+            <div class="c-debugger-menu-name"><%= menu.langName %></div>
+          </div>
+          <% }); %>
+        </div>
+        <div class="c-debugger-content"><%- appHtml %></div>
+      </div>
     </div>
-  </div>
-</div>
-<script>
-  ;(function() {
-    const $$ = document.querySelector.bind(document);
-    const $sider = $$('#J_sider');
-    const $siderSlot = $$('#J_sider-slot');
-    const $siderTrigger = $$('#J_sider-trigger');
-    let unfold = true;
+    <script>
+      (() => {
+        const lngMap = {
+          "en-US": "English",
+          "zh-CN": "简体中文",
+        };
+        const localLng = localStorage.getItem("i18nextLng");
+        const lng = lngMap[localLng] ? localLng : "zh-CN";
+        console.log(lng);
+        document.querySelector("#c-debugger-lang-name").textContent =
+          lngMap[lng];
+      })();
+
+      function toPage(path) {
+        window.location.href = new URL(path, window.location.origin);
+      }
 
-    $siderTrigger.addEventListener('click', () => {
-      ['width', 'max-width', 'min-width'].forEach((name) => {
-        const width = `${unfold ? 208 : 48}px`;
-        $sider.style[name] = width;
-        $siderSlot.style[name] = width;
-      });
-      unfold = !unfold;
-    });
-  }());
-</script>
-</body>
+      function changeLng(lng, name) {
+        localStorage.setItem("i18nextLng", lng);
+        location.reload();
+      }
+    </script>
+  </body>
 </html>