fix: 知识库切片详情查询优化

src/views/personal-space/personal-knowledge/document-detail.vue

 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { ScrollbarInst } from 'naive-ui'
@@ -23,7 +23,7 @@ const { t } = useI18n()
 
 const router = useRouter()
 
-const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()
+const { paginationData } = usePagination()
 
 const currentKdId = ref(0)
 const currentKnowledgeDocumentName = ref('')
@@ -61,11 +61,6 @@ const emptyKnowledgeChunkListText = computed(() => {
   return isSearchEmptyList.value ? t('common_module.search_empty_data') : t('common_module.empty_data')
 })
 
-watch([() => paginationData.pageNo, () => paginationData.pageSize], async () => {
-  await handleGetKnowledgeChunkList()
-  scrollBarRef.value?.scrollTo({ top: 0 })
-})
-
 onMounted(async () => {
   if (!router.currentRoute.value.params.kdId) {
     window.$message.warning(t('personal_space_module.knowledge_module.not_find_knowledge_document_message'))
@@ -201,6 +196,19 @@ async function handleUpdateOpenKnowledgeChunk(chunkItem: KnowledgeChunkItem) {
     chunkItem.isOpen = isOpen === 'Y' ? 'N' : 'Y'
   }
 }
+
+async function handleGetKnowledgeChunkListUpdatePageNo(pageNo: number) {
+  paginationData.pageNo = pageNo
+  await handleGetKnowledgeChunkList()
+  scrollBarRef.value?.scrollTo({ top: 0 })
+}
+
+async function handleGetKnowledgeChunkListUpdatePageSize(pageSize: number) {
+  paginationData.pageNo = 1
+  paginationData.pageSize = pageSize
+  await handleGetKnowledgeChunkList()
+  scrollBarRef.value?.scrollTo({ top: 0 })
+}
 </script>
 
 <template>
@@ -247,22 +255,24 @@ async function handleUpdateOpenKnowledgeChunk(chunkItem: KnowledgeChunkItem) {
     </div>
 
     <n-spin :show="knowledgeChunkListLoading" class="w-full flex-1 overflow-hidden" content-class="flex w-full h-full">
-      <div v-if="knowledgeChunkList.length && !knowledgeChunkListLoading" class="flex flex-1">
-        <n-scrollbar ref="scrollBarRef" class="grid w-full flex-1 overflow-hidden">
-          <div class="grid gap-5">
-            <KnowledgeChuckItem
-              v-for="chunkItem in knowledgeChunkList"
-              :key="chunkItem.chunkRelationId"
-              :chunk-item="chunkItem"
-              :total-chunk="totalChunk"
-              @edit="handleEditKnowledgeChunkModal"
-              @up-add-chunk="handleShowUpAddChunkModal"
-              @down-add-chunk="handleShowDownAddChunkModal"
-              @delete="handleDeleteKnowledgeChunk"
-              @update-open="handleUpdateOpenKnowledgeChunk"
-            />
-          </div>
-        </n-scrollbar>
+      <div v-if="knowledgeChunkList.length" class="flex flex-1">
+        <div v-show="!knowledgeChunkListLoading" class="flex flex-1">
+          <n-scrollbar ref="scrollBarRef" class="grid w-full flex-1 overflow-hidden">
+            <div class="grid gap-5">
+              <KnowledgeChuckItem
+                v-for="chunkItem in knowledgeChunkList"
+                :key="chunkItem.chunkRelationId"
+                :chunk-item="chunkItem"
+                :total-chunk="totalChunk"
+                @edit="handleEditKnowledgeChunkModal"
+                @up-add-chunk="handleShowUpAddChunkModal"
+                @down-add-chunk="handleShowDownAddChunkModal"
+                @delete="handleDeleteKnowledgeChunk"
+                @update-open="handleUpdateOpenKnowledgeChunk"
+              />
+            </div>
+          </n-scrollbar>
+        </div>
       </div>
 
       <div
@@ -282,8 +292,8 @@ async function handleUpdateOpenKnowledgeChunk(chunkItem: KnowledgeChunkItem) {
     <div class="mt-4 flex justify-end">
       <CustomPagination
         :paging-info="paginationData"
-        @update-page-no="handlePageNoChange"
-        @update-page-size="handlePageSizeChange"
+        @update-page-no="handleGetKnowledgeChunkListUpdatePageNo"
+        @update-page-size="handleGetKnowledgeChunkListUpdatePageSize"
       />
     </div>