Auto Update code

2024-11-27 08:39:51 +08:00 · 2021-07-04 17:05:38 +08:00 · 2021-07-04 17:05:38 +08:00 · 471378b01f
commit 471378b01f
parent c4b3f9a416
12 changed files with 470 additions and 63 deletions
--- a/public/static/images/index.png
+++ b/public/static/images/index.png
--- a/src/app/index.js
+++ b/src/app/index.js
@ -1,7 +1,7 @@
 /*
 * @Author: Copyright(c) 2020 Suwings
 * @Date: 2021-05-08 10:07:55
- * @LastEditTime: 2021-05-18 18:36:58
+ * @LastEditTime: 2021-07-04 13:46:10
 * @Description:
 */

@ -9,6 +9,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import installElementPlus from "../plugins/element";
 import "../assets/common.css";
+import "../assets/tools.css";

 // eslint-disable-next-line no-unused-vars
 import socket from "./service/socket";
--- a/src/app/views/InstanceDetail.vue
+++ b/src/app/views/InstanceDetail.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: Copyright(c) 2020 Suwings
 * @Date: 2021-05-08 11:53:54
- * @LastEditTime: 2021-07-01 18:40:05
+ * @LastEditTime: 2021-07-04 15:54:31
 * @Description: 
 -->

@ -29,12 +29,15 @@
        <el-col :md="16">
          <el-row :gutter="20">
            <el-col :md="12" class="row-mt">
-              <div class="sub-title">实例名称</div>
+              <div class="sub-title">
+                <div class="sub-title-title">实例名称</div>
+              </div>
              <el-input v-model="instanceInfo.config.nickname" type="text"> </el-input>
            </el-col>
            <el-col :md="12" class="row-mt">
-              <div class="sub-title">类型</div>
-              <!-- <el-input v-model="instanceInfo.config.type" type="text"> </el-input> -->
+              <div class="sub-title">
+                <div class="sub-title-title">类型</div>
+              </div>
              <el-select
                v-model="instanceInfo.config.type"
                placeholder="请选择"
@ -45,31 +48,48 @@
              </el-select>
            </el-col>
            <el-col :md="24" class="row-mt">
-              <div class="sub-title">启动命令</div>
+              <div class="sub-title">
+                <div class="sub-title-title">启动命令</div>
+                <div class="sub-title-info">
+                  适用于任何程序启动命令，列如 cmd.exe /c ping localhost
+                </div>
+              </div>
              <el-input v-model="instanceInfo.config.startCommand" type="text"> </el-input>
            </el-col>
            <el-col :md="24" class="row-mt">
-              <div class="sub-title">工作目录</div>
+              <div class="sub-title">
+                <div class="sub-title-title">工作目录</div>
+              </div>
              <el-input v-model="instanceInfo.config.cwd" type="text"> </el-input>
            </el-col>
            <el-col :md="8" class="row-mt">
-              <div class="sub-title">输入编码</div>
+              <div class="sub-title">
+                <div class="sub-title-title">输入编码</div>
+              </div>
              <el-input v-model="instanceInfo.config.ie" type="text"> </el-input>
            </el-col>
            <el-col :md="8" class="row-mt">
-              <div class="sub-title">输出编码</div>
+              <div class="sub-title">
+                <div class="sub-title-title">输出编码</div>
+              </div>
              <el-input v-model="instanceInfo.config.oe" type="text"> </el-input>
            </el-col>
            <el-col :md="8" class="row-mt">
-              <div class="sub-title">关闭命令</div>
+              <div class="sub-title">
+                <div class="sub-title-title">关闭命令</div>
+              </div>
              <el-input v-model="instanceInfo.config.stopCommand" type="text"> </el-input>
            </el-col>
            <el-col :md="8" class="row-mt" :offset="0">
-              <div class="sub-title">最大储存（单位 GB）</div>
+              <div class="sub-title">
+                <div class="sub-title-title">最大储存（单位GB）</div>
+              </div>
              <el-input v-model="instanceInfo.config.maxSpace" type="text"> </el-input>
            </el-col>
            <el-col :md="8" class="row-mt" :offset="0">
