ServerStatus主题首页增加服务器世界分布图功能 (#344)

resource/l10n/en-US.toml

@@ -639,3 +639,6 @@ other = "Asset"
 
 [DisableSwitchTemplateInFrontend]
 other = "Disable Switch Template in Frontend"
+
+[ServersOnWorldMap]
+other = "Servers On World Map"

resource/l10n/es-ES.toml

@@ -638,4 +638,7 @@ other = "Plantilla"
 other = "Stat"
 
 [DisableSwitchTemplateInFrontend]
-other = "Deshabilitar Cambio de Plantilla en Frontend"
+other = "Deshabilitar Cambio de Plantilla en Frontend"
+
+[ServersOnWorldMap]
+other = "Servidores en el mapa mundial"

resource/l10n/zh-CN.toml

@@ -639,3 +639,6 @@ other = "信息"
 
 [DisableSwitchTemplateInFrontend]
 other = "禁止前台切换模板"
+
+[ServersOnWorldMap]
+other = "服务器世界分布图"

resource/l10n/zh-TW.toml

@@ -639,3 +639,6 @@ other = "信息"
 
 [DisableSwitchTemplateInFrontend]
 other = "禁止前台切換主題"
+
+[ServersOnWorldMap]
+other = "伺服器世界分布圖"

resource/static/theme-server-status/css/dark.css

@@ -157,3 +157,16 @@ body[theme="dark"] footer p a:hover {
     color: #f1f1f1;
     text-decoration: none;
 }
+
+body[theme="dark"] .modal-content{
+    background-color: #1c1d26;
+    color: #f1f1f1;
+}
+
+body[theme="dark"] .modal-header{
+    border-bottom-color:#080808;
+}
+
+body[theme="dark"] .modal-header i{
+    color: #f1f1f1;
+}

resource/static/theme-server-status/css/light.css

@@ -131,4 +131,17 @@ body[theme="light"] footer p a,
 body[theme="light"] footer p a:hover {
     color: #333333;
     text-decoration: none;
+}
+
+body[theme="light"] .modal-content{
+    background-color: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+}
+
+body[theme="light"] .modal-header{
+    border-bottom-color:#f1f1f1;
+}
+
+body[theme="light"] .modal-header i{
+    color: rgba(0, 0, 0, 0.87);
 }

resource/static/theme-server-status/css/main.css

@@ -281,10 +281,42 @@ body {
 .service-status .tooltip-inner {
     max-width: 500px;
 }
-
-
-
 /* 服务页 正文结束 */
+
+
+/* 服务器分布图 */
+#mapChartBox{
+    z-index: 999999999;
+}
+
+.modal-content{
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+}
+
+.modal-dialog-centered{
+    margin: 0 auto;
+    width: 1134px;
+    max-width: 1134px;
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    justify-content: center; /* 水平居中 */
+    min-height: calc(100%) /* 确保模态框占据整个视口高度 */
+}
+
+.modal-header{
+    position: relative;
+}
+
+.modal-header i{
+    cursor: pointer;
+    position: absolute;
+    font-size: 2em;
+    top: 13px;
+    right: 13px;
+}
+
 @media only screen and (max-width: 1200px) {
     .accordian-body{
         margin: 5px 0px 5px 10px;        
@@ -365,6 +397,16 @@ body {
     .toolbox {
         right: 18px;
     }
+    .modal-dialog-centered{
+        width: 95%;
+    }
+    .modal-title{
+        line-height: 0.5;
+    }
+    .modal-header i{
+        top: 8px;
+        right: 8px;
+    }
 }
 
 @media only screen and (min-width: 768px) {

resource/template/theme-server-status/content-footer.html

@@ -5,6 +5,9 @@
     </p>
 </footer>
 <aside class="toolbox">
+    <span v-if="page=='index' && countryMapChartData.length!=0" class="showMapChart">
+        <i @click="showMapChart" data-toggle="modal" data-target="#mapChartBox" class="bi bi-geo-alt"></i>
+    </span>
     <span class="toggleView">
         <i v-if="showGroup" @click="toggleView" class="show-nogroup bi bi-justify"></i>
         <i v-else @click="toggleView" class="show-group bi bi-view-stacked"></i>

resource/template/theme-server-status/header.html

@@ -8,9 +8,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="/static/theme-server-status/css/bootstrap-theme.min.css">
-    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240225">
-    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css">
-    <link rel="stylesheet" href="/static/theme-server-status/css/light.css">
+    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240407">
+    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240407">
+    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240407">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-logos@0.17/assets/font-logos.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css">
@@ -28,7 +28,8 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js" integrity="md5-ZmUzMzZlOGQyYzk2NTgwNGRlMzRlNTliZDgyYTY1OGUgIC0=" crossorigin="anonymous"></script>
     <script src="/static/theme-server-status/js/mixin.js?v20240302"></script>
 </head>
 <body>
-{{end}}
+{{end}}