perf: 分段预览懒加载

ui/src/views/dataset/component/ParagraphPreview.vue

@@ -8,14 +8,13 @@
             <span class="ml-4">{{ item?.name }}</span>
           </div>
         </template>
-        <el-scrollbar>
+        <el-scrollbar ref="scrollRef" :key="index">
           <div class="mb-16">
             <el-text type="info">{{ item.content.length }} 段落</el-text>
           </div>
-
+          <div class="paragraph-list" v-infinite-scroll="loadScroll">
-          <div class="paragraph-list">
             <el-card
-              v-for="(child, cIndex) in item.content"
+              v-for="(child, cIndex) in scrollData"
               :key="cIndex"
               shadow="never"
               class="card-never mb-16"
@@ -52,7 +51,7 @@
   />
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from 'vue'
+import { ref, reactive, onMounted, watch, nextTick } from 'vue'
 import { cloneDeep } from 'lodash'
 import type { TabsPaneContext } from 'element-plus'
 import EditParagraphDialog from './EditParagraphDialog.vue'
@@ -70,6 +69,7 @@ const props = defineProps({
 const emit = defineEmits(['update:data'])
 
 const EditParagraphDialogRef = ref()
+const scrollRef = ref()
 
 const activeName = ref(0)
 const currentPIndex = ref(null) as any
@@ -77,16 +77,41 @@ const currentCIndex = ref(null) as any
 
 const newData = ref<any[]>([])
 
+// 滚动加载数据
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20
+})
+
+const scrollData = ref<any[]>([])
+
 watch(
   () => props.data,
   (value) => {
     newData.value = value
+    paginationConfig.current_page = 1
+    nextTick(() => {
+      scrollRef.value?.[activeName.value]?.scrollTo(0, 0)
+    })
+    scrollData.value = newData.value[activeName.value]?.content.slice(0, paginationConfig.page_size)
   },
   {
     immediate: true
   }
 )
 
+function loadScroll() {
+  if (newData.value[activeName.value]?.content.length > scrollData.value.length) {
+    paginationConfig.current_page += 1
+    scrollData.value.push(
+      ...newData.value[activeName.value].content.slice(
+        (paginationConfig.current_page - 1) * paginationConfig.page_size,
+        paginationConfig.current_page * paginationConfig.page_size
+      )
+    )
+  }
+}
+
 function editHandle(item: any, index: number, cIndex: number) {
   currentPIndex.value = index
   currentCIndex.value = cIndex
@@ -100,6 +125,7 @@ function deleteHandle(item: any, index: number, cIndex: number) {
   })
     .then(() => {
       newData.value[index].content.splice(cIndex, 1)
+      scrollData.value.splice(cIndex, 1)
       emit('update:data', newData.value)
     })
     .catch(() => {})
@@ -107,10 +133,14 @@ function deleteHandle(item: any, index: number, cIndex: number) {
 
 function updateContent(data: any) {
   newData.value[currentPIndex.value].content[currentCIndex.value] = cloneDeep(data)
+  scrollData.value[currentCIndex.value] = cloneDeep(data)
   emit('update:data', newData.value)
 }
 
-const handleClick = (tab: TabsPaneContext, event: Event) => {}
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  paginationConfig.current_page = 1
+  scrollData.value = newData.value[Number(tab.index)]?.content.slice(0, paginationConfig.page_size)
+}
 
 onMounted(() => {})
 </script>

ui/src/views/dataset/step/StepSecond.vue

@@ -95,6 +95,7 @@
       <el-col :span="14" class="p-24 border-l">
         <div v-loading="loading">
           <h4 class="title-decoration-1 mb-8">分段预览</h4>
+
           <ParagraphPreview v-model:data="paragraphList" :isConnect="checkedConnect" />
         </div>
       </el-col>