Feat: show docker port

frontend/src/tools/common.ts

@@ -100,3 +100,30 @@ function leftZero4(str: string) {
   }
   return str || "";
 }
+
+export const dockerPortsParse = (list: string[]) => {
+  let line = [];
+  list.forEach((v, index) => {
+    if (index >= 50) 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 >= 50) {
+    line.push({
+      p1: null,
+      p2: null,
+      protocol: null,
+      more: true
+    });
+  }
+  return line;
+};

frontend/src/widgets/instance/BaseInfo.vue

@@ -7,6 +7,7 @@ import { useInstanceInfo } from "@/hooks/useInstance";
 import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import { GLOBAL_INSTANCE_NAME } from "../../config/const";
 import { parseTimestamp } from "../../tools/time";
+import { dockerPortsParse } from "@/tools/common";
 
 const props = defineProps<{
   card: LayoutCard;
@@ -73,6 +74,25 @@ onMounted(async () => {
       <a-typography-paragraph>
         {{ t("TXT_CODE_46f575ae") }}{{ parseTimestamp(instanceInfo?.config.lastDatetime) }}
       </a-typography-paragraph>
+      <a-typography-paragraph v-if="instanceInfo?.config.docker.image">
+        {{ t("可用端口：") }}
+        <div style="padding: 10px 0px 0px 16px">
+          <div
+            v-for="(item, index) in dockerPortsParse(instanceInfo?.config.docker.ports ?? [])"
+            :key="index"
+            style="margin-bottom: 2px"
+          >
+            <template v-if="!item.more">
+              <span>{{ t("主机") }}: {{ item.p1 }}</span>
+              <span style="margin-left: 6px">{{ t("容器") }}: {{ item.p2 }}</span>
+              <span style="margin-left: 8px">
+                <a-tag color="green">{{ item.protocol }}</a-tag>
+              </span>
+            </template>
+            <template v-else>...</template>
+          </div>
+        </div>
+      </a-typography-paragraph>
       <a-typography-paragraph>
         {{ t("TXT_CODE_ae747cc0") }}{{ parseTimestamp(instanceInfo?.config.endTime) }}
       </a-typography-paragraph>