feat: add mouse scrolling handler for tabs component (#4453)

#### What type of PR is this?

/area console
/kind feature
/milestone 2.9.x

#### What this PR does / why we need it:

Console 端的 Tabs 组件支持通过鼠标滚动选项卡。

![2023-08-21 16 15 46](https://github.com/halo-dev/halo/assets/21301288/8fa56d4d-04d3-47a5-8515-2caf54ac9258)

#### Which issue(s) this PR fixes:

Fixes #4353 

#### Special notes for your reviewer:

None

#### Does this PR introduce a user-facing change?

```release-note
Console 端的 Tabs 组件支持通过鼠标滚动选项卡。
```

console/packages/components/src/components/tabs/Tabbar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import type { Direction, Type } from "./interface";
 
 const props = withDefaults(
@@ -34,10 +34,35 @@ const handleChange = (id: number | string) => {
   emit("update:activeId", id);
   emit("change", id);
 };
+
+const tabbarItemsRef = ref<HTMLElement | undefined>();
+
+function handleHorizontalWheel(event: WheelEvent) {
+  if (!tabbarItemsRef.value) {
+    return;
+  }
+  const { scrollLeft, scrollWidth, clientWidth } = tabbarItemsRef.value;
+  const toLeft = event.deltaY < 0 && scrollLeft > 0;
+  const toRight = event.deltaY > 0 && scrollLeft < scrollWidth - clientWidth;
+
+  if (toLeft || toRight) {
+    event.preventDefault();
+    event.stopPropagation();
+    tabbarItemsRef.value.scrollBy({ left: event.deltaY });
+  }
+}
+
+onMounted(() => {
+  tabbarItemsRef.value?.addEventListener("wheel", handleHorizontalWheel);
+});
+
+onUnmounted(() => {
+  tabbarItemsRef.value?.removeEventListener("wheel", handleHorizontalWheel);
+});
 </script>
 <template>
   <div :class="classes" class="tabbar-wrapper">
-    <div class="tabbar-items">
+    <div ref="tabbarItemsRef" class="tabbar-items">
       <div
         v-for="(item, index) in items"
         :key="index"