From d6f11cbcdf2591f3222accffda46c8975b8aa4de Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Tue, 14 Nov 2023 16:52:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=20antd=20V5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 移除废弃组件 api, 适配新版 tooltip 样式 BREAKING CHANGE: antd v5, 组件层级样式升级 --- packages/s2-core/src/ui/tooltip/index.less | 2 +- .../data-accuracy-one-measure-spec.tsx | 6 +- .../data-accuracy-two-measures-spec.tsx | 6 +- .../spreadsheet/filter-sheet-spec.tsx | 2 +- .../spreadsheet/multiple-values-cell-spec.tsx | 4 +- .../__tests__/spreadsheet/pagination-spec.tsx | 4 +- .../spreadsheet/pressure-test-spec.tsx | 4 +- .../spreadsheet/table-sheet-spec.tsx | 4 +- packages/s2-react/playground/config.ts | 20 +++-- packages/s2-react/playground/index.tsx | 4 +- .../src/components/advanced-sort/index.less | 22 +++-- .../src/components/advanced-sort/index.tsx | 2 +- .../src/components/config-provider/index.tsx | 14 ++++ .../src/components/drill-down/index.tsx | 12 +-- .../s2-react/src/components/export/index.tsx | 13 +-- .../s2-react/src/components/sheets/index.tsx | 9 +-- .../components/switcher/content/index.less | 7 +- .../components/switcher/dimension/index.less | 17 ++-- .../components/switcher/dimension/index.tsx | 5 +- .../src/components/switcher/index.tsx | 81 +++++++++---------- .../tooltip/components/operator.tsx | 16 ++-- .../src/components/tooltip/custom-tooltip.tsx | 6 +- .../src/styles/tooltip/operator.less | 45 ++++++----- packages/s2-shared/src/styles/variables.less | 1 + s2-site/package.json | 4 +- 25 files changed, 173 insertions(+), 137 deletions(-) create mode 100644 packages/s2-react/src/components/config-provider/index.tsx diff --git a/packages/s2-core/src/ui/tooltip/index.less b/packages/s2-core/src/ui/tooltip/index.less index 83869102cc..9ecd69c305 100644 --- a/packages/s2-core/src/ui/tooltip/index.less +++ b/packages/s2-core/src/ui/tooltip/index.less @@ -14,7 +14,7 @@ ~'@{css-var-prefix}-tooltip-background', rgba(255, 255, 255, 0.95) ); - border-radius: 2px; + border-radius: 4px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); font-size: 12px; font-family: Roboto, 'PingFang SC', 'Chinese Quote', BlinkMacSystemFont, diff --git a/packages/s2-react/__tests__/spreadsheet/data-accuracy-one-measure-spec.tsx b/packages/s2-react/__tests__/spreadsheet/data-accuracy-one-measure-spec.tsx index 9b6ec947f6..fc4a1368de 100644 --- a/packages/s2-react/__tests__/spreadsheet/data-accuracy-one-measure-spec.tsx +++ b/packages/s2-react/__tests__/spreadsheet/data-accuracy-one-measure-spec.tsx @@ -8,7 +8,9 @@ import { type S2MountContainer, type S2Options, } from '@antv/s2'; -import 'antd/dist/antd.min.css'; + +// import 'antd/dist/antd.min.css'; + import React from 'react'; import { data1, @@ -93,6 +95,7 @@ const getDataCfg = (index: number) => values: ['price'], valueInCols: true, }, + meta: [ { field: 'price', @@ -105,6 +108,7 @@ const getDataCfg = (index: number) => formatter: (v: string) => `${v}个`, }, ], + data: getData(index), totalData: getData(index, true), sortParams: [], diff --git a/packages/s2-react/__tests__/spreadsheet/data-accuracy-two-measures-spec.tsx b/packages/s2-react/__tests__/spreadsheet/data-accuracy-two-measures-spec.tsx index c157849283..60dc9afff8 100644 --- a/packages/s2-react/__tests__/spreadsheet/data-accuracy-two-measures-spec.tsx +++ b/packages/s2-react/__tests__/spreadsheet/data-accuracy-two-measures-spec.tsx @@ -8,7 +8,9 @@ import { type S2MountContainer, type S2Options, } from '@antv/s2'; -import 'antd/dist/antd.min.css'; + +// import 'antd/dist/antd.min.css'; + import React from 'react'; import { data10, @@ -83,6 +85,7 @@ const getDataCfg = (index: number) => values: ['price', 'account'], valueInCols: true, }, + meta: [ { field: 'price', @@ -95,6 +98,7 @@ const getDataCfg = (index: number) => formatter: (v: number) => auto(v), }, ], + data: getData(index), totalData: getData(index, true), sortParams: [], diff --git a/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx index ec3880099b..e6732cf50d 100644 --- a/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx +++ b/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx @@ -18,7 +18,7 @@ import { type SheetComponentsProps, } from '@/components'; -import 'antd/dist/antd.min.css'; +// import 'antd/dist/antd.min.css'; const data = getMockData('../data/tableau-supermarket.csv'); diff --git a/packages/s2-react/__tests__/spreadsheet/multiple-values-cell-spec.tsx b/packages/s2-react/__tests__/spreadsheet/multiple-values-cell-spec.tsx index 564247f237..97ebd235d3 100644 --- a/packages/s2-react/__tests__/spreadsheet/multiple-values-cell-spec.tsx +++ b/packages/s2-react/__tests__/spreadsheet/multiple-values-cell-spec.tsx @@ -7,7 +7,9 @@ import { type S2Options, } from '@antv/s2'; import { Radio, Switch } from 'antd'; -import 'antd/dist/antd.min.css'; + +// import 'antd/dist/antd.min.css'; + import { cloneDeep, merge } from 'lodash'; import React from 'react'; import { diff --git a/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx b/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx index 6705f2c3bf..b67c6251ff 100644 --- a/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx +++ b/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx @@ -1,6 +1,8 @@ import { SpreadSheet, setLang, type LangType, type Pagination } from '@antv/s2'; import { waitFor } from '@testing-library/react'; -import 'antd/dist/antd.min.css'; + +// import 'antd/dist/antd.min.css'; + import React from 'react'; import type { Root } from 'react-dom/client'; import { SheetComponent, type SheetComponentsProps } from '../../src'; diff --git a/packages/s2-react/__tests__/spreadsheet/pressure-test-spec.tsx b/packages/s2-react/__tests__/spreadsheet/pressure-test-spec.tsx index e944cb410f..ec4e8a4304 100644 --- a/packages/s2-react/__tests__/spreadsheet/pressure-test-spec.tsx +++ b/packages/s2-react/__tests__/spreadsheet/pressure-test-spec.tsx @@ -6,7 +6,9 @@ import { type S2MountContainer, type S2Options, } from '@antv/s2'; -import 'antd/dist/antd.min.css'; + +// import 'antd/dist/antd.min.css'; + import React from 'react'; import { renderComponent } from '../util/helpers'; import { type SheetComponentsProps, SheetComponent } from '../../src'; diff --git a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx index 218360c342..30314b1459 100644 --- a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx +++ b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx @@ -13,7 +13,9 @@ import { } from '@antv/s2'; import { waitFor } from '@testing-library/react'; import { Space, Switch, message } from 'antd'; -import 'antd/dist/antd.min.css'; + +// import 'antd/dist/antd.min.css'; + import { find } from 'lodash'; import React, { useEffect } from 'react'; import { act } from 'react-dom/test-utils'; diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts index a4215f3d0a..6c31194816 100644 --- a/packages/s2-react/playground/config.ts +++ b/packages/s2-react/playground/config.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import { CellType, ResizeType, @@ -255,21 +256,19 @@ export const s2Options: SheetComponentOptions = { hiddenColumns: true, menus: [ { - key: 'trend-2', - label: '趋势', - icon: 'Trend', + key: 'a-1', + label: '操作-1', + icon: 'Plus', onClick: (cell) => { - // eslint-disable-next-line no-console - console.log('趋势图 icon 点击: 2222', cell); + console.log('操作-1', cell); }, children: [ { - key: 'trend-3', - label: '趋势-3', - icon: 'Trend', + key: 'a-2', + label: '操作-2', + icon: 'Minus', onClick: (cell) => { - // eslint-disable-next-line no-console - console.log('趋势图 icon 点击:3333 ', cell); + console.log('操作-2', cell); }, }, ], @@ -280,7 +279,6 @@ export const s2Options: SheetComponentOptions = { icon: 'Trend', visible: (cell) => cell.cellType === CellType.DATA_CELL, onClick: (cell) => { - // eslint-disable-next-line no-console console.log('趋势图 icon 点击: ', cell); }, }, diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx index 4d0d1ffd4b..65d75b7d8e 100644 --- a/packages/s2-react/playground/index.tsx +++ b/packages/s2-react/playground/index.tsx @@ -40,7 +40,9 @@ import { version as AntdVersion, Divider, } from 'antd'; -import 'antd/dist/antd.min.css'; + +// import 'antd/dist/antd.min.css'; + import { debounce, isEmpty, isBoolean } from 'lodash'; import React from 'react'; import { ChromePicker } from 'react-color'; diff --git a/packages/s2-react/src/components/advanced-sort/index.less b/packages/s2-react/src/components/advanced-sort/index.less index 65d3902773..99f3cbb6af 100644 --- a/packages/s2-react/src/components/advanced-sort/index.less +++ b/packages/s2-react/src/components/advanced-sort/index.less @@ -21,24 +21,26 @@ background-color: var(~'@{css-var-prefix}-container-background', #fff); } .@{advanced-sort-cls-prefix}-sider-layout.ant-layout-sider { - border-right: 1px solid var(~'@{css-var-prefix}-border', #d9d9d9); + border-right: 1px solid var(~'@{css-var-prefix}-border', #f0f0f0); background: var(~'@{css-var-prefix}-container-background', #fff); } .@{advanced-sort-cls-prefix}-sider-layout { .@{advanced-sort-cls-prefix}-title { font-size: 12px; - padding: 8px 16px; - border-bottom: 1px solid var(~'@{css-var-prefix}-border', #d9d9d9); + padding: 8px 16px 8px 0; + border-bottom: 1px solid var(~'@{css-var-prefix}-border', #f0f0f0); } .@{advanced-sort-cls-prefix}-dimension-item { height: 32px; - padding: 8px 5px; + padding: 8px 6px 8px 0; cursor: pointer; align-items: center; color: var(~'@{css-var-prefix}-font-65', rgba(0, 0, 0, 0.65)); font-size: 12px; - margin-left: 10px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } @@ -48,7 +50,7 @@ .@{advanced-sort-cls-prefix}-title { font-size: 12px; padding: 8px 16px; - border-bottom: 1px solid var(~'@{css-var-prefix}-border', #d9d9d9); + border-bottom: 1px solid var(~'@{css-var-prefix}-border', #f0f0f0); } .@{advanced-sort-cls-prefix}-custom-form.ant-form { @@ -105,12 +107,16 @@ font-size: 12px; text-align: center; background-color: var(~'@{css-var-prefix}-block-background', #fafafa); - border: 1px solid var(~'@{css-var-prefix}-border', #d9d9d9); - border-radius: 2px 0 0 2px; + border: 1px solid var(~'@{css-var-prefix}-border', #f0f0f0); + border-radius: 4px 0 0 4px; height: 24px; display: inline-block; line-height: 21px; margin-left: 8px; + + & + .ant-select .ant-select-selector { + border-radius: 0 4px 4px 0; + } } } diff --git a/packages/s2-react/src/components/advanced-sort/index.tsx b/packages/s2-react/src/components/advanced-sort/index.tsx index a07a5afbbe..8253fa0781 100644 --- a/packages/s2-react/src/components/advanced-sort/index.tsx +++ b/packages/s2-react/src/components/advanced-sort/index.tsx @@ -20,7 +20,6 @@ import { uniq, } from 'lodash'; import React, { useEffect, useState } from 'react'; - import { ADVANCED_SORT_PRE_CLS, getSortRuleOptions, @@ -297,6 +296,7 @@ export const AdvancedSort: React.FC = ({
{ handleDimension(item); }} diff --git a/packages/s2-react/src/components/config-provider/index.tsx b/packages/s2-react/src/components/config-provider/index.tsx new file mode 100644 index 0000000000..3dda5da1ba --- /dev/null +++ b/packages/s2-react/src/components/config-provider/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { ConfigProvider as AntdConfigProvider } from 'antd'; +import zhCN from 'antd/es/locale/zh_CN'; +import enUS from 'antd/es/locale/en_US'; +import { getLang } from '@antv/s2'; + +export const ConfigProvider: React.FC<{ children: React.ReactNode }> = ( + props, +) => { + const { children } = props; + const locale = getLang() === 'zh_CN' ? zhCN : enUS; + + return {children}; +}; diff --git a/packages/s2-react/src/components/drill-down/index.tsx b/packages/s2-react/src/components/drill-down/index.tsx index 6cdcd07072..a6185ab416 100644 --- a/packages/s2-react/src/components/drill-down/index.tsx +++ b/packages/s2-react/src/components/drill-down/index.tsx @@ -1,12 +1,5 @@ import React, { type ReactNode, useEffect, useState } from 'react'; -import { - Button, - ConfigProvider, - Empty, - Input, - Menu, - type MenuProps, -} from 'antd'; +import { Button, Empty, Input, Menu, type MenuProps } from 'antd'; import cx from 'classnames'; import { isEmpty } from 'lodash'; import type { BaseDataSet, BaseDrillDownComponentProps } from '@antv/s2-shared'; @@ -18,6 +11,7 @@ import { SearchIcon, TextIcon, } from '../icons/index'; +import { ConfigProvider } from '../config-provider'; import '@antv/s2-shared/src/styles/drill-down.less'; @@ -109,7 +103,7 @@ export const DrillDown: React.FC = ({ }); return ( - +
{titleText}
diff --git a/packages/s2-react/src/components/export/index.tsx b/packages/s2-react/src/components/export/index.tsx index 37bec6ae2a..90f52c08ad 100644 --- a/packages/s2-react/src/components/export/index.tsx +++ b/packages/s2-react/src/components/export/index.tsx @@ -9,7 +9,7 @@ import { copyData as getSheetData, i18n, } from '@antv/s2'; -import { Dropdown, message, type DropDownProps } from 'antd'; +import { Dropdown, message, type DropDownProps, Button } from 'antd'; import cx from 'classnames'; import React from 'react'; import { DotIcon } from '../icons'; @@ -55,8 +55,7 @@ export const Export: React.FC = React.memo((props) => { const PRE_CLASS = `${S2_PREFIX_CLS}-export`; - const isAsyncRequest = - true || sheet?.dataCfg?.data?.length >= AsyncRequestThreshold; + const isAsyncRequest = sheet?.dataCfg?.data?.length >= AsyncRequestThreshold; const copyData = async (isFormat: boolean) => { const data = isAsyncRequest @@ -136,13 +135,7 @@ export const Export: React.FC = React.memo((props) => { {...restProps} {...dropdown} > - e.preventDefault()} - > - {icon || } - + ); }); diff --git a/packages/s2-react/src/components/sheets/index.tsx b/packages/s2-react/src/components/sheets/index.tsx index f4f626a788..b4691a3fce 100644 --- a/packages/s2-react/src/components/sheets/index.tsx +++ b/packages/s2-react/src/components/sheets/index.tsx @@ -1,10 +1,7 @@ import type { SpreadSheet } from '@antv/s2'; import React from 'react'; -import zhCN from 'antd/es/locale/zh_CN'; -import enUS from 'antd/es/locale/en_US'; -import { getLang } from '@antv/s2'; -import { ConfigProvider } from 'antd'; import { SpreadSheetContext } from '../../context/SpreadSheetContext'; +import { ConfigProvider } from '../config-provider'; import { EditableSheet } from './editable-sheet'; import { GridAnalysisSheet } from './grid-analysis-sheet'; import type { SheetComponentsProps } from './interface'; @@ -51,11 +48,9 @@ const Sheet = React.forwardRef( } }, [sheetType, sheetProps]); - const locale = getLang() === 'zh_CN' ? zhCN : enUS; - return ( - {CurrentSheet} + {CurrentSheet} ); }, diff --git a/packages/s2-react/src/components/switcher/content/index.less b/packages/s2-react/src/components/switcher/content/index.less index 38a536b259..d2482e4a43 100644 --- a/packages/s2-react/src/components/switcher/content/index.less +++ b/packages/s2-react/src/components/switcher/content/index.less @@ -25,12 +25,12 @@ } &-three-dimensions { - grid-template-rows: 1fr 1fr; - grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(2, 160px); + grid-template-columns: repeat(2, minmax(180px, 1fr)); } &-one-dimension { - grid-template-rows: 1fr; + grid-template-rows: 160px; grid-template-columns: 1fr; } @@ -38,6 +38,7 @@ display: flex; align-items: center; justify-content: space-between; + gap: 0 10px; &-reset-button { &.ant-btn { diff --git a/packages/s2-react/src/components/switcher/dimension/index.less b/packages/s2-react/src/components/switcher/dimension/index.less index eee13dd75f..d82fe65795 100644 --- a/packages/s2-react/src/components/switcher/dimension/index.less +++ b/packages/s2-react/src/components/switcher/dimension/index.less @@ -7,8 +7,9 @@ @highlight-gray-color: rgba(0, 0, 0, 0.25); .@{switcher-cls-prefix}-dimension { - width: 185px; background-color: transparent; + display: flex; + flex-direction: column; &.long-dimension { grid-row: span 2; @@ -19,7 +20,6 @@ align-items: center; margin-bottom: @normal-span; justify-content: space-between; - height: 18px; .title { span { @@ -31,6 +31,8 @@ } .expand-option { + font-size: 12px; + .description { margin-left: 4px; } @@ -38,12 +40,11 @@ } &-items { - height: calc(100% - 22px); + flex: 1; min-height: 120px; - max-height: 160px; padding: @normal-span; border: 1px solid @gray-color; - border-radius: 3px; + border-radius: 4px; overflow-y: auto; background: var(~'@{css-var-prefix}-block-background'); @@ -66,7 +67,7 @@ } } - &-long-items { - max-height: 358px; - } + // &-long-items { + // max-height: 338px; + // } } diff --git a/packages/s2-react/src/components/switcher/dimension/index.tsx b/packages/s2-react/src/components/switcher/dimension/index.tsx index 6e336a8bc4..6b074e0a35 100644 --- a/packages/s2-react/src/components/switcher/dimension/index.tsx +++ b/packages/s2-react/src/components/switcher/dimension/index.tsx @@ -56,8 +56,9 @@ export const Dimension: React.FC = React.memo((props) => {
{expandable && (
- - {expandText} + + {expandText} +
)}
diff --git a/packages/s2-react/src/components/switcher/index.tsx b/packages/s2-react/src/components/switcher/index.tsx index e3565687b0..33301ce23b 100644 --- a/packages/s2-react/src/components/switcher/index.tsx +++ b/packages/s2-react/src/components/switcher/index.tsx @@ -20,45 +20,44 @@ export interface SwitcherProps disabled?: boolean; } -export const Switcher: FC = ({ - title, - popover, - disabled, - ...otherProps -}) => { - const [visible, setVisible] = useState(false); - const onToggleVisible = () => { - setVisible((prev) => !prev); - }; +export const Switcher: FC = React.memo( + ({ title, popover, disabled, ...otherProps }) => { + const [visible, setVisible] = useState(false); + const onToggleVisible = () => { + setVisible((prev) => !prev); + }; - return ( - - } - onOpenChange={onToggleVisible} - trigger="click" - placement="bottomLeft" - destroyTooltipOnHide - {...popover} - overlayClassName={cls( - getSwitcherClassName('switcher-overlay'), - popover?.overlayClassName, - )} - > - {isValidElement(title) ? ( - title - ) : ( - - )} - - ); -}; + return ( + + } + onOpenChange={onToggleVisible} + trigger="click" + placement="bottomLeft" + destroyTooltipOnHide + {...popover} + overlayClassName={cls( + getSwitcherClassName('switcher-overlay'), + popover?.overlayClassName, + )} + > + {isValidElement(title) ? ( + title + ) : ( + + )} + + ); + }, +); + +Switcher.displayName = 'Switcher'; diff --git a/packages/s2-react/src/components/tooltip/components/operator.tsx b/packages/s2-react/src/components/tooltip/components/operator.tsx index 65a73c2bc4..ce103ca327 100644 --- a/packages/s2-react/src/components/tooltip/components/operator.tsx +++ b/packages/s2-react/src/components/tooltip/components/operator.tsx @@ -30,6 +30,7 @@ export const TooltipOperator: React.FC = React.memo( const renderMenu = (menu: TooltipOperatorMenu): ItemType => { const { key, label, children, onClick } = menu; + const subMenus = map(children, renderMenu) as unknown as ItemType[]; return { key, @@ -41,23 +42,28 @@ export const TooltipOperator: React.FC = React.memo( /> ), popupClassName: `${TOOLTIP_PREFIX_CLS}-operator-submenu-popup`, - onTitleClick: () => { + onTitleClick: (info) => { onClick?.(cell); + onMenuClick?.(info as any); }, - children: map(children, renderMenu) as unknown as ItemType[], + children: subMenus, }; }; const renderMenus = () => { - const subMenus = map(menus, renderMenu) as unknown as ItemType[]; + const items = map(menus, renderMenu) as unknown as ItemType[]; + // TODO: 透传 antd menu 参数 return ( { + onMenuClick?.(...args); + }} defaultSelectedKeys={defaultSelectedKeys} - items={subMenus} + items={items} + selectable={onlyShowOperator} /> ); }; diff --git a/packages/s2-react/src/components/tooltip/custom-tooltip.tsx b/packages/s2-react/src/components/tooltip/custom-tooltip.tsx index 99070f562f..2d5a8f2f3c 100644 --- a/packages/s2-react/src/components/tooltip/custom-tooltip.tsx +++ b/packages/s2-react/src/components/tooltip/custom-tooltip.tsx @@ -55,12 +55,12 @@ export class CustomTooltip extends BaseTooltip< } as TooltipRenderProps; if (showOptions?.options?.forceRender) { - this.clear(); + this.forceClearContent(); } const Content = this.isMobileDevice() ? ( } @@ -100,7 +100,7 @@ export class CustomTooltip extends BaseTooltip< super.destroy(); } - private clear() { + private forceClearContent() { if (this.isLegacyReactVersion) { this.unmount(); diff --git a/packages/s2-shared/src/styles/tooltip/operator.less b/packages/s2-shared/src/styles/tooltip/operator.less index 352824dd1b..3a43e81c6c 100644 --- a/packages/s2-shared/src/styles/tooltip/operator.less +++ b/packages/s2-shared/src/styles/tooltip/operator.less @@ -10,13 +10,22 @@ color: var(~'@{css-var-prefix}-font', ~'@{tooltip-menu-item-text-color}'); background: var(~'@{css-var-prefix}-tooltip-operator-background', #f9f9f9); font-size: @tooltip-menu-font-size; - line-height: 36px; + line-height: @tooltip-menu-item-height; border: 0; cursor: pointer; + // menu hover 时的下划线 + // .ant-menu-submenu { + // &::after { + // border: none !important; + // transition: none !important; + // background: transparent !important; + // } + // } + .ant-menu-horizontal { background: transparent; - line-height: 36px; + line-height: @tooltip-menu-item-height; } .ant-dropdown-trigger, @@ -26,21 +35,22 @@ &-menus.ant-menu-vertical.ant-menu { font-size: @tooltip-menu-font-size; - line-height: 36px; color: var(~'@{css-var-prefix}-font', ~'@{tooltip-menu-item-text-color}'); border: 0; user-select: none; + padding: 4px; .ant-menu-item { - height: 36px; + height: @tooltip-menu-item-height; } - .ant-menu-item:not(:last-child) { - margin: 0; - } + // .ant-menu-item:not(:last-child) { + // margin: 0; + // } .ant-menu-submenu > .ant-menu-submenu-title { - height: 36px; + height: @tooltip-menu-item-height; + width: 100%; .ant-menu-submenu-arrow { color: var( @@ -58,10 +68,9 @@ .with-menu-item-color(); font-size: @tooltip-menu-font-size; - line-height: 36px; + line-height: @tooltip-menu-item-height; padding: 0 12px; border: 0; - margin: 0; } .ant-dropdown-menu-submenu, @@ -71,9 +80,9 @@ .ant-menu-submenu-title { .with-menu-item-color(); - padding: 0 12px; + padding: 0 0 0 12px; font-size: @tooltip-menu-font-size; - line-height: 36px; + line-height: @tooltip-menu-item-height; margin: 0; .ant-dropdown-menu-title-content, @@ -90,14 +99,15 @@ .with-menu-item-color(); font-size: @tooltip-menu-font-size; - line-height: 36px; + line-height: @tooltip-menu-item-height; padding: 0 12px; } .ant-menu-vertical .ant-menu-item { margin: 0; - height: 36px; - line-height: 36px; + height: @tooltip-menu-item-height; + line-height: @tooltip-menu-item-height; + width: 100%; } .ant-menu-vertical .ant-menu-item:not(:last-child) { @@ -107,7 +117,6 @@ &-icon { vertical-align: middle; - margin-right: 4px; svg { width: @tooltip-menu-font-size; @@ -124,7 +133,7 @@ font-size: @tooltip-menu-font-size; .ant-menu-item { - height: 36px; + height: @tooltip-menu-item-height; } } @@ -132,7 +141,7 @@ &-menus.ant-menu-vertical { .ant-dropdown-menu-item, .ant-menu-item { - line-height: 36px; + line-height: @tooltip-menu-item-height; } .ant-dropdown-menu-submenu, diff --git a/packages/s2-shared/src/styles/variables.less b/packages/s2-shared/src/styles/variables.less index 66472791bd..43c6f8e34e 100644 --- a/packages/s2-shared/src/styles/variables.less +++ b/packages/s2-shared/src/styles/variables.less @@ -2,6 +2,7 @@ @tooltip-operator-cls-prefix: ~'@{s2-cls-prefix}-tooltip-operator'; @tooltip-menu-item-text-color: rgba(0, 0, 0, 0.65); +@tooltip-menu-item-height: 36px; @tooltip-menu-font-size: 12px; // 下钻 diff --git a/s2-site/package.json b/s2-site/package.json index f3d9b9df38..495245e985 100644 --- a/s2-site/package.json +++ b/s2-site/package.json @@ -27,12 +27,12 @@ "deploy": "dumi build && cp ./CNAME ./dist/CNAME && gh-pages -d dist" }, "dependencies": { - "@ant-design/icons": "^4.7.0", + "@ant-design/icons": "^5.2.6", "@antv/dumi-theme-antv": "^0.3.5", "@antv/g-canvas": "^0.5.12", "@antv/s2": "next", "@antv/s2-react": "next", - "antd": "^4.24.1", + "antd": "^5.11.1", "copy-to-clipboard": "^3.3.1", "dumi": "^2.0.3", "gh-pages": "^3.1.0",