-              <div class="sub-title">到期时间</div>
+              <div class="sub-title">
+                <div class="sub-title-title">到期时间</div>
+              </div>
              <el-date-picker
                v-model="instanceInfo.config.endTime"
                type="date"
--- a/src/app/views/Instances.vue
+++ b/src/app/views/Instances.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: Copyright(c) 2020 Suwings
 * @Date: 2021-05-08 11:53:54
- * @LastEditTime: 2021-07-03 22:56:22
+ * @LastEditTime: 2021-07-04 13:10:42
 * @Description: 
 -->

@ -10,26 +10,26 @@
    <template #title>分布式服务状态</template>
    <template #default>
      <el-row :gutter="20">
-        <el-col :span="6" style="margin: -12px 0px">
-          <LineLabel>
+        <el-col :span="6">
+          <LineLabel size="small">
            <template #title>已连接远程服务: </template>
            <template #default> {{ availableService.length }} 个 </template>
          </LineLabel>
        </el-col>
-        <el-col :span="6" style="margin: -12px 0px">
-          <LineLabel>
+        <el-col :span="6">
+          <LineLabel size="small">
            <template #title>不可用远程服务: </template>
            <template #default> {{ unavailableService.length }} 个 </template>
          </LineLabel>
        </el-col>
-        <el-col :span="6" style="margin: -12px 0px">
-          <LineLabel>
+        <el-col :span="6">
+          <LineLabel size="small">
            <template #title>实例总数: </template>
            <template #default> {{ instances.length }} 个 </template>
          </LineLabel>
        </el-col>
-        <el-col :span="6" style="margin: -12px 0px">
-          <LineLabel>
+        <el-col :span="6">
+          <LineLabel size="small">
            <template #title>运行中: </template>
            <template #default> {{ startedInstance }} 个 </template>
          </LineLabel>
--- a/src/app/views/Overview.vue
+++ b/src/app/views/Overview.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: Copyright(c) 2020 Suwings
 * @Date: 2021-05-08 11:53:54
- * @LastEditTime: 2021-05-13 13:54:29
+ * @LastEditTime: 2021-07-04 13:10:56
 * @Description: 
 -->

@ -12,9 +12,6 @@
        <template #title>操作系统数据</template>
        <template #default>
          <el-row :gutter="20">
-            <!-- <el-col :span="24" :offset="0">
-              <div class="overview-info-hr">操作系统数据</div>
-            </el-col> -->
            <el-col :xs="12" :md="6" v-for="(item, index) in computerInfoA" :key="index">
              <div class="overview-info-warpper">
                <p class="overview-info-title" v-text="item.name"></p>
@ -35,6 +32,44 @@
          </el-row>
        </template>
      </Panel>
+      <Panel>
+        <template #title>分布式服务状态</template>
+        <template #default>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <LineLabel size="small">
+                <template #title>已连接远程服务: </template>
+                <template #default> 0 个 </template>
+              </LineLabel>
+            </el-col>
+            <el-col :span="6">
+              <LineLabel size="small">
+                <template #title>不可用远程服务: </template>
+                <template #default> 0 个 </template>
+              </LineLabel>
+            </el-col>
+            <el-col :span="6">
+              <LineLabel size="small">
+                <template #title>实例总数: </template>
+                <template #default> 0 个 </template>
+              </LineLabel>
+            </el-col>
+            <el-col :span="6">
+              <LineLabel size="small">
+                <template #title>运行中: </template>
+                <template #default> 0</template>
+              </LineLabel>
+            </el-col>
+          </el-row>
+          <div v-show="true">
+            <span style="color: red">
+              <b>警告：</b> 检测到您有一个或以上远程服务无法建立连接，请前往
+              <a class="alink" href="./services">分布式服务</a>
+              功能确认各个远程服务器状态，若不修复此问题，则有部分远程实例您可能无法访问和显示。
+            </span>
+          </div>
+        </template>
+      </Panel>
    </el-col>
  </el-row>
  <el-row :gutter="20">
@ -100,7 +135,7 @@

 <script>
 import Panel from "../../components/Panel";
