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

package.json

@@ -30,24 +30,25 @@
 		"url": "git+https://github.com/BTMuli/Tauri.Genshin.git"
 	},
 	"dependencies": {
-		"@mdi/font": "5.9.55",
+		"@mdi/font": "7.2.96",
 		"@tauri-apps/api": "^1.2.0",
-		"ant-design-vue": "^3.2.15",
+		"clipboard": "^2.0.11",
-		"vue": "^3.2.45",
+		"vue": "^3.2.47",
+		"vue-json-viewer": "^3.0.4",
 		"vuetify": "npm:@vuetify/nightly@next"
 	},
 	"devDependencies": {
-		"@tauri-apps/cli": "^1.2.2",
+		"@tauri-apps/cli": "^1.2.3",
-		"@types/node": "^18.7.10",
+		"@types/node": "^18.15.11",
-		"@vitejs/plugin-vue": "^4.0.0",
+		"@vitejs/plugin-vue": "^4.1.0",
-		"pinia": "^2.0.32",
+		"pinia": "^2.0.33",
 		"pinia-plugin-persistedstate": "^3.1.0",
-		"prettier": "^2.8.4",
+		"prettier": "^2.8.7",
-		"typescript": "^4.6.4",
+		"typescript": "^5.0.2",
-		"vite": "^4.0.0",
+		"vite": "^4.2.1",
 		"vite-plugin-vuetify": "^1.0.2",
 		"vue-router": "^4.1.6",
-		"vue-tsc": "^1.0.11",
+		"vue-tsc": "^1.2.0",
-		"vuetify": "^3.1.7"
+		"vuetify": "^3.1.12"
 	}
 }

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) {
+async function toJson(item: NewsCard) {
-	const post: string = (await MysOper.Post.get(post_id)).post.structured_content;
+	// 获取路由路径
-	// 将 json 保存到 文件
+	const path = router.resolve({
-	await fs.writeTextFile(
+		name: "帖子详情（JSON）",
-		`${appStore.dataPath.temp}\\${post_id}.json`,
+		params: {
-		JSON.stringify(JSON.parse(post), null, 4)
+			post_id: item.post_id.toString(),
-	);
+		},
-	const logUrl = `file:\\\\\\${appStore.dataPath.temp}\\${post_id}.json`;
+	}).href;
-	// 打开窗口
+	// 打开新窗口
-	createTGWindow(logUrl, "MysPostJson", post_id.toString(), 960, 720, false);
+	createTGWindow(path, "帖子-JSON", `${item.title}-JSON`, 960, 720, false);
 }
 </script>
 

src/views/t-post-json.vue

@@ -1,2 +1,40 @@
-<template></template>
+<template>
-<script lang="ts"></script>
+	<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>