✨ 添加卡片与列表的切换设置，优化相关样式

public/config.js

@@ -5,12 +5,13 @@ window.$$nazhuaConfig = {
   // buyBtnText: '购买', // 购买按钮文案
   // customBackgroundImage: '', // 自定义的背景图片地址
   // lightBackground: true, // 启用了浅色系背景图，会强制关闭点点背景
+  // listServerItemTypeToggle: true, // 服务器列表项类型切换
   // listServerItemType: 'row', // 服务器列表项类型 card/row row列表模式移动端自动切换至card
   // listServerStatusType: 'progress', // 服务器状态类型--列表
   // listServerRealTimeShowLoad: false, // 列表显示服务器实时负载
   // detailServerStatusType: 'progress', // 服务器状态类型--详情页
   // serverStatusLinear: true, // 服务器状态渐变线性显示
-  // disableSarasaTermSC: false, // 禁用Sarasa Term SC字体
+  // disableSarasaTermSC: true, // 禁用Sarasa Term SC字体
   // hideWorldMap: false, // 隐藏地图
   // hideHomeWorldMap: false, // 隐藏首页地图
   // hideDetailWorldMap: false, // 隐藏详情地图

src/layout/components/header.vue

@@ -335,6 +335,10 @@ const dashboardUrl = computed(() => config.nazhua.v1DashboardUrl || '/dashboard'
       color: #ddd;
       line-height: 30px;
 
+      .value {
+        font-weight: bold;
+      }
+
       &.server-count--total {
         .value {
           color: #70f3ff;

src/views/components/server-detail/server-info-box.vue

@@ -212,6 +212,9 @@
             v-for="(tag, index) in tagList"
             :key="`${tag}_${index}`"
             class="server-info-tag-item"
+            :class="{
+              'has-sarasa-term': $hasSarasaTerm && config.nazhua.disableSarasaTermSC !== true,
+            }"
           >
             {{ tag }}
           </span>
@@ -605,12 +608,16 @@ const processCount = computed(() => props.info?.State?.ProcessCount);
     .server-info-tag-item {
       height: 18px;
       padding: 0 5px 0 6px;
-      line-height: 20px;
+      line-height: 18px;
       font-size: 12px;
       color: var(--public-note-tag-color);
       background: var(--public-note-tag-bg);
       text-shadow: 1px 1px 2px rgba(#000, 0.2);
       border-radius: 4px;
+
+      &.has-sarasa-term {
+        line-height: 20px;
+      }
     }
   }
 }

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

@@ -37,7 +37,7 @@
           :key="`${tagItem}_${index}`"
           class="tag-item"
           :class="{
-            'has-sarasa-term': $hasSarasaTerm,
+            'has-sarasa-term': $hasSarasaTerm && config.nazhua.disableSarasaTermSC !== true,
           }"
         >
           {{ tagItem }}

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

@@ -156,6 +156,7 @@ function openDetail() {
       height: 32px;
       line-height: 34px;
       font-size: 16px;
+      font-weight: bold;
       width: 100%;
       text-overflow: ellipsis;
       white-space: nowrap;

src/views/components/server-list/server-list-warp.vue

@@ -90,6 +90,7 @@ defineProps({
   flex-direction: column;
   gap: var(--list-gap-size);
   width: var(--list-container-width);
+  padding: 0 var(--list-padding);
   margin: auto;
 }
 

src/views/components/server-list/server-option-box.vue

@@ -10,12 +10,22 @@
       :key="item.key"
       class="server-option-item"
       :class="{
+        'has-icon': item.icon,
         active: activeValue === item.value,
       }"
       :title="item?.title || false"
       @click="toggleModelValue(item)"
     >
-      <span class="option-label">{{ item.label }}</span>
+      <i
+        v-if="item.icon"
+        class="option-icon"
+        :class="item.icon"
+        :title="item.label"
+      />
+      <span
+        v-else
+        class="option-label"
+      >{{ item.label }}</span>
     </div>
   </div>
 </template>
@@ -85,13 +95,28 @@ function toggleModelValue(item) {
     background: rgba(#000, 0.3);
     transition: all 0.3s linear;
     cursor: pointer;
+
+    &.has-icon {
+      padding: 0 10px;
+      border-radius: 4px;
+    }
+
     @media screen and (max-width: 768px) {
+      height: 30px;
+      padding: 0 10px;
+      border-radius: 3px;
       background-color: rgba(#000, 0.8);
       cursor: default;
     }
 
+    .option-icon {
+      line-height: 1;
+      font-size: 18px;
+    }
+
     .option-label {
       color: #fff;
+      font-weight: bold;
       transition: all 0.3s linear;
     }
 

src/views/home.vue

@@ -31,6 +31,12 @@
             v-model="filterFormData.online"
             :options="onlineOptions"
           />
+          <server-option-box
+            v-if="config.nazhua.listServerItemTypeToggle"
+            v-model="listType"
+            :options="listTypeOptions"
+            :accpet-empty="false"
+          />
         </div>
       </div>
       <server-list-warp
@@ -97,6 +103,8 @@ const store = useStore();
 const worldMapWidth = ref();
 const windowWidth = ref(window.innerWidth);
 
+const listType = ref(config.nazhua.listServerItemType || 'card');
+
 const showTransition = computed(() => {
   // 强制开启
   if (config.nazhua.forceTransition) {
@@ -107,12 +115,18 @@ const showTransition = computed(() => {
 });
 const showListRow = computed(() => {
   if (windowWidth.value > 1024) {
+    if (config.nazhua.listServerItemTypeToggle) {
+      return listType.value === 'row';
+    }
     return config.nazhua.listServerItemType === 'row';
   }
   return false;
 });
 const showListCard = computed(() => {
   if (windowWidth.value > 1024) {
+    if (config.nazhua.listServerItemTypeToggle) {
+      return listType.value !== 'row';
+    }
     return config.nazhua.listServerItemType !== 'row';
   }
   return true;
@@ -164,6 +178,18 @@ const onlineOptions = computed(() => {
   return [];
 });
 
+const listTypeOptions = computed(() => [{
+  key: 'card',
+  label: '卡片',
+  value: 'card',
+  icon: 'ri-gallery-view-2',
+}, {
+  key: 'row',
+  label: '列表',
+  value: 'row',
+  icon: 'ri-list-view',
+}]);
+
 const filterServerList = computed(() => {
   const fields = {};
   const locationMap = {};
@@ -334,10 +360,15 @@ onActivated(() => {
   justify-content: space-between;
   gap: 10px 20px;
   width: var(--list-container-width);
+  padding: 0 20px;
   margin: auto;
 
-  &.list-is-card {
+  .left-box {
-    padding: 0 20px;
+    gap: 10px;
+  }
+
+  .right-box {
+    gap: 10px;
   }
 }
 </style>