feat:下载进度

src/views/components/Header.vue

@@ -496,6 +496,24 @@
   <t-dialog v-model:visible="newFileDialog.show" @close="newFileDialog.show = false" @confirm="saveNewfile" @cancel="nosaveNewfile" :header="$t('提示')" :confirm-btn="$t('保存后新建')" :cancel-btn="$t('不保存直接新建')">
     {{$t('当前画布数据未保存')}}，{{$t('是否保存后新建')}}？
   </t-dialog>
+  <t-dialog
+     v-model:visible="progress.show"
+     header="下载进度"
+     :footer="null"
+   >
+     <div class="flex" style="height: 40px;align-items: center;">
+       <t-progress 
+         style="width:360px"  
+         theme="line"
+         :color="{ from: '#0052D9', to: '#00A870' }"
+         :percentage="(progress.current/progress.total*100).toFixed(2)" 
+         :status ="progress.status"
+         />
+       <div class="progress-text ml-8">
+         {{ progress.current }}/{{ progress.total }}
+       </div>  
+     </div>
+   </t-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -2115,8 +2133,20 @@ const preFrameDownload = async () => {
   }
 }
 
+const progress = reactive({
+   show: false,
+   total: 0,
+   current:0,
+   status:''
+ });
+
 const saveDownload = async () => {
   const list = [...downloadList];
+
+  progress.total = list.length;
+  progress.current = 0;
+  progress.show = true;
+  progress.status = 'active';
   //控件
   let jsPath= '';
   // let jsPensPath = '';
@@ -2244,7 +2274,8 @@ const saveDownload = async () => {
   //     });
   //   }
   // }
-
+  progress.total = list.length;
+  progress.current = 0;
   //开始下载list
   const [{ default: JSZip }, { saveAs }] = await Promise.all([
     import('jszip'),
@@ -2276,8 +2307,10 @@ const saveDownload = async () => {
         }
         zip.file(path, item.data, { createFolders: true });
       }
+      progress.current += 1;
     })
   );
+  progress.status = 'success';
   let _fileName =
     (meta2d.store.data.name &&
       meta2d.store.data.name.replace(/\//g, '_').replace(/:/g, '_')) ||
@@ -2286,6 +2319,9 @@ const saveDownload = async () => {
   saveAs(blob, `${_fileName}.zip`);
   MessagePlugin.closeAll();
   MessagePlugin.success($t('下载成功，请在浏览器下载列表中查看'));
+  setTimeout(()=>{
+     progress.show = false;
+  },1000);
 };
 
 // const _downloadHtml = async () => {