✨ 新增地图的位置选择

public/config.js

@@ -21,6 +21,8 @@ window.$$nazhuaConfig = {
   // hideWorldMap: false, // 隐藏地图
   // hideHomeWorldMap: false, // 隐藏首页地图
   // hideDetailWorldMap: false, // 隐藏详情地图
+  // homeWorldMapPosition: 'top', // 首页地图位置 top/bottom
+  // detailWorldMapPosition: 'top', // 详情页地图位置 top/bottom
   // hideNavbarServerCount: false, // 隐藏服务器数量
   // hideNavbarServerStat: false, // 隐藏服务器统计
   // hideListItemStatusDonut: false, // 隐藏列表项的饼图

src/views/detail.vue

@@ -6,11 +6,12 @@
       'server--offline': info?.online !== 1,
     }"
   >
-    <world-map
+    <template v-if="showWorldMap && worldMapPosition === 'top'">
-      v-if="showWorldMap"
+      <world-map
-      :width="worldMapWidth"
+        :width="worldMapWidth"
-      :locations="locations"
+        :locations="locations"
-    />
+      />
+    </template>
     <server-name
       :key="`${info.ID}_name`"
       :info="info"
@@ -27,6 +28,12 @@
       :key="`${info.ID}_monitor`"
       :info="info"
     />
+    <template v-if="showWorldMap && worldMapPosition === 'bottom'">
+      <world-map
+        :width="worldMapWidth"
+        :locations="locations"
+      />
+    </template>
   </div>
 </template>
 
@@ -119,6 +126,13 @@ const showWorldMap = computed(() => {
   return true;
 });
 
+const worldMapPosition = computed(() => {
+  if (Object.keys(config.nazhua).includes('detailWorldMapPosition')) {
+    return config.nazhua.detailWorldMapPosition;
+  }
+  return 'bottom';
+});
+
 function handleWorldMapWidth() {
   worldMapWidth.value = Math.max(
     Math.min(

src/views/home.vue

@@ -2,10 +2,10 @@
   <div class="index-container">
     <div class="scroll-container">
       <div
-        class="world-map-box"
+        v-if="worldMapPosition === 'top' && showWorldMap"
+        class="world-map-box top-world-map"
       >
         <world-map
-          v-if="showWorldMap"
           :locations="serverLocations || []"
           :width="worldMapWidth"
         />
@@ -62,6 +62,15 @@
           :info="item"
         />
       </server-list-warp>
+      <div
+        v-if="worldMapPosition === 'bottom' && showWorldMap"
+        class="world-map-box bottom-world-map"
+      >
+        <world-map
+          :locations="serverLocations || []"
+          :width="worldMapWidth"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -310,6 +319,13 @@ const showWorldMap = computed(() => {
   return true;
 });
 
+const worldMapPosition = computed(() => {
+  if (Object.keys(config.nazhua).includes('homeWorldMapPosition')) {
+    return config.nazhua.homeWorldMapPosition;
+  }
+  return 'top';
+});
+
 /**
  * 处理窗口大小变化
  */
@@ -365,6 +381,10 @@ onActivated(() => {
     align-items: center;
     justify-content: center;
   }
+
+  .bottom-world-map {
+    margin-top: 30px;
+  }
 }
 
 .fitler-group {