feat: Workspace list adds scrolling load (#6226)

Co-authored-by: wangdan-fit2cloud <dan.wang@fit2cloud.com>

Author: shaohuzhang1

ui/src/components/common-list/index.vue

@@ -1,25 +1,32 @@
 <template>
   <div class="common-list">
     <ul v-if="data.length > 0">
-      <template v-for="(item, index) in data" :key="index">
-        <li
-          @click.stop="clickHandle(item, index)"
-          :class="current === item[props.valueKey] ? 'active color-primary-1' : ''"
-          class="cursor"
-          @mouseenter.stop="mouseenter(item)"
-          @mouseleave.stop="mouseleave()"
-        >
-          <slot :row="item" :index="index"> </slot>
-        </li>
-      </template>
+      <InfiniteScroll
+        :size="renderList.length"
+        :total="data.length"
+        :page_size="paginationConfig.page_size"
+        v-model:current_page="paginationConfig.current_page"
+      >
+        <template v-for="(item, index) in renderList" :key="item[props.valueKey] ?? index">
+          <li
+            @click.stop="clickHandle(item, index)"
+            :class="current === item[props.valueKey] ? 'active color-primary-1' : ''"
+            class="cursor"
+            @mouseenter.stop="mouseenter(item)"
+            @mouseleave.stop="mouseleave()"
+          >
+            <slot :row="item" :index="index"> </slot>
+          </li>
+        </template>
+      </InfiniteScroll>
     </ul>
     <slot name="empty" v-else>
       <el-empty :description="$t('common.noData')" />
     </slot>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, reactive, computed } from 'vue'
 
 defineOptions({ name: 'CommonList' })
 
@@ -48,6 +55,25 @@ watch(
 
 const emit = defineEmits(['click', 'mouseenter', 'mouseleave'])
 
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 50,
+  total: 0,
+})
+
+// 前端分页滚动加载：data 为全量数据，仅渲染前 current_page * page_size 条，滚动到底再追加
+const renderList = computed(() =>
+  props.data.slice(0, paginationConfig.current_page * paginationConfig.page_size),
+)
+
+// 数据源变化时重置到第一页，避免切换数据后仍停留在很大的页码
+watch(
+  () => props.data,
+  () => {
+    paginationConfig.current_page = 1
+  },
+)
+
 function mouseenter(row: any) {
   emit('mouseenter', row)
 }

ui/src/views/system-chat-user/group/index.vue

@@ -267,7 +267,6 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, watch, reactive } from 'vue'
-import SystemGroupApi from '@/api/system/user-group'
 import { t } from '@/locales'
 import { i18n_name } from '@/utils/common'
 import type { ChatUserGroupUserItem } from '@/api/type/systemChatUser'