refactor(vue): 重构代码，采用setup语法

src/pages/Achievements.vue

@@ -3,13 +3,11 @@
 	<v-app-bar app>
 		<template v-slot:prepend>
 			<!-- 标题 -->
-			<v-card-text class="text-h5">{{ title }}</v-card-text>
+			<v-card-text class="text-h5">{{ getTitle() }}</v-card-text>
 		</template>
 		<template v-slot:append>
 			<!-- 导入按钮 -->
-			<v-btn @click="importJson" prepend-icon="mdi-import" class="bg-green-accent-2">
-				导入
-			</v-btn>
+			<v-btn @click="importJson" prepend-icon="mdi-import" class="bg-green-accent-2"> 导入 </v-btn>
 			<!-- 导出按钮 -->
 			<v-btn @click="exportJson" prepend-icon="mdi-export" class="ms-2 bg-green-accent-2">
 				导出
@@ -23,8 +21,7 @@
 	</v-layout>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
 import useAppStore from "../store/modules/app";
 import useAchievementsStore from "../store/modules/achievements";
 import UIAF_Oper from "../plugins/UIAF";
@@ -36,155 +33,126 @@ import {
 } from "../interface/Achievements";
 import TGMap from "../utils/TGMap";
 import { Map } from "../interface/Base";
+import { onMounted, ref } from "vue";
 
