💄 调整UI

src/pages/common/PageHome.vue

@@ -11,7 +11,34 @@
           :hide-details="true"
           variant="outlined"
           label="分区"
-        />
+        >
+          <template #selection="{ item }">
+            <div class="select-item main">
+              <img
+                :src="item.raw.icon"
+                :alt="item.raw.title"
+                :title="item.raw.title"
+                class="icon"
+              />
+              <span>{{ item.raw.title }}</span>
+            </div>
+          </template>
+          <template #item="{ props, item }">
+            <div
+              v-bind="props"
+              class="select-item sub"
+              :class="{ selected: item.raw.gid === curGid }"
+            >
+              <img
+                :src="item.raw.icon"
+                :alt="item.raw.title"
+                :title="item.raw.title"
+                class="icon"
+              />
+              <span>{{ item.raw.title }}</span>
+            </div>
+          </template>
+        </v-select>
         <TGameNav :model-value="Number(curGid)" />
       </div>
       <div class="home-select">
@@ -60,15 +87,16 @@ const showItemsAll: Array<ShowItemEnum> = [
   ShowItemEnum.pool,
   ShowItemEnum.position,
 ];
+
+const gameSelectList = TGConstant.BBS.CHANNELS;
+const curGid = ref<string>(gameSelectList[0].gid);
+
+const loadItems = shallowRef<Array<ShowItemEnum>>([]);
+const components = shallowRef<Array<SFComp>>([]);
 const showItems = computed<Array<ShowItemEnum>>({
   get: () => homeStore.getShowItems(),
   set: (v: Array<ShowItemEnum>) => homeStore.setShowItems(v),
 });
