diff --git a/src/components/home/t-calendar.vue b/src/components/home/t-calendar.vue index 2742baba..c1c32532 100644 --- a/src/components/home/t-calendar.vue +++ b/src/components/home/t-calendar.vue @@ -25,7 +25,7 @@
- wish - 限时祈愿 +
+ wish + 限时祈愿 +
+
+ +
-
+
cover
@@ -25,7 +37,7 @@
mdi-calendar-clock - {{ pool.time.start }}~{{ pool.time.end }} + {{ pool.time.str }}
@@ -65,8 +77,12 @@ const showBar = ref(false); const barText = ref(""); const barColor = ref("error"); +const hasNew = ref(false); +const showNew = ref(false); + // data const poolCards = ref([]); +const poolSelect = ref([]); const poolTimeGet = ref>({}); const poolTimePass = ref>({}); const timer = ref>({}); @@ -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 { createTGWindow(url, "Sub_window", `Pool_${title}`, 1200, 800, true, true); } +// 更换显示的卡池 +async function switchPool(): Promise { + 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); } diff --git a/src/plugins/Mys/types/Gacha.d.ts b/src/plugins/Mys/types/Gacha.d.ts index 9c9d2074..de80e51b 100644 --- a/src/plugins/Mys/types/Gacha.d.ts +++ b/src/plugins/Mys/types/Gacha.d.ts @@ -1,13 +1,12 @@ /** * @file plugins Mys types Gacha.d.ts * @description Mys 插件卡池类型定义文件 - * @author BTMuli - * @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; }; } diff --git a/src/plugins/Mys/utils/getGachaCard.ts b/src/plugins/Mys/utils/getGachaCard.ts index cc63a42c..5abde166 100644 --- a/src/plugins/Mys/utils/getGachaCard.ts +++ b/src/plugins/Mys/utils/getGachaCard.ts @@ -1,15 +1,14 @@ /** * @file plugins Mys utils getGachaCard.ts * @description Mys 插件抽卡工具 - * @author BTMuli - * @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} poolCover 卡池封面 * @returns {Promise} @@ -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(), }, });