feat: 【产品功能】策略里面的指标是否可以提供复制的功能 --Story=120927927

TencentBlueKing · Dec 2, 2024 · f21651c · f21651c
1 parent 1ad48b1
commit f21651c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/bkmonitor/webpack/src/monitor-pc/components/metric-selector/metric-popover.tsx b/bkmonitor/webpack/src/monitor-pc/components/metric-selector/metric-popover.tsx
@@ -44,6 +44,8 @@ export default class MetricPopover extends tsc<MetricPopoverProps, MetricPopover
   @Ref() metricSelectorPopover: HTMLElement;
   /* 宽度 */
   @Prop({ type: Number, default: 558 }) width: number;
+  /** 用于匹配 外部点击后不想触发该 popover 隐藏的 dom 元素 的有效的 CSS 选择器字符串 */
+  @Prop({ type: String, default: () => null }) coexistDomSelectors: string;
 
   /** 弹层实例 */
   popoverInstance = null;
@@ -64,7 +66,7 @@ export default class MetricPopover extends tsc<MetricPopoverProps, MetricPopover
       placement: 'bottom-start',
       theme: 'light common-monitor',
       arrow: false,
-      // hideOnClick: false,
+      hideOnClick: false,
       interactive: true,
       boundary: 'window',
       // offset: -1,
@@ -75,10 +77,24 @@ export default class MetricPopover extends tsc<MetricPopoverProps, MetricPopover
       onHidden: () => {
         this.destroyPopoverInstance();
         this.handleShowChange(false);
+        document.body.removeEventListener('mousedown', this.handleClickHide, true);
       },
     });
     // this.curTarget = target;
   }
+  handleClickHide(e) {
+    if (this.popoverInstance?.popper?.contains(e.target)) {
+      return;
+    }
+
+    if (typeof this.coexistDomSelectors === 'string' && this.coexistDomSelectors) {
+      const target = document.querySelector(`${this.coexistDomSelectors}`);
+      if (target?.contains(e.target)) {
+        return;
+      }
+    }
+    this.handleDropDownHide();
+  }
   /**
    * @description: 显示添加条件弹层
    * @param {HTMLElement} target 出发弹层的目标元素
@@ -89,6 +105,7 @@ export default class MetricPopover extends tsc<MetricPopoverProps, MetricPopover
     this.registerDropDown();
     await this.$nextTick();
     this.popoverInstance?.show();
+    document.body.addEventListener('mousedown', this.handleClickHide, true);
   }
 
   // 清除popover实例

diff --git a/bkmonitor/webpack/src/monitor-pc/components/metric-selector/metric-selector.tsx b/bkmonitor/webpack/src/monitor-pc/components/metric-selector/metric-selector.tsx
@@ -477,21 +477,29 @@ class MetricSelector extends Mixins(metricTipsContentMixin) {
    * @return {*}
    */
   handleMetricNameEnter(e: Event, item: MetricDetail) {
-    const target = Array.from(e.target.childNodes).find(c => c.className === 'tip-dom');
-    this.hoverTimer && window.clearTimeout(this.hoverTimer);
+    if (!this.show) return;
+    if (this.popoverInstance?.reference === e.target && this.popoverInstance?.state?.isShown) {
+      return;
+    }
+    this.handleTipsLeave();
     this.hoverTimer = setTimeout(() => {
-      this.popoverInstance = this.$bkPopover(target, {
+      this.popoverInstance = this.$bkPopover(e.target, {
         content: this.handleGetMetricTipsContent(item),
-        trigger: 'manual',
         theme: 'tippy-metric',
         arrow: true,
         placement: 'right',
         boundary: 'window',
         allowHTML: true,
+        interactive: true,
+        interactiveBorder: 6,
       });
       this.popoverInstance?.show();
     }, 1000);
   }
+  handleMouseLeave() {
+    this.hoverTimer && window.clearTimeout(this.hoverTimer);
+  }
+
   // 移出指标
   handleMetricNameLeave() {
     this.handleTipsLeave();
@@ -500,8 +508,8 @@ class MetricSelector extends Mixins(metricTipsContentMixin) {
   // 去除指标tip
   handleTipsLeave() {
     if (this.popoverInstance) {
-      this.popoverInstance.hide(0);
-      this.popoverInstance.destroy();
+      this.popoverInstance?.hide(0);
+      this.popoverInstance?.destroy();
       this.popoverInstance = null;
     }
   }
@@ -601,9 +609,7 @@ class MetricSelector extends Mixins(metricTipsContentMixin) {
   }
 
   /** 更新鼠标的hover状态 */
-  handleMousemove() {
-    this.isHoverItem = true;
-  }
+  handleMousemove() {}
 
   /** 更新hover的索引 */
   handleHoverItem(index: number) {
@@ -820,7 +826,7 @@ class MetricSelector extends Mixins(metricTipsContentMixin) {
       <div
         class={['metric-item-common', { 'multiple-style': this.multiple }]}
         on-mouseenter={event => this.handleMetricNameEnter(event, item)}
-        on-mouseleave={this.handleMetricNameLeave}
+        on-mouseleave={this.handleMouseLeave}
       >
         <div class='top'>
           <span class='title'>
@@ -952,6 +958,7 @@ class MetricSelector extends Mixins(metricTipsContentMixin) {
     return (
       <MetricPopover
         width={this.type === MetricType.TimeSeries ? 718 : 558}
+        coexistDomSelectors='.tippy-metric-theme'
         show={this.show}
         targetId={this.targetId}
         onShowChange={this.handleShowChange}

diff --git a/bkmonitor/webpack/src/monitor-pc/components/metric-selector/typings.ts b/bkmonitor/webpack/src/monitor-pc/components/metric-selector/typings.ts
@@ -32,7 +32,7 @@ import type {
 
 export type TGetMetricData = (
   params: Record<string, any>
-) => { metricList: IMetricDetail[] } | Promise<{ metricList: IMetricDetail[] }> | any;
+) => { metricList: IMetricDetail[] } | any | Promise<{ metricList: IMetricDetail[] }>;
 
 export type MetricSelectorProps = {
   type?: MetricType;
@@ -55,6 +55,7 @@ export interface MetricPopoverProps {
   targetId: string;
   show?: boolean;
   width?: number;
+  coexistDomSelectors?: string;
 }
 export interface MetricPopoverEvents {
   onShowChange: boolean;