Refactor: init vue app flow

public/index.html

@@ -12,7 +12,7 @@
   <link rel="icon" href="favicon.ico" />
   <link rel="manifest" href="/manifest.json">
   <style>
-    #_app-loading {
+    #before-app-mount {
       background-color: rgb(228, 228, 228);
       position: fixed;
       left: 0px;
@@ -25,7 +25,7 @@
       align-items: center;
     }
 
-    #_app-loading-text {
+    #before-app-mount-text {
       text-align: center;
     }
 
@@ -51,9 +51,9 @@
     }
   </style>
   <script>
-    window.addEventListener("load", function () {
-      document.getElementById("_app-loading").setAttribute("style", "display: none;");
-    });
+    window.removeLoadingPage = function(){
+      document.getElementById("before-app-mount").setAttribute("style", "display: none;");
+    }
   </script>
   <title>MCSManager Panel</title>
 </head>
@@ -66,8 +66,8 @@
       <p>It is recommended to use <a href="https://www.google.cn/chrome/">Chrome</a> modern browser.</p>
     </div>
   </noscript>
-  <div id="_app-loading" data-component-type="loading">
-    <div id="_app-loading-text">
+  <div id="before-app-mount" data-component-type="loading">
+    <div id="before-app-mount-text">
       <div class="_nb-spinner"></div>
       <div style="margin: 12px;">Loading</div>
     </div>

src/app/App.vue

@@ -46,6 +46,7 @@ import Header from "../components/Header";
 // eslint-disable-next-line no-unused-vars
 import { requestPanelStatus, setupUserInfo } from "./service/protocol.js";
 import router from "./router";
+import store from "./store";
 
 export default {
   name: "App",
@@ -83,23 +84,12 @@ export default {
   async created() {
     let needToRoot = false;
 
-    try {
-      // Get current panel status information
-      const statusInfo = await requestPanelStatus();
-      if (statusInfo.language) {
-        console.log("SET_LANGUAGE:", statusInfo.language, statusInfo);
-        this.$i18n.locale = statusInfo.language;
-      } else {
-        this.$i18n.locale = "en_us";
-      }
-      // If not installed, must route to /install
-      if (statusInfo?.isInstall === false) {
-        this.loading = false;
-        setTimeout(() => router.push({ path: "/install" }), 1200);
-        return;
-      }
-    } catch (error) {
-      alert(`Err: ${error}, Please refresh!`);
+    // If not installed, must route to /install
+    const statusInfo = store.state.panelStatus;
+    if (statusInfo?.isInstall === false) {
+      this.loading = false;
+      setTimeout(() => router.push({ path: "/install" }), 1200);
+      return;
     }
 
     try {

src/app/index.js

@@ -3,6 +3,8 @@
 import { createApp } from "vue";
 import i18n from "./i18n";
 import elementPlus from "element-plus";
+import store from "./store";
+import router from "./router";
 
 import "element-plus/dist/index.css";
 import "element-plus/theme-chalk/display.css";
@@ -12,40 +14,53 @@ import "../assets/css/tools.css";
 import "../assets/css/responsive.css";
 import "../assets/css/action.css";
 import "../assets/css/dark-mode.scss";
+import { requestPanelStatus } from "./service/protocol.js";
 
 import App from "./App.vue";
-import "./service/protocol";
 import directive from "./directive";
 
-const app = createApp(App);
-
-// Vuex
-import store from "./store";
-app.use(store);
-app.use(i18n);
-
-// custom directive
-directive(app);
-
-// Vue-Router
-import router from "./router";
-app.use(router);
-
-// Install element-plus
-app.use(elementPlus);
-
-// global component
 import ItemGroup from "../components/ItemGroup";
 import FunctionGroup from "../components/FunctionGroup.vue";
 import FunctionGroupComponent from "../components/FunctionGroupComponent.vue";
 import Panel from "../components/Panel.vue";
 
-app.component("Panel", Panel);
-app.component("ItemGroup", ItemGroup);
-app.component("FunctionGroup", FunctionGroup);
-app.component("FunctionComponent", FunctionGroupComponent);
-app.mount("#app");
-
 if (localStorage.getItem("theme")) {
   document.body.setAttribute("class", localStorage.getItem("theme"));
 }
+
+async function main() {
+  try {
+    const statusInfo = await requestPanelStatus();
+    if (statusInfo.language) {
+      console.log("SET LANGUAGE:", statusInfo.language, statusInfo, i18n);
+      i18n.global.locale = statusInfo.language;
+    } else {
+      i18n.global.locale = "en_us";
+    }
+    await initVueApp();
+  } catch (error) {
+    alert(`Error: ${error.message}, Please refresh!`);
+    console.error(error);
+  }
+}
+
+async function initVueApp() {
+  const app = createApp(App);
+  app.use(i18n);
+  app.use(store);
+  app.use(router);
+  app.use(elementPlus);
+
+  directive(app);
+
+  app.component("Panel", Panel);
+  app.component("ItemGroup", ItemGroup);
+  app.component("FunctionGroup", FunctionGroup);
+  app.component("FunctionComponent", FunctionGroupComponent);
+
+  window.removeLoadingPage();
+
+  app.mount("#app");
+}
+
+main();

src/app/store/index.js

@@ -2,7 +2,7 @@
 
 import { createStore } from "vuex";
 
-// Vuex 
+// Vuex
 const stateModel = {
   token: "",
   userInfo: {
@@ -14,9 +14,7 @@ const stateModel = {
     instances: [],
     apiKey: ""
   },
-  panelStatus: {
-
-  },
+  panelStatus: {},
   gameProfile: null,
   onlineNotice: null
 };

src/language/en_us.json

@@ -51,8 +51,8 @@
     "049": "owner",
     "050": "user group",
     "051": "anyone",
-    "052": "file management",
-    "053": "command terminal",
+    "052": "Files",
+    "053": "Terminal",
     "054": "console"
   },
   "general": {
@@ -100,7 +100,7 @@
   },
   "login": {
     "title": "Login",
-    "titleInfo": "Use your MCSManager account to login.",
+    "titleInfo": "Please use your MCSManager account to login.",
     "account": "Username",
     "passWord": "Password",
     "forgotPassword": "Forgot password",
@@ -1035,10 +1035,10 @@
     "update": "Version Control",
     "install": "Install",
     "terminalError": "terminal connection error",
-    "globalFileManager": "Node file management",
-    "globalFileManagerEntry": "Node file management",
-    "globalTerminal": "node terminal",
-    "globalTerminalEntry": "node command terminal"
+    "globalFileManager": "Node File Management",
+    "globalFileManagerEntry": "Node File Management",
+    "globalTerminal": "Node Terminal",
+    "globalTerminalEntry": "Node Terminal"
   },
   "aside": {
     "basic": "Basic",