From c5b754e6947bb903d21e172a0adffcdb043b795c Mon Sep 17 00:00:00 2001
From: unitwk <unitwk@outlook.com>
Date: Wed, 10 Aug 2022 17:34:20 +0800
Subject: [PATCH] Feat: optimization of text

---
 jsconfig.json                                 |   4 +-
 src/app/App.vue                               |  22 ++--
 src/app/directive/index.js                    |  14 +++
 src/app/index.js                              |  21 ++--
 src/app/service/common.js                     |   6 +-
 src/app/service/instance_type.js              |   8 +-
 src/app/service/process_config.js             |  29 +++--
 src/app/service/protocol.js                   |  48 ++++----
 src/app/service/socket.js                     |   1 -
 src/app/service/term.js                       |   2 +-
 src/app/service/terminal_color.js             |  34 ++---
 src/app/service/text.js                       |   7 +-
 src/app/store/index.js                        |   2 +-
 src/app/views/Analysis.vue                    |   2 +-
 src/app/views/Container.vue                   |   5 +-
 src/app/views/Extension.vue                   |   2 +-
 src/app/views/FileManager/index.vue           |  58 ++++-----
 ...lecctUnzipCode.vue => selectUnzipCode.vue} |   0
 src/app/views/FileManagerEditor.vue           |   8 +-
 src/app/views/Home.vue                        |  25 +---
 src/app/views/ImageManager.vue                |   9 --
 src/app/views/InstanceDetail.vue              |  15 +--
 src/app/views/Instances.vue                   |  53 ++++----
 src/app/views/Login.vue                       |  26 +---
 src/app/views/NewInstance/index.vue           |  48 +++-----
 src/app/views/News.vue                        |  92 +-------------
 src/app/views/Overview.vue                    |  35 ++----
 src/app/views/ProcessConfig.vue               |   5 +-
 src/app/views/Root.vue                        |   2 +-
 src/app/views/Schedule.vue                    |   8 +-
 src/app/views/Services.vue                    |  24 ++--
 src/app/views/Settings.vue                    |   4 +-
 src/app/views/Terminal/TermSetting.vue        |   1 -
 src/app/views/Terminal/index.vue              | 116 +++++++++---------
 src/app/views/Trigger.vue                     |   2 +-
 src/app/views/Update.vue                      |  24 ++--
 src/app/views/UserDetail.vue                  |  12 +-
 src/app/views/UserResources.vue               |   2 -
 src/app/views/Users.vue                       |  22 ++--
 src/app/views/quickstart/index.vue            |   1 -
 src/assets/css/action.css                     |   6 +-
 src/assets/css/common.css                     |  14 +--
 src/assets/css/element-variables.scss         |  11 +-
 src/assets/css/tools.css                      |   8 +-
 src/components/Aside.vue                      |   1 -
 src/components/CommandAssist.vue              |   1 -
 src/components/Dialog.vue                     |   2 +-
 src/components/DockerVariableSetup.vue        |  22 ++--
 src/components/Header.vue                     |  33 +----
 src/components/ItemGroup.vue                  |   2 +-
 src/components/LineButton.vue                 |   4 +-
 src/components/LineInfo.vue                   |   4 +-
 src/components/LineOption.vue                 |   2 +-
 src/components/UserInit.vue                   |  92 --------------
 src/language/en_us.js                         |   2 +
 src/language/zh_cn.js                         |   5 +
 56 files changed, 374 insertions(+), 634 deletions(-)
 mode change 100755 => 100644 src/app/views/Analysis.vue
 rename src/app/views/FileManager/{selecctUnzipCode.vue => selectUnzipCode.vue} (100%)
 delete mode 100755 src/components/UserInit.vue

diff --git a/jsconfig.json b/jsconfig.json
index 1dbb6308..1a1ca619 100755
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,7 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es6"
+    "target": "es6",
+    "jsx": "preserve",
   },
