From c3bda54f505d4834167e003b2cddad0c2b9284b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Fri, 15 Aug 2025 16:43:08 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E6=96=87=E4=BB=B6=E7=B1=BB=E5=9E=8B=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=AE=9E=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/system/mediaLibrary/LeftTree.vue     |  26 +-
 src/views/demo/system/mediaLibrary/index.vue  | 290 +++++++++++++-----
 .../system/mediaLibrary/path/pathLeftMenu.vue |  26 +-
 .../preview/previewImageInformation.vue       |  22 +-
 4 files changed, 253 insertions(+), 111 deletions(-)

diff --git a/src/views/demo/system/mediaLibrary/LeftTree.vue b/src/views/demo/system/mediaLibrary/LeftTree.vue
index ae663a2..b6dff1c 100644
--- a/src/views/demo/system/mediaLibrary/LeftTree.vue
+++ b/src/views/demo/system/mediaLibrary/LeftTree.vue
@@ -28,29 +28,33 @@
         name: '媒体库',
         children: [
           {
-            id: 'allResource',
+            id: '',
             name: '全部资源',
           },
           {
-            id: 'wideAngle',
-            name: '广角照片',
+            id: '1',
+            name: '可见光',
+          },
+          {
+            id: '2',
+            name: '红外照片',
           },
           {
-            id: 'zoom',
+            id: '3',
             name: '变焦照片',
           },
           {
-            id: 'infrared',
-            name: '红外照片',
+            id: '4',
+            name: '广角照片',
           },
-          // {
-          //   id: 'alone',
-          //   name: '单拍照片',
-          // },
           {
-            id: 'video',
+            id: '5',
             name: '视频资源',
           },
+          {
+            id: '0',
+            name: '其他文件',
+          },
         ],
       },
     ];
diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index 7b94723..a23a809 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -22,7 +22,7 @@
             </a-button>
             <a-button :icon="h(ColumnHeightOutlined)" @click="moveFolderOrFile">移动</a-button>
             <a-button :icon="h(DeleteOutlined)" @click="deleteFolderOrFile">删除 </a-button>
-            <!-- <a-button :icon="h(DownloadOutlined)" @click="compressFolderOrFile">压缩</a-button> -->
+            <!-- <a-button :icon="h(DownloadOutlined)" @click="downloadFile">批量下载</a-button> -->
             <a-radio-group v-model:value="tableType">
               <a-radio-button value="table"><BarsOutlined /></a-radio-button>
               <a-radio-button value="store"><AppstoreOutlined /></a-radio-button>
@@ -335,6 +335,8 @@
   import { columns, searchFormSchema } from './modal.data';
   import dayjs from 'dayjs';
   import { cloneDeep } from 'lodash-es';
