diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index 4bb613b7..60232ec7 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -89,7 +89,7 @@ export default { { title: 'Cell 单元格', name: 'cell', - component: () => import('tdesign-mobile-react/cell/_example/base.jsx'), + component: () => import('tdesign-mobile-react/cell/_example/base.tsx'), }, { title: 'Upload 上传', diff --git a/src/_common b/src/_common index 05c1f59e..17eeded8 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 05c1f59ef27bea7da2fcfd09f98b0b838516d538 +Subproject commit 17eeded859b0c1bce4477e0f2d8b913afa773720 diff --git a/src/_util/useHover.ts b/src/_util/useHover.ts new file mode 100644 index 00000000..aff9719a --- /dev/null +++ b/src/_util/useHover.ts @@ -0,0 +1,52 @@ +import { useEffect, useRef } from 'react'; + +interface HoverOptions { + className: string; + disabled?: string | boolean; +} + +function useHover(options: HoverOptions) { + const elRef = useRef(null); + const { className, disabled } = options; + const startTime = 50; + const stayTime = 70; + + useEffect(() => { + let currentElement: HTMLElement | null = null; + + const handleTouchStart = () => { + if (disabled) { + return; + } + setTimeout(() => { + currentElement?.classList.add(className); + }, startTime); + }; + + const handleTouchEnd = () => { + if (disabled) { + return; + } + setTimeout(() => { + currentElement?.classList.remove(className); + }, stayTime); + }; + + if (elRef.current) { + currentElement = elRef.current; + currentElement.addEventListener('touchstart', handleTouchStart, { capture: false, passive: true }); + currentElement.addEventListener('touchend', handleTouchEnd, false); + } + + return () => { + if (currentElement) { + currentElement.removeEventListener('touchstart', handleTouchStart); + currentElement.removeEventListener('touchend', handleTouchEnd); + } + }; + }, [className, disabled]); + + return elRef; +} + +export default useHover; diff --git a/src/cell-group/CellGroup.tsx b/src/cell-group/CellGroup.tsx index b5f2f9c1..8b9e13e6 100644 --- a/src/cell-group/CellGroup.tsx +++ b/src/cell-group/CellGroup.tsx @@ -1,7 +1,7 @@ -import React from 'react'; -import classNames from 'classnames'; +import React, { useMemo } from 'react'; +import classnames from 'classnames'; import useConfig from '../_util/useConfig'; -import { TdCellGroupProps } from './type'; +import { TdCellGroupProps } from '../cell/type'; import withNativeProps, { NativeProps } from '../_util/withNativeProps'; export type CellGroupProps = TdCellGroupProps & NativeProps; @@ -12,19 +12,26 @@ const defaultProps = { }; const CellGroup: React.FC = (props) => { - const { children, bordered, title } = props; + const { children, bordered, title, theme } = props; const { classPrefix } = useConfig(); const name = `${classPrefix}-cell-group`; + const classNames = useMemo( + () => [ + name, + `${name}--${theme}`, + { + [`${name}--bordered`]: bordered, + }, + ], + [name, bordered, theme], + ); + return withNativeProps( props, -
+
{title &&
{title}
} -
{children}
+
{children}
, ); }; diff --git a/src/cell-group/index.tsx b/src/cell-group/index.tsx index 5580efe6..71496e7f 100644 --- a/src/cell-group/index.tsx +++ b/src/cell-group/index.tsx @@ -2,7 +2,7 @@ import _CellGroup from './CellGroup'; import './style'; -export * from './type'; +// export * from './type'; export const CellGroup = _CellGroup; diff --git a/src/cell-group/style/index.js b/src/cell-group/style/index.js index 8f04c56d..a9c5d7e0 100644 --- a/src/cell-group/style/index.js +++ b/src/cell-group/style/index.js @@ -1,2 +1,2 @@ /* eslint-disable import/no-relative-packages */ -import '../../_common/style/mobile/components/cell-group/_index.less'; +import '../../_common/style/mobile/components/cell-group/v2/_index.less'; diff --git a/src/cell/Cell.tsx b/src/cell/Cell.tsx index 04c16787..c44dc60e 100644 --- a/src/cell/Cell.tsx +++ b/src/cell/Cell.tsx @@ -1,11 +1,12 @@ import React, { useMemo, useCallback } from 'react'; -import classNames from 'classnames'; +import classnames from 'classnames'; import isString from 'lodash/isString'; import { ChevronRightIcon } from 'tdesign-icons-react'; import { TdCellProps } from './type'; import { cellDefaultProps } from './defaultProps'; import withNativeProps, { NativeProps } from '../_util/withNativeProps'; +import useHover from '../_util/useHover'; import useConfig from '../_util/useConfig'; export interface CellProps extends TdCellProps, NativeProps {} @@ -23,7 +24,6 @@ const Cell: React.FC = (props) => { required, rightIcon, title, - url, onClick, children, } = props; @@ -32,20 +32,19 @@ const Cell: React.FC = (props) => { const name = `${classPrefix}-cell`; - const renderIcon = useMemo(() => { - let content: React.ReactNode | null = null; - if (arrow) { - content = ; - } else if (rightIcon) { - content = rightIcon; - } - - if (content === null) { - return content; - } + const classNames = useMemo( + () => [ + `${name}`, + `${name}--${align}`, + { + [`${name}--borderless`]: !bordered, + }, + ], + [align, bordered, name], + ); - return
{content}
; - }, [arrow, rightIcon, name]); + const hoverDisabled = useMemo(() => !hover, [hover]); + const ref = useHover({ className: `${name}--hover`, disabled: hoverDisabled }); const handleClick = useCallback( (e: React.MouseEvent) => { @@ -54,41 +53,52 @@ const Cell: React.FC = (props) => { [onClick], ); - const content = ( -
- {(leftIcon || image) && ( -
- {leftIcon} - {isString(image) ? : image} -
- )} - {title && ( -
- {title} - {required &&  *} - {description &&
{description}
} -
- )} - {(note || children) &&
{children ? children : note}
} - {renderIcon} + const readerImage = () => { + if (isString(image)) { + return ; + } + return image; + }; + + const readerLeft = () => ( +
+ {leftIcon &&
{leftIcon}
} + {readerImage()}
); + const readerTitle = () => { + if (!title) { + return null; + } + return ( +
+ {title} + {required &&  *} + {description &&
{description}
} +
+ ); + }; + const readerRight = () => { + const Icon = arrow ? : rightIcon; + if (!Icon) { + return null; + } + return ( +
+
{Icon}
+
+ ); + }; + return withNativeProps( props, - url ? ( - - {content} - - ) : ( - content - ), +
+ {readerLeft()} + {readerTitle()} + {note ?
{note}
: children} + {readerRight()} +
, ); }; diff --git a/src/cell/__tests__/cell.test.tsx b/src/cell/__tests__/cell.test.tsx new file mode 100644 index 00000000..ee26c8ce --- /dev/null +++ b/src/cell/__tests__/cell.test.tsx @@ -0,0 +1,46 @@ +import { describe, it, expect, vi, render, fireEvent, screen } from '@test/utils'; +import React from 'react'; +import Cell from '../Cell'; + +describe('Cell', () => { + it('renders the correct content', () => { + const { getByText } = render( + + Test Children + , + ); + + expect(getByText('Test Title')).toBeInTheDocument(); + expect(getByText('Test Description')).toBeInTheDocument(); + expect(getByText('Test Children')).toBeInTheDocument(); + }); + + it('renders left icon and image if provided', () => { + const { getByTestId } = render( + Left Icon
} + image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" + > + Test Children + , + ); + + expect(getByTestId('left-icon')).toBeInTheDocument(); + expect(screen.getByText('Test Children')).toBeInTheDocument(); + }); + + it('renders right icon if provided', () => { + const { getByTestId } = render(Right Icon
} />); + + expect(getByTestId('right-icon')).toBeInTheDocument(); + }); + + it('calls onClick when the cell is clicked', () => { + const handleClick = vi.fn(); + const { container } = render(); + + fireEvent.click(container.firstChild); + + expect(handleClick).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/cell/_example/base.jsx b/src/cell/_example/base.tsx similarity index 78% rename from src/cell/_example/base.jsx rename to src/cell/_example/base.tsx index a15ecb37..bbb0a471 100644 --- a/src/cell/_example/base.jsx +++ b/src/cell/_example/base.tsx @@ -5,6 +5,7 @@ import './style/index.less'; import Single from './single'; import Multiple from './multiple'; +import Group from './group'; export default function Base() { return ( @@ -16,9 +17,12 @@ export default function Base() { - + + + + ); } diff --git a/src/cell/_example/group.tsx b/src/cell/_example/group.tsx new file mode 100644 index 00000000..f45a330b --- /dev/null +++ b/src/cell/_example/group.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { CellGroup, Cell } from 'tdesign-mobile-react'; +import { LockOnIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-react'; + +export default function Group() { + return ( + + } title="单行标题" arrow /> + } title="单行标题" arrow /> + } title="单行标题" arrow /> + + ); +} diff --git a/src/cell/_example/multiple.jsx b/src/cell/_example/multiple.jsx deleted file mode 100644 index d4a62724..00000000 --- a/src/cell/_example/multiple.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { Cell, CellGroup } from 'tdesign-mobile-react'; -import { Icon } from 'tdesign-icons-react'; - -const imgUrl = 'https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png'; - -const imgUrl2 = 'https://tdesign.gtimg.com/mobile/demos/avatar_1.png'; - -export default function () { - return ( -
- - - } /> - } - arrow - /> - } - /> - - - -
- ); -} diff --git a/src/cell/_example/multiple.tsx b/src/cell/_example/multiple.tsx new file mode 100644 index 00000000..49685e87 --- /dev/null +++ b/src/cell/_example/multiple.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { CellGroup, Cell, Badge, Switch, Avatar } from 'tdesign-mobile-react'; +import { ChevronRightIcon, LockOnIcon } from 'tdesign-icons-react'; + +export default function Multiple() { + const chevronRightIcon = ; + const avatarUrl = 'https://tdesign.gtimg.com/mobile/demos/avatar1.png'; + const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example4.png'; + + return ( + + + + } /> + } /> + + } /> + + + } + rightIcon={chevronRightIcon} + /> + + + ); +} diff --git a/src/cell/_example/single.jsx b/src/cell/_example/single.jsx deleted file mode 100644 index 89e05aca..00000000 --- a/src/cell/_example/single.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { Cell, CellGroup, Badge, Switch } from 'tdesign-mobile-react'; -import { Icon } from 'tdesign-icons-react'; - -export default function () { - return ( -
- - - - - - - } /> - } /> - } /> - -
- ); -} diff --git a/src/cell/_example/single.tsx b/src/cell/_example/single.tsx new file mode 100644 index 00000000..a7ff6553 --- /dev/null +++ b/src/cell/_example/single.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Cell, CellGroup, Badge, Switch } from 'tdesign-mobile-react'; +import { LockOnIcon } from 'tdesign-icons-react'; + +export default function Single() { + return ( +
+ + + + } /> + + } /> + + + } /> + +
+ ); +} diff --git a/src/cell/cell.en-US.md b/src/cell/cell.en-US.md new file mode 100644 index 00000000..ead53821 --- /dev/null +++ b/src/cell/cell.en-US.md @@ -0,0 +1,34 @@ +:: BASE_DOC :: + +## API + +### Cell Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +align | String | middle | options: top/middle/bottom | N +arrow | Boolean | false | \- | N +bordered | Boolean | true | \- | N +description | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +hover | Boolean | - | \- | N +image | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +leftIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +note | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +required | Boolean | false | \- | N +rightIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +url | String | - | \- | N +onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N + + +### CellGroup Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +bordered | Boolean | false | \- | N +theme | String | default | options: default/card | N +title | String | - | \- | N diff --git a/src/cell/cell.md b/src/cell/cell.md index 26f6646e..c01876d1 100644 --- a/src/cell/cell.md +++ b/src/cell/cell.md @@ -17,22 +17,34 @@ toc: false ::: ## API + ### Cell Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N arrow | Boolean | false | 是否显示右侧箭头 | N bordered | Boolean | true | 是否显示下边框 | N -description | TNode | - | 下方内容描述。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +description | TNode | - | 下方内容描述。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N hover | Boolean | - | 是否开启点击反馈 | N -image | TNode | - | 主图。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +image | TNode | - | 主图。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N leftIcon | TElement | - | 左侧图标，出现在单元格标题的左侧。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -note | TNode | - | 和标题同行的说明文字。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +note | TNode | - | 和标题同行的说明文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N required | Boolean | false | 是否显示表单必填星号 | N rightIcon | TElement | - | 最右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -title | TNode | - | 标题。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +title | TNode | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N url | String | - | 点击后跳转链接地址。如果值为空，则表示不需要跳转 | N -onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
右侧内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
右侧内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N + + +### CellGroup Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +bordered | Boolean | false | 是否显示组边框 | N +theme | String | default | 单元格组风格。可选项：default/card | N +title | String | - | 单元格组标题 | N diff --git a/src/cell/defaultProps.ts b/src/cell/defaultProps.ts index 84d08bc7..3d4a5e38 100644 --- a/src/cell/defaultProps.ts +++ b/src/cell/defaultProps.ts @@ -2,6 +2,8 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TdCellProps } from './type'; +import { TdCellProps, TdCellGroupProps } from './type'; export const cellDefaultProps: TdCellProps = { align: 'middle', arrow: false, bordered: true, required: false }; + +export const cellGroupDefaultProps: TdCellGroupProps = { bordered: false, theme: 'default' }; diff --git a/src/cell/style/index.js b/src/cell/style/index.js index 47e4d8c6..ecda8641 100644 --- a/src/cell/style/index.js +++ b/src/cell/style/index.js @@ -1,2 +1 @@ -/* eslint-disable import/no-relative-packages */ -import '../../_common/style/mobile/components/cell/_index.less'; +import '../../_common/style/mobile/components/cell/v2/_index.less'; diff --git a/src/cell/type.ts b/src/cell/type.ts index 1694afc5..d59b7c33 100644 --- a/src/cell/type.ts +++ b/src/cell/type.ts @@ -66,3 +66,21 @@ export interface TdCellProps { */ onClick?: (context: { e: MouseEvent }) => void; } + +export interface TdCellGroupProps { + /** + * 是否显示组边框 + * @default false + */ + bordered?: boolean; + /** + * 单元格组风格 + * @default default + */ + theme?: 'default' | 'card'; + /** + * 单元格组标题 + * @default '' + */ + title?: string; +} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 93fb9a43..cfaf60cc 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -1,5 +1,1705 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` +
+
+
+

