@blueking/monitor-apm-log 2.3.23 → 2.3.24

package/main.js

@@ -115745,9 +115745,18 @@ class TaskEventManager {
 }
 const taskEventManager = new TaskEventManager();
 class UseSegmentProp {
+  /**
+   * 全局实例递增计数器。
+   * 同一页面可能同时加载多个检索包（例如 apm + trace），它们会共享 document.body。
+   * 这里通过递增计数为每个 UseSegmentProp 实例生成稳定且唯一的 owner id，
+   * 用于隔离弹层 DOM 的查询与复用，避免“后加载包误复用先加载包节点”。
+   */
+  static instanceCounter = 0;
   className = 'bklog-segment-pop-content';
   wrapperClassName = 'bklog-pop-wrapper';
   wrapperIdName = 'bklog_pop_wrapper';
+  /** 当前实例的 owner id，用于把弹层内容与实例绑定 */
+  instanceId;
   refContent;
   delineate;
   $t;
@@ -115766,6 +115775,9 @@ class UseSegmentProp {
     const {
       $t
     } = use_locale();
+    // 生成实例唯一 owner，后续会写到 DOM data 属性中做精确定位。
+    UseSegmentProp.instanceCounter += 1;
+    this.instanceId = `segment-pop-${UseSegmentProp.instanceCounter}`;
     this.$t = $t;
     this.refContent = (0,external_vue_.ref)();
     this.delineate = delineate;
@@ -115866,7 +115878,15 @@ class UseSegmentProp {
     });
     return (0,external_vue_.h)('div', {
       class: 'segment-event-icons event-tippy-content',
-      ref: refName
+      ref: refName,
+      attrs: {
+        /**
+         * 将弹层内容显式声明为“属于哪个 UseSegmentProp 实例”。
+         * 当多个独立包并存时，后续 mounted/query 会基于该属性做实例级选择，
+         * 避免跨包共享节点造成事件上下文错配，进而出现点击无响应。
+         */
+        'data-segment-owner': this.instanceId
+      }
     }, [eventBoxList.map(item => (0,external_vue_.h)('div', {
       class: 'segment-event-box',
       attrs: {
@@ -115912,7 +115932,13 @@ class UseSegmentProp {
       target.classList.add(this.wrapperClassName);
       document.body.appendChild(target);
     }
-    if (!target.querySelector(`.${this.className} .event-tippy-content`)) {
+    /**
+     * 仅匹配“当前实例拥有”的弹层节点：
+     * - 不再使用通配 `.event-tippy-content`，避免命中其他包创建的节点
+     * - 如果当前实例节点不存在才创建，存在则直接复用（幂等）
+     */
+    const ownContentSelector = `.${this.className} .event-tippy-content[data-segment-owner="${this.instanceId}"]`;
+    if (!target.querySelector(ownContentSelector)) {
       const app = new (external_vue_default())({
         render: () => {
           return (0,external_vue_.h)('div', {
@@ -115926,7 +115952,8 @@ class UseSegmentProp {
       target.append(app.$el);
     }
     if (!this.refContent.value) {
-      this.refContent.value = target.querySelector(`.${this.className} .event-tippy-content`);
+      // refContent 只缓存当前实例节点，保证 getSegmentContent 的引用与事件绑定一致。
+      this.refContent.value = target.querySelector(ownContentSelector);
     }
   };
   getSegmentContent(keyRef, onSegmentEnumClick) {

package/package.json

@@ -1 +1 @@
-{"name":"@blueking/monitor-apm-log","version":"2.3.23","description":"","main":"main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"MIT"}
+{"name":"@blueking/monitor-apm-log","version":"2.3.24","description":"","main":"main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"MIT"}