♻️ 移除留影叙佳期，重构卡池组件

src/components/home/t-calendar.vue

@@ -5,18 +5,6 @@
         <v-icon size="small" style="opacity: 0.8">mdi-calendar-clock</v-icon>
         <span>今日素材</span>
         <span>{{ dateNow }}</span>
-        <!-- 如果是某人生日，礼物图标颜色为红色 -->
-        <span
-          v-if="birthInfo.isLogin"
-          @click="toBirthday"
-          class="calendar-title-gift"
-          :style="{
-            color: birthInfo.active ? 'var(--tgc-red-1)' : 'inherit',
-          }"
-          :title="birthInfo.text"
-        >
-          <v-icon size="small">mdi-gift</v-icon>
-        </span>
       </div>
       <div class="calendar-title-mid">
         <v-btn
@@ -76,9 +64,6 @@
 import { computed, onMounted, ref } from "vue";
 
 import { AppCalendarData } from "../../data";
-import TGSqlite from "../../plugins/Sqlite";
-import { useAppStore } from "../../store/modules/app";
-import TGClient from "../../utils/TGClient";
 import { generateShareImg } from "../../utils/TGShare";
 import TibCalendarItem from "../itembox/tib-calendar-item.vue";
 import ToCalendar from "../overlay/to-calendar.vue";
@@ -100,13 +85,6 @@ const switchType = ref<string>("avatar");
 const selectedItem = ref<TGApp.App.Calendar.Item>(<TGApp.App.Calendar.Item>{});
 const selectedType = ref<"avatar" | "weapon">("avatar");
 