-
+import LineLabel from "../../components/LineLabel";
 export default {
  data: function () {
    return {
@ -202,7 +237,7 @@ export default {
    };
  },
  methods: {},
-  components: { Panel }
+  components: { Panel, LineLabel }
 };
 </script>

--- a/src/app/views/Services.vue
+++ b/src/app/views/Services.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: Copyright(c) 2020 Suwings
 * @Date: 2021-05-08 11:53:54
- * @LastEditTime: 2021-07-03 22:28:04
+ * @LastEditTime: 2021-07-04 13:13:42
 * @Description: 
 -->

@ -20,12 +20,14 @@
      <Panel>
        <template #title>远程服务节点</template>
        <template #default>
-          <el-tree
-            :data="remoteNodes"
-            :props="defaultProps"
-            :default-expand-all="true"
-            @node-click="handleNodeClick"
-          ></el-tree>
+          <div style="min-height: 280px">
+            <el-tree
+              :data="remoteNodes"
+              :props="defaultProps"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            ></el-tree>
+          </div>
        </template>
      </Panel>
    </el-col>
@ -35,17 +37,36 @@
          <div>
            <span v-text="displayService.ip + ':' + displayService.port"></span>
            &nbsp;
-            <el-tag size="small">{{ displayService.available ? "已连接" : "不可使用" }}</el-tag>
+            <el-tag type="success" v-show="displayService.available" size="small">正常</el-tag>
+            <el-tag type="danger" v-show="!displayService.available" size="small">无法连接</el-tag>
          </div>
-          <el-button class="button" type="text">删除</el-button>
+          <el-button class="button" type="text" @click="deleteService">删除</el-button>
        </template>
        <template #default>
+          <p v-if="!displayService.available" style="color: red">
+            无法连接到远程服务，此远程服务所在主机的全部信息都将无法正常获取，请确认地址是否正确且服务正常启用。
+          </p>
          <el-descriptions size="mini">
            <el-descriptions-item label="UUID">{{ displayService.uuid }}</el-descriptions-item>
            <el-descriptions-item label="远程实例数">{{
              displayService.instances.length
            }}</el-descriptions-item>
          </el-descriptions>
+          <div class="service-address-wrapper">
+            <div class="row-mt">
+              <el-input v-model="displayService.ip" size="small">
+                <template #prepend>地址</template>
+              </el-input>
+            </div>
+            <div class="row-mt">
+              <el-input v-model="displayService.port" size="small">
+                <template #prepend>端口</template>
+              </el-input>
+            </div>
+            <div class="row-mt" style="text-align: right">
+              <el-button size="small">更新地址</el-button>
+            </div>
+          </div>
          <el-table :data="displayService.instances" stripe style="width: 100%" size="small">
            <el-table-column prop="instanceUuid" label="UUID"></el-table-column>
            <el-table-column prop="config.nickname" label="实例昵称"></el-table-column>
@ -124,6 +145,20 @@ export default {
        const tAddr = `${service.ip}:${service.port}`;
        if (sAddr == tAddr) return (this.displayService = service);
      });
+    },
+    deleteService() {
+      this.$confirm("此操作将永久删除该远程服务，是否继续？", "警告", {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+        })
+        .catch(() => {});
    }
  },
  components: { Panel, Dialog },
--- a/src/app/views/Setting.vue
+++ b/src/app/views/Setting.vue
@ -1,19 +1,202 @@
 <!--
 * @Author: Copyright(c) 2020 Suwings
 * @Date: 2021-05-08 11:53:54
- * @LastEditTime: 2021-05-11 22:06:54
+ * @LastEditTime: 2021-07-04 17:04:34
 * @Description: 
 -->

