fix(sth): 样式优化

src/pages/Achievements.vue

@@ -162,7 +162,16 @@ async function loadData() {
 	CardsInfo.value = await ReadTGDataByIndex("NameCard", "type", 1);
 	// 按照 order 排序
 	seriesList.value = seriesDB.sort((a, b) => a.order - b.order);
-	selectedAchievement.value = await ReadAllTGData("Achievements");
+	const getAchievements = await ReadAllTGData("Achievements");
+	// 未完成的排在前面
+	getAchievements.sort((a, b) => {
+		if (a.completed === b.completed) {
+			return a.id - b.id;
+		} else {
+			return a.completed ? 1 : -1;
+		}
+	});
+	selectedAchievement.value = getAchievements;
 	loading.value = false;
 	title.value = achievementsStore.title;
 }

src/pages/GCG.vue

@@ -17,11 +17,14 @@
 			></v-text-field>
 		</v-app-bar>
 		<div class="GCG-grid">
-			<div v-for="item in CardsInfo" :key="item.id" class="card-cls" @click="toOuter(item)">
+			<v-card v-for="item in CardsInfo" :key="item.id" class="card-cls" @click="toOuter(item)">
 				<!-- 外部卡牌边框 -->
 				<v-img src="/source/GCG/base/bg-normal.webp" class="GCG-border"></v-img>
 				<v-img :src="item.icon" class="GCG-cover"></v-img>
-			</div>
+				<div class="GCG-content">
+					<span>{{ item.name }}</span>
+				</div>
+			</v-card>
 		</div>
 	</div>
 </template>
@@ -64,35 +67,41 @@ async function searchCard() {
 }
 </script>
 <style lang="css">
-/* 多排卡牌 */
 .GCG-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 	grid-gap: 10px;
 	padding: 10px;
+	border-radius: 0 0 10px 10px;
+	overflow: hidden;
 }
+
 .card-cls {
 	position: relative;
 	width: 140px;
 	height: 240px;
-	border-radius: 10px;
 	overflow: hidden;
 }
+
 .GCG-border {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 140px;
 	height: 240px;
+	overflow: hidden;
 }
+
 .GCG-cover {
 	position: absolute;
+	transition: all 0.3s;
 	top: 0;
 	left: 0;
 	width: 140px;
 	height: 240px;
 	z-index: -1;
 }
+
 .GCG-grid :hover {
 	cursor: pointer;
 }
@@ -102,4 +111,20 @@ async function searchCard() {
 	transition: all 0.3s;
 	overflow: hidden;
 }
+
+.GCG-content {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 40px;
+	background: rgba(0, 0, 0, 0.5);
+	color: white;
+	display: flex;
+	font-size: small;
+	font-family: Genshin, serif;
+	border-radius: 0 0 10px 10px;
+	justify-content: center;
+	align-items: center;
+}
 </style>

src/pages/Home.vue

@@ -1,64 +1,78 @@
 <template>
-	<div v-if="poolInfo == null || poolInfo.length === 0" class="loading-bar">
+	<div v-if="loading" class="loading-bar">
 		<v-progress-circular indeterminate color="primary" />
 	</div>
-	<div v-else class="pool-cards">
+	<div v-else>
-		<v-card v-for="pool in poolInfo" style="margin-top: 20px">
+		<div v-if="empty">
-			<template v-slot:prepend>
+			<!-- todo 放个空白图 -->
-				<img
+		</div>
-					src="../assets/icons/note-wish-circle.svg"
+		<div v-else class="pool-cards">
-					alt="wish"
+			<v-card v-for="pool in poolInfo" class="Home-card">
-					style="width: 32px; height: auto; margin-right: 10px; float: left"
+				<template v-slot:prepend>
-				/>
+					<v-img
-				<v-card-title style="display: inline-block">{{ pool.title }}</v-card-title>
+						:src="pool.voice.icon"
-			</template>
+						width="80px"
-			<!-- 卡池封面 -->
+						height="80px"
-			<v-row style="margin-left: 10px">
+						alt="voice"
-				<img :src="pool.cover" alt="cover" style="height: 340px; width: auto; margin-top: 10px" />
+						style="display: inline-block"
-				<v-col style="margin: auto 10px">
+					/>
-					<div v-for="character in pool.characters">
+					<v-card-title style="display: inline-block">{{ pool.title }}</v-card-title>
-						<!-- todo 点击事件不生效	 -->
+				</template>
-						<img
+				<template v-slot:append>
-							: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>
+				</template>
-				<v-img
+				<!-- 卡池封面 -->
-					:src="pool.voice.icon"
+				<v-row class="Home-pool">
-					width="80px"
+					<div class="Home-pool-cover" @click="toPost(pool.post_id)">
-					height="80px"
+						<img :src="pool.cover" alt="cover" />
-					alt="voice"
+					</div>
-					style="padding-bottom: 20px; float: right"
+					<div class="Home-pool-character">
-				/>
+						<div v-for="character in pool.characters" @click="toOuter(character.url, pool.title)">
-			</v-card-text>
+							<img :src="character.icon" class="Home-pool-icon" alt="character" />
-		</v-card>
+						</div>
+						<div class="Home-pool-clock">
+							<v-progress-circular
+								:model-value="timePass"
+								size="100"
+								color="blue-lighten-3"
+								width="10"
+							>
+								{{ timeGet }}
+							</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>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
-import { http } from "@tauri-apps/api";
+import useAppStore from "../store/modules/app";
+import { fs, http } from "@tauri-apps/api";
 import { createTGWindow } from "../utils/TGWindow";
