mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-13 09:28:14 +08:00
feat(renderSwitch): 添加渲染模式切换
This commit is contained in:
@@ -18,6 +18,25 @@
|
|||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-card>
|
</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-card style="margin-bottom: 10px">
|
||||||
<v-list>
|
<v-list>
|
||||||
<v-list-item prepend-icon="mdi-folder">
|
<v-list-item prepend-icon="mdi-folder">
|
||||||
@@ -33,6 +52,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { ref } from "vue";
|
||||||
import useAppStore from "../store/modules/app";
|
import useAppStore from "../store/modules/app";
|
||||||
import useAchievementsStore from "../store/modules/achievements";
|
import useAchievementsStore from "../store/modules/achievements";
|
||||||
import { dialog, fs } from "@tauri-apps/api";
|
import { dialog, fs } from "@tauri-apps/api";
|
||||||
@@ -43,6 +63,17 @@ import { TGAppDataList } from "../data";
|
|||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const achievementsStore = useAchievementsStore();
|
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() {
|
async function openMergeData() {
|
||||||
await dialog.open({
|
await dialog.open({
|
||||||
|
|||||||
@@ -120,6 +120,9 @@ import { parseMys } from "../utils/MysParse";
|
|||||||
const devStore = useDevStore();
|
const devStore = useDevStore();
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
// 渲染模式
|
||||||
|
const renderMode = ref(appStore.structureRender);
|
||||||
|
|
||||||
// 接口 todo:考虑放到 interface 文件夹下?
|
// 接口 todo:考虑放到 interface 文件夹下?
|
||||||
interface CardDataType {
|
interface CardDataType {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -181,8 +184,15 @@ async function toPost(post_id: string) {
|
|||||||
const post: MysPostType = await getPost(post_id).then(res => {
|
const post: MysPostType = await getPost(post_id).then(res => {
|
||||||
return res.data.post.post;
|
return res.data.post.post;
|
||||||
});
|
});
|
||||||
// 解析 json
|
let parseDoc: Document;
|
||||||
const parseDoc = parseMys(post.structured_content);
|
// 获取渲染模式
|
||||||
|
if (renderMode.value) {
|
||||||
|
// 结构化渲染
|
||||||
|
parseDoc = parseMys(post.structured_content);
|
||||||
|
} else {
|
||||||
|
// 原始渲染
|
||||||
|
parseDoc = new DOMParser().parseFromString(post.content, "text/html");
|
||||||
|
}
|
||||||
// 将解析后的 doc 保存到 文件
|
// 将解析后的 doc 保存到 文件
|
||||||
await fs.writeTextFile(
|
await fs.writeTextFile(
|
||||||
`${appStore.dataPath.temp}\\${post_id}.html`,
|
`${appStore.dataPath.temp}\\${post_id}.html`,
|
||||||
|
|||||||
@@ -27,6 +27,8 @@ const useAppStore = defineStore({
|
|||||||
loading: false,
|
loading: false,
|
||||||
// 侧边栏设置
|
// 侧边栏设置
|
||||||
sidebar: true,
|
sidebar: true,
|
||||||
|
// 咨讯页渲染模式
|
||||||
|
structureRender: true, // 是否采用结构化渲染,否则采用 raw 渲染
|
||||||
// 数据路径
|
// 数据路径
|
||||||
dataPath: {
|
dataPath: {
|
||||||
app: appDataDir,
|
app: appDataDir,
|
||||||
@@ -64,6 +66,8 @@ const useAppStore = defineStore({
|
|||||||
this.loading = false;
|
this.loading = false;
|
||||||
// 初始化侧边栏设置
|
// 初始化侧边栏设置
|
||||||
this.sidebar = true;
|
this.sidebar = true;
|
||||||
|
// 初始化咨讯页渲染模式
|
||||||
|
this.structureRender = true;
|
||||||
// 初始化用户数据路径
|
// 初始化用户数据路径
|
||||||
this.userPath = {
|
this.userPath = {
|
||||||
achievements: `${userDataDir}\\achievements.json`,
|
achievements: `${userDataDir}\\achievements.json`,
|
||||||
|
|||||||
Reference in New Issue
Block a user