Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-14 09:38:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(parser)：添加 linkCard 解析

Browse Source
This commit is contained in:
BTMuli
2023-03-30 21:04:10 +08:00
parent 95222ee696
commit b667e131cc
2 changed files with 155 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/assets/index.css
View File

@@ -1,6 +1,9 @@
@import "fonts/index.css"; @import "fonts/index.css";
/* 米游社解析 css */ /*
* @description 米游社解析 css
* @since Alpha v0.1.1
*/
.mys-post-body { .mys-post-body {
margin: 20px auto; margin: 20px auto;
width: 800px; width: 800px;
@@ -11,13 +14,14 @@
margin: 20px auto; margin: 20px auto;
} }
.mys-post-cover { .mys-post-span {
border-radius: 10px; line-height: 2;
} }
.mys-post-img { .mys-post-img {
width: 800px; width: 800px;
height: auto; height: auto;
border-radius: 10px;
} }
.mys-post-vod { .mys-post-vod {
@@ -25,10 +29,57 @@
height: 450px; height: 450px;
} }
.mys-post-span { .mys-post-link-card {
line-height: 2; width: 800px;
height: 200px;
padding: 10px;
border-radius: 10px;
display: flex;
background: #e1e1e1;
} }
.mys-post-link-card-cover {
width: 180px;
height: 180px;
border-radius: 10px;
}
.mys-post-link-card-cover img {
width: 180px;
height: 180px;
border-radius: 10px;
}
.mys-post-link-card-content {
width: 100%;
padding-left: 20px;
height: 180px;
}
.mys-post-link-card-title {
font-size: 20px;
color: black;
height: 150px;
}
.mys-post-link-card-price {
font-size: 20px;
color: #ff667f;
display: inline-block;
}
.mys-post-link-card-btn {
display: inline-block;
float: right;
color: #00c3ff;
margin-right: 20px;
text-decoration: none;
}
/*
* @description 米游社解析 json
* @since Alpha v0.1.1
*/
.mys-post-json { .mys-post-json {
padding: 20px; padding: 20px;
border-radius: 20px; border-radius: 20px;

167
src/plugins/Mys/utils/parser.ts
View File

@@ -8,6 +8,7 @@ import { PostStructuredContent } from "../interface/post";
/** /**
* @description 解析Mys数据 * @description 解析Mys数据
* @since Alpha v0.1.1
* @param {string} data Mys数据 * @param {string} data Mys数据
* @description 为了安全考虑，不会解析所有的属性，只会解析几个常用的属性 * @description 为了安全考虑，不会解析所有的属性，只会解析几个常用的属性
* @returns {string} 解析后的HTML，可作为 v-html 使用 * @returns {string} 解析后的HTML，可作为 v-html 使用
@@ -17,32 +18,38 @@ export function PostParser(data: string): string {
let jsonData: PostStructuredContent[] = JSON.parse(data); let jsonData: PostStructuredContent[] = JSON.parse(data);
// 创建 div // 创建 div
const doc = document.createElement("div"); const doc = document.createElement("div");
// cover flag
let coverFlag = false;
// 遍历 Json 数据 // 遍历 Json 数据
jsonData.forEach((item: any) => { jsonData.forEach((item: any) => {
if (typeof item.insert === "string") { // 解析
const text = TextParser(item); const parsed = ParserTransfer(item);
doc.appendChild(text); // 插入
} else if (item.insert.image) { doc.appendChild(parsed);
const img = ImageParser(item, coverFlag);
coverFlag = img[1];
doc.appendChild(img[0]);
} else if (item.insert.vod) {
// 创建 div
const video = VideoParser(item);
// 插入 div
doc.appendChild(video);
} else if (item.insert.backup_text) {
// 创建 div
const backup = BackupTextParser(item);
// 插入 div
doc.appendChild(backup);
}
}); });
return doc.innerHTML; return doc.innerHTML;
} }
/**
* @description 解析中转
* @since Alpha v0.1.1
* @param {PostStructuredContent} data Mys数据
* @returns {HTMLDivElement | HTMLSpanElement} 解析后的中转
*/
function ParserTransfer(data: PostStructuredContent): HTMLDivElement | HTMLSpanElement {
if (typeof data.insert === "string") {
return TextParser(data);
} else if (data.insert.image) {
return ImageParser(data);
} else if (data.insert.vod) {
return VideoParser(data);
} else if (data.insert.backup_text) {
return BackupTextParser(data);
} else if (data.insert.link_card) {
return LinkCardParser(data);
} else {
throw new Error("Unknown data.insert type");
}
}
/** /**
* @description 解析文本 * @description 解析文本
* @since Alpha * @since Alpha
@@ -78,12 +85,11 @@ function TextParser(data: PostStructuredContent): HTMLSpanElement {
/** /**
* @description 解析图片 * @description 解析图片
* @since Alpha * @since Alpha v0.1.1
* @param {PostStructuredContent} data Mys数据 * @param {PostStructuredContent} data Mys数据
* @param {boolean} coverFlag cover 是否已经存在 * @returns {HTMLDivElement} 解析后的图片
* @returns {[HTMLDivElement, boolean]} 解析后的图片.第一个是图片，第二个是 coverFlag
*/ */
function ImageParser(data: PostStructuredContent, coverFlag: boolean): [HTMLDivElement, boolean] { function ImageParser(data: PostStructuredContent): HTMLDivElement {
// 检查数据 // 检查数据
if (typeof data.insert === "string") { if (typeof data.insert === "string") {
throw new Error("data.insert is a string"); throw new Error("data.insert is a string");
@@ -91,34 +97,27 @@ function ImageParser(data: PostStructuredContent, coverFlag: boolean): [HTMLDivE
if (!data.insert.image) { if (!data.insert.image) {
throw new Error("data.insert.image is not defined"); throw new Error("data.insert.image is not defined");
} }
if (!data.attributes) { // if (!data.attributes) {
throw new Error("data.attributes is not defined"); // throw new Error("data.attributes is not defined");
} // }
if (!data.attributes.width) { // if (!data.attributes.width) {
throw new Error("data.attributes.width is not defined"); // throw new Error("data.attributes.width is not defined");
} // }
if (!data.attributes.height) { // if (!data.attributes.height) {
throw new Error("data.attributes.height is not defined"); // throw new Error("data.attributes.height is not defined");
} // }
const div = document.createElement("div"); const div = document.createElement("div");
// 创建图片 // 创建图片
const img = document.createElement("img"); const img = document.createElement("img");
img.src = data.insert.image; img.src = data.insert.image;
// 添加 class // 添加 class
img.classList.add("mys-post-img"); img.classList.add("mys-post-img");
// 判断是否是 cover
if (!coverFlag) {
// 添加 class
img.classList.add("mys-post-cover");
// 设置 coverFlag
coverFlag = true;
}
// 插入图片 // 插入图片
div.appendChild(img); div.appendChild(img);
// 添加 class // 添加 class
div.classList.add("mys-post-div"); div.classList.add("mys-post-div");
// 返回 div // 返回 div
return [div, coverFlag]; return div;
} }
/** /**
@@ -165,7 +164,7 @@ function VideoParser(data: PostStructuredContent): HTMLDivElement {
/** /**
* @description 解析折叠内容 * @description 解析折叠内容
* @since Alpha * @since Alpha v0.1.1
* @param {PostStructuredContent} data Mys数据 * @param {PostStructuredContent} data Mys数据
* @returns {HTMLDivElement} 解析后的折叠内容 * @returns {HTMLDivElement} 解析后的折叠内容
*/ */
@@ -174,18 +173,12 @@ function BackupTextParser(data: PostStructuredContent): HTMLDivElement {
if (typeof data.insert === "string") { if (typeof data.insert === "string") {
throw new Error("data.insert is a string"); throw new Error("data.insert is a string");
} }
if (!data.insert.backup_text) { // if (!data.insert.backup_text) {
throw new Error("data.insert.backup_text is not defined"); // throw new Error("data.insert.backup_text is not defined");
} // }
if (!data.insert.fold) { if (!data.insert.fold) {
throw new Error("data.insert.fold is not defined"); throw new Error("data.insert.fold is not defined");
} }
if (!data.insert.fold.title) {
throw new Error("data.insert.fold.title is not defined");
}
if (!data.insert.fold.content) {
throw new Error("data.insert.fold.content is not defined");
}
// 转换 // 转换
const titleJson: PostStructuredContent[] = JSON.parse(data.insert.fold.title); const titleJson: PostStructuredContent[] = JSON.parse(data.insert.fold.title);
const contentJson: PostStructuredContent[] = JSON.parse(data.insert.fold.content); const contentJson: PostStructuredContent[] = JSON.parse(data.insert.fold.content);
@@ -195,25 +188,19 @@ function BackupTextParser(data: PostStructuredContent): HTMLDivElement {
const title = document.createElement("div"); const title = document.createElement("div");
// 解析标题 // 解析标题
titleJson.forEach(item => { titleJson.forEach(item => {
// 数据检查
if (typeof item.insert !== "string") {
throw new Error("item.insert is not a string");
}
// 解析 // 解析
title.appendChild(TextParser(item)); const parsed = ParserTransfer(item);
// 插入
title.appendChild(parsed);
}); });
// 创建内容 // 创建内容
const content = document.createElement("div"); const content = document.createElement("div");
// 解析内容 // 解析内容
contentJson.forEach(item => { contentJson.forEach(item => {
// 数据检查 // 解析
if (typeof item.insert === "string") { const parsed = ParserTransfer(item);
// 解析 // 插入
content.appendChild(TextParser(item)); content.appendChild(parsed);
} else if (item.insert.image) {
// 解析
content.appendChild(ImageParser(item, false)[0]);
}
}); });
// 插入标题 // 插入标题
div.appendChild(title); div.appendChild(title);
@@ -227,13 +214,57 @@ function BackupTextParser(data: PostStructuredContent): HTMLDivElement {
/** /**
* @description 解析链接卡片 * @description 解析链接卡片
* @since Alpha * @since Alpha v0.1.1
* @todo 待完成
* @see post_id:37414431 * @see post_id:37414431
* @param {PostStructuredContent} data Mys数据 * @param {PostStructuredContent} data Mys数据
* @returns {HTMLDivElement} 解析后的链接卡片 * @returns {HTMLDivElement} 解析后的链接卡片
*/ */
function LinkCardParser(data: PostStructuredContent): HTMLDivElement { function LinkCardParser(data: PostStructuredContent): HTMLDivElement {
// TODO: 待完成 // 检查数据
return document.createElement("div"); if (typeof data.insert === "string") {
throw new Error("data.insert is a string");
}
if (!data.insert.link_card) {
throw new Error("data.insert.link_card is not defined");
}
// 创建 div
const div = document.createElement("div");
// 创建 cover
const cover = document.createElement("div");
cover.classList.add("mys-post-link-card-cover");
// 创建 img
const img = document.createElement("img");
img.src = data.insert.link_card.cover;
// 插入 img
cover.appendChild(img);
// 插入 cover
div.appendChild(cover);
// 创建 content
const content = document.createElement("div");
content.classList.add("mys-post-link-card-content");
// 创建标题
const title = document.createElement("div");
title.classList.add("mys-post-link-card-title");
title.innerHTML = data.insert.link_card.title;
// 插入 title
content.appendChild(title);
// 创建价格
const price = document.createElement("div");
price.classList.add("mys-post-link-card-price");
price.innerHTML = data.insert.link_card.price;
// 插入 price
content.appendChild(price);
// 创建 button
const button = document.createElement("a");
button.classList.add("mys-post-link-card-btn");
button.innerHTML = data.insert.link_card.button_text + " >";
button.href = data.insert.link_card.origin_url;
button.target = "void(0)";
// 插入 button
content.appendChild(button);
// 插入 content
div.appendChild(content);
// 添加 class
div.classList.add("mys-post-link-card");
return div;
} }