mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
feat(Mys): 添加结构化内容接口，明天起来完善各种类型的渲染
This commit is contained in:
BTMuli
@@ -247,3 +247,79 @@ export interface PostStat {
|
||||
bookmark_num: number;
|
||||
forward_num: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 帖子结构化内容
|
||||
* @since Alpha
|
||||
* @interface PostStructuredContent
|
||||
* @property {string|object} insert 插入内容
|
||||
* @property {string} insert.image 图片 URL
|
||||
* @property {object} insert.vod 视频信息
|
||||
* @property {number} insert.vod.id 视频 ID
|
||||
* @property {number} insert.vod.duration 时长
|
||||
* @property {string} insert.vod.cover 封面图 URL
|
||||
* @property {object[]} insert.vod.resolutions 分辨率
|
||||
* @property {string} insert.vod.resolutions.url URL
|
||||
* @property {string} insert.vod.resolutions.definition 清晰度
|
||||
* @property {number} insert.vod.resolutions.height 高度
|
||||
* @property {number} insert.vod.resolutions.width 宽度
|
||||
* @property {number} insert.vod.resolutions.bitrate 比特率
|
||||
* @property {number} insert.vod.resolutions.size 大小
|
||||
* @property {string} insert.vod.resolutions.format 格式
|
||||
* @property {string} insert.vod.resolutions.label 标签
|
||||
* @property {number} insert.vod.view_num 浏览数
|
||||
* @property {number} insert.vod.transcode_status 转码状态
|
||||
* @property {number} insert.vod.review_status 审核状态
|
||||
* @property {string} insert.backup_text 折叠文本
|
||||
* @property {object} insert.fold 折叠内容
|
||||
* @property {string} insert.fold.title 折叠标题，反序列化后为 PostStructuredContent[]
|
||||
* @property {string} insert.fold.content 折叠文本，反序列化后为 PostStructuredContent[]
|
||||
* @property {object} attributes 属性
|
||||
* @property {number} attributes.height 高度
|
||||
* @property {number} attributes.width 宽度
|
||||
* @property {number} attributes.size 大小
|
||||
* @property {string} attributes.ext 扩展名
|
||||
* @property {boolean} attributes.bold 是否加粗
|
||||
* @property {string} attributes.color 颜色
|
||||
* @property {string} attributes.link 链接
|
||||
* @return {PostStructuredContent}
|
||||
*/
|
||||
export interface PostStructuredContent {
|
||||
insert:
|
||||
| {
|
||||
image?: string;
|
||||
vod?: {
|
||||
id: number;
|
||||
duration: number;
|
||||
cover: string;
|
||||
resolutions: {
|
||||
url: string;
|
||||
definition: string;
|
||||
height: number;
|
||||
width: number;
|
||||
bitrate: number;
|
||||
size: number;
|
||||
format: string;
|
||||
label: string;
|
||||
}[];
|
||||
view_num: number;
|
||||
transcoding_status: number;
|
||||
review_status: number;
|
||||
};
|
||||
backup_text?: string;
|
||||
fold?: {
|
||||
title: string;
|
||||
content: string;
|
||||
};
|
||||
}
|
||||
| string;
|
||||
attributes?: {
|
||||
height?: number;
|
||||
width?: number;
|
||||
size?: number;
|
||||
ext?: string;
|
||||
bold?: boolean;
|
||||
color?: string;
|
||||
link?: string;
|
||||
};
|
||||
}
|
||||
103
src/plugins/Mys/utils/parser.ts
Normal file
103
src/plugins/Mys/utils/parser.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* @file plugins Mys utils PostParser.ts
|
||||
* @description 用于解析Mys数据的工具
|
||||
* @author BTMuli<bt-muli@outlook.com>
|
||||
* @since Alpha
|
||||
*/
|
||||
|
||||
import { PostStructuredContent } from "../interface/post";
|
||||
|
||||
/**
|
||||
* @description 解析Mys数据
|
||||
* @param {string} data Mys数据
|
||||
* @description 为了安全考虑，不会解析所有的属性，只会解析几个常用的属性
|
||||
* @returns {Document} 解析后的 HTML 文档
|
||||
*/
|
||||
export function StructuredPostParser(data: string): Document {
|
||||
// Json 化
|
||||
let jsonData: PostStructuredContent[] = JSON.parse(data);
|
||||
// 创建 HTML 文档
|
||||
const doc = document.implementation.createHTMLDocument();
|
||||
// 遍历 Json 数据
|
||||
jsonData.forEach((item: any) => {
|
||||
if (item.insert.image) {
|
||||
// 创建 div
|
||||
const div = document.createElement("div");
|
||||
// 创建图片
|
||||
const img = document.createElement("img");
|
||||
img.src = item.insert.image;
|
||||
// 设置图片属性
|
||||
img.height = item.attributes.height; // 设置高度
|
||||
img.width = item.attributes.width; // 设置宽度
|
||||
// 如果宽度超过 800，将其设置为 800，图片自适应
|
||||
if (img.width > 800) img.width = 800;
|
||||
// 高度自适应
|
||||
img.style.height = "auto";
|
||||
// 插入图片
|
||||
div.appendChild(img);
|
||||
// 设置 div 属性
|
||||
div.style.display = "center"; // 居中
|
||||
div.style.margin = "20px auto"; // 设置 margin
|
||||
// 插入 div
|
||||
doc.body.appendChild(div);
|
||||
} else if (item.insert.vod) {
|
||||
// 创建 div
|
||||
const div = document.createElement("div");
|
||||
// 创建视频
|
||||
const video = document.createElement("video");
|
||||
// 获取最高分辨率的视频
|
||||
let resolution;
|
||||
// 获取 resolutions中definition="1080P"的视频
|
||||
resolution = item.insert.vod.resolutions.find(
|
||||
(resolution: any) => resolution.definition === "1080P"
|
||||
);
|
||||
if (!resolution) {
|
||||
// 如果没有找到，就获取720P的视频
|
||||
resolution = item.insert.vod.resolutions.find(
|
||||
(resolution: any) => resolution.definition === "720P"
|
||||
);
|
||||
}
|
||||
if (!resolution) {
|
||||
// 如果还是没有找到，就获取第一个
|
||||
resolution = item.insert.vod.resolutions[0];
|
||||
}
|
||||
// 设置一些属性
|
||||
video.poster = item.insert.vod.cover; // 设置封面
|
||||
video.width = resolution.width > 800 ? 800 : resolution.width; // 设置宽度（取最高分辨率的宽度）
|
||||
video.height = resolution.width > 800 ? 450 : resolution.height; // 设置高度（取最高分辨率的高度）
|
||||
video.controls = true; // 设置 controls
|
||||
// 添加 source
|
||||
const source = document.createElement("source");
|
||||
source.src = resolution.url;
|
||||
source.type = resolution.format === ".mp4" ? "video/mp4" : "video/webm";
|
||||
video.appendChild(source);
|
||||
// 添加 controls
|
||||
video.controls = true;
|
||||
// 插入 video
|
||||
div.appendChild(video);
|
||||
// 设置 div 属性
|
||||
div.style.display = "center"; // 居中
|
||||
div.style.margin = "20px auto"; // 设置 margin
|
||||
// 插入 div
|
||||
doc.body.appendChild(div);
|
||||
} else if (typeof item.insert === "string") {
|
||||
// 创建文本
|
||||
const text = document.createElement("span");
|
||||
// 设置文本属性
|
||||
// 创建 style string
|
||||
if (item.attributes) {
|
||||
let styleString = "";
|
||||
if (item.attributes.color) styleString += `color: ${item.attributes.color};`;
|
||||
// 设置 style
|
||||
text.style.cssText = styleString;
|
||||
}
|
||||
text.innerText = item.insert; // 设置文本
|
||||
// 插入文本
|
||||
doc.body.appendChild(text);
|
||||
}
|
||||
});
|
||||
// doc 宽度设为 800,居中
|
||||
doc.body.style.width = "800px";
|
||||
doc.body.style.margin = "20px auto";
|
||||
return doc;
|
||||
}
|
||||
Reference in New Issue
Block a user