<template>
  <!-- 设置项容器 -->
  <div class="setting-drawer-index-item">
    <!-- 设置项标题 -->
    <h3 class="setting-drawer-index-title">{{ title }}</h3>
    <!-- 插槽内容，用于显示设置项的具体内容 -->
    <slot></slot>
    <!-- 根据props中的divider决定是否显示分割线 -->
    <a-divider v-if="divider"/>
  </div>
</template>

<script>
/**
 * 设置项组件
 *
 * @param {String} title - 设置项的标题，默认为空字符串
 * @param {Boolean} divider - 是否显示设置项后的分割线，默认不显示
 */
export default {
  name: 'SettingItem',
  props: {
    title: {
      type: String,
      default: ''
    },
    divider: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less" scoped>/* 设置项样式 */

  .setting-drawer-index-item {
    margin-bottom: 24px;
    /* 设置项标题样式 */
    .setting-drawer-index-title {
      font-size: 14px;
      color: rgba(0, 0, 0, .85);
      line-height: 22px;
      margin-bottom: 12px;
    }

  }
</style>
