♻️ 部分分区动态获取，重构部分调用

src/pages/common/PageHome.vue

@@ -5,10 +5,9 @@
         <v-select
           v-model="curGid"
           class="home-tool-select"
-          :items="gameSelectList"
-          item-title="title"
-          item-value="gid"
+          :items="gameList"
           :hide-details="true"
+          item-value="gid"
           variant="outlined"
           label="分区"
         >
@@ -27,7 +26,7 @@
             <div
               v-bind="props"
               class="select-item sub"
-              :class="{ selected: item.raw.gid === curGid }"
+              :class="item.raw.gid === curGid ? 'selected' : ''"
             >
               <img
                 :src="item.raw.icon"
@@ -39,7 +38,7 @@
             </div>
           </template>
         </v-select>
-        <TGameNav :model-value="Number(curGid)" />
+        <TGameNav :model-value="curGid" />
       </div>
       <div class="home-select">
         <v-select
@@ -70,7 +69,7 @@ import { type Component, computed, onMounted, ref, shallowRef, watch } from "vue
 import { useAppStore } from "@/store/modules/app.js";
 import { ShowItemEnum, useHomeStore } from "@/store/modules/home.js";
 import TGLogger from "@/utils/TGLogger.js";
-import TGConstant from "@/web/constant/TGConstant.js";
+import apiHubReq from "@/web/request/apiHubReq.js";
 
 type SFComp = Component & {
   __file?: string;
@@ -78,6 +77,7 @@ type SFComp = Component & {
   __name?: string;
   __scopeId?: string;
 };
+type SelectItem = { icon: string; title: string; gid: number };
 
 const { devMode, isLogin } = storeToRefs(useAppStore());
 const homeStore = useHomeStore();
@@ -88,8 +88,8 @@ const showItemsAll: Array<ShowItemEnum> = [
   ShowItemEnum.position,
 ];
 
-const gameSelectList = TGConstant.BBS.CHANNELS;
-const curGid = ref<string>(gameSelectList[0].gid);
+const curGid = ref<number>(2);
+const gameList = shallowRef<Array<SelectItem>>();
 
 const loadItems = shallowRef<Array<ShowItemEnum>>([]);
 const components = shallowRef<Array<SFComp>>([]);
@@ -102,6 +102,11 @@ onMounted(async () => {
   // @ts-expect-error-next-line The import.meta meta-property is not allowed in files which will build into CommonJS output.
   const isProdEnv = import.meta.env.MODE === "production";
   if (isProdEnv && devMode.value) devMode.value = false;
+  if (isLogin.value) {
+    await showLoading.start("正在加载首页小部件");
+    const allGames = await apiHubReq.game();
+    gameList.value = allGames.map((i) => ({ icon: i.app_icon, title: i.name, gid: i.id }));
+  }
   await loadComp();
 });
 
@@ -190,8 +195,8 @@ async function loadEnd(item: SFComp): Promise<void> {
 }
 
 .home-tool-select {
-  width: 200px;
-  max-width: 200px;
+  width: 250px;
+  max-width: 250px;
 }
 
 .home-select {

src/pages/common/PostForum.vue

@@ -18,9 +18,10 @@
       >
         <template #selection="{ item }">
           <div class="select-item main">
-            <img
+            <TMiImg
               v-if="item.raw.icon"
               :src="item.raw.icon"
+              :ori="true"
               :alt="item.raw.text"
               :title="item.raw.text"
               class="icon"
@@ -34,7 +35,13 @@
             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" />
+            <TMiImg
+              v-if="item.raw.icon"
+              :src="item.raw.icon"
+              :alt="item.raw.text"
+              class="icon"
+              :ori="true"
+            />
             <span>{{ item.raw.text }}</span>
           </div>
         </template>
@@ -126,7 +133,6 @@ import { useRoute, useRouter } from "vue-router";
 
 import TGLogger from "@/utils/TGLogger.js";
 import { createPost } from "@/utils/TGWindow.js";
-import { getGameIcon, getGameName } from "@/utils/toolFunc.js";
 import ApiHubReq from "@/web/request/apiHubReq.js";
 
 type SortSelect = { text: string; value: number; icon: string };
@@ -198,16 +204,19 @@ watch(
 
 // 初始化
 async function loadForums(): Promise<void> {
+  const allGames = await ApiHubReq.game();
   const allForums = await ApiHubReq.forum();
   const gameList: Array<SortSelectGame> = [];
   for (const gameForum of allForums) {
+    const gameFind = allGames.find((i) => i.id === gameForum.game_id);
+    if (!gameFind) continue;
     const gameItem: SortSelectGame = {
       gid: gameForum.game_id,
-      icon: getGameIcon(gameForum.game_id),
+      icon: gameFind.app_icon,
       forum: gameForum.forums
         .sort((a, b) => a.order - b.order)
         .map((i) => ({ text: i.name, value: i.id, icon: i.icon_pure })),
-      text: getGameName(gameForum.game_id),
+      text: gameFind.name,
     };
     gameList.push(gameItem);
   }

src/pages/common/PostNews.vue

@@ -68,9 +68,9 @@ import { computed, onMounted, reactive, ref, shallowRef } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import { type NewsType, NewsTypeEnum, useAppStore } from "@/store/modules/app.js";
+import TGBbs from "@/utils/TGBbs.js";
 import TGLogger from "@/utils/TGLogger.js";
 import { createPost } from "@/utils/TGWindow.js";
-import { getGameName } from "@/utils/toolFunc.js";
 
 type PostData = { [key in NewsType]: Ref<Array<TGApp.Plugins.Mys.Post.FullData>> };
 type RawItem = { isLast: boolean; name: string; lastId: number };
@@ -78,9 +78,11 @@ type RawData = { [key in NewsType]: Ref<RawItem> };
 
 const router = useRouter();
 const { recentNewsType } = storeToRefs(useAppStore());
-const tabValues: Readonly<Array<NewsType>> = ["notice", "activity", "news"];
 const { gid } = <{ gid: string }>useRoute().params;
-const gameName = getGameName(Number(gid));
+
+const tabValues: Readonly<Array<NewsType>> = ["notice", "activity", "news"];
+const gameName = TGBbs.channels.find((v) => v.gid.toString() === gid)?.title || "未知分区";
+
 const loading = ref<boolean>(false);
 const showList = ref<boolean>(false);
 const showSearch = ref<boolean>(false);

src/pages/common/PostTopic.vue

@@ -16,7 +16,7 @@
       <v-select
         v-model="curGame"
         class="post-switch-item"
-        :items="topicInfo?.game_info_list"
+        :items="getGameList(topicInfo?.game_info_list)"
         item-title="name"
         :item-value="(item) => item"
         variant="outlined"
@@ -25,8 +25,8 @@
         <template #selection="{ item }">
           <div class="select-item main">
             <img
-              v-if="getGameIcon(item.raw.id)"
-              :src="getGameIcon(item.raw.id)"
+              v-if="item.raw.icon"
+              :src="item.raw.icon"
               :alt="item.raw.name"
               :title="item.raw.name"
               class="icon"
@@ -37,8 +37,8 @@
         <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)"
+              v-if="item.raw.icon"
+              :src="item.raw.icon"
               :alt="item.raw.name"
               :title="item.raw.name"
               class="icon"
@@ -95,10 +95,11 @@ import { computed, onMounted, ref, shallowRef, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import { createPost } from "@/utils/TGWindow.js";
-import { getGameIcon } from "@/utils/toolFunc.js";
+import apiHubReq from "@/web/request/apiHubReq.js";
 
 type SortSelect = { text: string; value: number };
 type PostMiniData = { isLast: boolean; lastId: string; total: number };
+type GameList = TGApp.Plugins.Mys.Topic.GameInfo & { icon?: string };
 
 const route = useRoute();
 const router = useRouter();
@@ -107,10 +108,11 @@ const curGid = ref<number>(0);
 const curSortType = ref<0 | 1 | 2>(0);
 const search = ref<string>("");
 const curTopic = ref<string>("");
+const allGames = shallowRef<Array<TGApp.BBS.Game.Item>>([]);
 const postRaw = shallowRef<PostMiniData>({ isLast: false, lastId: "", total: 0 });
 const topicInfo = shallowRef<TGApp.Plugins.Mys.Topic.InfoData>();
 const posts = shallowRef<Array<TGApp.Plugins.Mys.Post.FullData>>([]);
-const curGame = shallowRef<TGApp.Plugins.Mys.Topic.GameInfo>();
+const curGame = shallowRef<GameList>();
 const sortList = computed<Array<SortSelect>>(() => {
   if (!topicInfo.value) return [];
   if (!topicInfo.value.good_post_exist) {
@@ -135,6 +137,7 @@ onMounted(async () => {
   curGid.value = Number(gid);
   curTopic.value = topic;
   await showLoading.start(`正在加载话题${topic}信息`);
+  allGames.value = await apiHubReq.game();
   const info = await Mys.Post.getTopicFullInfo(gid, topic);
   if ("retcode" in info) {
     await showLoading.end();
@@ -142,10 +145,13 @@ onMounted(async () => {
     return;
   }
   topicInfo.value = info;
+  let tmpGame: GameList | undefined;
   if (curGame.value === undefined) {
-    curGame.value = info.game_info_list.find((i) => i.id === curGid.value);
+    tmpGame = info.game_info_list.find((i) => i.id === curGid.value);
   }
-  if (curGame.value === undefined) curGame.value = info.game_info_list[0];
+  if (tmpGame === undefined) tmpGame = info.game_info_list[0];
+  const gameFind = allGames.value.find((i) => i.id === tmpGame?.id);
+  curGame.value = { ...tmpGame, icon: gameFind?.app_icon };
   await firstLoad();
 });
 
@@ -226,6 +232,14 @@ function searchPost(): void {
   if (isNaN(numCheck)) showSearch.value = true;
   else createPost(search.value);
 }
+
+function getGameList(gameList: TGApp.Plugins.Mys.Topic.GameInfo[] | undefined): GameList[] {
+  if (!gameList) return [];
+  return gameList.map((item) => {
+    const game = allGames.value.find((i) => i.id === item.id);
+    return { ...item, icon: game?.app_icon };
+  });
+}
 </script>
 <style lang="css" scoped>
 .post-topic-top {
@@ -337,7 +351,6 @@ function searchPost(): void {
   .icon {
     width: 28px;
     height: 28px;
-    border-radius: 4px;
   }
 }
 </style>