From 73c7291507e77a702e3dd8aed473d69205402c8a Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Thu, 9 May 2024 19:53:12 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E5=88=86=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/dataset/component/ParagraphList.vue |  93 ++++++++++++++
 .../dataset/component/ParagraphPreview.vue    | 119 ++----------------
 2 files changed, 106 insertions(+), 106 deletions(-)
 create mode 100644 ui/src/views/dataset/component/ParagraphList.vue

diff --git a/ui/src/views/dataset/component/ParagraphList.vue b/ui/src/views/dataset/component/ParagraphList.vue
new file mode 100644
index 00000000000..ff589fc522d
--- /dev/null
+++ b/ui/src/views/dataset/component/ParagraphList.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <InfiniteScroll
+      :size="paragraph_list.length"
+      :total="modelValue.length"
+      :page_size="page_size"
+      v-model:current_page="current_page"
+      @load="next()"
+      :loading="loading"
+    >
+      <el-card
+        v-for="(child, cIndex) in paragraph_list"
+        :key="cIndex"
+        shadow="never"
+        class="card-never mb-16"
+      >
+        <div class="flex-between">
+          <span>{{ child.title || '-' }}</span>
+          <div>
+            <!-- 编辑分段按钮 -->
+            <el-button link @click="editHandle(child, cIndex)">
+              <el-icon><EditPen /></el-icon>
+            </el-button>
+            <!-- 删除分段按钮  -->
+            <el-button link @click="deleteHandle(child, cIndex)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+          </div>
+        </div>
+        <div class="lighter mt-12">
+          {{ child.content }}
+        </div>
+        <div class="lighter mt-12">
+          <el-text type="info"> {{ child.content.length }} 个字符 </el-text>
+        </div>
+      </el-card>
+    </InfiniteScroll>
+
+    <EditParagraphDialog
+      ref="EditParagraphDialogRef"
+      @updateContent="updateContent"
+      :isConnect="isConnect"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { cloneDeep } from 'lodash'
+import { defineProps, ref, computed } from 'vue'
+import EditParagraphDialog from './EditParagraphDialog.vue'
+import { MsgConfirm } from '@/utils/message'
+const page_size = ref<number>(20)
+const current_page = ref<number>(1)
+const currentCIndex = ref<number>(0)
+const EditParagraphDialogRef = ref()
+const emit = defineEmits(['update:modelValue'])
+const loading = ref<boolean>(false)
+const editHandle = (item: any, cIndex: number) => {
+  currentCIndex.value = cIndex
+  EditParagraphDialogRef.value.open(item)
+}
+
+const props = defineProps<{ modelValue: Array<any>; isConnect: boolean }>()
+
+const paragraph_list = computed(() => {
+  return props.modelValue.slice(0, page_size.value * (current_page.value - 1) + page_size.value)
+})
+
+const next = () => {
+  loading.value = true
+  current_page.value += 1
+  loading.value = false
+}
+
+const updateContent = (data: any) => {
+  const new_value = [...props.modelValue]
+  new_value[currentCIndex.value] = cloneDeep(data)
+  emit('update:modelValue', new_value)
+}
+
+const deleteHandle = (item: any, cIndex: number) => {
+  MsgConfirm(`是否删除分段：${item.title || '-'} ?`, `删除后将不会存入知识库，对本地文档无影响。`, {
+    confirmButtonText: '删除',
+    confirmButtonClass: 'danger'
+  })
+    .then(() => {
+      const new_value = [...props.modelValue]
+      new_value.splice(cIndex, 1)
+      emit('update:modelValue', new_value)
+    })
+    .catch(() => {})
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/dataset/component/ParagraphPreview.vue b/ui/src/views/dataset/component/ParagraphPreview.vue
index 4191c792f7e..d11dabebd1f 100644
--- a/ui/src/views/dataset/component/ParagraphPreview.vue
+++ b/ui/src/views/dataset/component/ParagraphPreview.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-tabs v-model="activeName" class="paragraph-tabs" @tab-click="handleClick">
+  <el-tabs v-model="activeName" class="paragraph-tabs">
     <template v-for="(item, index) in newData" :key="index">
       <el-tab-pane :label="item.name" :name="index">
         <template #label>
@@ -8,55 +8,22 @@
             <span class="ml-4">{{ item?.name }}</span>
           </div>
         </template>
-        <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">
-            <el-card
-              v-for="(child, cIndex) in scrollData"
-              :key="cIndex"
-              shadow="never"
-              class="card-never mb-16"
-            >
-              <div class="flex-between">
-                <span>{{ child.title || '-' }}</span>
-                <div>
-                  <!-- 编辑分段按钮 -->
-                  <el-button link @click="editHandle(child, index, cIndex)">
-                    <el-icon><EditPen /></el-icon>
-                  </el-button>
-                  <!-- 删除分段按钮  -->
-                  <el-button link @click="deleteHandle(child, index, cIndex)">
-                    <el-icon><Delete /></el-icon>
-                  </el-button>
-                </div>
-              </div>
-              <div class="lighter mt-12">
-                {{ child.content }}
-              </div>
-              <div class="lighter mt-12">
-                <el-text type="info"> {{ child.content.length }} 个字符 </el-text>
-              </div>
-            </el-card>
-          </div>
-        </el-scrollbar>
+        <div class="mb-16">
+          <el-text type="info">{{ item.content.length }} 段落</el-text>
+        </div>
+        <div class="paragraph-list" v-if="activeName == index">
+          <el-scrollbar>
+            <ParagraphList v-model="item.content" :isConnect="isConnect"> </ParagraphList>
+          </el-scrollbar>
+        </div>
       </el-tab-pane>
     </template>
   </el-tabs>
-  <EditParagraphDialog
-    ref="EditParagraphDialogRef"
-    @updateContent="updateContent"
-    :isConnect="isConnect"
-  />
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch, nextTick } from 'vue'
-import { cloneDeep } from 'lodash'
-import type { TabsPaneContext } from 'element-plus'
-import EditParagraphDialog from './EditParagraphDialog.vue'
-import { filesize, getImgUrl } from '@/utils/utils'
-import { MsgConfirm } from '@/utils/message'
+import { ref, onMounted, watch } from 'vue'
+import { getImgUrl } from '@/utils/utils'
+import ParagraphList from './ParagraphList.vue'
 
 const props = defineProps({
   data: {
@@ -68,80 +35,20 @@ const props = defineProps({
 
 const emit = defineEmits(['update:data'])
 
-const EditParagraphDialogRef = ref()
-const scrollRef = ref()
-
 const activeName = ref(0)
-const currentPIndex = ref(null) as any
-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
-  EditParagraphDialogRef.value.open(item)
-}
-
-function deleteHandle(item: any, index: number, cIndex: number) {
-  MsgConfirm(`是否删除分段：${item.title || '-'} ?`, `删除后将不会存入知识库，对本地文档无影响。`, {
-    confirmButtonText: '删除',
-    confirmButtonClass: 'danger'
-  })
-    .then(() => {
-      newData.value[index].content.splice(cIndex, 1)
-      scrollData.value.splice(cIndex, 1)
-      emit('update:data', newData.value)
-    })
-    .catch(() => {})
-}
-
-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) => {
-  paginationConfig.current_page = 1
-  scrollData.value = newData.value[Number(tab.index)]?.content.slice(0, paginationConfig.page_size)
-}
-
 onMounted(() => {})
 </script>
 <style scoped lang="scss">
@@ -172,6 +79,6 @@ onMounted(() => {})
   }
 }
 .paragraph-list {
-  height: calc(var(--create-dataset-height) - 131px);
+  height: calc(var(--create-dataset-height) - 101px);
 }
 </style>