Feat: add docker port

src/app/views/Terminal/DockerInfo.vue

@@ -0,0 +1,51 @@
+<template>
+  <Dialog v-model="v" :cancel="close">
+    <template #title>容器资源限制信息</template>
+    <template #default>
+      <el-row :gutter="20">
+        <el-col :md="12" :offset="0"> </el-col>
+      </el-row>
+    </template>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog";
+import { TERMINAL_CODE } from "../../service/common";
+export default {
+  components: {
+    Dialog
+  },
+  props: {
+    dockerInfo: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      TERMINAL_CODE,
+      v: false,
+      options: {}
+    };
+  },
+
+  methods: {
+    open() {
+      this.v = true;
+    },
+    close() {
+      this.v = false;
+    }
+  }
+};
+</script>
+
+<!--
+  Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
+-->
+
+<style scoped>
+.btn-area {
+  margin-top: 8px;
+}
+</style>

src/app/views/Terminal/index.vue

@@ -21,24 +21,51 @@
                 <i class="el-icon-tickets"></i> {{ $t("terminal.type") }}:
                 {{ typeToText(instanceInfo.config.type) }}
               </LineInfo>
+              <LineInfo>
+                <i class="el-icon-tickets"></i> {{ $t("terminal.limit") }}:
+                <span class="color-blue" style="cursor: pointer"> 查看 </span>
+              </LineInfo>
+              <LineInfo v-if="instanceInfo.config.docker && instanceInfo.config.docker.ports">
+                <i class="el-icon-money"></i> {{ $t("terminal.dockerPort") }}
+                <i class="el-icon-question"></i>:
+
+                <div style="padding: 10px 0px 0px 16px">
+                  <div
+                    style="margin-bottom: 2px"
+                    v-for="(item, index) in dockerPortsParse(instanceInfo.config.docker.ports)"
+                    :key="index"
+                  >
+                    <template v-if="!item.more">
+                      <span>{{ $t("CommonText.029") }}: {{ item.p1 }} </span>
+                      <span style="margin-left: 6px"
+                        >{{ $t("CommonText.030") }}: {{ item.p2 }}
+                      </span>
+                      <span style="margin-left: 8px">
+                        <el-tag type="success" size="mini">{{ item.protocol }}</el-tag>
+                      </span>
+                    </template>
+                    <template v-else>...</template>
+                  </div>
+                </div>
+              </LineInfo>
               <LineInfo
                 ><i class="el-icon-finished"></i> {{ $t("imageManager.status") }}:
-                <span v-if="instanceInfo.status === -1" class="color-red">{{
-                  $t("home.maintaining")
-                }}</span>
-                <span v-else-if="instanceInfo.status === 0" class="color-gray">{{
-                  $t("home.outOfRunning")
-                }}</span>
-                <span v-else-if="instanceInfo.status === 1" class="color-yellow">{{
-                  $t("home.stopping")
-                }}</span>
-                <span v-else-if="instanceInfo.status === 2" class="color-yellow">{{
-                  $t("home.starting")
-                }}</span>
-                <span v-else-if="instanceInfo.status === 3" class="color-green">{{
-                  $t("home.running")
-                }}</span>
-                <span v-else class="color-red">{{ $t("terminal.unknown") }}</span>
+                <span v-if="instanceInfo.status === -1" class="color-red">
+                  {{ $t("home.maintaining") }}
+                </span>
+                <span v-else-if="instanceInfo.status === 0" class="color-gray">
+                  {{ $t("home.outOfRunning") }}
+                </span>
+                <span v-else-if="instanceInfo.status === 1" class="color-yellow">
+                  {{ $t("home.stopping") }}
+                </span>
+                <span v-else-if="instanceInfo.status === 2" class="color-yellow">
+                  {{ $t("home.starting") }}
+                </span>
+                <span v-else-if="instanceInfo.status === 3" class="color-green">
+                  {{ $t("home.running") }}
+                </span>
+                <span v-else class="color-red"> {{ $t("terminal.unknown") }} </span>
               </LineInfo>
               <LineInfo v-if="instanceInfo.info && instanceInfo.info.currentPlayers != -1">
                 <i class="el-icon-user"></i> {{ $t("terminal.currentPlayers") }}:
@@ -733,16 +760,16 @@ export default {
       // Create window and pass input event
       const terminalContainer = document.getElementById("terminal-container");
       const ft = localStorage.getItem("terminalFontSize");
-      if (!(ft)) {
+      if (!ft) {
         this.term = initTerminalWindow(terminalContainer, {
-          fontSize: 13,
+          fontSize: 13
         });
       } else {
         this.term = initTerminalWindow(terminalContainer, {
-          fontSize: localStorage.getItem("terminalFontSize"),
+          fontSize: localStorage.getItem("terminalFontSize")
         });
       }
-      
+
       this.term.onData(this.sendInput);
       this.onChangeTerminalContainerHeight();
     },
@@ -1072,6 +1099,34 @@ export default {
           this.$nextTick(() => this.term.fitAddon.fit());
         }
       }
+    },
+
+    // [ "25565:25565/tcp", "27766:27766/tcp" ]
+    dockerPortsParse(list = []) {
+      let line = [];
+      list.forEach((v, index) => {
+        if (index >= 2) return;
+        const tmp = v.split("/");
+        if (tmp.length != 2) return;
+        const protocol = tmp[1];
+        const p = tmp[0].split(":");
+        if (p.length >= 2) {
+          line.push({
+            p1: p[0],
+            p2: p[1],
+            protocol: String(protocol).toUpperCase()
+          });
+        }
+      });
+      if (list.length >= 2) {
+        line.push({
+          p1: null,
+          p2: null,
+          protocol: null,
+          more: true
+        });
+      }
+      return line;
     }
   },
   async mounted() {

src/language/en_us.json

@@ -324,7 +324,7 @@
     "dockerImage": "Environment image",
     "dockerImageInfo": "Specify instance image",
     "openPort": "Open port",
-    "openPortInfo": "Use space for multiple port. <Opened port on host>:<Opened port of container>, for simplicity, use the same port number.",
+    "openPortInfo": "Use space for multiple port. <port on host>:<port of container>.",
     "portExample": "Optional, For example: 25565:25565/tcp 3380:3380/udp",
     "quickEdit": "Quick edit",
     "extraVolumes": "Extra mount directory",
@@ -455,7 +455,8 @@
     },
     "cantConnectTerm": "Failed to establish connection to the terminal",
     "cantSendCmdBecauseData": "Unable to execute command: data channel unavailable",
-    "cantSendCmdBecauseNotRun": "Unable to execute command: sever not running"
+    "cantSendCmdBecauseNotRun": "Unable to execute command: sever not running",
+    "dockerPort": "Available ports"
   },
   "processConfig": {
     "title": "Configure List Group",

src/language/zh_cn.json

@@ -27,7 +27,9 @@
     "025": "删除",
     "026": "新建目录",
     "027": "压缩",
-    "028": "解压"
+    "028": "解压",
+    "029": "主机",
+    "030": "容器"
   },
   "general": {
     "search": "搜索",
@@ -455,7 +457,9 @@
     },
     "cantConnectTerm": "无法与终端建立连接",
     "cantSendCmdBecauseData": "无法执行命令，数据流通道不可用",
-    "cantSendCmdBecauseNotRun": "无法执行命令，服务器未开启"
+    "cantSendCmdBecauseNotRun": "无法执行命令，服务器未开启",
+    "dockerPort": "可用端口",
+    "limit": "资源限制"
   },
   "processConfig": {
     "title": "配置列表组",