+  import JSZip from 'jszip';
+  import { saveAs } from 'file-saver';
 
   const { VITE_GLOB_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
   const { createConfirm, createMessage } = useMessage();
@@ -348,88 +350,98 @@
   const tableHeight: any = ref(0);
   watch(
     () => tableType.value,
-    (newval) => {
-      // 格子
-      if (newval === 'store') {
-        // 数据
-        let query = { ...searchParams.value, page: 1, limit: 1000 };
-        if (routeFlag.value) {
-          query = {
-            ...query,
-            taskId: route.query.flightId,
-            objectKeyExist: 1,
-          };
-        } else {
-          query = {
-            ...query,
-            parentKey: nowParentKey.value,
-          };
+    () => {
+      // 表格还是文件夹变化
+      getShowTableData();
+    },
+  );
+  function getShowTableData() {
+    // 格子
+    if (tableType.value === 'store') {
+      // 数据
+      let query = { ...searchParams.value, page: 1, limit: 1000 };
+      if (routeFlag.value) {
+        query = {
+          ...query,
+          taskId: route.query.flightId,
+          objectKeyExist: 1,
+        };
+      } else {
+        query = {
+          ...query,
+          // 总目录下展示全部的所选文件类型的文件、单个目录下只显示本文件下的所选文件类型的文件
+          parentKey: searchInfo.type
+            ? nowParentKey.value == '0'
+              ? ''
+              : nowParentKey.value
+            : nowParentKey.value,
+          type: searchInfo.type,
+        };
+      }
+      GetMediaFile(query).then((res) => {
+        showTableData.value = res.items;
+        tableTypeAfterShow.value = tableType.value;
+        // 表格-隐藏
+        const containers = document.querySelectorAll('.ant-table-container');
+        tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
+        if (containers) {
+          containers.forEach((container) => {
+            container.style.display = 'none';
+          });
         }
-        GetMediaFile(query).then((res) => {
-          showTableData.value = res.items;
-          tableTypeAfterShow.value = newval;
-          // 表格-隐藏
-          const containers = document.querySelectorAll('.ant-table-container');
-          tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
-          if (containers) {
-            containers.forEach((container) => {
-              container.style.display = 'none';
-            });
-          }
-          // 分页-隐藏
-          const paginations = document.querySelectorAll('.ant-pagination');
-          if (paginations) {
-            paginations.forEach((pagination) => {
-              pagination.style.display = 'none';
-            });
-          }
-          // 选中：表格→格子
-          let selectRowsIdArray = getSelectRows().map((item) => item.id);
-          showTableData.value.forEach((item) => {
-            if (selectRowsIdArray.includes(item.id)) {
-              item.checked = true;
-              changeStore(
-                {
-                  target: {
-                    checked: true,
-                  },
-                },
-                item,
-              );
-            }
+        // 分页-隐藏
+        const paginations = document.querySelectorAll('.ant-pagination');
+        if (paginations) {
+          paginations.forEach((pagination) => {
+            pagination.style.display = 'none';
           });
-        });
-      }
-      // 表格
-      if (newval === 'table') {
-        reload().then((res) => {
-          tableTypeAfterShow.value = newval;
-          // 表格-显示
-          const containers = document.querySelectorAll('.ant-table-container');
-          tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
-          if (containers) {
-            containers.forEach((container) => {
-              container.style.display = 'block';
-            });
-          }
-          // 分页-显示
-          const paginations = document.querySelectorAll('.ant-pagination');
-          if (paginations) {
-            paginations.forEach((pagination) => {
-              pagination.style.display = 'block';
-            });
+        }
+        // 选中：表格→格子
+        let selectRowsIdArray = getSelectRows().map((item) => item.id);
+        showTableData.value.forEach((item) => {
+          if (selectRowsIdArray.includes(item.id)) {
+            item.checked = true;
+            changeStore(
+              {
+                target: {
+                  checked: true,
+                },
+              },
+              item,
+            );
           }
-          // 选中：格子→表格
-          let selectRowsIdArray = showTableData.value.filter((item) => item.checked);
-          setSelectedRows(selectRowsIdArray);
         });
-      }
-    },
-  );
+      });
+    }
+    // 表格
+    if (tableType.value === 'table') {
+      reload().then((res) => {
+        tableTypeAfterShow.value = tableType.value;
+        // 表格-显示
+        const containers = document.querySelectorAll('.ant-table-container');
+        tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
+        if (containers) {
+          containers.forEach((container) => {
+            container.style.display = 'block';
+          });
+        }
+        // 分页-显示
+        const paginations = document.querySelectorAll('.ant-pagination');
+        if (paginations) {
+          paginations.forEach((pagination) => {
+            pagination.style.display = 'block';
+          });
+        }
+        // 选中：格子→表格
+        let selectRowsIdArray = showTableData.value.filter((item) => item.checked);
+        setSelectedRows(selectRowsIdArray);
+      });
+    }
+  }
 
   // 单选框选择
   const checkNameChecked = ref(false);
-  // 表格or文件夹切换
+  // 表格or文件夹切换-选择框
   function changeStore(e, record) {
     if (typeof record == 'string') {
       if (e.target.checked) {
@@ -545,7 +557,12 @@
           ...data,
           page: tableTypeAfterShow.value == 'table' ? data.page : 1,
           limit: tableTypeAfterShow.value == 'table' ? data.limit : 1000,
-          parentKey: nowParentKey.value,
+          // 总目录下展示全部的所选文件类型的文件、单个目录下只显示本文件下的所选文件类型的文件
+          parentKey: searchInfo.type
+            ? nowParentKey.value == '0'
+              ? ''
+              : nowParentKey.value
+            : nowParentKey.value,
         };
         return temp;
       }
@@ -606,9 +623,15 @@
 
   // 弹窗----------------------------------------------------------------------
   // 左侧目录选择
-  function handleSelect(orgId = '') {
-    searchInfo.orgId = orgId;
-    reload();
+  function handleSelect(type = '') {
+    searchInfo.type = type;
+    // 表格
+    if (tableType.value == 'table') {
+      reload();
+    } else {
+      // 格子
+      getShowTableData();
+    }
   }
   // 刷新表格
   const childRef = ref<any>();
@@ -641,7 +664,13 @@
         } else {
           query = {
             ...query,
-            parentKey: nowParentKey.value,
+            // 总目录下展示全部的所选文件类型的文件、单个目录下只显示本文件下的所选文件类型的文件
+            parentKey: searchInfo.type
+              ? nowParentKey.value == '0'
+                ? ''
+                : nowParentKey.value
+              : nowParentKey.value,
+            type: searchInfo.type,
           };
         }
         GetMediaFile(query).then((res) => {
@@ -725,6 +754,86 @@
     });
   }
 
+  // 批量下载
+  async function downloadFile() {
+    // 获得所选
+    let rows = getSelectRows();
+    if (tableType.value == 'store') {
+      rows = showTableData.value.filter((item) => item.checked);
+    }
+    getFileList(rows).then(async (res) => {
+      let filelist: any = res;
+      console.log(res);
+
+      const token = localStorage.getItem('X-Token');
+      const zip = new JSZip();
+      // 添加文件到ZIP
+      for (const file of filelist) {
+        try {
+          const response = await fetch(file.url + '?t=' + Date.now(), {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+            mode: 'cors',
+          });
+          if (!response.ok) {
+            throw new Error(`HTTP 错误: ${response.status} - ${response.statusText}`);
+          }
+          const blob = await response.blob();
+          zip.file(`${file.path}/${file.name}`, blob, { binary: true });
+        } catch (error) {
+          console.error('请求失败:', error);
+        }
+      }
+      // 生成ZIP文件并触发下载
+      let zipFileName = '压缩文件';
+      try {
+        const blob = await zip.generateAsync({ type: 'blob' });
+        saveAs(blob, zipFileName + '.zip'); // 下载的ZIP文件名
+      } catch (error) {
+        console.error('生成ZIP文件时出错:', error);
+      }
+    });
+  }
+
+  async function getFileList(rows) {
+    let fileList: any = [];
+    let num = 0;
+    rows.forEach(async (item) => {
+      if (item.objectKey) {
+        fileList.push({
+          name: item.name,
+          url: VITE_GLOB_MEDIALIBRARY_IMAGE_URL + item.objectKey,
+          path: '',
+        });
+        num++;
+        if (rows.length == num) {
+          console.log(fileList);
+          return fileList;
+        }
+      } else {
+        await GetMediaFile({
+          parentKey: item.id,
+          page: 1,
+          limit: 1000,
+        }).then((res) => {
+          res.items.forEach(async (r) => {
+            fileList.push({
+              name: r.name,
+              url: VITE_GLOB_MEDIALIBRARY_IMAGE_URL + r.objectKey,
+              path: item.name,
+            });
+          });
+          num++;
+          if (rows.length == num) {
+            console.log(fileList);
+            return fileList;
+          }
+        });
+      }
+    });
+  }
+
   // 查看弹窗----------------------------------------------------------------------------
   const openPreview = ref(false);
   // 目前展示图片
@@ -746,7 +855,13 @@
       } else {
         query = {
           ...query,
-          parentKey: nowParentKey.value,
+          // 总目录下展示全部的所选文件类型的文件、单个目录下只显示本文件下的所选文件类型的文件
+          parentKey: searchInfo.type
+            ? nowParentKey.value == '0'
+              ? ''
+              : nowParentKey.value
+            : nowParentKey.value,
+          type: searchInfo.type,
         };
       }
       GetMediaFile(query).then((res) => {
@@ -773,6 +888,9 @@
         showTableData.value = res;
       });
     }
+    setTimeout(() => {
+      clearSelectedRowKeys();
+    }, 500);
   }
   function uniqueByKey(arrlist, record) {
     let resultList: any = [];
@@ -851,7 +969,13 @@
     } else {
       query = {
         ...query,
-        parentKey: nowParentKey.value,
+        // 总目录下展示全部的所选文件类型的文件、单个目录下只显示本文件下的所选文件类型的文件
+        parentKey: searchInfo.type
+          ? nowParentKey.value == '0'
+            ? ''
+            : nowParentKey.value
+          : nowParentKey.value,
+        type: searchInfo.type,
       };
     }
     GetMediaFile(query).then((res) => {
diff --git a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
index cc7ea6a..4cc3dc1 100644
--- a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
@@ -192,24 +192,20 @@
   const imageTypeSelect = ref([]);
   const imageOptions: any = ref([
     {
-      value: '广角照片',
-      label: '广角照片',
-    },
-    {
-      value: '变焦照片',
-      label: '变焦照片',
+      value: 1,
+      label: '可见光照片',
     },
     {
-      value: '红外照片',
+      value: 2,
       label: '红外照片',
     },
     {
-      value: '全景图',
-      label: '全景图',
+      value: 3,
+      label: '变焦照片',
     },
     {
-      value: '码流截图',
-      label: '码流截图',
+      value: 4,
+      label: '广角照片',
     },
   ]);
   // 按照媒体名称搜索
@@ -223,11 +219,9 @@
       });
     }
     // 图片类型
-    // if (tagSelect.value.length > 0) {
-    //   imageTypeSelect.value.forEach((imagetype) => {
-    //     filterImageData = filterImageData.filter((item) => item.fileTags.includes(imagetype));
-    //   });
-    // }
+    if (imageTypeSelect.value.length > 0) {
+      filterImageData = filterImageData.filter((item) => imageTypeSelect.value.includes(item.type));
+    }
     // 按照媒体名称搜索
     if (searchValue.value) {
       filterImageData = filterImageData.filter((item) => item.name.includes(searchValue.value));
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
index a926eee..4942bdd 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
@@ -21,7 +21,7 @@
           <span class="infotitle">照片类型</span>
         </a-col>
         <a-col :span="17">
-          <span class="infovalue">{{ props.nowPreviewRecord.imgtype || '--' }} </span>
+          <span class="infovalue">{{ getImageType(props.nowPreviewRecord.type) || '--' }} </span>
         </a-col>
         <a-col :span="7">
           <span class="infotitle">任务名称</span>
@@ -266,6 +266,26 @@
     editName.value = props.nowPreviewRecord.name.split('.').slice(0, -1).join('.');
   }
 
+  // 图片类型
+  function getImageType(type) {
+    let imageType = '';
+    switch (type) {
+      case 1:
+        imageType = '可见光照片';
+        break;
+      case 2:
+        imageType = '红外照片';
+        break;
+      case 3:
+        imageType = '变焦照片';
+        break;
+      case 4:
+        imageType = '广角照片';
+        break;
+    }
+    return imageType;
+  }
+
   // 标签--------------------------------
   const addFileTagsFlag = ref(false);
   const newFileTagsName = ref('');

From 63edcb98d5c35d207d675fbc5948076eb138ec07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Sun, 17 Aug 2025 15:38:26 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E6=89=B9?=
 =?UTF-8?q?=E9=87=8F=E4=B8=8B=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/system/mediaLibrary/index.vue  | 146 +++++++++++++-----
 .../mediaLibrary/path/pathImageInfo.vue       |  39 +++--
 .../preview/previewImageInformation.vue       |  17 +-
 3 files changed, 150 insertions(+), 52 deletions(-)

diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index a23a809..d20c109 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -17,12 +17,24 @@
             <a-button :icon="h(BorderHorizontalOutlined)" @click="openComparisonModal">
               变化检测
             </a-button>
-            <a-button :icon="h(PlusOutlined)" type="primary" @click="addFolder">
-              新建文件夹
-            </a-button>
+            <a-button :icon="h(PlusOutlined)" @click="addFolder"> 新建文件夹 </a-button>
             <a-button :icon="h(ColumnHeightOutlined)" @click="moveFolderOrFile">移动</a-button>
             <a-button :icon="h(DeleteOutlined)" @click="deleteFolderOrFile">删除 </a-button>
-            <!-- <a-button :icon="h(DownloadOutlined)" @click="downloadFile">批量下载</a-button> -->
+            <a-popover trigger="hover">
+              <template #content>
+                <div v-if="!downloadLoading"> 选择下载的文件/文件夹，压缩下载成一个压缩包文件</div>
+                <div v-if="downloadLoading">
+                  <a-progress :percent="downPercent" type="circle" />
+                </div>
+              </template>
+              <a-button
+                :icon="h(DownloadOutlined)"
+                :loading="downloadLoading"
+                @click="downloadOpenMoadl"
+              >
+                批量下载
+              </a-button>
+            </a-popover>
             <a-radio-group v-model:value="tableType">
               <a-radio-button value="table"><BarsOutlined /></a-radio-button>
               <a-radio-button value="store"><AppstoreOutlined /></a-radio-button>
@@ -97,7 +109,15 @@
               <span
                 style="width: 100%; display: flex; align-items: center; justify-content: center"
               >
-                {{ record.size ? parseFloat((record.size / (1024 * 1024)).toFixed(2)) + 'M' : '-' }}
+                {{
+                  record.size
+                    ? record.size > 1024 * 1024
+                      ? parseFloat((record.size / (1024 * 1024)).toFixed(2)) + 'MB'
+                      : record.size > 1024
+                        ? parseFloat((record.size / 1024).toFixed(2)) + 'KB'
+                        : parseFloat(record.size) + 'B'
+                    : '-'
+                }}
               </span>
             </template>
             <template v-if="column.key === 'airLineName'">
@@ -284,6 +304,41 @@
       <Comparison @closeComparisonModal="closeComparisonModal" />
     </a-modal>
 
+    <!-- 下载文件命名窗口 -->
+    <a-modal
+      v-model:open="downloadOpen"
+      title="压缩"
+      width="30%"
+      :centered="true"
+      :closable="false"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask="false"
+      :maskClosable="false"
+      @ok="downloadFile"
+      @cancel="((zipFileName = null), (downloadRows = []))"
+    >
+      <div style="width: 100%; margin: 10px; padding: 10px">
+        <a-row>
+          <a-col :span="24">
+            <div style="width: 100%; height: 40px">批量下载会先进行压缩成一个文件，后续再下载</div>
+          </a-col>
+          <a-col :span="4">
+            <div style="width: 100%"> 压缩包名称: </div>
+          </a-col>
+          <a-col :span="20">
+            <div style="width: 80%">
+              <a-input
+                v-model:value="zipFileName"
+                placeholder="请输入压缩文件的名称"
+                allowClear
+              ></a-input>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </a-modal>
+
     <Path
       v-if="pathDivShow"
       :pathDivShow="pathDivShow"
@@ -754,20 +809,43 @@
     });
   }
 