-const loadItems = shallowRef<Array<ShowItemEnum>>([]);
-const components = shallowRef<Array<SFComp>>([]);
-
-const gameSelectList = TGConstant.BBS.CHANNELS;
-const curGid = ref<string>(gameSelectList[0].gid);
 
 onMounted(async () => {
   // @ts-expect-error-next-line The import.meta meta-property is not allowed in files which will build into CommonJS output.
@@ -179,4 +207,38 @@ async function loadEnd(item: SFComp): Promise<void> {
   background: var(--tgc-btn-1);
   color: var(--btn-text);
 }
+
+.select-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+
+  &.main {
+    position: relative;
+    height: 24px;
+    font-family: var(--font-title);
+    font-size: 16px;
+  }
+
+  &.sub {
+    padding: 8px;
+    font-family: var(--font-title);
+    font-size: 16px;
+
+    &:hover {
+      background: var(--common-shadow-2);
+    }
+
+    &.selected:not(:hover) {
+      background: var(--common-shadow-1);
+    }
+  }
+
+  .icon {
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+  }
+}
 </style>

src/pages/common/PostForum.vue

@@ -29,7 +29,11 @@
           </div>
         </template>
         <template #item="{ props, item }">
-          <div v-bind="props" class="select-item sub">
+          <div
+            v-bind="props"
+            class="select-item sub"
+            :class="{ selected: item.raw.gid === curGid }"
+          >
             <img v-if="item.raw.icon" :src="item.raw.icon" :alt="item.raw.text" class="icon" />
             <span>{{ item.raw.text }}</span>
           </div>
@@ -55,7 +59,12 @@
           </div>
         </template>
         <template #item="{ props, item }">
-          <div v-bind="props" class="select-item sub" @click="selectedForum = item.raw">
+          <div
+            v-bind="props"
+            class="select-item sub"
+            @click="selectedForum = item.raw"
+            :class="{ selected: item.raw.value === selectedForum.value }"
+          >
             <TMiImg :src="item.raw.icon" :alt="item.raw.text" :ori="true" class="icon" />
             <span>{{ item.raw.text }}</span>
           </div>
@@ -116,8 +125,7 @@ import { useRoute } from "vue-router";
 
 import TGLogger from "@/utils/TGLogger.js";
 import { createPost } from "@/utils/TGWindow.js";
-import { getGameName } from "@/utils/toolFunc.js";
-import { CHANNEL_LIST } from "@/web/constant/bbs.js";
+import { getGameIcon, getGameName } from "@/utils/toolFunc.js";
 import ApiHubReq from "@/web/request/apiHubReq.js";
 
 type SortSelect = { text: string; value: number; icon: string };
@@ -187,10 +195,9 @@ async function loadForums(): Promise<void> {
   const allForums = await ApiHubReq.forum();
   const gameList: Array<SortSelectGame> = [];
   for (const gameForum of allForums) {
-    const miniFind = CHANNEL_LIST.find((i) => i.gid === gameForum.game_id.toString())?.mini;
     const gameItem: SortSelectGame = {
       gid: gameForum.game_id,
-      icon: miniFind ? `/platforms/mhy/${miniFind}.webp` : undefined,
+      icon: getGameIcon(gameForum.game_id),
       forum: gameForum.forums
         .sort((a, b) => a.order - b.order)
         .map((i) => ({ text: i.name, value: i.id, icon: i.icon_pure })),
@@ -388,9 +395,12 @@ function searchPost(): void {
     font-size: 16px;
 
     &:hover {
-      border-radius: 5px;
       background: var(--common-shadow-2);
     }
+
+    &.selected:not(:hover) {
+      background: var(--common-shadow-1);
+    }
   }
 
   .icon {

src/pages/common/PostTopic.vue

@@ -21,7 +21,32 @@
         :item-value="(item) => item"
         variant="outlined"
         label="分区"
-      />
+      >
+        <template #selection="{ item }">
+          <div class="select-item main">
+            <img
+              v-if="getGameIcon(item.raw.id)"
+              :src="getGameIcon(item.raw.id)"
+              :alt="item.raw.name"
+              :title="item.raw.name"
+              class="icon"
+            />
+            <span>{{ item.raw.name }}</span>
+          </div>
+        </template>
+        <template #item="{ props, item }">
+          <div v-bind="props" class="select-item sub" :class="{ selected: item.raw.id === curGid }">
+            <img
+              v-if="getGameIcon(item.raw.id)"
+              :src="getGameIcon(item.raw.id)"
+              :alt="item.raw.name"
+              :title="item.raw.name"
+              class="icon"
+            />
+            <span>{{ item.raw.name }}</span>
+          </div>
+        </template>
+      </v-select>
       <v-select
         v-model="curSortType"
         class="post-switch-item"
@@ -70,6 +95,7 @@ import { computed, onMounted, ref, shallowRef, watch } from "vue";
 import { useRoute } from "vue-router";
 
 import { createPost } from "@/utils/TGWindow.js";
+import { getGameIcon } from "@/utils/toolFunc.js";
 
 type SortSelect = { text: string; value: number };
 type PostMiniData = { isLast: boolean; lastId: string; total: number };
@@ -266,4 +292,38 @@ function searchPost(): void {
   font-family: var(--font-title);
   transition: all 0.3s linear;
 }
+
+.select-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+
+  &.main {
+    position: relative;
+    height: 24px;
+    font-family: var(--font-title);
+    font-size: 16px;
+  }
+
+  &.sub {
+    padding: 8px;
+    font-family: var(--font-title);
+    font-size: 16px;
+
+    &:hover {
+      background: var(--common-shadow-2);
+    }
+
+    &.selected:not(:hover) {
+      background: var(--common-shadow-1);
+    }
+  }
+
+  .icon {
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+  }
+}
 </style>

src/utils/toolFunc.ts

@@ -295,6 +295,17 @@ export function getGameId(mini: string): string {
   return game ? game.gid : "0";
 }
 
+/**
+ * @description 根据id获取游戏图标
+ * @since Beta v0.6.8
+ * @param {number|string} gid
+ * @returns {string|undefined}
+ */
+export function getGameIcon(gid: number | string): string | undefined {
+  const game = TGConstant.BBS.CHANNELS.find((item) => item.gid === gid.toString());
+  return game ? game.icon : undefined;
+}
+
 /**
  * @description 根据id获取对应角色/武器数据
  * @since Beta v0.6.8