✨ 动态处理游戏卡片组件

src/components/viewPost/tp-uid.vue

@@ -2,10 +2,10 @@
   <div class="tpu-box">
     <div class="tpu-top">
       <span @click="copyUid()" data-html2canvas-ignore>
-        <v-icon>mdi-content-copy</v-icon>
+        <v-icon size="12">mdi-content-copy</v-icon>
         <span>复制</span>
       </span>
-      <span class="tpu-game">{{ getGameName() }}</span>
+      <span class="tpu-game">{{ gameInfo?.name ?? "未知游戏" }}</span>
     </div>
     <div class="tpu-main">UID {{ props.data.insert.game_user_info.game_uid }}</div>
     <div class="tpu-sub">
@@ -19,7 +19,9 @@
 </template>
 <script lang="ts" setup>
 import showSnackbar from "@comp/func/snackbar.js";
-import { computed } from "vue";
+import useBBSStore from "@store/bbs.js";
+import { storeToRefs } from "pinia";
+import { onMounted, ref, shallowRef } from "vue";
 
 type TpUid = {
   insert: {
@@ -35,57 +37,68 @@ type TpUid = {
 };
 type TpUidProps = { data: TpUid };
 
+const { gameUidCards, gameList } = storeToRefs(useBBSStore());
+
+const defaultCard: TGApp.BBS.AppConfig.GameUidCardConf = {
+  main_text_color: "#a17a58ff",
+  is_open: true,
+  background_color: "#ffffff",
+  image_url: "/source/post/tp_uid_bg.webp",
+};
+
 const props = defineProps<TpUidProps>();
-const nickname = computed<string>(() =>
-  decodeURIComponent(props.data.insert.game_user_info.nickname),
-);
+const nickname = ref<string>();
+const gameInfo = shallowRef<TGApp.BBS.Game.Item>();
+const cardInfo = shallowRef<TGApp.BBS.AppConfig.GameUidCardConf>(defaultCard);
+
 console.log("tpUid", props.data.insert.game_user_info);
 
-function copyUid(): void {
-  navigator.clipboard.writeText(props.data.insert.game_user_info.game_uid);
+onMounted(async () => {
+  nickname.value = decodeURIComponent(props.data.insert.game_user_info.nickname);
+  gameInfo.value = getGameInfo();
+  if (gameInfo.value) cardInfo.value = gameUidCards.value[gameInfo.value.id] ?? defaultCard;
+});
+
+async function copyUid(): Promise<void> {
+  await navigator.clipboard.writeText(props.data.insert.game_user_info.game_uid);
   showSnackbar.success("已复制UID");
 }
 
-function getGameName(): string {
-  const gameBiz = props.data.insert.game_user_info.game_biz;
-  if (gameBiz.startsWith("hkrpg")) return "崩坏·星穹铁道";
-  if (gameBiz.startsWith("hk4e")) return "原神";
-  if (gameBiz.startsWith("nap")) return "绝区零";
-  if (gameBiz.startsWith("bh2")) return "崩坏学园2";
-  if (gameBiz.startsWith("bh3")) return "崩坏3";
-  if (gameBiz.startsWith("nxx")) return "未定事件簿";
-  return "未知游戏";
+function getGameInfo(): TGApp.BBS.Game.Item | undefined {
+  const enName = props.data.insert.game_user_info.game_biz.split("_")[0];
+  if (!enName) return undefined;
+  return gameList.value.find((g) => g.op_name === enName);
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .tpu-box {
   position: relative;
   display: flex;
   max-width: 100%;
+  box-sizing: border-box;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  padding: 5px;
-  border: 1px solid var(--common-shadow-2);
-  border-radius: 3px;
-  background-color: #f4efe9ff;
-  background-image: url("/source/post/tp_uid_bg.webp");
+  padding: 4px 4px 8px;
+  border-radius: 2px;
+  background-color: v-bind("cardInfo.background_color");
+  background-image: v-bind("'url(' + cardInfo.image_url + ')'");
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: contain;
-  color: #a17a58ff;
+  color: v-bind("cardInfo.main_text_color");
 }
 
 .tpu-top {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
   margin-left: auto;
-  column-gap: 5px;
+  column-gap: 4px;
+  font-size: 12px;
 
   :first-child {
     cursor: pointer;
-    font-size: 12px;
   }
 }
 
@@ -93,27 +106,28 @@ function getGameName(): string {
   display: flex;
   align-items: center;
   justify-content: center;
-  column-gap: 5px;
   font-family: var(--font-title);
   font-size: 16px;
 }
 
 .tpu-sub {
+  position: relative;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
   column-gap: 2px;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .tpu-game {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 5px;
-  border: 1px solid #a17a584d;
-  border-radius: 3px;
-  font-size: 12px;
-  opacity: 0.7;
+  padding: 0 2px;
+  border: 1px solid v-bind("cardInfo.main_text_color");
+  border-radius: 2px;
+  font-size: 10px;
+  opacity: 0.75;
 }
 </style>

src/pages/common/PageHome.vue

@@ -97,6 +97,7 @@ const showItems = computed<Array<string>>({
 
 onMounted(async () => {
   await bbsStore.refreshGameList();
+  await bbsStore.refreshGameUidCards();
   // @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;

src/request/apiHubReq.ts

@@ -1,7 +1,7 @@
 /**
  * @file request/apiHubReq.ts
  * @description apiHub下的请求
- * @since Beta v0.7.2
+ * @since Beta v0.8.2
  */
 
 import { getRequestHeader } from "@utils/getRequestHeader.js";
@@ -25,6 +25,25 @@ async function getAllGamesForums(): Promise<Array<TGApp.BBS.Forum.GameForum>> {
   ).data.list;
 }
 
+/**
+ * @description 获取应用配置
+ * @since Beta v0.8.2
+ * @param {string} gid 分区ID
+ * @return {Promise<TGApp.BBS.AppConfig.FullData|TGApp.BBS.Response.Base>}
+ */
+async function getAppConfig(
+  gid?: string,
+): Promise<TGApp.BBS.AppConfig.FullData | TGApp.BBS.Response.Base> {
+  let url = `${Mahbu}api/getAppConfig`;
+  if (gid) url += `?gid=${gid}`;
+  const resp = await TGHttp<TGApp.BBS.AppConfig.Resp | TGApp.BBS.Response.Base>(url, {
+    method: "GET",
+    headers: { "Content-Type": "application/json", referer: Referer },
+  });
+  if (resp.retcode === 0) return resp.data.config;
+  return <TGApp.BBS.Response.Base>resp;
+}
+
 /**
  * @description 获取所有分区
  * @since Beta v0.6.8
@@ -202,6 +221,7 @@ async function upVotePost(
 
 const apiHubReq = {
   vote: { info: getVotes, result: getVoteResult },
+  appConfig: getAppConfig,
   home: homeNew,
   forum: getAllGamesForums,
   game: getGameList,

src/store/modules/bbs.ts

@@ -1,7 +1,7 @@
 /**
  * @file store/modules/bbs.ts
  * @description BBS 模块状态管理
- * @since Beta v0.7.3
+ * @since Beta v0.8.2
  */
 import apiHubReq from "@req/apiHubReq.js";
 import { defineStore } from "pinia";
@@ -12,13 +12,23 @@ const useBBSStore = defineStore(
   () => {
     // 游戏列表
     const gameList = shallowRef<Array<TGApp.BBS.Game.Item>>([]);
+    // 游戏卡片配置项
+    const gameUidCards = shallowRef<Record<string, TGApp.BBS.AppConfig.GameUidCardConf>>({});
 
     // 刷新游戏列表
     async function refreshGameList(): Promise<void> {
       gameList.value = await apiHubReq.game();
     }
 
-    return { gameList, refreshGameList };
+    // 刷新游戏卡片配置项
+    async function refreshGameUidCards(): Promise<void> {
+      const resp = await apiHubReq.appConfig();
+      if ("retcode" in resp) return;
+      const conf = <TGApp.BBS.AppConfig.GameUidCardFullConf>JSON.parse(resp.game_uid_card_config);
+      gameUidCards.value = conf.game_uid_card_conf;
+    }
+
+    return { gameList, refreshGameList, gameUidCards, refreshGameUidCards };
   },
   { persist: true },
 );

src/types/BBS/AppConfig.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @file types/BBS/AppConfig.d.ts
+ * @description 米游社应用配置类型
+ * @since Beta v0.8.2
+ */
+
+declare namespace TGApp.BBS.AppConfig {
+  /**
+   * @description 应用配置返回响应
+   * @since Beta v0.8.2
+   * @interface Resp
+   * @extends TGApp.BBS.Response.BaseWithData
+   * @property {FullRes} data 应用配置数据
+   */
+  type Resp = TGApp.BBS.Response.BaseWithData<FullRes>;
+
+  /**
+   * @description 应用配置数据
+   * @since Beta v0.8.2
+   * @interface FullRes
+   * @property {FullData} config 应用配置
+   */
+  type FullRes = { config: FullData };
+
+  /**
+   * @description 应用配置
+   * @since Beta v0.8.2
+   * @interface FullData
+   * @todo 只写了用到的部分
+   * @property {string} game_uid_card_config 游戏 UID 卡片配置（序列化的 JSON 字符串）
+   */
+  type FullData = { game_uid_card_config: string };
+
+  /**
+   * @description 游戏 UID 卡片配置-整体
+   * @since Beta v0.8.2
+   * @interface GameUidCardFullConf
+   * @property {Record<string, GameUidCardConf>} game_uid_card_conf 游戏 UID 卡片配置项，键为游戏 ID
+   */
+  type GameUidCardFullConf = { game_uid_card_conf: Record<string, GameUidCardConf> };
+
+  /**
+   * @description 游戏 UID 卡片配置-单个配置项
+   * @since Beta v0.8.2
+   * @interface GameUidCardConf
+   * @property {string} main_text_color 主文本颜色
+   * @property {boolean} is_open 是否开启
+   * @property {string} background_color 背景颜色
+   * @property {string} image_url 图片 URL
+   */
+  type GameUidCardConf = {
+    main_text_color: string;
+    is_open: boolean;
+    background_color: string;
+    image_url: string;
+  };
+}