feat: 完善列表项

components/pi-list-item/index.vue

@@ -15,7 +15,7 @@
     <!-- 中间区域 -->
     <view class="pi-flex-sub"><slot /></view>
     <!-- 右侧区域 -->
-    <view>{{ extraText }}</view>
+    <view class="extra">{{ extraText }}</view>
     <slot v-if="$slots.right" name="right" />
     <pi-icon
       v-else-if="showRightIcon"
@@ -192,6 +192,7 @@ export default {
 @import '~@/piui/scss/border.scss';
 
 .pi-list-item {
+  height: $pi-form-item-height;
   .list-item-title {
     font-size: $pi-list-title-fontsize;
     color: $pi-list-title-color;
@@ -200,6 +201,9 @@ export default {
     font-size: $pi-list-desc-fontsize;
     color: $pi-list-desc-color;
   }
+  .extra {
+    padding-right: 12rpx;
+  }
   &.border {
     @include pi-border;
     &::after {

components/pi-list/index.vue

@@ -1,5 +1,6 @@
 <template>
   <view class="pi-list" :style="[customStyle]" :class="[{ border: showBorder }, customClass]">
+    <view v-if="title" class="list-title" :style="[titleStyle]">{{ title }}</view>
     <slot />
   </view>
 </template>
@@ -27,6 +28,20 @@ export default {
         return list.customClass
       }
     },
+    // 列表面板标题
+    title: {
+      type: String,
+      default() {
+        return list.title
+      }
+    },
+    // 标题自定义样式，对象形式（默认值：{}）
+    titleStyle: {
+      type: Object,
+      default() {
+        return list.titleStyle
+      }
+    },
     // 是否显示边框
     border: {
       type: Boolean,
@@ -57,5 +72,27 @@ export default {
 @import '~@/piui/scss/border.scss';
 
 .pi-list {
+  .list-title {
+    position: relative;
+    padding-left: 48rpx;
+    margin: 24rpx 0;
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #6a6a77;
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 24rpx;
+      display: inline-block;
+      width: 6rpx;
+      height: 60%;
+      overflow: hidden;
+      content: '';
+      background-color: #6190e8;
+      border-radius: 2rpx;
+      transform: translateY(-50%);
+    }
+  }
 }
 </style>

config/list.js

@@ -1,6 +1,8 @@
 export default {
   customClass: '', // 自定义样式类，字符串形式（''）
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
+  title: '', // 列表面板标题
+  titleStyle: {}, // 标题自定义样式，对象形式（默认值：{}）
   disabled: false, // 是否禁用
   border: true // 是否显示边框
 }

config/listItem.js

@@ -1,7 +1,7 @@
 export default {
   customClass: '', // 自定义样式类，字符串形式（''）
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
-  height: 98, // 表格高度
+  height: 110, // 表格高度
   title: '', // 标题
   titleStyle: {}, // 标题自定义样式，对象形式（默认值：{}）
   desc: '', // 描述