-  // 批量下载
-  async function downloadFile() {
+  // 压缩窗口
+  const downloadOpen = ref(false);
+  const downloadLoading = ref(false);
+  const downPercent = ref(0);
+  // 压缩文件名
+  let downloadRows: any = [];
+  const zipFileName = ref('');
+  // 批量下载-窗口
+  function downloadOpenMoadl() {
     // 获得所选
     let rows = getSelectRows();
     if (tableType.value == 'store') {
       rows = showTableData.value.filter((item) => item.checked);
     }
-    getFileList(rows).then(async (res) => {
+    if (rows.length == 0) {
+      return createMessage.warn('请选择一个或者多个文件/文件夹进行删除');
+    }
+    zipFileName.value = '压缩文件' + dayjs().format('YYYY-MM-DD HH:mm:ss');
+    if (floders.value.length > 1) {
+      zipFileName.value = floders.value[floders.value.length - 1].name;
+    }
+    if (rows.length == 1 && !rows[0].objectKey) {
+      zipFileName.value = rows[0].name;
+    }
+    downloadRows = rows;
+    downloadOpen.value = true;
+  }
+  // 批量下载-下载
+  async function downloadFile() {
+    downloadOpen.value = false;
+    downloadLoading.value = true;
+    getFileList(downloadRows).then(async (res) => {
       let filelist: any = res;
-      console.log(res);
-
       const token = localStorage.getItem('X-Token');
       const zip = new JSZip();
       // 添加文件到ZIP
+      let index = 0;
       for (const file of filelist) {
         try {
           const response = await fetch(file.url + '?t=' + Date.now(), {
@@ -783,55 +861,51 @@
           zip.file(`${file.path}/${file.name}`, blob, { binary: true });
         } catch (error) {
           console.error('请求失败:', error);
+        } finally {
+          index++;
+          downPercent.value = parseFloat(((index / filelist.length) * 100).toFixed(2));
         }
       }
       // 生成ZIP文件并触发下载
-      let zipFileName = '压缩文件';
       try {
         const blob = await zip.generateAsync({ type: 'blob' });
-        saveAs(blob, zipFileName + '.zip'); // 下载的ZIP文件名
+        saveAs(blob, zipFileName.value + '.zip'); // 下载的ZIP文件名
       } catch (error) {
         console.error('生成ZIP文件时出错:', error);
+      } finally {
+        downloadLoading.value = false;
       }
     });
   }
-
+  // 批量下载-数据
   async function getFileList(rows) {
-    let fileList: any = [];
-    let num = 0;
-    rows.forEach(async (item) => {
+    const filelist: any = [];
+    // 使用 for...of 配合 await
+    for (const item of rows) {
       if (item.objectKey) {
-        fileList.push({
+        // 直接文件
+        filelist.push({
           name: item.name,
           url: VITE_GLOB_MEDIALIBRARY_IMAGE_URL + item.objectKey,
           path: '',
         });
-        num++;
-        if (rows.length == num) {
-          console.log(fileList);
-          return fileList;
-        }
       } else {
-        await GetMediaFile({
+        // 文件夹：获取子文件
+        const res = await GetMediaFile({
           parentKey: item.id,
           page: 1,
           limit: 1000,
-        }).then((res) => {
-          res.items.forEach(async (r) => {
-            fileList.push({
-              name: r.name,
-              url: VITE_GLOB_MEDIALIBRARY_IMAGE_URL + r.objectKey,
-              path: item.name,
-            });
+        });
+        res.items.forEach((r) => {
+          filelist.push({
+            name: r.name,
+            url: VITE_GLOB_MEDIALIBRARY_IMAGE_URL + r.objectKey,
+            path: item.name, // 以文件夹名为路径
           });
-          num++;
-          if (rows.length == num) {
-            console.log(fileList);
-            return fileList;
-          }
         });
       }
-    });
+    }
+    return filelist;
   }
 
   // 查看弹窗----------------------------------------------------------------------------
diff --git a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
index 1de6edb..52227f8 100644
--- a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
@@ -24,34 +24,40 @@
       </div>
       <div class="titleTime">
         <ClockCircleOutlined />
+        &nbsp;&nbsp;
         <span>
-          {{
-            '&nbsp;&nbsp;' +
-            dayjs(props.nowShowImageData.createTime).format('YYYY-MM-DD HH:mm:ss (UTCZ)') +
-            '&nbsp;&nbsp;&nbsp;'
-          }}
+          {{ dayjs(props.nowShowImageData.createTime).format('YYYY-MM-DD HH:mm:ss (UTCZ)') }}
         </span>
+        &nbsp;&nbsp;&nbsp;
         <span>
           {{
-            props.nowShowImageData.siz
-              ? (props.nowShowImageData.size / 1024 / 1024).toFixed(2) + 'M' + '&nbsp;&nbsp;&nbsp;'
-              : imageSize + '&nbsp;&nbsp;&nbsp;'
+            props.nowShowImageData.size
+              ? props.nowShowImageData.size > 1024 * 1024
+                ? parseFloat((props.nowShowImageData.size / (1024 * 1024)).toFixed(2)) + 'MB'
+                : props.nowShowImageData.size > 1024
+                  ? parseFloat((props.nowShowImageData.size / 1024).toFixed(2)) + 'KB'
+                  : parseFloat(props.nowShowImageData.size) + 'B'
+              : imageSize
           }}
         </span>
+        &nbsp;&nbsp;&nbsp;
         <span>
           {{ props.nowShowImageData.width + ' x ' + props.nowShowImageData.height }}
         </span>
       </div>
       <div class="titleCoordinate">
         <span>
-          {{ props.nowShowImageData.lat + '° E' + '&nbsp;&nbsp;&nbsp;&nbsp;' }}
+          {{ props.nowShowImageData.lat + '° E' }}
         </span>
+        &nbsp;&nbsp;&nbsp;&nbsp;
         <span>
-          {{ props.nowShowImageData.lng + '° N' + '&nbsp;&nbsp;&nbsp;&nbsp;' }}
+          {{ props.nowShowImageData.lng + '° N' }}
         </span>
+        &nbsp;&nbsp;&nbsp;&nbsp;
         <span>
-          {{ '拍摄高度' + props.nowShowImageData.relativeAltitude + 'm &nbsp;&nbsp;&nbsp;&nbsp;' }}
+          {{ '拍摄高度' + props.nowShowImageData.relativeAltitude + 'm' }}
         </span>
+        &nbsp;&nbsp;&nbsp;&nbsp;
       </div>
     </div>
     <!-- 标签 -->
@@ -865,8 +871,15 @@
       const contentLength = response.headers.get('Content-Length');
       if (contentLength) {
         const sizeInBytes = parseInt(contentLength, 10);
-        const sizeInMB = (sizeInBytes / (1024 * 1024)).toFixed(2);
-        imageSize.value = parseFloat(sizeInMB) + 'M';
+        if (sizeInBytes > 1024 * 1024) {
+          imageSize.value = (sizeInBytes / (1024 * 1024)).toFixed(2) + 'MB';
+        } else if (sizeInBytes > 1024) {
+          imageSize.value = (sizeInBytes / 1024).toFixed(2) + 'KB';
+        } else if (sizeInBytes > 0) {
+          imageSize.value = sizeInBytes + 'B';
+        } else {
+          imageSize.value = '--';
+        }
       } else {
         imageSize.value = '--';
       }
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
index 4942bdd..3f7b728 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
@@ -50,7 +50,11 @@
           <span class="infovalue">
             {{
               props.nowPreviewRecord.size
-                ? (props.nowPreviewRecord.size / 1024 / 1024).toFixed(2) + 'M'
+                ? props.nowPreviewRecord.size > 1024 * 1024
+                  ? parseFloat((props.nowPreviewRecord.size / (1024 * 1024)).toFixed(2)) + 'MB'
+                  : props.nowPreviewRecord.size > 1024
+                    ? parseFloat((props.nowPreviewRecord.size / 1024).toFixed(2)) + 'KB'
+                    : parseFloat(props.nowPreviewRecord.size) + 'B'
                 : imageSize
             }}
           </span>
@@ -402,8 +406,15 @@
       const contentLength = response.headers.get('Content-Length');
       if (contentLength) {
         const sizeInBytes = parseInt(contentLength, 10);
-        const sizeInMB = (sizeInBytes / (1024 * 1024)).toFixed(2);
-        imageSize.value = parseFloat(sizeInMB) + 'M';
+        if (sizeInBytes > 1024 * 1024) {
+          imageSize.value = (sizeInBytes / (1024 * 1024)).toFixed(2) + 'MB';
+        } else if (sizeInBytes > 1024) {
+          imageSize.value = (sizeInBytes / 1024).toFixed(2) + 'KB';
+        } else if (sizeInBytes > 0) {
+          imageSize.value = sizeInBytes + 'B';
+        } else {
+          imageSize.value = '--';
+        }
       } else {
         imageSize.value = '--';
       }

From 218c6ae04d299a27d31c6dce8c4e304c0c88965e Mon Sep 17 00:00:00 2001
From: zhufu <17863654727@163.com>
Date: Mon, 18 Aug 2025 16:09:50 +0800
Subject: [PATCH 3/4] =?UTF-8?q?AI=E7=AE=97=E6=B3=95=E5=AE=9E=E4=BE=8B?=
 =?UTF-8?q?=E7=94=BB=E9=9D=A2=20=E9=BB=98=E8=AE=A4=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/resourcemanagement/aiinstance/ShowInfoDrawer.vue     | 4 +++-
 src/views/demo/resourcemanagement/aiinstance/index.vue        | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/views/demo/resourcemanagement/aiinstance/ShowInfoDrawer.vue b/src/views/demo/resourcemanagement/aiinstance/ShowInfoDrawer.vue
index 36715c9..927ecb9 100644
--- a/src/views/demo/resourcemanagement/aiinstance/ShowInfoDrawer.vue
+++ b/src/views/demo/resourcemanagement/aiinstance/ShowInfoDrawer.vue
@@ -11,7 +11,7 @@
     </div>
   </div>
   <div class="drawer-content">
-    <img class="content-image" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
+    <img class="content-image" :src="`${VITE_GLOB_API_URL}/20250818\\2025081816060064980138.jpeg`"/>
     <div class="content-item-name">
       <div class="item-name-label">实例名称</div>
       <div class="item-name-value">公路-隔离栏破损识别</div>
@@ -60,6 +60,8 @@
 <script setup lang="ts">
 import {} from "vue"
 import { EditOutlined, CloseOutlined } from '@ant-design/icons-vue'
+import { getAppEnvConfig } from '@/utils/env';
+const { VITE_GLOB_API_URL } = getAppEnvConfig();
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/demo/resourcemanagement/aiinstance/index.vue b/src/views/demo/resourcemanagement/aiinstance/index.vue
index 1cd5625..a917492 100644
--- a/src/views/demo/resourcemanagement/aiinstance/index.vue
+++ b/src/views/demo/resourcemanagement/aiinstance/index.vue
@@ -21,7 +21,7 @@
       <div class="show-list">
         <div class="item-list" v-for="value in 10">
           <div class="image-div">
-            <img class="image-item" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
+            <img class="image-item" :src="`${VITE_GLOB_API_URL}/20250818\\2025081816060064980138.jpeg`">
             <div class="image-icon">盖板缺失</div>
           </div>
           <div class="show-info-div">
@@ -97,6 +97,8 @@ import { ref, h,  } from "vue"
 import { PlusOutlined, } from '@ant-design/icons-vue';
 import AddInstanceModal from "./AddInstanceModal.vue";
 import ShowInfoDrawer from "./ShowInfoDrawer.vue";
+import { getAppEnvConfig } from '@/utils/env';
+const { VITE_GLOB_API_URL } = getAppEnvConfig();
 const instanceName = ref('')
 const instanceAlgorithm = ref()
 const addInstanceModal = ref(false)

From 23a04dba723a840a0c23b5c076093561ad2d77ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Mon, 18 Aug 2025 16:46:10 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E5=8D=95?=
 =?UTF-8?q?=E7=8B=AC=E4=B8=8B=E8=BD=BD=E3=80=81=E6=89=B9=E9=87=8F=E4=B8=8B?=
 =?UTF-8?q?=E8=BD=BDbug=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/system/mediaLibrary/LeftTree.vue     |   8 +-
 src/views/demo/system/mediaLibrary/index.vue  | 119 ++++++++++++++----
 2 files changed, 100 insertions(+), 27 deletions(-)

diff --git a/src/views/demo/system/mediaLibrary/LeftTree.vue b/src/views/demo/system/mediaLibrary/LeftTree.vue
index b6dff1c..f42c82e 100644
--- a/src/views/demo/system/mediaLibrary/LeftTree.vue
+++ b/src/views/demo/system/mediaLibrary/LeftTree.vue
@@ -27,10 +27,10 @@
         id: 'meitiku',
         name: '媒体库',
         children: [
-          {
-            id: '',
-            name: '全部资源',
-          },
+          // {
+          //   id: '',
+          //   name: '全部资源',
+          // },
           {
             id: '1',
             name: '可见光',
diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index d20c109..54cf51c 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -20,17 +20,30 @@
             <a-button :icon="h(PlusOutlined)" @click="addFolder"> 新建文件夹 </a-button>
             <a-button :icon="h(ColumnHeightOutlined)" @click="moveFolderOrFile">移动</a-button>
             <a-button :icon="h(DeleteOutlined)" @click="deleteFolderOrFile">删除 </a-button>
+            <a-button
+              :icon="h(DownloadOutlined)"
+              :loading="downloadAloneLoading"
+              @click="downloadAloneFile"
+            >
+              单独下载
+            </a-button>
             <a-popover trigger="hover">
               <template #content>
-                <div v-if="!downloadLoading"> 选择下载的文件/文件夹，压缩下载成一个压缩包文件</div>
-                <div v-if="downloadLoading">
-                  <a-progress :percent="downPercent" type="circle" />
+                <div v-if="!downloadZipLoading">
+                  选择下载的文件/文件夹，压缩下载成一个压缩包文件
+                </div>
+                <div v-if="downloadZipLoading">
+                  <a-progress
+                    type="circle"
+                    :percent="downloadZipPercent"
+                    :format="(downloadZipPercent) => `下载中\n${downloadZipPercent}%`"
+                  />
                 </div>
               </template>
               <a-button
                 :icon="h(DownloadOutlined)"
-                :loading="downloadLoading"
-                @click="downloadOpenMoadl"
+                :loading="downloadZipLoading"
+                @click="downloadZipOpenMoadl"
               >
                 批量下载
               </a-button>
@@ -306,7 +319,7 @@
 
     <!-- 下载文件命名窗口 -->
     <a-modal
-      v-model:open="downloadOpen"
+      v-model:open="downloadZipOpen"
       title="压缩"
       width="30%"
       :centered="true"
@@ -315,13 +328,13 @@
       :keyboard="false"
       :mask="false"
       :maskClosable="false"
-      @ok="downloadFile"
+      @ok="downloadZipFile"
       @cancel="((zipFileName = null), (downloadRows = []))"
     >
       <div style="width: 100%; margin: 10px; padding: 10px">
         <a-row>
           <a-col :span="24">
-            <div style="width: 100%; height: 40px">批量下载会先进行压缩成一个文件，后续再下载</div>
+            <div style="width: 100%; height: 40px">批量下载会先进行压缩成一个文件，然后再下载</div>
           </a-col>
           <a-col :span="4">
             <div style="width: 100%"> 压缩包名称: </div>
@@ -484,7 +497,7 @@
         const paginations = document.querySelectorAll('.ant-pagination');
         if (paginations) {
           paginations.forEach((pagination) => {
-            pagination.style.display = 'block';
+            pagination.style.display = 'flex';
           });
         }
         // 选中：格子→表格
@@ -647,6 +660,19 @@
           arr.graffitiJson = [];
         }
       });
+      showTableData.value = result;
+      setTimeout(() => {
+        // 格子
+        if (tableType.value === 'store') {
+          // 分页-隐藏
+          const paginations = document.querySelectorAll('.ant-pagination');
+          if (paginations) {
+            paginations.forEach((pagination) => {
+              pagination.style.display = 'none';
+            });
+          }
+        }
+      }, 100);
       return result;
     },
   });
@@ -683,8 +709,9 @@
     // 表格
     if (tableType.value == 'table') {
       reload();
-    } else {
-      // 格子
+    }
+    // 格子
+    if (tableType.value === 'store') {
       getShowTableData();
     }
   }
@@ -809,22 +836,61 @@
     });
   }
 
+  // 单独下载
+  const downloadAloneLoading = ref(false);
+  async function downloadAloneFile() {
+    // 获得所选
+    let rows = getSelectRows();
+    if (tableType.value == 'store') {
+      rows = showTableData.value.filter((item) => item.checked);
+    }
+    if (rows.length != 1) {
+      return createMessage.warn('请选择一个文件进行下载');
+    }
+    if (!rows[0].objectKey) {
+      return createMessage.warn('单独下载只能下载非文件夹的文件');
+    }
+    try {
+      downloadAloneLoading.value = true;
+      const response = await fetch(VITE_GLOB_MEDIALIBRARY_IMAGE_URL + rows[0].objectKey, {
+        mode: 'cors',
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const blob = await response.blob();
+      const urlObject = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = urlObject;
+      link.download = rows[0].name || 'download';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(urlObject);
+    } catch (error) {
+      console.error('Error downloading image:', error);
+    } finally {
+      downloadAloneLoading.value = false;
+    }
+  }
+
   // 压缩窗口
-  const downloadOpen = ref(false);
-  const downloadLoading = ref(false);
-  const downPercent = ref(0);
+  const downloadZipOpen = ref(false);
+  const downloadZipLoading = ref(false);
+  const downloadZipPercent = ref(0);
+
   // 压缩文件名
   let downloadRows: any = [];
   const zipFileName = ref('');
   // 批量下载-窗口
-  function downloadOpenMoadl() {
+  function downloadZipOpenMoadl() {
     // 获得所选
     let rows = getSelectRows();
     if (tableType.value == 'store') {
       rows = showTableData.value.filter((item) => item.checked);
     }
     if (rows.length == 0) {
-      return createMessage.warn('请选择一个或者多个文件/文件夹进行删除');
+      return createMessage.warn('请选择一个或者多个文件/文件夹进行下载');
     }
     zipFileName.value = '压缩文件' + dayjs().format('YYYY-MM-DD HH:mm:ss');
     if (floders.value.length > 1) {
@@ -834,12 +900,15 @@
       zipFileName.value = rows[0].name;
     }
     downloadRows = rows;
-    downloadOpen.value = true;
+    downloadZipOpen.value = true;
   }
   // 批量下载-下载
-  async function downloadFile() {
-    downloadOpen.value = false;
-    downloadLoading.value = true;
+  async function downloadZipFile() {
+    if (!zipFileName.value) {
+      return createMessage.warn('压缩包名称不能为空');
+    }
+    downloadZipOpen.value = false;
+    downloadZipLoading.value = true;
     getFileList(downloadRows).then(async (res) => {
       let filelist: any = res;
       const token = localStorage.getItem('X-Token');
@@ -863,7 +932,7 @@
           console.error('请求失败:', error);
         } finally {
           index++;
-          downPercent.value = parseFloat(((index / filelist.length) * 100).toFixed(2));
+          downloadZipPercent.value = parseFloat(((index / filelist.length) * 100).toFixed(2));
         }
       }
       // 生成ZIP文件并触发下载
@@ -873,7 +942,7 @@
       } catch (error) {
         console.error('生成ZIP文件时出错:', error);
       } finally {
-        downloadLoading.value = false;
+        downloadZipLoading.value = false;
       }
     });
   }
@@ -1111,7 +1180,7 @@
     flex-wrap: wrap;
   }
   .flodersname {
-    max-width: 120px;
+    max-width: 240px;
     white-space: nowrap; /* 禁止换行 */
     overflow: hidden; /* 超出部分隐藏 */
     text-overflow: ellipsis; /* 超出显示省略号 */
@@ -1199,4 +1268,8 @@
   ::v-deep .ant-modal-body {
     height: 100% !important;
   }
+
+  ::v-deep .ant-pagination {
+    justify-content: flex-end !important;
+  }
 </style>