-import { ResponseGachaPool, ResponsePost, MysPostApi, MysGachaInfo } from "../interface/MysPost";
+import {
+	ResponseGachaPool,
+	ResponsePost,
+	MysPostApi,
+	MysGachaInfo,
+	MysPostType,
+} from "../interface/MysPost";
+import { parseMys } from "../utils/MysParse";
 
 interface GachaPool {
 	title: string;
 	subtitle: string;
 	cover: string;
+	post_id: string;
 	characters: {
 		icon: string;
 		url: string;
@@ -73,7 +87,13 @@ interface GachaPool {
 	};
 }
 
+const appStore = useAppStore();
+const renderMode = ref(appStore.structureRender);
 const poolInfo = ref([] as GachaPool[]);
+const loading = ref(true);
+const empty = ref(false);
+const timeGet = ref("");
+const timePass = ref(0);
 
 onMounted(async () => {
 	const responseGachaPool = await http
@@ -86,9 +106,17 @@ onMounted(async () => {
 		.then(response => {
 			return response.data.data.list;
 		});
+	// 如果没有卡池信息则不进行后续操作
+	if (responseGachaPool.length === 0) {
+		loading.value = false;
+		empty.value = true;
+		return;
+	}
+	empty.value = false;
 	responseGachaPool.map(async gachaPool => {
 		// 获取卡池 article post_id
 		const post_id = gachaPool.activity_url.split("/").pop();
+		if (!post_id) return;
 		const gachaCover = await http
 			.fetch<ResponsePost>(MysPostApi + post_id, {
 				method: "GET",
@@ -102,6 +130,7 @@ onMounted(async () => {
 		poolInfo.value.push({
 			title: gachaPool.title,
 			subtitle: gachaPool.content_before_act,
+			post_id: post_id,
 			cover: gachaCover,
 			characters: gachaPool.pool.map(character => ({
 				icon: character.icon,
@@ -116,11 +145,58 @@ onMounted(async () => {
 				end: gachaPool.end_time,
 			},
 		});
+		getTimeNow(gachaPool.start_time, gachaPool.end_time);
+		setInterval(() => {
+			loading.value = false;
+		}, 1000);
 	});
 });
 
+function getTimeNow(start_time: string, end_time: string) {
+	setInterval(() => {
+		const start = new Date(start_time);
+		const now = new Date();
+		const end = new Date(end_time);
+		const time = end.getTime() - now.getTime();
+		// 截断，取 0.000%
+		timePass.value = (time / (end.getTime() - start.getTime())) * 100;
+		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);
+		timeGet.value = `${hour}:${minute.toFixed(0).padStart(2, "0")}:${second
+			.toFixed(0)
+			.padStart(2, "0")}`;
+	}, 1000);
+}
+
 function toOuter(url: string, title: string) {
-	createTGWindow(url, title, title, 960, 720, true);
+	createTGWindow(url, "祈愿", title, 1200, 800, true);
+}
+
+async function toPost(post_id: string) {
+	// 获取帖子内容
+	const post: MysPostType = await http
+		.fetch(`${MysPostApi}${post_id}`, {
+			method: "GET",
+			headers: {
+				referer: `https://bbs.mihoyo.com/ys/article/${post_id}`,
+			},
+		})
+		.then(res => {
+			return res.data as Promise<ResponsePost>;
+		})
+		.then(res => {
+			return res.data.post.post;
+		});
+	// 结构化渲染
+	const parseDoc = parseMys(post.structured_content);
+	// 将解析后的 doc 保存到 文件
+	await fs.writeTextFile(
+		`${appStore.dataPath.temp}\\${post_id}_home.html`,
+		parseDoc.documentElement.outerHTML
+	);
+	const postUrl = `file:\\\\\\${appStore.dataPath.temp}\\${post.post_id}_home.html`;
+	createTGWindow(postUrl, "祈愿卡池", post.subject, 960, 720, false);
 }
 </script>
 
@@ -128,7 +204,56 @@ function toOuter(url: string, title: string) {
 .pool-cards {
 	font-family: Genshin, serif;
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	align-items: center;
 }
+
+.Home-card {
+	margin: 10px;
+}
+
+.Home-pool {
+	margin-left: 10px;
+}
+
+.Home-pool-cover {
+	width: 690px;
+	height: auto;
+	margin-bottom: 10px;
+	overflow: hidden;
+}
+
+.Home-pool-cover img {
+	transition: all 0.5s;
+}
+
+.Home-pool-cover :hover {
+	cursor: pointer;
+	transform: scale(1.1);
+	transition: all 0.5s;
+}
+
+.Home-pool-character {
+	width: 100%;
+	height: 80px;
+	display: flex;
+}
+
+.Home-pool-icon {
+	width: 80px;
+	height: 80px;
+	margin: 0 10px;
+}
+
+.Home-pool-character :hover .Home-pool-icon {
+	cursor: pointer;
+}
+
+.Home-pool-clock {
+	width: auto;
+	margin-left: 120px;
+	float: right;
+	font-size: small;
+	height: 80px;
+}
 </style>

src/pages/News.vue

@@ -10,13 +10,18 @@
 		</v-tabs>
 		<v-window v-model="tab">
 			<v-window-item value="notice">
-				<div class="cards-grid">
+				<div class="News-grid">
 					<v-card
 						v-for="item in postData.notice"
 						class="justify-space-between flex-nowrap"
 						width="320"
 					>
-						<v-img :src="item.cover" cover style="height: 150px"></v-img>
+						<v-img
+							:src="item.cover"
+							cover
+							style="height: 150px"
+							@click="toPost(item.post_id)"
+						></v-img>
 						<v-card-title>{{ item.title }}</v-card-title>
 						<v-card-actions>
 							<v-btn
@@ -31,13 +36,18 @@
 				</div>
 			</v-window-item>
 			<v-window-item value="activity">
-				<div class="cards-grid">
+				<div class="News-grid">
 					<v-card
 						v-for="item in postData.activity"
 						class="justify-space-between flex-nowrap"
 						width="320"
 					>
-						<v-img :src="item.cover" cover style="height: 150px"></v-img>
+						<v-img
+							:src="item.cover"
+							cover
+							style="height: 150px"
+							@click="toPost(item.post_id)"
+						></v-img>
 						<v-card-title>{{ item.title }}</v-card-title>
 						<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
 						<v-card-actions>
@@ -56,13 +66,18 @@
 				</div>
 			</v-window-item>
 			<v-window-item value="news">
-				<div class="cards-grid">
+				<div class="News-grid">
 					<v-card
 						v-for="item in postData.news"
 						class="justify-space-between flex-nowrap"
 						width="320"
 					>
-						<v-img :src="item.cover" cover style="height: 150px"></v-img>
+						<v-img
+							:src="item.cover"
+							cover
+							style="height: 150px"
+							@click="toPost(item.post_id)"
+						></v-img>
 						<v-card-title>{{ item.title }}</v-card-title>
 						<v-card-actions>
 							<v-btn
@@ -210,13 +225,23 @@ async function getPost(post_id: string): Promise<ResponsePost> {
 </script>
 
 <style lang="css">
-.cards-grid {
+.News-grid {
 	font-family: Genshin, serif;
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 	grid-gap: 20px;
 }
 
+.News-grid img {
+	transition: all 0.3s linear;
+}
+
+.News-grid :hover img {
+	cursor: pointer;
+	transform: scale(1.1);
+	transition: all 0.3s linear;
+}
+
 /* 进行中 */
 .card-btn-0 {
 	background: #3c99aa !important;