+ Cell 单元格 +

+

+ 一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容 +

+
+
+
+

+ 01 类型 +

+

+ 单行单元格 +

+
+
+
+
+ +
+
+
+
+ 单行标题 +
+
+
+ + + +
+
+
+
+
+
+ 单行标题 + +  * + +
+
+
+ + + +
+
+
+
+
+
+ 单行标题 +
+
+
+
+ 16 +
+
+
+
+
+ + + +
+
+
+
+
+
+ 单行标题 +
+
+ +
+
+
+
+
+ 单行标题 +
+
+ 辅助信息 +
+
+
+ + + +
+
+
+
+
+
+ + + + +
+
+
+ 单行标题 +
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+

+ 02 +

+

+ 多行单元格 +

+
+
+
+ +
+
+
+
+ 单行标题 +
+ 一段很长很长的内容文字 +
+
+
+
+ + + +
+
+
+
+
+
+ 单行标题 + +  * + +
+ 一段很长很长的内容文字 +
+
+
+
+ + + +
+
+
+
+
+
+ 单行标题 +
+ 一段很长很长的内容文字 +
+
+
+
+
+ 16 +
+
+
+
+
+ + + +
+
+
+
+
+
+ 单行标题 +
+ 一段很长很长的内容文字 +
+
+
+ +
+
+
+
+
+ 单行标题 +
+ 一段很长很长的内容文字 +
+
+
+ 辅助信息 +
+
+
+ + + +
+
+
+
+
+
+ + + + +
+
+
+ 单行标题 +
+ 一段很长很长的内容文字 +
+
+
+
+ + + +
+
+
+
+
+
+ 单行标题 +
+ 一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容 +
+
+
+
+
+
+ 多行高度不定，长文本自动换行，该选项的描述是一段很长的内容 +
+ 一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容 +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ 多行带头像 +
+ 一段很长很长的内容文字 +
+
+
+
+ + + +
+
+
+
+
+ +
+
+ 多行带图片 +
+ 一段很长很长的内容文字 +
+
+
+
+
+
+
+
+
+

