✨ 增加自定义的地区flag支持

src/components/server-flag.vue

@@ -0,0 +1,29 @@
+<template>
+  <span
+    class="server-flag"
+  >
+    <span
+      class="fi"
+      :class="'fi-' + lastFlag"
+    />
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  info: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const lastFlag = computed(() => {
+  let flag = props.info?.Host?.CountryCode || 'un';
+  if (props.info?.PublicNote?.customData?.flag) {
+    flag = props.info.PublicNote.customData.flag;
+  }
+  return flag.toLowerCase();
+});
+</script>

src/use.js

@@ -6,12 +6,14 @@ import config from './config';
 
 import DotDotBox from './components/dot-dot-box.vue';
 import Popover from './components/popover.vue';
+import ServerFlag from './components/server-flag.vue';
 
 export default (app) => {
   app.use(router);
   app.use(store);
   app.component('DotDotBox', DotDotBox);
   app.component('Popover', Popover);
+  app.component('ServerFlag', ServerFlag);
 
   app.config.globalProperties.$hasSarasaTerm = !import.meta.env.VITE_DISABLE_SARASA_TERM_SC;
   app.config.globalProperties.$config = config;

src/views/components/server-detail/server-name.vue

@@ -3,13 +3,8 @@
     class="server-head"
     padding="16px"
   >
-    <div class="server-flag">
-      <div class="server-flag-font">
-        <span
-          class="fi"
-          :class="'fi-' + (info?.Host?.CountryCode || 'un')"
-        />
-      </div>
+    <div class="server-flag-box">
+      <server-flag :info="info" />
     </div>
     <div class="server-name-and-slogan">
       <div class="server-name-group">
@@ -97,7 +92,7 @@ const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconCl
   gap: 12px;
   transition: 0.3s;
 
-  .server-flag {
+  .server-flag-box {
     --flag-size: 72px;
     position: relative;
     width: calc(var(--flag-size) * 1.33333333);
@@ -105,7 +100,7 @@ const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconCl
     border-radius: 12px;
     overflow: hidden;
 
-    .server-flag-font {
+    .server-flag {
       position: absolute;
       top: 50%;
       left: 50%;

src/views/components/server-list/card/server-list-item.vue

@@ -15,14 +15,7 @@
       @click="openDetail"
     >
       <div class="server-name-group left-box">
-        <span
-          class="server-flag"
-        >
-          <span
-            class="fi"
-            :class="'fi-' + (info?.Host?.CountryCode || 'un')"
-          />
-        </span>
+        <server-flag :info="info" />
         <span class="server-name">
           {{ info.Name }}
         </span>

src/views/components/server-list/row/server-list-item.vue

@@ -9,14 +9,7 @@
     @click="openDetail"
   >
     <div class="list-column-item list-column-item--server-flag">
-      <span
-        class="server-flag"
-      >
-        <span
-          class="fi"
-          :class="'fi-' + (info?.Host?.CountryCode || 'un')"
-        />
-      </span>
+      <server-flag :info="info" />
     </div>
     <div class="list-column-item list-column-item--server-name">
       <span

src/views/detail.vue

@@ -130,7 +130,7 @@ const worldMapPosition = computed(() => {
   if (Object.keys(config.nazhua).includes('detailWorldMapPosition')) {
     return config.nazhua.detailWorldMapPosition;
   }
-  return 'bottom';
+  return 'top';
 });
 
 function handleWorldMapWidth() {