-<template>设置</template>
+<template>
+  <Panel>
+    <template #title>配置操作</template>
+    <template #default>
+      <div class="flex flex-space-between flex-align-items-center">
+        <div>
+          <el-button type="success" size="mini">更新配置</el-button>
+          <el-button type="" size="mini">刷新</el-button>
+        </div>
+        <span class="color-gray">部分配置可能需要重启面板才能生效&nbsp;&nbsp;</span>
+      </div>
+    </template>
+  </Panel>
+
+  <Panel>
+    <template #title>基础设置</template>
+    <template #default>
+      <el-row :gutter="20">
+        <el-col :md="12" class="row-mt">
+          <div class="system-index-block">
+            <SystemIndex></SystemIndex>
+          </div>
+          <div class="config-item">
+            <div class="sub-title">
+              <p class="sub-title-title">面板访问端口</p>
+              <p class="sub-title-info">建议修改成非默认端口以确保基本的安全性。</p>
+            </div>
+
+            <el-input placeholder="请必须填入数字" v-model="input1"> </el-input>
+          </div>
+          <div class="config-item">
+            <div class="sub-title">
+              <p class="sub-title-title">面板绑定IP</p>
+              <p class="sub-title-info">一般情况请保持默认值，一般适用于多个IP的场景。</p>
+            </div>
+            <el-input placeholder="默认 0.0.0.0 | 可不填" v-model="input1"> </el-input>
+          </div>
+        </el-col>
+
+        <el-col :md="4"></el-col>
+        <el-col :md="8" class="row-mt">
+          <div>
+            <div class="sub-title">
+              <p class="sub-title-title">相关参考链接</p>
+              <p class="sub-title-info">
+                面板的大部分设置十分重要，在一般情况下，绝大部分参数都无需更改，如果某个参数您并不知晓代表什么，那么建议您不要对其进行修改。
+              </p>
+              <p class="sub-title-info">或者，您可以考虑阅读以下链接。</p>
+            </div>
+            <a class="alink" href="http://"> <p>面板设置配置手册</p></a>
+            <a class="alink"> <p>反馈问题</p></a>
+          </div>
+        </el-col>
+      </el-row>
+    </template>
+  </Panel>
+  <Panel>
+    <template #title>限制与安全</template>
+    <template #default>
+      <el-row :gutter="20">
+        <el-col :md="12" class="row-mt">
+          <div class="config-item">
+            <div class="sub-title">
+              <p class="sub-title-title">跨域请求 API 接口</p>
+              <p class="sub-title-info">启动此项目可能会降低安全性，但是会提高开发扩展性。</p>
+            </div>
+            <el-select v-model="value" placeholder="请选择">
+              <el-option label="启用" :value="true"></el-option>
+              <el-option label="禁止" :value="false"></el-option>
+            </el-select>
+          </div>
+          <div class="config-item">
+            <div class="sub-title">
+              <p class="sub-title-title">使用 gzip 静态文件压缩</p>
+              <p class="sub-title-info">
+                如果你使用反向代理或某 HTTP 服务自带的gzip，请关闭它，否则可以使用默认值。
+              </p>
+            </div>
+            <el-select v-model="value" placeholder="请选择">
+              <el-option label="启用" :value="true"></el-option>
+              <el-option label="禁止" :value="false"></el-option>
+            </el-select>
+          </div>
+          <div class="config-item">
+            <div class="sub-title">
+              <p class="sub-title-title">解压缩最大并发任务</p>
+              <p class="sub-title-info">
+                对于机械硬盘请略调小此值，对于高性能硬盘和CPU可以适当提高。
+              </p>
+            </div>
+            <el-select v-model="value2" placeholder="请选择">
+              <el-option label="无限制" :value="-1"></el-option>
+              <el-option label="最大并发 1 个" :value="1"></el-option>
+              <el-option label="最大并发 2 个" :value="2"></el-option>
+              <el-option label="最大并发 3 个" :value="3"></el-option>
+              <el-option label="最大并发 5 个" :value="5"></el-option>
+              <el-option label="最大并发 8 个" :value="8"></el-option>
+              <el-option label="最大并发 10 个" :value="10"></el-option>
+              <el-option label="最大并发 15 个" :value="15"></el-option>
+              <el-option label="最大并发 20 个" :value="20"></el-option>
+              <el-option label="最大并发 30 个" :value="30"></el-option>
+              <el-option label="最大并发 40 个" :value="40"></el-option>
+              <el-option label="最大并发 60 个" :value="60"></el-option>
+              <el-option label="最大并发 80 个" :value="80"></el-option>
+              <el-option label="最大并发 100 个" :value="100"></el-option>
+              <el-option label="最大并发 200 个" :value="200"></el-option>
+            </el-select>
+          </div>
+          <div class="config-item">
+            <div class="sub-title">
+              <p class="sub-title-title">最大并发下载文件</p>
+              <p class="sub-title-info">所有用户最多可同时下载多少个文件，根据宽带自主调整</p>
+            </div>
+            <el-select v-model="value2" placeholder="请选择">
+              <el-option label="无限制" value=""></el-option>
+              <el-option label="最大并发 1 个" :value="1"></el-option>
+              <el-option label="最大并发 5 个" :value="5"></el-option>
+              <el-option label="最大并发 10 个" :value="10"></el-option>
+              <el-option label="最大并发 15 个" :value="15"></el-option>
+              <el-option label="最大并发 20 个" :value="20"></el-option>
+              <el-option label="最大并发 30 个" :value="30"></el-option>
+              <el-option label="最大并发 40 个" :value="40"></el-option>
+              <el-option label="最大并发 60 个" :value="60"></el-option>
+              <el-option label="最大并发 80 个" :value="80"></el-option>
+              <el-option label="最大并发 100 个" :value="100"></el-option>
+              <el-option label="最大并发 200 个" :value="200"></el-option>
+            </el-select>
+          </div>
+          <div class="config-item">
+            <div class="sub-title">
+              <p class="sub-title-title">下载限速</p>
+              <p class="sub-title-info">对于小宽度服务器可以适当调小。</p>
+            </div>
+            <el-select v-model="value3" placeholder="请选择">
+              <el-option label="无限制" value=""></el-option>
+              <el-option label="100kb/s" value="100kb"></el-option>
+              <el-option label="200kb/s" value="200kb"></el-option>
+              <el-option label="300kb/s" value="300kb"></el-option>
+              <el-option label="500kb/s" value="500kb"></el-option>
+              <el-option label="1mb/s" value="1mb"></el-option>
+              <el-option label="2mb/s" value="2mb"></el-option>
+              <el-option label="5mb/s" value="5mb"></el-option>
+              <el-option label="10mb/s" value="10mb"></el-option>
+            </el-select>
+          </div>
+        </el-col>
+
+        <el-col :md="4"></el-col>
+        <el-col :md="8" class="row-mt">
+          <div>
+            <div class="sub-title">
+              <p class="sub-title-title">注意事项</p>
+              <p class="sub-title-info">
+                这些配置设置需要一部分专业知识，您可以根据您的硬件设备来大概猜测哪些值适合您。<br />一般情况下，默认值可以满足两至三个人的使用场景，如果规模一旦更大，对硬件的要求更高，为了不过分损失用户体验，一个合适的阈值是十分重要的。
+              </p>
+            </div>
+            <div class="sub-title">
+              <p class="sub-title-title">常见概念</p>
+            </div>
+            <a class="alink" href="https://cn.bing.com/"> <p>什么是并发？</p></a>
+            <a class="alink" href="https://cn.bing.com/"> <p>什么是 gzip 压缩？</p></a>
+            <a class="alink" href="https://cn.bing.com/"> <p>反馈问题</p></a>
+          </div>
+        </el-col>
+      </el-row>
+    </template>
+  </Panel>
+</template>

 <script>