+  
   "exclude": [
     "node_modules",
     "dist"
diff --git a/src/app/App.vue b/src/app/App.vue
index 9682a6cb..70e7bd1d 100755
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -3,7 +3,7 @@ Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
 -->
 <template>
   <el-container>
-    <!-- 管理用户 手机屏幕菜单栏 -->
+    <!-- Manage users phone screen menu bar -->
     <el-drawer
       v-if="isTopPermission"
       size="240"
@@ -16,7 +16,7 @@ Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
         <Aside />
       </el-aside>
     </el-drawer>
-    <!-- 管理用户 电脑屏幕菜单栏 -->
+    <!-- Manage users Computer screen menu bar -->
     <div v-if="isTopPermission" id="app-menu" class="only-pc-display">
       <el-aside width="240px" style="height: 100%">
         <Aside />
@@ -29,7 +29,7 @@ Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
             <Header v-bind:breadcrumbsList="breadCrumbs" :aside="toAside" />
           </el-col>
         </el-row>
-        <div v-loading="loading" style="min-height:50px">
+        <div v-loading="loading" style="min-height: 50px">
           <router-view v-if="!loading"></router-view>
         </div>
       </el-main>
@@ -50,7 +50,7 @@ export default {
   components: { Aside, Header },
   data: function () {
     return {
-      loading:true,
+      loading: true,
       breadCrumbs: [],
       mode: 1,
       drawer: false
@@ -82,7 +82,7 @@ export default {
   },
   async beforeCreate() {
     try {
-      // 获取当前面板状态信息
+      // Get current panel status information
       const statusInfo = await getPanelStatus();
       if (statusInfo?.isInstall === false) {
         return router.push({ path: "/install" });
@@ -92,22 +92,22 @@ export default {
       } else {
         this.$i18n.locale = "en_us";
       }
-      // 第一次刷新后，尝试获取一次用户数据
-      // 如果失败，则导航至 / 视图进一步决定跳转路由
-    
+      // After the first refresh, try to get user data once
+      // If it fails, navigate to / view to further decide the jump route
+
       await setupUserInfo();
       const userInfo = this.$store.state.userInfo;
       if (!userInfo || !userInfo.uuid) throw new Error("userInfo.uuid is null");
     } catch (error) {
       router.push({ path: "/" });
-    }finally{
-      this.loading = false
+    } finally {
+      this.loading = false;
     }
   },
   async mounted() {
     router.beforeEach((to, from, next) => {
       console.log("Router:", from, "->", to);
-      // 设置在线信息全局状态
+      // Set the global status of online information
       this.$store.commit(
         "setOnlineNotice",
         window.onlineMCSManagerNotice ? window.onlineMCSManagerNotice() : null
diff --git a/src/app/directive/index.js b/src/app/directive/index.js
index e69de29b..28e4f22b 100755
--- a/src/app/directive/index.js
+++ b/src/app/directive/index.js
@@ -0,0 +1,14 @@
+// Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
+
+import i18n from "../i18n"
+
+export default function (app) {
+    app.directive("iszh", {
+        // eslint-disable-next-line no-unused-vars
+        mounted(el, binding, vnode) {
+            const language = i18n.global.locale
+            if (language != "zh_cn") el.style.display = 'none'
+        }
+    })
+
+}
\ No newline at end of file
diff --git a/src/app/index.js b/src/app/index.js
index 7f00e205..3e9eb4a7 100755
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -1,7 +1,5 @@
 // Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
 
-// 此文件为程序入口文件
-
 import { createApp } from "vue";
 import i18n from "./i18n"
 import elementPlus from "element-plus";
@@ -16,23 +14,21 @@ import "../assets/css/action.css";
 
 import App from "./App.vue";
 import "./service/protocol";
+import directive from "./directive"
 
 
 
 const app = createApp(App);
 
-// Vuex https://next.vuex.vuejs.org/zh/
+// Vuex 
 import store from "./store";
 app.use(store);
 app.use(i18n)
 
-app.directive("iszh", {
-    // eslint-disable-next-line no-unused-vars
-    mounted(el, binding, vnode) {
-        const language = i18n.global.locale
-        if (language != "zh_cn") el.style.display = 'none'
-    }
-})
+
+// custom directive
+directive(app)
+
 
 // Vue-Router
 import router from "./router";
@@ -41,9 +37,8 @@ app.use(router);
 // Install element-plus
 app.use(elementPlus);
 
-// 全局组件
+// global component
 import ItemGroup from "../components/ItemGroup";
 
 app.component("ItemGroup", ItemGroup);
-app.mount("#app");
-
+app.mount("#app");
\ No newline at end of file
diff --git a/src/app/service/common.js b/src/app/service/common.js
index 86e94b96..a2998894 100755
--- a/src/app/service/common.js
+++ b/src/app/service/common.js
@@ -126,8 +126,8 @@ export function getDescriptionByTitle(description, title = "") {
   return _exec(arr, description);
 }
 
-// 适用于配置文件解析成 JSON 格式后再解析成网页可循环的二维表格式
-// 其具体原理是实现一个简单双向绑定，来对应每一个具体的配置项目
+// It is suitable for parsing the configuration file into JSON format and then parsing it into a two-dimensional table format that can be cycled by web pages
+// The specific principle is to implement a simple two-way binding to correspond to each specific configuration item
 export function jsonToMap(json, topTitle = "", map = {}) {
   for (const key in json) {
     let title = null;
@@ -190,4 +190,4 @@ function leftZero4(str) {
     }
   }
   return str;
-}
+}
\ No newline at end of file
diff --git a/src/app/service/instance_type.js b/src/app/service/instance_type.js
index cb32a32f..e0f20726 100755
--- a/src/app/service/instance_type.js
+++ b/src/app/service/instance_type.js
@@ -1,7 +1,7 @@
 // Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
 
-export const TYPE_UNIVERSAL = "universal"; // 通用输入输出程序
-export const TYPE_WEB_SHELL = "universal/web_shell"; // WebShell 程序
+export const TYPE_UNIVERSAL = "universal";
+export const TYPE_WEB_SHELL = "universal/web_shell";
 export const TYPE_MINECRAFT_MCDR = "universal/mcdr";
 
 export const TYPE_MINECRAFT_JAVA = "minecraft/java";
@@ -19,7 +19,7 @@ export const TYPE_MINECRAFT_BDS = "minecraft/bedrock/bds";
 export const TYPE_MINECRAFT_NUKKIT = "minecraft/bedrock/nukkit";
 export const TYPE_STEAM_SERVER_UNIVERSAL = "steam/universal";
 
-// 前端可选择类型列表
+// Front-end selectable type list
 const INSTANCE_TYPE_TRANSLATION = {};
 INSTANCE_TYPE_TRANSLATION[TYPE_UNIVERSAL] = "General console program";
 INSTANCE_TYPE_TRANSLATION[TYPE_STEAM_SERVER_UNIVERSAL] = "Steam Game Server";
@@ -37,7 +37,7 @@ INSTANCE_TYPE_TRANSLATION[TYPE_MINECRAFT_GEYSER] = "MC Geyser";
 INSTANCE_TYPE_TRANSLATION[TYPE_MINECRAFT_MCDR] = "MC MCDR";
 INSTANCE_TYPE_TRANSLATION[TYPE_WEB_SHELL] = "Web Shell";
 
-// 不同类型的具体配置文件
+// Different types of specific configuration files
 const INSTANCE_TYPE_DEF_CONFIG = {
   [TYPE_MINECRAFT_BUNGEECORD]: {
     stopCommand: "end"
diff --git a/src/app/service/process_config.js b/src/app/service/process_config.js
index 553bbc91..cc6a4285 100755
--- a/src/app/service/process_config.js
+++ b/src/app/service/process_config.js
@@ -1,5 +1,8 @@
 // Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
 
+// This file is only for Chinese users, Added Chinese explanation to the configuration file
+// 此文件仅用于中国用户，其作用是为配置文件新增中文解释
+
 import {
   TYPE_MINECRAFT_JAVA,
   TYPE_MINECRAFT_BDS,
@@ -39,9 +42,9 @@ export const INSTANCE_CONFIGS = [
     // 配置文件中文解释
     info: `Minecraft 服务端极其重要的配置文件，几乎绝大部分常用配置（端口，人数，视距等）均在此文件中进行编辑`,
     // 配置文件适配模块作者名
-    author: "Suwings",
+    author: "Unitwk",
     // 配置文件 Github 地址（只能放置 Github 地址）
-    github: "https://github.com/Suwings",
+    github: "https://github.com/Unitwk",
     // 在哪些服务端类型下此配置文件可见
     category: [
       TYPE_MINECRAFT_SPIGOT,
@@ -76,8 +79,8 @@ export const INSTANCE_CONFIGS = [
     redirect: "bukkit/spigot.yml",
     type: "yml",
     info: "Spigot 配置文件，能够进一步的控制服务器的行为和具体参数，一些更为高级的限制都在此配置文件中",
-    author: "Suwings",
-    github: "https://github.com/Suwings",
+    author: "Unitwk",
+    github: "https://github.com/Unitwk",
     category: [
       TYPE_MINECRAFT_SPIGOT,
       TYPE_MINECRAFT_PAPER,
@@ -91,8 +94,8 @@ export const INSTANCE_CONFIGS = [
   //   redirect: "bukkit/permissions.yml",
   //   type: "yml",
   //   info: "基本权限配置文件，一般情况无需多过改动",
-  //   author: "Suwings",
-  //   github: "https://github.com/Suwings",
+  //   author: "Unitwk",
+  //   github: "https://github.com/Unitwk",
   //   category: [TYPE_MINECRAFT_SPIGOT, TYPE_MINECRAFT_PAPER, TYPE_MINECRAFT_JAVA, TYPE_MINECRAFT_BUKKIT]
   // },
   // {
@@ -101,8 +104,8 @@ export const INSTANCE_CONFIGS = [
   //   redirect: "bukkit/commands.yml",
   //   type: "yml",
   //   info: "Bukkit 原始命令文件，一般情况无需改动",
-  //   author: "Suwings",
-  //   github: "https://github.com/Suwings",
+  //   author: "Unitwk",
+  //   github: "https://github.com/Unitwk",
   //   category: [TYPE_MINECRAFT_SPIGOT, TYPE_MINECRAFT_PAPER, TYPE_MINECRAFT_JAVA, TYPE_MINECRAFT_BUKKIT]
   // },
   {
@@ -126,8 +129,8 @@ export const INSTANCE_CONFIGS = [
   //   info: "服务器白名单",
   //   path: "whitelist.json",
   //   redirect: "bukkit/whitelist.json",
-  //   author: "Suwings",
-  //   github: "https://github.com/Suwings",
+  //   author: "Unitwk",
+  //   github: "https://github.com/Unitwk",
   //   category: [TYPE_MINECRAFT_SPIGOT, TYPE_MINECRAFT_PAPER, TYPE_MINECRAFT_JAVA, TYPE_MINECRAFT_BUKKIT]
   // },
   // {
@@ -136,8 +139,8 @@ export const INSTANCE_CONFIGS = [
   //   info: "服务器管理员列表",
   //   path: "ops.json",
   //   redirect: "bukkit/ops.json",
-  //   author: "Suwings",
-  //   github: "https://github.com/Suwings",
+  //   author: "Unitwk",
+  //   github: "https://github.com/Unitwk",
   //   category: [TYPE_MINECRAFT_SPIGOT, TYPE_MINECRAFT_PAPER, TYPE_MINECRAFT_JAVA, TYPE_MINECRAFT_BUKKIT]
   // },
   {
@@ -166,7 +169,7 @@ export const INSTANCE_CONFIGS = [
     redirect: "mohist/mohist.yml",
     type: "yml",
     info: "mohist.yml 服务端配置文件",
-    author: "Suwings",
+    author: "Unitwk",
     github: "https://github.com/LazyCreeper",
     category: [TYPE_MINECRAFT_JAVA, TYPE_MINECRAFT_MOHIST]
   },
diff --git a/src/app/service/protocol.js b/src/app/service/protocol.js
index a0287a07..87acece8 100755
--- a/src/app/service/protocol.js
+++ b/src/app/service/protocol.js
@@ -5,19 +5,19 @@ import axios from "axios";
 import store from "../store";
 import { API_PANEL_STATUS, API_USER, API_USER_TOKEN } from "./common";
 
-// 每个请求必须携带 X-Requested-With: XMLHttpRequest 头
+// Each request must carry the X-Requested-With: XMLHttpRequest header
 axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
 // axios.defaults.withCredentials = true;
 
-// axios 请求 token 必须携带
+// axios request token must carry
 axios.interceptors.request.use(async function (config) {
   let token = store.state.token;
   if (!token && !config.params?.__mcsm_init__) {
-    console.log("Token 未获取，正在尝试初始化...");
+    console.log("Token not obtained, trying to initialize...");
     try {
       await setupUserInfo();
     } catch (err) {
-      console.log("初始化 Token 错误:", err);
+      console.log("Error initializing Token:", err);
     }
   }
   if (!config.params) config.params = {};
@@ -26,20 +26,20 @@ axios.interceptors.request.use(async function (config) {
   return config;
 });
 
-// 服务响应异常
+// service response exception
 class ServiceResponseException extends Error {
   constructor(p) {
     super(p);
   }
 }
 
-// 针对面板端响应格式封装的 axios 通用请求器
+// Axios general requester encapsulated for panel-side response format
 export async function request(p) {
   try {
     const result = await axios.request(p);
-    if (result.status != 200) throw new Error("错误的响应代码");
+    if (result.status != 200) throw new Error("Incorrect response code");
     if (result.data && result.data.data != null) return result.data.data;
-    throw new Error("面板响应数据格式异常");
+    throw new Error("The panel response data format is abnormal");
   } catch (error) {
     const response = error.response;
     if (response && response.data && response.data.data != undefined) {
@@ -50,21 +50,21 @@ export async function request(p) {
   }
 }
 
-// 获取令牌一次
+// get the token once
 export async function requestToken() {
-  // 请求令牌
+  // request token
   const token = await request({
     method: "GET",
     url: API_USER_TOKEN
   });
-  if (!token) throw new Error("身份令牌为空");
-  // 对全局管理中设置令牌
+  if (!token) throw new Error("Identity token is empty");
+  // Set the token in the global management
   store.commit("setToken", token);
-  console.log("身份令牌:", store.state.token);
+  console.log("Identity token:", store.state.token);
   return token;
 }
 
-// 获取用户自身的资料，获取后会顺便同步到全局状态管理中
+// Get the user's own data, which will be synchronized to the global state management by the way
 export async function requestUserInfo(advanced = null) {
   const info = await request({
     method: "GET",
@@ -73,7 +73,7 @@ export async function requestUserInfo(advanced = null) {
   });
   store.commit("setUserInfo", info);
   store.commit("setToken", info.token);
-  console.log("用户身份信息：", store.state.userInfo);
+  console.log("User identity information:", store.state.userInfo);
   return info;
 }
 
@@ -91,8 +91,8 @@ export async function getPanelStatus() {
 }
 
 export function parseforwardAddress(addr = "", require = "http") {
-  // 保存其协议头
-  // ws://127.0.0.1:25565
+  // save its protocol header
+  //ws://127.0.0.1:25565
   let protocol = `${window.location.protocol}//`;
   const addrProtocolString = addr.toLocaleLowerCase();
   if (require === "http") {
@@ -112,21 +112,21 @@ export function parseforwardAddress(addr = "", require = "http") {
     else protocol = "ws://";
   }
 
-  // 删除潜在的多余头
+  // remove potentially redundant headers
   addr = deleteWebsocketHeader(deleteHttpHeader(addr));
 
-  // 端口与ip分开
+  // port and ip are separated
   let daemonPort = null;
   let onlyAddr = null;
   if (addr.split(":").length === 2) {
     onlyAddr = addr.split(":")[0];
     daemonPort = parseInt(addr.split(":")[1]);
-    if (isNaN(daemonPort)) throw new Error(`地址 ${addr} 解析失败，端口不正确`);
+    if (isNaN(daemonPort)) throw new Error(`The address ${addr} failed to resolve, the port is incorrect`);
   } else {
     onlyAddr = addr;
   }
 
-  // 根据分开的端口和ip重新组合地址
+  // Reassemble the address based on the separated port and ip
   const checkAddr = onlyAddr.toLocaleLowerCase();
   if (checkAddr.indexOf("localhost") === 0 || checkAddr.indexOf("127.0.0.") === 0) {
     addr = `${protocol}${window.location.hostname}${daemonPort ? `:${daemonPort}` : ""}`;
@@ -138,7 +138,7 @@ export function parseforwardAddress(addr = "", require = "http") {
 
 window.parseforwardAddress = parseforwardAddress;
 
-// Daemon 端的 ws 地址转换成 http 地址
+// The ws address on the Daemon side is converted into an http address
 export function daemonWsAddressToHttp(wsAddr = "") {
   if (wsAddr.toLocaleLowerCase().indexOf("ws://") === 0) {
     return `http://${wsAddr.slice(5)}`;
@@ -166,7 +166,7 @@ export function deleteHttpHeader(addr) {
   return addr;
 }
 
-// Daemon 端的 ws 地址转为本地 ws 地址
+// The ws address on the Daemon side is converted to the local ws address
 export function daemonWsAddressToWs(wsAddr = "") {
   if (
     wsAddr.toLocaleLowerCase().indexOf("ws://") !== 0 &&
@@ -175,4 +175,4 @@ export function daemonWsAddressToWs(wsAddr = "") {
     return `ws://${wsAddr}`;
   }
   return wsAddr;
-}
+}
\ No newline at end of file
diff --git a/src/app/service/socket.js b/src/app/service/socket.js
index a4065c8c..7dde9203 100755
--- a/src/app/service/socket.js
+++ b/src/app/service/socket.js
@@ -54,7 +54,6 @@ export function connectRemoteService(
   // eslint-disable-next-line no-unused-vars
   socket.on("instance/stopped", (packet) => {
     // const data = packet.data;
-    console.log("i18n:", i18n)
     ElNotification({
       title: i18n.global.t("instances.exit"),
       dangerouslyUseHTMLString: true,
diff --git a/src/app/service/term.js b/src/app/service/term.js
index 32306018..93d05c37 100755
--- a/src/app/service/term.js
+++ b/src/app/service/term.js
@@ -83,7 +83,7 @@ export function textToTermText(data) {
   text = text.replace(/§n/gim, termColor.TERM_TEXT_UNDERLINE);
   text = text.replace(/§o/gim, termColor.TERM_TEXT_ITALIC);
   text = text.replace(/§r/gim, termColor.TERM_RESET);
-  // 行结尾符号替换
+  // line ending symbol substitution
   text = text.replace(/\r\n/gm, termColor.TERM_RESET + "\r\n");
   return text;
 }
diff --git a/src/app/service/terminal_color.js b/src/app/service/terminal_color.js
index efdc717c..7b2f691c 100755
--- a/src/app/service/terminal_color.js
+++ b/src/app/service/terminal_color.js
@@ -2,9 +2,9 @@
 
 import { termColor } from "./term";
 
-// 用于 Terminal 视图中终端组件的文字颜色渲染
+// Text color rendering for terminal components in Terminal view
 export function encodeConsoleColor(text) {
-  // 基本颜色
+  // base color
   // eslint-disable-next-line no-control-regex
   text = text.replace(/(\x1B[^m]*m)/gm, "$1;");
   text = text.replace(/ \[([A-Za-z0-9 _\-\\.]+)]/gim, " [§3$1§r]");
@@ -12,10 +12,10 @@ export function encodeConsoleColor(text) {
   text = text.replace(/([A-Za-z0-9 _\-\\.]+: )/gim, "§6$1§r");
   // eslint-disable-next-line no-control-regex
   text = text.replace(/(\x1B[^m]*m);/gm, "$1");
-  //   text = text.replace(/INFO/gm, term.TERM_TEXT_GREEN + "INFO" + term.TERM_NULL);
-  //   text = text.replace(/(\d{2,}:\d{2,}:\d{2,})/gm, term.TERM_TEXT_CYAN + "$1" + term.TERM_NULL);
+  // text = text.replace(/INFO/gm, term.TERM_TEXT_GREEN + "INFO" + term.TERM_NULL);
+  // text = text.replace(/(\d{2,}:\d{2,}:\d{2,})/gm, term.TERM_TEXT_CYAN + "$1" + term.TERM_NULL);
 
-  // Minecraft 原生颜色替代解析
+  // Minecraft native color substitution parsing
   text = text.replace(/§0/gim, termColor.TERM_TEXT_BLACK);
   text = text.replace(/§1/gim, termColor.TERM_TEXT_DARK_BLUE);
   text = text.replace(/§2/gim, termColor.TERM_TEXT_DARK_GREEN);
@@ -39,7 +39,7 @@ export function encodeConsoleColor(text) {
   text = text.replace(/§o/gim, termColor.TERM_TEXT_ITALIC);
   text = text.replace(/§r/gim, termColor.TERM_RESET);
 
-  // 基于&符号
+  // based on the ampersand
   text = text.replace(/&0/gim, termColor.TERM_TEXT_BLACK);
   text = text.replace(/&1/gim, termColor.TERM_TEXT_DARK_BLUE);
   text = text.replace(/&2/gim, termColor.TERM_TEXT_DARK_GREEN);
@@ -63,35 +63,35 @@ export function encodeConsoleColor(text) {
   text = text.replace(/&o/gim, termColor.TERM_TEXT_ITALIC);
   text = text.replace(/&r/gim, termColor.TERM_RESET);
 
-  // 特殊文本替换
+  // special text replacement
   const RegExpStringArr = [
-    //蓝色
+    //blue
     ["Loading libraries, please wait...", "\\d{1,3}%", "true", "false"],
-    //绿色
+    //green
     ["INFO", "EULA", "----", "\\(", "\\)", "\\{", "\\}", '\\"', "&lt;", "&gt;"],
-    //红色
+    //red
     ["Error", "Caused by"],
-    //黄色
+    //yellow
     ["WARN", "Server thread"]
   ];
   for (const k in RegExpStringArr) {
     for (const y in RegExpStringArr[k]) {
       const reg = new RegExp("(" + RegExpStringArr[k][y].replace(/ /gim, "&nbsp;") + ")", "igm");
       if (k === "0")
-        //蓝色
+        //blue
         text = text.replace(reg, termColor.TERM_TEXT_BLUE + "$1" + termColor.TERM_RESET);
       if (k === "1")
-        //绿色
+        //green
         text = text.replace(reg, termColor.TERM_TEXT_DARK_GREEN + "$1" + termColor.TERM_RESET);
       if (k === "2")
-        //红色
+        //red
         text = text.replace(reg, termColor.TERM_TEXT_RED + "$1" + termColor.TERM_RESET);
       if (k === "3")
-        //黄色
+        //yellow
         text = text.replace(reg, termColor.TERM_TEXT_GOLD + "$1" + termColor.TERM_RESET);
     }
   }
-  // 行结尾符号替换
+  // line ending symbol substitution
   text = text.replace(/\r\n/gm, termColor.TERM_RESET + "\r\n");
   return text;
-}
+}
\ No newline at end of file
diff --git a/src/app/service/text.js b/src/app/service/text.js
index 87e72768..faebc0f6 100755
--- a/src/app/service/text.js
+++ b/src/app/service/text.js
@@ -1,5 +1,6 @@
 // Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
+import i18n from "../i18n";
+const $t = i18n.global.t
 
-export const ERROR_TEXT = "操作错误，请稍后再试";
-
-export const OK_TEXT = "操作成功";
+export const ERROR_TEXT = $t("general.error");
+export const OK_TEXT = $t("general.success")
\ No newline at end of file
diff --git a/src/app/store/index.js b/src/app/store/index.js
index b63d1462..de77fcdb 100755
--- a/src/app/store/index.js
+++ b/src/app/store/index.js
@@ -2,7 +2,7 @@
 
 import { createStore } from "vuex";
 
-// Vuex 状态管理
+// Vuex 
 const stateModel = {
   token: "",
   userInfo: {
diff --git a/src/app/views/Analysis.vue b/src/app/views/Analysis.vue
old mode 100755
new mode 100644
index 35ecac2d..55421e35
--- a/src/app/views/Analysis.vue
+++ b/src/app/views/Analysis.vue
@@ -2,7 +2,7 @@
   Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
 -->
 
-<template>分析</template>
+<template>analyze (TODO)</template>
 
 <script>
 export default {
diff --git a/src/app/views/Container.vue b/src/app/views/Container.vue
index 1f9aa412..c2e7ff3a 100755
--- a/src/app/views/Container.vue
+++ b/src/app/views/Container.vue
@@ -11,7 +11,9 @@
         <el-table-column prop="port" :label="$t('overview.port')"></el-table-column>
         <el-table-column :label="$t('container.status')">
           <template #default="scope">
-            <span>{{ scope.row.available ? this.$t("overview.online") : this.$t("overview.offline") }}</span>
+            <span>{{
+              scope.row.available ? this.$t("overview.online") : this.$t("overview.offline")
+            }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="remarks" :label="$t('overview.remarks')"></el-table-column>
@@ -23,7 +25,6 @@
               :disabled="!scope.row.available"
               >{{ $t("container.imagesManage") }}</el-button
             >
-            <!-- <el-button size="mini" @click="deleteImage(scope.row)" :disabled="!scope.row.available">主机本地环境</el-button> -->
           </template>
         </el-table-column>
       </el-table>
diff --git a/src/app/views/Extension.vue b/src/app/views/Extension.vue
index 443d9a77..6c2188d6 100755
--- a/src/app/views/Extension.vue
+++ b/src/app/views/Extension.vue
@@ -1,7 +1,7 @@
 <!--
   Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
 -->
-<template>面板扩展</template>
+<template>extension (TODO)</template>
 
 <script>
 export default {
diff --git a/src/app/views/FileManager/index.vue b/src/app/views/FileManager/index.vue
index 061339fd..b79d32f2 100755
--- a/src/app/views/FileManager/index.vue
+++ b/src/app/views/FileManager/index.vue
@@ -160,12 +160,12 @@
       </template>
     </Panel>
 
-    <!-- 隐藏的文件上传按钮 -->
+    <!-- Hidden file upload button -->
     <form ref="fileForm" action="" method="post">
       <input type="file" ref="fileButtonHidden" @change="selectedFile" hidden="hidden" />
     </form>
 
-    <SelecctUnzipCode ref="selecctUnzipCode"></SelecctUnzipCode>
+    <SelectUnzipCode ref="selectUnzipCode"></SelectUnzipCode>
   </div>
 </template>
 
@@ -184,11 +184,11 @@ import {
 } from "@/app/service/common";
 import path from "path";
 import { parseforwardAddress, request } from "@/app/service/protocol";
-import SelecctUnzipCode from "./selecctUnzipCode";
+import SelectUnzipCode from "./selectUnzipCode";
 import { API_FILE_STATUS } from "../../service/common";
 
 export default {
-  components: { Panel, SelecctUnzipCode },
+  components: { Panel, SelectUnzipCode },
   data() {
     return {
       serviceUuid: this.$route.params.serviceUuid,
@@ -209,7 +209,7 @@ export default {
 
       paramPath: this.$route.query.path,
 
-      // 移动，复制，粘贴文件所需数据
+      // Move, copy, paste the required data of the file
       tmpFile: {
         tmpFileNames: null,
         tmpOperationMode: -1,
@@ -226,7 +226,7 @@ export default {
     }
     await this.render();
 
-    // 开始文件管理状态查询定时器
+    // Start the file management status query timer
     this.requestFileManagerStatus();
     this.statusRequestTask = setInterval(() => {
       this.requestFileManagerStatus();
@@ -246,7 +246,7 @@ export default {
     async render() {
       await this.list(this.currentDir);
     },
-    // 进入某目录
+    // enter a directory
     async toDir(name) {
       try {
         const p = path.normalize(path.join(this.currentDir, name));
@@ -255,18 +255,18 @@ export default {
         this.$message({ message: this.$t("fileManager.noSee"), type: "error" });
       }
     },
-    // 返回上层目录
+    // return to the upper directory
     async toUpDir() {
       const p = path.normalize(path.join(this.currentDir, "../"));
       await this.list(p);
     },
 
-    // 目录下一页或上一页事件
+    // Directory next page or previous page event
     currentChange() {
       this.toDir(".");
     },
 
-    // 目录 List 功能
+    // Directory List function
     async list(cwd = ".") {
       this.$route.query.path = cwd;
       try {
@@ -291,7 +291,7 @@ export default {
       }
     },
 
-    // 表格数据处理
+    // table data processing
     tableFilter(filesData) {
       this.files = [];
 
@@ -312,12 +312,12 @@ export default {
       }
     },
 
-    // 表格多选函数
+    // table multi-select function
     selectionChange(v) {
       this.multipleSelection = v;
     },
 
-    // 表格文件数据转名字列表
+    // table file data to name list
     multipleFileToNames(arr = []) {
       const res = [];
       arr.forEach((v) => res.push(v.name));
@@ -340,7 +340,7 @@ export default {
       return res;
     },
 
-    // 重命名文件
+    // rename the file
     async rename() {
       try {
         if (this.multipleSelection.length !== 1)
@@ -377,14 +377,14 @@ export default {
       }
     },
 
-    // 复制文件
+    // copy the file
     async copy() {
       this.tmpFile.tmpFileNames = this.multipleFileToNames(this.multipleSelection);
       this.tmpFile.tmpDir = this.currentDir;
       this.tmpFile.tmpOperationMode = 1;
       this.$message({ message: this.$t("fileManager.fileCopied"), type: "info" });
     },
-    // 移动文件
+    // move the file
     async move() {
       this.tmpFile.tmpFileNames = this.multipleFileToNames(this.multipleSelection);
       this.tmpFile.tmpDir = this.currentDir;
@@ -392,7 +392,7 @@ export default {
       this.$message({ message: this.$t("fileManager.fileMoved"), type: "info" });
     },
 
-    // 粘贴文件（根据模式发送不同的指令）
+    // Paste the file (send different commands according to the mode)
     async paste() {
       try {
         if (this.tmpFile.tmpOperationMode === -1) {
@@ -443,7 +443,7 @@ export default {
       }
     },
 
-    // 新建目录
+    // create a new directory
     async mkdir() {
       const { value } = await this.$prompt(this.$t("fileManager.newDirName"), undefined, {
         confirmButtonText: this.$t("general.confirm"),
@@ -470,7 +470,7 @@ export default {
       }
     },
 
-    // 编辑文件
+    // edit the file
     async toEditFilePage(row) {
       const target = path.normalize(path.join(this.currentDir, row.name));
       this.$router.push({
@@ -481,7 +481,7 @@ export default {
       });
     },
 
-    // 删除文件
+    // Delete Files
     async deleteFiles() {
       await this.$confirm(this.$t("fileManager.confirmDelFile"), this.$t("general.warn"), {
         confirmButtonText: this.$t("general.confirm"),
@@ -515,7 +515,7 @@ export default {
       }
     },
 
-    // 压缩/解压文件
+    // compress/decompress the file
     async compress(type) {
       const cwd = this.currentDir;
       try {
@@ -524,7 +524,7 @@ export default {
           return this.$message({ message: this.$t("fileManager.selectAFile"), type: "error" });
         const targets = this.fileNamesToPaths(fileNames);
         if (type === 1) {
-          //压缩
+          //compression
           const text = await this.$prompt(
             this.$t("fileManager.newZipName"),
             this.$t("fileManager.fileName"),
@@ -549,7 +549,7 @@ export default {
               type: 1,
               source: path.join(cwd, `${zipName}.zip`),
               targets,
-              code: "utf-8" // 解压文件功能模块暂时不支持其他编码
+              code: "utf-8" // The decompression file function module does not support other encodings temporarily
             }
           });
           this.$notify({
@@ -559,7 +559,7 @@ export default {
         } else {
           if (fileNames.length !== 1)
             return this.$message({ message: this.$t("fileManager.onlyUnzipOne"), type: "error" });
-          //解压
+          // decompress
           const text = await this.$prompt(
             this.$t("fileManager.inputUnzipDirName"),
             this.$t("fileManager.fileName"),
@@ -569,7 +569,7 @@ export default {
             }
           );
           if (!text.value) throw new Error(this.$t("fileManager.inputValidValues"));
-          const selected = await this.$refs.selecctUnzipCode.prompt();
+          const selected = await this.$refs.selectUnzipCode.prompt();
           if (!selected) return;
           const dirName = text.value;
           await request({
@@ -596,7 +596,7 @@ export default {
       }
     },
 
-    // 文件已选择，开始上传
+    // file is selected, start uploading
     async selectedFile() {
       try {
         const file = this.$refs.fileButtonHidden.files[0];
@@ -606,7 +606,7 @@ export default {
         formData.append("time", new Date().toUTCString());
         const fullAddress = `${this.uploadConfig.addr}/upload/${this.uploadConfig.password}`;
         console.log("Upload File", fullAddress);
-        // 上传文件
+        // upload files
         await axios.post(fullAddress, formData, {
           headers: {
             "Content-Type": "multipart/form-data"
@@ -624,7 +624,7 @@ export default {
       }
     },
 
-    // 上传文件
+    // upload files
     async upload() {
       const result = await axios.get(API_FILE_UPLOAD, {
         params: {
@@ -639,7 +639,7 @@ export default {
       this.$refs.fileButtonHidden.click();
     },
 
-    //下载
+    //download
     async download(row) {
       const fileName = row.name;
       const filePath = path.normalize(path.join(this.currentDir, fileName));
diff --git a/src/app/views/FileManager/selecctUnzipCode.vue b/src/app/views/FileManager/selectUnzipCode.vue
similarity index 100%
rename from src/app/views/FileManager/selecctUnzipCode.vue
rename to src/app/views/FileManager/selectUnzipCode.vue
diff --git a/src/app/views/FileManagerEditor.vue b/src/app/views/FileManagerEditor.vue
index 181d983f..4858e7aa 100755
--- a/src/app/views/FileManagerEditor.vue
+++ b/src/app/views/FileManagerEditor.vue
@@ -18,9 +18,6 @@
             <el-button size="small" @click="back" v-if="!backType">
               <i class="el-icon-pie-chart"></i> {{ $t("fileManagerEditor.backToFileManager") }}
             </el-button>
-            <!-- <el-button size="small" @click="backTerminal" plain v-if="backType == 1">
-              回到控制台
-            </el-button> -->
           </ItemGroup>
         </div>
         <div>
@@ -30,7 +27,6 @@
         </div>
       </div>
       <div v-show="!error" style="overflow: auto">
-        <!-- <textarea :value="value" id="mcode-editor" style="display:none"></textarea> -->
         <div id="editor" style="height: 70vh" class="editor-code-font"></div>
       </div>
       <div v-show="error" style="padding: 16px 0px">
@@ -59,7 +55,6 @@ export default {
       target: this.$route.query.target,
       backType: this.$route.query.backType,
       error: null,
-      // 文件编辑功能
       edit: {
         text: "",
         fileName: this.$route.query.target
@@ -111,7 +106,7 @@ export default {
     backViaHistory() {
       this.$router.go(-1);
     },
-    // 编辑文件
+
     async render() {
       try {
         const text = await request({
@@ -134,7 +129,6 @@ export default {
       }
     },
 
-    // 保存文件
     async saveFile() {
       this.edit.text = this.editor.getValue();
       await request({
diff --git a/src/app/views/Home.vue b/src/app/views/Home.vue
index 333a9aa5..a4ec81cb 100755
--- a/src/app/views/Home.vue
+++ b/src/app/views/Home.vue
@@ -4,7 +4,7 @@
 
 <template>
   <el-row :gutter="20">
-    <!-- 左侧用户数据栏 -->
+    <!-- User data column on the left -->
     <el-col :md="16" :offset="0">
       <el-row :gutter="20">
         <el-col :xs="12" :md="6" :offset="0">
@@ -50,7 +50,7 @@
       </el-row>
     </el-col>
 
-    <!-- 右侧用户信息栏 -->
+    <!-- User information bar on the right -->
     <el-col :md="8" :offset="0">
       <Panel style="height: 260px">
         <template #title>{{ $t("home.personalInfo") }}</template>
@@ -99,24 +99,6 @@
         ></el-table-column>
         <el-table-column :label="$t('instances.status.runStatus')">
           <template #default="scope">
-            <!-- <div class="color-gray" v-if="scope.row.status == 0">
-              <i class="el-icon-video-pause"></i>
-              <span>{{ $t("home.outOfRunning") }}</span>
-            </div>
-            <div class="color-green" v-else-if="scope.row.status == 3">
-              <i class="el-icon-video-play"></i>
-              <span> {{ $t("home.running") }}</span>
-            </div>
-            <span class="color-yellow" v-else-if="scope.row.status == 1">{{
-              $t("home.stopping")
-            }}</span>
-            <span class="color-yellow" v-else-if="scope.row.status == 2">{{
-              $t("home.starting")
-            }}</span>
-            <span class="color-red" v-else-if="scope.row.status == -1">{{
-              $t("home.maintaining")
-            }}</span>
-            <span class="color-red" v-else>{{ $t("home.unknownStatus") }}</span> -->
             {{ statusToText(scope.row.status) }}
           </template>
         </el-table-column>
@@ -159,7 +141,6 @@
     </template>
   </Panel>
 
-  <!-- 版权信息 -->
   <div
     class="flex flex-space-center flex-align-items-center"
     style="font-size: 12px; color: #cdcdcd; text-align: center; margin-top: 40px"
@@ -177,7 +158,7 @@
     </div>
   </div>
 
-  <!-- 实例详情编辑框 -->
+  <!-- Instance details dialog -->
   <Dialog v-model="editInstance.is">
     <template #title>{{ $t("instance.Dialog.instanceParameterEdit") }}</template>
     <template #default>
diff --git a/src/app/views/ImageManager.vue b/src/app/views/ImageManager.vue
index 87e6facd..88e1618a 100755
--- a/src/app/views/ImageManager.vue
+++ b/src/app/views/ImageManager.vue
@@ -81,15 +81,6 @@
           </template>
         </el-table-column>
         <el-table-column prop="Image" :label="$t('imageManager.useImage')"></el-table-column>
-        <!-- <el-table-column prop="Ports" label="端口开放">
-          <template #default="scope">
-            <div v-if="scope.row.Ports">
-              <span v-for="(item,index) in scope.row.Ports" :key="index">
-                {{item.PublicPort}}:{{item.PrivatePort}}&nbsp;
-              </span>
-            </div>
-          </template>
-        </el-table-column> -->
         <el-table-column prop="State" :label="$t('imageManager.status')"></el-table-column>
         <el-table-column prop="Status" :label="$t('imageManager.situation')"></el-table-column>
         <el-table-column :label="$t('general.operate')" style="text-align: center" width="90px">
diff --git a/src/app/views/InstanceDetail.vue b/src/app/views/InstanceDetail.vue
index ac895d02..64bd7b04 100755
--- a/src/app/views/InstanceDetail.vue
+++ b/src/app/views/InstanceDetail.vue
@@ -540,7 +540,7 @@ export default {
 
       dockerImages: [],
 
-      // Docker 端口配置表字段
+      // Docker port configuration table fields
       tableDict1: [
         {
           prop: "protocol",
@@ -558,6 +558,7 @@ export default {
           width: "120px"
         }
       ],
+      // Docker path mapping
       tableDict2: [
         {
           prop: "path1",
@@ -570,8 +571,7 @@ export default {
           width: "200px"
         }
       ],
-
-      // 可选的字符编码
+      // optional character encoding
       characters: TERMINAL_CODE
     };
   },
@@ -758,7 +758,6 @@ export default {
       params: { remote_uuid: this.serviceUuid, uuid: this.instanceUuid }
     });
     this.instanceInfo = result;
-    // 特殊处理字段
     if (this.instanceInfo.config.docker && this.instanceInfo.config.docker.ports) {
       this.instanceInfo.config.docker.ports = this.instanceInfo.config.docker.ports.join(" ");
     }
@@ -770,13 +769,15 @@ export default {
       this.instanceInfo.config.docker.extraVolumes =
         this.instanceInfo.config.docker.extraVolumes.join(" ");
     }
+    let DEF_CODE = "UTF-8";
+    if (this.$i18n.locale == "zh_cn") DEF_CODE = "GBK";
     this.instanceInfo.config = {
       ...this.instanceInfo.config,
-      ie: this.instanceInfo.config.ie ? this.instanceInfo.config.ie.toUpperCase() : "GBK",
-      oe: this.instanceInfo.config.oe ? this.instanceInfo.config.oe.toUpperCase() : "GBK",
+      ie: this.instanceInfo.config.ie ? this.instanceInfo.config.ie.toUpperCase() : DEF_CODE,
+      oe: this.instanceInfo.config.oe ? this.instanceInfo.config.oe.toUpperCase() : DEF_CODE,
       fileCode: this.instanceInfo.config.fileCode
         ? this.instanceInfo.config.fileCode.toUpperCase()
-        : "GBK"
+        : DEF_CODE
     };
     this.loading = false;
   }
diff --git a/src/app/views/Instances.vue b/src/app/views/Instances.vue
index d89b9e9e..470f2ffb 100755
--- a/src/app/views/Instances.vue
+++ b/src/app/views/Instances.vue
@@ -96,7 +96,7 @@
           </div>
         </div>
 
-        <!-- 未选择守护进程时显示 -->
+        <!-- Display when no daemon is selected -->
         <div v-show="!currentRemoteUuid">
           <div class="notAnyInstanceTip">
             <i class="el-icon-guide" style="font-size: 190px"></i>
@@ -109,7 +109,7 @@
           </div>
         </div>
 
-        <!-- 第一页且无任何数据时显示 -->
+        <!-- Display when the first page has no data -->
         <div v-show="notAnyInstance && page === 1">
           <div class="notAnyInstanceTip">
             <i class="el-icon-truck" style="font-size: 190px"></i>
@@ -125,7 +125,7 @@
     </template>
   </Panel>
 
-  <!-- 卡片显示风格 -->
+  <!-- Card display style -->
   <el-row :gutter="20" class="row-mb" v-show="!showTableList">
     <el-col :md="6" :offset="0" v-for="(item, index) in instances" :key="index">
       <Panel
@@ -175,7 +175,7 @@
             @click="toInstance(item.serviceUuid, item.instanceUuid)"
           >
             <div>
-              {{ $t("instances.status.title") }}：
+              {{ $t("instances.status.title") }}:
               <span class="color-gray" v-if="item.status == 0">{{
                 $t("instances.status.die")
               }}</span>
@@ -194,15 +194,15 @@
               <span class="color-red" v-else>{{ $t("instances.status.busy") }}</span>
             </div>
             <div>
-              <span>{{ $t("instances.lastDatetime") }}：</span>
+              <span>{{ $t("instances.lastDatetime") }}:</span>
               <span>{{ item.config.lastDatetime }}</span>
             </div>
             <div>
-              <span>{{ $t("instances.endTime") }}：</span>
+              <span>{{ $t("instances.endTime") }}:</span>
               <span>{{ item.config.endTime }}</span>
             </div>
             <div>
-              <span>{{ $t("instances.otherInfo") }}：</span>
+              <span>{{ $t("instances.otherInfo") }}:</span>
               <span>
                 <span v-if="item.info && item.info.currentPlayers >= 0">
                   {{ $t("instances.playerCount") }} {{ item.info.currentPlayers }}/{{
@@ -222,13 +222,13 @@
     </el-col>
   </el-row>
 
-  <!-- 表格显示风格 -->
+  <!-- Table display style -->
   <el-row :gutter="20" class="row-mb" v-show="showTableList">
     <el-col :span="24" :offset="0">
       <Panel>
         <template #title>{{ $t("instances.table.instancesList") }}</template>
         <template #default>
-          <!-- 表格显示 -->
+          <!-- table display -->
           <el-table
             :data="instances"
             stripe
@@ -370,13 +370,14 @@ export default {
       remoteList: [],
       currentRemoteUuid: null,
       instances: [],
-      multipleSelection: [], // 表格多选属性
+      multipleSelection: [], // table multiple selection properties
       startedInstance: 0,
       loading: true,
-      availableService: [], // 可用和不可用守护进程列表
+      // list of available and unavailable daemons
+      availableService: [],
       unavailableService: [],
 
-      notAnyInstance: false, // 无任何实例
+      notAnyInstance: false,
 
       page: 1,
       maxPage: 1,
@@ -385,18 +386,18 @@ export default {
         instanceName: ""
       },
 
-      // 批量处理模式
+      // batch mode
       showTableList: false
     };
   },
   async mounted() {
-    // 初始化数据读取
+    // Initialize data read
     this.showTableList = Number(localStorage.getItem("InstanceView")) === 2 ? true : false;
     await this.render();
   },
   beforeUnmount() {},
   methods: {
-    // 获取分布式服务列表（不包括具体实例列表）
+    // Get the list of distributed services (excluding the list of specific instances)
     async displayRemoteServiceList() {
       const data = await request({
         method: "GET",
@@ -422,7 +423,7 @@ export default {
         }
       }
 
-      // 如果存在上次的选择记录，那么直接跳转到上次记录
+      // if existsselect the next record, then jump directly to the previous record
       const lastSelected = localStorage.getItem("pageSelectedRemoteUuid");
       if (lastSelected) {
         this.remoteList.forEach((v) => {
@@ -434,7 +435,7 @@ export default {
       } else {
         this.remoteList.forEach((v) => {
           if (v.available) {
-            // 默认取第一个开启的实例
+            // By default, the first open instance is taken
             this.currentRemoteUuid = v.value;
             return;
           }
@@ -442,7 +443,7 @@ export default {
         this.remoteSelectHandle();
       }
     },
-    // 获取守护进程具体实例列表
+    // Get a list of specific instances of the daemon process
     async remoteSelectHandle() {
       try {
         if (!this.currentRemoteUuid) throw new Error(this.$t("instances.selectRemoteError"));
@@ -459,16 +460,16 @@ export default {
             instance_name: this.query.instanceName
           }
         });
-        // 页码调整
+        // page number adjustment
         this.page = result.page;
         this.maxPage = result.maxPage;
         const instances = result.data;
         instances.forEach((instance) => {
           const status = instance.status;
           const type = typeTextToReadableText(instance.config.type);
-          // 计算正在运行的实例
+          // Calculate the running instance
           if (instance.status != 0) this.startedInstance++;
-          // 压入所有实例
+          // push all instances
           this.instances.push({
             instanceUuid: instance.instanceUuid,
             serviceUuid: this.currentRemoteUuid,
@@ -483,10 +484,10 @@ export default {
         });
         console.log(this.instances);
         this.loading = false;
-        // 记录当前选择的守护进程，方便下次直接加载
+        // Record the currently selected daemon process, so that it can be loaded directly next time
         localStorage.setItem("pageSelectedRemoteUuid", this.currentRemoteUuid);
 
-        // 无任何实例时，显示快速创建界面
+        // When there is no instance, display the quick creation interface
         if (this.instances.length === 0) {
           this.notAnyInstance = true;
         } else {
@@ -500,7 +501,7 @@ export default {
         });
       }
     },
-    // 分页改变
+    // pagination change
     handleCurrentChange() {
       this.refresh();
     },
@@ -510,7 +511,7 @@ export default {
     async render() {
       await this.displayRemoteServiceList();
     },
-    // 表格多选函数
+    // table multi-select function
     selectionChange(v) {
       if (v.length == 0) this.canInterval = true;
       else this.canInterval = false;
@@ -549,7 +550,7 @@ export default {
         message: this.$t("notify.Success")
       });
     },
-    // 批量删除
+    // batch deletion
     async batDelete(type) {
       if (type === 1) {
         await this.$confirm(
diff --git a/src/app/views/Login.vue b/src/app/views/Login.vue
index 7bee93db..08403af3 100755
--- a/src/app/views/Login.vue
+++ b/src/app/views/Login.vue
@@ -145,11 +145,10 @@ export default {
     };
   },
   methods: {
-    // 回车登录
     submit() {
       this.login();
     },
-    // 登录过程入口
+
     async login() {
       try {
         if (!this.form.username || !this.form.username) {
@@ -176,7 +175,7 @@ export default {
         this.loading = false;
       }
     },
-    // 登录失败
+
     async failed(error) {
       this.cause = error.message;
       if (this.cause == "null") {
@@ -187,7 +186,7 @@ export default {
       await sleep(400);
       this.close = false;
     },
-    // 登录成功
+
     async success() {
       this.close = true;
       this.closeWindow = true;
@@ -202,9 +201,9 @@ export default {
           duration: 0
         });
       }
-      // 等待动画效果完毕
+      // wait for the animation to finish
       await sleep(1500);
-      // 无缝切换，不采用刷新方法登录系统
+      // Seamless switch, do not use the refresh method to log in to the system
       this.$router.push({ path: `/` });
     },
     async requestLoginInfo() {
@@ -224,25 +223,13 @@ export default {
   async mounted() {
     console.log("Welcome use MCSManager.");
     console.log("Copyright 2022 Suwings All rights reserved.");
-    // 请求登录界面文案
+    // Request login copyleft text
     this.requestLoginInfo();
-
-    // try {
-    //   await setupUserInfo();
-    //   if (this.$store.state?.userInfo?.uuid) {
-    //     console.log("用户已登录，正在跳转");
-    //     window.location.href = "/";
-    //   }
-    // } catch (err) {
-    //   // 忽略
-    // }
   }
 };
 </script>
 
 <style scoped>
-/* 动画与基本元素CSS */
-
 .login-panel-wrapper-out {
   opacity: 0;
   z-index: 1;
@@ -398,7 +385,6 @@ export default {
   margin-right: 18px;
 }
 
-/* 针对手机的登录界面 */
 @media (max-width: 900px) {
   #login-panel {
     text-align: center;
diff --git a/src/app/views/NewInstance/index.vue b/src/app/views/NewInstance/index.vue
index 71f6b7aa..a55a23c7 100755
--- a/src/app/views/NewInstance/index.vue
+++ b/src/app/views/NewInstance/index.vue
@@ -87,7 +87,7 @@
           </div>
         </div>
 
-        <!-- 上传单个服务端软件创建新实例 -->
+        <!-- Upload a single server software to create a new instance -->
         <div v-show="page == 2 && typeB == 1" class="panel-context row-mt">
           <div class="">
             <div class="sub-title">
@@ -150,11 +150,11 @@
             <el-button @click="up" size="small" :disabled="assist.creating">{{
               $t("newInstances.back")
             }}</el-button>
-            <!-- <el-button @click="down" size="small">下一步</el-button> -->
+            <!-- <el-button @click="down" size="small">Next</el-button> -->
           </div>
         </div>
 
-        <!-- 上传服务端压缩包创建新实例 -->
+        <!-- Upload a server-side compressed package to create a new instance -->
         <div v-show="page == 2 && typeB == 2" class="panel-context row-mt">
           <div class="row-mt">
             <div class="sub-title">
@@ -215,11 +215,11 @@
             <el-button @click="up" size="small" :disabled="assist.creating">{{
               $t("newInstances.back")
             }}</el-button>
-            <!-- <el-button @click="createInstance" size="small">创建实例</el-button> -->
+            <!-- <el-button @click="createInstance" size="small">Create instance</el-button> -->
           </div>
         </div>
 
-        <!-- 从已存在的文件选择服务端 -->
+        <!-- Select server from existing file -->
         <div v-show="page == 2 && typeB == 3" class="panel-context row-mt">
           <div>
             <div class="sub-title">
@@ -283,7 +283,7 @@
       </template>
     </Panel>
 
-    <!-- 命令助手 -->
+    <!-- Command Assistant -->
     <CommandAssist
       v-model="commandAssistPanel"
       :result="commandAssistCallback"
@@ -291,17 +291,17 @@
     >
     </CommandAssist>
 
-    <!-- 隐藏的文件上传按钮 -->
+    <!-- Hidden file upload button -->
     <input type="file" ref="fileButtonHidden" @change="selectedFile" hidden="hidden" />
 
-    <selecct-unzip-code ref="selecctUnzipCode"></selecct-unzip-code>
+    <SelectUnzipCode ref="selectUnzipCode"></SelectUnzipCode>
   </div>
 </template>
 
 <script>
 import path from "path";
 import axios from "axios";
-import SelecctUnzipCode from "@/app/views/FileManager/selecctUnzipCode";
+import SelectUnzipCode from "@/app/views/FileManager/selectUnzipCode";
 import Panel from "@/components/Panel";
 import CommandAssist from "@/components/CommandAssist";
 import SelectBlock from "@/components/SelectBlock";
@@ -314,7 +314,7 @@ import {
 import { parseforwardAddress, request } from "@/app/service/protocol";
 
 export default {
-  components: { Panel, SelectBlock, CommandAssist, SelecctUnzipCode },
+  components: { Panel, SelectBlock, CommandAssist, SelectUnzipCode },
   data: function () {
     return {
       title: this.$t("newInstances.newInstanceGuide"),
@@ -355,12 +355,12 @@ export default {
     };
   },
   methods: {
-    // 创建实例并上传文件
+    // create instance and upload file
     async uploadFile(type) {
       if (!this.form.nickname || (!this.assist.commandtemplate && !this.form.startCommand)) {
         return this.$message({ message: this.$t("newInstances.pleaseFinish"), type: "error" });
       }
-      this.zipCode = await this.$refs.selecctUnzipCode.prompt();
+      this.zipCode = await this.$refs.selectUnzipCode.prompt();
       await this.$confirm(
         this.$t("newInstances.uploadAndCreate"),
         this.$t("notify.confirmDelTitle"),
@@ -373,17 +373,17 @@ export default {
       this.assist.uploadFileType = type;
       this.$refs.fileButtonHidden.click();
     },
-    // 文件已选择，开始上传
+    // file is selected, start uploading
     async selectedFile() {
       try {
         this.assist.creating = true;
         const file = this.$refs.fileButtonHidden.files[0];
-        // 命令模板替换
+        // command template substitution
         if (this.assist.uploadFileType === 1) {
           this.form.startCommand = this.assist.commandtemplate.replace("${ProgramName}", file.name);
         }
         if (!this.form.cwd) this.form.cwd = ".";
-        // 上传文件式创建实例 & 请求守护进程直连上传
+        // Create an instance by uploading a file & request the daemon to upload directly
         const cfg = await request({
           method: "POST",
           url: API_INSTANCE_UPLOAD,
@@ -396,17 +396,17 @@ export default {
         this.uploadConfig.addr = parseforwardAddress(cfg.addr, "http");
         this.uploadConfig.password = cfg.password;
         this.newInstanceUuid = cfg.instanceUuid;
-        // 上传文件参数准备
+        // prepare upload file parameters
         const formData = new FormData();
         formData.append("file", file);
         const fullAddress = `${this.uploadConfig.addr}/upload/${this.uploadConfig.password}`;
         console.log("NewInstance - FileUpload:", fullAddress, "\n", file);
-        // 上传文件
+        // upload files
         const fileName = file.name;
         const extName = path.extname(fileName);
         await axios.post(fullAddress, formData, {
           params: {
-            // 根据后缀自动解压文件
+            // Automatically decompress the file according to the suffix
             unzip: extName === ".zip" ? 1 : null,
             code: this.zipCode
           },
@@ -422,7 +422,7 @@ export default {
         this.$message({ message: `Error: ${error.message}`, type: "error" });
       }
     },
-    // 非上传文件式的创建实例
+    // Create instance without uploading file
     async createInstance() {
       await this.$confirm(
         this.$t("newInstances.instantWillBeCreate"),
@@ -512,13 +512,3 @@ export default {
   }
 };
 </script>
-
-<style scoped>
-.container {
-  /* display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 90vh;
-  height: calc(100% - 80px) !important; */
-}
-</style>
diff --git a/src/app/views/News.vue b/src/app/views/News.vue
index a3ac379f..98bd4596 100755
--- a/src/app/views/News.vue
+++ b/src/app/views/News.vue
@@ -3,101 +3,15 @@
 -->
 
 <template>
-  <el-row :gutter="20">
-    <el-col :md="16" :offset="0">
-      <Panel>
-        <template #title>在线通知</template>
-        <template #default>
-          <div v-if="notice" style="height: 280px; overflow: auto">
-            <div class="sub-title row-mb" v-for="(item, index) in notice" :key="index">
-              <div class="sub-title-title">{{ item.title }}</div>
-              <div class="sub-title-info">{{ item.info }}</div>
-            </div>
-          </div>
-          <div v-else>
-            <el-alert
-              title="无法获取到最新信息"
-              type="warning"
-              description="可能是官方服务器维护或您本地网络问题，请稍等一段时间后再试或检查互联网连接"
-              show-icon
-              :closable="false"
-            >
-            </el-alert>
-          </div>
-        </template>
-      </Panel>
-    </el-col>
-    <el-col :md="8" :offset="0">
-      <Panel>
-        <template #title>版本更新</template>
-        <template #default>
-          <div style="height: 280px; overflow: auto">
-            <div class="sub-title">
-              <div class="sub-title-title">最新版本</div>
-              <div class="sub-title-info">
-                控制面板版本代指主控端（此网页）后端的官方最新版本，守护进程端版本代指被控端（实际进程处，远程主机）的官方最新版本。如果您要查看您自己的版本，请前往数据监控界面查看。
-              </div>
-            </div>
-            <LineLabel>
-              <template #title>最新控制面板端</template>
-              <template #default> {{ latestVersion }}</template>
-            </LineLabel>
-            <LineLabel>
-              <template #title>最新守护进程端</template>
-              <template #default> {{ latestVersion2 }}</template>
-            </LineLabel>
-          </div>
-        </template>
-      </Panel>
-    </el-col>
-  </el-row>
-
-  <Panel v-if="activities">
-    <template #title>产品动态</template>
-    <template #default>
-      <div>
-        <el-timeline style="margin-left: -36px">
-          <el-timeline-item
-            v-for="(activity, index) in activities"
-            :key="index"
-            :icon="activity.icon"
-            :type="activity.type"
-            :color="activity.color"
-            :size="activity.size"
-            :timestamp="activity.time"
-          >
-            <div class="sub-title">
-              <p class="sub-title-title">{{ activity.title }}</p>
-              <p class="sub-title-info">{{ activity.info }}</p>
-            </div>
-          </el-timeline-item>
-        </el-timeline>
-      </div>
-    </template>
-  </Panel>
+  <span>News (WILL DELETE)</span>
 </template>
 
 <script>
-import Panel from "../../components/Panel";
-import LineLabel from "../../components/LineLabel";
-
 export default {
-  components: { Panel, LineLabel },
   data: function () {
-    return {
-      activities: null,
-      notice: null,
-      latestVersion: "",
-      latestVersion2: ""
-    };
+    return {};
   },
   methods: {},
-  mounted() {
-    const onlineNotice = this.$store.state.onlineNotice ? this.$store.state.onlineNotice : {};
-    this.activities = onlineNotice["news"];
-    this.notice = onlineNotice["notice"];
-    this.latestVersion = onlineNotice["version"];
-    this.latestVersion2 = onlineNotice["version2"];
-  }
+  mounted() {}
 };
 </script>
diff --git a/src/app/views/Overview.vue b/src/app/views/Overview.vue
index 9f20df49..cae0e4fa 100755
--- a/src/app/views/Overview.vue
+++ b/src/app/views/Overview.vue
@@ -6,7 +6,6 @@
   <el-row :gutter="20">
     <el-col :span="24">
       <Panel v-loading="loading">
-        <!-- 多语言HTML处示例代码，基础玩法 -->
         <template #title>{{ $t("overview.systemInfoTable") }}</template>
         <template #default>
           <el-row :gutter="20">
@@ -28,7 +27,6 @@
       <div>
         <el-row :gutter="20">
           <el-col :md="6" :xs="12" :offset="0">
-            <!-- 多语言HTML处示例代码，绑定属性内部的话，需要在属性名前加冒号。里面的双引号变单引号 -->
             <ValueCard
               :title="$t('overview.daemonStatus')"
               :sub-title="$t('overview.daemonAvailable')"
@@ -247,7 +245,6 @@ export default {
         Logined: 0
       },
 
-      // 初始化用户密码窗口
       initUserVisible: false
     };
   },
@@ -269,12 +266,12 @@ export default {
       });
     },
     render(data) {
-      // 版本相关数据渲染
+      // Version related data rendering
       this.specifiedDaemonVersion = data.specifiedDaemonVersion;
       this.panelVersion = data.version;
 
       const system = data.system;
-      // 表格数据渲染
+      // table data rendering
       if (data.chart) this.systemChartData = data.chart;
       const remoteCount = data.remoteCount;
       const remote = data.remote;
@@ -290,12 +287,12 @@ export default {
 
       this.forChartTotalInstance = totalInstance;
 
-      // 计算内存
+      // compute memory
       const free = Number(system.freemem / 1024 / 1024 / 1024).toFixed(1);
       const total = Number(system.totalmem / 1024 / 1024 / 1024).toFixed(1);
       const used = Number(total - free).toFixed(1);
 
-      // 数值卡片列表赋值
+      // Value card list assignment
       this.valueCard.totalInstance = totalInstance;
       this.valueCard.runningInstance = runningInstance;
       this.valueCard.freemem = free;
@@ -308,11 +305,9 @@ export default {
       this.valueCard.Logined = data.record.logined;
       this.valueCard.cpu = Number(system.cpu * 100).toFixed(0);
       this.valueCard.mem = Number((used / total) * 100).toFixed(0);
-      // 计算已正常运行时间
-      // const uptime = Number(system.uptime / 60 / 60).toFixed(0);
+
       this.computerInfoA = [
         {
-          // 在Javascript代码中的用法，记得加this，单双引号灵活使用
           name: this.$t("overview.systemType"),
           value: `${system.type} ${system.platform}`
         },
@@ -342,7 +337,7 @@ export default {
           warn: used / total > 0.9
         },
         // {
-        //   name: "系统 CPU 使用率",
+        //   name: "CPU",
         //   value: `${Number(system.cpu * 100).toFixed(1)}%`,
         //   warn: system.cpu * 100 > 90
         // }
@@ -355,15 +350,6 @@ export default {
           name: this.$t("overview.panelVersion"),
           value: data.version
         },
-        // {
-        //   name: "分布式在线",
-        //   value: `${remoteCount.available}/${remoteCount.total}`,
-        //   warn: remoteCount.available !== remoteCount.total
-        // },
-        // {
-        //   name: "实例运行数",
-        //   value: `${runningInstance}/${totalInstance}`
-        // },
 
         {
           name: this.$t("overview.specifiedDaemonVersion"),
@@ -373,17 +359,14 @@ export default {
           name: this.$t("overview.illegalAccess"),
           value: data.record.illegalAccess
         },
-        // {
-        //   name: "登录失败与总次数",
-        //   value: `${data.record.loginFailed}/${data.record.logined}`
-        // },
+
         {
           name: this.$t("overview.banips"),
           value: data.record.banips,
           warn: data.record.banips > 0
         }
       ];
-      // 装载守护进程信息
+      // Load daemon information
       this.servicesStatus = [];
       for (const iterator of remote) {
         if (iterator.system) {
@@ -418,10 +401,8 @@ export default {
       }
     },
     initChart() {
-      // 基于准备好的dom，初始化echarts实例
       this.systemChart = echarts.init(document.getElementById("echart-wrapper-main"));
       this.systemChart.setOption(getDefaultOption());
-      // this.systemChart.resize({});
       this.systemChart2 = echarts.init(document.getElementById("echart-wrapper-main2"));
       this.systemChart2.setOption(getDefaultOption());
       this.systemChart3 = echarts.init(document.getElementById("echart-wrapper-main3"));
diff --git a/src/app/views/ProcessConfig.vue b/src/app/views/ProcessConfig.vue
index e028876f..5bf67e11 100755
--- a/src/app/views/ProcessConfig.vue
+++ b/src/app/views/ProcessConfig.vue
@@ -76,7 +76,6 @@ import BlockButton from "../../components/BlockButton";
 import { getInstanceConfigByType } from "../service/process_config";
 import { request } from "../service/protocol";
 import { API_PROCESS_CONFIG_LIST } from "../service/common";
-
 export default {
   components: { Panel, BlockButton },
   data: function () {
@@ -126,12 +125,12 @@ export default {
       });
       this.configs = [];
       this.isNotConfig = true;
-      // 通过实际文件名和特定类型的配置列表进行比较
+      // Compare by actual filename and type-specific configuration list
       realFiles.forEach((v) => {
         configFiles.forEach((z) => {
           if (z.path === v.file) {
             this.isNotConfig = false;
-            // 检查是否已存在同名配置文件，存在则显示冲突
+            // Check if a configuration file with the same name already exists, if it exists, display a conflict
             configFiles.forEach((p) => {
               if (p.path == z.path && p.check) z.conflict = true;
             });
diff --git a/src/app/views/Root.vue b/src/app/views/Root.vue
index 085b7a99..f47da400 100755
--- a/src/app/views/Root.vue
+++ b/src/app/views/Root.vue
@@ -22,7 +22,7 @@ export default {
   methods: {},
   async mounted() {
     try {
-      // 为了适配无缝登录，这里必须还需要再请求一次数据
+      // In order to adapt to seamless login, data must be requested again here
       await setupUserInfo();
       const userInfo = this.$store.state.userInfo;
       if (!userInfo || !userInfo.uuid) throw new Error(`userInfo status error: ${userInfo}`);
diff --git a/src/app/views/Schedule.vue b/src/app/views/Schedule.vue
index 54d691b9..928684f9 100755
--- a/src/app/views/Schedule.vue
+++ b/src/app/views/Schedule.vue
@@ -100,7 +100,7 @@
           </el-select>
         </el-col>
       </el-row>
-      <!-- 指定时间型选择器 -->
+      <!-- Specify time selector -->
       <div v-if="newTask.type == 3" class="row-mt">
         <el-date-picker
           v-model="newTask.time"
@@ -110,7 +110,7 @@
         ></el-date-picker>
       </div>
 
-      <!-- 指定时间型日期选择器 -->
+      <!-- Specify time type date picker -->
       <el-row :gutter="20" class="row-mt" v-if="newTask.type == 2">
         <el-col :md="24" :offset="0">
           <div class="sub-title">{{ $t("schedule.triggerTime") }}</div>
@@ -144,7 +144,7 @@
         </el-col>
       </el-row>
 
-      <!-- 时间间隔周期型选择器 -->
+      <!-- Time interval period selector -->
       <div v-if="newTask.type == 1" class="row-mt">
         <div class="row-mb">
           <div class="sub-title-info">{{ $t("schedule.intervalsTaskInfo") }}</div>
@@ -373,7 +373,7 @@ export default {
       this.newTask.time = `${s} ${m} ${h} * * ${w.join(",")}`;
       await this.createRequest();
     },
-    //间隔时间性任务
+    // interval task
     async createTaskType1() {
       const arr = this.newTask.cycle;
       let ps = Number(arr[0]);
diff --git a/src/app/views/Services.vue b/src/app/views/Services.vue
index cfc08427..f8a6cab5 100755
--- a/src/app/views/Services.vue
+++ b/src/app/views/Services.vue
@@ -280,12 +280,12 @@ export default {
     };
   },
   methods: {
-    // 刷新按钮
+    // refresh button
     async refresh() {
       await this.render();
       this.$message({ type: "info", message: this.$t("general.refreshFinish"), duration: 400 });
     },
-    // 渲染数据方法
+    // render data method
     async render() {
       const result = await request({
         method: "GET",
@@ -293,7 +293,7 @@ export default {
       });
       result.remote.forEach((element) => {
         if (element.system) {
-          // 计算内存
+          // compute memory
           const free = Number(element.system.freemem / 1024 / 1024 / 1024).toFixed(1);
           const total = Number(element.system.totalmem / 1024 / 1024 / 1024).toFixed(1);
           const used = Number(total - free).toFixed(1);
@@ -301,11 +301,11 @@ export default {
         }
       });
       this.services = result.remote;
-      // 版本相关数据渲染
+      // Version related data rendering
       this.specifiedDaemonVersion = result.specifiedDaemonVersion;
       this.panelVersion = result.version;
     },
-    // 新增服务
+    // add service
     async toNewService(enforce = false) {
       const addr = this.newServiceInfo.ip;
       if (addr.indexOf("192.168") === 0 || addr.indexOf("10.") === 0) {
@@ -330,11 +330,11 @@ export default {
         this.$message({ type: "error", message: ERROR_TEXT });
       }
     },
-    // 打开新增服务面板
+    // Open the new service panel
     openNewServiceDialog() {
       this.isNewService = true;
     },
-    // 连接服务
+    // connect to the service
     async linkService(row, isNeedSave) {
       try {
         if (isNeedSave) await this.updateService(row);
@@ -349,7 +349,7 @@ export default {
         this.$message({ type: "error", message: error.message });
       }
     },
-    // 更新服务
+    // update service
     async updateService(row) {
       await axios.put(
         API_SERVICE_CURD,
@@ -359,7 +359,7 @@ export default {
         }
       );
     },
-    // 删除服务
+    // delete service
     async deleteService(uuid) {
       await this.$confirm(this.$t("services.delDaemonWarn"), this.$t("general.warn"), {
         confirmButtonText: this.$t("general.delete"),
@@ -374,7 +374,7 @@ export default {
         this.$message({ type: "error", message: ERROR_TEXT });
       }
     },
-    // 修改备注信息
+    // modify the remark information
     async updateRemarks(row) {
       const text = await this.$prompt(
         this.$t("services.inputNewRemark"),
@@ -392,7 +392,7 @@ export default {
         this.$message({ type: "error", message: error });
       }
     },
-    // 修改密钥信息
+    // modify key information
     async updateKey(row) {
       let text = await this.$prompt(this.$t("services.inputNewKey"), this.$t("services.key"), {
         confirmButtonText: this.$t("general.confirm"),
@@ -410,7 +410,7 @@ export default {
             params: { uuid: row.uuid }
           }
         );
-        // this.$message({ type: "success", message: "更新密钥成功" });
+        // this.$message({ type: "success", message: "Update key successfully" });
         await this.linkService(row, false);
       } catch (error) {
         this.$message({ type: "error", message: error });
diff --git a/src/app/views/Settings.vue b/src/app/views/Settings.vue
index a090b547..7c3612c4 100755
--- a/src/app/views/Settings.vue
+++ b/src/app/views/Settings.vue
@@ -42,7 +42,7 @@
               <el-select v-model="settings.language" :placeholder="$t('general.pleaseSelect')">
                 <el-option label="English" value="en_us"></el-option>
                 <el-option label="简体中文" value="zh_cn"></el-option>
-                <!-- <el-option label="日本語" value="jp" disabled></el-option> -->
+                <!-- <el-option label="Japanese" value="jp" disabled></el-option> -->
               </el-select>
             </div>
 
@@ -173,7 +173,7 @@
               {{ $t("settings.sponsorListInfo") }}
               <a href="https://mcsmanager.com/" target="_blank" rel="noopener noreferrer">
                 MCSManager.com </a
-              >。
+              >.
             </p>
             <p class="sub-title-info"></p>
           </div>
diff --git a/src/app/views/Terminal/TermSetting.vue b/src/app/views/Terminal/TermSetting.vue
index b360ee71..7cb30416 100755
--- a/src/app/views/Terminal/TermSetting.vue
+++ b/src/app/views/Terminal/TermSetting.vue
@@ -202,7 +202,6 @@ export default {
     close() {
       this.$emit("update:visible", false);
     },
-    // 普通用户更新配置
     async submit() {
       try {
         await request({
diff --git a/src/app/views/Terminal/index.vue b/src/app/views/Terminal/index.vue
index 6c9315ad..aa56cd91 100755
--- a/src/app/views/Terminal/index.vue
+++ b/src/app/views/Terminal/index.vue
@@ -157,7 +157,6 @@
           <template #title>{{ $t("terminal.functionGroup") }}</template>
           <template #default>
             <el-row :gutter="10">
-             
               <el-col :lg="12" :offset="0" class="row-mb">
                 <el-button
                   :disabled="!available"
@@ -209,7 +208,7 @@
                   >{{ $t("instancesDetail.fileManager") }}
                 </el-button>
               </el-col>
-               <el-col :lg="24" :offset="0" class="row-mb" v-iszh>
+              <el-col :lg="24" :offset="0" class="row-mb" v-iszh>
                 <el-button
                   :disabled="!instanceInfo.config.type"
                   icon="el-icon-s-operation"
@@ -309,11 +308,11 @@
             </div>
           </template>
           <template #default>
-            <!-- 全屏模式下的 Logo 显示 -->
+            <!-- Logo display in full screen mode -->
             <!-- <div v-if="isFull" class="full-terminal-logo only-pc-display">
-            <Logo></Logo>
-          </div> -->
-            <!-- 全屏模式下的操作按钮 -->
+             <Logo></Logo>
+           </div> -->
+            <!-- Action button in full screen mode -->
             <div v-show="isFull" class="full-terminal-button-wrapper">
               <div class="full-terminal-button" @click="openInstance">
                 {{ $t("instances.start") }}
@@ -331,7 +330,7 @@
                 {{ $t("terminal.exit") }}
               </div>
             </div>
-            <!-- 全屏与非全屏的终端窗口 -->
+            <!-- Fullscreen and non-fullscreen terminal windows -->
             <div :class="{ 'terminal-wrapper': true, 'full-terminal-wrapper': isFull }">
               <div id="terminal-container"></div>
             </div>
@@ -500,7 +499,7 @@
       </template>
     </Dialog>
 
-    <!-- 终端设置对话框 -->
+    <!-- Terminal Settings Dialog -->
     <TermSetting
       v-model:visible="terminalSettingPanel.visible"
       v-model:config="terminalSettingPanel"
@@ -610,7 +609,7 @@ export default {
     }
   },
   methods: {
-    // 请求数据源(Ajax)
+    // request data source (Ajax)
     async renderFromAjax() {
       try {
         const result = await request({
@@ -623,14 +622,14 @@ export default {
         console.log("Error", err);
       }
     },
-    // 请求数据源（Websocket）
+    // Request data source (Websocket)
     async renderFromSocket() {
       this.sendResize(this.terminalWidth, this.terminalHeight);
       this.socket.emit("stream/detail", {});
     },
-    // 与守护进程建立连接
+    // establish a connection with the daemon
     async setUpWebsocket() {
-      // 向面板端请求任务护照来获取直连守护进程的准许
+      // Request a task passport from the panel to get permission to connect directly to the daemon
       let res = null;
       try {
         res = await request({
@@ -650,7 +649,7 @@ export default {
         return;
       }
 
-      // 直接与守护进程建立频道
+      // Establish a channel directly with the daemon
       const password = res.password;
       const addr = parseforwardAddress(res.addr, "ws");
       this.socket = connectRemoteService(
@@ -659,7 +658,7 @@ export default {
         () => {
           this.unavailableIp = null;
           this.unavailableTerminal = false;
-          // 获取一次系统日志
+          // Get a system log
           this.syncLog();
         },
         () => {
@@ -668,7 +667,7 @@ export default {
         }
       );
 
-      // 监听输出流
+      // listen to the output stream
       this.socket.on("instance/stdout", (packet) => {
         if (this.instanceInfo?.config?.terminalOption?.haveColor) {
           this.term.write(encodeConsoleColor(packet.data.text));
@@ -676,19 +675,19 @@ export default {
           this.term.write(textToTermText(packet.data.text));
         }
       });
-      // 监听实例详细信息
+      // Monitor instance details
       this.socket.on("stream/detail", (packet) => {
         this.instanceInfo = packet.data;
         this.resizePtyTerminalWindow();
         this.initChart();
       });
-      // 断开事件
+      // disconnect event
       this.socket.on("disconnect", () => {
         this.available = false;
       });
-      // 返回异步等待
+      // return async await
       return new Promise((r) => {
-        // 连接事件
+        // connect event
         this.socket.on("connect", () => {
           this.available = true;
           r();
@@ -704,9 +703,9 @@ export default {
     },
     pushHistoryCommand(cmd) {
       if (cmd.trim().length <= 0) return;
-      // 清除重复的记录和当前指令一样的记录
+      // Clear duplicate records with the same record as the current command
       this.commandhistory = Array.from(new Set(this.commandhistory)).filter((r) => r != cmd);
-      // 往前方插入当前输入的指令
+      // Insert the currently entered command forward
       this.commandhistory.unshift(cmd);
       if (this.commandhistory.length > 40) {
         this.commandhistory.pop();
@@ -719,9 +718,9 @@ export default {
     stopInterval() {
       clearInterval(this.renderTask);
     },
-    // 初始化 Terminal 窗口
+    // Initialize the Terminal window
     initTerm() {
-      // 创建窗口与输入事件传递
+      // Create window and pass input event
       const terminalContainer = document.getElementById("terminal-container");
 
       this.term = initTerminalWindow(terminalContainer, {
@@ -731,7 +730,7 @@ export default {
       this.onChangeTerminalContainerHeight();
     },
 
-    // PTY 模式下的基于后端配置设定的固定高宽大小
+    // Fixed height and width based on backend configuration settings in PTY mode
     resizePtyTerminalWindow() {
       if (this.instanceInfo.config?.terminalOption?.pty) {
         this.term.resize(
@@ -741,9 +740,9 @@ export default {
       }
     },
 
-    // 开启实例（Ajax）
+    // Open the instance (Ajax)
     async openInstance() {
-      // this.busy = true;
+      // this. busy = true;
       try {
         await request({
           method: "GET",
@@ -756,9 +755,9 @@ export default {
         setTimeout(() => (this.busy = false), 200);
       }
     },
-    // 关闭实例（Ajax）
+    // Close the instance (Ajax)
     async stopInstance() {
-      // this.busy = true;
+      // this. busy = true;
       try {
         await request({
           method: "GET",
@@ -771,7 +770,7 @@ export default {
         setTimeout(() => (this.busy = false), 200);
       }
     },
-    // 终止正在进行异步任务（如更新）
+    // Terminate an ongoing asynchronous task (such as an update)
     async stopAsynchronousTask() {
       try {
         await request({
@@ -785,7 +784,7 @@ export default {
         setTimeout(() => (this.busy = false), 200);
       }
     },
-    // 更新实例
+    // update instance
     async updateInstace() {
       try {
         await request({
@@ -802,9 +801,9 @@ export default {
         setTimeout(() => (this.busy = false), 200);
       }
     },
-    // 终止实例（Ajax）
+    // Terminate the instance (Ajax)
     async killInstance() {
-      // this.busy = true;
+      // this. busy = true;
       try {
         await request({
           method: "GET",
@@ -817,9 +816,9 @@ export default {
         setTimeout(() => (this.busy = false), 200);
       }
     },
-    // 重启实例（Ajax）
+    // Restart the instance (Ajax)
     async restartInstance() {
-      // this.busy = true;
+      // this. busy = true;
       try {
         await request({
           method: "GET",
@@ -840,9 +839,9 @@ export default {
         data: { w, h }
       });
     },
-    // 使用Websocket发送输入
+    // Send input using Websocket
     sendInput(input) {
-      // 当终端处于 PTY 或其他类型时，支持完全数据模式
+      // When the terminal is in PTY or other type, support full data mode
       if (this.isPty) {
         if (!this.socket || !this.available || !this.isStarted)
           return console.log("!this.socket || !this.available || !this.isStarted");
@@ -851,7 +850,7 @@ export default {
         });
       }
     },
-    // 使用Websocket发送命令
+    // Send commands using Websocket
     sendCommand(command, method) {
       if (!this.socket || !this.available)
         return this.$message({
@@ -869,7 +868,7 @@ export default {
       });
       this.command = "";
     },
-    // 前往文件管理界面
+    // Go to the file management interface
     toFileManager() {
       router.push({ path: `/file/${this.serviceUuid}/${this.instanceUuid}/` });
     },
@@ -926,7 +925,7 @@ export default {
         this.term.write(error);
       }
     },
-    // 普通用户更新配置
+    // Ordinary user update configuration
     async instanceConfigUpdate() {
       try {
         await request({
@@ -958,7 +957,7 @@ export default {
     },
     initStorage() {
       const ch = localStorage.getItem("CommandHistory");
-      // 记录已执行命令历史
+      // record the history of executed commands
       if (ch) {
         this.commandhistory = JSON.parse(ch);
       } else {
@@ -969,14 +968,14 @@ export default {
       this.$router.push({ path: `/instance_detail/${this.serviceUuid}/${this.instanceUuid}/` });
     },
     /**
-     * 初始化人数显示报表
+     * Initialize the number of people to display the report
      */
     initChart() {
       if (!this.instanceInfo.info.playersChart || !this.instanceInfo.info.playersChart.length) {
         return;
       }
       if (!this.playersChart) {
-        // 判断div是否存在（要下次执行的时候才会渲染）
+        // Determine whether the div exists (it will be rendered the next time it is executed)
         const echartDiv = document.getElementById("echart-wrapper-players");
         if (!echartDiv) {
           return;
@@ -989,7 +988,7 @@ export default {
       }
     },
     /**
-     * 设置人数显示报表显示值
+     * Set the number of people to display the report display value
      */
     setPlayersChart() {
       if (!this.playersChart) return;
@@ -1007,7 +1006,7 @@ export default {
       });
     },
     /**
-     * 处理人数显示报表横坐标时间显示值
+     * The number of people processed shows the time display value of the horizontal axis of the report
      */
     showTimeStr(time, now) {
       const date = new Date(now - time);
@@ -1039,7 +1038,7 @@ export default {
       });
     },
 
-    // 终端窗口大小自适应事件
+    // Terminal window size adaptation event
     onChangeTerminalContainerHeight() {
       const terminalContainer = document.getElementById("terminal-container");
       if (this.isFull) {
@@ -1059,13 +1058,12 @@ export default {
       }
     }
   },
-  // 装载事件
   async mounted() {
     try {
-      // 初始化Web本地储存
+      // Initialize web local storage
       this.initStorage();
 
-      // 初始化终端窗口
+      // Initialize the terminal window
       this.initTerm();
       this.term.onResize((size) => {
         this.terminalHeight = size.rows;
@@ -1073,38 +1071,38 @@ export default {
         this.sendResize(size.cols, size.rows);
       });
 
-      // 与守护进程建立 Websocket 连接
+      // Establish a Websocket connection with the daemon
       await this.setUpWebsocket();
-      // 请求数据 & 启用状态获取定时器
+      // request data & enable status get timer
       await this.renderFromSocket();
       this.startInterval();
     } catch (error) {
       console.error(error);
-      // 忽略
+      // neglect
     }
 
-    // 监听窗口变化事件
+    // Listen for window change events
     window.addEventListener("resize", this.onChangeTerminalContainerHeight);
   },
-  // 卸载事件
+  // unload event
   beforeUnmount() {
-    // 卸载监听浏览器窗口改变时间
+    // Uninstall monitor browser window change time
     window.removeEventListener("resize", this.onChangeTerminalContainerHeight);
 
     try {
-      // 停止定时器
+      // stop the timer
       this.stopInterval();
-      // 断开与守护进程联系
+      // disconnect from the daemon
       this.socket.disconnect();
-      // 卸载终端窗口
+      // Uninstall the terminal window
       this.term.dispose();
-      // 卸载人数报表
+      // Unload the count report
       if (this.playersChart) {
         this.playersChart.dispose();
         this.playersChart = null;
       }
     } catch (error) {
-      // 忽略
+      // neglect
       console.error(error);
     }
   }
diff --git a/src/app/views/Trigger.vue b/src/app/views/Trigger.vue
index 988e0391..90bbe20e 100755
--- a/src/app/views/Trigger.vue
+++ b/src/app/views/Trigger.vue
@@ -2,7 +2,7 @@
   Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
 -->
 
-<template>触发器</template>
+<template>TODO</template>
 
 <script>
 export default {
diff --git a/src/app/views/Update.vue b/src/app/views/Update.vue
index 487fc356..3980b9a4 100755
--- a/src/app/views/Update.vue
+++ b/src/app/views/Update.vue
@@ -4,35 +4,35 @@
 
 <template>
   <Panel>
-    <template #title>版本管理</template>
+    <template #title>Version Management</template>
     <template #default>
       <p></p>
     </template>
   </Panel>
   <Panel>
-    <template #title>分布式服务版本列表 </template>
+    <template #title>Distributed service version list </template>
     <template #default>
       <el-table :data="services" stripe style="width: 100%" size="small">
-        <el-table-column prop="ip" label="地址" width="140px"></el-table-column>
-        <el-table-column prop="port" label="端口" width="140px"></el-table-column>
-        <el-table-column label="状态" width="120px">
+        <el-table-column prop="ip" label="address" width="140px"></el-table-column>
+        <el-table-column prop="port" label="port" width="140px"></el-table-column>
+        <el-table-column label="status" width="120px">
           <template #default="scope">
-            <span>{{ scope.row.available ? "在线" : "离线" }}</span>
+            <span>{{ scope.row.available ? "online" : "offline" }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="remarks" label="备注" width="180px"></el-table-column>
-        <el-table-column label="软件版本">
+        <el-table-column prop="remarks" label="Remarks" width="180px"></el-table-column>
+        <el-table-column label="software version">
           <!-- eslint-disable-next-line vue/no-unused-vars -->
           <template #default="scope">
             <el-tag type="info" size="small" effect="plain"> 1.0.0 </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作" style="text-align: center" width="240px">
+        <el-table-column label="action" style="text-align: center" width="240px">
           <!-- eslint-disable-next-line vue/no-unused-vars -->
           <template #default="scope">
-            <el-button size="mini" type="warning" plain>更新版本</el-button>
-            <el-button size="mini" type="danger" plain>重启</el-button>
-            <el-button size="mini" type="danger" plain>重装</el-button>
+            <el-button size="mini" type="warning" plain>Updated version</el-button>
+            <el-button size="mini" type="danger" plain>Restart</el-button>
+            <el-button size="mini" type="danger" plain>Reload</el-button>
           </template>
         </el-table-column>
       </el-table>
diff --git a/src/app/views/UserDetail.vue b/src/app/views/UserDetail.vue
index d6b346b0..5a9be224 100755
--- a/src/app/views/UserDetail.vue
+++ b/src/app/views/UserDetail.vue
@@ -74,15 +74,15 @@
     </el-col>
     <el-col :md="8" :offset="0">
       <!-- <Panel>
-        <template #title>用户名</template>
+        <template #title>Username</template>
         <template #default>
           <div class="sub-title row-mt">
-            <p class="sub-title-title require-field">更改用户名</p>
-            <p class="sub-title-info">支持中文和字母，长度为 2 到 18 个文字</p>
+            <p class="sub-title-title require-field">Change username</p>
+            <p class="sub-title-info">Support Chinese and alphabet, 2 to 18 characters in length</p>
           </div>
           <el-input
             size="small"
-            placeholder="保持原值"
+            placeholder="Keep the original value"
             v-model="userData.userName"
             :readonly="readonly.a"
             @focus="() => (readonly.a = false)"
@@ -90,7 +90,7 @@
           ></el-input>
           <div style="text-align: right">
             <el-button size="small" class="row-mt" @click="update(1)" type="danger" plain
-              >更新用户名</el-button
+              >Update Username</el-button
             >
           </div>
         </template>
@@ -272,7 +272,7 @@ export default {
       if (value.length < 9 || value.length > 36)
         return callback(new Error(this.$t("userDetail.notStandard")));
       // const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[0-9A-Za-z]{12,}$/;
-      // if (!reg.test(value)) return callback(new Error("您的密码必须包含：数字，大写和小写字母"));
+      // if (!reg.test(value)) return callback(new Error("Your password must contain: numbers, uppercase and lowercase letters"));
       callback();
     },
     validatePassword2(rule, value = "", callback) {
diff --git a/src/app/views/UserResources.vue b/src/app/views/UserResources.vue
index 97868157..8ca92c33 100755
--- a/src/app/views/UserResources.vue
+++ b/src/app/views/UserResources.vue
@@ -95,7 +95,6 @@
     </template>
   </Panel>
 
-  <!-- 新增实例框 -->
   <Dialog v-model="isAddInstanceForUser">
     <template #title>{{ $t("userResources.addInstanceForUser") }}</template>
     <template #default>
@@ -175,7 +174,6 @@ export default {
         });
       }
     },
-    // 用户数据渲染
     async render() {
       const result = await request({
         method: "GET",
diff --git a/src/app/views/Users.vue b/src/app/views/Users.vue
index b2e867c9..8a136c8d 100755
--- a/src/app/views/Users.vue
+++ b/src/app/views/Users.vue
@@ -87,7 +87,7 @@
       </el-col>
     </el-row>
 
-    <!-- 新增用户弹框 -->
+    <!-- create user dialog -->
     <Dialog v-model="isNewUser">
       <template #title>{{ $t("users.newUser") }}</template>
       <template #default>
@@ -150,7 +150,7 @@
       </template>
     </Dialog>
 
-    <!-- 编辑用户弹框 -->
+    <!-- edit user dialog -->
     <Dialog v-model="isEditUser">
       <template #title>{{ $t("users.editUser") }}</template>
       <template #default>
@@ -225,9 +225,9 @@ export default {
       // isAssignLoading: true,
       editUserInfo: {},
       objects: [],
-      remoteObjects: [], // 以守护进程为主键的列表
-      instances: [], // 以实例为主键的列表
-      multipleSelection: [], // 表格多选属性
+      remoteObjects: [], // list with daemon as primary key
+      instances: [], // list with instance as primary key
+      multipleSelection: [], // table multiple selection properties
 
       readonly: true,
 
@@ -236,13 +236,13 @@ export default {
   },
   async mounted() {
     this.businessWarning = true;
-    // 请求并渲染所有用户
+    // request and render all users
     await this.render();
-    // 异步请求所有实例缓存结果
+    // Asynchronously request all instances to cache the result
     this.renderServices();
   },
   methods: {
-    // 用户数据渲染
+    // user data rendering
     async render() {
       const result = await request({
         method: "GET",
@@ -283,11 +283,11 @@ export default {
         }
       });
     },
-    // 页码点击事件
+    // page number click event
     handleCurrentChange() {
       this.refresh();
     },
-    // 表格多选函数
+    // table multi-select function
     selectionChange(v) {
       this.multipleSelection = v;
     },
@@ -312,7 +312,7 @@ export default {
       // this.isAssign = true;
       // this.isAssignLoading = true;
       // this.editUserInfo = {};
-      // // 请求选择的用户详细信息
+      // // Request selected user details
       // this.editUserInfo = await this.requestUserInfo(row.uuid);
       // this.isAssignLoading = false;
     },
diff --git a/src/app/views/quickstart/index.vue b/src/app/views/quickstart/index.vue
index 12e00ee3..a9ddf9c0 100755
--- a/src/app/views/quickstart/index.vue
+++ b/src/app/views/quickstart/index.vue
@@ -8,7 +8,6 @@
       <template #title>{{ title }}</template>
       <template #default>
         <div v-show="step == 0">
-          <!-- <span>欢迎您访问“快速开始”，我们将尽可能的降低使用门槛并帮助您使用面板！</span> -->
           <el-row :gutter="10" justify="left" class="">
             <el-col
               :md="6"
diff --git a/src/assets/css/action.css b/src/assets/css/action.css
index 8dbd6bc6..b0d75f99 100755
--- a/src/assets/css/action.css
+++ b/src/assets/css/action.css
@@ -1,6 +1,6 @@
 /* Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com> */
 
-/* Vue 组件默认的动画名 */
+/* Vue component default animation name */
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.4s ease;
@@ -11,7 +11,7 @@
   opacity: 0;
 }
 
-/* 更快的淡入淡出动画 */
+/* Faster fade animation */
 .fade2-enter-active,
 .fade2-leave-active {
   transition: opacity 0.3s ease;
@@ -22,7 +22,7 @@
   opacity: 0;
 }
 
-/* 更快的淡入淡出动画 */
+/* Faster fade animation */
 .fade3-enter-active,
 .fade3-leave-active {
   transition: opacity 0.3s ease;
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index ca4e5999..16f59b41 100755
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -1,12 +1,12 @@
 /* Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com> */
 
-/* 菜单 */
+/* menu */
 #app-menu {
   height: 100%;
   transition: all 1s;
 }
 
-/* 动画 */
+/* animation */
 
 .fade-enter-active,
 .fade-leave-active {
@@ -18,7 +18,7 @@
   opacity: 0;
 }
 
-/* 标题和子标题组件 */
+/* Title and subtitle components */
 .sub-title {
   margin-bottom: 10px;
   font-size: 14px;
@@ -60,7 +60,7 @@
   display: inline-block;
 }
 
-/* 列表项目栏 */
+/* list item column */
 .list-item {
   margin: 2px 0px;
   padding: 8px;
@@ -78,7 +78,7 @@
   overflow-y: auto;
 }
 
-/* 首页的项目数值表格 */
+/* Item value table on the home page */
 .overview-info-title {
   /* text-align: center; */
   color: rgb(66, 66, 66);
@@ -97,7 +97,7 @@
   color: rgb(122, 122, 122);
 }
 
-/* 常见问题栏目连接属性集合 */
+/* FAQ column connection attribute collection */
 .manualLink {
   display: block;
   color: black;
@@ -131,7 +131,7 @@
   height: 100%;
 }
 
-/* 卡片 CSS 标题元素 */
+/* Card CSS title element */
 .box-card-title-more {
   font-weight: 800;
   margin-bottom: 12px;
diff --git a/src/assets/css/element-variables.scss b/src/assets/css/element-variables.scss
index cbc3430a..fc4548d7 100755
--- a/src/assets/css/element-variables.scss
+++ b/src/assets/css/element-variables.scss
@@ -67,22 +67,22 @@ a {
 
 $item-group-margin: 5px;
 
-.el-button + .el-button {
+.el-button+.el-button {
   margin-left: $item-group-margin;
 }
 
-.item-group-warpper {
+.item-group-wrapper {
   margin: 0px -5px;
 }
 
-.item-responsive-group > * {
+.item-responsive-group>* {
   margin-left: $item-group-margin;
   margin-right: $item-group-margin;
   margin-bottom: $item-group-margin;
   margin-top: $item-group-margin;
 }
 
-.item-responsive-group-only-lr > * {
+.item-responsive-group-only-lr>* {
   margin-left: $item-group-margin;
   margin-right: $item-group-margin;
 }
@@ -90,6 +90,7 @@ $item-group-margin: 5px;
 .el-drawer__body {
   padding: 0px;
 }
+
 .el-menu-item.is-active {
   color: var(--el-menu-active-color);
   background-color: #ffffff1c;
@@ -97,4 +98,4 @@ $item-group-margin: 5px;
 
 .el-menu-item [class^="el-icon-"] {
   vertical-align: text-top;
-}
+}
\ No newline at end of file
diff --git a/src/assets/css/tools.css b/src/assets/css/tools.css
index c23ab9b4..67abe5aa 100755
--- a/src/assets/css/tools.css
+++ b/src/assets/css/tools.css
@@ -1,6 +1,6 @@
 /* Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com> */
 
-/* 工具类 */
+/* Tools */
 .row-mb {
   margin-bottom: 10px;
 }
@@ -30,7 +30,7 @@
   text-align: right;
 }
 
-/* 公共文字颜色 */
+/* public text color */
 
 .color-red {
   color: #f56c6c;
@@ -55,7 +55,9 @@
 .color-blue {
   color: #409eff;
 }
-/* Flex 左右布局 */
+
+/* Flex left and right layout */
+
 .flex {
   display: flex;
 }
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
index fb4b5a52..efc808ec 100755
--- a/src/components/Aside.vue
+++ b/src/components/Aside.vue
@@ -18,7 +18,6 @@
       <Logo></Logo>
       <el-menu-item-group>
         <template #title>{{ $t("aside.basic") }}</template>
-
         <el-menu-item key="/overview" index="/overview">
           <i class="el-icon-pie-chart"></i>
           <template #title>{{ $t("router.overview") }}</template>
diff --git a/src/components/CommandAssist.vue b/src/components/CommandAssist.vue
index 2a3f97f5..81132f4b 100755
--- a/src/components/CommandAssist.vue
+++ b/src/components/CommandAssist.vue
@@ -166,7 +166,6 @@
 <script>
 import Dialog from "./Dialog";
 
-// 使用 v-model 指令实现双向数据传递
 export default {
   props: {
     modelValue: Boolean,
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index c347455c..a5408096 100755
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -30,7 +30,7 @@
 
 <script>
 import Panel from "./Panel";
-// 使用 v-model 指令实现双向数据传递
+
 export default {
   props: {
     modelValue: Boolean,
diff --git a/src/components/DockerVariableSetup.vue b/src/components/DockerVariableSetup.vue
index 1ef57a8e..f53b981c 100755
--- a/src/components/DockerVariableSetup.vue
+++ b/src/components/DockerVariableSetup.vue
@@ -4,27 +4,33 @@
 
 <template>
   <Dialog v-model="visible" :cancel="close">
-    <template #title>配置对话框</template>
+    <template #title>{{ $t("general.config") }}</template>
     <template #default>
-      <div v-if="items" class="components-warpper">
+      <div v-if="items" class="components-wrapper">
         <el-table :data="items" style="width: 100%" size="small">
           <el-table-column v-for="(item, index) in columns" :key="index" v-bind="item">
             <template #default="scope">
               <el-input v-model="scope.row[item.prop]" type="text" size="small"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="操作">
+          <el-table-column :label="$t('general.operation')">
             <template #default="scope">
-              <el-button text size="small" @click="deleteTableItem(scope.$index)">删除</el-button>
+              <el-button text size="small" @click="deleteTableItem(scope.$index)">
+                {{ $t("general.delete") }}
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
       </div>
       <div class="btn-area">
-        <el-button size="small" type="success" @click="createTableData">新增项目</el-button>
+        <el-button size="small" type="success" @click="createTableData">
+          {{ $t("general.add") }}
+        </el-button>
         <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
-        <el-button size="small" type="primary" @click="sumbit">确定</el-button>
-        <el-button size="small" type="danger" @click="close">取消</el-button>
+        <el-button size="small" type="primary" @click="submit">
+          {{ $t("general.confirm") }}
+        </el-button>
+        <el-button size="small" type="danger" @click="close">{{ $t("general.cancel") }}</el-button>
       </div>
     </template>
   </Dialog>
@@ -54,7 +60,7 @@ export default {
       this.visible = false;
       this.items = [];
     },
-    sumbit() {
+    submit() {
       this.$emit("submit", this.items);
       this.close();
     },
diff --git a/src/components/Header.vue b/src/components/Header.vue
index f6f25cda..9072c167 100755
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -11,8 +11,7 @@
   >
     <el-row>
       <el-col :span="12">
-        <!-- 手机端只显示扩展按钮 -->
-        <div class="only-phone-display header-left-buttion" @click="toAside">
+        <div class="only-phone-display header-left-button" @click="toAside">
           <i class="el-icon-s-operation"></i>
         </div>
         <div
@@ -25,30 +24,8 @@
             >{{ $t("router.panel") }}&nbsp;/&nbsp;{{ $t("router." + item.title) }}</span
           >
         </div>
-        <!-- 电脑端显示全部内容 -->
-        <!-- <el-breadcrumb separator="/" style="line-height: 28px" class="only-pc-display">
-          <el-breadcrumb-item :to="{ path: '/overview' }">控制面板</el-breadcrumb-item>
-          <el-breadcrumb-item
-            v-for="(item, index) in breadcrumbsList"
-            :to="{ path: item.path }"
-            :key="index"
-          >
-            {{ item.title }}
-          </el-breadcrumb-item>
-        </el-breadcrumb> -->
       </el-col>
       <el-col :span="12" style="text-align: right; line-height: 28px">
-        <!-- <span class="locale-changer">
-          <select v-model="$i18n.locale">
-            <option
-              v-for="locale in $i18n.availableLocales"
-              :key="`locale-${locale}`"
-              :value="locale"
-            >
-              {{ locale }}
-            </option>
-          </select>
-        </span> -->
         <el-dropdown style="margin: 0px 10px">
           <span class="el-dropdown-link">
             {{ userInfo.userName }}
@@ -61,12 +38,6 @@
             </el-dropdown-menu>
           </template>
         </el-dropdown>
-        <!-- <el-tooltip content="消息" class="only-pc-display">
-          <el-button size="mini" icon="el-icon-bell" circle></el-button>
-        </el-tooltip>
-        <el-tooltip content="使用文档" class="only-pc-display">
-          <el-button size="mini" icon="el-icon-help" circle></el-button>
-        </el-tooltip> -->
       </el-col>
     </el-row>
   </el-card>
@@ -166,7 +137,7 @@ export default {
   font-size: 12px;
 }
 
-.header-left-buttion {
+.header-left-button {
   line-height: 28px;
   font-size: 22px;
   cursor: pointer;
diff --git a/src/components/ItemGroup.vue b/src/components/ItemGroup.vue
index 731ed811..afbead50 100755
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <div class="item-group-warpper">
+  <div class="item-group-wrapper">
     <div :class="classz" :style="style">
       <slot></slot>
     </div>
diff --git a/src/components/LineButton.vue b/src/components/LineButton.vue
index 8cb82fa4..32785059 100755
--- a/src/components/LineButton.vue
+++ b/src/components/LineButton.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <div class="line-button-warpper">
+  <div class="line-button-wrapper">
     <div class="line-button">
       <slot></slot>
     </div>
@@ -20,7 +20,7 @@ export default {
 </script>
 
 <style scoped>
-/* .line-button-warpper { */
+/* .line-button-wrapper { */
 /* margin-bottom: 10px; */
 /* } */
 
diff --git a/src/components/LineInfo.vue b/src/components/LineInfo.vue
index b721cd3a..993546a5 100755
--- a/src/components/LineInfo.vue
+++ b/src/components/LineInfo.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <div class="line-info-warpper">
+  <div class="line-info-wrapper">
     <div class="line-info" :class="{ 'line-info-button': isButton }">
       <slot></slot>
     </div>
@@ -23,7 +23,7 @@ export default {
 </script>
 
 <style scoped>
-.line-info-warpper {
+.line-info-wrapper {
   text-align: left;
   margin-bottom: 10px;
 }
diff --git a/src/components/LineOption.vue b/src/components/LineOption.vue
index 9139f133..41330128 100755
--- a/src/components/LineOption.vue
+++ b/src/components/LineOption.vue
@@ -1,7 +1,7 @@
-<!-- eslint-disable vue/no-mutating-props -->
 <!--
   Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
 -->
+<!-- eslint-disable vue/no-mutating-props -->
 
 <template>
   <div class="line-option-warpper">
diff --git a/src/components/UserInit.vue b/src/components/UserInit.vue
deleted file mode 100755
index bcd41b90..00000000
--- a/src/components/UserInit.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<!--
-  Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
--->
-
-<template>
-  <Dialog v-model="visible" :canClose="false">
-    <template #title>请更改密码</template>
-    <template #default>
-      <div class="content">
-        <div class="sub-title">
-          <div class="sub-title-title require-field">重置最高级别账号密码</div>
-          <div class="sub-title-info">
-            为确保面板安全，第一次登录必须重设密码，密码必须由大写字母，小写字母和数字组成，长度为 9
-            到 36 位
-          </div>
-          <div class="row-mt">
-            <el-input
-              type="password"
-              v-model="passWord"
-              autocomplete="off"
-              placeholder="请输入您要设置的新密码"
-            />
-            <div style="text-align: right">
-              <el-button size="small" class="row-mt" @click="submit()" type="danger" plain
-                >重置密码</el-button
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </Dialog>
-</template>
-
-<script>
-import { API_USER_UPDATE } from "../app/service/common";
-import { request } from "../app/service/protocol";
-import Dialog from "./Dialog";
-
-export default {
-  components: { Dialog },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      passWord: ""
-    };
-  },
-  mounted() {},
-  methods: {
-    async submit() {
-      await this.$confirm(`确定重设密码为：${this.passWord} 吗？`, "重置密码确认", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      });
-      try {
-        await request({
-          method: "PUT",
-          url: API_USER_UPDATE,
-          data: {
-            passWord: this.passWord,
-            isInit: true
-          }
-        });
-        this.$message({ message: "已设置密码，欢迎使用", type: "success" });
-        this.$emit("update:visible", false);
-        location.reload();
-      } catch (error) {
-        this.$message({
-          message: error,
-          type: "error"
-        });
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.content {
-  max-width: 500px;
-}
-.title {
-  margin: 8px 0px;
-}
-</style>
diff --git a/src/language/en_us.js b/src/language/en_us.js
index 18f8a6a7..71304cd0 100755
--- a/src/language/en_us.js
+++ b/src/language/en_us.js
@@ -25,6 +25,8 @@ export default {
         yes: "Yes",
         no: "No",
         save: "Save",
+        config: "config",
+        operation: "operation"
     },
     root: {
         title: "Processing...",
diff --git a/src/language/zh_cn.js b/src/language/zh_cn.js
index 3d6f34e1..a9106373 100755
--- a/src/language/zh_cn.js
+++ b/src/language/zh_cn.js
@@ -25,7 +25,12 @@ export default {
         yes: "是",
         no: "否",
         save: "保存",
+        error: "操作错误",
+        success: "操作成功",
+        config: "配置",
+        operation: "操作"
     },
+
     root: {
         title: "处理中...",
         private: "个人资料",