feat: 分页

ui/src/api/application.ts

@@ -16,17 +16,20 @@ const getAllAppilcation: () => Promise<Result<any[]>> = () => {
 
 /**
  * 获取分页应用
- * @param 参数  {
-              "current_page": "string",
-              "page_size": "string",
-              "name": "string",
-            }
+ * page {
+          "current_page": "string",
+          "page_size": "string",
+        }
+ * param {
+          "name": "string",
+        }
  */
-const getApplication: (param: pageRequest) => Promise<Result<any>> = (param) => {
-  return get(
-    `${prefix}/${param.current_page}/${param.page_size}`,
-    param.name && { name: param.name }
-  )
+const getApplication: (
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (page, param, loading) => {
+  return get(`${prefix}/${page.current_page}/${page.page_size}`, param, loading)
 }
 
 /**
@@ -221,7 +224,6 @@ const putChatVote: (
   )
 }
 
-
 export default {
   getAllAppilcation,
   getApplication,
@@ -237,5 +239,5 @@ export default {
   getAccessToken,
   postAppAuthentication,
   getProfile,
-  putChatVote,
+  putChatVote
 }

ui/src/api/dataset.ts

@@ -8,17 +8,21 @@ const prefix = '/dataset'
 
 /**
  * 获取分页数据集
- * @param 参数  {
-              "current_page": "string",
-              "page_size": "string",
-              "name": "string",
-            }
+ * @param 参数  
+ * page {
+          "current_page": "string",
+          "page_size": "string",
+        }
+ * param {
+          "name": "string",
+        }
  */
-const getDateset: (param: pageRequest) => Promise<Result<any>> = (param) => {
-  return get(
-    `${prefix}/${param.current_page}/${param.page_size}`,
-    param.name && { name: param.name }
-  )
+const getDateset: (
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (page, param, loading) => {
+  return get(`${prefix}/${page.current_page}/${page.page_size}`, param, loading)
 }
 
 /**

ui/src/styles/app.scss

@@ -421,10 +421,15 @@ h4 {
   }
 }
 
-
 .file-List-card {
   border-radius: 4px;
   .el-card__body {
     padding: 8px 16px 8px 12px;
   }
-}
+}
+
+.custom-divider {
+  .el-divider__text {
+    background: var(--app-layout-bg-color);
+  }
+}

ui/src/views/application/index.vue

@@ -3,14 +3,14 @@
     <div class="flex-between mb-16">
       <h3>应用</h3>
       <el-input
-        v-model="pageConfig.name"
-        @change="search"
+        v-model="searchValue"
+        @change="searchHandle"
         placeholder="按 名称 搜索"
         prefix-icon="Search"
         class="w-240"
       />
     </div>
-    <div v-loading.fullscreen.lock="loading">
+    <div v-loading.fullscreen.lock="pageConfig.current_page === 1 && loading">
       <el-row
         :gutter="15"
         v-infinite-scroll="loadDataset"
@@ -92,13 +92,20 @@
           </CardBox>
         </el-col>
       </el-row>
+      <div style="padding: 16px 10px">
+        <el-divider class="custom-divider" v-if="applicationList.length > 0 && loading">
+          <el-text type="info"> 加载中...</el-text>
+        </el-divider>
+        <el-divider class="custom-divider" v-if="noMore">
+          <el-text type="info"> 到底啦！</el-text>
+        </el-divider>
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, computed } from 'vue'
 import applicationApi from '@/api/application'
-import type { pageRequest } from '@/api/type/common'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { useRouter } from 'vue-router'
 import useStore from '@/stores'
@@ -106,22 +113,40 @@ const { application } = useStore()
 const router = useRouter()
 
 const loading = ref(false)
-const disabledScroll = ref(false)
-const pageConfig = reactive<pageRequest>({
-  current_page: 1,
-  page_size: 20,
-  name: ''
-})
 
 const applicationList = ref<any[]>([])
 
-function loadDataset() {}
+const pageConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
 
-function search() {
-  pageConfig.current_page = 1
-  getList()
+const searchValue = ref('')
+
+const noMore = computed(
+  () =>
+    applicationList.value.length > 0 &&
+    applicationList.value.length === pageConfig.total &&
+    pageConfig.total > 20
+)
+const disabledScroll = computed(
+  () => applicationList.value.length > 0 && (loading.value || noMore.value)
+)
+
+function loadDataset() {
+  if (pageConfig.total > pageConfig.page_size) {
+    pageConfig.current_page += 1
+    getList()
+  }
 }
 
+function searchHandle() {
+  pageConfig.total = 0
+  pageConfig.current_page = 1
+  applicationList.value = []
+  getList()
+}
 function getAccessToken(id: string) {
   application.asyncGetAccessToken(id, loading).then((res) => {
     window.open(application.location + res?.data?.access_token)
@@ -164,15 +189,11 @@ function deleteApplication(row: any) {
 // }
 
 function getList() {
-  loading.value = true
   applicationApi
-    .getApplication(pageConfig)
+    .getApplication(pageConfig, searchValue.value && { name: searchValue.value }, loading)
     .then((res) => {
-      applicationList.value = res.data?.records
-      loading.value = false
-    })
-    .catch(() => {
-      loading.value = false
+      applicationList.value = [...applicationList.value, ...res.data.records]
+      pageConfig.total = res.data.total
     })
 }
 

ui/src/views/dataset/index.vue

@@ -3,14 +3,14 @@
     <div class="flex-between mb-16">
       <h3>数据集</h3>
       <el-input
-        v-model="pageConfig.name"
-        @change="search"
+        v-model="searchValue"
+        @change="searchHandle"
         placeholder="按 名称 搜索"
         prefix-icon="Search"
         class="w-240"
       />
     </div>
-    <div v-loading.fullscreen.lock="loading">
+    <div v-loading.fullscreen.lock="pageConfig.current_page === 1 && loading">
       <el-row
         :gutter="15"
         v-infinite-scroll="loadDataset"
@@ -19,50 +19,50 @@
         <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
           <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
         </el-col>
-        <el-col
-          :xs="24"
-          :sm="12"
-          :md="8"
-          :lg="6"
-          :xl="4"
-          v-for="(item, index) in datasetList"
-          :key="index"
-          class="mb-16"
-        >
-          <CardBox
-            :title="item.name"
-            :description="item.desc"
-            class="cursor"
-            @click="router.push({ path: `/dataset/${item.id}/document` })"
-          >
-            <template #mouseEnter>
-              <el-tooltip effect="dark" content="删除" placement="top">
-                <el-button text @click.stop="deleteDateset(item)" class="delete-button">
-                  <el-icon><Delete /></el-icon>
-                </el-button>
-              </el-tooltip>
-            </template>
+        <template v-for="(item, index) in datasetList" :key="index">
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
+            <CardBox
+              :title="item.name"
+              :description="item.desc"
+              class="cursor"
+              @click="router.push({ path: `/dataset/${item.id}/document` })"
+            >
+              <template #mouseEnter>
+                <el-tooltip effect="dark" content="删除" placement="top">
+                  <el-button text @click.stop="deleteDateset(item)" class="delete-button">
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </el-tooltip>
+              </template>
 
-            <template #footer>
-              <div class="footer-content">
-                <span class="bold">{{ item?.document_count || 0 }}</span>
-                文档<el-divider direction="vertical" />
-                <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
-                字符<el-divider direction="vertical" />
-                <span class="bold">{{ item?.application_mapping_count || 0 }}</span>
-                关联应用
-              </div>
-            </template>
-          </CardBox>
-        </el-col>
+              <template #footer>
+                <div class="footer-content">
+                  <span class="bold">{{ item?.document_count || 0 }}</span>
+                  文档<el-divider direction="vertical" />
+                  <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
+                  字符<el-divider direction="vertical" />
+                  <span class="bold">{{ item?.application_mapping_count || 0 }}</span>
+                  关联应用
+                </div>
+              </template>
+            </CardBox>
+          </el-col>
+        </template>
       </el-row>
+      <div style="padding: 16px 10px">
+        <el-divider class="custom-divider" v-if="datasetList.length > 0 && loading">
+          <el-text type="info"> 加载中...</el-text>
+        </el-divider>
+        <el-divider class="custom-divider" v-if="noMore">
+          <el-text type="info"> 到底啦！</el-text>
+        </el-divider>
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, computed } from 'vue'
 import datasetApi from '@/api/dataset'
-import type { pageRequest } from '@/api/type/common'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { useRouter } from 'vue-router'
 import { numberFormat } from '@/utils/utils'
@@ -70,17 +70,34 @@ const router = useRouter()
 
 const loading = ref(false)
 const datasetList = ref<any[]>([])
-const disabledScroll = ref(false)
-const pageConfig = reactive<pageRequest>({
+const pageConfig = reactive({
   current_page: 1,
   page_size: 20,
-  name: ''
+  total: 0
 })
 
-function loadDataset() {}
+const searchValue = ref('')
 
-function search() {
+const noMore = computed(
+  () =>
+    datasetList.value.length > 0 &&
+    datasetList.value.length === pageConfig.total &&
+    pageConfig.total > 20
+)
+const disabledScroll = computed(
+  () => datasetList.value.length > 0 && (loading.value || noMore.value)
+)
+
+function loadDataset() {
+  if (pageConfig.total > pageConfig.page_size) {
+    pageConfig.current_page += 1
+    getList()
+  }
+}
+
+function searchHandle() {
   pageConfig.current_page = 1
+  datasetList.value = []
   getList()
 }
 
@@ -109,15 +126,11 @@ function deleteDateset(row: any) {
 }
 
 function getList() {
-  loading.value = true
   datasetApi
-    .getDateset(pageConfig)
+    .getDateset(pageConfig, searchValue.value && { name: searchValue.value }, loading)
     .then((res) => {
-      datasetList.value = res.data?.records
-      loading.value = false
-    })
-    .catch(() => {
-      loading.value = false
+      pageConfig.total = res.data.total
+      datasetList.value = [...datasetList.value, ...res.data.records]
     })
 }
 

ui/src/views/paragraph/index.vue

@@ -26,7 +26,7 @@
       <el-scrollbar>
         <div class="document-detail-height" v-loading="pageConfig.current_page === 1 && loading">
           <el-empty v-if="paragraphDetail.length == 0" description="暂无数据" />
-          <el-row v-else v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledLoad">
+          <el-row v-else v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
             <el-col
               :xs="24"
               :sm="12"
@@ -111,15 +111,20 @@ const pageConfig = reactive({
 })
 
 const noMore = computed(
-  () => paragraphDetail.value.length > 0 && paragraphDetail.value.length === pageConfig.total
+  () =>
+    paragraphDetail.value.length > 0 &&
+    paragraphDetail.value.length === pageConfig.total &&
+    pageConfig.total > 20
 )
-const disabledLoad = computed(
+const disabledScroll = computed(
   () => paragraphDetail.value.length > 0 && (loading.value || noMore.value)
 )
 
 function loadDataset() {
-  pageConfig.current_page += 1
-  getParagraphList()
+  if (pageConfig.total > pageConfig.page_size) {
+    pageConfig.current_page += 1
+    getParagraphList()
+  }
 }
 
 function searchHandle() {