feat(CellGroup): add inset prop (#8885)

* feat(CellGroup): add inset prop

* docs: hide inset grouped in weapp

src/cell-group/CellGroup.tsx

@@ -11,18 +11,25 @@ export default defineComponent({
 
   props: {
     title: String,
+    inset: Boolean,
     border: truthProp,
   },
 
   setup(props, { slots, attrs }) {
     const renderGroup = () => (
-      <div class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]} {...attrs}>
+      <div
+        class={[
+          bem({ inset: props.inset }),
+          { [BORDER_TOP_BOTTOM]: props.border && !props.inset },
+        ]}
+        {...attrs}
+      >
         {slots.default?.()}
       </div>
     );
 
     const renderTitle = () => (
-      <div class={bem('title')}>
+      <div class={bem('title', { inset: props.inset })}>
         {slots.title ? slots.title() : props.title}
       </div>
     );

src/cell-group/index.less

@@ -6,15 +6,28 @@
   --van-cell-group-title-padding: @cell-group-title-padding;
   --van-cell-group-title-font-size: @cell-group-title-font-size;
   --van-cell-group-title-line-height: @cell-group-title-line-height;
+  --van-cell-group-inset-padding: @cell-group-inset-padding;
+  --van-cell-group-inset-border-radius: @cell-group-inset-border-radius;
+  --van-cell-group-inset-title-padding: @cell-group-inset-title-padding;
 }
 
 .van-cell-group {
   background-color: var(--van-cell-group-background-color);
 
+  &--inset {
+    margin: var(--van-cell-group-inset-padding);
+    border-radius: var(--van-cell-group-inset-border-radius);
+    overflow: hidden;
+  }
+
   &__title {
     padding: var(--van-cell-group-title-padding);
     color: var(--van-cell-group-title-color);
     font-size: var(--van-cell-group-title-font-size);
     line-height: var(--van-cell-group-title-line-height);
+
+    &--inset {
+      padding: var(--van-cell-group-inset-title-padding);
+    }
   }
 }

src/cell-group/var.less

@@ -6,3 +6,7 @@
   var(--van-padding-xs);
 @cell-group-title-font-size: var(--van-font-size-md);
 @cell-group-title-line-height: 16px;
+@cell-group-inset-padding: 0 var(--van-padding-md);
+@cell-group-inset-border-radius: var(--van-border-radius-lg);
+@cell-group-inset-title-padding: var(--van-padding-md) var(--van-padding-md)
+  var(--van-padding-xs) var(--van-padding-xl);