From 5bf45c6080ca67e47abc59a892277ff31cfa4f7b Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Thu, 9 Mar 2023 16:19:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor(vue):=20=E9=87=8D=E6=9E=84=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=EF=BC=8C=E9=87=87=E7=94=A8setup=E8=AF=AD=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |  82 ++++---
 src/pages/Achievements.vue           | 274 ++++++++++------------
 src/pages/Config.vue                 |  98 ++++----
 src/pages/Dev.vue                    | 339 ++++++++++++---------------
 src/pages/Home.vue                   |   8 +-
 src/pages/News.vue                   | 208 ++++++++--------
 src/plugins/UIAF/utils/importData.ts |   4 +-
 src/store/modules/dev.ts             |   6 +
 8 files changed, 455 insertions(+), 564 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 87953fb1..fa890ac7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,53 +11,51 @@
 	</v-layout>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
 import TSidebar from "./components/t-sidebar.vue";
 import useAppStore from "./store/modules/app";
 import { TGAppDataList } from "./data";
 import { fs } from "@tauri-apps/api";
 import { BaseDirectory } from "@tauri-apps/api/fs";
+import { onMounted } from "vue";
 
-export default defineComponent({
-	name: "App",
-	components: {
-		TSidebar,
-	},
-	async mounted() {
-		const appStore = useAppStore();
-		if (!appStore.loading) {
-			try {
-				await fs.readDir(`${appStore.dataPath.app}`);
-			} catch (e) {
-				await fs.createDir("appData", { dir: BaseDirectory.AppLocalData });
-			}
-			try {
-				await fs.readDir(`${appStore.dataPath.user}`);
-			} catch (e) {
-				await fs.createDir("userData", { dir: BaseDirectory.AppLocalData });
-			}
-			try {
-				await fs.readDir(`${appStore.dataPath.merge}`);
-			} catch (e) {
-				await fs.createDir("mergeData", { dir: BaseDirectory.AppLocalData });
-			}
-			await console.log("检测到数据未加载，开始加载数据...");
-			TGAppDataList.AppData.map(async item => {
-				await fs.writeFile(
-					`${appStore.dataPath.app}\\${item.name}`,
-					JSON.stringify(item.data, null, 4)
-				);
-			});
-			TGAppDataList.MergeData.map(async item => {
-				await fs.writeFile(
-					`${appStore.dataPath.merge}\\${item.name}`,
-					JSON.stringify(item.data, null, 4)
-				);
-			});
-			appStore.loading = true;
-			await console.log("数据加载完成！");
-		}
-	},
+const appStore = useAppStore();
+
+onMounted(async () => {
+	await checkLoad();
 });
+async function checkLoad() {
+	if (!appStore.loading) {
+		try {
+			await fs.readDir(`${appStore.dataPath.app}`);
+		} catch (e) {
+			await fs.createDir("appData", { dir: BaseDirectory.AppLocalData });
+		}
+		try {
+			await fs.readDir(`${appStore.dataPath.user}`);
+		} catch (e) {
+			await fs.createDir("userData", { dir: BaseDirectory.AppLocalData });
+		}
+		try {
+			await fs.readDir(`${appStore.dataPath.merge}`);
+		} catch (e) {
+			await fs.createDir("mergeData", { dir: BaseDirectory.AppLocalData });
+		}
+		console.log("检测到数据未加载，开始加载数据...");
+		TGAppDataList.AppData.map(async item => {
+			await fs.writeFile(
+				`${appStore.dataPath.app}\\${item.name}`,
+				JSON.stringify(item.data, null, 4)
+			);
+		});
+		TGAppDataList.MergeData.map(async item => {
+			await fs.writeFile(
+				`${appStore.dataPath.merge}\\${item.name}`,
+				JSON.stringify(item.data, null, 4)
+			);
+		});
+		appStore.loading = true;
+		console.log("数据加载完成！");
+	}
+}
 </script>
diff --git a/src/pages/Achievements.vue b/src/pages/Achievements.vue
index e288750d..a0973432 100644
--- a/src/pages/Achievements.vue
+++ b/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>
diff --git a/src/pages/Config.vue b/src/pages/Config.vue
index 89db49f5..4cd54cf9 100644
--- a/src/pages/Config.vue
+++ b/src/pages/Config.vue
@@ -29,65 +29,53 @@
 	</v-card>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
 import useAppStore from "../store/modules/app";
 import { dialog, fs } from "@tauri-apps/api";
 import { BaseDirectory } from "@tauri-apps/api/fs";
 import { TGAppDataList } from "../data";
-export default defineComponent({
-	name: "Config",
-	data() {
-		return {
-			source: "本地",
-			appStore: useAppStore(),
-		};
-	},
-	methods: {
-		// 打开数据文件夹
-		async openMergeData() {
-			const appStore = useAppStore();
-			const mergeDataPath = appStore.dataPath.merge;
-			await dialog.open({
-				defaultPath: mergeDataPath,
-				filters: [],
-			});
-		},
-		// 删除数据
-		async deleteData() {
-			const res = await dialog.confirm("确定要删除用户数据吗?");
-			if (res) {
-				await fs.removeDir("userData", {
-					dir: BaseDirectory.AppLocalData,
-					recursive: true,
-				});
-				await fs.removeDir("mergeData", {
-					dir: BaseDirectory.AppLocalData,
-					recursive: true,
-				});
-				await dialog.message("用户数据已删除!");
-				await fs.createDir("userData", { dir: BaseDirectory.AppLocalData });
-				await fs.createDir("mergeData", { dir: BaseDirectory.AppLocalData });
-				const appStore = useAppStore();
-				TGAppDataList.MergeData.map(async item => {
-					await fs.writeFile(
-						`${appStore.dataPath.merge}\\${item.name}`,
-						JSON.stringify(item.data, null, 4)
-					);
-				});
-			}
-		},
-		// 恢复默认配置
-		async setDefaultConfig() {
-			const res = await dialog.confirm("确定要恢复默认配置吗?");
-			if (res) {
-				const appStore = useAppStore();
-				await appStore.init();
-				await dialog.message("已恢复默认配置!");
-			}
-		},
-	},
-});
+
+// Store
+const appStore = useAppStore();
+
+// 打开用户数据目录
+async function openMergeData() {
+	await dialog.open({
+		defaultPath: appStore.dataPath.merge,
+		filters: [],
+	});
+}
+// 删除本地数据
+async function deleteData() {
+	const res = await dialog.confirm("确定要删除用户数据吗?");
+	if (res) {
+		await fs.removeDir("userData", {
+			dir: BaseDirectory.AppLocalData,
+			recursive: true,
+		});
+		await fs.removeDir("mergeData", {
+			dir: BaseDirectory.AppLocalData,
+			recursive: true,
+		});
+		await dialog.message("用户数据已删除!");
+		await fs.createDir("userData", { dir: BaseDirectory.AppLocalData });
+		await fs.createDir("mergeData", { dir: BaseDirectory.AppLocalData });
+		TGAppDataList.MergeData.map(async item => {
+			await fs.writeFile(
+				`${appStore.dataPath.merge}\\${item.name}`,
+				JSON.stringify(item.data, null, 4)
+			);
+		});
+	}
+}
+// 恢复默认配置
+async function setDefaultConfig() {
+	const res = await dialog.confirm("确定要恢复默认配置吗?");
+	if (res) {
+		await appStore.init();
+		await dialog.message("已恢复默认配置!");
+	}
+}
 </script>
 
 <style lang="css"></style>
diff --git a/src/pages/Dev.vue b/src/pages/Dev.vue
index 2888a92c..414c843c 100644
--- a/src/pages/Dev.vue
+++ b/src/pages/Dev.vue
@@ -2,7 +2,7 @@
 	<h1>开发</h1>
 	<v-card>
 		<v-list>
-			<v-list-item @click="initDev()" prepend-icon="mdi-refresh">
+			<v-list-item @click="devStore.init()" prepend-icon="mdi-refresh">
 				<v-list-item-title>初始化开发</v-list-item-title>
 			</v-list-item>
 			<v-list-item @click="parseAchievement()" prepend-icon="mdi-export">
@@ -15,8 +15,7 @@
 	</v-card>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
 import useDevStore from "../store/modules/dev";
 import useAppStore from "../store/modules/app";
 import { dialog, fs } from "@tauri-apps/api";
@@ -36,204 +35,156 @@ import {
 import TGMap from "../utils/TGMap";
 import { TGAppData } from "../data";
 
-export default defineComponent({
-	name: "Dev",
-	data() {
-		return {
-			originRaw: {
-				Hutao: "" as string,
-				Paimon: "" as string,
-			},
+// Store
+const appStore = useAppStore();
+const devStore = useDevStore();
+
+async function parseAchievement() {
+	const appDataDir = appStore.devPath.app;
+	// 读取原始数据
+	const hutaoAchievementData: HutaoAchievement[] = SnapHutaoData.Achievement.data;
+	const hutaoGoalData: HutaoGoal[] = SnapHutaoData.AchievementGoal.data;
+	const paimonSeriesMap: TGMap<PaimonSeries> = new TGMap<PaimonSeries>(
+		PaimonMoeData.Achievement.data
+	);
+	// 新建目标数据
+	const achievementSeries: TGSeries[] = [];
+	const achievement: TGAchievement[] = [];
+	// 先解析 Hutao 的成就数据
+	hutaoGoalData.map(hutaoGoalItem => {
+		const achievementSeriesItem: TGSeries = {
+			id: hutaoGoalItem.Id,
+			order: hutaoGoalItem.Order,
+			name: hutaoGoalItem.Name,
+			card: hutaoGoalItem?.FinishReward?.ID,
 		};
-	},
-	methods: {
-		async initDev() {
-			const devStore = useDevStore();
-			devStore.showDev = false;
-			devStore.magicCount = 0;
-		},
-		async parseAchievement() {
-			const appStore = useAppStore();
-			const appDataDir = appStore.devPath.app;
-			console.log("正在读取原始数据...");
-			// 读取原始数据
-			console.log("正在读取 Snap.Hutao 数据库...");
-			const hutaoAchievementData: HutaoAchievement[] = SnapHutaoData.Achievement.data;
-			console.log("读取胡桃成就数据成功！");
-			const hutaoGoalData: HutaoGoal[] = SnapHutaoData.AchievementGoal.data;
-			console.log("读取胡桃成就系列数据成功！");
-			console.log("正在读取 Paimon.moe 数据库...");
-			const paimonSeriesMap: TGMap<PaimonSeries> = new TGMap<PaimonSeries>(
-				PaimonMoeData.Achievement.data
-			);
-			console.log("读取 Paimon.moe 成就数据成功！");
-			// 新建目标数据
-			console.log("正在生成目标数据...");
-			const achievementSeries: TGSeries[] = [];
-			const achievement: TGAchievement[] = [];
-			// 先解析 Hutao 的成就数据
-			console.log("正在解析胡桃成就系列数据...");
-			hutaoGoalData.map(hutaoGoalItem => {
-				const achievementSeriesItem: TGSeries = {
-					id: hutaoGoalItem.Id,
-					order: hutaoGoalItem.Order,
-					name: hutaoGoalItem.Name,
-					card: hutaoGoalItem?.FinishReward?.ID,
-				};
-				achievementSeries.push(achievementSeriesItem);
-			});
-			console.log("解析胡桃成就系列数据成功！");
-			console.log("正在解析胡桃成就数据...");
-			hutaoAchievementData.map(hutaoAchievementItem => {
-				const achievementItem: TGAchievement = {
-					id: hutaoAchievementItem.Id,
-					series: hutaoAchievementItem.Goal,
-					order: hutaoAchievementItem.Order,
-					name: hutaoAchievementItem.Title,
-					description: hutaoAchievementItem.Description,
-					reward: hutaoAchievementItem.FinishReward.ID,
-					version: "",
-					progress: hutaoAchievementItem.Progress,
-				};
-				achievement.push(achievementItem);
-			});
-			console.log("解析胡桃成就数据成功！");
-			// 再解析 Paimon.moe 的成就数据
-			console.log("正在解析 Paimon.moe 成就数据...");
-			// 遍历 Paimon.moe 成就数据
-			paimonSeriesMap.forEach(paimonSeries => {
-				// 寻找成就系列中名称相同的成就系列
-				const seriesItem: TGSeries | undefined = achievementSeries.find(
-					achievementSeriesItem => achievementSeriesItem.name === paimonSeries.name
-				);
-				// 成就版本-暂存
-				let achievementVersion: string = "";
-				paimonSeries.achievements.map(paimonAchievementItem => {
-					// 判断是不是数组
-					if (Array.isArray(paimonAchievementItem)) {
-						paimonAchievementItem.map(paimonAchievement => {
-							// 查找成就中 id 相同的成就
-							const achievementItem: TGAchievement | undefined = achievement.find(
-								achievementItem => achievementItem.id === paimonAchievement.id
-							);
-							if (achievementItem) {
-								// 更新数据
-								achievementItem.version = paimonAchievement.ver;
-								if (seriesItem) {
-									if (achievementVersion === "") {
-										achievementVersion = paimonAchievement.ver;
-									} else {
-										// 比较 v1.1 和 v1.2 的大小
-										if (achievementVersion < paimonAchievement.ver) {
-											achievementVersion = paimonAchievement.ver;
-										}
-									}
-								}
-							}
-						});
-					} else {
-						// 查找成就中 id 相同的成就
-						const achievementItem: TGAchievement | undefined = achievement.find(
-							achievementItem => achievementItem.id === paimonAchievementItem.id
-						);
-						if (achievementItem) {
-							// 更新数据
-							achievementItem.version = paimonAchievementItem.ver;
-							if (seriesItem) {
-								if (achievementVersion === "") {
-									achievementVersion = paimonAchievementItem.ver;
-								} else {
-									// 比较 v1.1 和 v1.2 的大小
-									if (achievementVersion < paimonAchievementItem.ver) {
-										achievementVersion = paimonAchievementItem.ver;
-									}
+		achievementSeries.push(achievementSeriesItem);
+	});
+	hutaoAchievementData.map(hutaoAchievementItem => {
+		const achievementItem: TGAchievement = {
+			id: hutaoAchievementItem.Id,
+			series: hutaoAchievementItem.Goal,
+			order: hutaoAchievementItem.Order,
+			name: hutaoAchievementItem.Title,
+			description: hutaoAchievementItem.Description,
+			reward: hutaoAchievementItem.FinishReward.ID,
+			version: "",
+			progress: hutaoAchievementItem.Progress,
+		};
+		achievement.push(achievementItem);
+	});
+	// 再解析 Paimon.moe 的成就数据
+	paimonSeriesMap.forEach(paimonSeries => {
+		const seriesItem: TGSeries | undefined = achievementSeries.find(
+			achievementSeriesItem => achievementSeriesItem.name === paimonSeries.name
+		);
+		// 成就版本-暂存
+		let achievementVersion: string = "";
+		paimonSeries.achievements.map(paimonAchievementItem => {
+			if (Array.isArray(paimonAchievementItem)) {
+				paimonAchievementItem.map(paimonAchievement => {
+					// 查找成就中 id 相同的成就
+					const achievementItem: TGAchievement | undefined = achievement.find(
+						achievementItem => achievementItem.id === paimonAchievement.id
+					);
+					if (achievementItem) {
+						// 更新数据
+						achievementItem.version = paimonAchievement.ver;
+						if (seriesItem) {
+							if (achievementVersion === "") {
+								achievementVersion = paimonAchievement.ver;
+							} else {
+								// 比较 v1.1 和 v1.2 的大小
+								if (achievementVersion < paimonAchievement.ver) {
+									achievementVersion = paimonAchievement.ver;
 								}
 							}
 						}
 					}
 				});
-				// 更新成就系列版本
-				if (seriesItem && achievementVersion !== "") {
-					seriesItem.version = achievementVersion;
+			} else {
+				// 查找成就中 id 相同的成就
+				const achievementItem: TGAchievement | undefined = achievement.find(
+					achievementItem => achievementItem.id === paimonAchievementItem.id
+				);
+				if (achievementItem) {
+					// 更新数据
+					achievementItem.version = paimonAchievementItem.ver;
+					if (seriesItem) {
+						if (achievementVersion === "") {
+							achievementVersion = paimonAchievementItem.ver;
+						} else {
+							// 比较 v1.1 和 v1.2 的大小
+							if (achievementVersion < paimonAchievementItem.ver) {
+								achievementVersion = paimonAchievementItem.ver;
+							}
+						}
+					}
 				}
-			});
-			console.log("解析 Paimon.moe 成就数据成功！");
-			//	输出数据
-			console.log("正在输出目标数据...");
-			// 输出成就系列数据
-			console.log("正在输出成就系列数据...");
-			await fs.writeFile(
-				`${appDataDir}\\achievementSeries.json`,
-				JSON.stringify(achievementSeries, null, 4)
-			);
-			console.log("输出成就系列数据成功！");
-			// 输出成就数据
-			console.log("正在输出成就数据...");
-			await fs.writeFile(
-				`${appDataDir}\\achievements.json`,
-				JSON.stringify(achievement, null, 4)
-			);
-			console.log("输出成就数据成功！");
-			await dialog.message("文件已导出至 " + appDataDir);
-		},
-		async mergeAchievement() {
-			const appStore = useAppStore();
-			const mergeDataDir = appStore.devPath.merge;
-			console.log("正在读取原始数据...");
-			const oriAchievement = TGAppData.AppData.achievements;
-			const oriSeries = TGAppData.AppData.achievementSeries;
-			console.log("读取原始数据成功！");
-			console.log("正在进行处理...");
-			const transSeries: TGMap<TGSeriesMap> = new TGMap<TGSeriesMap>();
-			const transAchievement: TGMap<TGAchievementMap> = new TGMap<TGAchievementMap>();
-			// 先遍历成就系列生成成就系列数据
-			oriSeries.map(oriSeriesItem => {
-				transSeries.set(oriSeriesItem.id, {
-					id: oriSeriesItem.id,
-					order: oriSeriesItem.order,
-					name: oriSeriesItem.name,
-					achievements: [],
-					total_count: 0,
-					completed_count: 0,
-				});
-			});
-			// 遍历成就
-			oriAchievement.map(oriAchievementItem => {
-				// 生成成就数据
-				transAchievement.set(oriAchievementItem.id, {
-					id: oriAchievementItem.id,
-					series: oriAchievementItem.series,
-					order: oriAchievementItem.order,
-					name: oriAchievementItem.name,
-					description: oriAchievementItem.description,
-					reward: oriAchievementItem.reward,
-					completed: false,
-				});
-				// 默认成就系列是完备的，所以不需要判断成就系列是否存在
-				// 更新成就系列数据的 achievements 跟 total_count
-				const seriesItem = transSeries.get(oriAchievementItem.series);
-				seriesItem.achievements.push(oriAchievementItem.id);
-				seriesItem.total_count += 1;
-				transSeries.set(oriAchievementItem.series, seriesItem);
-			});
-			console.log("处理完成！");
-			// 写入文件
-			console.log("正在写入文件...");
-			console.log("正在写入成就系列数据...");
-			await fs.writeTextFile(
-				`${mergeDataDir}\\achievementSeries.json`,
-				JSON.stringify(transSeries.getMap(), null, 4)
-			);
-			console.log("写入成就系列数据成功!正在写入成就数据...");
-			await fs.writeTextFile(
-				`${mergeDataDir}\\achievements.json`,
-				JSON.stringify(transAchievement.getMap(), null, 4)
-			);
-			console.log("写入成就数据成功!");
-			await dialog.message("文件已导出至 " + mergeDataDir);
-		},
-	},
-});
+			}
+		});
+		// 更新成就系列版本
+		if (seriesItem && achievementVersion !== "") {
+			seriesItem.version = achievementVersion;
+		}
+	});
+	//	输出数据
+	await fs.writeFile(
+		`${appDataDir}\\achievementSeries.json`,
+		JSON.stringify(achievementSeries, null, 4)
+	);
+	await fs.writeFile(`${appDataDir}\\achievements.json`, JSON.stringify(achievement, null, 4));
+	await dialog.message("文件已导出至 " + appDataDir);
+}
+async function mergeAchievement() {
+	const mergeDataDir = appStore.devPath.merge;
+	// 读取原始数据
+	const oriAchievement = TGAppData.AppData.achievements;
+	const oriSeries = TGAppData.AppData.achievementSeries;
+	// 读取合并数据
+	const transSeries: TGMap<TGSeriesMap> = new TGMap<TGSeriesMap>();
+	const transAchievement: TGMap<TGAchievementMap> = new TGMap<TGAchievementMap>();
+	// 先遍历成就系列生成成就系列数据
+	oriSeries.map(oriSeriesItem => {
+		transSeries.set(oriSeriesItem.id, {
+			id: oriSeriesItem.id,
+			order: oriSeriesItem.order,
+			name: oriSeriesItem.name,
+			achievements: [],
+			total_count: 0,
+			completed_count: 0,
+		});
+	});
+	// 遍历成就
+	oriAchievement.map(oriAchievementItem => {
+		// 生成成就数据
+		transAchievement.set(oriAchievementItem.id, {
+			id: oriAchievementItem.id,
+			series: oriAchievementItem.series,
+			order: oriAchievementItem.order,
+			name: oriAchievementItem.name,
+			description: oriAchievementItem.description,
+			reward: oriAchievementItem.reward,
+			completed: false,
+		});
+		// 默认成就系列是完备的，所以不需要判断成就系列是否存在
+		// 更新成就系列数据的 achievements 跟 total_count
+		const seriesItem = transSeries.get(oriAchievementItem.series);
+		seriesItem.achievements.push(oriAchievementItem.id);
+		seriesItem.total_count += 1;
+		transSeries.set(oriAchievementItem.series, seriesItem);
+	});
+	// 写入文件
+	await fs.writeTextFile(
+		`${mergeDataDir}\\achievementSeries.json`,
+		JSON.stringify(transSeries.getMap(), null, 4)
+	);
+	await fs.writeTextFile(
+		`${mergeDataDir}\\achievements.json`,
+		JSON.stringify(transAchievement.getMap(), null, 4)
+	);
+	await dialog.message("文件已导出至 " + mergeDataDir);
+}
 </script>
 
 <style lang="css"></style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 988a3a55..b38968dd 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -2,12 +2,6 @@
 	<h1>首页</h1>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-	name: "Home",
-});
-</script>
+<script lang="ts" setup></script>
 
 <style lang="css"></style>
diff --git a/src/pages/News.vue b/src/pages/News.vue
index 5943dd4b..0564c93b 100644
--- a/src/pages/News.vue
+++ b/src/pages/News.vue
@@ -67,8 +67,8 @@
 	</v-window>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
 import {
 	MysPostType,
 	ResponseNewsList,
@@ -79,121 +79,109 @@ import {
 // import { http,window as TauriWindow } from "@tauri-apps/api";
 import { http } from "@tauri-apps/api";
 
-const MysApi = "https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids=2&type=";
+// 常量
+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=";
 
-export interface CardDataType {
+// 接口 todo：考虑放到 interface 文件夹下?
+interface CardDataType {
 	title: string;
 	cover: string;
 	post_id: string;
 }
 
-export default defineComponent({
-	name: "News",
-	// 进入页面时，获取数据
-	mounted() {
-		this.getPosts();
-	},
-	data() {
-		return {
-			tab: "activity",
-			postData: {
-				activity: {} as CardDataType[],
-				news: {} as CardDataType[],
-				notice: {} as CardDataType[],
-			},
-		};
-	},
-	methods: {
-		async getPosts() {
-			console.log("正在获取数据...");
-			console.log("正在获取活动数据...");
-			const activityRaw: ResponseNewsList = await http
-				.fetch(MysApi + EnumPostType.Activity)
-				.then(res => res.data as Promise<ResponseNewsList>);
-			console.log("正在获取新闻数据...");
-			const newsRaw: ResponseNewsList = await http
-				.fetch(MysApi + EnumPostType.News)
-				.then(res => res.data as Promise<ResponseNewsList>);
-			console.log("正在获取公告数据...");
-			const noticeRaw: ResponseNewsList = await http
-				.fetch(MysApi + EnumPostType.Notice)
-				.then(res => res.data as Promise<ResponseNewsList>);
-			console.log("数据获取完毕,正在转换数据...");
-			console.log("正在转换数据...");
-			this.postData = {
-				activity: this.transData(activityRaw),
-				news: this.transData(newsRaw),
-				notice: this.transData(noticeRaw),
-			};
-			console.log("数据转换完毕");
-		},
-		transData(rawData: ResponseNewsList) {
-			let cardData: CardDataType[] = [];
-			rawData.data.list.map((item: ResponseNews) => {
-				const postData: MysPostType = item.post;
-				const card: CardDataType = {
-					title: postData.subject,
-					cover: postData.images[0],
-					post_id: postData.post_id,
-				};
-				return cardData.push(card);
-			});
-			return cardData;
-		},
-		async toPost(post_id: string) {
-			// 获取帖子内容
-			const post: MysPostType = await this.getPost(post_id).then(res => {
-				return res.data.post.post;
-			});
-			// 将内容转换为 html
-			const postHtml = new DOMParser().parseFromString(post.content, "text/html");
-			// 用帖子标题替换 html 中的标题
-			postHtml.title = post.subject;
-			// 四周留白
-			postHtml.body.style.padding = "12%";
-			postHtml.querySelectorAll("img").forEach(img => {
-				img.style.width = "100%";
-			});
-			// 将 html 转为能够通过 window.open 打开的 url
-			const postUrl = URL.createObjectURL(
-				new Blob([postHtml.documentElement.outerHTML], { type: "text/html;charset=utf-8" })
-			);
-			// 打开新窗口，窗口位置居中
-			// 获取窗口宽度
-			const width = window.screen.width;
-			// 获取窗口高度
-			const height = window.screen.height;
-			// 计算窗口位置
-			const left = width / 2 - 480;
-			const top = height / 2 - 360;
-			// 打开窗口
-			window.open(postUrl, "_blank", `width=960,height=720,left=${left},top=${top}`);
-			// new TauriWindow.WebviewWindow("blob", {
-			// 	url: postUrl,
-			// 	title: post.subject,
-			// 	decorations: true,
-			// 	width: 960,
-			// 	x: left,
-			// 	y: top,
-			// 	height: 720,
-			// 	resizable: false,
-			// });
-		},
-		getPost(post_id: string): Promise<ResponsePost> {
-			const postUrl = `https://bbs-api.mihoyo.com/post/wapi/getPostFull?gids=2&post_id=${post_id}`;
-			return http
-				.fetch(postUrl, {
-					method: "GET",
-					headers: {
-						referer: `https://bbs.mihoyo.com/ys/article/${post_id}`,
-					},
-				})
-				.then(res => {
-					return res.data as Promise<ResponsePost>;
-				});
-		},
-	},
+// 数据
+const tab = ref("activity");
+let postData = {
+	activity: {} as CardDataType[],
+	news: {} as CardDataType[],
+	notice: {} as CardDataType[],
+};
+
+onMounted(async () => {
+	await getPosts();
 });
+
+async function getPosts() {
+	const activityRaw: ResponseNewsList = await http
+		.fetch(MysNewsApi + EnumPostType.Activity)
+		.then(res => res.data as Promise<ResponseNewsList>);
+	const newsRaw: ResponseNewsList = await http
+		.fetch(MysNewsApi + EnumPostType.News)
+		.then(res => res.data as Promise<ResponseNewsList>);
+	const noticeRaw: ResponseNewsList = await http
+		.fetch(MysNewsApi + EnumPostType.Notice)
+		.then(res => res.data as Promise<ResponseNewsList>);
+	postData = {
+		activity: transData(activityRaw),
+		news: transData(newsRaw),
+		notice: transData(noticeRaw),
+	};
+}
+function transData(rawData: ResponseNewsList) {
+	let cardData: CardDataType[] = [];
+	rawData.data.list.map((item: ResponseNews) => {
+		const postData: MysPostType = item.post;
+		const card: CardDataType = {
+			title: postData.subject,
+			cover: postData.images[0],
+			post_id: postData.post_id,
+		};
+		return cardData.push(card);
+	});
+	return cardData;
+}
+async function toPost(post_id: string) {
+	// 获取帖子内容
+	const post: MysPostType = await getPost(post_id).then(res => {
+		return res.data.post.post;
+	});
+	// 将内容转换为 html
+	const postHtml = new DOMParser().parseFromString(post.content, "text/html");
+	// 用帖子标题替换 html 中的标题
+	postHtml.title = post.subject;
+	// 四周留白
+	postHtml.body.style.padding = "12%";
+	postHtml.querySelectorAll("img").forEach(img => {
+		img.style.width = "100%";
+	});
+	// 将 html 转为能够通过 window.open 打开的 url
+	const postUrl = URL.createObjectURL(
+		new Blob([postHtml.documentElement.outerHTML], { type: "text/html;charset=utf-8" })
+	);
+	// 打开新窗口，窗口位置居中
+	// 获取窗口宽度
+	const width = window.screen.width;
+	// 获取窗口高度
+	const height = window.screen.height;
+	// 计算窗口位置
+	const left = width / 2 - 480;
+	const top = height / 2 - 360;
+	// 打开窗口
+	window.open(postUrl, "_blank", `width=960,height=720,left=${left},top=${top}`);
+	// new TauriWindow.WebviewWindow("blob", {
+	// 	url: postUrl,
+	// 	title: post.subject,
+	// 	decorations: true,
+	// 	width: 960,
+	// 	x: left,
+	// 	y: top,
+	// 	height: 720,
+	// 	resizable: false,
+	// });
+}
+async function getPost(post_id: string): Promise<ResponsePost> {
+	return 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>;
+		});
+}
 </script>
 
 <style lang="css">
diff --git a/src/plugins/UIAF/utils/importData.ts b/src/plugins/UIAF/utils/importData.ts
index e2d82cba..26acf0ef 100644
--- a/src/plugins/UIAF/utils/importData.ts
+++ b/src/plugins/UIAF/utils/importData.ts
@@ -54,9 +54,7 @@ export async function mergeUIAFData(
 	// 遍历 remoteData.list
 	remoteData.list.map((remoteAchievement: UIAF_Achievement) => {
 		// 查找 id 相同的 localAchievement
-		const localAchievement = localData.find(
-			achievement => achievement.id === remoteAchievement.id
-		);
+		const localAchievement = localData.find(achievement => achievement.id === remoteAchievement.id);
 		// 如果没找到，就直接添加
 		if (localAchievement === undefined) {
 			localData.push(remoteAchievement);
diff --git a/src/store/modules/dev.ts b/src/store/modules/dev.ts
index fa11b607..0180cf99 100644
--- a/src/store/modules/dev.ts
+++ b/src/store/modules/dev.ts
@@ -8,6 +8,12 @@ const useDevStore = defineStore({
 			magicCount: 0,
 		};
 	},
+	actions: {
+		init() {
+			this.showDev = false;
+			this.magicCount = 0;
+		},
+	},
 	persist: true,
 });