+import Panel from "../../components/Panel";
+import SystemIndex from "../../components/SystemImage.vue";
+
 export default {
+  components: { Panel, SystemIndex },
  data: function () {
-    return {};
+    return {
+      input1: "",
+      value: false,
+      value2: 1,
+      value3: ""
+    };
  },
  methods: {}
 };
 </script>

-<style></style>
+<style>
+.system-index-block {
+  margin: 0px 0px 24px 0px;
+}
+.config-item {
+  margin-top: 10px;
+}
+</style>
--- a/src/assets/common.css
+++ b/src/assets/common.css
@ -12,25 +12,18 @@

 .sub-title {
  margin-bottom: 10px;
+  font-size: 14px;
+}
+
+.sub-title-title{
+  font-size: 14px;
+  color: #000000;
+  margin: 0px;
+}
+.sub-title-info{
  font-size: 13px;
-  color: #111111;
-}
-
-.row-mb {
-  margin-bottom: 10px;
-}
-
-.row-mt {
-  margin-top: 10px;
-}
-
-.row-mt-40 {
-  margin-top: 40px;
-}
-
-.row {
-  margin-bottom: 10px;
-  margin-top: 10px;
+  color: gray;
+  margin: 0px;
 }

 /* 面板组件中的居中内容 */
@ -57,4 +50,10 @@

 .alink{
  text-decoration:underline;
+}
+
+.input-label{
+  font-size: 14px;
+  margin: 8px 0px;
+  display: inline-block;
 }
