feat(json-view): 写了个看json的页面，顺带更新了下依赖

src/assets/fonts/index.css

@@ -3,6 +3,10 @@
 	font-family: "Genshin";
 	src: url("./Genshin.ttf") format("truetype");
 }
+@font-face {
+	font-family: "Consolas";
+	src: url("./consolas.ttf") format("truetype");
+}
 /* 全局字体样式 */
 .global-font {
 	font-family: "Genshin", sans-serif;

src/assets/index.css

@@ -27,3 +27,18 @@
 .mys-post-span {
 	line-height: 2;
 }
+
+.mys-post-json {
+	padding: 20px;
+	border-radius: 20px;
+}
+
+.mys-post-json * {
+	color: #faf7e8 !important;
+	background-color: #2b2b2b !important;
+	font-family: "Consolas", monospace;
+}
+
+.mys-post-json .jv-toggle {
+	background-color: #faf7e8 !important;
+}

src/main.ts

@@ -1,3 +1,4 @@
+// vue
 import { createApp } from "vue";
 import App from "./App.vue";
 // 路由
@@ -9,5 +10,8 @@ import "vuetify/styles";
 import { createVuetify } from "vuetify";
 // 全局样式
 import "./assets/index.css";
+// plugins
+// @ts-ignore
+import JsonViewer from "vue-json-viewer";
 
-createApp(App).use(router).use(store).use(createVuetify()).mount("#app");
+createApp(App).use(router).use(store).use(createVuetify()).use(JsonViewer).mount("#app");

src/pages/News.vue

@@ -26,7 +26,7 @@
 								查看
 							</v-btn>
 							<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
-							<v-btn @click="toJson(item.post_id)" class="ms-2 card-btn" v-show="appStore.devMode">
+							<v-btn @click="toJson(item)" class="ms-2 card-btn" v-show="appStore.devMode">
 								<template v-slot:prepend>
 									<img src="../assets/icons/arrow-right.svg" alt="right" onload="SVGInject(this)" />
 								</template>
@@ -66,13 +66,13 @@
 								<v-btn
 									class="ms-2"
 									:style="{
-										background: item.status.colorCss,
+										background: item.status?.colorCss,
 										color: '#faf7e8 !important',
 									}"
-									>{{ item.status.status }}</v-btn
+									>{{ item.status?.status }}</v-btn
 								>
 							</div>
-							<v-btn @click="toJson(item.post_id)" class="ms-2 card-btn" v-show="appStore.devMode">
+							<v-btn @click="toJson(item)" class="ms-2 card-btn" v-show="appStore.devMode">
 								<template v-slot:prepend>
 									<img src="../assets/icons/arrow-right.svg" alt="right" onload="SVGInject(this)" />
 								</template>
@@ -107,7 +107,7 @@
 								查看
 							</v-btn>
 							<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
-							<v-btn @click="toJson(item.post_id)" class="ms-2 card-btn" v-show="appStore.devMode">
+							<v-btn @click="toJson(item)" class="ms-2 card-btn" v-show="appStore.devMode">
 								<template v-slot:prepend>
 									<img src="../assets/icons/arrow-right.svg" alt="right" onload="SVGInject(this)" />
 								</template>
@@ -134,7 +134,7 @@
 import { onMounted, ref } from "vue";
 import TLoading from "../components/t-loading.vue";
 // tauri
-import { dialog, fs } from "@tauri-apps/api";
+import { dialog } from "@tauri-apps/api";
 // store
 import useAppStore from "../store/modules/app";
 // tools
@@ -238,16 +238,16 @@ async function toPost(item: NewsCard) {
 	// 打开新窗口
 	createTGWindow(path, "帖子", item.title, 960, 720, false);
 }
-async function toJson(post_id: number) {
-	const post: string = (await MysOper.Post.get(post_id)).post.structured_content;
-	// 将 json 保存到 文件
-	await fs.writeTextFile(
-		`${appStore.dataPath.temp}\\${post_id}.json`,
-		JSON.stringify(JSON.parse(post), null, 4)
-	);
-	const logUrl = `file:\\\\\\${appStore.dataPath.temp}\\${post_id}.json`;
-	// 打开窗口
-	createTGWindow(logUrl, "MysPostJson", post_id.toString(), 960, 720, false);
+async function toJson(item: NewsCard) {
+	// 获取路由路径
+	const path = router.resolve({
+		name: "帖子详情（JSON）",
+		params: {
+			post_id: item.post_id.toString(),
+		},
+	}).href;
+	// 打开新窗口
+	createTGWindow(path, "帖子-JSON", `${item.title}-JSON`, 960, 720, false);
 }
 </script>
 

src/views/t-post-json.vue

@@ -1,2 +1,40 @@
-<template></template>
-<script lang="ts"></script>
+<template>
+	<div v-if="loading">
+		<t-loading :empty="loadingEmpty" :title="loadingTitle" />
+	</div>
+	<div v-else class="mys-post-json">
+		<json-viewer :value="jsonData" copyable boxed />
+	</div>
+</template>
+<script lang="ts" setup>
+// vue
+import { ref, onMounted, reactive } from "vue";
+import { useRoute } from "vue-router";
+import TLoading from "../components/t-loading.vue";
+// plugins
+import MysOper from "../plugins/Mys";
+
+// loading
+const loading = ref(true as boolean);
+const loadingTitle = ref("正在加载");
+const loadingEmpty = ref(false as boolean);
+
+// 数据
+const post_id = Number(useRoute().params.post_id);
+let jsonData = reactive({});
+
+onMounted(async () => {
+	// 检查数据
+	if (!post_id) {
+		loadingEmpty.value = true;
+		loadingTitle.value = "未找到数据";
+		return;
+	}
+	// 获取数据
+	loadingTitle.value = "正在获取数据...";
+	jsonData = await MysOper.Post.get(post_id);
+	setInterval(() => {
+		loading.value = false;
+	}, 200);
+});
+</script>