From cc28f0a6def4268b97af65cd1e77af46cb7e9dbb Mon Sep 17 00:00:00 2001
From: xiaoming <1923740402@qq.com>
Date: Tue, 23 Jan 2024 13:24:44 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=A0=87=E7=AD=BE=E9=A1=B5=E5=8F=AF?=
 =?UTF-8?q?=E6=8C=89=E6=BB=91=E5=8A=A8=E5=8A=9B=E5=BA=A6=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E5=B7=A6=E5=8F=B3=E6=BB=91=E5=8A=A8=20(#884)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf: 标签页可按滑动力度进行左右滑动

* fix: login keypress
---
 package.json                         |  2 +-
 pnpm-lock.yaml                       |  8 +++---
 src/layout/components/tag/index.scss |  1 -
 src/layout/components/tag/index.vue  | 38 +++++++++++++++++++++++++++-
 src/layout/hooks/useTag.ts           |  5 +++-
 src/views/login/index.vue            |  3 ++-
 6 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 0e0f54b88..1340f1a50 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@logicflow/extension": "^1.2.19",
     "@pureadmin/descriptions": "^1.2.0",
     "@pureadmin/table": "^3.0.1",
-    "@pureadmin/utils": "^2.4.3",
+    "@pureadmin/utils": "^2.4.4",
     "@vueuse/core": "^10.7.2",
     "@vueuse/motion": "^2.0.0",
     "@wangeditor/editor": "^5.1.23",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f40066c4..5f029f2e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ dependencies:
     specifier: ^3.0.1
     version: 3.0.1(element-plus@2.5.1)(typescript@5.3.3)
   '@pureadmin/utils':
-    specifier: ^2.4.3
-    version: 2.4.3(echarts@5.4.3)(vue@3.4.14)
+    specifier: ^2.4.4
+    version: 2.4.4(echarts@5.4.3)(vue@3.4.14)
   '@vueuse/core':
     specifier: ^10.7.2
     version: 10.7.2(vue@3.4.14)
@@ -1763,8 +1763,8 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils@2.4.3(echarts@5.4.3)(vue@3.4.14):
-    resolution: {integrity: sha512-2CT8HIFUWiFZCJnclBRpng5kVQawvZWdAH4ERPnDZGt5pPltGzNNodpsDVHBCKYAbf/xDKpiNUkYwNbPCCIM9Q==}
+  /@pureadmin/utils@2.4.4(echarts@5.4.3)(vue@3.4.14):
+    resolution: {integrity: sha512-dH1ml+/U50Te7KlZX8pkA08/o+XKYx8aFyds9aTBC34JDyn0GQSyhe0zFIfGwnFztWMToWn/cyitpXmDEcq3NA==}
     peerDependencies:
       echarts: '*'
       vue: '*'
diff --git a/src/layout/components/tag/index.scss b/src/layout/components/tag/index.scss
index c87be26f2..28faf501c 100644
--- a/src/layout/components/tag/index.scss
+++ b/src/layout/components/tag/index.scss
@@ -109,7 +109,6 @@
       overflow: visible;
       white-space: nowrap;
       list-style: none;
-      transition: transform 0.5s ease-in-out;
 
       .scroll-item {
         transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index c2244db22..a2ea3e250 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -38,6 +38,7 @@ const {
   pureSetting,
   activeIndex,
   getTabStyle,
+  isScrolling,
   iconIsActive,
   linkIsActive,
   currentSelect,
@@ -138,6 +139,37 @@ const handleScroll = (offset: number): void => {
       translateX.value = 0;
     }
   }
+  isScrolling.value = false;
+};
+
+const handleWheel = (event: WheelEvent): void => {
+  isScrolling.value = true;
+  const scrollIntensity = Math.abs(event.deltaX) + Math.abs(event.deltaY);
+  let offset = 0;
+  if (event.deltaX < 0) {
+    offset = scrollIntensity > 0 ? scrollIntensity : 100;
+  } else {
+    offset = scrollIntensity > 0 ? -scrollIntensity : -100;
+  }
+
+  smoothScroll(offset);
+};
+
+const smoothScroll = (offset: number): void => {
+  const scrollAmount = 20; // 每帧滚动的距离
+  let remaining = Math.abs(offset);
+
+  const scrollStep = () => {
+    const scrollOffset = Math.sign(offset) * Math.min(scrollAmount, remaining);
+    handleScroll(scrollOffset);
+    remaining -= Math.abs(scrollOffset);
+
+    if (remaining > 0) {
+      requestAnimationFrame(scrollStep);
+    }
+  };
+
+  requestAnimationFrame(scrollStep);
 };
 
 function dynamicRouteTag(value: string): void {
@@ -525,7 +557,11 @@ onBeforeUnmount(() => {
     <span v-show="isShowArrow" class="arrow-left">
       <IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
     </span>
-    <div ref="scrollbarDom" class="scroll-container">
+    <div
+      ref="scrollbarDom"
+      class="scroll-container"
+      @wheel.prevent="handleWheel"
+    >
       <div ref="tabDom" class="tab select-none" :style="getTabStyle">
         <div
           v-for="(item, index) in multiTags"
diff --git a/src/layout/hooks/useTag.ts b/src/layout/hooks/useTag.ts
index 626c65d39..a2b863bec 100644
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -42,6 +42,7 @@ export function useTags() {
   const activeIndex = ref(-1);
   // 当前右键选中的路由信息
   const currentSelect = ref({});
+  const isScrolling = ref(false);
 
   /** 显示模式，默认灵动模式 */
   const showModel = ref(
@@ -152,7 +153,8 @@ export function useTags() {
 
   const getTabStyle = computed((): CSSProperties => {
     return {
-      transform: `translateX(${translateX.value}px)`
+      transform: `translateX(${translateX.value}px)`,
+      transition: isScrolling.value ? "none" : "transform 0.5s ease-in-out"
     };
   });
 
@@ -228,6 +230,7 @@ export function useTags() {
     pureSetting,
     activeIndex,
     getTabStyle,
+    isScrolling,
     iconIsActive,
     linkIsActive,
     currentSelect,
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index fa8f353a4..0be17a3e5 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -97,7 +97,8 @@ const immediateDebounce: any = debounce(
 );
 
 useEventListener(document, "keypress", ({ code }) => {
-  if (code === "Enter" && !disabled.value) immediateDebounce(ruleFormRef.value);
+  if (code === "Enter" && !disabled.value && !loading.value)
+    immediateDebounce(ruleFormRef.value);
 });
 
 watch(imgCode, value => {