From 141e22e2c6e39ece2f264a75e17fcfbd2b8ba5c1 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 25 Aug 2023 03:38:15 -0500
Subject: [PATCH] feat: add mouse scrolling handler for tabs component (#4453)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 组件支持通过鼠标滚动选项卡。
```
---
 .../components/src/components/tabs/Tabbar.vue | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/console/packages/components/src/components/tabs/Tabbar.vue b/console/packages/components/src/components/tabs/Tabbar.vue
index f1ac5e574c..3e0e8451bd 100644
--- a/console/packages/components/src/components/tabs/Tabbar.vue
+++ b/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"