优化部分显示效果；新增页脚自定义传送门；管理端新增一键下载与全选功能

MarSeventh · Oct 20, 2024 · 13a721d · 13a721d
1 parent 432c3b1
commit 13a721d
Show file tree

Hide file tree

Showing 6 changed files with 188 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "element-plus": "^2.8.2",
     "http-proxy-middleware": "^3.0.2",
     "image-conversion": "^2.1.1",
+    "jszip": "^3.10.1",
     "vue": "^3.2.13",
     "vue-cookies": "^1.8.4",
     "vue-router": "^4.4.3",

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -1,9 +1,27 @@
 <template>
     <div class="page-footer">
-        <p>© 2024 Designed by <a class="footer-name" href="https://github.com/MarSeventh" target="_blank">SanyueQi</a> for You!</p>
+        <p>© 2024 Designed by <a class="footer-name" href="https://github.com/MarSeventh" target="_blank">SanyueQi</a> for You!
+            <a :href="footerLink" target="_blank">
+                <font-awesome-icon icon="paper-plane" class="footer-link-icon"/>
+            </a>
+        </p>
     </div>
 </template>
 
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'Footer',
+    computed: {
+        ...mapGetters(['userConfig']),
+        footerLink() {
+            return this.userConfig?.footerLink || 'https://sanyue.site'
+        }
+    }
+}
+</script>
+
 <style scoped>
 .page-footer {
    position: fixed;
@@ -21,4 +39,8 @@
     font-weight: bold;
     text-decoration: none;
 }
+.footer-link-icon {
+    color: antiquewhite;
+    margin-left: 5px;
+}
 </style>
diff --git a/src/components/UploadForm.vue b/src/components/UploadForm.vue
@@ -59,7 +59,7 @@
                             </el-button-group>
                         </div>
                     </div>
-                    <div class="upload-list-item" v-for="file in fileList" :key="file.name" :span="8">
+                    <div class="upload-list-item" v-for="file in fileList.slice().reverse()" :key="file.name" :span="8">
                         <a :href="file.url" target="_blank">
                             <!-- 判断文件类型是否为视频 -->
                             <video
