feat(cell): add attr size & title slot

src/packages/__VUE/cell/__tests__/__snapshots__/cell.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`prop desc-text-align left 1`] = `
 "<view class=\\"nut-cell\\" style=\\"border-radius: px;\\">
   <!--v-if-->
   <!--v-if-->
-  <view class=\\"nut-cell__value\\" style=\\"text-align: left;\\">张三</view>
+  <view class=\\"nut-cell__value nut-cell__value--alone\\" style=\\"text-align: left;\\">张三</view>
   <!--v-if-->
 </view>"
 `;

src/packages/__VUE/cell/demo.vue

@@ -6,12 +6,29 @@
     <nut-cell :title="translate('title3')" @click="testClick"></nut-cell>
     <nut-cell :title="translate('title4')" round-radius="0"></nut-cell>
 
+    <h2>{{ translate('title9') }}</h2>
+    <nut-cell size="large" :title="translate('title')" :desc="translate('desc')"></nut-cell>
+    <nut-cell
+      size="large"
+      :title="translate('title')"
+      :sub-title="translate('title1')"
+      :desc="translate('desc')"
+    ></nut-cell>
+
     <h2>{{ translate('title2') }}</h2>
 
-    <nut-cell :title="translate('title')" :desc="translate('desc')">
+    <nut-cell>
       <div>{{ translate('content') }}</div>
     </nut-cell>
 
+    <h2>{{ translate('title8') }}</h2>
+
+    <nut-cell :desc="translate('desc')">
+      <template v-slot:title>
+        <span>Title <b style="color: red">1</b></span>
+      </template>
+    </nut-cell>
+
     <nut-cell-group :title="translate('title5')" :desc="translate('desc1')">
       <nut-cell :title="translate('link')" is-link></nut-cell>
       <nut-cell :title="translate('urlJump')" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
