💄 当即将切换卡池时提供 switch btn

src/components/home/t-calendar.vue

@@ -25,7 +25,7 @@
       <div class="calendar-title-right">
         <v-switch
           class="calendar-title-switch"
-          color="grey"
+          color="var(--common-shadow-4)"
           variant="outline"
           :label="switchType === 'avatar' ? '角色' : '武器'"
           @change="switchType = switchType === 'avatar' ? 'weapon' : 'avatar'"

src/components/home/t-pool.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="pool-box">
     <div class="pool-title">
-      <img src="../../assets/icons/icon-wish.svg" alt="wish" />
-      限时祈愿
+      <div class="pool-title-left">
+        <img src="../../assets/icons/icon-wish.svg" alt="wish" />
+        <span>限时祈愿</span>
+      </div>
+      <div class="pool-title-right">
+        <v-switch
+          class="pool-switch"
+          color="var(--common-shadow-4)"
+          variant="outline"
+          :label="showNew ? '查看当前祈愿' : '查看后续祈愿'"
+          v-show="hasNew"
+          @change="switchPool"
+        />
+      </div>
     </div>
     <div v-if="!loading" class="pool-grid">
-      <div v-for="pool in poolCards" :key="pool.postId" class="pool-card">
+      <div v-for="pool in poolSelect" :key="pool.postId" class="pool-card">
         <div class="pool-cover" @click="createPost(pool.postId, pool.title)">
           <img :src="pool.cover" alt="cover" />
         </div>
@@ -25,7 +37,7 @@
           <div class="pool-time">
             <div>
               <v-icon>mdi-calendar-clock</v-icon>
-              {{ pool.time.start }}~{{ pool.time.end }}
+              {{ pool.time.str }}
             </div>
             <v-progress-linear :model-value="poolTimePass[pool.postId]" :rounded="true">
             </v-progress-linear>
@@ -65,8 +77,12 @@ const showBar = ref<boolean>(false);
 const barText = ref<string>("");
 const barColor = ref<string>("error");
 
+const hasNew = ref<boolean>(false);
+const showNew = ref<boolean>(false);
+
 // data
 const poolCards = ref<TGApp.Plugins.Mys.Gacha.RenderCard[]>([]);
+const poolSelect = ref<TGApp.Plugins.Mys.Gacha.RenderCard[]>([]);
 const poolTimeGet = ref<Record<number, string>>({});
 const poolTimePass = ref<Record<number, number>>({});
 const timer = ref<Record<number, any>>({});
@@ -124,6 +140,7 @@ onMounted(async () => {
     if (poolTimePass.value[pool.postId] <= 0) {
       poolTimeGet.value[pool.postId] = "已结束";
       poolTimePass.value[pool.postId] = 100;
+      showNew.value = false;
     } else if (pool.time.startStamp - Date.now() > 0) {
       poolTimeGet.value[pool.postId] = "未开始";
       poolTimePass.value[pool.postId] = 100;
@@ -133,6 +150,17 @@ onMounted(async () => {
     }, 1000);
     return pool;
   });
+  if (poolCards.value.length > 2) {
+    poolSelect.value = poolCards.value.filter(
+      (pool) =>
+        poolTimeGet.value[pool.postId] !== "未开始" && poolTimeGet.value[pool.postId] !== "已结束",
+    );
+    hasNew.value =
+      poolCards.value.filter((pool) => poolTimeGet.value[pool.postId] === "未开始").length > 0;
+  } else {
+    poolSelect.value = poolCards.value;
+    hasNew.value = false;
+  }
   loading.value = false;
 });
 
@@ -171,6 +199,21 @@ async function toOuter(url: string, title: string): Promise<void> {
   createTGWindow(url, "Sub_window", `Pool_${title}`, 1200, 800, true, true);
 }
 
