diff --git a/src/App.vue b/src/App.vue index d8f7d1ce..54cc38fb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -28,7 +28,7 @@ import { onMounted, ref } from "vue"; import TSidebar from "./components/t-sidebar.vue"; // tauri -import { fs,window } from "@tauri-apps/api"; +import { fs, window } from "@tauri-apps/api"; // store import useAppStore from "./store/modules/app"; // utils diff --git a/src/assets/index.css b/src/assets/index.css index ef4105c1..735e6a5c 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -1 +1,29 @@ @import "fonts/index.css"; + +/* 米游社解析 css */ +.mys-post-body { + margin: 20px auto; + width: 800px; +} + +.mys-post-div { + margin: 20px auto; +} + +.mys-post-cover { + border-radius: 10px; +} + +.mys-post-img { + width: 800px; + height: auto; +} + +.mys-post-vod { + width: 800px; + height: 450px; +} + +.mys-post-span { + line-height: 2; +} diff --git a/src/pages/Home.vue b/src/pages/Home.vue index 33c5c951..db37b377 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -23,7 +23,7 @@ -
+
cover
@@ -57,20 +57,16 @@ diff --git a/src/pages/News.vue b/src/pages/News.vue index 0d3fdec8..9b5b2c4e 100644 --- a/src/pages/News.vue +++ b/src/pages/News.vue @@ -16,15 +16,10 @@ class="justify-space-between flex-nowrap" width="320" > - + {{ item.title }} - + @@ -56,16 +51,11 @@ class="justify-space-between flex-nowrap" width="320" > - + {{ item.title }} {{ item.subtitle }} - + @@ -107,15 +97,10 @@ class="justify-space-between flex-nowrap" width="320" > - + {{ item.title }} - + @@ -132,7 +117,7 @@
- + @@ -160,17 +145,17 @@ import MysOper from "../plugins/Mys"; // utils import { createTGWindow } from "../utils/TGWindow"; // interface -import { Post } from "../plugins/Mys/interface/post"; import { NewsCard, NewsData } from "../plugins/Mys/interface/news"; +import { useRouter } from "vue-router"; // Store const appStore = useAppStore(); -// 渲染模式 -const renderMode = ref(appStore.structureRender); // loading const loading = ref(true); const loadingTitle = ref("正在加载"); +// 路由 +const router = useRouter(); // 数据 const tab = ref(""); @@ -242,25 +227,16 @@ async function loadMore(data: string) { } } -async function toPost(post_id: number) { - // 获取帖子内容 - const post: Post = (await MysOper.Post.get(post_id)).post; - let parseDoc: Document; - // 获取渲染模式 - if (renderMode.value) { - // 结构化渲染 - parseDoc = MysOper.Post.parser(post.structured_content); - } else { - // 原始渲染 - parseDoc = new DOMParser().parseFromString(post.content, "text/html"); - } - // 将解析后的 doc 保存到 文件 - await fs.writeTextFile( - `${appStore.dataPath.temp}\\${post_id}.html`, - parseDoc.documentElement.outerHTML - ); - const postUrl = `file:\\\\\\${appStore.dataPath.temp}\\${post.post_id}.html`; - createTGWindow(postUrl, "MysPost", post.subject, 960, 720, false); +async function toPost(item: NewsCard) { + // 获取路由路径 + const path = router.resolve({ + name: "帖子详情", + params: { + post_id: item.post_id.toString(), + }, + }).href; + // 打开新窗口 + 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; diff --git a/src/plugins/Mys/utils/parser.ts b/src/plugins/Mys/utils/parser.ts index 1eaaffeb..006067d0 100644 --- a/src/plugins/Mys/utils/parser.ts +++ b/src/plugins/Mys/utils/parser.ts @@ -10,40 +10,37 @@ import { PostStructuredContent } from "../interface/post"; * @description 解析Mys数据 * @param {string} data Mys数据 * @description 为了安全考虑，不会解析所有的属性，只会解析几个常用的属性 - * @returns {Document} 解析后的 HTML 文档 + * @returns {string} 解析后的HTML，可作为 v-html 使用 */ -export function PostParser(data: string): Document { +export function PostParser(data: string): string { // Json 化 let jsonData: PostStructuredContent[] = JSON.parse(data); - // 创建 HTML 文档 - const doc = document.implementation.createHTMLDocument(); + // 创建 div + const doc = document.createElement("div"); // cover flag let coverFlag = false; // 遍历 Json 数据 jsonData.forEach((item: any) => { if (typeof item.insert === "string") { const text = TextParser(item); - doc.body.appendChild(text); + doc.appendChild(text); } else if (item.insert.image) { const img = ImageParser(item, coverFlag); coverFlag = img[1]; - doc.body.appendChild(img[0]); + doc.appendChild(img[0]); } else if (item.insert.vod) { // 创建 div const video = VideoParser(item); // 插入 div - doc.body.appendChild(video); + doc.appendChild(video); } else if (item.insert.backup_text) { // 创建 div const backup = BackupTextParser(item); // 插入 div - doc.body.appendChild(backup); + doc.appendChild(backup); } }); - // doc 宽度设为 800,居中 - doc.body.style.width = "800px"; - doc.body.style.margin = "20px auto"; - return doc; + return doc.innerHTML; } /** @@ -71,8 +68,8 @@ function TextParser(data: PostStructuredContent): HTMLSpanElement { return a; } } - // 行间距 - text.style.lineHeight = "2"; + // 添加 class + text.classList.add("mys-post-span"); // 设置 span 内容 text.innerText = data.insert; // 返回文本 @@ -107,21 +104,19 @@ function ImageParser(data: PostStructuredContent, coverFlag: boolean): [HTMLDivE // 创建图片 const img = document.createElement("img"); img.src = data.insert.image; - // 设置图片属性，窗口宽度 900，页面宽度 800 - img.style.height = "auto"; // 高度自适应 - img.width = 800; // 设置宽度 + // 添加 class + img.classList.add("mys-post-img"); // 判断是否是 cover if (!coverFlag) { - // 添加 border-radius - img.style.borderRadius = "10px"; + // 添加 class + img.classList.add("mys-post-cover"); // 设置 coverFlag coverFlag = true; } // 插入图片 div.appendChild(img); - // 设置 div 属性 - div.style.display = "center"; // 居中 - div.style.margin = "20px auto"; // 设置 margin + // 添加 class + div.classList.add("mys-post-div"); // 返回 div return [div, coverFlag]; } @@ -151,9 +146,9 @@ function VideoParser(data: PostStructuredContent): HTMLDivElement { }); // 设置视频属性 video.poster = data.insert.vod.cover; // 设置封面 - video.width = 800; // 设置宽度 - video.height = 450; // 设置高度 video.controls = true; // 设置 controls + // 添加 class + video.classList.add("mys-post-vod"); // 添加 source const source = document.createElement("source"); source.src = resolution.url; @@ -162,9 +157,8 @@ function VideoParser(data: PostStructuredContent): HTMLDivElement { video.appendChild(source); // 插入 video div.appendChild(video); - // 设置 div 属性 - div.style.display = "center"; // 居中 - div.style.margin = "20px auto"; // 设置 margin + // 添加 class + div.classList.add("mys-post-div"); // 返回 div return div; } @@ -213,19 +207,20 @@ function BackupTextParser(data: PostStructuredContent): HTMLDivElement { // 解析内容 contentJson.forEach(item => { // 数据检查 - if (typeof item.insert !== "string") { - throw new Error("item.insert is not a string"); + if (typeof item.insert === "string") { + // 解析 + content.appendChild(TextParser(item)); + } else if (item.insert.image) { + // 解析 + content.appendChild(ImageParser(item, false)[0]); } - // 解析 - content.appendChild(TextParser(item)); }); // 插入标题 div.appendChild(title); // 插入内容 div.appendChild(content); - // 设置 div 属性 - div.style.display = "center"; // 居中 - div.style.margin = "20px auto"; // 设置 margin + // 添加 class + div.classList.add("mys-post-div"); // 返回 div return div; } diff --git a/src/views/t-post.vue b/src/views/t-post.vue index 44110aa7..b74774a5 100644 --- a/src/views/t-post.vue +++ b/src/views/t-post.vue @@ -1,14 +1,41 @@