@@ -65,6 +82,8 @@ useTranslate({
     title5: '链接 | 分组用法',
     title6: '只展示 desc ，可通过 desc-text-align 调整内容位置',
     title7: '垂直居中',
+    title8: '直接使用插槽(slot title)',
+    title9: '尺寸设置 large',
     link: '链接',
     urlJump: 'URL 跳转',
     routerJump: '路由跳转 ’/‘ ',
@@ -87,6 +106,8 @@ useTranslate({
     title5: 'Link | CellGroup Usage',
     title6: 'Only display desc , you can adjust the content position through desc-text-align',
     title7: 'Vertical Center',
+    title8: 'Use Slots title',
+    title9: 'Size setting large',
     link: 'Link',
     urlJump: 'URL Jump',
     routerJump: 'Router Jump ’/‘ ',

src/packages/__VUE/cell/doc.en-US.md

@@ -41,13 +41,26 @@ app.use(Cell).use(CellGroup).use(Icon);
 
 :::
 
+### Size setting large
+
+:::demo
+
+```html
+<template>
+  <nut-cell size="large" title="Title" desc="Description"></nut-cell>
+  <nut-cell size="large" title="Title" sub-title="Subtitle Description" desc="Desc"></nut-cell>
+</template>
+```
+
+:::
+
 ### Use Slots
 
 :::demo
 
 ```html
 <template>
-  <nut-cell title="Title" desc="Description">
+  <nut-cell>
     <div>Content</div>
   </nut-cell>
 </template>
@@ -55,6 +68,21 @@ app.use(Cell).use(CellGroup).use(Icon);
 
 :::
 
+### Use Slots title
+
+:::demo
+
+```html
+<template>
+  <nut-cell desc="Description">
+      <template v-slot:title>
+        <span>Title <b style="color: red">1</b></span>
+      </template>
+  </nut-cell>
+</template>
+```
+
+:::
 ### Link | CellGroup Usage
 
 :::demo
@@ -144,6 +172,8 @@ app.use(Cell).use(CellGroup).use(Icon);
 </template>
 ```
 
+:::
+
 ### Vertical Center
 
 You can center the left and right contents of the cell vertically through the 'center' attribute.
@@ -182,6 +212,7 @@ You can center the left and right contents of the cell vertically through the 'c
 | to              | Target route of the link, same as to of vue-router                                                       | String ｜ Object | -       |
 | replace         | If true, the navigation will not leave a history record                                                  | Boolean          | false   |
 | center`v3.1.21` | Whether to center content vertically                                                                     | Boolean          | false   |
+| size`v3.1.22`   | Size, can be set to `large`                                                                              | String           | ''      |
 
 ### Cell Event
 
@@ -191,11 +222,12 @@ You can center the left and right contents of the cell vertically through the 'c
 
 ## Cell Slots
 
-| Name          | Description        |
-|---------------|--------------------|
-| icon `v3.1.4` | Custom Left `icon` |
-| default       | Default slot       |
-| link          | Custom Right`link` |
+| Name            | Description        |
+|-----------------|--------------------|
+| icon `v3.1.4`   | Custom Left `icon` |
+| default         | Default slot       |
+| link            | Custom Right`link` |
+| title `v3.1.22` | Custom`title`slot  |
 
 ## CellGroup Slots
 

src/packages/__VUE/cell/doc.md

@@ -42,13 +42,26 @@ app.use(Cell).use(CellGroup).use(Icon);
 
 :::
 
+### 尺寸设置 large
+
+:::demo
+
+```html
+<template>
+  <nut-cell size="large" title="我是标题" desc="描述文字"></nut-cell>
+  <nut-cell size="large" title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+</template>
+```
+
+:::
+
 ### 直接使用插槽
 
 :::demo
 
 ```html
 <template>
-  <nut-cell title="我是标题" desc="描述文字">
+  <nut-cell>
     <div>自定义内容</div>
   </nut-cell>
 </template>
@@ -56,6 +69,24 @@ app.use(Cell).use(CellGroup).use(Icon);
 
 :::
 
+
+
+### 直接使用插槽(slot title)
+
+:::demo
+
+```html
+<template>
+  <nut-cell desc="描述文字">
+      <template v-slot:title>
+        <span>Title <b style="color: red">1</b></span>
+      </template>
+  </nut-cell>
+</template>
+```
+
+:::
+
 ### 链接 | 分组用法
 
 :::demo
@@ -184,6 +215,8 @@ app.use(Cell).use(CellGroup).use(Icon);
 | to `小程序不支持`      | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String ｜ Object | -      |
 | replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                   | Boolean          | false  |
 | center`v3.1.21`        | 是否使内容垂直居中                                                                             | Boolean          | false  |
+| size`v3.1.22`        | 单元格大小，可选值为 `large`                                                                             | String          | -  |
+
 
 ### Cell Event
 
@@ -193,11 +226,12 @@ app.use(Cell).use(CellGroup).use(Icon);
 
 ## Cell Slots
 
-| 名称          | 说明                 |
-|---------------|----------------------|
-| icon `v3.1.4` | 自定义左侧`icon`区域 |
-| default       | 自定义内容           |
-| link          | 自定义右侧`link`区域 |
+| 名称            | 说明                  |
+|-----------------|-----------------------|
+| icon `v3.1.4`   | 自定义左侧`icon`区域  |
+| default         | 自定义内容            |
+| link            | 自定义右侧`link`区域  |
+| title `v3.1.22` | 自定义`title`标题区域 |
 
 ## CellGroup Slots
 

src/packages/__VUE/cell/index.scss

@@ -16,6 +16,14 @@
     align-items: center;
   }
 
+  &--large {
+    font-size: $cell-large-title-font;
+    padding: $cell-large-padding;
+    .nut-cell__title-desc {
+      font-size: $cell-large-title-desc-font;
+    }
+  }
+
   &:last-child {
     &::after {
       border: 0 !important;
@@ -73,6 +81,9 @@
     text-align: right;
     font-size: $cell-desc-font;
     color: $cell-desc-color;
+    &--alone {
+      color: $cell-color;
+    }
   }
   &__link {
     color: #979797;

src/packages/__VUE/cell/index.taro.vue

@@ -1,26 +1,4 @@
-<template>
-  <view :class="classes" :style="baseStyle" @click="handleClick">
-    <slot>
-      <view class="nut-cell__icon" v-if="icon || $slots.icon">
-        <slot v-if="$slots.icon" name="icon"></slot>
-        <nut-icon v-else-if="icon" class="icon" :name="icon"></nut-icon>
-      </view>
-      <view class="nut-cell__title" v-if="title || subTitle">
-        <template v-if="subTitle">
-          <view class="title">{{ title }}</view>
-          <view class="nut-cell__title-desc">{{ subTitle }}</view>
-        </template>
-        <template v-else>
-          {{ title }}
-        </template>
-      </view>
-      <view v-if="desc" class="nut-cell__value" :style="{ 'text-align': descTextAlign }">{{ desc }}</view>
-
-      <slot v-if="$slots.link" name="link"></slot>
-      <nut-icon v-else-if="isLink || to" class="nut-cell__link" name="right"></nut-icon>
-    </slot>
-  </view>
-</template>
+<template src="./template.html"></template>
 
 <script lang="ts">
 import { computed } from 'vue';
@@ -40,7 +18,8 @@ export default create({
     roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
     icon: { type: String, default: '' },
-    center: { type: Boolean, default: false }
+    center: { type: Boolean, default: false },
+    size: { type: String, default: '' } // large
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -49,7 +28,8 @@ export default create({
       return {
         [prefixCls]: true,
         [`${prefixCls}--clickable`]: props.isLink || props.to,
-        [`${prefixCls}--center`]: props.center
+        [`${prefixCls}--center`]: props.center,
+        [`${prefixCls}--large`]: props.size == 'large'
       };
     });
 

src/packages/__VUE/cell/index.vue

@@ -1,26 +1,4 @@
-<template>
-  <view :class="classes" :style="baseStyle" @click="handleClick">
-    <slot>
-      <view class="nut-cell__icon" v-if="icon || $slots.icon">
-        <slot v-if="$slots.icon" name="icon"></slot>
-        <nut-icon v-else-if="icon" class="icon" :name="icon"></nut-icon>
-      </view>
-      <view class="nut-cell__title" v-if="title || subTitle">
-        <template v-if="subTitle">
-          <view class="title">{{ title }}</view>
-          <view class="nut-cell__title-desc">{{ subTitle }}</view>
-        </template>
-        <template v-else>
-          {{ title }}
-        </template>
-      </view>
-      <view v-if="desc" class="nut-cell__value" :style="{ 'text-align': descTextAlign }">{{ desc }}</view>
-
-      <slot v-if="$slots.link" name="link"></slot>
-      <nut-icon v-else-if="isLink || to" class="nut-cell__link" name="right"></nut-icon>
-    </slot>
-  </view>
-</template>
+<template src="./template.html"></template>
 
 <script lang="ts">
 import { computed } from 'vue';
@@ -40,7 +18,8 @@ export default create({
     roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
     icon: { type: String, default: '' },
-    center: { type: Boolean, default: false }
+    center: { type: Boolean, default: false },
+    size: { type: String, default: '' } // large
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -49,7 +28,8 @@ export default create({
       return {
         [prefixCls]: true,
         [`${prefixCls}--clickable`]: props.isLink || props.to,
-        [`${prefixCls}--center`]: props.center
+        [`${prefixCls}--center`]: props.center,
+        [`${prefixCls}--large`]: props.size == 'large'
       };
     });
     const router = useRouter();

src/packages/__VUE/cell/template.html

@@ -0,0 +1,29 @@
+<view :class="classes" :style="baseStyle" @click="handleClick">
+    <slot>
+        <view class="nut-cell__icon" v-if="icon || $slots.icon">
+            <slot name="icon">
+                <nut-icon v-if="icon" class="icon" :name="icon"></nut-icon>
+            </slot>
+        </view>
+        <view class="nut-cell__title" v-if="title || subTitle || $slots.title">
+
+            <template v-if="subTitle">
+                <slot name="title">
+                    <view class="title">{{ title }}</view>
+                </slot>
+                <view class="nut-cell__title-desc">{{ subTitle }}</view>
+            </template>
+            <template v-else>
+                <slot name="title">
+                    {{ title }}
+                </slot>
+            </template>
+        </view>
+        <view v-if="desc" class="nut-cell__value"
+            :class="{ 'nut-cell__value--alone': (!title && !subTitle && !$slots.title) }"
+            :style="{ 'text-align': descTextAlign }">{{ desc }}</view>
+        <slot name="link">
+            <nut-icon v-if="isLink || to" class="nut-cell__link" name="right"></nut-icon>
+        </slot>
+    </slot>
+</view>

src/packages/styles/variables-jdb.scss

@@ -183,6 +183,9 @@ $cell-group-desc-color: #909ca4 !default;
 $cell-group-desc-font-size: $font-size-1 !default;
 $cell-group-desc-line-height: 16px !default;
 $cell-group-background-color: $white !default;
+$cell-large-title-font: $font-size-large !default;
+$cell-large-title-desc-font: $font-size-base !default;
+$cell-large-padding: 15px 16px !default;
 
 // divider
 

src/packages/styles/variables-jdt.scss

@@ -89,6 +89,9 @@ $cell-line-height: 22px !default;
 $cell-after-right: 0 !default;
 $cell-after-border-bottom: 2px solid rgba(0, 0, 0, 0.1) !default;
 $cell-default-icon-margin: 0 4px 0 0px !default;
+$cell-large-title-font: $font-size-large !default;
+$cell-large-title-desc-font: $font-size-base !default;
+$cell-large-padding: 15px 16px !default;
 
 // cell-group
 

src/packages/styles/variables.scss

@@ -102,6 +102,9 @@ $cell-line-height: 20px !default;
 $cell-after-right: 16px !default;
 $cell-after-border-bottom: 2px solid #f5f6f7 !default;
 $cell-default-icon-margin: 0 4px 0 0px !default;
+$cell-large-title-font: $font-size-large !default;
+$cell-large-title-desc-font: $font-size-base !default;
+$cell-large-padding: 15px 16px !default;
 
 // cell-group
 

src/sites/mobile-taro/vue/src/base/pages/cell/index.vue

@@ -6,12 +6,23 @@
     <nut-cell title="点击测试" @click="testClick"></nut-cell>
     <nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
 
+    <h2>尺寸设置 large</h2>
+    <nut-cell size="large" title="我是标题" desc="描述文字"></nut-cell>
+    <nut-cell size="large" title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+
     <h2>直接使用插槽(slot)</h2>
 
-    <nut-cell title="我是标题" desc="描述文字">
+    <nut-cell>
       <div>自定义内容</div>
     </nut-cell>
 
+    <h2>直接使用插槽(slot title)</h2>
+    <nut-cell desc="描述文字">
+      <template v-slot:title>
+        <span>Title <b style="color: red">1</b></span>
+      </template>
+    </nut-cell>
+
     <!-- <nut-cell-group title="链接 | 分组用法">
       <nut-cell title="链接" is-link></nut-cell>
       <nut-cell