🐛 fix(pool): 修复窗口不可见问题并进行一些优化

src/components/t-pool.vue

@@ -14,9 +14,9 @@
           <v-list style="background: var(--content-bg-2); color: #546d8b">
             <v-list-item :title="pool.title" :subtitle="pool.subtitle">
               <template #prepend>
-                <v-img :src="pool.voice.icon" style="transform: translate(0, -10px); width: 60px; height: 60px" />
+                <v-img :src="pool.voice.icon" class="pool-sideIcon" />
               </template>
-              <template #append>
+              <template v-if="pool.voice.url" #append>
                 <audio :src="pool.voice.url" controls />
               </template>
             </v-list-item>
@@ -29,7 +29,7 @@
               <img :src="character.icon" class="pool-icon" alt="character">
             </div>
             <div class="pool-clock">
-              <v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10" :color="poolColor">
+              <v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10" :color="poolColor[pool.post_id]">
                 {{ poolTimeGet[pool.post_id] }}
               </v-progress-circular>
             </div>
@@ -47,8 +47,10 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { ref, onMounted, onUpdated } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
+// tauri
+import { dialog } from "@tauri-apps/api";
 // store
 import { useHomeStore } from "../store/modules/home";
 // utils
@@ -71,37 +73,38 @@ const loading = ref(true as boolean);
 const poolCards = ref([] as GachaCard[]);
 const poolTimeGet = ref({} as Record<number, string>);
 const poolTimePass = ref({} as Record<number, number>);
-const poolColor = ref("#90caf9" as string);
-const timer = ref(null as any);
+const poolColor = ref({} as Record<number, string>);
+const timer = ref({} as Record<number, any>);
 // expose
 defineExpose({
   name: "限时祈愿",
   loading,
 });
 
-function poolLastInterval () {
-  poolCards.value.map((pool) => {
-    poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
-    poolTimePass.value[pool.post_id] =
+function poolLastInterval (postId: number) {
+  const pool = poolCards.value.find((pool) => pool.post_id === postId);
+  if (!pool) return;
+  if (poolTimeGet.value[postId] === "未开始") {
+    const isStart = pool.time.start_stamp - Date.now();
+    if (isStart > 0) return;
+    poolTimeGet.value[postId] = getLastPoolTime(pool.time.end_stamp - Date.now());
+    poolTimePass.value[postId] = pool.time.end_stamp - Date.now();
+    poolColor.value[postId] = "#90caf9";
+  } else {
+    const isEnd = pool.time.end_stamp - Date.now();
+    poolTimeGet.value[postId] = getLastPoolTime(isEnd);
+    poolTimePass.value[postId] =
         ((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) * 100;
-    return pool;
-  });
+    if (isEnd >= 0) return;
+    clearInterval(timer.value[postId]);
+    timer.value[postId] = null;
+    poolTimePass.value[postId] = 100;
+    poolTimeGet.value[postId] = "已结束";
+    poolColor.value[postId] = "#f44336";
+  }
+  return pool;
 }
 
-// 监听 poolTimePass
-onUpdated(() => {
-  poolCards.value.map((pool) => {
-    if (poolTimePass.value[pool.post_id] <= 0) {
-      clearInterval(timer.value);
-      timer.value = null;
-      poolTimeGet.value[pool.post_id] = "已结束";
-      poolTimePass.value[pool.post_id] = 100;
-      poolColor.value = "#f44336";
-    }
-    return pool;
-  });
-});
-
 onMounted(async () => {
   const gachaData = await MysOper.Gacha.get();
   if (!gachaData) {
@@ -122,11 +125,22 @@ onMounted(async () => {
   poolCards.value.map((pool) => {
     poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
     poolTimePass.value[pool.post_id] = pool.time.end_stamp - Date.now();
+    if (poolTimePass.value[pool.post_id] <= 0) {
+      poolTimeGet.value[pool.post_id] = "已结束";
+      poolTimePass.value[pool.post_id] = 100;
+      poolColor.value[pool.post_id] = "#f44336";
+    } else if (pool.time.start_stamp - Date.now() > 0) {
+      poolTimeGet.value[pool.post_id] = "未开始";
+      poolTimePass.value[pool.post_id] = 100;
+      poolColor.value[pool.post_id] = "#32A9CA";
+    } else {
+      poolColor.value[pool.post_id] = "#90caf9";
+    }
+    timer.value[pool.post_id] = setInterval(() => {
+      poolLastInterval(pool.post_id);
+    }, 1000);
     return pool;
   });
-  timer.value = setInterval(() => {
-    poolLastInterval();
-  }, 1000);
   loading.value = false;
 });
 
@@ -155,8 +169,15 @@ function checkCover (data: GachaData[]) {
   });
 }
 
-function toOuter (url: string, title: string) {
-  createTGWindow(url, "祈愿", title, 1200, 800, true, false);
+async function toOuter (url: string, title: string) {
+  if (!url) {
+    await dialog.message("该角色池暂无详情", {
+      title,
+      type: "error",
+    });
+    return;
+  }
+  createTGWindow(url, "祈愿", title, 1200, 800, true, true);
 }
 
 function getLastPoolTime (time: number) {
@@ -176,6 +197,12 @@ function toPost (pool: GachaCard) {
   }).href;
   createTGWindow(path, "限时祈愿", pool.title, 960, 720, false, false);
 }
+
+onUnmounted(() => {
+  Object.keys(timer.value).forEach((key) => {
+    clearInterval(timer.value[Number(key)]);
+  });
+});
 </script>
 
 <style lang="css" scoped>
@@ -200,6 +227,20 @@ function toPost (pool: GachaCard) {
   margin-top: 10px;
 }
 
+.pool-sideIcon {
+  margin-top: 10px;
+  transform: translate(0, -10px);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.pool-sideIcon img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
 .pool-cover {
   margin: 0 20px 10px;
   width: calc(100% - 40px);

src/plugins/Mys/utils/gacha.ts

@@ -2,7 +2,7 @@
  * @file plugins Mys utils gacha.ts
  * @description Mys 插件抽卡工具
  * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.1.2
+ * @since Alpha v0.1.4
  */
 
 import { getPostData } from "../request/post";
@@ -10,7 +10,7 @@ import { type GachaCard, type GachaData } from "../interface/gacha";
 
 /**
  * @description 根据卡池信息转为渲染用的卡池信息
- * @since Alpha v0.1.2
+ * @since Alpha v0.1.4
  * @param {GachaData[]} gachaData 卡池信息
  * @param {Map<string>} poolCover 卡池封面
  * @returns {Promise<GachaCard[]>}
@@ -42,19 +42,22 @@ export async function getGachaCard (
         title: data.title,
         subtitle: data.content_before_act,
         cover,
+        // eslint-disable-next-line camelcase
         post_id: postId,
         characters: data.pool.map((character) => ({
           icon: character.icon,
           url: character.url,
         })),
         voice: {
-          icon: data.voice_icon,
+          icon: data.voice_icon || "/source/UI/defaultUser.webp",
           url: data.voice_url,
         },
         time: {
           start: data.start_time,
+          // eslint-disable-next-line camelcase
           start_stamp: new Date(data.start_time).getTime(),
           end: data.end_time,
+          // eslint-disable-next-line camelcase
           end_stamp: new Date(data.end_time).getTime(),
         },
       });