From efd9f93423dacf2c3d8ffa5d3f70170fff902226 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Thu, 20 Mar 2025 16:51:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=9B=BE=E8=A1=A8=E4=B8=AD=E6=BB=9A=E5=8A=A8=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E6=BB=9A=E5=8A=A8=E6=9D=A1=EF=BC=8C=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=86=85=E5=AE=B9=E5=9D=97=E4=B8=8D=E4=BC=9A?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=88=87=E6=8D=A2=20#15424?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component-group/UserViewGroup.vue         | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
index 4159b8c252..91f9447c16 100644
--- a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { iconChartMap } from '@/components/icon-group/chart-list'
-import { reactive, ref, toRefs } from 'vue'
+import { computed, reactive, ref, toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import { CHART_TYPE_CONFIGS } from '@/views/chart/components/editor/util/chart'
 import Icon from '@/components/icon-custom/src/Icon.vue'
@@ -62,6 +62,36 @@ const handleDragEnd = e => {
   commonHandleDragEnd(e, dvModel.value)
 }
 
+const chartGroupListScroll = computed(() => {
+  return state.chartGroupList.reduce(
+    (pre, next) => {
+      if (next.display !== 'hidden') {
+        const height = (Math.floor((next.details.length - 1) / 3) + 1) * 88 + 20
+        if (pre.top === 0) {
+          pre.top += height
+          pre[0] = next.category
+        } else {
+          pre[pre.top] = next.category
+          pre.top += height
+        }
+        return pre
+      }
+      return pre
+    },
+    { top: 0 }
+  )
+})
+
+const handleScroll = val => {
+  let scrollTop: string | number = 0
+  for (const key in chartGroupListScroll.value) {
+    if (val.scrollTop > key) {
+      scrollTop = key
+    }
+  }
+  state.curCategory = chartGroupListScroll.value[scrollTop]
+}
+
 const groupActiveChange = category => {
   state.curCategory = category
   anchorPosition('#' + category)
@@ -118,7 +148,7 @@ const loadPluginCategory = data => {
         </li>
       </ul>
     </div>
-    <el-scrollbar ref="userViewGroup" class="group-right" height="392px">
+    <el-scrollbar ref="userViewGroup" @scroll="handleScroll" class="group-right" height="392px">
       <el-row
         :id="chartGroupInfo.category"
         v-for="chartGroupInfo in state.chartGroupList"