+// 更换显示的卡池
+async function switchPool(): Promise<void> {
+  showNew.value = !showNew.value;
+  if (showNew.value) {
+    poolSelect.value = poolCards.value.filter(
+      (pool) => poolTimeGet.value[pool.postId] === "未开始",
+    );
+  } else {
+    poolSelect.value = poolCards.value.filter(
+      (pool) =>
+        poolTimeGet.value[pool.postId] !== "未开始" && poolTimeGet.value[pool.postId] !== "已结束",
+    );
+  }
+}
+
 onUnmounted(() => {
   Object.keys(timer.value).forEach((key) => {
     clearInterval(timer.value[Number(key)]);
@@ -190,32 +233,56 @@ onUnmounted(() => {
 
 .pool-title {
   display: flex;
-  color: var(--common-text-title);
+  align-items: center;
+  justify-content: space-between;
   font-family: var(--font-title);
   font-size: 20px;
 }
 
-.pool-title img {
+.pool-title-left {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  color: var(--common-text-title);
+  column-gap: 10px;
+}
+
+.pool-title-left img {
   width: 25px;
   height: 25px;
   border-radius: 50%;
-  margin-right: 10px;
   background: var(--common-shadow-4);
-  transform: translate(0, 2px);
+}
+
+.pool-title-right {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 15px;
+}
+
+.pool-switch {
+  display: flex;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  color: var(--box-text-1);
 }
 
 .pool-grid {
-  display: flex;
+  display: grid;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
+  grid-template-columns: repeat(2, 1fr);
 }
 
 .pool-card {
   position: relative;
   overflow: hidden;
-  width: 50%;
+  width: 100%;
   border-radius: 5px;
+  aspect-ratio: 69 / 32;
   box-shadow: 0 5px 5px var(--common-shadow-4);
 }
 

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

@@ -1,13 +1,12 @@
 /**
  * @file plugins Mys types Gacha.d.ts
  * @description Mys 插件卡池类型定义文件
- * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.1
+ * @since Beta v0.3.3
  */
 
 /**
  * @description Mys 卡池类型定义
- * @since Alpha v0.2.1
+ * @since Beta v0.3.3
  * @namespace Gacha
  * @return Gacha
  */
@@ -20,7 +19,7 @@ declare namespace TGApp.Plugins.Mys.Gacha {
    * @property {Data[]} data.list 卡池数据
    * @return Response
    */
-  export interface Response extends TGApp.Plugins.Mys.Base.Response {
+  interface Response extends TGApp.Plugins.Mys.Base.Response {
     data: {
       list: Data[];
     };
@@ -43,7 +42,7 @@ declare namespace TGApp.Plugins.Mys.Gacha {
    * @property {string} end_time 卡池结束时间
    * @return Data
    */
-  export interface Data {
+  interface Data {
     id: string;
     title: string;
     activity_url: string;
@@ -64,14 +63,14 @@ declare namespace TGApp.Plugins.Mys.Gacha {
    * @property {string} url 链接
    * @return MiniItem
    */
-  export interface MiniItem {
+  interface MiniItem {
     icon: string;
     url: string;
   }
 
   /**
    * @description 用于渲染的卡池数据
-   * @since Alpha v0.2.1
+   * @since Beta v0.3.3
    * @interface RenderCard
    * @property {string} title 卡池标题
    * @property {string} subtitle 卡池副标题
@@ -79,13 +78,12 @@ declare namespace TGApp.Plugins.Mys.Gacha {
    * @property {number} postId 卡池对应帖子ID
    * @property {MiniItem[]} characters 卡池包含的角色
    * @property {MiniItem} voice 卡池角色语音
-   * @property {string} time.start 卡池开始时间
+   * @property {string} time.str 卡池时间字符串
    * @property {string} time.startStamp 卡池开始时间戳
-   * @property {string} time.end 卡池结束时间
    * @property {string} time.endStamp 卡池结束时间戳
    * @return RenderCard
    */
-  export interface RenderCard {
+  interface RenderCard {
     title: string;
     subtitle: string;
     cover: string;
@@ -93,9 +91,8 @@ declare namespace TGApp.Plugins.Mys.Gacha {
     characters: MiniItem[];
     voice: MiniItem;
     time: {
-      start: string;
+      str: string;
       startStamp: number;
-      end: string;
       endStamp: number;
     };
   }

src/plugins/Mys/utils/getGachaCard.ts

@@ -1,15 +1,14 @@
 /**
  * @file plugins Mys utils getGachaCard.ts
  * @description Mys 插件抽卡工具
- * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.1
+ * @since Beta v0.3.3
  */
 
 import getPostData from "../request/getPostData";
 
 /**
  * @description 根据卡池信息转为渲染用的卡池信息
- * @since Alpha v0.2.1
+ * @since Beta v0.3.3
  * @param {TGApp.Plugins.Mys.Gacha.Data[]} gachaData 卡池信息
  * @param {Record<number, string>} poolCover 卡池封面
  * @returns {Promise<TGApp.Plugins.Mys.Gacha.RenderCard[]>}
@@ -37,6 +36,7 @@ async function getGachaCard(
           console.error(error);
         }
       }
+      const timeStr = `${data.start_time} ~ ${data.end_time}`;
       return gachaCard.push({
         title: data.title,
         subtitle: data.content_before_act,
@@ -51,9 +51,8 @@ async function getGachaCard(
           url: data.voice_url,
         },
         time: {
-          start: data.start_time,
+          str: timeStr,
           startStamp: new Date(data.start_time).getTime(),
-          end: data.end_time,
           endStamp: new Date(data.end_time).getTime(),
         },
       });