fix(parser): 解决样式不生效问题，后续待优化

src/assets/css/anno-parser.css

@@ -3,6 +3,7 @@
  * @since Alpha v0.1.1
  */
 
+/* todo scoped 不生效 */
 .anno-body {
 	margin: 20px auto;
 	width: 800px;
@@ -41,37 +42,37 @@
 	color: #00c3ff;
 }
 
-.anno-content :deep(a) {
+.anno-content a {
 	color: #00c3ff;
 	text-decoration: none;
 }
 
-.anno-content :deep(span) {
+.anno-content p {
-	color: #4b5366;
-}
-
-.anno-content :deep(p) {
 	line-height: 2;
 	color: #4b5366;
 }
 
-.anno-content :deep(details) {
+.anno-content details {
 	border: #35acce 2px solid;
 	padding: 10px;
 	border-radius: 10px;
 	margin: 10px;
 }
 
-.anno-content :deep(details) ::marker {
+.anno-content details div {
+	margin-left: 10px;
+}
+
+.anno-content details ::marker {
 	color: #35acce;
 	content: "✧";
 }
 
-.anno-content :deep(ol) {
+.anno-content ol {
 	list-style: "✧";
 }
 
-.anno-content :deep(td) {
+.anno-content td {
 	line-height: 2;
 	padding-left: 10px;
 }

src/assets/css/post-parser.css

@@ -2,6 +2,7 @@
  * @description 米游社解析 css
  * @since Alpha v0.1.1
  */
+/* todo scoped 不生效 */
 .mys-post-body {
 	margin: 20px auto;
 	width: 800px;

src/plugins/Genshin/utils/annoParser.ts

@@ -15,13 +15,30 @@ export function parseAnnoContent(data: string): string {
 	const htmlBase = new DOMParser().parseFromString(data, "text/html");
 	// 遍历所有 span 标签
 	htmlBase.querySelectorAll("span").forEach(span => {
-		return (span.innerHTML = decodeRegExp(span.innerHTML));
+		if (span.style.fontSize) {
+			span.style.fontSize = "";
+		}
+		if (span.children.length === 0) {
+			return (span.innerHTML = decodeRegExp(span.innerHTML));
+		} else {
+			span.querySelectorAll("*").forEach(child => {
+				if (child.children.length === 0) {
+					return (child.innerHTML = decodeRegExp(child.innerHTML));
+				}
+			});
+		}
 	});
 	// 遍历所有 p 标签
 	htmlBase.querySelectorAll("p").forEach(p => {
 		// 如果没有子元素
 		if (p.children.length === 0) {
 			return (p.innerHTML = decodeRegExp(p.innerHTML));
+		} else {
+			p.querySelectorAll("*").forEach(child => {
+				if (child.children.length === 0) {
+					return (child.innerHTML = decodeRegExp(child.innerHTML));
+				}
+			});
 		}
 	});
 	// 遍历所有 a 标签

src/views/t-anno.vue

@@ -52,6 +52,6 @@ onMounted(async () => {
 	}, 200);
 });
 </script>
-<style lang="css" scoped>
+<style lang="css">
 @import "../assets/css/anno-parser.css";
 </style>

src/views/t-post.vue

@@ -44,6 +44,6 @@ onMounted(async () => {
 	}, 200);
 });
 </script>
-<style lang="css" scoped>
+<style lang="css">
 @import "../assets/css/post-parser.css";
 </style>