背景

折叠左侧，多余空间用于列表操作；收缩还添加了动画功能；

实践

js部分

<div
  className={classNames(styles.left, 'left', expaned ? styles.expaned : styles.retract)}
  >
  <div
    className={classNames(styles.expandBtn, 'pointer')}
    onClick={this.handleToggleExpand}
    >
    <MyIcon type={expaned ? 'iconcaret-left' : 'iconcaret-right'} />
  </div>
  <div className={styles.leftTree}>
    <CategoryTree
      treeData={treeData}
      shouldUpdateProps={['treeData']}
      onSelectCallBack={this.onSelectCallBack}
      renderLineIcon={this.getOptionButtons}
      renderSearchIcon={this.renderSearchIcon}
      />
  </div>
</div>
<div className={classNames(styles.right, 'right')}></div>
</div>

css部分

.content {
  height: 100%;
  .left {
    height: 100%;
    // overflow: auto;
    background: #fff;
    border-right: 1px solid @border-color-base;
    display: flex;
    flex-direction: column;
    position: relative;
    &.retract {
      width: 0;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      border-right: 0;
    }
    &.expaned {
      width: 230px;
      min-width: 230px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
    .expandBtn {
      position: absolute;
      top: calc(50% - 20px);
      right: -16px;
      width: 17px;
      display: block;
      background: #fff;
      box-shadow: 4px 2px 8px 0 rgba(0, 0, 0, 0.15); // 浮层阴影
      padding: 16px 0;
      border-radius: 0 @border-radius-base @border-radius-base 0;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      z-index: 9;
    }
    .leftTree {
      height: 100%;
      overflow: auto;
      :global {
        li .ant-tree-node-content-wrapper:hover {
          :local .more {
            display: inline-block;
          }
        }

        .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
          :local .more {
            display: inline-block;
          }
        }
      }
    }
  }
  .right {
    height: 100%;
    // display: flex;
    // flex-direction: column;
    overflow: auto;
  }
}