.ul-tree-outline {
    padding: $space-md;
    background-color: $color-bg;
    border: 1px solid $color-border;
    border-radius: $radius-base;
    transition: all .3s;

    &__item {
        display: flex;
        align-items: center;
        padding: $space-xs $space-sm;
        color: $color-text-secondary;
        font-size: $font-size-base;
        border-radius: $radius-sm;
        cursor: pointer;
        transition: all .3s;

        &:hover {
            background-color: $color-primary-light;
            color: $color-primary-base;
        }

        // 不同层级的缩进
        &.level-1 {
            padding-left: $space-lg * 1.5;
        }

        &.level-2 {
            padding-left: $space-lg * 2.5;
        }

        &.group {
            font-weight: $font-weight-bold;
            color: $color-text;
            margin-top: $space-sm;
        }
    }

    &__icon {
        margin-right: $space-sm;
        color: $color-text-placeholder;
    }
    
    // 深色主题
    &.dark {
        background-color: $color-black;
        border-color: transparent;

        .ul-tree-outline__item {
            color: $color-text-secondary;

            &:hover {
                background-color: rgba($color-white, 0.1);
                color: $color-white;
            }

            &.group {
                color: $color-white;
            }
        }
    }
}

.ul-doc-info-page-list {
    padding: 15px;
    color  : #999;

}

.ul-doc-info-page-item {
    line-height: 2;
    padding    : 0 15px;
    position   : relative;
}

.ul-doc-info-page-item.page {
    cursor   : pointer;
    font-size: 18px;
}

.ul-doc-info-page-item.group {
    color    : #bbb;
    font-size: 16px;
}

.ul-doc-info-page-item.point {
    color    : #eee;
    font-size: 14px;
}

.ul-doc-info-page-item.page:hover {
    background-color: #555;
}


.ul-doc-info-page-item.level-0 {}

.ul-doc-info-page-item.level-1 {
    margin-left: 15px;
}

.ul-doc-info-page-item.level-2 {
    margin-left: 30px;

}

.ul-doc-info-page-item.level-3 {
    margin-left: 45px;

}

.ul-tree-outline {
  padding: 16px;
  background-color: var(--ul-color-bg);
  border: 1px solid var(--ul-color-border);
  border-radius: 4px;
  transition: all 0.3s;
}
.ul-tree-outline__item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  color: var(--ul-color-text-secondary);
  font-size: 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
}
.ul-tree-outline__item:hover {
  background-color: var(--ul-color-primary-light);
  color: var(--ul-color-primary-base);
}
.ul-tree-outline__item.level-1 {
  padding-left: 36px;
}
.ul-tree-outline__item.level-2 {
  padding-left: 60px;
}
.ul-tree-outline__item.group {
  font-weight: 700;
  color: var(--ul-color-text);
  margin-top: 8px;
}
.ul-tree-outline__icon {
  margin-right: 8px;
  color: var(--ul-color-text-placeholder);
}
.ul-tree-outline.dark {
  background-color: var(--ul-color-black);
  border-color: transparent;
}
.ul-tree-outline.dark .ul-tree-outline__item {
  color: var(--ul-color-text-secondary);
}
.ul-tree-outline.dark .ul-tree-outline__item:hover {
  background-color: rgba(var(--ul-color-white), 0.1);
  color: var(--ul-color-white);
}
.ul-tree-outline.dark .ul-tree-outline__item.group {
  color: var(--ul-color-white);
}
.ul-doc-info-page-list {
  padding: 15px;
  color: #999;
}
.ul-doc-info-page-item {
  line-height: 2;
  padding: 0 15px;
  position: relative;
}
.ul-doc-info-page-item.page {
  cursor: pointer;
  font-size: 18px;
}
.ul-doc-info-page-item.group {
  color: #bbb;
  font-size: 16px;
}
.ul-doc-info-page-item.point {
  color: #eee;
  font-size: 14px;
}
.ul-doc-info-page-item.page:hover {
  background-color: #555;
}
.ul-doc-info-page-item.level-1 {
  margin-left: 15px;
}
.ul-doc-info-page-item.level-2 {
  margin-left: 30px;
}
.ul-doc-info-page-item.level-3 {
  margin-left: 45px;
}

<!-- 浅色主题 -->
<view class="ul-tree-outline">
    <view class="ul-tree-outline__item group">入门 </view>
    <a href="#" class="ul-tree-outline__item page level-1"><span class="ul-tree-outline__icon"><i class="fa fa-file-text-o"></i></span> <span class="ul-tree-outline__title">快速上手</span></a>
    <a href="#" class="ul-tree-outline__item page level-1"><span class="ul-tree-outline__icon"><i class="fa fa-file-text-o"></i></span> <span class="ul-tree-outline__title">项目规范</span></a>
    <view class="ul-tree-outline__item group">组件</view>
    <a href="#" class="ul-tree-outline__item page level-1"><span class="ul-tree-outline__icon"><i class="fa fa-file-text-o"></i></span> <span class="ul-tree-outline__title">Button 按钮</span></a>
    <a href="#" class="ul-tree-outline__item point level-2"><span class="ul-tree-outline__icon">#</span> <span class="ul-tree-outline__title">基础用法</span></a>
    <view class="ul-tree-outline__item group">文档</view>
    <a href="#" class="ul-tree-outline__item page level-1"><span class="ul-tree-outline__icon"><i class="fa fa-book"></i></span> <span class="ul-tree-outline__title">设计理念</span></a>
</view>
<br>
<!-- 深色主题 -->
<view class="ul-tree-outline dark">
    <view class="ul-tree-outline__item group">入门 </view>
    <a href="#" class="ul-tree-outline__item page level-1"><span class="ul-tree-outline__icon"><i class="fa fa-file-text-o"></i></span> <span class="ul-tree-outline__title">快速上手</span></a>
    <a href="#" class="ul-tree-outline__item page level-1"><span class="ul-tree-outline__icon"><i class="fa fa-file-text-o"></i></span> <span class="ul-tree-outline__title">项目规范</span></a>
    <view class="ul-tree-outline__item group">组件</view>
    <a href="#" class="ul-tree-outline__item page level-1"><span class="ul-tree-outline__icon"><i class="fa fa-file-text-o"></i></span> <span class="ul-tree-outline__title">Button 按钮</span></a>
    <a href="#" class="ul-tree-outline__item point level-2"><span class="ul-tree-outline__icon">#</span> <span class="ul-tree-outline__title">基础用法</span></a>
    <view class="ul-tree-outline__item group">文档</view>
    <a href="#" class="ul-tree-outline__item page level-1"><span class="ul-tree-outline__icon"><i class="fa fa-book"></i></span> <span class="ul-tree-outline__title">设计理念</span></a>
</view>