+ 03 组件样式 +

+

+ 卡片单元格 +

+
+
+
+ +
+
+
+
+ + + + +
+
+
+ 单行标题 +
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+ 单行标题 +
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+ 单行标题 +
+
+
+ + + +
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` +
+
+ +
+
+
+
+ + + + +
+
+
+ 单行标题 +
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+ 单行标题 +
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+ 单行标题 +
+
+
+ + + +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` +
+
+ +
+
+
+
+ 单行标题 +
+ 一段很长很长的内容文字 +
+
+
+
+ + + +
+
+
+
+
+
+ 单行标题 + +  * + +
+ 一段很长很长的内容文字 +
+
+
+
+ + + +
+
+
+
+
+
+ 单行标题 +
+ 一段很长很长的内容文字 +
+
+
+
+
+ 16 +
+
+
+
+
+ + + +
+
+
+
+
+
+ 单行标题 +
+ 一段很长很长的内容文字 +
+
+
+ +
+
+
+
+
+ 单行标题 +
+ 一段很长很长的内容文字 +
+
+
+ 辅助信息 +
+
+
+ + + +
+
+
+
+
+
+ + + + +
+
+
+ 单行标题 +
+ 一段很长很长的内容文字 +
+
+
+
+ + + +
+
+
+
+
+
+ 单行标题 +
+ 一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容 +
+
+
+
+
+
+ 多行高度不定，长文本自动换行，该选项的描述是一段很长的内容 +
+ 一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容 +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ 多行带头像 +
+ 一段很长很长的内容文字 +
+
+
+
+ + + +
+
+
+
+
+ +
+
+ 多行带图片 +
+ 一段很长很长的内容文字 +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = ` +
+
+
+ +
+
+
+
+ 单行标题 +
+
+
+ + + +
+
+
+
+
+
+ 单行标题 + +  * + +
+
+
+ + + +
+
+
+
+
+
+ 单行标题 +
+
+
+
+ 16 +
+
+
+
+
+ + + +
+
+
+
+
+
+ 单行标题 +
+
+ +
+
+
+
+
+ 单行标题 +
+
+ 辅助信息 +
+
+
+ + + +
+
+
+
+
+
+ + + + +
+
+
+ 单行标题 +
+
+
+ + + +
+
+
+
+
+
+
+`; + exports[`csr snapshot test > csr test src/divider/_example/base.tsx 1`] = `
csr test src/grid/_example/badge.tsx 1`] = `
`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; + +exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; + +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; + +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; + exports[`ssr snapshot test > ssr test src/divider/_example/base.tsx 1`] = `"
水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息
"`; exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `"

Divider 分割符

用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。

01 组件类型

水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息

02 组件状态

虚线样式
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 92f6ff66..2d18ede4 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -1,5 +1,13 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; + +exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; + +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; + +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; + exports[`ssr snapshot test > ssr test src/divider/_example/base.tsx 1`] = `"
水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息
"`; exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `"

Divider 分割符

用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。

01 组件类型

水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息

02 组件状态

虚线样式
"`;