From 25779b5014194d475503be664ed94db4141d6fee Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Wed, 17 Jul 2024 21:08:04 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=A1=8C=E4=B8=BA?= =?UTF-8?q?=E9=A1=B9=E9=BC=A0=E6=A0=87hover=E6=97=B6=E9=98=B4=E5=BD=B1?= =?UTF-8?q?=E5=BC=82=E5=B8=B8=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/action-toolbar/action-toolbar.scss | 19 +++++++++-- src/common/action-toolbar/action-toolbar.tsx | 32 +++++++++++++++---- 2 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/common/action-toolbar/action-toolbar.scss b/src/common/action-toolbar/action-toolbar.scss index d010149b5..baeadca3e 100644 --- a/src/common/action-toolbar/action-toolbar.scss +++ b/src/common/action-toolbar/action-toolbar.scss @@ -22,14 +22,27 @@ $action-toolbar: ( padding: getCssVar('spacing', 'extra-tight') getCssVar('spacing', 'none'); margin: getCssVar(action-toolbar, item-margin); + @include m('botton'){ + display: flex; + align-items: center; + justify-content: center; + padding: 0 getCssVar('spacing','extra-tight'); + @include when('has-icon-label'){ + gap: getCssVar('spacing','extra-tight'); + } + } + @include m(icon) { display: flex; align-items: center; justify-content: center; - width: getCssVar('width-icon','medium'); - height: getCssVar('width-icon','medium'); - margin-right: getCssVar('spacing','extra-tight'); + + // margin-right: getCssVar('spacing','extra-tight'); font-size: getCssVar('width-icon','medium'); + @include when('has-icon'){ + width: getCssVar('width-icon','medium'); + height: getCssVar('width-icon','medium'); + } } &+& { diff --git a/src/common/action-toolbar/action-toolbar.tsx b/src/common/action-toolbar/action-toolbar.tsx index 14df69129..75671f0be 100644 --- a/src/common/action-toolbar/action-toolbar.tsx +++ b/src/common/action-toolbar/action-toolbar.tsx @@ -147,13 +147,31 @@ export const IBizActionToolbar = defineComponent({ disabled={this.actionsState[detail.id!].disabled} class={this.calcActionItemClass(detail)} > -
- {detail.showIcon && detail.sysImage && ( - - )} -
-
- {detail.showCaption ? detail.caption : ''} +
+
+ {detail.showIcon && detail.sysImage && ( + + )} +
+
+ {detail.showCaption ? detail.caption : ''} +
, ]; -- Gitee From 4049b58a86a41ac008aa0a7bfb56060fa52a6f50 Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Thu, 18 Jul 2024 11:19:00 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=82=B9=E5=87=BB?= =?UTF-8?q?=E8=BE=B9=E7=BC=98=E6=9F=B1=E5=AD=90=E6=97=B6=E5=87=BA=E7=8E=B0?= =?UTF-8?q?=E5=8F=8D=E6=9F=A5=E6=8C=89=E9=92=AE=E4=BD=8D=E7=BD=AE=E5=BC=82?= =?UTF-8?q?=E5=B8=B8=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=8F=8D=E6=9F=A5=E6=8C=89=E9=92=AE=E4=BC=9A?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E9=87=8D=E7=BB=98=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/control/chart/chart.tsx | 64 ++++++++++++++++++++++--------------- 1 file changed, 39 insertions(+), 25 deletions(-) diff --git a/src/control/chart/chart.tsx b/src/control/chart/chart.tsx index 2fe9d9957..38bdd7892 100644 --- a/src/control/chart/chart.tsx +++ b/src/control/chart/chart.tsx @@ -1,8 +1,4 @@ -import { - useControlController, - useNamespace, - useClickOutside, -} from '@ibiz-template/vue3-util'; +import { useControlController, useNamespace } from '@ibiz-template/vue3-util'; import { defineComponent, nextTick, @@ -41,7 +37,6 @@ const ChartControl = defineComponent({ const showCheck = ref(false); const drillDetailPos = ref({}); // 数据反查框位置 const drillDetailRef = ref(); // 数据反查框 - let func: { stop: () => void }; let tempParams: IData; // 点击的图表回调事件参数 // 本地数据模式 @@ -98,13 +93,33 @@ const ChartControl = defineComponent({ const computedDrillDetailPos = (params: IParams) => { if (params.event) { const event: PointerEvent = params.event.event; - event.stopPropagation(); - event.preventDefault(); const { offsetX, offsetY } = params.event; - drillDetailPos.value = { - top: `${offsetY}px`, - left: `${offsetX + 16}px`, - }; + const { clientWidth } = event.target as HTMLDivElement; + if (offsetX + 160 > clientWidth) { + // 放在左边 + drillDetailPos.value = { + top: `${offsetY - 20}px`, + left: `${offsetX - 160}px`, + }; + } else { + // 放在右边 + drillDetailPos.value = { + top: `${offsetY}px`, + left: `${offsetX + 16}px`, + }; + } + } + }; + + // 设置反查按钮显隐状态 + const setDrillState = () => { + showCheck.value = false; + }; + + // 设置tooltip显示配置 + const setTipState = () => { + if (!showCheck.value) { + c.changeTooltipState(true); } }; @@ -115,6 +130,8 @@ const ChartControl = defineComponent({ const chart = init(chartRef.value); c.initChart(chart); window.addEventListener('resize', setHeight); + window.addEventListener('pointerdown', setDrillState); + window.addEventListener('click', setTipState); if (chartRef.value && ResizeObserver) { resizeObserver = new ResizeObserver(() => { c.resizeChart(); @@ -138,26 +155,21 @@ const ChartControl = defineComponent({ return; } tempParams = params; - chart.dispatchAction({ type: 'hideTip' }); - showCheck.value = true; - c.changeTooltipState(false); - func = useClickOutside(drillDetailRef, () => { - showCheck.value = false; - c.changeTooltipState(true); - func.stop(); - }); - computedDrillDetailPos(params); + computedDrillDetailPos(params); // 计算反查按钮位置 + chart.dispatchAction({ type: 'hideTip' }); // 隐藏Tip提示框 + c.changeTooltipState(false); // 关闭提示配置 + showCheck.value = true; // 显示反查按钮 }); } }); // 查看明细 const openDrillDetail = (_event: MouseEvent) => { + _event.stopPropagation(); + _event.preventDefault(); showCheck.value = false; - if (func) { - func.stop(); - } c.changeTooltipState(true); + // 计算反查需要的指标和维度数据 const param = c.computedDrillDetailParam(tempParams); emit('drillDetail', param); }; @@ -199,6 +211,8 @@ const ChartControl = defineComponent({ onBeforeUnmount(() => { window.removeEventListener('resize', setHeight); + window.removeEventListener('pointerdown', setDrillState); + window.removeEventListener('click', setTipState); resizeObserver?.disconnect(); }); @@ -251,7 +265,7 @@ const ChartControl = defineComponent({ ref='drillDetailRef' class={this.ns.e('drill-detail')} style={this.drillDetailPos} - onClick={this.openDrillDetail} + onPointerdown={this.openDrillDetail} >