@@ -172,7 +172,8 @@ watch: {
             if (this.fileList.length > this.fileListLength) {
                 this.$nextTick(() => {
                     setTimeout(() => {
-                        this.$refs.scrollContainer.setScrollTop(this.$refs.scrollContainer.wrapRef.scrollHeight)
+                        // this.$refs.scrollContainer.setScrollTop(this.$refs.scrollContainer.wrapRef.scrollHeight) // 滚动到底部
+                        this.$refs.scrollContainer.setScrollTop(0) // 滚动到顶部
                     }, 100)
                 })
             }

diff --git a/src/views/AdminDashBoard.vue b/src/views/AdminDashBoard.vue
@@ -24,11 +24,31 @@
                         </template>
                     </el-dropdown>
                 </el-tooltip>
-                <el-tooltip :disabled="disableTooltip" content="批量复制" placement="bottom">
-                    <font-awesome-icon icon="link" class="header-icon" :class="{ disabled: selectedFiles.length === 0 }" @click="handleBatchCopy"></font-awesome-icon>
+                <el-tooltip :disabled="disableTooltip" content="全选此页" placement="bottom">
+                    <font-awesome-icon :icon="selectPageIcon" class="header-icon" @click="handleSelectPage"></font-awesome-icon>
                 </el-tooltip>
-                <el-tooltip :disabled="disableTooltip" content="批量删除" placement="bottom">
-                    <font-awesome-icon icon="trash-alt" class="header-icon" :class="{ disabled: selectedFiles.length === 0 }" @click="handleBatchDelete"></font-awesome-icon>
+                <el-tooltip :disabled="disableTooltip" content="批量处理" placement="bottom">
+                    <el-dropdown @command="handleBatchAction" :hide-on-click="false" :disabled="selectedFiles.length === 0">
+                        <span class="el-dropdown-link">
+                            <font-awesome-icon icon="ellipsis-h" class="header-icon" :class="{ disabled: selectedFiles.length === 0 }"></font-awesome-icon>
+                        </span>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item command="copy">
+                                    <font-awesome-icon icon="copy" style="margin-right: 5px;"></font-awesome-icon>
+                                    批量复制
+                                </el-dropdown-item>
+                                <el-dropdown-item command="delete">
+                                    <font-awesome-icon icon="trash-alt" style="margin-right: 5px;"></font-awesome-icon>
+                                    批量删除
+                                </el-dropdown-item>
+                                <el-dropdown-item command="download">
+                                    <font-awesome-icon icon="download" style="margin-right: 5px;"></font-awesome-icon>
+                                    批量下载
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
                 </el-tooltip>
                 <el-tooltip :disabled="disableTooltip" content="用户管理" placement="bottom">
                     <font-awesome-icon icon="user-cog" class="header-icon" @click="handleGoToAdmin"></font-awesome-icon>
@@ -141,6 +161,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import JSZip from 'jszip';
 
 export default {
 data() {
@@ -156,7 +177,7 @@ data() {
         isUploading: false,
         showdetailDialog: false,
         detailFile: null,
-        activeUrlTab: 'originUrl',
+        activeUrlTab: 'originUrl'
     }
 },
 computed: {
@@ -211,12 +232,19 @@ computed: {
     },
     disableTooltip() {
         return window.innerWidth < 768;
+    },
+    selectPage() {
+        // 如果当前页所有文件都被选中，则返回 true，否则返回 false
+        return this.paginatedTableData.every(file => file.selected);
+    },
+    selectPageIcon() {
+        return this.selectPage ? 'check-square' : 'square';
     }
 },
 watch: {
     tableData: {
         handler(newData) {
-        this.selectedFiles = newData.filter(file => file.selected);
+            this.selectedFiles = newData.filter(file => file.selected);
         },
         deep: true
     },
@@ -464,6 +492,60 @@ methods: {
     handleLogout() {
         this.$store.commit('setCredentials', null);
         this.$router.push('/adminLogin');
+    },
+    handleSelectPage() {
+        if (this.selectPage) {
+            this.paginatedTableData.forEach(file => file.selected = false);
+        } else {
+            this.paginatedTableData.forEach(file => file.selected = true);
+        }
+    },
+    handleBatchAction(command) {
+        if (command === 'copy') {
+            this.handleBatchCopy();
+        } else if (command === 'delete') {
+            this.handleBatchDelete();
+        } else if (command === 'download') {
+            this.handleBatchDownload();
+        }
+    },
+    handleBatchDownload() {
+        // 将选中文件打包成 zip 文件下载
+        const zip = new JSZip();
+        const folder = zip.folder('files');
+        // 构造Promise数组，等待所有文件下载完成后再打包
+        const fileNameCount = {}; // 用于跟踪文件名出现的次数
+
+        const downloadPromises = this.selectedFiles.map(file => {
+            return fetch(`/file/${file.name}`)
+                .then(response => response.blob())
+                .then(blob => {
+                    // 检查文件名是否已经存在
+                    let fileName = file.metadata?.FileName || file.name;
+                    if (fileNameCount[fileName]) {
+                        // 如果已经存在，则在文件名后加上编号
+                        const extension = fileName.substring(fileName.lastIndexOf('.'));
+                        const baseName = fileName.substring(0, fileName.lastIndexOf('.'));
+                        fileName = `${baseName}(${fileNameCount[fileName]})${extension}`;
+                        fileNameCount[file.name]++;
+                    } else {
+                        // 如果不存在，则初始化为1
+                        fileNameCount[fileName] = 1;
+                    }
+
+                    // 将文件添加到 zip 文件夹中
+                    folder.file(fileName, blob);
+                });
+        });
+
+        Promise.all(downloadPromises)
+            .then(() => zip.generateAsync({ type: 'blob' }))
+            .then(blob => {
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(blob);
+                link.download = 'files.zip';
+                link.click();
+            });
     }
 },
 mounted() {
@@ -807,4 +889,4 @@ mounted() {
 :focus-visible {
     outline: none;
 }
-</style>
+</style>, { file }
diff --git a/src/views/UploadHome.vue b/src/views/UploadHome.vue
@@ -84,6 +84,8 @@
                     <br/>2.客户端压缩指上传前压缩，服务端压缩指Telegram端压缩
                     <br/>3.若图片大小>10MB，或压缩后图片大小>10MB，服务端压缩将自动失效
                     <br/>4.若图片大小>20MB，将自动进行客户端压缩
+                    <br/>5.若想要存储的图片和原图完全一致，可以将两个压缩设置均设置为关闭
+                    <br/>6.若上传分辨率过大、透明背景等图片，建议关闭服务端压缩，否则可能出现未知问题
                 </p>
                 <div class="dialog-action">
                     <el-button type="primary" @click="showCompressDialog = false">确定</el-button>