Feat: add hiper text info

src/app/views/Terminal/NetworkTip.vue

@@ -0,0 +1,110 @@
+<!--
+  Copyright (C) 2022 MCSManager <mcsmanager-dev@outlook.com>
+-->
+
+<template>
+  <Dialog v-model="v" :cancel="close">
+    <template #title>联网方式</template>
+    <template #default>
+      <div class="wrapper">
+        <el-row :gutter="20" v-if="viewType === 0">
+          <el-col :span="12" :offset="0">
+            <SelectBlock style="height: 140px" @click="select(1)">
+              <template #title>
+                <p class="sub-title-title">公网 IP 联机</p>
+              </template>
+              <template #info>
+                <p class="sub-title-info">您必须拥有一台公网IP的服务器，才可以使用此方式联网。</p>
+              </template>
+            </SelectBlock>
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <SelectBlock style="height: 140px" @click="select(2)">
+              <template #title>
+                <p class="sub-title-title">使用 HiPer 提供的虚拟网络联机</p>
+              </template>
+              <template #info>
+                <p class="sub-title-info">适用于家庭宽带，动态公网IP，以及容易遭受攻击的用户。</p>
+              </template>
+            </SelectBlock>
+          </el-col>
+        </el-row>
+
+        <div v-if="viewType === 1">
+          <p class="sub-title-title">
+            当您选择使用公网IP时，MCSManager
+            无需进行任何操作，您只需使用公网IP+您的软件默认端口号即可让其他人连接您的服务器，列如
+            40.1.2.3:25565。
+          </p>
+        </div>
+
+        <div v-if="viewType === 2">
+          <p class="sub-title-title row-mb">
+            使用 HiPer 的去中心化服务实现虚拟局域网，从而让您与其他人共同进入服务器。
+          </p>
+          <p class="sub-title-title">
+            对于中国大陆用户，最新版本的 HMCL，PCL 启动器均已支持 HiPer
+            联机，您的朋友必须也要使用最新的启动器并启动 HiPer 网络联机模式才可以与您一起游玩。
+          </p>
+          <p>
+            状态：
+            <span class="color-gray">未启用</span>
+          </p>
+          <p>
+            IP 地址：
+            <span class="color-green">-</span>
+          </p>
+          <el-button type="primary" size="small" @click="startHiPer">开始使用</el-button>
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog";
+import SelectBlock from "@/components/SelectBlock";
+export default {
+  components: { Dialog, SelectBlock },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      v: false,
+      viewType: 0
+    };
+  },
+  watch: {
+    visible(n) {
+      this.v = n;
+      this.init();
+    }
+  },
+
+  methods: {
+    init() {},
+    show() {
+      this.$emit("update:visible", true);
+    },
+    close() {
+      this.$emit("update:visible", false);
+      this.viewType = 0;
+    },
+    select(type) {
+      this.viewType = type;
+    },
+    startHiPer() {}
+  }
+};
+</script>
+
+<style scoped>
+.wrapper {
+  margin: 16px;
+  max-width: 600px;
+}
+</style>

src/app/views/Terminal/TermSetting.vue

@@ -161,6 +161,7 @@ import Dialog from "@/components/Dialog";
 import { request } from "@/app//service/protocol";
 import { API_INSTANCE_UPDATE } from "@/app/service/common";
 import { TERMINAL_CODE } from "../../service/common";
+
 export default {
   components: { Dialog },
   props: {

src/app/views/Terminal/index.vue

@@ -205,7 +205,19 @@
                   style="width: 100%"
                   size="small"
                   @click="toFileManager"
-                  >{{ $t("instancesDetail.fileManager") }}
+                >
+                  {{ $t("instancesDetail.fileManager") }}
+                </el-button>
+              </el-col>
+              <el-col :lg="24" :offset="0" class="row-mb">
+                <el-button
+                  :disabled="!available"
+                  icon="el-icon-folder-opened"
+                  style="width: 100%"
+                  size="small"
+                  @click="networkTip = true"
+                >
+                  {{ $t("instancesDetail.networkTip") }}
                 </el-button>
               </el-col>
               <el-col :lg="24" :offset="0" class="row-mb" v-iszh>
@@ -507,6 +519,8 @@
       :instanceUuid="instanceUuid"
     >
     </TermSetting>
+
+    <NetworkTip v-model:visible="networkTip"></NetworkTip>
   </div>
 </template>
 
@@ -539,10 +553,11 @@ import { statusCodeToText, typeTextToReadableText } from "../../service/instance
 import { initTerminalWindow, textToTermText } from "../../service/term";
 import { getPlayersOption } from "../../service/chart_option";
 import TermSetting from "./TermSetting";
+import NetworkTip from "./NetworkTip";
 
 export default {
   // eslint-disable-next-line vue/no-unused-components
-  components: { Panel, LineInfo, LineButton, Dialog, Logo, TermSetting },
+  components: { Panel, LineInfo, LineButton, Dialog, Logo, TermSetting, NetworkTip },
   data: function () {
     return {
       input1: "",
@@ -555,6 +570,7 @@ export default {
       command: "",
       available: false,
       socket: null,
+      networkTip: false,
       instanceInfo: {
         config: {}
       },

src/components/Panel.vue

@@ -60,7 +60,7 @@ export default {
 }
 
 .box-card-content {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 400;
 }
 

src/language/zh_cn.json

@@ -355,7 +355,8 @@
     ],
     "startError": "启动命令中不可包含换行，这并非脚本文件，不可执行多条命令，请检查",
     "cantGetImageList": "无法获得远程主机镜像列表，建议前往“服务环境”界面创建镜像",
-    "cantGetNetModeList": "无法获得远程主机网络列表，建议检查 Docker 配置"
+    "cantGetNetModeList": "无法获得远程主机网络列表，建议检查 Docker 配置",
+    "networkTip": "联机模式"
   },
   "instanceTypeList": {
     "General console program": "控制台程序（通用）",
@@ -1052,4 +1053,4 @@
       "014": "正在安装中"
     }
   }
-}
+}