mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
feat(renderSwitch): 添加渲染模式切换
This commit is contained in:
@@ -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({
|
||||
|
||||
@@ -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`,
|
||||
|
||||
@@ -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`,
|
||||
|
||||
Reference in New Issue
Block a user