From 67f508c7daeed1c416a110d18c11ecf9311e005b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E5=8F=8C=E6=98=8E?= <husm@pvc123.com>
Date: Tue, 10 Sep 2024 18:14:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20210=20AI=E5=AF=B9=E8=AF=9D=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=96=87=E4=BB=B6=E5=88=97=E8=A1=A8=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue                   |   3 +-
 web/src/components/FileSelect.vue | 122 ++++++++++++++++++++----------
 2 files changed, 82 insertions(+), 43 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 059f4ffe..b94eed26 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -66,7 +66,8 @@ html, body {
     margin 0;
 
     .el-dialog__body {
-      max-height 90vh
+      max-height 80vh
+      overflow-y auto
     }
   }
 }
diff --git a/web/src/components/FileSelect.vue b/web/src/components/FileSelect.vue
index d340c460..de1f8739 100644
--- a/web/src/components/FileSelect.vue
+++ b/web/src/components/FileSelect.vue
@@ -1,57 +1,64 @@
 <template>
   <el-container class="file-select-box">
-    <a class="file-upload-img" @click="fetchFiles">
+    <a class="file-upload-img" @click="fetchFiles(1)">
       <i class="iconfont icon-attachment-st"></i>
     </a>
     <el-dialog
+        class="file-list-dialog"
         v-model="show"
         :close-on-click-modal="true"
         :show-close="true"
         :width="800"
         title="文件管理"
     >
-
-      <div class="file-list">
-        <el-row :gutter="20">
-          <el-col :span="3">
-            <div class="grid-content">
-              <el-upload
-                  class="avatar-uploader"
-                  :auto-upload="true"
-                  :show-file-list="false"
-                  :http-request="afterRead"
-                  accept=".doc,.docx,.jpg,.png,.jpeg,.xls,.xlsx,.ppt,.pptx,.pdf,.mp4,.mp3"
-              >
-                <el-icon class="avatar-uploader-icon">
-                  <Plus/>
-                </el-icon>
-              </el-upload>
-            </div>
-          </el-col>
-          <el-col :span="3" v-for="file in fileList" :key="file.url">
-            <div class="grid-content">
-              <el-tooltip
-                  class="box-item"
-                  effect="dark"
-                  :content="file.name"
-                  placement="top">
-                <el-image :src="file.url" fit="cover" v-if="isImage(file.ext)" @click="insertURL(file)"/>
-                <el-image :src="GetFileIcon(file.ext)" fit="cover" v-else @click="insertURL(file)"/>
-              </el-tooltip>
-
-              <div class="opt">
-                <el-button type="danger" size="small" :icon="Delete" @click="removeFile(file)" circle/>
+      <el-scrollbar ref="scrollbarRef" max-height="80vh" style="height: 100%;" @scroll="onScroll">
+        <div class="file-list">
+          <el-row :gutter="20">
+            <el-col :span="3">
+              <div class="grid-content">
+                <el-upload
+                    class="avatar-uploader"
+                    :auto-upload="true"
+                    :show-file-list="false"
+                    :http-request="afterRead"
+                    accept=".doc,.docx,.jpg,.png,.jpeg,.xls,.xlsx,.ppt,.pptx,.pdf,.mp4,.mp3"
+                >
+                  <el-icon class="avatar-uploader-icon">
+                    <Plus/>
+                  </el-icon>
+                </el-upload>
               </div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+            </el-col>
+            <el-col :span="3" v-for="file in fileData.items" :key="file.url">
+              <div class="grid-content">
+                <el-tooltip
+                    class="box-item"
+                    effect="dark"
+                    :content="file.name"
+                    placement="top">
+                  <el-image :src="file.url" fit="cover" v-if="isImage(file.ext)" @click="insertURL(file)"/>
+                  <el-image :src="GetFileIcon(file.ext)" fit="cover" v-else @click="insertURL(file)"/>
+                </el-tooltip>
+
+                <div class="opt">
+                  <el-button type="danger" size="small" :icon="Delete" @click="removeFile(file)" circle/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row justify="center" v-if="!fileData.isLastPage" @click="fetchFiles(fileData.page)">
+            <el-link>加载更多</el-link>
+            
+          </el-row>
+        </div>        
+      </el-scrollbar>
+
     </el-dialog>
   </el-container>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {reactive, ref} from "vue";
 import {ElMessage} from "element-plus";
 import {httpGet, httpPost} from "@/utils/http";
 import {Delete, Plus} from "@element-plus/icons-vue";
@@ -64,15 +71,45 @@ const props = defineProps({
 const emits = defineEmits(['selected']);
 const show = ref(false)
 const fileList = ref([])
+const scrollbarRef = ref(null)
+const fileData = reactive({
+  items:[],
+  page: 1,
+  isLastPage: true,
+})
 
-const fetchFiles = () => {
-  show.value = true
-  httpPost("/api/upload/list").then(res => {
-    fileList.value = res.data
+const fetchFiles = (pageNo) => {
+  if(pageNo === 1) show.value = true
+  httpPost("/api/upload/list", { page: pageNo || 1, page_size: 30 }).then(res => {
+    const { items, page, total_page } = res.data
+
+    if(page === 1){
+      fileData.items = items
+    }else{
+      fileData.items = [...fileData.items, ...items]
+    }
+
+    fileData.isLastPage = (page === total_page)
+
+    if(!fileData.isLastPage){
+      fileData.page = page + 1
+    }
+    
   }).catch(() => {
   })
 }
 
+// el-scrollbar 滚动回调
+const onScroll = (options) => {
+  const wrapRef = scrollbarRef.value.wrapRef
+  scrollbarRef.value.moveY = wrapRef.scrollTop * 100 / wrapRef.clientHeight
+  scrollbarRef.value.moveX = wrapRef.scrollLeft * 100 / wrapRef.clientWidth
+  const poor = wrapRef.scrollHeight - wrapRef.clientHeight
+  // 判断滚动到底部 自动加载数据
+  if (options.scrollTop + 2 >= poor && !fileData.isLastPage) {
+    fetchFiles(fileData.page)
+  }
+}
 
 const afterRead = (file) => {
   const formData = new FormData();
@@ -120,9 +157,10 @@ const insertURL = (file) => {
 
     .el-dialog__body {
       //padding 0
+      overflow hidden
 
       .file-list {
-
+        margin-right 10px
         .grid-content {
           margin-bottom 10px
           position relative