fix(achievements): 优化了下，样式布局应该会更简单

src/pages/Achievements.vue

@@ -18,18 +18,13 @@
 			<v-btn @click="exportJson" prepend-icon="mdi-export" class="ms-2 top-btn"> 导出 </v-btn>
 		</template>
 	</v-app-bar>
-	<div v-if="loading">
+	<div v-show="loading">
-		<t-loading title="正在加载成就" />
+		<t-loading :title="loadingTitle" />
 	</div>
-	<div v-else class="wrap">
+	<div v-show="!loading" class="wrap">
-		<v-row class="wrap-view">
 		<!-- 左侧菜单 -->
-			<v-col class="left-wrap">
+		<div class="left-wrap">
-				<v-list
+			<v-list class="card-left" v-for="(series, index) in seriesList" @click="selectSeries(index)">
-					class="card-left"
-					v-for="(series, index) in seriesList"
-					@click="selectSeries(index)"
-				>
 				<div class="version-icon-series">v{{ series.version }}</div>
 				<v-list-item>
 					<template v-slot:prepend>
@@ -43,9 +38,9 @@
 					</v-list-item-subtitle>
 				</v-list-item>
 			</v-list>
-			</v-col>
+		</div>
 		<!-- 右侧内容-->
-			<v-col cols="9" class="right-wrap">
+		<div class="right-wrap">
 			<v-list
 				v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
 				@click="openImg()"
@@ -94,15 +89,20 @@
 					</template>
 				</v-list-item>
 			</v-list>
-			</v-col>
+		</div>
-		</v-row>
+		<!-- 弹窗提示 -->
+		<v-snackbar v-model="snackbar" timeout="1500" color="#F5810A" top>
+			{{ snackbarText }}
+		</v-snackbar>
 	</div>
 </template>
 
 <script lang="ts" setup>
-// Node
+// vue
-import { dialog, fs } from "@tauri-apps/api";
 import { onMounted, ref } from "vue";
+import TLoading from "../components/t-loading.vue";
+// tauri
+import { dialog, fs } from "@tauri-apps/api";
 // Store
 import useAchievementsStore from "../store/modules/achievements";
 // Interface
@@ -122,21 +122,28 @@ import {
 	ReadTGDataByKey,
 	UpdateTGDataByKey,
 } from "../utils/TGIndex";
-import TLoading from "../components/t-loading.vue";
 
 // Store
 const achievementsStore = useAchievementsStore();
 
-// Data
+// loading
+const loading = ref(true);
+const loadingTitle = ref("正在加载数据");
+
+// data
 const title = ref(achievementsStore.title);
+const CardsInfo = ref([] as NameCard[]);
+const getCardInfo = ref({} as NameCard);
+// series
 const seriesList = ref([] as TGSeries[]);
 const selectedIndex = ref(-1);
 const selectedSeries = ref(-1);
 const selectedAchievement = ref([] as TGAchievement[]);
-const CardsInfo = ref([] as NameCard[]);
+
-const getCardInfo = ref({} as NameCard);
+// render
 const search = ref("");
-const loading = ref(true);
+const snackbar = ref(false);
+const snackbarText = ref("");
 
 onMounted(async () => {
 	await loadData();
@@ -144,12 +151,15 @@ onMounted(async () => {
 
 // 加载数据，数据源：合并后的本地数据
 async function loadData() {
+	loadingTitle.value = "正在获取成就系列数据";
 	const seriesDB: TGSeries[] = await ReadAllTGData("AchievementSeries");
+	loadingTitle.value = "正在获取成就系列名片数据";
 	CardsInfo.value = await ReadTGDataByIndex("NameCard", "type", 1);
-	// 按照 order 排序
+	loadingTitle.value = "对成就系列数据进行排序";
 	seriesList.value = seriesDB.sort((a, b) => a.order - b.order);
+	loadingTitle.value = "正在获取成就数据";
 	const getAchievements = await ReadAllTGData("Achievements");
-	// 未完成的排在前面
+	loadingTitle.value = "正在对成就数据进行排序";
 	getAchievements.sort((a, b) => {
 		if (a.completed === b.completed) {
 			return a.id - b.id;
@@ -157,13 +167,21 @@ async function loadData() {
 			return a.completed ? 1 : -1;
 		}
 	});
+	loadingTitle.value = "正在渲染成就数据";
 	selectedAchievement.value = getAchievements;
-	loading.value = false;
 	title.value = achievementsStore.title;
+	loading.value = false;
 }
 // 渲染选中的成就系列
 async function selectSeries(index: number) {
+	// 如果选中的是已经选中的系列，则不进行操作
+	if (selectedIndex.value === index) {
+		snackbarText.value = "已经选中该系列";
+		snackbar.value = true;
+		return;
+	}
 	loading.value = true;
+	loadingTitle.value = "正在获取对应的成就数据";
 	const getAchievements = await ReadTGDataByIndex(
 		"Achievements",
 		"series",
@@ -171,13 +189,14 @@ async function selectSeries(index: number) {
 	);
 	selectedIndex.value = index;
 	selectedSeries.value = seriesList.value[index].id;
+	loadingTitle.value = "正在查找对应的成就名片";
 	let getCard: NameCard;
 	if (selectedSeries.value !== 0 && selectedSeries.value !== 17) {
 		getCard = CardsInfo.value.find(card => card.name === seriesList.value[index].card)!;
 	} else {
 		getCard = {} as NameCard;
 	}
-	// 未完成的排在前面
+	loadingTitle.value = "正在对成就数据进行排序";
 	getAchievements.sort((a, b) => {
 		if (a.completed === b.completed) {
 			return a.id - b.id;
@@ -185,6 +204,7 @@ async function selectSeries(index: number) {
 			return a.completed ? 1 : -1;
 		}
 	});
+	loadingTitle.value = "正在渲染成就数据";
 	selectedAchievement.value = getAchievements;
 	getCardInfo.value = getCard;
 	loading.value = false;
@@ -363,13 +383,24 @@ async function exportJson() {
 .wrap {
 	display: flex;
 	flex-direction: row;
-}
-
-.wrap-view {
 	overflow: auto;
 	max-height: 90vh;
 	font-family: Genshin-Light, "serif";
 }
+/* 左侧系列 */
+.left-wrap {
+	float: left;
+	width: 25%;
+	max-height: calc(100vh - 100px);
+	overflow: auto;
+}
+/* 右侧成就 */
+.right-wrap {
+	float: right;
+	width: 75%;
+	max-height: calc(100vh - 100px);
+	overflow: auto;
+}
 /* 版本信息 */
 .version-icon-series {
 	font-family: Genshin, serif;
@@ -394,11 +425,6 @@ async function exportJson() {
 	font-size: 10px;
 }
 
-/* 左侧系列 */
-.left-wrap {
-	height: 100%;
-	overflow: auto;
-}
 .card-left {
 	border-radius: 10px;
 	margin: 10px;
@@ -407,11 +433,6 @@ async function exportJson() {
 	cursor: pointer;
 }
 
-/* 右侧成就 */
-.right-wrap {
-	height: 100%;
-	overflow: auto;
-}
 /* 成就卡片 */
 .card-right {
 	border-radius: 10px;