fix(Cell): fix component style errors (#568)

liweijie0812 · github-actions[bot] · web-flow · commit a9119d1efa8a · 2025-01-23T16:34:26.000+08:00
* fix(Cell): fix component style errors

* chore: update docs

* chore: update common

* chore: update snapshot

* chore: fix doc

---------

Co-authored-by: github-actions[bot] &lt;github-actions[bot]@users.noreply.github.com&gt;
diff --git a/script/generate-css-vars.js b/script/generate-css-vars.js
@@ -5,7 +5,7 @@ function resolveCwd(...args) {
   args.unshift(process.cwd());
   return path.join(...args);
 }
-
+// node script/generate-css-vars.js --NAME Cell
 const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
 
 // 组件名作为参数传入
diff --git a/src/_common b/src/_common
@@ -1 +1 @@
-Subproject commit c4e7f4f27fd3608b4b514b5bce3f0152a560173a
+Subproject commit c683f47c2c476bb2bf930c9e3fa791dbeede362d
diff --git a/src/cell/Cell.tsx b/src/cell/Cell.tsx
@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import isString from 'lodash/isString';
 import { ChevronRightIcon } from 'tdesign-icons-react';
 
+import parseTNode from '../_util/parseTNode';
 import { TdCellProps } from './type';
 import { cellDefaultProps } from './defaultProps';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
@@ -37,12 +38,11 @@ const Cell: React.FC<CellProps> = (originProps) => {
   const classNames = useMemo(
     () => [
       `${name}`,
-      `${name}--${align}`,
       {
         [`${name}--borderless`]: !bordered,
       },
     ],
-    [align, bordered, name],
+    [bordered, name],
   );
 
   const hoverDisabled = useMemo(() => !hover, [hover]);
@@ -55,41 +55,41 @@ const Cell: React.FC<CellProps> = (originProps) => {
     [onClick],
   );
 
-  const readerImage = () => {
+  const renderImage = () => {
     if (isString(image)) {
       return <img src={image} className={`${name}__left-image`} />;
     }
-    return image;
+    return parseTNode(image);
   };
 
-  const readerLeft = () => (
+  const renderLeft = () => (
     <div className={`${name}__left`}>
-      {leftIcon && <div className={`${name}__left-icon`}>{leftIcon}</div>}
-      {readerImage()}
+      {leftIcon && <div className={`${name}__left-icon`}>{parseTNode(leftIcon)}</div>}
+      {renderImage()}
     </div>
   );
 
-  const readerTitle = () => {
+  const renderTitle = () => {
     if (!title) {
       return null;
     }
     return (
       <div className={`${name}__title`}>
         <div className={`${name}__title-text`}>
-          {title}
+          {parseTNode(title)}
           {required && <span className={`${name}--required`}>&nbsp;*</span>}
         </div>
-        {description && <div className={`${name}__description`}>{description}</div>}
+        {description && <div className={`${name}__description`}>{parseTNode(description)}</div>}
       </div>
     );
   };
-  const readerRight = () => {
-    const Icon = arrow ? <ChevronRightIcon /> : rightIcon;
+  const renderRight = () => {
+    const Icon = arrow ? <ChevronRightIcon /> : parseTNode(rightIcon);
     if (!Icon) {
       return null;
     }
     return (
-      <div className={`${name}__right`}>
+      <div className={classnames(`${name}__right`, `${name}__right--${align}`)}>
         <div className={`${name}__right-icon`}>{Icon}</div>
       </div>
     );
@@ -98,10 +98,10 @@ const Cell: React.FC<CellProps> = (originProps) => {
   return withNativeProps(
     props,
     <div ref={ref} className={classnames(classNames)} onClick={handleClick}>
-      {readerLeft()}
-      {readerTitle()}
-      {note ? <div className={`${name}__note`}>{note}</div> : children}
-      {readerRight()}
+      {renderLeft()}
+      {renderTitle()}
+      {note ? <div className={`${name}__note`}>{parseTNode(note)}</div> : parseTNode(children)}
+      {renderRight()}
     </div>,
   );
 };
diff --git a/src/cell/CellGroup.tsx b/src/cell/CellGroup.tsx
@@ -5,6 +5,7 @@ import { TdCellGroupProps } from './type';
 import { cellGroupDefaultProps } from './defaultProps';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
 import useDefaultProps from '../hooks/useDefaultProps';
+import parseTNode from '../_util/parseTNode';
 
 export type CellGroupProps = TdCellGroupProps & NativeProps;
 
@@ -29,7 +30,7 @@ const CellGroup: React.FC<CellGroupProps> = (originProps) => {
     props,
     <div>
       {title && <div className={`${name}__title`}>{title}</div>}
-      <div className={classnames(classNames)}>{children}</div>
+      <div className={classnames(classNames)}>{parseTNode(children)}</div>
     </div>,
   );
 };
diff --git a/src/cell/_example/group.tsx b/src/cell/_example/group.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { CellGroup, Cell } from 'tdesign-mobile-react';
-import { LockOnIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-react';
+import { AppIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-react';
 
 export default function Group() {
   return (
     <CellGroup theme="card">
-      <Cell leftIcon={<LockOnIcon />} title="单行标题" arrow />
+      <Cell leftIcon={<AppIcon />} title="单行标题" arrow />
       <Cell leftIcon={<ServiceIcon />} title="单行标题" arrow />
       <Cell leftIcon={<InternetIcon />} title="单行标题" arrow />
     </CellGroup>
diff --git a/src/cell/_example/multiple.tsx b/src/cell/_example/multiple.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { CellGroup, Cell, Badge, Switch, Avatar } from 'tdesign-mobile-react';
-import { ChevronRightIcon, LockOnIcon } from 'tdesign-icons-react';
+import { ChevronRightIcon, AppIcon } from 'tdesign-icons-react';
 
 export default function Multiple() {
   const chevronRightIcon = <ChevronRightIcon />;
@@ -14,19 +14,19 @@ export default function Multiple() {
       <Cell title="单行标题" description="一段很长很长的内容文字" arrow note={<Badge count={16} />} />
       <Cell title="单行标题" description="一段很长很长的内容文字" note={<Switch defaultValue={true} />} />
       <Cell title="单行标题" description="一段很长很长的内容文字" note="辅助信息" arrow />
-      <Cell title="单行标题" description="一段很长很长的内容文字" arrow leftIcon={<LockOnIcon />} />
+      <Cell title="单行标题" description="一段很长很长的内容文字" arrow leftIcon={<AppIcon />} />
       <Cell title="单行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" />
       <Cell
         title="多行高度不定，长文本自动换行，该选项的描述是一段很长的内容"
         description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
       />
       <Cell
-        title="多行带头像"
+        title="单行标题"
         description="一段很长很长的内容文字"
         leftIcon={<Avatar shape="circle" image={avatarUrl} />}
         rightIcon={chevronRightIcon}
       />
-      <Cell title="多行带图片" description="一段很长很长的内容文字" image={imgUrl} />
+      <Cell title="单行标题" description="一段很长很长的内容文字" image={imgUrl} />
     </CellGroup>
   );
 }
diff --git a/src/cell/_example/single.tsx b/src/cell/_example/single.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Cell, CellGroup, Badge, Switch } from 'tdesign-mobile-react';
-import { LockOnIcon } from 'tdesign-icons-react';
+import { AppIcon } from 'tdesign-icons-react';
 
 export default function Single() {
   return (
@@ -13,7 +13,7 @@ export default function Single() {
         <Cell title="单行标题" hover note={<Switch default-value={true} />} />
         <Cell title="单行标题" arrow hover note="辅助信息" />
 
-        <Cell title="单行标题" arrow hover leftIcon={<LockOnIcon />} />
+        <Cell title="单行标题" arrow hover leftIcon={<AppIcon />} />
       </CellGroup>
     </div>
   );
diff --git a/src/cell/cell.en-US.md b/src/cell/cell.en-US.md
@@ -31,3 +31,39 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper
 bordered | Boolean | false | \- | N
 theme | String | default | options: default/card | N
 title | String | - | \- | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-border-left-space | @cell-horizontal-padding | - 
+--td-cell-bg-color | @bg-color-container | - 
+--td-cell-border-color | @component-stroke | - 
+--td-cell-border-right-space | 0 | - 
+--td-cell-description-color | @text-color-secondary | - 
+--td-cell-description-font-size | @font-size-base | - 
+--td-cell-description-line-height | 22px | - 
+--td-cell-group-border-color | @border-color | - 
+--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - 
+--td-cell-group-title-color | @text-color-placeholder | - 
+--td-cell-group-title-font-size | 14px | - 
+--td-cell-group-title-line-height | 45px | - 
+--td-cell-group-title-padding-left | 16px | - 
+--td-cell-height | auto | - 
+--td-cell-horizontal-padding | 16px | - 
+--td-cell-hover-color | @bg-color-secondarycontainer | - 
+--td-cell-image-height | 48px | - 
+--td-cell-image-width | 48px | - 
+--td-cell-left-icon-color | @brand-color | - 
+--td-cell-left-icon-font-size | 24px | - 
+--td-cell-line-height | 24px | - 
+--td-cell-note-color | @text-color-placeholder | - 
+--td-cell-note-font-size | @font-size-m | - 
+--td-cell-required-color | @error-color-6 | - 
+--td-cell-required-font-size | @font-size-m | - 
+--td-cell-right-icon-color | @text-color-placeholder | - 
+--td-cell-right-icon-font-size | 24px | - 
+--td-cell-title-color | @text-color-primary | - 
+--td-cell-title-font-size | @font-size-m | - 
+--td-cell-vertical-padding | 16px | - 
diff --git a/src/cell/cell.md b/src/cell/cell.md
@@ -1,10 +1,4 @@
----
-title: Cell 宫格
-description: 用于各个类别行的信息展示。
-spline: base
-isComponent: true
-toc: false
----
+:: BASE_DOC ::
 
 ## API
 
@@ -14,7 +8,7 @@ toc: false
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | 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
@@ -37,3 +31,39 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 bordered | Boolean | false | 是否显示组边框 | N
 theme | String | default | 单元格组风格。可选项：default/card | N
 title | String | - | 单元格组标题 | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-border-left-space | @cell-horizontal-padding | - 
+--td-cell-bg-color | @bg-color-container | - 
+--td-cell-border-color | @component-stroke | - 
+--td-cell-border-right-space | 0 | - 
+--td-cell-description-color | @text-color-secondary | - 
+--td-cell-description-font-size | @font-size-base | - 
+--td-cell-description-line-height | 22px | - 
+--td-cell-group-border-color | @border-color | - 
+--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - 
+--td-cell-group-title-color | @text-color-placeholder | - 
+--td-cell-group-title-font-size | 14px | - 
+--td-cell-group-title-line-height | 45px | - 
+--td-cell-group-title-padding-left | 16px | - 
+--td-cell-height | auto | - 
+--td-cell-horizontal-padding | 16px | - 
+--td-cell-hover-color | @bg-color-secondarycontainer | - 
+--td-cell-image-height | 48px | - 
+--td-cell-image-width | 48px | - 
+--td-cell-left-icon-color | @brand-color | - 
+--td-cell-left-icon-font-size | 24px | - 
+--td-cell-line-height | 24px | - 
+--td-cell-note-color | @text-color-placeholder | - 
+--td-cell-note-font-size | @font-size-m | - 
+--td-cell-required-color | @error-color-6 | - 
+--td-cell-required-font-size | @font-size-m | - 
+--td-cell-right-icon-color | @text-color-placeholder | - 
+--td-cell-right-icon-font-size | 24px | - 
+--td-cell-title-color | @text-color-primary | - 
+--td-cell-title-font-size | @font-size-m | - 
+--td-cell-vertical-padding | 16px | - 
diff --git a/src/cell/type.ts b/src/cell/type.ts
@@ -9,7 +9,7 @@ import { MouseEvent } from 'react';
 
 export interface TdCellProps {
   /**
-   * 内容的对齐方式，默认居中对齐
+   * 右侧内容的对齐方式，默认居中对齐
    * @default middle
    */
   align?: 'top' | 'middle' | 'bottom';
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ function resolveCwd(...args) {`
`5`	`5`	`args.unshift(process.cwd());`
`6`	`6`	`return path.join(...args);`
`7`	`7`	`}`
`8`		`-`
	`8`	`+// node script/generate-css-vars.js --NAME Cell`
`9`	`9`	`const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面`
`10`	`10`
`11`	`11`	`// 组件名作为参数传入`