From 695f9f5a4e52b251563ff371e58e15e00fd7c199 Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期三, 29 五月 2024 19:33:51 +0800
Subject: [PATCH] 更新

---
 src/books/lifeCare/index.vue |   87 +++++++++++++++++++++++++++++++------------
 1 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/src/books/lifeCare/index.vue b/src/books/lifeCare/index.vue
index aae3725..ec8e4f1 100644
--- a/src/books/lifeCare/index.vue
+++ b/src/books/lifeCare/index.vue
@@ -135,6 +135,7 @@
       loadPageObserver: null,
       loadPageList: [],
       questionData: {},
+      renderSignMap: {}
     };
   },
   computed: {
@@ -301,7 +302,7 @@
           this.showCatalogList = [
             this.catalogLength - 2,
             this.catalogLength - 1,
-            this.catalogLength,
+            this.catalogLength
           ];
         } else {
           this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -322,6 +323,14 @@
       }
     },
 
+    // 澶勭悊鏍囪鏁版嵁
+    handelSignData(type, data) {
+      if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
+      if (!this.renderSignMap[type][data.page])
+        this.renderSignMap[type][data.page] = [];
+      this.renderSignMap[type][data.page].push(data);
+    },
+
     // 娓叉煋鏍囪
     renderSign(type, data) {
       const existence = (
@@ -332,29 +341,48 @@
         const pageDom = (
           this.container ? this.container : document
         ).querySelector(`[page="${data.page}"]`);
-        let reg = new RegExp(`${data.txt}`, "ig");
-        switch (type) {
-          case "Highlight":
-            // 楂樹寒
-            pageDom.innerHTML = pageDom.innerHTML.replace(
-              reg,
-              `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
-            );
-            break;
-          case "Dashing":
-            // 鍒掔嚎
-            pageDom.innerHTML = pageDom.innerHTML.replace(
-              reg,
-              `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
-            );
-            break;
-          case "Note":
-            // 绗旇
-            pageDom.innerHTML = pageDom.innerHTML.replace(
-              reg,
-              `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
-            );
-            break;
+        // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
+        const treeWalker = document.createTreeWalker(
+          pageDom,
+          NodeFilter.SHOW_TEXT
+        );
+        const allTextNodes = [];
+        let currentNode = treeWalker.nextNode();
+        while (currentNode) {
+          allTextNodes.push(currentNode);
+          currentNode = treeWalker.nextNode();
+        }
+        for (let i = 0; i < allTextNodes.length; i++) {
+          const textDom = allTextNodes[i];
+          if (textDom.textContent.indexOf(data.txt) > -1) {
+            let reg = new RegExp(`${data.txt}`, "ig");
+            switch (type) {
+              case "Highlight":
+                // 楂樹寒
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+                  );
+                break;
+              case "Dashing":
+                // 鍒掔嚎
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+                  );
+                break;
+              case "Note":
+                // 绗旇
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
+                  );
+                break;
+            }
+          }
         }
       }
     },
@@ -536,7 +564,7 @@
         if (entry.isIntersecting) {
           const target = entry.target;
           const page = target.getAttribute("page");
-          if (this.loadPageList.indexOf(page) == -1) {
+          if (this.loadPageList.indexOf(Number(page)) == -1) {
             const catalogDom = this.tool.getParentNodeByClassName(
               target,
               "chapter"
@@ -565,7 +593,16 @@
                 }
               }
             }
+            // 娣诲姞椤电爜
             this.loadPageList.push(Number(page));
+            // 娓叉煋杩欎竴椤电殑鏍囪
+            for (const key in this.renderSignMap) {
+              if (this.renderSignMap[key][page]) {
+                this.renderSignMap[key][page].forEach((item) => {
+                  this.renderSign(key, item);
+                });
+              }
+            }
             if (this.loadPageList.length > 5) {
               // 瓒呰繃5椤�
               this.loadPageList.shift();

--
Gitblit v1.9.1