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

src/App.vue

@@ -11,21 +11,20 @@
 	</v-layout>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from "vue";
 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({
+const appStore = useAppStore();
-	name: "App",
+
-	components: {
+onMounted(async () => {
-		TSidebar,
+	await checkLoad();
-	},
+});
-	async mounted() {
+async function checkLoad() {
-		const appStore = useAppStore();
 	if (!appStore.loading) {
 		try {
 			await fs.readDir(`${appStore.dataPath.app}`);
@@ -42,7 +41,7 @@ export default defineComponent({
 		} catch (e) {
 			await fs.createDir("mergeData", { dir: BaseDirectory.AppLocalData });
 		}
-			await console.log("检测到数据未加载，开始加载数据...");
+		console.log("检测到数据未加载，开始加载数据...");
 		TGAppDataList.AppData.map(async item => {
 			await fs.writeFile(
 				`${appStore.dataPath.app}\\${item.name}`,
@@ -56,8 +55,7 @@ export default defineComponent({
 			);
 		});
 		appStore.loading = true;
-			await console.log("数据加载完成！");
+		console.log("数据加载完成！");
 	}
-	},
+}
-});
 </script>

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 @click="importJson" prepend-icon="mdi-import" class="bg-green-accent-2"> 导入 </v-btn>
-				导入
-			</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">
+<script lang="ts" setup>
-import { defineComponent } from "vue";
 import useAppStore from "../store/modules/app";
 import useAchievementsStore from "../store/modules/achievements";
 import UIAF_Oper from "../plugins/UIAF";
@@ -36,55 +33,44 @@ import {
 } from "../interface/Achievements";
 import TGMap from "../utils/TGMap";
 import { Map } from "../interface/Base";
+import { onMounted, ref } from "vue";
 
-export default defineComponent({
+// Store
-	name: "Achievements",
+const appStore = useAppStore();
-	data() {
+const achievementsStore = useAchievementsStore();
-		return {
+
-			// 标题 成就完成数/成就总数 完成率
+// FileData
-			title: "" as string,
+const mergeAchievementMap: TGMap<TGAchievementMap> = new TGMap<TGAchievementMap>(
-			// 成就系列列表，用于侧边栏
+	JSON.parse(await fs.readTextFile(appStore.mergePath.achievements))
-			seriesList: {} as Map<TGSeriesMap>,
+);
-			// 成就列表-所有成就的数据
+const mergeSeriesMap: TGMap<TGSeriesMap> = new TGMap<TGSeriesMap>(
-			achievementsList: {} as Map<TGAchievementMap>,
+	JSON.parse(await fs.readTextFile(appStore.mergePath.achievementSeries))
-			// 选中的成就系列 id，用于决定右侧显示的成就列表
+);
-			selectedSeries: -1 as number,
+
-		};
+// Data
-	},
+let seriesList = ref(mergeSeriesMap.getMap() as Map<TGSeriesMap>);
-	async mounted() {
+let achievementsList = ref(mergeAchievementMap.getMap() as Map<TGAchievementMap>);
-		await this.loadData();
+let selectedSeries = ref(-1);
-	},
+
-	methods: {
+onMounted(async () => {
-		// 加载数据，数据源：合并后的本地数据
+	await loadData();
-		async loadData() {
+});
-			const appStore = useAppStore();
+
-			const achievementsStore = useAchievementsStore();
+// 加载数据，数据源：合并后的本地数据
-			const localSeriesPath = appStore.mergePath.achievementSeries;
+async function loadData() {
-			const localAchievementsPath = appStore.mergePath.achievements;
+	await achievementsStore.flushData(mergeSeriesMap);
-			const seriesMap: TGMap<TGSeriesMap> = new TGMap<TGSeriesMap>(
+}
-				JSON.parse(await fs.readTextFile(localSeriesPath))
+// 获取标题
-			);
+async function getTitle() {
-			const achievementsMap: TGMap<TGAchievementMap> = new TGMap<TGAchievementMap>(
+	return `成就完成数：${achievementsStore.fin_achievements}/${
-				JSON.parse(await fs.readTextFile(localAchievementsPath))
+		achievementsStore.total_achievements
-			);
+	} 完成率：${(
-			await achievementsStore.flushData(seriesMap);
+		(achievementsStore.fin_achievements / achievementsStore.total_achievements) *
-			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 数据，进行数据合并、刷新
+// 导入 UIAF 数据，进行数据合并、刷新
-		async importJson() {
+async function importJson() {
-			const appStore = useAppStore();
 	const localPath = appStore.userPath.achievements;
 	const selectedFile = await dialog.open({
 		multiple: false,
@@ -97,37 +83,25 @@ export default defineComponent({
 	});
 	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(
+		const remoteRaw: string | false = await UIAF_Oper.importOper.readUIAFData(<string>selectedFile);
-					<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(
+				achievement.completed_time = new Date(UIAF_Item.timestamp * 1000).toLocaleString();
-							UIAF_Item.timestamp * 1000
-						).toLocaleString();
 				mergeAchievementMap.set(UIAF_Item.id, achievement);
 				// 如果成就系列中没有该成就，则添加
 				if (!mergeSeriesMap.has(achievement.series)) {
@@ -159,18 +133,14 @@ export default defineComponent({
 			JSON.stringify(mergeSeriesMap.getMap(), null, 4)
 		);
 		// 刷新数据
-				await this.loadData();
+		await loadData();
 	}
-		},
+}
-		// 导出
+// 导出
-		async exportJson() {
+async function exportJson() {
-			const appStore = useAppStore();
-			const localPath = appStore.userPath.achievements;
-			await console.log("正在获取 UIAF 数据...");
 	const achievements: Achievements = await UIAF_Oper.exportOper.getAchievements(
-				localPath
+		appStore.userPath.achievements
 	);
-			await console.log("获取 UIAF 数据成功，开始导出...");
 	const is_save = await dialog.save({
 		filters: [
 			{
@@ -182,9 +152,7 @@ export default defineComponent({
 	if (is_save) {
 		await fs.writeTextFile(is_save, JSON.stringify(achievements, null, 4));
 	}
-		},
+}
-	},
-});
 </script>
 
 <style lang="css"></style>

src/pages/Config.vue

@@ -29,32 +29,24 @@
 	</v-card>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from "vue";
 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",
+// Store
-	data() {
+const appStore = useAppStore();
-		return {
+
-			source: "本地",
+// 打开用户数据目录
-			appStore: useAppStore(),
+async function openMergeData() {
-		};
-	},
-	methods: {
-		// 打开数据文件夹
-		async openMergeData() {
-			const appStore = useAppStore();
-			const mergeDataPath = appStore.dataPath.merge;
 	await dialog.open({
-				defaultPath: mergeDataPath,
+		defaultPath: appStore.dataPath.merge,
 		filters: [],
 	});
-		},
+}
-		// 删除数据
+// 删除本地数据
-		async deleteData() {
+async function deleteData() {
 	const res = await dialog.confirm("确定要删除用户数据吗?");
 	if (res) {
 		await fs.removeDir("userData", {
@@ -68,7 +60,6 @@ export default defineComponent({
 		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}`,
@@ -76,18 +67,15 @@ export default defineComponent({
 			);
 		});
 	}
-		},
+}
-		// 恢复默认配置
+// 恢复默认配置
-		async setDefaultConfig() {
+async function setDefaultConfig() {
 	const res = await dialog.confirm("确定要恢复默认配置吗?");
 	if (res) {
-				const appStore = useAppStore();
 		await appStore.init();
 		await dialog.message("已恢复默认配置!");
 	}
-		},
+}
-	},
-});
 </script>
 
 <style lang="css"></style>

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">
+<script lang="ts" setup>
-import { defineComponent } from "vue";
 import useDevStore from "../store/modules/dev";
 import useAppStore from "../store/modules/app";
 import { dialog, fs } from "@tauri-apps/api";
@@ -36,43 +35,22 @@ import {
 import TGMap from "../utils/TGMap";
 import { TGAppData } from "../data";
 
-export default defineComponent({
+// Store
-	name: "Dev",
+const appStore = useAppStore();
-	data() {
+const devStore = useDevStore();
-		return {
+
-			originRaw: {
+async function parseAchievement() {
-				Hutao: "" as string,
-				Paimon: "" as string,
-			},
-		};
-	},
-	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,
@@ -82,8 +60,6 @@ export default defineComponent({
 		};
 		achievementSeries.push(achievementSeriesItem);
 	});
-			console.log("解析胡桃成就系列数据成功！");
-			console.log("正在解析胡桃成就数据...");
 	hutaoAchievementData.map(hutaoAchievementItem => {
 		const achievementItem: TGAchievement = {
 			id: hutaoAchievementItem.Id,
@@ -97,19 +73,14 @@ export default defineComponent({
 		};
 		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 相同的成就
@@ -157,33 +128,20 @@ export default defineComponent({
 			seriesItem.version = achievementVersion;
 		}
 	});
-			console.log("解析 Paimon.moe 成就数据成功！");
 	//	输出数据
-			console.log("正在输出目标数据...");
-			// 输出成就系列数据
-			console.log("正在输出成就系列数据...");
 	await fs.writeFile(
 		`${appDataDir}\\achievementSeries.json`,
 		JSON.stringify(achievementSeries, null, 4)
 	);
-			console.log("输出成就系列数据成功！");
+	await fs.writeFile(`${appDataDir}\\achievements.json`, JSON.stringify(achievement, null, 4));
-			// 输出成就数据
-			console.log("正在输出成就数据...");
-			await fs.writeFile(
-				`${appDataDir}\\achievements.json`,
-				JSON.stringify(achievement, null, 4)
-			);
-			console.log("输出成就数据成功！");
 	await dialog.message("文件已导出至 " + appDataDir);
-		},
+}
-		async mergeAchievement() {
+async function 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>();
 	// 先遍历成就系列生成成就系列数据
@@ -216,24 +174,17 @@ export default defineComponent({
 		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);
-		},
+}
-	},
-});
 </script>
 
 <style lang="css"></style>

src/pages/Home.vue

@@ -2,12 +2,6 @@
 	<h1>首页</h1>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup></script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-	name: "Home",
-});
-</script>
 
 <style lang="css"></style>

src/pages/News.vue

@@ -67,8 +67,8 @@
 	</v-window>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from "vue";
+import { onMounted, ref } from "vue";
 import {
 	MysPostType,
 	ResponseNewsList,
@@ -79,55 +79,46 @@ 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",
+const tab = ref("activity");
-	// 进入页面时，获取数据
+let postData = {
-	mounted() {
-		this.getPosts();
-	},
-	data() {
-		return {
-			tab: "activity",
-			postData: {
 	activity: {} as CardDataType[],
 	news: {} as CardDataType[],
 	notice: {} as CardDataType[],
-			},
+};
-		};
+
-	},
+onMounted(async () => {
-	methods: {
+	await getPosts();
-		async getPosts() {
+});
-			console.log("正在获取数据...");
+
-			console.log("正在获取活动数据...");
+async function getPosts() {
 	const activityRaw: ResponseNewsList = await http
-				.fetch(MysApi + EnumPostType.Activity)
+		.fetch(MysNewsApi + EnumPostType.Activity)
 		.then(res => res.data as Promise<ResponseNewsList>);
-			console.log("正在获取新闻数据...");
 	const newsRaw: ResponseNewsList = await http
-				.fetch(MysApi + EnumPostType.News)
+		.fetch(MysNewsApi + EnumPostType.News)
 		.then(res => res.data as Promise<ResponseNewsList>);
-			console.log("正在获取公告数据...");
 	const noticeRaw: ResponseNewsList = await http
-				.fetch(MysApi + EnumPostType.Notice)
+		.fetch(MysNewsApi + EnumPostType.Notice)
 		.then(res => res.data as Promise<ResponseNewsList>);
-			console.log("数据获取完毕,正在转换数据...");
+	postData = {
-			console.log("正在转换数据...");
+		activity: transData(activityRaw),
-			this.postData = {
+		news: transData(newsRaw),
-				activity: this.transData(activityRaw),
+		notice: transData(noticeRaw),
-				news: this.transData(newsRaw),
-				notice: this.transData(noticeRaw),
 	};
-			console.log("数据转换完毕");
+}
-		},
+function transData(rawData: ResponseNewsList) {
-		transData(rawData: ResponseNewsList) {
 	let cardData: CardDataType[] = [];
 	rawData.data.list.map((item: ResponseNews) => {
 		const postData: MysPostType = item.post;
@@ -139,10 +130,10 @@ export default defineComponent({
 		return cardData.push(card);
 	});
 	return cardData;
-		},
+}
-		async toPost(post_id: string) {
+async function toPost(post_id: string) {
 	// 获取帖子内容
-			const post: MysPostType = await this.getPost(post_id).then(res => {
+	const post: MysPostType = await getPost(post_id).then(res => {
 		return res.data.post.post;
 	});
 	// 将内容转换为 html
@@ -178,11 +169,10 @@ export default defineComponent({
 	// 	height: 720,
 	// 	resizable: false,
 	// });
-		},
+}
-		getPost(post_id: string): Promise<ResponsePost> {
+async function 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, {
+		.fetch(`${MysPostApi}${post_id}`, {
 			method: "GET",
 			headers: {
 				referer: `https://bbs.mihoyo.com/ys/article/${post_id}`,
@@ -191,9 +181,7 @@ export default defineComponent({
 		.then(res => {
 			return res.data as Promise<ResponsePost>;
 		});
-		},
+}
-	},
-});
 </script>
 
 <style lang="css">

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(
+		const localAchievement = localData.find(achievement => achievement.id === remoteAchievement.id);
-			achievement => achievement.id === remoteAchievement.id
-		);
 		// 如果没找到，就直接添加
 		if (localAchievement === undefined) {
 			localData.push(remoteAchievement);

src/store/modules/dev.ts

@@ -8,6 +8,12 @@ const useDevStore = defineStore({
 			magicCount: 0,
 		};
 	},
+	actions: {
+		init() {
+			this.showDev = false;
+			this.magicCount = 0;
+		},
+	},
 	persist: true,
 });