diff --git a/.changeset/brown-mails-accept.md b/.changeset/brown-mails-accept.md new file mode 100644 index 000000000..d35b72803 --- /dev/null +++ b/.changeset/brown-mails-accept.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/pop-confirm": patch +--- + +fix: 修复点击按钮会触发 onCancel 问题 diff --git a/.changeset/fast-waves-explode.md b/.changeset/fast-waves-explode.md new file mode 100644 index 000000000..b918a14ca --- /dev/null +++ b/.changeset/fast-waves-explode.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +fix(pop-confirm): 修复点击确定按钮会触发 onCancel 问题 diff --git a/.changeset/large-glasses-share.md b/.changeset/large-glasses-share.md new file mode 100644 index 000000000..d6e705ac4 --- /dev/null +++ b/.changeset/large-glasses-share.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/preview": minor +--- + +feat: 支持配置图片水印以及禁止右键下载图片 diff --git a/.changeset/real-keys-check.md b/.changeset/real-keys-check.md new file mode 100644 index 000000000..c33995b8c --- /dev/null +++ b/.changeset/real-keys-check.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/select": patch +--- + +fix: 修复搜索时在中文输入法下按回车键弹窗会关闭的问题 diff --git a/.changeset/serious-penguins-provide.md b/.changeset/serious-penguins-provide.md new file mode 100644 index 000000000..da704d2c1 --- /dev/null +++ b/.changeset/serious-penguins-provide.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(preview): 支持图片配置水印以及禁止右键下载图片 diff --git a/.changeset/tough-kangaroos-beam.md b/.changeset/tough-kangaroos-beam.md new file mode 100644 index 000000000..db7cba9d7 --- /dev/null +++ b/.changeset/tough-kangaroos-beam.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +fix(select): 修复搜索时在中文输入法下按回车键弹窗会关闭的问题 diff --git a/packages/ui/descriptions/CHANGELOG.md b/packages/ui/descriptions/CHANGELOG.md index 3f5e50c68..4f4295e01 100644 --- a/packages/ui/descriptions/CHANGELOG.md +++ b/packages/ui/descriptions/CHANGELOG.md @@ -1,5 +1,11 @@ # @hi-ui/descriptions +## 4.3.0 + +### Minor Changes + +- [#2812](https://github.com/XiaoMi/hiui/pull/2812) [`fbaf242b0`](https://github.com/XiaoMi/hiui/commit/fbaf242b0e36729787ee576e7e3ab05ed4115cf4) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - feat: 新增自定义列间距功能 + ## 4.2.5 ### Patch Changes diff --git a/packages/ui/descriptions/package.json b/packages/ui/descriptions/package.json index 71eb1ce26..40e726937 100644 --- a/packages/ui/descriptions/package.json +++ b/packages/ui/descriptions/package.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/descriptions", - "version": "4.2.5", + "version": "4.3.0", "description": "A sub-package for @hi-ui/hiui.", "keywords": [], "author": "HiUI ", diff --git a/packages/ui/descriptions/src/Cell.tsx b/packages/ui/descriptions/src/Cell.tsx index 10d3b17e3..fc1a23582 100644 --- a/packages/ui/descriptions/src/Cell.tsx +++ b/packages/ui/descriptions/src/Cell.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { cx } from '@hi-ui/classname' +import { cx, getPrefixStyleVar } from '@hi-ui/classname' import { isNullish } from '@hi-ui/type-assertion' export const Cell: React.FC = ({ @@ -13,6 +13,7 @@ export const Cell: React.FC = ({ label, content, labelWidth, + cellColumnGap, }) => { const Component: any = component @@ -42,7 +43,13 @@ export const Cell: React.FC = ({ return ( -
+
{!isNullish(label) && ( {label} @@ -67,4 +74,5 @@ export interface CellProps { label?: React.ReactNode content?: React.ReactNode labelWidth?: React.ReactText + cellColumnGap?: React.ReactText } diff --git a/packages/ui/descriptions/src/Descriptions.tsx b/packages/ui/descriptions/src/Descriptions.tsx index 5876e5d3d..9220da768 100644 --- a/packages/ui/descriptions/src/Descriptions.tsx +++ b/packages/ui/descriptions/src/Descriptions.tsx @@ -29,6 +29,7 @@ export const Descriptions = forwardRef appearance = 'unset', labelPlacement = 'left', labelWidth, + columnGap, size = 'md', ...rest }, @@ -66,6 +67,7 @@ export const Descriptions = forwardRef noBackground={noBackground} labelPlacement={labelPlacement} rootLabelWidth={labelWidth} + cellColumnGap={columnGap} /> ))} @@ -100,6 +102,11 @@ export interface DescriptionsProps extends HiBaseHTMLProps<'div'> { * label宽度 */ labelWidth?: React.ReactText + /** + * 单元格列间距 + * 注:在无边框场景下生效 + */ + columnGap?: React.ReactText /** * 设置大小 */ diff --git a/packages/ui/descriptions/src/Row.tsx b/packages/ui/descriptions/src/Row.tsx index aaec27471..c5117cb42 100644 --- a/packages/ui/descriptions/src/Row.tsx +++ b/packages/ui/descriptions/src/Row.tsx @@ -49,6 +49,7 @@ export interface RowProps { noBackground?: boolean labelPlacement?: 'left' | 'center' | 'right' rootLabelWidth?: React.ReactText + cellColumnGap?: React.ReactText } interface CellConfig { @@ -60,7 +61,13 @@ interface CellConfig { function renderCols( items: React.ReactElement[], - { prefixCls, bordered, labelPlacement: labelPlacementContext, rootLabelWidth }: RowProps, + { + prefixCls, + bordered, + labelPlacement: labelPlacementContext, + rootLabelWidth, + cellColumnGap, + }: RowProps, { component, type, showLabel, showContent }: CellConfig ) { return items.map( @@ -95,6 +102,7 @@ function renderCols( label={showLabel ? label : null} content={showContent ? children : null} labelWidth={labelWidth ?? rootLabelWidth} + cellColumnGap={index === items.length - 1 ? 0 : cellColumnGap} /> ) } diff --git a/packages/ui/descriptions/src/styles/descriptions.scss b/packages/ui/descriptions/src/styles/descriptions.scss index c274dcba0..d0d9a7ecb 100644 --- a/packages/ui/descriptions/src/styles/descriptions.scss +++ b/packages/ui/descriptions/src/styles/descriptions.scss @@ -36,6 +36,7 @@ $prefix: '#{$component-prefix}-descriptions' !default; &__container { box-sizing: border-box; display: flex; + padding-right: var(--hi-v4-container-padding-right, 0); } &__label, diff --git a/packages/ui/form/CHANGELOG.md b/packages/ui/form/CHANGELOG.md index e2398b8c6..77eeb0408 100644 --- a/packages/ui/form/CHANGELOG.md +++ b/packages/ui/form/CHANGELOG.md @@ -1,5 +1,11 @@ # @hi-ui/form +## 4.2.0 + +### Minor Changes + +- [#2818](https://github.com/XiaoMi/hiui/pull/2818) [`39d555903`](https://github.com/XiaoMi/hiui/commit/39d555903c81207d5d2bf34a2a5d1942152dcee0) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: add showValidateMessage api + ## 4.1.7 ### Patch Changes diff --git a/packages/ui/form/package.json b/packages/ui/form/package.json index abdfb655d..6b6d6d654 100644 --- a/packages/ui/form/package.json +++ b/packages/ui/form/package.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/form", - "version": "4.1.7", + "version": "4.2.0", "description": "A sub-package for @hi-ui/hiui.", "keywords": [], "author": "HiUI ", diff --git a/packages/ui/form/src/Form.tsx b/packages/ui/form/src/Form.tsx index 1975ecbfe..0f125927c 100644 --- a/packages/ui/form/src/Form.tsx +++ b/packages/ui/form/src/Form.tsx @@ -29,6 +29,7 @@ export const Form = forwardRef( contentPosition = 'center', showRequiredOnValidateRequired = false, showColon = true, + showValidateMessage = true, ...rest }, ref @@ -61,17 +62,19 @@ export const Form = forwardRef( showColon, contentPosition, showRequiredOnValidateRequired, + showValidateMessage, ...formContext, prefixCls, } }, [ labelWidth, - formContext, labelPlacement, showColon, - prefixCls, contentPosition, showRequiredOnValidateRequired, + showValidateMessage, + formContext, + prefixCls, ]) const cls = cx(prefixCls, className, placement && `${prefixCls}--placement-${placement}`) @@ -118,6 +121,11 @@ export interface FormProps> * FormItem 开启 filed 的 required 校验时,展示红色星号 */ showRequiredOnValidateRequired?: boolean + /** + * 是否显示校验提示 + * @default true + */ + showValidateMessage?: boolean } if (__DEV__) { diff --git a/packages/ui/form/src/FormLabel.tsx b/packages/ui/form/src/FormLabel.tsx index 704741da4..3489c0dd2 100644 --- a/packages/ui/form/src/FormLabel.tsx +++ b/packages/ui/form/src/FormLabel.tsx @@ -16,6 +16,7 @@ export const FormLabel = forwardRef((prop labelPlacement: labelPlacementContext, showColon: showColonContext, contentPosition: contentPositionContext, + showValidateMessage: showValidateMessageContext, } = useFormContext() const { @@ -32,6 +33,7 @@ export const FormLabel = forwardRef((prop contentPosition = contentPositionContext, labelPlacement = labelPlacementContext, formMessage, + showValidateMessage: showValidateMessageProp = showValidateMessageContext, ...rest } = props @@ -92,7 +94,9 @@ export const FormLabel = forwardRef((prop {children}
-
{formMessage}
+ {showValidateMessageProp && ( +
{formMessage}
+ )} ) }) @@ -126,6 +130,10 @@ export interface FormLabelProps extends HiBaseHTMLProps<'div'> { * 提示信息 */ formMessage?: ReactNode + /** + * 是否显示校验提示。优先级高于 Form 设置的 showValidateMessage + */ + showValidateMessage?: boolean } if (__DEV__) { diff --git a/packages/ui/form/src/context.ts b/packages/ui/form/src/context.ts index 0803192ab..e1aff7fa7 100644 --- a/packages/ui/form/src/context.ts +++ b/packages/ui/form/src/context.ts @@ -8,6 +8,7 @@ export interface FormContextProps extends UseFormReturn { contentPosition: 'top' | 'center' | 'bottom' showColon: boolean showRequiredOnValidateRequired: boolean + showValidateMessage: boolean prefixCls: string } diff --git a/packages/ui/form/stories/get-values.stories.tsx b/packages/ui/form/stories/get-values.stories.tsx index f087fa8e7..6252945b5 100644 --- a/packages/ui/form/stories/get-values.stories.tsx +++ b/packages/ui/form/stories/get-values.stories.tsx @@ -51,7 +51,7 @@ export const GetValues = () => { - + + + + + + + ) +} diff --git a/packages/ui/hiui/CHANGELOG.md b/packages/ui/hiui/CHANGELOG.md index 93c675fbd..40f4d9720 100644 --- a/packages/ui/hiui/CHANGELOG.md +++ b/packages/ui/hiui/CHANGELOG.md @@ -1,5 +1,20 @@ # @hi-ui/hiui +## 4.5.9 + +### Patch Changes + +- [#2817](https://github.com/XiaoMi/hiui/pull/2817) [`c32ae3dd9`](https://github.com/XiaoMi/hiui/commit/c32ae3dd9b5a89840270649fc397d474e9e1de4b) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(table): 修复表头分组单元格边框显示问题 + +- [#2812](https://github.com/XiaoMi/hiui/pull/2812) [`fbaf242b0`](https://github.com/XiaoMi/hiui/commit/fbaf242b0e36729787ee576e7e3ab05ed4115cf4) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - feat(descriptions): 新增自定义列间距功能 + +- [#2818](https://github.com/XiaoMi/hiui/pull/2818) [`39d555903`](https://github.com/XiaoMi/hiui/commit/39d555903c81207d5d2bf34a2a5d1942152dcee0) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(form): add showValidateMessage api + +- Updated dependencies [[`fbaf242b0`](https://github.com/XiaoMi/hiui/commit/fbaf242b0e36729787ee576e7e3ab05ed4115cf4), [`c32ae3dd9`](https://github.com/XiaoMi/hiui/commit/c32ae3dd9b5a89840270649fc397d474e9e1de4b), [`39d555903`](https://github.com/XiaoMi/hiui/commit/39d555903c81207d5d2bf34a2a5d1942152dcee0)]: + - @hi-ui/descriptions@4.3.0 + - @hi-ui/table@4.5.3 + - @hi-ui/form@4.2.0 + ## 4.5.8 ### Patch Changes diff --git a/packages/ui/hiui/package.json b/packages/ui/hiui/package.json index d9982c542..d8156266e 100644 --- a/packages/ui/hiui/package.json +++ b/packages/ui/hiui/package.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/hiui", - "version": "4.5.8", + "version": "4.5.9", "description": "The root-package for @hi-ui/hiui.", "keywords": [], "author": "HiUI ", @@ -60,13 +60,13 @@ "@hi-ui/collapse": "^4.1.6", "@hi-ui/counter": "^4.1.9", "@hi-ui/date-picker": "^4.6.2", - "@hi-ui/descriptions": "^4.2.5", + "@hi-ui/descriptions": "^4.3.0", "@hi-ui/drawer": "^4.1.4", "@hi-ui/dropdown": "^4.1.5", "@hi-ui/ellipsis-tooltip": "^4.1.8", "@hi-ui/empty-state": "^4.1.1", "@hi-ui/filter": "^4.1.5", - "@hi-ui/form": "^4.1.7", + "@hi-ui/form": "^4.2.0", "@hi-ui/grid": "^4.0.9", "@hi-ui/highlighter": "^4.0.9", "@hi-ui/input": "^4.1.1", @@ -97,7 +97,7 @@ "@hi-ui/stepper": "^4.0.8", "@hi-ui/svg-icon": "^4.0.8", "@hi-ui/switch": "^4.0.11", - "@hi-ui/table": "^4.5.2", + "@hi-ui/table": "^4.5.3", "@hi-ui/tabs": "^4.1.5", "@hi-ui/tag": "^4.2.1", "@hi-ui/textarea": "^4.1.7", diff --git a/packages/ui/pop-confirm/src/use-pop-confirm.ts b/packages/ui/pop-confirm/src/use-pop-confirm.ts index 272ae49fa..1a28cd324 100644 --- a/packages/ui/pop-confirm/src/use-pop-confirm.ts +++ b/packages/ui/pop-confirm/src/use-pop-confirm.ts @@ -23,17 +23,17 @@ export const usePopConfirm = ({ defaultVisible: false, visible: visibleProp, onOpen, - onClose: () => { - onClose?.() - onCancelProp?.() - }, + onClose, }) + const onCancelLatest = useLatestCallback(onCancelProp) + const onCancel = useCallback(() => { + onCancelLatest() if (closeOnCancel) { visibleAction.off() } - }, [closeOnCancel, visibleAction]) + }, [closeOnCancel, visibleAction, onCancelLatest]) const onConfirmLatest = useLatestCallback(onConfirmProp) diff --git a/packages/ui/preview/src/Preview.tsx b/packages/ui/preview/src/Preview.tsx index 4b952b946..32f89a6b1 100644 --- a/packages/ui/preview/src/Preview.tsx +++ b/packages/ui/preview/src/Preview.tsx @@ -2,6 +2,7 @@ import React, { forwardRef, useCallback, useState, useEffect, useRef, useMemo } import { cx, getPrefixCls } from '@hi-ui/classname' import { __DEV__ } from '@hi-ui/env' import { Portal } from '@hi-ui/portal' +import { Watermark, WatermarkProps } from '@hi-ui/watermark' import { CSSTransition } from 'react-transition-group' import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state' import { HiBaseHTMLProps } from '@hi-ui/core' @@ -43,6 +44,8 @@ export const Preview = forwardRef( onError, onClose, src, + watermarkProps, + disabledDownload = false, }, ref ) => { @@ -65,6 +68,13 @@ export const Preview = forwardRef( const isMultiple = useMemo(() => Array.isArray(src) && src.length > 1, [src]) + // 图片加水印 + const [watermarkContainerRef, setWatermarkContainerRef] = useState(null) + + const handleContextMenu = useLatestCallback((evt: React.MouseEvent) => { + evt.preventDefault() + }) + // 重置图片 const resetTransform = useCallback(() => { updateImgTransform(defaultTransform) @@ -226,20 +236,28 @@ export const Preview = forwardRef( onMouseMove={onMoving} onKeyDown={handleKeyDown} > - { - setIsLoaded(true) +
{ + setWatermarkContainerRef(e) }} - onError={onError} - onMouseDown={onMoveStart} - onMouseUp={onMoveEnd} - src={Array.isArray(src) ? src[active] : src} - className={`${prefixCls}__image`} style={{ transform: `scale(${imgTransform.scale}, ${imgTransform.scale}) translate(${imgTransform.translateX}px,${imgTransform.translateY}px) rotate(${imgTransform.rotate}deg)`, }} - /> + > + { + setIsLoaded(true) + }} + onError={onError} + onMouseDown={onMoveStart} + onMouseUp={onMoveEnd} + onContextMenu={disabledDownload ? handleContextMenu : undefined} + src={Array.isArray(src) ? src[active] : src} + className={`${prefixCls}__image`} + /> +
{ @@ -286,6 +304,9 @@ export const Preview = forwardRef( )}
+ {watermarkProps && ( + + )} )} @@ -315,6 +336,14 @@ export interface PreviewProps extends Omit, 'onError'> { * 当前预览图片索引 */ defaultCurrent?: number + /** + * 设置图片水印 + */ + watermarkProps?: Omit + /** + * 是否禁止右键下载图片 + */ + disabledDownload?: boolean /** * 加载错误回调 */ diff --git a/packages/ui/preview/src/styles/preview.scss b/packages/ui/preview/src/styles/preview.scss index 5f3659cb4..8b80e80b4 100644 --- a/packages/ui/preview/src/styles/preview.scss +++ b/packages/ui/preview/src/styles/preview.scss @@ -152,4 +152,8 @@ $prefix: '#{$component-prefix}-preview' !default; pointer-events: auto; display: inline-block; } + + &__img-wrapper { + display: inline-block; + } } diff --git a/packages/ui/preview/stories/banned.stories.tsx b/packages/ui/preview/stories/banned.stories.tsx new file mode 100644 index 000000000..603623e0e --- /dev/null +++ b/packages/ui/preview/stories/banned.stories.tsx @@ -0,0 +1,51 @@ +import React from 'react' +import Preview from '../src' +import Grid from '@hi-ui/grid' + +/** + * @title 禁止右键下载 + */ +export const Banned = () => { + const [showIndex, setShowIndex] = React.useState(-1) + const [images] = React.useState([ + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_4.png', + ]) + + return ( + <> +

Banned

+
+ { + setShowIndex(-1) + }} + /> + + + {images.map((url, index) => { + return ( + +
+ { + setShowIndex(index) + }} + /> +
+
+ ) + })} +
+
+ + ) +} diff --git a/packages/ui/preview/stories/index.stories.tsx b/packages/ui/preview/stories/index.stories.tsx index 2a2e3581e..d74e26467 100644 --- a/packages/ui/preview/stories/index.stories.tsx +++ b/packages/ui/preview/stories/index.stories.tsx @@ -3,6 +3,8 @@ import Preview from '../src' export * from './basic.stories' export * from './multiple.stories' +export * from './watermark.stories' +export * from './banned.stories' export default { title: 'Data Display/Preview', diff --git a/packages/ui/preview/stories/watermark.stories.tsx b/packages/ui/preview/stories/watermark.stories.tsx new file mode 100644 index 000000000..a6b359efa --- /dev/null +++ b/packages/ui/preview/stories/watermark.stories.tsx @@ -0,0 +1,62 @@ +import React from 'react' +import Preview from '../src' +import Grid from '@hi-ui/grid' + +/** + * @title 添加水印 + */ +export const Watermark = () => { + const [showIndex, setShowIndex] = React.useState(-1) + const [images] = React.useState([ + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_4.png', + ]) + + return ( + <> +

Watermark

+
+ { + setShowIndex(-1) + }} + watermarkProps={{ + content: ['HiUI', '做中台,就用 HiUI'], + style: { + pointerEvents: 'none', + position: 'fixed', + top: 0, + right: 0, + bottom: 0, + left: 0, + zIndex: 2048, + }, + }} + /> + + + {images.map((url, index) => { + return ( + +
+ { + setShowIndex(index) + }} + /> +
+
+ ) + })} +
+
+ + ) +} diff --git a/packages/ui/select/src/Select.tsx b/packages/ui/select/src/Select.tsx index 1e5379334..94f355e96 100644 --- a/packages/ui/select/src/Select.tsx +++ b/packages/ui/select/src/Select.tsx @@ -188,9 +188,9 @@ export const Select = forwardRef( const [focusedIndex, setFocusedIndex] = useState(defaultIndex) const handleKeyDown = useLatestCallback((evt: React.KeyboardEvent) => { - const { key } = evt + const { keyCode } = evt - if (key === 'Enter') { + if (keyCode === 13) { const item = showData[focusedIndex] if (item) { diff --git a/packages/ui/table/CHANGELOG.md b/packages/ui/table/CHANGELOG.md index cd174351b..75dde2d4b 100644 --- a/packages/ui/table/CHANGELOG.md +++ b/packages/ui/table/CHANGELOG.md @@ -1,5 +1,11 @@ # @hi-ui/table +## 4.5.3 + +### Patch Changes + +- [#2817](https://github.com/XiaoMi/hiui/pull/2817) [`c32ae3dd9`](https://github.com/XiaoMi/hiui/commit/c32ae3dd9b5a89840270649fc397d474e9e1de4b) Thanks [@zyprepare](https://github.com/zyprepare)! - fix: 修复表头分组单元格边框显示问题 + ## 4.5.2 ### Patch Changes diff --git a/packages/ui/table/package.json b/packages/ui/table/package.json index 6601a7b82..62b044d57 100644 --- a/packages/ui/table/package.json +++ b/packages/ui/table/package.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/table", - "version": "4.5.2", + "version": "4.5.3", "description": "A sub-package for @hi-ui/hiui.", "keywords": [], "author": "HiUI ", diff --git a/packages/ui/table/src/TheadContent.tsx b/packages/ui/table/src/TheadContent.tsx index 1952a9bf6..1af173175 100644 --- a/packages/ui/table/src/TheadContent.tsx +++ b/packages/ui/table/src/TheadContent.tsx @@ -5,6 +5,7 @@ import { cx, getPrefixCls } from '@hi-ui/classname' import { __DEV__ } from '@hi-ui/env' import { isFunction } from '@hi-ui/type-assertion' import { useCheckState } from '@hi-ui/use-check-state' +import { getNodeAncestors } from '@hi-ui/tree-utils' import { useTableContext } from './context' import { renderFilter } from './TableAdvancedFilter' @@ -42,6 +43,19 @@ export const TheadContent = forwardRef titleContent ) + // 是否是表头分组最后一列单元格 + let groupLastColumn = false + if (groupedColumns.length > 1 && colIndex === cols.length - 1) { + const nodeAncestors = getNodeAncestors(col) + if ( + colsIndex === 0 || + nodeAncestors?.[nodeAncestors.length - 1]?.id === + groupedColumns[0][groupedColumns[0].length - 1].id + ) { + groupLastColumn = true + } + } + const cell = ( isHighlightedCol(dataKey!) && `${prefixCls}-cell__col--highlight`, isHoveredHighlightCol(dataKey!) && `${prefixCls}-cell__col--hovered-highlight`, - activeColumnKeysAction.has(dataKey!) && `${prefixCls}-cell__col--active` + activeColumnKeysAction.has(dataKey!) && `${prefixCls}-cell__col--active`, + groupLastColumn && `${prefixCls}-cell--group-last-column` )} // @ts-ignore colSpan={col.colSpan} diff --git a/packages/ui/table/src/hooks/use-col-width.ts b/packages/ui/table/src/hooks/use-col-width.ts index 78c82ec10..7d4853aac 100644 --- a/packages/ui/table/src/hooks/use-col-width.ts +++ b/packages/ui/table/src/hooks/use-col-width.ts @@ -45,7 +45,7 @@ export const useColWidth = ({ const noFixedColumns = columns.filter((item) => !item.fixed) _realColumnsWidth = _realColumnsWidth.map((item, index) => { - if (!columns[index].fixed) { + if (!columns[index]?.fixed) { return item + Math.floor(exceedWidth / noFixedColumns.length) } return item diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss index 1c79879f0..3fbe2b8f1 100644 --- a/packages/ui/table/src/styles/table.scss +++ b/packages/ui/table/src/styles/table.scss @@ -111,6 +111,18 @@ $emptyContent: '#{$component-prefix}-table-body-empty-content' !default; & > tr > th:not(:last-child) { border-right: use-border-size('normal') use-color('gray', 200); } + + & > tr:has(+ tr) { + th:not(.#{$prefix}-header-cell--group-last-column) { + border-right: use-border-size('normal') use-color('gray', 200); + } + } + + & > tr + tr:last-child { + th { + border-right: use-border-size('normal') use-color('gray', 200); + } + } } tr {