From 4fdfe5f4ad1eaa5a12cba9cb72720b3a526a2be8 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sun, 12 Mar 2023 19:33:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(renderSwitch):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Config.vue     | 31 +++++++++++++++++++++++++++++++
 src/pages/News.vue       | 14 ++++++++++++--
 src/store/modules/app.ts |  4 ++++
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/pages/Config.vue b/src/pages/Config.vue
index 1f4fa162..9a867d9b 100644
--- a/src/pages/Config.vue
+++ b/src/pages/Config.vue
@@ -18,6 +18,25 @@
 			</v-list-item>
 		</v-list>
 	</v-card>
+	<v-card style="margin-bottom: 10px">
+		<v-list>
+			<v-list-item>
+				<v-list-item-title>咨讯页渲染模式</v-list-item-title>
+				<v-list-item-subtitle
+					>样式上 raw 数据渲染更为合适，如果帖子有视频，建议采用结构化渲染</v-list-item-subtitle
+				>
+				<template v-slot:append>
+					<v-switch
+						:label="renderMode"
+						inset
+						v-model="renderBool"
+						@click="changeRenderMode"
+						color="primary"
+					/>
+				</template>
+			</v-list-item>
+		</v-list>
+	</v-card>
 	<v-card style="margin-bottom: 10px">
 		<v-list>
 			<v-list-item prepend-icon="mdi-folder">
@@ -33,6 +52,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
 import useAppStore from "../store/modules/app";
 import useAchievementsStore from "../store/modules/achievements";
 import { dialog, fs } from "@tauri-apps/api";
@@ -43,6 +63,17 @@ import { TGAppDataList } from "../data";
 const appStore = useAppStore();
 const achievementsStore = useAchievementsStore();
 
+const renderBool = ref(appStore.structureRender);
+const renderMode = ref("raw渲染");
+
+// 切换渲染模式
+function changeRenderMode() {
+	renderBool.value = !renderBool.value;
+	renderBool.value ? (renderMode.value = "结构化渲染") : (renderMode.value = " raw 渲染");
+	appStore.structureRender = renderBool.value;
+	dialog.message("已切换渲染模式为" + renderMode.value);
+}
+
 // 打开用户数据目录
 async function openMergeData() {
 	await dialog.open({
diff --git a/src/pages/News.vue b/src/pages/News.vue
index 762a790d..80814e5a 100644
--- a/src/pages/News.vue
+++ b/src/pages/News.vue
@@ -120,6 +120,9 @@ import { parseMys } from "../utils/MysParse";
 const devStore = useDevStore();
 const appStore = useAppStore();
 
+// 渲染模式
+const renderMode = ref(appStore.structureRender);
+
 // 接口 todo：考虑放到 interface 文件夹下?
 interface CardDataType {
 	title: string;
@@ -181,8 +184,15 @@ async function toPost(post_id: string) {
 	const post: MysPostType = await getPost(post_id).then(res => {
 		return res.data.post.post;
 	});
-	// 解析 json
-	const parseDoc = parseMys(post.structured_content);
+	let parseDoc: Document;
+	// 获取渲染模式
+	if (renderMode.value) {
+		// 结构化渲染
+		parseDoc = parseMys(post.structured_content);
+	} else {
+		// 原始渲染
+		parseDoc = new DOMParser().parseFromString(post.content, "text/html");
+	}
 	// 将解析后的 doc 保存到 文件
 	await fs.writeTextFile(
 		`${appStore.dataPath.temp}\\${post_id}.html`,
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 2fa83c9d..647b395a 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -27,6 +27,8 @@ const useAppStore = defineStore({
 			loading: false,
 			// 侧边栏设置
 			sidebar: true,
+			// 咨讯页渲染模式
+			structureRender: true, // 是否采用结构化渲染，否则采用 raw 渲染
 			// 数据路径
 			dataPath: {
 				app: appDataDir,
@@ -64,6 +66,8 @@ const useAppStore = defineStore({
 			this.loading = false;
 			// 初始化侧边栏设置
 			this.sidebar = true;
+			// 初始化咨讯页渲染模式
+			this.structureRender = true;
 			// 初始化用户数据路径
 			this.userPath = {
 				achievements: `${userDataDir}\\achievements.json`,