-// birthday
-const birthInfo = ref({
-  isLogin: true,
-  active: false,
-  text: "点击前往留影叙佳期",
-});
-
 const btnText = [
   {
     week: 7,
@@ -147,16 +125,6 @@ interface TCalendarEmits {
 const emits = defineEmits<TCalendarEmits>();
 
 onMounted(async () => {
-  const appStore = useAppStore();
-  if (appStore.isLogin) {
-    const birthRes = await TGSqlite.isBirthday();
-    if (birthRes !== false) {
-      birthInfo.value.active = true;
-      birthInfo.value.text = `今天是 ${birthRes} 的生日！`;
-    }
-  } else {
-    birthInfo.value.isLogin = false;
-  }
   const dayNow = new Date().getDay() === 0 ? 7 : new Date().getDay();
   const week = <{ week: number; text: string }>btnText.find((item) => item.week === dayNow);
   dateNow.value =
@@ -207,11 +175,6 @@ async function share(): Promise<void> {
   await generateShareImg(title, div);
   emits("loadOuter", { show: false });
 }
-
-// 前往留影叙佳期
-async function toBirthday(): Promise<void> {
-  await TGClient.open("birthday");
-}
 </script>
 <style lang="css" scoped>
 .calendar-box {

src/components/home/t-pool.vue

@@ -28,9 +28,14 @@
                 v-for="character in pool.characters"
                 :key="character.url"
                 class="pool-icon"
-                @click="toOuter(character.url, pool.title)"
+                @click="toOuter(character, pool.title)"
               >
-                <img :src="character.icon" alt="character" />
+                <TItembox
+                  :title="character.info.name"
+                  v-if="character.info"
+                  :model-value="getCBox(character.info)"
+                />
+                <img v-else :src="character.icon" alt="character" />
               </div>
             </div>
           </div>
@@ -66,6 +71,7 @@ import { useHomeStore } from "../../store/modules/home";
 import { createPost, createTGWindow } from "../../utils/TGWindow";
 import { stamp2LastTime } from "../../utils/toolFunc";
 import showSnackbar from "../func/snackbar";
+import TItembox, { TItemBoxData } from "../main/t-itembox.vue";
 
 // store
 const homeStore = useHomeStore();
@@ -119,9 +125,9 @@ onMounted(async () => {
   console.info(gachaData);
   if (!checkCover(gachaData)) {
     poolCards.value = await Mys.Gacha.card(gachaData);
-    const coverData: Record<number, string> = {};
+    const coverData: Record<string, string> = {};
     poolCards.value.map((pool) => {
-      coverData[pool.postId] = pool.cover;
+      coverData[pool.id] = pool.cover;
       return pool;
     });
     homeStore.poolCover = coverData;
@@ -160,54 +166,61 @@ onMounted(async () => {
 
 // 检测新卡池
 function checkCover(data: TGApp.Plugins.Mys.Gacha.Data[]): boolean {
-  // 如果没有缓存
   if (!homeStore.poolCover || Object.keys(homeStore.poolCover).length === 0) {
     return false;
   }
-  // 获取缓存
-  const cover = homeStore.poolCover satisfies Record<number, string>;
-  if (cover === undefined) {
-    return false;
-  }
-  return data.every((item) => {
-    const postId = item.activity_url.split("/").pop();
-    if (!postId || isNaN(Number(postId))) {
-      return false;
-    }
-    if (!Object.keys(cover).includes(postId)) {
-      return false;
-    } else {
-      const coverUrl = Object.keys(cover).find((key) => key === postId);
-      return coverUrl !== "/source/UI/empty.webp";
+  const cover = homeStore.poolCover;
+  if (cover === undefined) return false;
+  let checkList = data.length;
+  Object.entries(cover).forEach(([key, value]) => {
+    const pool = data.find((item) => item.id.toString() === key);
+    if (pool && value !== "/source/UI/empty.webp") {
+      checkList--;
     }
   });
+  return checkList === 0;
 }
 
-async function toOuter(url: string, title: string): Promise<void> {
-  if (!url) {
+async function toOuter(
+  character: TGApp.Plugins.Mys.Gacha.RenderItem,
+  title: string,
+): Promise<void> {
+  if (character.info !== undefined) {
+    await router.push({
+      name: "角色图鉴",
+      params: {
+        id: character.info.id,
+      },
+    });
+    return;
+  }
+  const url = character.url;
+  if (url === "") {
     showSnackbar({
       text: "链接为空!",
       color: "error",
     });
     return;
   }
-  // https://bbs.mihoyo.com/ys/obc/content/{content_id}/detail?bbs_presentation_style=no_header
-  const contentId = url.match(/(?<=content\/)\d+/)?.[0];
-  if (contentId) {
-    const character = AppCharacterData.find((item) => item.contentId.toString() === contentId);
-    if (character) {
-      await router.push({
-        name: "角色图鉴",
-        params: {
-          id: character.id,
-        },
-      });
-      return;
-    }
-  }
   createTGWindow(url, "Sub_window", `Pool_${title}`, 1200, 800, true, true);
 }
 
+function getCBox(info: TGApp.App.Character.WikiBriefInfo): TItemBoxData {
+  return {
+    bg: `/icon/bg/${info.star}-Star.webp`,
+    icon: `/WIKI/character/${info.id}.webp`,
+    size: "60px",
+    height: "60px",
+    display: "inner",
+    clickable: true,
+    lt: `/icon/element/${info.element}元素.webp`,
+    ltSize: "25px",
+    innerHeight: 20,
+    innerIcon: `/icon/weapon/${info.weapon}.webp`,
+    innerText: info.name,
+  };
+}
+
 // 更换显示的卡池
 async function switchPool(): Promise<void> {
   showNew.value = !showNew.value;
@@ -345,11 +358,8 @@ onUnmounted(() => {
 }
 
 .pool-icon {
-  width: 60px;
-  height: 60px;
-  border: 1px solid var(--tgc-white-1);
-  border-radius: 8px;
-  box-shadow: 0 0 5px rgb(0 0 0/20%);
+  max-width: 60px;
+  max-height: 60px;
   transition: all ease-in-out 0.3s;
 }
 

src/pages/common/Home.vue

@@ -10,7 +10,7 @@
         :multiple="true"
         :chips="true"
       />
-      <v-btn class="select-btn" @click="submitHome">确定</v-btn>
+      <v-btn class="select-btn" @click="submitHome" rounded>确定</v-btn>
     </div>
     <component
       :is="item"
@@ -125,7 +125,7 @@ onUnmounted(() => {
 <style lang="css" scoped>
 .home-select {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 10px;
 }
@@ -133,8 +133,6 @@ onUnmounted(() => {
 .select-btn {
   width: 100px;
   height: 40px;
-  border-radius: 10px;
-  margin-top: 8px;
   background: var(--tgc-btn-1);
   color: var(--btn-text);
 }

src/plugins/Mys/index.ts

@@ -1,7 +1,7 @@
 /**
  * @file plugins/Mys/index.ts
  * @description Mys plugin index
- * @since Beta v0.3.9
+ * @since Beta v0.4.4
  */
 
 import MysApi from "./api";
@@ -15,7 +15,7 @@ import getNewsList from "./request/getNewsList";
 import getPositionData from "./request/getPositionData";
 import getPostData from "./request/getPostData";
 import { getVoteInfo, getVoteResult } from "./request/getVoteData";
-import getGachaCard from "./utils/getGachaCard";
+import { getGachaCard } from "./utils/getGachaCard";
 import getLotteryCard from "./utils/getLotteryCard";
 import { getActivityCard, getNewsCard, getNoticeCard } from "./utils/getNewsCard";
 import getPositionCard from "./utils/getPositionCard";

src/plugins/Mys/types/Gacha.d.ts

@@ -1,12 +1,12 @@
 /**
  * @file plugins/Mys/types/Gacha.d.ts
  * @description Mys 插件卡池类型定义文件
- * @since Beta v0.3.3
+ * @since Beta v0.4.4
  */
 
 /**
  * @description Mys 卡池类型定义
- * @since Beta v0.3.3
+ * @since Beta v0.4.4
  * @namespace TGApp.Plugins.Mys.Gacha
  * @memberof TGApp.Plugins.Mys
  */
@@ -27,13 +27,13 @@ declare namespace TGApp.Plugins.Mys.Gacha {
 
   /**
    * @description 卡池信息
-   * @since Alpha v0.2.1
+   * @since Beta v0.4.4
    * @interface Data
    * @property {string} id 卡池ID
    * @property {string} title 卡池标题
    * @property {string} activity_url 卡池对应帖子
    * @property {string} content_before_act 卡池内容
-   * @property {MiniItem[]} pool 卡池包含的角色
+   * @property {Array<{icon: string; url: string}>} pool 卡池角色头像
    * @property {string} voice_icon 卡池角色语音头像
    * @property {string} voice_url 卡池角色语音URL
    * @property {string} voice_status 卡池角色语音状态
@@ -43,11 +43,14 @@ declare namespace TGApp.Plugins.Mys.Gacha {
    * @return Data
    */
   interface Data {
-    id: string;
+    id: number;
     title: string;
     activity_url: string;
     content_before_act: string;
-    pool: MiniItem[];
+    pool: Array<{
+      icon: string;
+      url: string;
+    }>;
     voice_icon: string;
     voice_url: string;
     voice_status: string;
@@ -55,45 +58,47 @@ declare namespace TGApp.Plugins.Mys.Gacha {
     end_time: string;
   }
 
-  /**
-   * @description 基本信息
-   * @since Alpha v0.2.1
-   * @interface MiniItem
-   * @property {string} icon 图标
-   * @property {string} url 链接
-   * @return MiniItem
-   */
-  interface MiniItem {
-    icon: string;
-    url: string;
-  }
-
   /**
    * @description 用于渲染的卡池数据
-   * @since Beta v0.3.3
+   * @since Beta v0.4.4
    * @interface RenderCard
+   * @property {string} id 卡池ID
    * @property {string} title 卡池标题
    * @property {string} subtitle 卡池副标题
    * @property {string} cover 卡池封面
    * @property {number} postId 卡池对应帖子ID
-   * @property {MiniItem[]} characters 卡池包含的角色
-   * @property {MiniItem} voice 卡池角色语音
+   * @property {Array<RenderItem>} characters 卡池角色头像
    * @property {string} time.str 卡池时间字符串
    * @property {string} time.startStamp 卡池开始时间戳
    * @property {string} time.endStamp 卡池结束时间戳
    * @return RenderCard
    */
   interface RenderCard {
+    id: number;
     title: string;
     subtitle: string;
     cover: string;
     postId: number;
-    characters: MiniItem[];
-    voice: MiniItem;
+    characters: RenderItem[];
     time: {
       str: string;
       startStamp: number;
       endStamp: number;
     };
   }
+
+  /**
+   * @description 用于渲染的卡池角色头像
+   * @since Beta v0.4.4
+   * @interface RenderItem
+   * @property {string} icon 角色头像
+   * @property {string} url 角色详情页URL
+   * @property {TGApp.App.Character.WikiBriefInfo} info 角色简略信息
+   * @return RenderItem
+   */
+  interface RenderItem {
+    icon: string;
+    url: string;
+    info?: TGApp.App.Character.WikiBriefInfo;
+  }
 }

src/plugins/Mys/utils/getGachaCard.ts

@@ -1,64 +1,87 @@
 /**
  * @file plugins/Mys/utils/getGachaCard.ts
  * @description Mys 插件抽卡工具
- * @since Beta v0.3.9
+ * @since Beta v0.4.4
  */
 
+import { AppCharacterData } from "../../../data";
 import getPostData from "../request/getPostData";
 
+/**
+ * @description 根据单个卡池信息转为渲染用的卡池信息
+ * @since Beta v0.4.4
+ * @param {TGApp.Plugins.Mys.Gacha.Data} data 卡池信息
+ * @param {string} poolCover 卡池封面
+ * @returns {Promise<TGApp.Plugins.Mys.Gacha.RenderCard>}
+ */
+async function getGachaItemCard(
+  data: TGApp.Plugins.Mys.Gacha.Data,
+  poolCover?: string,
+): Promise<TGApp.Plugins.Mys.Gacha.RenderCard> {
+  let cover = "/source/UI/empty.webp";
+  const postId: number | undefined = Number(data.activity_url.split("/").pop()) || undefined;
+  if (postId === undefined || isNaN(postId)) {
+    throw new Error("无法获取帖子 ID");
+  }
+  if (poolCover !== undefined) {
+    cover = poolCover;
+  } else {
+    try {
+      console.log("调用 getPostData");
+      const post = await getPostData(postId);
+      cover = post.cover?.url ?? post.post.images[0];
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  const timeStr = `${data.start_time} ~ ${data.end_time}`;
+  const characters: TGApp.Plugins.Mys.Gacha.RenderItem[] = [];
+  for (const character of data.pool) {
+    const item: TGApp.Plugins.Mys.Gacha.RenderItem = {
+      icon: character.icon,
+      url: character.url,
+    };
+    const contentId = character.url.match(/(?<=content\/)\d+/)?.[0];
+    if (contentId) {
+      const itemF = AppCharacterData.find((item) => item.contentId.toString() === contentId);
+      if (itemF) {
+        item.info = itemF;
+      }
+    }
+    characters.push(item);
+  }
+  return {
+    id: data.id,
+    title: data.title,
+    subtitle: data.content_before_act,
+    cover,
+    postId,
+    characters,
+    time: {
+      str: timeStr,
+      startStamp: new Date(data.start_time).getTime(),
+      endStamp: new Date(data.end_time).getTime(),
+    },
+  };
+}
+
 /**
  * @description 根据卡池信息转为渲染用的卡池信息
- * @since Beta v0.3.9
+ * @since Beta v0.4.4
  * @param {TGApp.Plugins.Mys.Gacha.Data[]} gachaData 卡池信息
  * @param {Record<number, string>} poolCover 卡池封面
  * @returns {Promise<TGApp.Plugins.Mys.Gacha.RenderCard[]>}
  */
-async function getGachaCard(
+export async function getGachaCard(
   gachaData: TGApp.Plugins.Mys.Gacha.Data[],
   poolCover?: Record<number, string>,
 ): Promise<TGApp.Plugins.Mys.Gacha.RenderCard[]> {
   const gachaCard: TGApp.Plugins.Mys.Gacha.RenderCard[] = [];
   await Promise.allSettled(
     gachaData.map(async (data: TGApp.Plugins.Mys.Gacha.Data) => {
-      let cover = "/source/UI/empty.webp";
-      const postId: number | undefined = Number(data.activity_url.split("/").pop()) || undefined;
-      if (postId === undefined || isNaN(postId)) {
-        throw new Error("无法获取帖子 ID");
-      }
-      if (poolCover !== undefined) {
-        cover = poolCover[postId];
-      } else {
-        try {
-          console.log("调用 getPostData");
-          const post = await getPostData(postId);
-          cover = post.cover?.url ?? post.post.images[0];
-        } catch (error) {
-          console.error(error);
-        }
-      }
-      const timeStr = `${data.start_time} ~ ${data.end_time}`;
-      return gachaCard.push({
-        title: data.title,
-        subtitle: data.content_before_act,
-        cover,
-        postId,
-        characters: data.pool.map((character) => ({
-          icon: character.icon,
-          url: character.url,
-        })),
-        voice: {
-          icon: data.voice_icon || "/source/UI/lumine.webp",
-          url: data.voice_url,
-        },
-        time: {
-          str: timeStr,
-          startStamp: new Date(data.start_time).getTime(),
-          endStamp: new Date(data.end_time).getTime(),
-        },
-      });
+      const item = await getGachaItemCard(data, poolCover?.[Number(data.id)]);
+      gachaCard.push(item);
     }),
   );
   return gachaCard;
 }
-
-export default getGachaCard;