fix(Cell): fix component style errors

Tencent · Jan 21, 2025 · 0944337 · 0944337
1 parent e1dd8bd
commit 0944337
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 31 deletions.
diff --git a/src/cell/cell.md b/src/cell/cell.md
@@ -6,7 +6,7 @@
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
+align | String | middle | 右侧内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
 arrow | Boolean | false | 是否显示右侧箭头 | N
 bordered | Boolean | true | 是否显示下边框 | N
 description | String / Slot / Function | - | 下方内容描述。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N

diff --git a/src/cell/cell.tsx b/src/cell/cell.tsx
@@ -14,14 +14,13 @@ export default defineComponent({
   directives: { Hover },
   props,
   setup(props) {
-    const readerTNodeJSX = useTNodeJSX();
-    const readerTNodeContent = useContent();
+    const renderTNodeJSX = useTNodeJSX();
+    const renderTNodeContent = useContent();
     const disabled = useFormDisabled();
     const cellClass = usePrefixClass('cell');
 
     const cellClasses = computed(() => [
       `${cellClass.value}`,
-      `${cellClass.value}--${props.align}`,
       {
         [`${cellClass.value}--borderless`]: !props.bordered,
       },
@@ -35,30 +34,30 @@ export default defineComponent({
       }
     };
 
-    const readerImage = () => {
+    const renderImage = () => {
       if (typeof props.image === 'string') {
         return <img src={props.image} class={`${cellClass.value}__left-image`} />;
       }
-      const image = readerTNodeJSX('image');
+      const image = renderTNodeJSX('image');
 
       return image;
     };
 
-    const readerLeft = () => {
-      const leftIcon = readerTNodeJSX('leftIcon');
+    const renderLeft = () => {
+      const leftIcon = renderTNodeJSX('leftIcon');
       return (
         <div class={`${cellClass.value}__left`}>
           {leftIcon && <div class={`${cellClass.value}__left-icon`}>{leftIcon}</div>}
-          {readerImage()}
+          {renderImage()}
         </div>
       );
     };
-    const readerTitle = () => {
-      const title = readerTNodeJSX('title');
+    const renderTitle = () => {
+      const title = renderTNodeJSX('title');
       if (!title) {
         return null;
       }
-      const description = readerTNodeJSX('description');
+      const description = renderTNodeJSX('description');
       return (
         <div class={`${cellClass.value}__title`}>
           <div class={`${cellClass.value}__title-text`}>
@@ -69,30 +68,30 @@ export default defineComponent({
         </div>
       );
     };
-    const readerRight = () => {
-      const rightIcon = props.arrow ? <ChevronRightIcon /> : readerTNodeJSX('rightIcon');
+    const renderRight = () => {
+      const rightIcon = props.arrow ? <ChevronRightIcon /> : renderTNodeJSX('rightIcon');
       if (!rightIcon) {
         return null;
       }
       return (
-        <div class={`${cellClass.value}__right`}>
+        <div class={[`${cellClass.value}__right`, `${cellClass.value}__right--${props.align}`]}>
           <div class={`${cellClass.value}__right-icon`}>{rightIcon}</div>
         </div>
       );
     };
 
     return () => {
-      const note = readerTNodeContent('default', 'note');
+      const note = renderTNodeContent('default', 'note');
       return (
         <div
           v-hover={{ className: `${cellClass.value}--hover`, disabledHover: hoverDisabled.value }}
           class={cellClasses.value}
           onClick={handleClick}
         >
-          {readerLeft()}
-          {readerTitle()}
+          {renderLeft()}
+          {renderTitle()}
           {note && <div class={`${cellClass.value}__note`}>{note}</div>}
-          {readerRight()}
+          {renderRight()}
         </div>
       );
     };

diff --git a/src/cell/demos/group.vue b/src/cell/demos/group.vue
@@ -1,16 +1,16 @@
 <template>
   <t-cell-group theme="card">
-    <t-cell :left-icon="lock" title="单行标题" arrow />
+    <t-cell :left-icon="app" title="单行标题" arrow />
     <t-cell :left-icon="service" title="单行标题" arrow />
     <t-cell :left-icon="internet" title="单行标题" arrow />
   </t-cell-group>
 </template>
 
 <script lang="ts" setup>
 import { h } from 'vue';
-import { LockOnIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-vue-next';
+import { AppIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-vue-next';
 
-const lock = () => h(LockOnIcon);
+const app = () => h(AppIcon);
 const service = () => h(ServiceIcon);
 const internet = () => h(InternetIcon);
 </script>
diff --git a/src/cell/demos/multiple.vue b/src/cell/demos/multiple.vue
@@ -15,26 +15,26 @@
     <t-cell title="单行标题" description="一段很长很长的内容文字" note="辅助信息" arrow />
     <t-cell title="单行标题" description="一段很长很长的内容文字" arrow>
       <template #leftIcon>
-        <LockOnIcon />
+        <AppIcon />
       </template>
     </t-cell>
     <t-cell title="单行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" />
     <t-cell
       title="多行高度不定，长文本自动换行，该选项的描述是一段很长的内容"
       description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
     />
-    <t-cell title="多行带头像" description="一段很长很长的内容文字" :right-icon="chevronRightIcon">
+    <t-cell title="单行标题" description="一段很长很长的内容文字" :right-icon="chevronRightIcon">
       <template #leftIcon>
         <t-avatar shape="circle" :image="avatarUrl" />
       </template>
     </t-cell>
-    <t-cell title="多行带图片" description="一段很长很长的内容文字" :image="imgUrl" />
+    <t-cell title="单行标题" description="一段很长很长的内容文字" :image="imgUrl" />
   </t-cell-group>
 </template>
 
 <script lang="ts" setup>
 import { h } from 'vue';
-import { ChevronRightIcon, LockOnIcon } from 'tdesign-icons-vue-next';
+import { ChevronRightIcon, AppIcon } from 'tdesign-icons-vue-next';
 
 const chevronRightIcon = () => h(ChevronRightIcon);
 const avatarUrl = 'https://tdesign.gtimg.com/mobile/demos/avatar1.png';

diff --git a/src/cell/demos/single.vue b/src/cell/demos/single.vue
@@ -13,14 +13,14 @@
       </template>
     </t-cell>
     <t-cell title="单行标题" note="辅助信息" arrow hover />
-    <t-cell title="单行标题" :left-icon="lockIcon" arrow hover />
+    <t-cell title="单行标题" :left-icon="appIcon" arrow hover />
   </t-cell-group>
 </template>
 
 <script lang="ts" setup>
 import { h } from 'vue';
-import { LockOnIcon } from 'tdesign-icons-vue-next';
+import { AppIcon } from 'tdesign-icons-vue-next';
 import { Switch as TSwitch, Badge as TBadge } from 'tdesign-mobile-vue';
 
-const lockIcon = () => h(LockOnIcon);
+const appIcon = () => h(AppIcon);
 </script>
diff --git a/src/cell/props.ts b/src/cell/props.ts
@@ -8,7 +8,7 @@ import { TdCellProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** 内容的对齐方式，默认居中对齐 */
+  /** 右侧内容的对齐方式，默认居中对齐 */
   align: {
     type: String as PropType<TdCellProps['align']>,
     default: 'middle' as TdCellProps['align'],

diff --git a/src/cell/type.ts b/src/cell/type.ts
@@ -8,7 +8,7 @@ import { TNode } from '../common';
 
 export interface TdCellProps {
   /**
-   * 内容的对齐方式，默认居中对齐
+   * 右侧内容的对齐方式，默认居中对齐
    * @default middle
    */
   align?: 'top' | 'middle' | 'bottom';