opti: 优化双语翻译样式标记

Bistutu · May 30, 2024 · 8508d2e · 8508d2e
1 parent 4bdc507
commit 8508d2e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/entrypoints/main/trans.ts b/entrypoints/main/trans.ts
@@ -1,4 +1,4 @@
-import {checkConfig, hasClassName, skipNode} from "../utils/check";
+import {checkConfig, searchClassName, skipNode} from "../utils/check";
 import {cache} from "../utils/cache";
 import {options, servicesType} from "../utils/option";
 import {insertFailedTip, insertLoadingSpinner} from "../utils/icon";
@@ -44,7 +44,7 @@ export function handleTranslation(mouseX: number, mouseY: number, delayTime: num
 function handleBilingualTranslation(node: any, slide: boolean) {
     let nodeOuterHTML = node.outerHTML;
     // 如果已经翻译过，250ms 后删除翻译结果
-    let bilingualNode = hasClassName(node, 'fluent-read-bilingual');
+    let bilingualNode = searchClassName(node, 'fluent-read-bilingual');
     if (bilingualNode) {
         if (slide) {
             htmlSet.delete(nodeOuterHTML);
@@ -53,7 +53,8 @@ function handleBilingualTranslation(node: any, slide: boolean) {
         let spinner = insertLoadingSpinner(bilingualNode, true);
         setTimeout(() => {
             spinner.remove();
-            bilingualNode.remove();
+            searchClassName(bilingualNode, 'fluent-read-bilingual-content').remove();
+            bilingualNode.classList.remove('fluent-read-bilingual');
             htmlSet.delete(nodeOuterHTML);
         }, 250);
         return;
@@ -201,8 +202,9 @@ export const handleBtnTranslation = throttle((node: any) => {
 
 
 function bilingualAppendChild(node: any, text: string) {
+    node.classList.add("fluent-read-bilingual");
     let newNode = document.createElement("span");
-    newNode.classList.add("fluent-read-bilingual");
+    newNode.classList.add("fluent-read-bilingual-content");
     newNode.classList.add(options.styles[config.style].class);
     newNode.innerHTML = text;
     smashTruncationStyle(node);

diff --git a/entrypoints/style.css b/entrypoints/style.css
@@ -96,7 +96,7 @@
 }
 
 /* 双语模式，block 强制换行、inline-block 自适应换行 */
-.fluent-read-bilingual {
+.fluent-read-bilingual-content {
     display: block; /* 设置为块级元素，强制换行 */
     word-break: break-word; /* 允许在单词内断行，避免超出容器边界 */
     margin: 8px 0 !important; /* 上下边距设置为8px，并强制覆盖其他样式 */

diff --git a/entrypoints/utils/check.ts b/entrypoints/utils/check.ts
@@ -75,10 +75,10 @@ export function hasRetryTag(node: any) {
 }
 
 // 判断是否有指定 class 属性，并返回最终包含该 class 的节点
-export function hasClassName(node: any, className: string): any {
+export function searchClassName(node: any, className: string): any {
     if (node.classList.contains(className)) return node;
     for (let child of node.children) {
-        let result = hasClassName(child, className);
+        let result = searchClassName(child, className);
         if (result) return result;
     }
     return false;