如何使用Ant Design Vue的Tabs组件实现滚动吸顶效果？

<code class="vue"><template>
  <div class="container">
    <div class="tabs-wrapper" ref="tabsWrapper">
      <a-tabs :tabbarGutter="30" v-model="activeKey">
        <a-tab-pane key="tab1" tab="Tab 1">Tab 1 内容</a-tab-pane>
        <a-tab-pane key="tab2" tab="Tab 2">Tab 2 内容</a-tab-pane>
      </a-tabs>
    </div>
    <div class="content-wrapper" ref="contentWrapper">
      <div class="content">
        <!-- 这里添加你的内容 -->
        <p v-for="i in 50" :key="i">这是一段测试文本，用于填充内容区域。</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUpdated } from 'vue';

export default {
  setup() {
    const tabsWrapper = ref(null);
    const contentWrapper = ref(null);
    const activeKey = ref('tab1');
    const isFixed = ref(false);

    onMounted(() => {
      const tabsOffsetTop = tabsWrapper.value.offsetTop;
      contentWrapper.value.style.marginTop = `${tabsOffsetTop}px`; //调整内容区域的marginTop
      window.addEventListener('scroll', handleScroll);
    });

    onUpdated(() => {
      if (window.pageYOffset >= tabsWrapper.value.offsetTop) {
        isFixed.value = true;
      } else {
        isFixed.value = false;
      }
    });

    const handleScroll = () => {
      if (window.pageYOffset >= tabsWrapper.value.offsetTop) {
        isFixed.value = true;
      } else {
        isFixed.value = false;
      }
    };


    return {
      tabsWrapper,
      contentWrapper,
      activeKey,
      isFixed
    };
  }
};
</script>

<style scoped>
.container {
  height: 100vh;
  overflow: hidden;
}
.tabs-wrapper {
  position: relative;
}
.tabs-wrapper.isfixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.content-wrapper {
  overflow-y: auto;
}
.content {
  padding-top: 64px; /* 调整这个值以匹配tabs的高度 */
}
</style></code>