test-case-app/src/views/components/Toolbar.vue

<template>
  <div class="toolbar-container">
    <!-- 左侧节点/放大缩小工具 菜单 -->
    <div class="toolbar-l">
      <div class="aside-button-group">
        <AddIcon />
      </div>
      <t-collapse v-model="activeNames">
        <t-collapse-panel value="1" header="这是一个折叠标题">
          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </t-collapse-panel>
        <t-collapse-panel value="2" header="设置默认展开项">
          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </t-collapse-panel>
      </t-collapse>
    </div>
  </div>
</template>
<script setup lang="ts">
import { AddIcon } from 'tdesign-icons-vue-next'

const activeNames = ref(['1', '2'])
</script>
<style lang="scss" scoped>
@import '@/assets/graph/style/general-shap.css';

.toolbar-container {
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;

  .toolbar-l {
    padding-top: 50px;
    font-size: 20px;
    background: #efefef;
    text-align: center;
    background-color: #fff;
    border-right: 1px solid #ededed;
    width: 10%;
    position: relative;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  .aside-button-group {
    width: 100%;
    position: sticky;
    top: 0px;
    background: #ffffff;
    box-sizing: border-box;
    z-index: 1000;
    border: 1px solid #ededed;
    border-left: none;
  }
}
</style>