@haluo/biz 2.0.41-next.0 → 2.0.42-next.1

package/dist/haluo-biz.js

@@ -4445,6 +4445,9 @@ const _sfc_main$3 = {
         hasMore: true,
         searchPage: 1,
         searchHasMore: true,
+        // 用于增量更新的计数器
+        newHotTopicsCount: 0,
+        newSearchTopicsCount: 0,
         // 保存原始的selection和range信息
         originalRange: null,
         originalSelection: null,
@@ -4484,7 +4487,7 @@ const _sfc_main$3 = {
     // 话题输入处理
     handleTopicInput(event) {
       var _a;
-      console.log("handleTopicInput", event.key);
+      console.log(111);
       const activeElement = document.activeElement;
       if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
         return;
@@ -4530,6 +4533,7 @@ const _sfc_main$3 = {
           this.showTopicPopover("hot", position, "", triggerInfo);
         }, 10);
       } else if (this.shouldTriggerSearch(event.key)) {
+        console.log(222);
         setTimeout(() => {
           this.checkAndTriggerSearch(paragraph);
         }, 10);
@@ -4538,12 +4542,13 @@ const _sfc_main$3 = {
       }
     },
     shouldTriggerSearch(key) {
-      return key !== " " && key.length === 1 || key === "Backspace" || key === "Delete";
+      return key.length === 1 || key === "Backspace" || key === "Delete";
     },
     checkAndTriggerSearch(paragraph) {
       const selection = window.getSelection();
       if (selection.rangeCount === 0)
         return;
+      console.log(333);
       const range = selection.getRangeAt(0);
       let currentNode = range.startContainer;
       while (currentNode && currentNode !== paragraph) {
@@ -4556,9 +4561,11 @@ const _sfc_main$3 = {
       const { textContent: paragraphText, cursorPosition } = this.getParagraphTextExcludingTopics(paragraph, range);
       const beforeCursor = paragraphText.substring(0, cursorPosition);
       const hashIndex = beforeCursor.lastIndexOf("#");
+      console.log("search content", beforeCursor, beforeCursor.substring(hashIndex + 1));
       if (hashIndex !== -1) {
-        const afterHash = beforeCursor.substring(hashIndex + 1);
-        if (afterHash.replace(/\u00A0/g, " ").indexOf(" ") === -1) {
+        const afterHash = beforeCursor.substring(hashIndex + 1).replace(/\u00A0/g, " ");
+        console.log(444);
+        if (afterHash.indexOf(" ") === -1) {
           if (afterHash.length <= 15) {
             const position = this.getCaretPosition();
             const triggerInfo = {
@@ -4566,6 +4573,7 @@ const _sfc_main$3 = {
               hashIndex,
               cursorPosition
             };
+            console.log(555);
             if (afterHash.length === 0) {
               this.showTopicPopover("hot", position, "", triggerInfo);
             } else {
@@ -4616,14 +4624,49 @@ const _sfc_main$3 = {
       if (selection.rangeCount === 0)
         return { top: 0, left: 0 };
       const range = selection.getRangeAt(0);
-      const rect = range.getBoundingClientRect();
-      return {
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX
-      };
+      const tempElement = document.createElement("span");
+      tempElement.style.position = "absolute";
+      tempElement.style.visibility = "hidden";
+      tempElement.style.pointerEvents = "none";
+      tempElement.style.whiteSpace = "nowrap";
+      tempElement.textContent = "|";
+      try {
+        const clonedRange = range.cloneRange();
+        clonedRange.collapse(true);
+        clonedRange.insertNode(tempElement);
+        const rect = tempElement.getBoundingClientRect();
+        tempElement.remove();
+        const position = {
+          top: rect.bottom,
+          // 弹框显示在光标下方
+          left: rect.left
+        };
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const popoverWidth = 430;
+        const popoverHeight = 286;
+        if (position.left + popoverWidth > viewportWidth) {
+          position.left = Math.max(10, viewportWidth - popoverWidth - 10);
+        }
+        if (position.top + popoverHeight > viewportHeight) {
+          position.top = rect.top - popoverHeight;
+          if (position.top < 0) {
+            position.top = Math.min(rect.bottom, viewportHeight - popoverHeight - 10);
+          }
+        }
+        return position;
+      } catch (error) {
+        console.warn("获取光标位置失败，使用fallback方法:", error);
+        const rect = range.getBoundingClientRect();
+        return {
+          top: rect.bottom,
+          left: Math.max(10, rect.left)
+        };
+      }
     },
     // 话题弹框相关方法
     showTopicPopover(type, position, searchKeyword = "", triggerInfo = null) {
+      console.log(666);
       if (!this.request || !this.request.getTopic) {
         console.warn("话题功能需要提供 request.getTopic 方法");
         return;
@@ -4690,7 +4733,8 @@ const _sfc_main$3 = {
           } else {
             const existingIds = new Set(this.topicPopover.hotTopics.map((t) => t.id));
             const newTopics = topics.filter((t) => !existingIds.has(t.id));
-            this.topicPopover.hotTopics = [...this.topicPopover.hotTopics, ...newTopics];
+            this.topicPopover.newHotTopicsCount = newTopics.length;
+            this.topicPopover.hotTopics.push(...newTopics);
             this.topicPopover.page++;
             if (newTopics.length === 0) {
               this.topicPopover.hasMore = false;
@@ -4705,7 +4749,7 @@ const _sfc_main$3 = {
         this.topicPopover.hasMore = false;
       } finally {
         this.topicPopover.loading = false;
-        this.updateGlobalTopicPopover();
+        this.appendHotTopicsToDOM();
       }
     },
     async searchTopics(keyword) {
@@ -4746,6 +4790,45 @@ const _sfc_main$3 = {
         this.updateGlobalTopicPopover();
       }
     },
+    // 加载更多搜索话题
+    async loadSearchTopics() {
+      if (this.topicPopover.loading || !this.topicPopover.searchHasMore)
+        return;
+      this.topicPopover.loading = true;
+      try {
+        const response = await this.request.getTopic({
+          action: "201023",
+          title: this.topicPopover.searchKeyword,
+          highlightTitle: "title",
+          page: this.topicPopover.searchPage,
+          limit: 50
+        });
+        if (response && response.data && response.data.code === 0) {
+          const topics = response.data.data || [];
+          if (topics.length === 0) {
+            this.topicPopover.searchHasMore = false;
+          } else {
+            const existingIds = new Set(this.topicPopover.searchTopics.map((t) => t.id));
+            const newTopics = topics.filter((t) => !existingIds.has(t.id));
+            this.topicPopover.newSearchTopicsCount = newTopics.length;
+            this.topicPopover.searchTopics.push(...newTopics);
+            this.topicPopover.searchPage++;
+            if (newTopics.length === 0 || topics.length < 50) {
+              this.topicPopover.searchHasMore = false;
+            }
+          }
+        } else {
+          console.warn("加载更多搜索话题失败:", response);
+          this.topicPopover.searchHasMore = false;
+        }
+      } catch (error) {
+        console.error("加载更多搜索话题失败:", error);
+        this.topicPopover.searchHasMore = false;
+      } finally {
+        this.topicPopover.loading = false;
+        this.appendSearchTopicsToDOM();
+      }
+    },
     loadRecentTopics() {
       try {
         const localTopics = JSON.parse(localStorage.getItem("localTopic") || "[]");
@@ -4816,6 +4899,72 @@ const _sfc_main$3 = {
       this.topicPopover.globalContainer.innerHTML = this.createTopicPopoverContent();
       this.bindTopicPopoverEvents();
     },
+    // 增量添加热门话题到DOM，避免重绘
+    appendHotTopicsToDOM() {
+      if (!this.topicPopover.globalContainer || this.topicPopover.newHotTopicsCount === 0)
+        return;
+      const topicList = this.topicPopover.globalContainer.querySelector(".topic-list");
+      if (!topicList)
+        return;
+      const startIndex = this.topicPopover.hotTopics.length - this.topicPopover.newHotTopicsCount;
+      const endIndex = this.topicPopover.hotTopics.length;
+      for (let i = startIndex; i < endIndex; i++) {
+        const topic = this.topicPopover.hotTopics[i];
+        const topicElement = document.createElement("div");
+        topicElement.className = "topic-item";
+        topicElement.setAttribute("data-topic-id", topic.id);
+        topicElement.textContent = `#${topic.title}`;
+        topicElement.addEventListener("click", () => {
+          this.insertTopicToEditor(topic);
+        });
+        topicList.appendChild(topicElement);
+      }
+      this.updateLoadingState(topicList, this.topicPopover.loading, this.topicPopover.hasMore);
+      this.topicPopover.newHotTopicsCount = 0;
+    },
+    // 增量添加搜索话题到DOM，避免重绘
+    appendSearchTopicsToDOM() {
+      if (!this.topicPopover.globalContainer || this.topicPopover.newSearchTopicsCount === 0)
+        return;
+      const topicList = this.topicPopover.globalContainer.querySelector(".topic-list");
+      if (!topicList)
+        return;
+      const startIndex = this.topicPopover.searchTopics.length - this.topicPopover.newSearchTopicsCount;
+      const endIndex = this.topicPopover.searchTopics.length;
+      for (let i = startIndex; i < endIndex; i++) {
+        const topic = this.topicPopover.searchTopics[i];
+        const topicElement = document.createElement("div");
+        topicElement.className = "topic-item";
+        topicElement.setAttribute("data-topic-id", topic.id);
+        topicElement.textContent = `#${topic.exactlyMatchTitle || topic.title}`;
+        topicElement.addEventListener("click", () => {
+          this.insertTopicToEditor(topic);
+        });
+        topicList.appendChild(topicElement);
+      }
+      this.updateLoadingState(topicList, this.topicPopover.loading, this.topicPopover.searchHasMore);
+      this.topicPopover.newSearchTopicsCount = 0;
+    },
+    // 更新加载状态显示
+    updateLoadingState(topicList, loading, hasMore) {
+      const existingLoading = topicList.querySelector(".topic-loading");
+      const existingEmpty = topicList.querySelector(".topic-empty");
+      if (existingLoading)
+        existingLoading.remove();
+      if (existingEmpty)
+        existingEmpty.remove();
+      if (loading) {
+        const loadingElement = document.createElement("div");
+        loadingElement.className = "topic-loading";
+        loadingElement.textContent = "加载更多...";
+        topicList.appendChild(loadingElement);
+      } else if (!hasMore) {
+        const emptyElement = document.createElement("div");
+        emptyElement.className = "topic-empty";
+        emptyElement.textContent = "没有更多了";
+        topicList.appendChild(emptyElement);
+      }
+    },
     // 创建话题弹框内容
     createTopicPopoverContent() {
       if (this.topicPopover.type === "hot") {
@@ -4934,7 +5083,7 @@ const _sfc_main$3 = {
       if (listContainer) {
         listContainer.addEventListener("scroll", (e) => {
           if (this.topicPopover.type === "hot") {
-            this.handleTopicScroll(e);
+            this.handleHotTopicScroll(e);
           } else if (this.topicPopover.type === "search") {
             this.handleSearchTopicScroll(e);
           }
@@ -4954,7 +5103,7 @@ const _sfc_main$3 = {
         return topic;
       return null;
     },
-    handleTopicScroll(event) {
+    handleHotTopicScroll(event) {
       if (this.topicPopover.activeTab !== "hot")
         return;
       const container = event.target;
@@ -4971,7 +5120,7 @@ const _sfc_main$3 = {
       const scrollHeight = container.scrollHeight;
       const clientHeight = container.clientHeight;
       if (scrollTop + clientHeight >= scrollHeight - 10) {
-        this.searchTopics(this.topicPopover.searchKeyword);
+        this.loadSearchTopics();
       }
     },
     insertTopicToEditor(topic) {

package/dist/haluo-biz.umd.cjs

@@ -4444,6 +4444,9 @@
           hasMore: true,
           searchPage: 1,
           searchHasMore: true,
+          // 用于增量更新的计数器
+          newHotTopicsCount: 0,
+          newSearchTopicsCount: 0,
           // 保存原始的selection和range信息
           originalRange: null,
           originalSelection: null,
@@ -4483,7 +4486,7 @@
       // 话题输入处理
       handleTopicInput(event) {
         var _a;
-        console.log("handleTopicInput", event.key);
+        console.log(111);
         const activeElement = document.activeElement;
         if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
           return;
@@ -4529,6 +4532,7 @@
             this.showTopicPopover("hot", position, "", triggerInfo);
           }, 10);
         } else if (this.shouldTriggerSearch(event.key)) {
+          console.log(222);
           setTimeout(() => {
             this.checkAndTriggerSearch(paragraph);
           }, 10);
@@ -4537,12 +4541,13 @@
         }
       },
       shouldTriggerSearch(key) {
-        return key !== " " && key.length === 1 || key === "Backspace" || key === "Delete";
+        return key.length === 1 || key === "Backspace" || key === "Delete";
       },
       checkAndTriggerSearch(paragraph) {
         const selection = window.getSelection();
         if (selection.rangeCount === 0)
           return;
+        console.log(333);
         const range = selection.getRangeAt(0);
         let currentNode = range.startContainer;
         while (currentNode && currentNode !== paragraph) {
@@ -4555,9 +4560,11 @@
         const { textContent: paragraphText, cursorPosition } = this.getParagraphTextExcludingTopics(paragraph, range);
         const beforeCursor = paragraphText.substring(0, cursorPosition);
         const hashIndex = beforeCursor.lastIndexOf("#");
+        console.log("search content", beforeCursor, beforeCursor.substring(hashIndex + 1));
         if (hashIndex !== -1) {
-          const afterHash = beforeCursor.substring(hashIndex + 1);
-          if (afterHash.replace(/\u00A0/g, " ").indexOf(" ") === -1) {
+          const afterHash = beforeCursor.substring(hashIndex + 1).replace(/\u00A0/g, " ");
+          console.log(444);
+          if (afterHash.indexOf(" ") === -1) {
             if (afterHash.length <= 15) {
               const position = this.getCaretPosition();
               const triggerInfo = {
@@ -4565,6 +4572,7 @@
                 hashIndex,
                 cursorPosition
               };
+              console.log(555);
               if (afterHash.length === 0) {
                 this.showTopicPopover("hot", position, "", triggerInfo);
               } else {
@@ -4615,14 +4623,49 @@
         if (selection.rangeCount === 0)
           return { top: 0, left: 0 };
         const range = selection.getRangeAt(0);
-        const rect = range.getBoundingClientRect();
-        return {
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX
-        };
+        const tempElement = document.createElement("span");
+        tempElement.style.position = "absolute";
+        tempElement.style.visibility = "hidden";
+        tempElement.style.pointerEvents = "none";
+        tempElement.style.whiteSpace = "nowrap";
+        tempElement.textContent = "|";
+        try {
+          const clonedRange = range.cloneRange();
+          clonedRange.collapse(true);
+          clonedRange.insertNode(tempElement);
+          const rect = tempElement.getBoundingClientRect();
+          tempElement.remove();
+          const position = {
+            top: rect.bottom,
+            // 弹框显示在光标下方
+            left: rect.left
+          };
+          const viewportWidth = window.innerWidth;
+          const viewportHeight = window.innerHeight;
+          const popoverWidth = 430;
+          const popoverHeight = 286;
+          if (position.left + popoverWidth > viewportWidth) {
+            position.left = Math.max(10, viewportWidth - popoverWidth - 10);
+          }
+          if (position.top + popoverHeight > viewportHeight) {
+            position.top = rect.top - popoverHeight;
+            if (position.top < 0) {
+              position.top = Math.min(rect.bottom, viewportHeight - popoverHeight - 10);
+            }
+          }
+          return position;
+        } catch (error) {
+          console.warn("获取光标位置失败，使用fallback方法:", error);
+          const rect = range.getBoundingClientRect();
+          return {
+            top: rect.bottom,
+            left: Math.max(10, rect.left)
+          };
+        }
       },
       // 话题弹框相关方法
       showTopicPopover(type, position, searchKeyword = "", triggerInfo = null) {
+        console.log(666);
         if (!this.request || !this.request.getTopic) {
           console.warn("话题功能需要提供 request.getTopic 方法");
           return;
@@ -4689,7 +4732,8 @@
             } else {
               const existingIds = new Set(this.topicPopover.hotTopics.map((t) => t.id));
               const newTopics = topics.filter((t) => !existingIds.has(t.id));
-              this.topicPopover.hotTopics = [...this.topicPopover.hotTopics, ...newTopics];
+              this.topicPopover.newHotTopicsCount = newTopics.length;
+              this.topicPopover.hotTopics.push(...newTopics);
               this.topicPopover.page++;
               if (newTopics.length === 0) {
                 this.topicPopover.hasMore = false;
@@ -4704,7 +4748,7 @@
           this.topicPopover.hasMore = false;
         } finally {
           this.topicPopover.loading = false;
-          this.updateGlobalTopicPopover();
+          this.appendHotTopicsToDOM();
         }
       },
       async searchTopics(keyword) {
@@ -4745,6 +4789,45 @@
           this.updateGlobalTopicPopover();
         }
       },
+      // 加载更多搜索话题
+      async loadSearchTopics() {
+        if (this.topicPopover.loading || !this.topicPopover.searchHasMore)
+          return;
+        this.topicPopover.loading = true;
+        try {
+          const response = await this.request.getTopic({
+            action: "201023",
+            title: this.topicPopover.searchKeyword,
+            highlightTitle: "title",
+            page: this.topicPopover.searchPage,
+            limit: 50
+          });
+          if (response && response.data && response.data.code === 0) {
+            const topics = response.data.data || [];
+            if (topics.length === 0) {
+              this.topicPopover.searchHasMore = false;
+            } else {
+              const existingIds = new Set(this.topicPopover.searchTopics.map((t) => t.id));
+              const newTopics = topics.filter((t) => !existingIds.has(t.id));
+              this.topicPopover.newSearchTopicsCount = newTopics.length;
+              this.topicPopover.searchTopics.push(...newTopics);
+              this.topicPopover.searchPage++;
+              if (newTopics.length === 0 || topics.length < 50) {
+                this.topicPopover.searchHasMore = false;
+              }
+            }
+          } else {
+            console.warn("加载更多搜索话题失败:", response);
+            this.topicPopover.searchHasMore = false;
+          }
+        } catch (error) {
+          console.error("加载更多搜索话题失败:", error);
+          this.topicPopover.searchHasMore = false;
+        } finally {
+          this.topicPopover.loading = false;
+          this.appendSearchTopicsToDOM();
+        }
+      },
       loadRecentTopics() {
         try {
           const localTopics = JSON.parse(localStorage.getItem("localTopic") || "[]");
@@ -4815,6 +4898,72 @@
         this.topicPopover.globalContainer.innerHTML = this.createTopicPopoverContent();
         this.bindTopicPopoverEvents();
       },
+      // 增量添加热门话题到DOM，避免重绘
+      appendHotTopicsToDOM() {
+        if (!this.topicPopover.globalContainer || this.topicPopover.newHotTopicsCount === 0)
+          return;
+        const topicList = this.topicPopover.globalContainer.querySelector(".topic-list");
+        if (!topicList)
+          return;
+        const startIndex = this.topicPopover.hotTopics.length - this.topicPopover.newHotTopicsCount;
+        const endIndex = this.topicPopover.hotTopics.length;
+        for (let i = startIndex; i < endIndex; i++) {
+          const topic = this.topicPopover.hotTopics[i];
+          const topicElement = document.createElement("div");
+          topicElement.className = "topic-item";
+          topicElement.setAttribute("data-topic-id", topic.id);
+          topicElement.textContent = `#${topic.title}`;
+          topicElement.addEventListener("click", () => {
+            this.insertTopicToEditor(topic);
+          });
+          topicList.appendChild(topicElement);
+        }
+        this.updateLoadingState(topicList, this.topicPopover.loading, this.topicPopover.hasMore);
+        this.topicPopover.newHotTopicsCount = 0;
+      },
+      // 增量添加搜索话题到DOM，避免重绘
+      appendSearchTopicsToDOM() {
+        if (!this.topicPopover.globalContainer || this.topicPopover.newSearchTopicsCount === 0)
+          return;
+        const topicList = this.topicPopover.globalContainer.querySelector(".topic-list");
+        if (!topicList)
+          return;
+        const startIndex = this.topicPopover.searchTopics.length - this.topicPopover.newSearchTopicsCount;
+        const endIndex = this.topicPopover.searchTopics.length;
+        for (let i = startIndex; i < endIndex; i++) {
+          const topic = this.topicPopover.searchTopics[i];
+          const topicElement = document.createElement("div");
+          topicElement.className = "topic-item";
+          topicElement.setAttribute("data-topic-id", topic.id);
+          topicElement.textContent = `#${topic.exactlyMatchTitle || topic.title}`;
+          topicElement.addEventListener("click", () => {
+            this.insertTopicToEditor(topic);
+          });
+          topicList.appendChild(topicElement);
+        }
+        this.updateLoadingState(topicList, this.topicPopover.loading, this.topicPopover.searchHasMore);
+        this.topicPopover.newSearchTopicsCount = 0;
+      },
+      // 更新加载状态显示
+      updateLoadingState(topicList, loading, hasMore) {
+        const existingLoading = topicList.querySelector(".topic-loading");
+        const existingEmpty = topicList.querySelector(".topic-empty");
+        if (existingLoading)
+          existingLoading.remove();
+        if (existingEmpty)
+          existingEmpty.remove();
+        if (loading) {
+          const loadingElement = document.createElement("div");
+          loadingElement.className = "topic-loading";
+          loadingElement.textContent = "加载更多...";
+          topicList.appendChild(loadingElement);
+        } else if (!hasMore) {
+          const emptyElement = document.createElement("div");
+          emptyElement.className = "topic-empty";
+          emptyElement.textContent = "没有更多了";
+          topicList.appendChild(emptyElement);
+        }
+      },
       // 创建话题弹框内容
       createTopicPopoverContent() {
         if (this.topicPopover.type === "hot") {
@@ -4933,7 +5082,7 @@
         if (listContainer) {
           listContainer.addEventListener("scroll", (e) => {
             if (this.topicPopover.type === "hot") {
-              this.handleTopicScroll(e);
+              this.handleHotTopicScroll(e);
             } else if (this.topicPopover.type === "search") {
               this.handleSearchTopicScroll(e);
             }
@@ -4953,7 +5102,7 @@
           return topic;
         return null;
       },
-      handleTopicScroll(event) {
+      handleHotTopicScroll(event) {
         if (this.topicPopover.activeTab !== "hot")
           return;
         const container = event.target;
@@ -4970,7 +5119,7 @@
         const scrollHeight = container.scrollHeight;
         const clientHeight = container.clientHeight;
         if (scrollTop + clientHeight >= scrollHeight - 10) {
-          this.searchTopics(this.topicPopover.searchKeyword);
+          this.loadSearchTopics();
         }
       },
       insertTopicToEditor(topic) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haluo/biz",
   "description": "rich text",
-  "version": "2.0.41-next.0",
+  "version": "2.0.42-next.1",
   "type": "module",
   "module": "./dist/haluo-biz.js",
   "main": "./dist/haluo-biz.umd.cjs",