diff --git a/src/assets/css/mys-parser.css b/src/assets/css/mys-parser.css new file mode 100644 index 00000000..5ec98ee5 --- /dev/null +++ b/src/assets/css/mys-parser.css @@ -0,0 +1,89 @@ +/* + * @description 米游社解析 css + * @since Alpha v0.1.1 + */ +.mys-post-body { + margin: 20px auto; + width: 800px; + font-family: "Genshin", serif; +} + +.mys-post-div { + margin: 20px auto; +} + +.mys-post-span { + line-height: 2; +} + +.mys-post-link { + color: #00c3ff; + text-decoration: none; +} + +.mys-post-divider { + margin: 20px auto; +} + +.mys-post-divider img { + width: 800px; + height: auto; +} + +.mys-post-img { + width: 800px; + height: auto; + border-radius: 10px; +} + +.mys-post-vod { + width: 800px; + height: 450px; +} + +.mys-post-link-card { + 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; +} diff --git a/src/assets/index.css b/src/assets/index.css index ce08b4cd..721aaf61 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -1,80 +1,5 @@ @import "fonts/index.css"; - -/* - * @description 米游社解析 css - * @since Alpha v0.1.1 - */ -.mys-post-body { - margin: 20px auto; - width: 800px; - font-family: "Genshin", serif; -} - -.mys-post-div { - margin: 20px auto; -} - -.mys-post-span { - line-height: 2; -} - -.mys-post-img { - width: 800px; - height: auto; - border-radius: 10px; -} - -.mys-post-vod { - width: 800px; - height: 450px; -} - -.mys-post-link-card { - 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; -} +@import "css/mys-parser.css"; /* * @description 米游社解析 json diff --git a/src/plugins/Mys/interface/post.ts b/src/plugins/Mys/interface/post.ts index 3f9b66e0..ebb118b0 100644 --- a/src/plugins/Mys/interface/post.ts +++ b/src/plugins/Mys/interface/post.ts @@ -237,7 +237,8 @@ export interface PostStat { * @property {object} insert.fold 折叠内容 * @property {string} insert.fold.title 折叠标题，反序列化后为 PostStructuredContent[] * @property {string} insert.fold.content 折叠文本，反序列化后为 PostStructuredContent[] - * @property {PostStructuredContentLinkCard} link_card 链接卡片 + * @property {PostStructuredContentLinkCard} insert.link_card 链接卡片 + * @property {string} insert.divider 分割线 * @property {object} attributes 属性 * @property {number} attributes.height 高度 * @property {number} attributes.width 宽度 @@ -259,6 +260,7 @@ export interface PostStructuredContent { content: string; }; link_card?: PostStructuredContentLinkCard; + divider?: string; } | string; attributes?: { diff --git a/src/plugins/Mys/utils/parser.ts b/src/plugins/Mys/utils/parser.ts index 66c2d7a7..7370f2db 100644 --- a/src/plugins/Mys/utils/parser.ts +++ b/src/plugins/Mys/utils/parser.ts @@ -45,7 +45,10 @@ function ParserTransfer(data: PostStructuredContent): HTMLDivElement | HTMLSpanE return BackupTextParser(data); } else if (data.insert.link_card) { return LinkCardParser(data); + } else if (data.insert.divider) { + return DividerParser(data); } else { + console.log(data); throw new Error("Unknown data.insert type"); } } @@ -68,11 +71,7 @@ function TextParser(data: PostStructuredContent): HTMLSpanElement { if (data.attributes.bold) text.style.fontWeight = "bold"; if (data.attributes.color) text.style.color = data.attributes.color; if (data.attributes.link) { - const a = document.createElement("a"); - a.href = data.attributes.link; - a.target = "void(0)"; - a.innerText = data.insert; - return a; + return LinkTextParser(data); } } // 添加 class @@ -83,6 +82,69 @@ function TextParser(data: PostStructuredContent): HTMLSpanElement { return text; } +/** + * @description 解析链接 + * @since Alpha v0.1.1 + * @param {PostStructuredContent} data Mys数据 + * @returns {HTMLSpanElement} 解析后的链接 + */ +function LinkTextParser(data: PostStructuredContent): HTMLSpanElement { + // 检查数据 + if (typeof data.insert !== "string") { + throw new Error("data.insert is not a string"); + } + if (!data.attributes) { + throw new Error("data.attributes is not defined"); + } + if (!data.attributes.link) { + throw new Error("data.attributes.link is not defined"); + } + // 创建图标 + const icon = document.createElement("i"); + icon.classList.add("mdi", "mdi-link-variant"); + // 创建链接 + const link = document.createElement("a"); + link.classList.add("mys-post-link"); + link.href = data.attributes.link; + link.target = "view_window"; + link.innerText = data.insert; + // 插入图标作为链接前缀 + link.prepend(icon); + // 返回链接 + return link; +} + +/** + * @description 解析分割线 + * @since Alpha v0.1.1 + * @param {PostStructuredContent} data Mys数据 + * @returns {HTMLDivElement} 解析后的分割线 + */ +function DividerParser(data: PostStructuredContent): HTMLDivElement { + // 数据检查 + if (typeof data.insert === "string") { + throw new Error("data.insert is a string"); + } + if (!data.insert.divider) { + throw new Error("data.insert.divider is not defined"); + } + // 创建分割线 + const div = document.createElement("div"); + div.classList.add("mys-post-divider"); + // 创建 img + const img = document.createElement("img"); + if (data.insert.divider === "line_2") { + img.src = + "https://mihoyo-community-web.oss-cn-shanghai.aliyuncs.com/upload/2021/01/05/477d4c535e965bec1791203aecdfa8e6.png"; + } else { + throw new Error("Unknown divider type"); + } + // 插入 img + div.appendChild(img); + // 返回分割线 + return div; +} + /** * @description 解析图片 * @since Alpha v0.1.1 @@ -259,7 +321,7 @@ function LinkCardParser(data: PostStructuredContent): HTMLDivElement { 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.target = "view_window"; // 插入 button content.appendChild(button); // 插入 content