--- a/src/assets/tools.css
+++ b/src/assets/tools.css
@ -0,0 +1,55 @@
+/* 动画 */
+
+/* 工具类 */
+.row-mb {
+  margin-bottom: 10px;
+}
+
+.row-mt {
+  margin-top: 10px;
+}
+
+.row-mt-40 {
+  margin-top: 40px;
+}
+
+.row {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.text-align-right{
+  text-align: right;
+}
+
+/* 公共文字颜色 */
+
+.color-red{
+  color: red;
+}
+
+.color-green{
+  color: green;
+}
+
+.color-yellow{
+  color: yellow;
+}
+
+.color-gray{
+  color: gray;
+}
+
+
+/* Flex 左右布局 */
+.flex{
+  display: flex;
+}
+
+.flex-space-between{
+  justify-content: space-between;
+}
+
+.flex-align-items-center{
+  align-items: center;
+}
--- a/src/components/LineLabel.vue
+++ b/src/components/LineLabel.vue
@ -1,11 +1,18 @@
 <!--
 * @Author: Copyright(c) 2020 Suwings
 * @Date: 2021-05-08 11:08:44
- * @LastEditTime: 2021-07-03 20:39:03
+ * @LastEditTime: 2021-07-04 13:09:01
 * @Description: 
 -->
 <template>
-  <div class="line-label-wrapper">
+  <div
+    class="line-label-wrapper"
+    v-bind:class="{
+      'line-label-margin-24': !size,
+      'line-label-margin-12': size == 'small',
+      'line-label-margin-4': size == 'mini'
+    }"
+  >
    <div class="line-label-title">
      <slot name="title"></slot>
    </div>
@ -17,6 +24,9 @@

 <script>
 export default {
+  props: {
+    size: String
+  },
  data: function () {
    return {};
  },
@ -25,10 +35,21 @@ export default {
 </script>

 <style>
+.line-label-margin-24 {
+  margin: 24px 0px;
+}
+
+.line-label-margin-12 {
+  margin: 12px 0px;
+}
+
+.line-label-margin-4 {
+  margin: 4px 0px;
+}
+
 .line-label-wrapper {
  line-height: 14px;
  font-size: 14px;
-  margin: 24px 0px;
  overflow: hidden;
 }

--- a/src/components/SystemImage.vue
+++ b/src/components/SystemImage.vue
@ -0,0 +1,59 @@
+<!--
+ * @Author: Copyright 2021 Suwings
+ * @Date: 2021-07-03 21:29:11
+ * @LastEditTime: 2021-07-04 15:31:25
+ * @Description: Index 系统预览框
+-->
+
+<template>
+  <div class="component-system-wrapper">
+    <div class="component-system-img-wrapper">
+      <div class="component-system-img"></div>
+    </div>
+    <div class="component-system-content">
+      <p class="component-system-title">MCSManager</p>
+      <p class="component-system-subtitle color-gray">Windows 10 build 21h2</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {};
+  },
+  methods: {},
+  components: {}
+};
+</script>
+
+<style>
+.component-system-wrapper {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.component-system-img-wrapper {
+  margin: 0px;
+  overflow: hidden;
+  border-radius: 2px;
+}
+.component-system-img {
+  background: url("/static/images/index.png") no-repeat;
+  background-size: cover;
+  background-position: center;
+  height: 80px;
+  width: 120px;
+}
+.component-system-content {
+  margin-left: 18px;
+}
+.component-system-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 0px;
+}
+.component-system-subtitle {
+  font-size: 12px;
+}
+</style>
--- a/src/element-variables.scss
+++ b/src/element-variables.scss
@ -12,8 +12,7 @@ $--font-path: "~element-plus/lib/theme-chalk/fonts";

 body,
 html {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
-    "微软雅黑", Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  margin: 0;
  height: 100%;
  background-color: #e9eef3;