fix(parser): 样式美化

src/assets/css/anno-parser.css

@@ -2,11 +2,76 @@
  * @description 游戏公告解析 css
  * @since Alpha v0.1.1
  */
-/* todo 样式美化 */
-.anno-content {
+
+.anno-body {
+	margin: 20px auto;
+	width: 800px;
+	font-family: "Genshin-Light", serif;
+}
+
+.anno-title {
+	font-family: Genshin, serif;
+	color: #5b738f;
+	font-size: 24px;
+	font-weight: 500;
+	margin-bottom: 8px;
+}
+
+.anno-subtitle {
 	font-size: 16px;
+	color: #a1aeb6;
+	margin-bottom: 16px;
+}
+
+.anno-img {
+	max-width: 100%;
+	width: 800px;
+	height: auto;
+	border-radius: 10px;
+	margin-bottom: 10px;
+}
+
+.anno-content {
 	line-height: 2;
 }
 
-.anno-content p span {
+.anno-link-icon {
+	width: 18px;
+	height: 18px;
+	color: #00c3ff;
+}
+
+.anno-content :deep(a) {
+	color: #00c3ff;
+	text-decoration: none;
+}
+
+.anno-content :deep(span) {
+	color: #4b5366;
+}
+
+.anno-content :deep(p) {
+	line-height: 2;
+	color: #4b5366;
+}
+
+.anno-content :deep(details) {
+	border: #35acce 2px solid;
+	padding: 10px;
+	border-radius: 10px;
+	margin: 10px;
+}
+
+.anno-content :deep(details) ::marker {
+	color: #35acce;
+	content: "✧";
+}
+
+.anno-content :deep(ol) {
+	list-style: "✧";
+}
+
+.anno-content :deep(td) {
+	line-height: 2;
+	padding-left: 10px;
 }

src/plugins/Genshin/utils/annoParser.ts

@@ -15,29 +15,32 @@ export function parseAnnoContent(data: string): string {
 	const htmlBase = new DOMParser().parseFromString(data, "text/html");
 	// 遍历所有 span 标签
 	htmlBase.querySelectorAll("span").forEach(span => {
-		return (span.innerHTML = deleteRedundantTag(span.innerHTML));
+		return (span.innerHTML = decodeRegExp(span.innerHTML));
 	});
 	// 遍历所有 p 标签
 	htmlBase.querySelectorAll("p").forEach(p => {
 		// 如果没有子元素
 		if (p.children.length === 0) {
-			return (p.innerHTML = deleteRedundantTag(p.innerHTML));
+			return (p.innerHTML = decodeRegExp(p.innerHTML));
+		}
+	});
+	// 遍历所有 a 标签
+	htmlBase.querySelectorAll("a").forEach(a => {
+		const span = htmlBase.createElement("i");
+		span.classList.add("mdi", "mdi-link-variant", "anno-link-icon");
+		// 添加到 a 标签中
+		a.prepend(span);
+		if (a.href.startsWith("javascript:miHoYoGameJSSDK.openInBrowser")) {
+			a.href = a.href.replace("javascript:miHoYoGameJSSDK.openInBrowser('", "").replace("');", "");
+			a.target = "_blank";
+		} else if (a.href.startsWith("javascript:miHoYoGameJSSDK.openInWebview")) {
+			a.href = a.href.replace("javascript:miHoYoGameJSSDK.openInWebview('", "").replace("');", "");
+			a.target = "_blank";
 		}
 	});
 	return htmlBase.body.innerHTML;
 }
 
-/**
- * @description 删除冗余的标签
- * @since Alpha v0.1.1
- * @param {string} data 内容
- * @return {string} 删除后的内容
- */
-export function deleteRedundantTag(data: string): string {
-	// 先转义一下
-	return decodeRegExp(data);
-}
-
 /**
  * @description 转义正则表达式
  * @since Alpha v0.1.1

src/views/t-anno.vue

@@ -54,32 +54,4 @@ onMounted(async () => {
 </script>
 <style lang="css" scoped>
 @import "../assets/css/anno-parser.css";
-
-.anno-body {
-	margin: 20px auto;
-	width: 800px;
-	font-family: "Genshin-Light", serif;
-}
-
-.anno-title {
-	font-family: Genshin, serif;
-	color: #5b738f;
-	font-size: 24px;
-	font-weight: 500;
-	margin-bottom: 8px;
-}
-
-.anno-subtitle {
-	font-size: 16px;
-	color: #a1aeb6;
-	margin-bottom: 16px;
-}
-
-.anno-img {
-	max-width: 100%;
-	width: 800px;
-	height: auto;
-	border-radius: 10px;
-	margin-bottom: 10px;
-}
 </style>