fix(home): 首页组件分割

src/components/t-pool.vue

@@ -0,0 +1,204 @@
+<template>
+	<v-list class="pool-card">
+		<v-list-item>
+			<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif"
+				>限时祈愿</v-list-item-title
+			>
+			<div v-if="loading">
+				<t-loading :title="loadingTitle" :empty="loadingEmpty" position="relative" />
+			</div>
+			<div v-else class="pool-grid">
+				<v-card
+					v-for="pool in poolCards"
+					style="background: #faf7e8; color: #546d8b; border-radius: 10px"
+				>
+					<v-list style="background: #faf7e8; color: #546d8b">
+						<v-list-item :title="pool.title" :subtitle="pool.subtitle">
+							<template v-slot:prepend>
+								<v-img
+									:src="pool.voice.icon"
+									style="transform: translate(0, -10px); width: 60px; height: 60px"
+								/>
+							</template>
+							<template v-slot:append>
+								<audio :src="pool.voice.url" controls />
+							</template>
+						</v-list-item>
+					</v-list>
+					<div class="pool-cover" @click="toPost(pool)">
+						<img :src="pool.cover" alt="cover" />
+					</div>
+					<div class="pool-character">
+						<div v-for="character in pool.characters" @click="toOuter(character.url, pool.title)">
+							<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="#90caf9"
+							>
+								{{ poolTimeGet[pool.post_id] }}
+							</v-progress-circular>
+						</div>
+					</div>
+					<v-card-text>
+						<span style="width: 60%">
+							<v-icon>mdi-calendar-clock</v-icon>
+							{{ pool.time.start }}~{{ pool.time.end }}
+						</span>
+					</v-card-text>
+				</v-card>
+			</div>
+		</v-list-item>
+	</v-list>
+</template>
+<script lang="ts" setup>
+// vue
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+// utils
+import { createTGWindow } from "../utils/TGWindow";
+// plugins
+import MysOper from "../plugins/Mys";
+// interface
+import { GachaCard } from "../plugins/Mys/interface/gacha";
+import { Map } from "../interface/Base";
+import TLoading from "./t-loading.vue";
+
+// vue
+const router = useRouter();
+
+// loading
+const loading = ref(true as boolean);
+const loadingTitle = ref("正在加载祈愿数据");
+const loadingEmpty = ref(false as boolean);
+
+// data
+const poolCards = ref([] as GachaCard[]);
+const poolTimeGet = ref({} as Map<string>);
+const poolTimePass = ref({} as Map<number>);
+
+onMounted(async () => {
+	try {
+		loadingTitle.value = "正在获取限时祈愿数据";
+		const gachaData = await MysOper.Gacha.get();
+		if (!gachaData) {
+			loadingEmpty.value = true;
+			return;
+		}
+		loadingEmpty.value = false;
+		loadingTitle.value = "正在渲染限时祈愿";
+		poolCards.value = await MysOper.Gacha.card(gachaData);
+		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();
+		});
+		await setInterval(() => {
+			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()) / (pool.time.end_stamp - pool.time.start_stamp)) *
+					100;
+			});
+		}, 1000);
+	} catch (error) {
+		console.error(error);
+		return;
+	} finally {
+		loading.value = false;
+	}
+});
+
+function toOuter(url: string, title: string) {
+	createTGWindow(url, "祈愿", title, 1200, 800, true);
+}
+
+function getLastPoolTime(time: number) {
+	const hour = Math.floor(time / 1000 / 60 / 60);
+	const minute = Math.floor((time / 1000 / 60 / 60 - hour) * 60);
+	const second = Math.floor(((time / 1000 / 60 / 60 - hour) * 60 - minute) * 60);
+	return `${hour}:${minute.toFixed(0).padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
+}
+
+async function toPost(pool: GachaCard) {
+	// 获取路由路径
+	const path = router.resolve({
+		name: "帖子详情",
+		params: {
+			post_id: pool.post_id.toString(),
+		},
+	}).href;
+	// 打开新窗口
+	createTGWindow(path, "限时祈愿", pool.title, 960, 720, false);
+}
+</script>
+
+<style lang="css">
+.pool-card {
+	font-family: "Genshin", serif;
+	width: 100%;
+	background: #546d8b;
+	border-radius: 10px;
+}
+
+.pool-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+	grid-gap: 20px;
+	margin-top: 10px;
+}
+
+.pool-cover {
+	margin: 0 20px 10px;
+	width: calc(100% - 40px);
+	height: auto;
+	overflow: hidden;
+	border-radius: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.pool-cover img {
+	width: 100%;
+	transition: all 0.5s;
+	border-radius: 10px;
+}
+
+.pool-cover :hover {
+	cursor: pointer;
+	transform: scale(1.1);
+	transition: all 0.5s;
+}
+
+.pool-character {
+	margin: 0 20px;
+	width: 100%;
+	height: 80px;
+	display: flex;
+}
+
+.pool-character img {
+	border-radius: 10px;
+}
+
+.pool-icon {
+	width: 80px;
+	height: 80px;
+	margin: 0 10px;
+}
+
+.pool-character :hover .pool-icon {
+	cursor: pointer;
+}
+
+.pool-clock {
+	width: auto;
+	margin-left: 40px;
+	float: right;
+	font-size: small;
+	height: 80px;
+}
+</style>

src/components/t-position.vue

@@ -4,7 +4,10 @@
 			<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif"
 				>近期活动</v-list-item-title
 			>
-			<div class="position-grid">
+			<div v-if="loading">
+				<t-loading :title="loadingTitle" :empty="loadingEmpty" position="relative" />
+			</div>
+			<div v-else class="position-grid">
 				<v-card
 					v-for="card in positionCards"
 					style="background: #faf7e8; color: #546d8b; border-radius: 10px"
@@ -46,6 +49,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, onMounted } from "vue";
+import TLoading from "./t-loading.vue";
 import { useRouter } from "vue-router";
 // utils
 import { createTGWindow } from "../utils/TGWindow";
@@ -57,6 +61,8 @@ import { Map } from "../interface/Base";
 
 // loading
 const loading = ref(true as boolean);
+const loadingTitle = ref("正在加载近期活动");
+const loadingEmpty = ref(false as boolean);
 
 // 数据
 const positionCards = ref([] as PositionCard[]);
@@ -66,7 +72,15 @@ const router = useRouter();
 
 onMounted(async () => {
 	try {
+		loadingTitle.value = "正在获取近期活动数据";
 		const positionData = await MysOper.Position.get();
+		if (!positionData) {
+			loadingEmpty.value = true;
+			loadingTitle.value = "暂无近期活动";
+			return;
+		}
+		loadingEmpty.value = false;
+		loadingTitle.value = "正在渲染近期活动";
 		positionCards.value = MysOper.Position.card(positionData);
 		positionCards.value.forEach(card => {
 			positionTimeGet.value[card.post_id] = getLastPositionTime(card.time.end_stamp - Date.now());
@@ -105,13 +119,13 @@ async function toPost(card: PositionCard) {
 		},
 	}).href;
 	// 打开新窗口
-	createTGWindow(path, "祈愿", card.title, 960, 720, false);
+	createTGWindow(path, "近期活动", card.title, 960, 720, false);
 }
 </script>
 
 <style lang="css">
 .position-card {
-	margin: 0 10px;
+	margin-top: 10px;
 	font-family: "Genshin", serif;
 	background: #546d8b;
 	border-radius: 10px;
@@ -119,8 +133,8 @@ async function toPost(card: PositionCard) {
 
 .position-grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+	grid-template-columns: repeat(3, minmax(400px, 1fr));
 	grid-gap: 20px;
-	padding: 10px;
+	margin-top: 10px;
 }
 </style>

src/pages/Home.vue

@@ -1,203 +1,10 @@
 <template>
-	<div v-if="loading">
+	<t-pool />
-		<t-loading :title="loadingTitle" />
+	<t-position />
-	</div>
-	<div v-else>
-		<div v-if="poolEmpty">
-			<v-card class="pool-card">
-				<v-card-title>暂无卡池信息</v-card-title>
-			</v-card>
-		</div>
-		<div class="pool-cards" v-else>
-			<v-card v-for="pool in poolCards" class="pool-card">
-				<v-list class="pool-list">
-					<v-list-item :title="pool.title" :subtitle="pool.subtitle" class="pool-list-item">
-						<template v-slot:prepend>
-							<v-img
-								:src="pool.voice.icon"
-								style="transform: translate(0, -10px); width: 60px; height: 60px"
-							/>
-						</template>
-						<template v-slot:append>
-							<audio :src="pool.voice.url" controls />
-						</template>
-					</v-list-item>
-				</v-list>
-				<!-- 卡池封面 -->
-				<v-row>
-					<div class="pool-cover" @click="toPost(pool)">
-						<img :src="pool.cover" alt="cover" />
-					</div>
-					<div class="pool-character">
-						<div v-for="character in pool.characters" @click="toOuter(character.url, pool.title)">
-							<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">
-								{{ poolTimeGet[pool.post_id] }}
-							</v-progress-circular>
-						</div>
-					</div>
-				</v-row>
-				<v-card-subtitle class="pt-4">{{ pool.subtitle }}</v-card-subtitle>
-				<v-card-text>
-					<span style="width: 60%">
-						<v-icon>mdi-calendar-clock</v-icon>
-						{{ pool.time.start }}~{{ pool.time.end }}
-					</span>
-				</v-card-text>
-			</v-card>
-		</div>
-		<t-position />
-	</div>
 </template>
 
 <script lang="ts" setup>
 // vue
-import { onMounted, ref } from "vue";
+import TPool from "../components/t-pool.vue";
-import { useRouter } from "vue-router";
-import TLoading from "../components/t-loading.vue";
-// plugin
-import MysOper from "../plugins/Mys";
-// utils
-import { createTGWindow } from "../utils/TGWindow";
-// interface
-import { GachaCard } from "../plugins/Mys/interface/gacha";
-import { Map } from "../interface/Base";
 import TPosition from "../components/t-position.vue";
-
-// vue
-const router = useRouter();
-
-// loading
-const loading = ref(true);
-const loadingTitle = ref("加载中...");
-const poolEmpty = ref(false);
-
-// data
-const poolCards = ref([] as GachaCard[]);
-const poolTimeGet = ref({} as Map<string>);
-const poolTimePass = ref({} as Map<number>);
-
-onMounted(async () => {
-	loadingTitle.value = "正在获取卡池信息...";
-	const gachaData = await MysOper.Gacha.get();
-	if (!gachaData || gachaData.length === 0) {
-		poolEmpty.value = true;
-		loadingTitle.value = "暂无卡池信息";
-	}
-	loadingTitle.value = "正在渲染卡池信息...";
-	poolCards.value = await MysOper.Gacha.card(gachaData);
-	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();
-	});
-	await setInterval(() => {
-		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()) / (pool.time.end_stamp - pool.time.start_stamp)) * 100;
-		});
-	}, 1000);
-	loading.value = false;
-});
-
-function getLastPoolTime(time: number) {
-	const hour = Math.floor(time / 1000 / 60 / 60);
-	const minute = Math.floor((time / 1000 / 60 / 60 - hour) * 60);
-	const second = Math.floor(((time / 1000 / 60 / 60 - hour) * 60 - minute) * 60);
-	return `${hour}:${minute.toFixed(0).padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
-}
-
-function toOuter(url: string, title: string) {
-	createTGWindow(url, "祈愿", title, 1200, 800, true);
-}
-
-async function toPost(pool: GachaCard) {
-	// 获取路由路径
-	const path = router.resolve({
-		name: "帖子详情",
-		params: {
-			post_id: pool.post_id.toString(),
-		},
-	}).href;
-	// 打开新窗口
-	createTGWindow(path, "祈愿", pool.title, 960, 720, false);
-}
 </script>
-
-<style lang="css">
-.pool-cards {
-	font-family: Genshin-Light, serif;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-
-.pool-card {
-	margin: 10px;
-	background: #546d8b;
-	border-radius: 10px;
-	color: #faf7e8;
-}
-
-.pool-list {
-	background: #546d8b;
-}
-
-.pool-list-item {
-	background: #546d8b;
-	font-family: Genshin, serif;
-	color: #fec90b;
-}
-
-.pool-cover {
-	width: 100%;
-	height: 330px;
-	margin: 20px;
-	overflow: hidden;
-	border-radius: 10px;
-}
-
-.pool-cover img {
-	width: 100%;
-	height: 330px;
-	transition: all 0.5s;
-	border-radius: 10px;
-}
-
-.pool-cover :hover {
-	cursor: pointer;
-	transform: scale(1.1);
-	transition: all 0.5s;
-}
-
-.pool-character {
-	margin: 0 20px;
-	width: 100%;
-	height: 80px;
-	display: flex;
-}
-
-.pool-character img {
-	border-radius: 10px;
-}
-
-.pool-icon {
-	width: 80px;
-	height: 80px;
-	margin: 0 10px;
-}
-
-.pool-character :hover .pool-icon {
-	cursor: pointer;
-}
-
-.pool-clock {
-	width: auto;
-	margin-left: 40px;
-	float: right;
-	font-size: small;
-	height: 80px;
-}
-</style>