From 9d301b9681f33ab17e231e3b3f53a18df4d86f1c Mon Sep 17 00:00:00 2001
From: hi2hi <code@hi2hi.cc>
Date: Tue, 31 Dec 2024 05:56:36 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=84=20=E5=88=A4=E6=96=AD=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=99=A8=E6=95=B0=E9=87=8F=E5=86=B3=E5=AE=9A=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E6=89=8D=E6=9C=89=E8=BF=87=E6=B8=A1=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=EF=BC=8C=E6=95=B0=E9=87=8F=E5=A4=9A=E4=BA=86=E4=BC=9A=E5=8D=A1?=
 =?UTF-8?q?=E9=A1=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../server-list/server-list-warp.vue          | 112 ++++++++++++++++++
 src/views/home.vue                            |  94 +++------------
 2 files changed, 129 insertions(+), 77 deletions(-)
 create mode 100644 src/views/components/server-list/server-list-warp.vue

diff --git a/src/views/components/server-list/server-list-warp.vue b/src/views/components/server-list/server-list-warp.vue
new file mode 100644
index 0000000..e05d0b6
--- /dev/null
+++ b/src/views/components/server-list/server-list-warp.vue
@@ -0,0 +1,112 @@
+<template>
+  <transition-group
+    v-if="showTransition"
+    name="list"
+    tag="div"
+    class="server-list-container"
+    :class="{
+      'server-list--row': showListRow,
+      'server-list--card': showListCard,
+    }"
+  >
+    <slot />
+  </transition-group>
+  <div
+    v-else
+    class="server-list-container"
+    :class="{
+      'server-list--row': showListRow,
+      'server-list--card': showListCard,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+/**
+ * 服务器列表
+ */
+
+defineProps({
+  showTransition: {
+    type: Boolean,
+    default: true,
+  },
+  showListRow: {
+    type: Boolean,
+    default: false,
+  },
+  showListCard: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.server-list-container.server-list--card {
+  --list-padding: 20px;
+  --list-gap-size: 20px;
+  --list-item-num: 3;
+  --list-item-width: calc(
+    (
+      var(--list-container-width)
+      - (var(--list-padding) * 2)
+      - (
+        var(--list-gap-size)
+        * (var(--list-item-num) - 1)
+        )
+    )
+    / var(--list-item-num)
+  );
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--list-gap-size);
+  padding: 0 var(--list-padding);
+  width: var(--list-container-width);
+  margin: auto;
+
+  // 针对1440px以下的屏幕
+  @media screen and (max-width: 1440px) {
+    --list-gap-size: 10px;
+  }
+
+  @media screen and (max-width: 1024px) {
+    --list-item-num: 2;
+  }
+
+  @media screen and (max-width: 680px) {
+    --list-item-num: 1;
+  }
+}
+
+.server-list-container.server-list--row {
+  --list-padding: 20px;
+  --list-gap-size: 12px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--list-gap-size);
+  width: var(--list-container-width);
+  margin: auto;
+}
+
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+.list-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+.list-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/src/views/home.vue b/src/views/home.vue
index 1fe661a..410123d 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -33,32 +33,28 @@
           />
         </div>
       </div>
-      <transition-group
+      <server-list-warp
         v-if="showListRow"
-        name="list"
-        tag="div"
-        class="server-list-container"
-        :class="`server-list--row`"
+        :show-transition="showTransition"
+        :show-list-row="showListRow"
       >
         <server-row-item
           v-for="item in filterServerList.list"
           :key="item.ID"
           :info="item"
         />
-      </transition-group>
-      <transition-group
+      </server-list-warp>
+      <server-list-warp
         v-if="showListCard"
-        name="list"
-        tag="div"
-        class="server-list-container"
-        :class="`server-list--card`"
+        :show-transition="showTransition"
+        :show-list-card="showListCard"
       >
         <server-card-item
           v-for="item in filterServerList.list"
           :key="item.ID"
           :info="item"
         />
-      </transition-group>
+      </server-list-warp>
     </div>
   </div>
 </template>
@@ -93,6 +89,7 @@ import validate from '@/utils/validate';
 
 import WorldMap from '@/components/world-map/world-map.vue';
 import ServerOptionBox from './components/server-list/server-option-box.vue';
+import ServerListWarp from './components/server-list/server-list-warp.vue';
 import ServerCardItem from './components/server-list/card/server-list-item.vue';
 import ServerRowItem from './components/server-list/row/server-list-item.vue';
 
@@ -100,6 +97,14 @@ const store = useStore();
 const worldMapWidth = ref();
 const windowWidth = ref(window.innerWidth);
 
+const showTransition = computed(() => {
+  // 强制开启
+  if (config.nazhua.forceTransition) {
+    return true;
+  }
+  // 服务器数量小于7时，不开启
+  return store.state.serverList.length < 7;
+});
 const showListRow = computed(() => {
   if (windowWidth.value > 1024) {
     return config.nazhua.listServerItemType === 'row';
@@ -335,69 +340,4 @@ onActivated(() => {
     padding: 0 20px;
   }
 }
-
-.server-list-container.server-list--card {
-  --list-padding: 20px;
-  --list-gap-size: 20px;
-  --list-item-num: 3;
-  --list-item-width: calc(
-    (
-      var(--list-container-width)
-      - (var(--list-padding) * 2)
-      - (
-        var(--list-gap-size)
-        * (var(--list-item-num) - 1)
-        )
-    )
-    / var(--list-item-num)
-  );
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--list-gap-size);
-  padding: 0 var(--list-padding);
-  width: var(--list-container-width);
-  margin: auto;
-
-  // 针对1440px以下的屏幕
-  @media screen and (max-width: 1440px) {
-    --list-gap-size: 10px;
-  }
-
-  @media screen and (max-width: 1024px) {
-    --list-item-num: 2;
-  }
-
-  @media screen and (max-width: 680px) {
-    --list-item-num: 1;
-  }
-}
-
-.server-list-container.server-list--row {
-  --list-padding: 20px;
-  --list-gap-size: 12px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--list-gap-size);
-  width: var(--list-container-width);
-  margin: auto;
-}
-
-.list-move,
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.3s ease;
-}
-.list-enter-from {
-  opacity: 0;
-  transform: translateY(-30px);
-}
-.list-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-.list-leave-active {
-  position: absolute;
-}
 </style>