@blueking/monitor-apm-log 2.3.23 → 2.3.25

package/main.js

@@ -115748,6 +115748,8 @@ class UseSegmentProp {
   className = 'bklog-segment-pop-content';
   wrapperClassName = 'bklog-pop-wrapper';
   wrapperIdName = 'bklog_pop_wrapper';
+  /** 当前实例的 owner id，用于把弹层内容与实例绑定 */
+  instanceId;
   refContent;
   delineate;
   $t;
@@ -115755,6 +115757,20 @@ class UseSegmentProp {
   stopPropagation;
   aiBluekingEnabled;
   highlightEnabled;
+  /**
+   * 生成实例 owner id（跨 bundle 全局唯一）。
+   *
+   * 注意：APM 和 Trace 在宿主页里可能是两个独立构建产物，
+   * 如果只使用“模块内 static 计数器”，每个 bundle 都会从 1 开始计数，
+   * 最终产生同名 owner（例如都叫 segment-pop-1），依然会误复用对方节点。
+   *
+   * 这里把计数器提升到 window 级别，确保两个独立包共享同一计数空间。
+   */
+  static getNextInstanceId() {
+    const nextCounter = (window.__BKLOG_SEGMENT_POP_COUNTER__ ?? 0) + 1;
+    window.__BKLOG_SEGMENT_POP_COUNTER__ = nextCounter;
+    return `segment-pop-${nextCounter}`;
+  }
   constructor() {
     let {
       delineate = false,
@@ -115766,6 +115782,8 @@ class UseSegmentProp {
     const {
       $t
     } = use_locale();
+    // 生成全局唯一 owner，后续会写到 DOM data 属性中做精确定位。
+    this.instanceId = UseSegmentProp.getNextInstanceId();
     this.$t = $t;
     this.refContent = (0,external_vue_.ref)();
     this.delineate = delineate;
@@ -115866,7 +115884,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 +115938,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 +115958,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.25","description":"","main":"main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"MIT"}