From bb11b9bdc1a366051426bd8385a1cd35aec997f0 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 11 Dec 2023 10:35:26 +0800
Subject: [PATCH] feat:

---
 ui/src/components/index.ts                    |   2 +
 ui/src/components/infinite-scroll/index.vue   |  64 +++++++
 ui/src/styles/app.scss                        |   6 -
 ui/src/views/application/index.vue            | 161 ++++++++----------
 ui/src/views/dataset/index.vue                | 101 ++++++-----
 .../views/log/component/ChatRecordDrawer.vue  |  60 +++----
 ui/src/views/log/index.vue                    |  66 +++----
 ui/src/views/paragraph/index.vue              | 132 +++++++-------
 8 files changed, 291 insertions(+), 301 deletions(-)
 create mode 100644 ui/src/components/infinite-scroll/index.vue

diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 103d701f5..4502e9033 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -16,6 +16,7 @@ import MarkdownRenderer from './markdown-renderer/index.vue'
 import dynamicsForm from './dynamics-form'
 import CardCheckbox from './card-checkbox/index.vue'
 import AiChat from './ai-chat/index.vue'
+import InfiniteScroll from './infinite-scroll/index.vue'
 
 export default {
   install(app: App) {
@@ -36,5 +37,6 @@ export default {
     app.component(MarkdownRenderer.name, MarkdownRenderer)
     app.component(CardCheckbox.name, CardCheckbox)
     app.component(AiChat.name, AiChat)
+    app.component(InfiniteScroll.name, InfiniteScroll)
   }
 }
diff --git a/ui/src/components/infinite-scroll/index.vue b/ui/src/components/infinite-scroll/index.vue
new file mode 100644
index 000000000..bfb26cee9
--- /dev/null
+++ b/ui/src/components/infinite-scroll/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
+    <slot />
+  </div>
+  <div style="padding: 16px 10px">
+    <el-divider v-if="size > 0 && loading">
+      <el-text type="info"> 加载中...</el-text>
+    </el-divider>
+    <el-divider v-if="noMore">
+      <el-text type="info"> 到底啦！</el-text>
+    </el-divider>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+defineOptions({ name: 'InfiniteScroll' })
+const props = defineProps({
+  /**
+   * 对象数量
+   */
+  size: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * 总数
+   */
+  total: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * 总数
+   */
+  page_size: {
+    type: Number,
+    default: 0
+  },
+  current_page: {
+    type: Number,
+    default: 0
+  },
+  loading: Boolean
+})
+
+const emit = defineEmits(['update:current_page', 'load'])
+const current = ref(props.current_page)
+
+const noMore = computed(
+  () =>
+    props.size > 0 && props.size === props.total && props.total > props.page_size && !props.loading
+)
+const disabledScroll = computed(() => props.size > 0 && (props.loading || noMore.value))
+
+function loadDataset() {
+  if (props.total > props.page_size) {
+    current.value += 1
+    emit('update:current_page', current)
+    emit('load')
+  }
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index e0ed00e1f..84be6f417 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -432,9 +432,3 @@ h4 {
   }
 }
 
-.custom-divider {
-  .el-divider__text {
-    background: var(--app-layout-bg-color);
-  }
-}
-
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 8f0cffd47..8ce465225 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -10,77 +10,74 @@
         class="w-240"
       />
     </div>
-    <div v-loading.fullscreen.lock="pageConfig.current_page === 1 && loading">
-      <el-row
-        :gutter="15"
-        v-infinite-scroll="loadDataset"
-        :infinite-scroll-disabled="disabledScroll"
+    <div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading">
+      <InfiniteScroll
+        :size="applicationList.length"
+        :total="paginationConfig.total"
+        :page_size="paginationConfig.page_size"
+        v-model:current_page="paginationConfig.current_page"
+        @load="getList"
+        :loading="loading"
       >
-        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
-          <CardAdd title="创建应用" @click="router.push({ path: '/application/create' })" />
-        </el-col>
-        <el-col
-          :xs="24"
-          :sm="12"
-          :md="8"
-          :lg="6"
-          :xl="4"
-          v-for="(item, index) in applicationList"
-          :key="index"
-          class="mb-16"
-        >
-          <CardBox
-            :title="item.name"
-            :description="item.desc"
-            class="application-card cursor"
-            @click="router.push({ path: `/application/${item.id}/overview` })"
+        <el-row :gutter="15">
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
+            <CardAdd title="创建应用" @click="router.push({ path: '/application/create' })" />
+          </el-col>
+          <el-col
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="4"
+            v-for="(item, index) in applicationList"
+            :key="index"
+            class="mb-16"
           >
-            <template #icon>
-              <AppAvatar
-                v-if="item.name"
-                :name="item.name"
-                pinyinColor
-                class="mr-12"
-                shape="square"
-                :size="32"
-              />
-            </template>
+            <CardBox
+              :title="item.name"
+              :description="item.desc"
+              class="application-card cursor"
+              @click="router.push({ path: `/application/${item.id}/overview` })"
+            >
+              <template #icon>
+                <AppAvatar
+                  v-if="item.name"
+                  :name="item.name"
+                  pinyinColor
+                  class="mr-12"
+                  shape="square"
+                  :size="32"
+                />
+              </template>
 
-            <template #footer>
-              <div class="footer-content">
-                <el-tooltip effect="dark" content="演示" placement="top">
-                  <el-button text @click.stop @click="getAccessToken(item.id)">
-                    <AppIcon iconName="app-view"></AppIcon>
-                  </el-button>
-                </el-tooltip>
-                <el-divider direction="vertical" />
-                <el-tooltip effect="dark" content="设置" placement="top">
-                  <el-button
-                    text
-                    @click.stop="router.push({ path: `/application/${item.id}/setting` })"
-                  >
-                    <AppIcon iconName="Setting"></AppIcon>
-                  </el-button>
-                </el-tooltip>
-                <el-divider direction="vertical" />
-                <el-tooltip effect="dark" content="删除" placement="top">
-                  <el-button text @click.stop="deleteApplication(item)">
-                    <el-icon><Delete /></el-icon>
-                  </el-button>
-                </el-tooltip>
-              </div>
-            </template>
-          </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>
+              <template #footer>
+                <div class="footer-content">
+                  <el-tooltip effect="dark" content="演示" placement="top">
+                    <el-button text @click.stop @click="getAccessToken(item.id)">
+                      <AppIcon iconName="app-view"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                  <el-divider direction="vertical" />
+                  <el-tooltip effect="dark" content="设置" placement="top">
+                    <el-button
+                      text
+                      @click.stop="router.push({ path: `/application/${item.id}/setting` })"
+                    >
+                      <AppIcon iconName="Setting"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                  <el-divider direction="vertical" />
+                  <el-tooltip effect="dark" content="删除" placement="top">
+                    <el-button text @click.stop="deleteApplication(item)">
+                      <el-icon><Delete /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </div>
+              </template>
+            </CardBox>
+          </el-col>
+        </el-row>
+      </InfiniteScroll>
     </div>
   </div>
 </template>
@@ -97,7 +94,7 @@ const loading = ref(false)
 
 const applicationList = ref<any[]>([])
 
-const pageConfig = reactive({
+const paginationConfig = reactive({
   current_page: 1,
   page_size: 20,
   total: 0
@@ -108,30 +105,20 @@ const searchValue = ref('')
 const noMore = computed(
   () =>
     applicationList.value.length > 0 &&
-    applicationList.value.length === pageConfig.total &&
-    pageConfig.total > 20 &&
+    applicationList.value.length === paginationConfig.total &&
+    paginationConfig.total > 20 &&
     !loading.value
 )
-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
+  paginationConfig.total = 0
+  paginationConfig.current_page = 1
   applicationList.value = []
   getList()
 }
 function getAccessToken(id: string) {
-  application.asyncGetAccessToken(id, loading).then((res:any) => {
-      window.open(application.location + res?.data?.access_token)
+  application.asyncGetAccessToken(id, loading).then((res: any) => {
+    window.open(application.location + res?.data?.access_token)
   })
 }
 
@@ -158,10 +145,10 @@ function deleteApplication(row: any) {
 
 function getList() {
   applicationApi
-    .getApplication(pageConfig, searchValue.value && { name: searchValue.value }, loading)
+    .getApplication(paginationConfig, searchValue.value && { name: searchValue.value }, loading)
     .then((res) => {
       applicationList.value = [...applicationList.value, ...res.data.records]
-      pageConfig.total = res.data.total
+      paginationConfig.total = res.data.total
     })
 }
 
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index a2aa96c2d..ff631f7e1 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -10,53 +10,50 @@
         class="w-240"
       />
     </div>
-    <div v-loading.fullscreen.lock="pageConfig.current_page === 1 && loading">
-      <el-row
-        :gutter="15"
-        v-infinite-scroll="loadDataset"
-        :infinite-scroll-disabled="disabledScroll"
+    <div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading">
+      <InfiniteScroll
+        :size="datasetList.length"
+        :total="paginationConfig.total"
+        :page_size="paginationConfig.page_size"
+        v-model:current_page="paginationConfig.current_page"
+        @load="getList"
+        :loading="loading"
       >
-        <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>
-        <template v-for="(item, index) in datasetList" :key="index">
+        <el-row :gutter="15">
           <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>
+            <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
           </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>
+          <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>
+        </el-row>
+      </InfiniteScroll>
     </div>
   </div>
 </template>
@@ -70,7 +67,7 @@ const router = useRouter()
 
 const loading = ref(false)
 const datasetList = ref<any[]>([])
-const pageConfig = reactive({
+const paginationConfig = reactive({
   current_page: 1,
   page_size: 20,
   total: 0
@@ -81,8 +78,8 @@ const searchValue = ref('')
 const noMore = computed(
   () =>
     datasetList.value.length > 0 &&
-    datasetList.value.length === pageConfig.total &&
-    pageConfig.total > 20 &&
+    datasetList.value.length === paginationConfig.total &&
+    paginationConfig.total > 20 &&
     !loading.value
 )
 const disabledScroll = computed(
@@ -90,14 +87,14 @@ const disabledScroll = computed(
 )
 
 function loadDataset() {
-  if (pageConfig.total > pageConfig.page_size) {
-    pageConfig.current_page += 1
+  if (paginationConfig.total > paginationConfig.page_size) {
+    paginationConfig.current_page += 1
     getList()
   }
 }
 
 function searchHandle() {
-  pageConfig.current_page = 1
+  paginationConfig.current_page = 1
   datasetList.value = []
   getList()
 }
@@ -129,9 +126,9 @@ function deleteDateset(row: any) {
 
 function getList() {
   datasetApi
-    .getDateset(pageConfig, searchValue.value && { name: searchValue.value }, loading)
+    .getDateset(paginationConfig, searchValue.value && { name: searchValue.value }, loading)
     .then((res) => {
-      pageConfig.total = res.data.total
+      paginationConfig.total = res.data.total
       datasetList.value = [...datasetList.value, ...res.data.records]
     })
 }
diff --git a/ui/src/views/log/component/ChatRecordDrawer.vue b/ui/src/views/log/component/ChatRecordDrawer.vue
index 68d0c4a2e..d09966be0 100644
--- a/ui/src/views/log/component/ChatRecordDrawer.vue
+++ b/ui/src/views/log/component/ChatRecordDrawer.vue
@@ -14,26 +14,21 @@
       class="h-full"
       style="padding: 24px 0"
     >
-      <div v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
+      <InfiniteScroll
+        :size="recordList.length"
+        :total="paginationConfig.total"
+        :page_size="paginationConfig.page_size"
+        v-model:current_page="paginationConfig.current_page"
+        @load="getChatRecord"
+        :loading="loading"
+      >
         <AiChat :data="application" :record="recordList" log></AiChat>
-      </div>
-      <div style="padding: 16px 10px">
-        <el-divider class="custom-divider" v-if="recordList.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>
+      </InfiniteScroll>
     </div>
     <template #footer>
       <div>
-        <el-button @click="pre" :disabled="pre_disable != undefined ? pre_disable : false"
-          >上一条</el-button
-        >
-        <el-button @click="next" :disabled="next_disable != undefined ? next_disable : false"
-          >下一条</el-button
-        >
+        <el-button @click="pre" :disabled="pre_disable || loading">上一条</el-button>
+        <el-button @click="next" :disabled="next_disable || loading">下一条</el-button>
       </div>
     </template>
   </el-drawer>
@@ -54,7 +49,7 @@ const props = withDefaults(
     /**
      * 对话 记录id
      */
-    id?: string
+    chartId?: string
     /**
      * 下一条
      */
@@ -71,7 +66,7 @@ const props = withDefaults(
   {}
 )
 
-defineEmits(['update:id'])
+defineEmits(['update:chartId'])
 
 const route = useRoute()
 const {
@@ -83,37 +78,19 @@ const recordList = ref<chatType[]>([])
 
 const paginationConfig = reactive({
   current_page: 1,
-  page_size: 20,
+  page_size: 10,
   total: 0
 })
 
-const noMore = computed(
-  () =>
-    recordList.value.length > 0 &&
-    recordList.value.length === paginationConfig.total &&
-    paginationConfig.total > 20 &&
-    !loading.value
-)
-const disabledScroll = computed(
-  () => recordList.value.length > 0 && (loading.value || noMore.value)
-)
-
 function closeHandel() {
   recordList.value = []
   paginationConfig.total = 0
   paginationConfig.current_page = 1
 }
 
-function loadDataset() {
-  if (paginationConfig.total > paginationConfig.page_size) {
-    paginationConfig.current_page += 1
-    getChatRecord()
-  }
-}
-
 function getChatRecord() {
-  if (props.id && visible.value) {
-    logApi.getChatRecordLog(id as string, props.id, paginationConfig, loading).then((res) => {
+  if (props.chartId && visible.value) {
+    logApi.getChatRecordLog(id as string, props.chartId, paginationConfig, loading).then((res) => {
       paginationConfig.total = res.data.total
       recordList.value = [...recordList.value, ...res.data.records]
     })
@@ -121,7 +98,7 @@ function getChatRecord() {
 }
 
 watch(
-  () => props.id,
+  () => props.chartId,
   () => {
     recordList.value = []
     paginationConfig.total = 0
@@ -145,5 +122,8 @@ defineExpose({
     background: var(--app-layout-bg-color);
     padding: 0;
   }
+  .el-divider__text {
+    background: var(--app-layout-bg-color);
+  }
 }
 </style>
diff --git a/ui/src/views/log/index.vue b/ui/src/views/log/index.vue
index 4a448ec51..31b86623d 100644
--- a/ui/src/views/log/index.vue
+++ b/ui/src/views/log/index.vue
@@ -67,7 +67,7 @@
       :next="nextChatRecord"
       :pre="preChatRecord"
       ref="ChatRecordRef"
-      v-model:id="currentChatId"
+      v-model:chartId="currentChatId"
       :application="detail"
       :pre_disable="pre_disable"
       :next_disable="next_disable"
@@ -108,6 +108,27 @@ const dayOptions = [
   }
 ]
 
+const ChatRecordRef = ref()
+const loading = ref(false)
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+const tableData = ref<any[]>([])
+const tableIndexMap = computed<Dict<number>>(() => {
+  return tableData.value
+    .map((row, index) => ({
+      [row.id]: index
+    }))
+    .reduce((pre, next) => ({ ...pre, ...next }), {})
+})
+const history_day = ref(7)
+const search = ref('')
+const detail = ref<any>(null)
+
+const currentChatId = ref<string>('')
+
 /**
  * 下一页
  */
@@ -118,7 +139,6 @@ const nextChatRecord = () => {
       index + (paginationConfig.current_page - 1) * paginationConfig.page_size >=
       paginationConfig.total - 1
     ) {
-      MsgError('没有更多了')
       return
     }
     paginationConfig.current_page = paginationConfig.current_page + 1
@@ -151,7 +171,6 @@ const preChatRecord = () => {
 
   if (index < 0) {
     if (paginationConfig.current_page <= 1) {
-      MsgError('到头了')
       return
     }
     paginationConfig.current_page = paginationConfig.current_page - 1
@@ -164,47 +183,6 @@ const preChatRecord = () => {
   }
 }
 
-const ChatRecordRef = ref()
-const loading = ref(false)
-const paginationConfig = reactive({
-  current_page: 1,
-  page_size: 20,
-  total: 0
-})
-const tableData = ref<any[]>([])
-const tableIndexMap = computed<Dict<number>>(() => {
-  return tableData.value
-    .map((row, index) => ({
-      [row.id]: index
-    }))
-    .reduce((pre, next) => ({ ...pre, ...next }), {})
-})
-const history_day = ref(7)
-const search = ref('')
-const detail = ref<any>(null)
-
-const currentChatId = ref<string>('')
-
-function isFirst(index: number) {
-  if (index === 0 && paginationConfig.current_page === 1) {
-    return true
-  } else {
-    return false
-  }
-}
-
-function isLast(index: number) {
-  console.log((paginationConfig.current_page - 1) * paginationConfig.page_size + index + 1)
-  if (
-    (paginationConfig.current_page - 1) * paginationConfig.page_size + index + 1 ===
-    paginationConfig.total
-  ) {
-    return true
-  } else {
-    return false
-  }
-}
-
 function rowClickHandle(row: any) {
   currentChatId.value = row.id
   ChatRecordRef.value.open()
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index 34b0e3f5b..7b12fec74 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -5,9 +5,12 @@
         <el-button @click="addParagraph" type="primary" :disabled="loading"> 添加分段 </el-button>
       </div>
     </template>
-    <div class="document-detail__main p-16" v-loading="pageConfig.current_page === 1 && loading">
+    <div
+      class="document-detail__main p-16"
+      v-loading="paginationConfig.current_page === 1 && loading"
+    >
       <div class="flex-between p-8">
-        <span>{{ pageConfig.total }} 段落</span>
+        <span>{{ paginationConfig.total }} 段落</span>
         <el-input
           v-model="search"
           placeholder="搜索"
@@ -26,55 +29,58 @@
       <el-scrollbar>
         <div class="document-detail-height">
           <el-empty v-if="paragraphDetail.length == 0" description="暂无数据" />
-          <el-row v-else v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
-            <el-col
-              :xs="24"
-              :sm="12"
-              :md="8"
-              :lg="6"
-              :xl="6"
-              v-for="(item, index) in paragraphDetail"
-              :key="index"
-              class="p-8"
-            >
-              <CardBox
-                shadow="hover"
-                :title="item.title || '-'"
-                :description="item.content"
-                class="document-card cursor"
-                :class="item.is_active ? '' : 'disabled'"
-                :showIcon="false"
-                @click="editParagraph(item)"
-              >
-                <div class="active-button" @click.stop>
-                  <el-switch
-                    v-model="item.is_active"
-                    @change="changeState($event, item)"
-                    size="small"
-                  />
-                </div>
 
-                <template #footer>
-                  <div class="footer-content flex-between">
-                    <span> {{ numberFormat(item?.content.length) || 0 }} 个 字符 </span>
-                    <el-tooltip effect="dark" content="删除" placement="top">
-                      <el-button text @click.stop="deleteParagraph(item)" class="delete-button">
-                        <el-icon><Delete /></el-icon>
-                      </el-button>
-                    </el-tooltip>
+          <InfiniteScroll
+            v-else
+            :size="paragraphDetail.length"
+            :total="paginationConfig.total"
+            :page_size="paginationConfig.page_size"
+            v-model:current_page="paginationConfig.current_page"
+            @load="getParagraphList"
+            :loading="loading"
+          >
+            <el-row>
+              <el-col
+                :xs="24"
+                :sm="12"
+                :md="8"
+                :lg="6"
+                :xl="6"
+                v-for="(item, index) in paragraphDetail"
+                :key="index"
+                class="p-8"
+              >
+                <CardBox
+                  shadow="hover"
+                  :title="item.title || '-'"
+                  :description="item.content"
+                  class="document-card cursor"
+                  :class="item.is_active ? '' : 'disabled'"
+                  :showIcon="false"
+                  @click="editParagraph(item)"
+                >
+                  <div class="active-button" @click.stop>
+                    <el-switch
+                      v-model="item.is_active"
+                      @change="changeState($event, item)"
+                      size="small"
+                    />
                   </div>
-                </template>
-              </CardBox>
-            </el-col>
-          </el-row>
-          <div style="padding: 16px 10px">
-            <el-divider v-if="paragraphDetail.length > 0 && loading">
-              <el-text type="info"> 加载中...</el-text>
-            </el-divider>
-            <el-divider v-if="noMore">
-              <el-text type="info"> 到底啦！</el-text>
-            </el-divider>
-          </div>
+
+                  <template #footer>
+                    <div class="footer-content flex-between">
+                      <span> {{ numberFormat(item?.content.length) || 0 }} 个 字符 </span>
+                      <el-tooltip effect="dark" content="删除" placement="top">
+                        <el-button text @click.stop="deleteParagraph(item)" class="delete-button">
+                          <el-icon><Delete /></el-icon>
+                        </el-button>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </CardBox>
+              </el-col>
+            </el-row>
+          </InfiniteScroll>
         </div>
       </el-scrollbar>
     </div>
@@ -104,32 +110,14 @@ const title = ref('')
 const search = ref('')
 const searchType = ref('title')
 
-const pageConfig = reactive({
+const paginationConfig = reactive({
   current_page: 1,
   page_size: 20,
   total: 0
 })
 
-const noMore = computed(
-  () =>
-    paragraphDetail.value.length > 0 &&
-    paragraphDetail.value.length === pageConfig.total &&
-    pageConfig.total > 20 &&
-    !loading.value
-)
-const disabledScroll = computed(
-  () => paragraphDetail.value.length > 0 && (loading.value || noMore.value)
-)
-
-function loadDataset() {
-  if (pageConfig.total > pageConfig.page_size) {
-    pageConfig.current_page += 1
-    getParagraphList()
-  }
-}
-
 function searchHandle() {
-  pageConfig.current_page = 1
+  paginationConfig.current_page = 1
   paragraphDetail.value = []
   getParagraphList()
 }
@@ -191,13 +179,13 @@ function getParagraphList() {
     .getParagraph(
       id,
       documentId,
-      pageConfig,
+      paginationConfig,
       search.value && { [searchType.value]: search.value },
       loading
     )
     .then((res) => {
       paragraphDetail.value = [...paragraphDetail.value, ...res.data.records]
-      pageConfig.total = res.data.total
+      paginationConfig.total = res.data.total
     })
 }
 
@@ -206,7 +194,7 @@ function refresh(data: any) {
     const index = paragraphDetail.value.findIndex((v) => v.id === data.id)
     paragraphDetail.value.splice(index, 1, data)
   } else {
-    pageConfig.current_page = 1
+    paginationConfig.current_page = 1
     paragraphDetail.value = []
     getParagraphList()
   }