fix(home): 首页放了一下卡池信息

src/pages/Home.vue

@@ -1,7 +1,127 @@
 <template>
-	<h1>首页</h1>
+	<div v-show="poolInfo" class="pool-cards">
+		<v-card v-for="pool in poolInfo" style="margin-top: 20px">
+			<template v-slot:prepend>
+				<img src="/source/UI/wish.webp" alt="wish" style="width: 40px; height: 40px; float: left" />
+				<v-card-title>{{ pool.title }}</v-card-title>
+			</template>
+			<!-- 卡池封面 -->
+			<v-row style="margin-left: 10px">
+				<img :src="pool.cover" alt="cover" style="height: 340px; width: auto; margin-top: 10px" />
+				<v-col style="margin: auto 10px">
+					<div v-for="character in pool.characters">
+						<!-- todo 点击事件不生效	 -->
+						<img
+							:src="character.icon"
+							style="width: 80px; height: 80px"
+							alt="character"
+							@click="toOuter(character.url, pool.title)"
+						/>
+					</div>
+				</v-col>
+			</v-row>
+			<v-card-subtitle class="pt-4">{{ pool.subtitle }}</v-card-subtitle>
+			<!-- todo 样式美化 -->
+			<v-card-text>
+				<span style="width: 60%">
+					<v-icon>mdi-calendar-clock</v-icon>
+					{{ pool.time.start }}~{{ pool.time.end }}
+				</span>
+				<span style="width: 30%">
+					<audio :src="pool.voice.url" controls />
+				</span>
+				<v-img
+					:src="pool.voice.icon"
+					width="80px"
+					height="80px"
+					alt="voice"
+					style="padding-bottom: 20px; float: right"
+				/>
+			</v-card-text>
+		</v-card>
+	</div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { http } from "@tauri-apps/api";
+import { createTGWindow } from "../utils/TGWindow";
+import { ResponseGachaPool, ResponsePost, MysPostApi, MysGachaInfo } from "../interface/MysPost";
 
-<style lang="css"></style>
+interface GachaPool {
+	title: string;
+	subtitle: string;
+	cover: string;
+	characters: {
+		icon: string;
+		url: string;
+	}[];
+	voice: {
+		icon: string;
+		url: string;
+	};
+	time: {
+		start: string;
+		end: string;
+	};
+}
+
+const poolInfo = ref([] as GachaPool[]);
+
+onMounted(async () => {
+	const responseGachaPool = await http
+		.fetch<ResponseGachaPool>(MysGachaInfo, {
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+			},
+		})
+		.then(response => {
+			return response.data.data.list;
+		});
+	responseGachaPool.map(async gachaPool => {
+		// 获取卡池 article post_id
+		const post_id = gachaPool.activity_url.split("/").pop();
+		const gachaCover = await http
+			.fetch<ResponsePost>(MysPostApi + post_id, {
+				method: "GET",
+				headers: {
+					referer: `https://bbs.mihoyo.com/ys/article/${post_id}`,
+				},
+			})
+			.then(response => {
+				return response.data.data.post.post.images[0];
+			});
+		console.log(gachaCover);
+		poolInfo.value.push({
+			title: gachaPool.title,
+			subtitle: gachaPool.content_before_act,
+			cover: gachaCover,
+			characters: gachaPool.pool.map(character => ({
+				icon: character.icon,
+				url: character.url,
+			})),
+			voice: {
+				icon: gachaPool.voice_icon,
+				url: gachaPool.voice_url,
+			},
+			time: {
+				start: gachaPool.start_time,
+				end: gachaPool.end_time,
+			},
+		});
+	});
+});
+
+function toOuter(url: string, title: string) {
+	createTGWindow(url, title, title, 960, 720, true);
+}
+</script>
+
+<style lang="css">
+.pool-cards {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+</style>

src/pages/News.vue

@@ -109,6 +109,8 @@ import {
 	ResponseNews,
 	EnumPostType,
 	ResponsePost,
+	MysPostApi,
+	MysNewsApi,
 } from "../interface/MysPost";
 import { http, fs } from "@tauri-apps/api";
 import { createTGWindow } from "../utils/TGWindow";
@@ -118,10 +120,6 @@ import { parseMys } from "../utils/MysParse";
 const devStore = useDevStore();
 const appStore = useAppStore();
 
-// 常量
-const MysNewsApi = "https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids=2&type=";
-const MysPostApi = "https://bbs-api.mihoyo.com/post/wapi/getPostFull?gids=2&post_id=";
-
 // 接口 todo：考虑放到 interface 文件夹下?
 interface CardDataType {
 	title: string;