-export default defineComponent({
-	name: "Achievements",
-	data() {
-		return {
-			// 标题 成就完成数/成就总数 完成率
-			title: "" as string,
-			// 成就系列列表，用于侧边栏
-			seriesList: {} as Map<TGSeriesMap>,
-			// 成就列表-所有成就的数据
-			achievementsList: {} as Map<TGAchievementMap>,
-			// 选中的成就系列 id，用于决定右侧显示的成就列表
-			selectedSeries: -1 as number,
-		};
-	},
-	async mounted() {
-		await this.loadData();
-	},
-	methods: {
-		// 加载数据，数据源：合并后的本地数据
-		async loadData() {
-			const appStore = useAppStore();
-			const achievementsStore = useAchievementsStore();
-			const localSeriesPath = appStore.mergePath.achievementSeries;
-			const localAchievementsPath = appStore.mergePath.achievements;
-			const seriesMap: TGMap<TGSeriesMap> = new TGMap<TGSeriesMap>(
-				JSON.parse(await fs.readTextFile(localSeriesPath))
-			);
-			const achievementsMap: TGMap<TGAchievementMap> = new TGMap<TGAchievementMap>(
-				JSON.parse(await fs.readTextFile(localAchievementsPath))
-			);
-			await achievementsStore.flushData(seriesMap);
-			this.title = this.getTitle();
-			this.achievementsList = achievementsMap.getMap();
-			this.seriesList = seriesMap.getMap();
-		},
-		// 获取标题
-		getTitle() {
-			const achievementsStore = useAchievementsStore();
-			const achievementsAll = achievementsStore.total_achievements;
-			const achievementsDone = achievementsStore.fin_achievements;
-			return `成就完成数：${achievementsDone}/${achievementsAll} 完成率：${(
-				(achievementsDone / achievementsAll) *
-				100
-			).toFixed(2)}%`;
-		},
-		// 导入 UIAF 数据，进行数据合并、刷新
-		async importJson() {
-			const appStore = useAppStore();
-			const localPath = appStore.userPath.achievements;
-			const selectedFile = await dialog.open({
-				multiple: false,
-				filters: [
-					{
-						name: "JSON",
-						extensions: ["json"],
-					},
-				],
-			});
-			if (selectedFile && (await UIAF_Oper.importOper.checkUIAFData(<string>selectedFile))) {
-				const localRaw: string | false = await UIAF_Oper.importOper.readUIAFData(localPath);
-				const remoteRaw: string | false = await UIAF_Oper.importOper.readUIAFData(
-					<string>selectedFile
-				);
-				if (remoteRaw === false) {
-					await dialog.message("文件格式不正确，导入失败");
-					return;
-				}
-				let remoteData: Achievements = JSON.parse(remoteRaw);
-				let localData: UIAF_Achievement[] = JSON.parse(localRaw || "[]");
-				// 因为
-				const mergeUIAF: UIAF_Achievement[] = await UIAF_Oper.importOper.mergeUIAFData(
-					localData,
-					remoteData
-				);
-				await fs.writeTextFile(localPath, JSON.stringify(mergeUIAF, null, 4));
-				// 读取本地 mergeData
-				const mergeAchievementMap: TGMap<TGAchievementMap> = new TGMap<TGAchievementMap>(
-					JSON.parse(await fs.readTextFile(appStore.mergePath.achievements))
-				);
-				const mergeSeriesMap: TGMap<TGSeriesMap> = new TGMap<TGSeriesMap>(
-					JSON.parse(await fs.readTextFile(appStore.mergePath.achievementSeries))
-				);
-				// 遍历 mergeUIAF，对 mergeData 进行更新
-				mergeUIAF.map(UIAF_Item => {
-					// 更新成就
-					if (mergeAchievementMap.has(UIAF_Item.id)) {
-						const achievement = mergeAchievementMap.get(UIAF_Item.id);
-						achievement.completed = true;
-						achievement.completed_time = new Date(
-							UIAF_Item.timestamp * 1000
-						).toLocaleString();
-						mergeAchievementMap.set(UIAF_Item.id, achievement);
-						// 如果成就系列中没有该成就，则添加
-						if (!mergeSeriesMap.has(achievement.series)) {
-							const series = mergeSeriesMap.get(achievement.series);
-							series.achievements.push(achievement.id);
-							mergeSeriesMap.set(achievement.series, series);
-						}
-					}
-				});
-				// 更新成就系列
-				mergeSeriesMap.forEach(seriesMap => {
-					let completed = 0;
-					seriesMap.achievements.map(achievement => {
-						if (mergeAchievementMap.get(achievement).completed) {
-							completed++;
-						}
-					});
-					seriesMap.completed_count = completed;
-					seriesMap.total_count = seriesMap.achievements.length;
-					mergeSeriesMap.set(seriesMap.id, seriesMap);
-				});
-				// 写入数据
-				await fs.writeTextFile(
-					appStore.mergePath.achievements,
-					JSON.stringify(mergeAchievementMap.getMap(), null, 4)
-				);
-				await fs.writeTextFile(
-					appStore.mergePath.achievementSeries,
-					JSON.stringify(mergeSeriesMap.getMap(), null, 4)
-				);
-				// 刷新数据
-				await this.loadData();
-			}
-		},
-		// 导出
-		async exportJson() {
-			const appStore = useAppStore();
-			const localPath = appStore.userPath.achievements;
-			await console.log("正在获取 UIAF 数据...");
-			const achievements: Achievements = await UIAF_Oper.exportOper.getAchievements(
-				localPath
-			);
-			await console.log("获取 UIAF 数据成功，开始导出...");
-			const is_save = await dialog.save({
-				filters: [
-					{
-						name: "achievements",
-						extensions: ["json"],
-					},
-				],
-			});
-			if (is_save) {
-				await fs.writeTextFile(is_save, JSON.stringify(achievements, null, 4));
-			}
-		},
-	},
+// Store
+const appStore = useAppStore();
+const achievementsStore = useAchievementsStore();
+
+// FileData
+const mergeAchievementMap: TGMap<TGAchievementMap> = new TGMap<TGAchievementMap>(
+	JSON.parse(await fs.readTextFile(appStore.mergePath.achievements))
+);
+const mergeSeriesMap: TGMap<TGSeriesMap> = new TGMap<TGSeriesMap>(
+	JSON.parse(await fs.readTextFile(appStore.mergePath.achievementSeries))
+);
+
+// Data
+let seriesList = ref(mergeSeriesMap.getMap() as Map<TGSeriesMap>);
+let achievementsList = ref(mergeAchievementMap.getMap() as Map<TGAchievementMap>);
+let selectedSeries = ref(-1);
+
+onMounted(async () => {
+	await loadData();
 });
+
+// 加载数据，数据源：合并后的本地数据
+async function loadData() {
+	await achievementsStore.flushData(mergeSeriesMap);
+}
+// 获取标题
+async function getTitle() {
+	return `成就完成数：${achievementsStore.fin_achievements}/${
+		achievementsStore.total_achievements
+	} 完成率：${(
+		(achievementsStore.fin_achievements / achievementsStore.total_achievements) *
+		100
+	).toFixed(2)}%`;
+}
+// 导入 UIAF 数据，进行数据合并、刷新
+async function importJson() {
+	const localPath = appStore.userPath.achievements;
+	const selectedFile = await dialog.open({
+		multiple: false,
+		filters: [
+			{
+				name: "JSON",
+				extensions: ["json"],
+			},
+		],
+	});
+	if (selectedFile && (await UIAF_Oper.importOper.checkUIAFData(<string>selectedFile))) {
+		const localRaw: string | false = await UIAF_Oper.importOper.readUIAFData(localPath);
+		const remoteRaw: string | false = await UIAF_Oper.importOper.readUIAFData(<string>selectedFile);
+		if (remoteRaw === false) {
+			await dialog.message("文件格式不正确，导入失败");
+			return;
+		}
+		let remoteData: Achievements = JSON.parse(remoteRaw);
+		let localData: UIAF_Achievement[] = JSON.parse(localRaw || "[]");
+		const mergeUIAF: UIAF_Achievement[] = await UIAF_Oper.importOper.mergeUIAFData(
+			localData,
+			remoteData
+		);
+		await fs.writeTextFile(localPath, JSON.stringify(mergeUIAF, null, 4));
+		// 遍历 mergeUIAF，对 mergeData 进行更新
+		mergeUIAF.map(UIAF_Item => {
+			// 更新成就
+			if (mergeAchievementMap.has(UIAF_Item.id)) {
+				const achievement = mergeAchievementMap.get(UIAF_Item.id);
+				achievement.completed = true;
+				achievement.completed_time = new Date(UIAF_Item.timestamp * 1000).toLocaleString();
+				mergeAchievementMap.set(UIAF_Item.id, achievement);
+				// 如果成就系列中没有该成就，则添加
+				if (!mergeSeriesMap.has(achievement.series)) {
+					const series = mergeSeriesMap.get(achievement.series);
+					series.achievements.push(achievement.id);
+					mergeSeriesMap.set(achievement.series, series);
+				}
+			}
+		});
+		// 更新成就系列
+		mergeSeriesMap.forEach(seriesMap => {
+			let completed = 0;
+			seriesMap.achievements.map(achievement => {
+				if (mergeAchievementMap.get(achievement).completed) {
+					completed++;
+				}
+			});
+			seriesMap.completed_count = completed;
+			seriesMap.total_count = seriesMap.achievements.length;
+			mergeSeriesMap.set(seriesMap.id, seriesMap);
+		});
+		// 写入数据
+		await fs.writeTextFile(
+			appStore.mergePath.achievements,
+			JSON.stringify(mergeAchievementMap.getMap(), null, 4)
+		);
+		await fs.writeTextFile(
+			appStore.mergePath.achievementSeries,
+			JSON.stringify(mergeSeriesMap.getMap(), null, 4)
+		);
+		// 刷新数据
+		await loadData();
+	}
+}
+// 导出
+async function exportJson() {
+	const achievements: Achievements = await UIAF_Oper.exportOper.getAchievements(
+		appStore.userPath.achievements
+	);
+	const is_save = await dialog.save({
+		filters: [
+			{
+				name: "achievements",
+				extensions: ["json"],
+			},
+		],
+	});
+	if (is_save) {
+		await fs.writeTextFile(is_save, JSON.stringify(achievements, null, 4));
+	}
+}
 </script>
 
 <style lang="css"></style>