From 378ab508dd4d94854f14aa42bd6553e761fe34da Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Fri, 17 Nov 2023 11:29:01 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BF=AE=E5=A4=8D=20s2-vue=20?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-vue/playground/App.vue            | 80 ++++++++++---------
 .../tooltip/components/operator/index.vue     | 22 +++--
 .../tooltip/components/operator/menu.vue      | 14 ++--
 .../tooltip/components/operator/title.vue     |  6 +-
 .../s2-vue/src/components/tooltip/index.vue   |  6 +-
 5 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/packages/s2-vue/playground/App.vue b/packages/s2-vue/playground/App.vue
index 0c072a9c11..25f913d111 100644
--- a/packages/s2-vue/playground/App.vue
+++ b/packages/s2-vue/playground/App.vue
@@ -520,6 +520,7 @@ const fieldMap = {
   channel: ['物美', '华联'],
   sex: ['男', '女'],
 };
+
 const partDrillDown: PartDrillDown = {
   drillConfig: {
     dataSet: [
@@ -545,11 +546,12 @@ const partDrillDown: PartDrillDown = {
       const field = drillFields[0];
       const rowData = (
         dataSet.getCellMultiData({
-          query: meta?.query,
+          query: meta?.query!,
           drillDownFields: [preDrillDownfield],
         }) as Data[]
       ).filter(
-        (item) => item!.sub_type && item!.type && item![preDrillDownfield],
+        (item) =>
+          item!['sub_type'] && item!['type'] && item![preDrillDownfield],
       );
 
       console.log(rowData);
@@ -609,47 +611,49 @@ export default defineComponent({
         operation: {
           hiddenColumns: true,
           sort: true,
-          onClick: (...args: any[]) => {
-            console.log('menuClick', ...args);
-          },
-          menus: [
-            {
-              key: 'trend',
-              text: '趋势',
-              icon: 'Trend',
-              enable: (cell) => cell.cellType === CellType.DATA_CELL,
-              onClick(cell) {
-                // eslint-disable-next-line no-console
-                console.log('趋势图 icon 点击: ', cell);
-              },
+          menu: {
+            onClick: (info, cell) => {
+              console.log('menuClick', info, cell);
             },
-            {
-              key: '1',
-              icon: 'Trend',
-              text: '菜单1',
-              onClick(cell: any) {
-                console.log('cell-1: ', cell);
+            items: [
+              {
+                key: 'trend',
+                icon: 'Trend',
+                label: '趋势',
+                visible: (cell) => cell.cellType === CellType.DATA_CELL,
+                onClick(info, cell) {
+                  // eslint-disable-next-line no-console
+                  console.log('趋势图 icon 点击: ', info, cell);
+                },
               },
-              children: [
-                {
-                  key: '1-1',
-                  icon: 'Trend',
-                  text: '菜单1-1',
-                  onClick(cell: any) {
-                    console.log('cell-1-1: ', cell);
+              {
+                key: '1',
+                icon: 'Trend',
+                label: '菜单1',
+                onClick(info, cell) {
+                  console.log('cell-1: ', cell);
+                },
+                children: [
+                  {
+                    key: '1-1',
+                    icon: 'Trend',
+                    label: '菜单1-1',
+                    onClick(info, cell) {
+                      console.log('cell-1-1: ', cell);
+                    },
                   },
+                ],
+              },
+              {
+                key: '2',
+                icon: 'Trend',
+                label: '菜单2',
+                onClick(info, cell) {
+                  console.log('cell-2: ', cell);
                 },
-              ],
-            },
-            {
-              key: '2',
-              icon: 'Trend',
-              text: '菜单2',
-              onClick(cell: any) {
-                console.log('cell-2: ', cell);
               },
-            },
-          ],
+            ],
+          },
         },
       },
     }) as unknown as S2Options;
diff --git a/packages/s2-vue/src/components/tooltip/components/operator/index.vue b/packages/s2-vue/src/components/tooltip/components/operator/index.vue
index 1b6734b657..c5266d9153 100644
--- a/packages/s2-vue/src/components/tooltip/components/operator/index.vue
+++ b/packages/s2-vue/src/components/tooltip/components/operator/index.vue
@@ -1,5 +1,9 @@
 <script lang="ts">
-import { TOOLTIP_PREFIX_CLS } from '@antv/s2';
+import {
+  type TooltipOperatorMenuInfo,
+  type TooltipBaseOperatorMenuItem,
+  TOOLTIP_PREFIX_CLS,
+} from '@antv/s2';
 import type { TooltipOperatorProps as BaseTooltipOperatorProps } from '@antv/s2-shared';
 import { Menu, Dropdown, type MenuProps } from 'ant-design-vue';
 import { defineComponent } from 'vue';
@@ -15,19 +19,25 @@ interface TooltipOperatorProps extends BaseTooltipOperatorProps {
 export default defineComponent({
   name: 'TooltipOperator',
   props: [
-    'menus',
+    'menu',
     'onlyShowOperator',
-    'onClick',
     'cell',
   ] as unknown as GetInitProps<TooltipOperatorProps>,
-  setup(_, { emit }) {
+  setup(props) {
+    const { menu, cell } = props;
     const onMenuClick: MenuClickEventHandler = (menuInfo) => {
-      emit('click', menuInfo);
+      menu?.onClick?.(menuInfo as unknown as TooltipOperatorMenuInfo, cell);
+    };
+
+    const onMenuTitleClick = (subMenu: TooltipBaseOperatorMenuItem) => () => {
+      subMenu?.onClick(subMenu as TooltipOperatorMenuInfo, cell);
     };
 
     return {
       TOOLTIP_PREFIX_CLS,
       onMenuClick,
+      onMenuTitleClick,
+      menus: menu?.items,
     };
   },
   components: {
@@ -54,7 +64,7 @@ export default defineComponent({
     <template v-else>
       <template v-for="menu in menus" :key="menu.key">
         <Dropdown :class="`${TOOLTIP_PREFIX_CLS}-operator-dropdown`">
-          <TooltipOperatorTitle :menu="menu" @click="menu.onClick?.(cell)" />
+          <TooltipOperatorTitle :menu="menu" @click="onMenuTitleClick(menu)" />
           <template #overlay>
             <Menu
               :class="`${TOOLTIP_PREFIX_CLS}-operator-menus`"
diff --git a/packages/s2-vue/src/components/tooltip/components/operator/menu.vue b/packages/s2-vue/src/components/tooltip/components/operator/menu.vue
index aacec63d27..840dd3d6c0 100644
--- a/packages/s2-vue/src/components/tooltip/components/operator/menu.vue
+++ b/packages/s2-vue/src/components/tooltip/components/operator/menu.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 import {
-  type TooltipOperatorMenu,
-  type S2CellType,
   TOOLTIP_PREFIX_CLS,
+  type TooltipOperatorMenuInfo,
+  type S2CellType,
+  type TooltipBaseOperatorMenuItem,
 } from '@antv/s2';
 import { Menu } from 'ant-design-vue';
 import { isEmpty } from 'lodash';
@@ -11,7 +12,7 @@ import type { GetInitProps } from '../../../../interface';
 import TooltipOperatorTitle from './title.vue';
 
 interface TooltipOperatorMenuProps {
-  menu: TooltipOperatorMenu;
+  menu: TooltipBaseOperatorMenuItem;
   cell: S2CellType;
 }
 
@@ -19,8 +20,9 @@ export default defineComponent({
   name: 'TooltipOperatorMenu',
   props: ['menu', 'cell'] as unknown as GetInitProps<TooltipOperatorMenuProps>,
   setup(props) {
+    const { menu, cell } = props;
     const onMenuTitleClick = () => {
-      props.menu.onClick?.(props.cell);
+      props.menu.onClick?.(menu as TooltipOperatorMenuInfo, cell);
     };
 
     return {
@@ -52,14 +54,14 @@ export default defineComponent({
         <TooltipOperatorMenu :menu="subMenu" :cell="cell" />
       </template>
       <template v-else>
-        <MenuItem :title="subMenu.text" :key="subMenu.key">
+        <MenuItem :title="subMenu.label" :key="subMenu.key">
           <TooltipOperatorTitle :menu="subMenu" @click="onMenuTitleClick" />
         </MenuItem>
       </template>
     </template>
   </SubMenu>
   <!-- v-if/else branches must use unique keys. -->
-  <MenuItem v-if="isEmpty(menu.children)" :title="menu.text" :key="menu.key">
+  <MenuItem v-if="isEmpty(menu.children)" :title="menu.label" :key="menu.key">
     <TooltipOperatorTitle :menu="menu" @click="onMenuTitleClick" />
   </MenuItem>
 </template>
diff --git a/packages/s2-vue/src/components/tooltip/components/operator/title.vue b/packages/s2-vue/src/components/tooltip/components/operator/title.vue
index 4c72dc235c..bf5db2e863 100644
--- a/packages/s2-vue/src/components/tooltip/components/operator/title.vue
+++ b/packages/s2-vue/src/components/tooltip/components/operator/title.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  type TooltipOperatorMenu,
+  type TooltipBaseOperatorMenuItem,
   TOOLTIP_PREFIX_CLS,
   getIcon,
 } from '@antv/s2';
@@ -8,7 +8,7 @@ import { computed, defineComponent } from 'vue';
 import type { GetInitProps } from '../../../../interface';
 
 interface TooltipOperatorTitleProps {
-  menu: TooltipOperatorMenu;
+  menu: TooltipBaseOperatorMenuItem;
 }
 
 export default defineComponent({
@@ -32,7 +32,7 @@ export default defineComponent({
       v-html="icon"
       :class="`${TOOLTIP_PREFIX_CLS}-operator-icon`"
     />
-    <span :class="`${TOOLTIP_PREFIX_CLS}-operator-text`">{{ menu.text }}</span>
+    <span :class="`${TOOLTIP_PREFIX_CLS}-operator-text`">{{ menu.label }}</span>
   </span>
 </template>
 
diff --git a/packages/s2-vue/src/components/tooltip/index.vue b/packages/s2-vue/src/components/tooltip/index.vue
index 4d51743453..4841f98f05 100644
--- a/packages/s2-vue/src/components/tooltip/index.vue
+++ b/packages/s2-vue/src/components/tooltip/index.vue
@@ -44,18 +44,16 @@ export default defineComponent({
 <template>
   <template v-if="onlyShowOperator">
     <TooltipOperator
-      :menus="operator?.menus || []"
+      :menu="operator?.menu"
       :onlyShowOperator="true"
       :cell="cell"
-      @click="operator?.onClick"
     />
   </template>
   <template v-else>
     <TooltipOperator
-      :menus="operator?.menus || []"
+      :menu="operator?.menu"
       :onlyShowOperator="false"
       :cell="cell"
-      @click="operator?.onClick"
     />
 
     <template v-if="content">