feat(cellgroup): add desc props & slots

src/packages/__VUE/cell/demo.vue

@@ -2,11 +2,7 @@
   <div class="demo">
     <h2>基本用法</h2>
     <nut-cell title="我是标题" desc="描述文字"></nut-cell>
-    <nut-cell
-      title="我是标题"
-      sub-title="副标题描述"
-      desc="描述文字"
-    ></nut-cell>
+    <nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
     <nut-cell title="点击测试" @click="testClick"></nut-cell>
     <nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
 
@@ -16,14 +12,9 @@
       <div>自定义内容</div>
     </nut-cell>
 
-    <nut-cell-group title="链接 | 分组用法">
+    <nut-cell-group title="链接 | 分组用法" desc="使用 nut-cell-group 支持 title desc slots">
       <nut-cell title="链接" is-link></nut-cell>
-      <nut-cell
-        title="URL 跳转"
-        desc="https://jd.com"
-        is-link
-        url="https://jd.com"
-      ></nut-cell>
+      <nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
       <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
     </nut-cell-group>
 

src/packages/__VUE/cell/doc.md

@@ -51,7 +51,7 @@ export default {
 ### 链接 | 分组用法
 
 ``` html
-<nut-cell-group title="链接 | 分组用法">
+<nut-cell-group title="链接 | 分组用法" desc="使用 nut-cell-group 支持 title desc slots">
   <nut-cell title="链接" is-link></nut-cell>
   <nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
   <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
@@ -94,22 +94,29 @@ export default {
 
 ## API
 
-### Prop
-
-| 字段                   | 说明                                                                                           | 类型    | 默认值 |
-|------------------------|------------------------------------------------------------------------------------------------|---------|--------|
-| title                  | 标题名称                                                                                       | String  | -      |
-| sub-title              | 左侧副标题                                                                                     | String  | -      |
-| desc                   | 右侧描述                                                                                       | String  | -      |
-| desc-text-align        | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)   | String  | right  |
-| is-link                | 是否展示右侧箭头并开启点击反馈                                                                 | Boolean | false  |
-| icon                   | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -      |
-| round-radius           | 圆角半径                                                                                       | Number  | 6px    |
-| url `小程序不支持`     | 点击后跳转的链接地址                                                                           | String  | -      |
+### CellGroup Prop
+
+| 字段  | 说明     | 类型   | 默认值 |
+|-------|----------|--------|--------|
+| title | 分组标题 | String | -      |
+| desc  | 分组描述 | String | -      |
+
+### Cell Prop
+
+| 字段                   | 说明                                                                                           | 类型           | 默认值 |
+|------------------------|------------------------------------------------------------------------------------------------|----------------|--------|
+| title                  | 标题名称                                                                                       | String         | -      |
+| sub-title              | 左侧副标题                                                                                     | String         | -      |
+| desc                   | 右侧描述                                                                                       | String         | -      |
+| desc-text-align        | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)   | String         | right  |
+| is-link                | 是否展示右侧箭头并开启点击反馈                                                                 | Boolean        | false  |
+| icon                   | 左侧 [图标名称](#/icon) 或图片链接                                                             | String         | -      |
+| round-radius           | 圆角半径                                                                                       | Number         | 6px    |
+| url `小程序不支持`     | 点击后跳转的链接地址                                                                           | String         | -      |
 | to   `小程序不支持`    | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String｜Object | -      |
-| replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                   | Boolean | false  |
+| replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                   | Boolean        | false  |
 
-### Event
+### Cell Event
 
 | 名称  | 说明     | 回调参数    |
 |-------|----------|-------------|
@@ -120,11 +127,12 @@ export default {
 
 | 名称          | 说明                 |
 |---------------|----------------------|
-| icon `v3.1.4` | 自定义左侧 icon 区域 |
+| icon `v3.1.4` | 自定义左侧`icon`区域 |
 | default       | 自定义内容           |
-| link          | 自定义右侧 link 区域 |
+| link          | 自定义右侧`link`区域 |
 
 ## CellGroup Slots
-| 名称          | 说明                 |
-|---------------|----------------------|
-| title `v3.1.10` | 自定义title区域 |
+| 名称            | 说明                |
+|-----------------|---------------------|
+| title `v3.1.10` | 自定义`title`标题区域 |
+| desc `v3.1.12`  | 自定义`desc`描述区域  |

src/packages/__VUE/cellgroup/index.scss

@@ -9,6 +9,15 @@
     margin-top: 30px;
     margin-bottom: 10px;
   }
+  &__desc {
+    display: inherit;
+    padding: $cell-group-desc-padding;
+    color: $cell-group-desc-color;
+    font-size: $cell-group-desc-font-size;
+    line-height: $cell-group-desc-line-height;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
   &__warp {
     display: inherit;
     border-radius: $cell-border-radius;

src/packages/__VUE/cellgroup/index.vue

@@ -2,6 +2,8 @@
   <view :class="classes">
     <slot v-if="$slots.title" name="title"></slot>
     <view v-else-if="title" class="nut-cell-group__title">{{ title }}</view>
+    <slot v-if="$slots.desc" name="desc"></slot>
+    <view v-else-if="desc" class="nut-cell-group__desc">{{ desc }}</view>
     <view class="nut-cell-group__warp">
       <slot></slot>
     </view>
@@ -14,7 +16,8 @@ import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('cell-group');
 export default create({
   props: {
-    title: { type: String, default: '' }
+    title: { type: String, default: '' },
+    desc: { type: String, default: '' }
   },
   setup() {
     const classes = computed(() => {

src/packages/styles/variables.scss

@@ -100,6 +100,10 @@ $cell-group-title-padding: 0 10px !default;
 $cell-group-title-color: #909ca4 !default;
 $cell-group-title-font-size: $font-size-2 !default;
 $cell-group-title-line-height: 20px !default;
+$cell-group-desc-padding: 0 10px !default;
+$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;
 
 // icon

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

@@ -2,11 +2,7 @@
   <div class="demo">
     <h2>基本用法</h2>
     <nut-cell title="我是标题" desc="描述文字"></nut-cell>
-    <nut-cell
-      title="我是标题"
-      sub-title="副标题描述"
-      desc="描述文字"
-    ></nut-cell>
+    <nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
     <nut-cell title="点击测试" @click="testClick"></nut-cell>
     <nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
 
@@ -26,8 +22,7 @@
       ></nut-cell>
       <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
     </nut-cell-group> -->
-
-    <nut-cell-group title="自定义右侧箭头区域">
+    <nut-cell-group title="自定义右侧箭头区域" desc="使用 nut-cell-group 支持 title desc slots">
       <nut-cell title="Switch">
         <template v-slot:link>
           <nut-switch v-model="switchChecked" />