feat: 1.插件加载时会有全局提示。2.重命名miaoMessageProvider为miaoAlertTipProvider

src/plugins/miaoCodeMirror/miaoCodeMirror.vue

@@ -1,18 +1,11 @@
 <template>
     <miao-message-provider ref="miaoMessage">
-        <div
-            class="codemirror-container"
-            ref="rootRef"
-            :class="`codemirror-container-${theme}`">
+        <div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
             <div class="codemirror-container-top">
-                <div
-                    class="codemirror-container-btn codemirror-container-btn-save"
-                    @click="handleSave">
+                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">
                     保存
                 </div>
-                <div
-                    class="codemirror-container-btn codemirror-container-btn-save"
-                    @click="handleReset">
+                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">
                     恢复到上次保存
                 </div>
             </div>
@@ -26,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
+import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
 import { VirtualFile } from '@/class/VirtualDirectory'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import { onMounted, ref } from 'vue'
@@ -53,7 +46,7 @@ const theme = ref<'light' | 'dark'>('light')
 
 const handleSave = async () => {
     if (bakData.value === codeData.value || !vFile.value) {
-        miaoMessage.value?.message('内容未改动', {
+        miaoMessage.value?.alertTip('内容未改动', {
             timeout: 3000,
             type: 'info'
         })
@@ -69,7 +62,7 @@ const handleSave = async () => {
     const { response } = miaoFetchApi.upload(file, parentDir)
     false && miaoFetchApi.upload(file_bak, parentDir)
     await response
-    miaoMessage.value?.message('保存成功', {
+    miaoMessage.value?.alertTip('保存成功', {
         timeout: 5000,
         type: 'success'
     })
@@ -152,13 +145,13 @@ onMounted(async () => {
     vFile.value = currentFiles.value[0]
     const fileName = currentFiles.value[0].name
     codeData.value = decoder.decode(
-        await miaoFetchApi.getFile(currentFiles.value[0], {
+        await (miaoFetchApi.getFile(currentFiles.value[0], {
             axiosOption: {
                 headers: {
                     'Cache-Control': 'no-cache'
                 }
             }
-        })
+        }).response)
     )
     bakData.value = codeData.value
     extensions.value = [...(await getLangExtensions(fileName))]

src/plugins/miaoCrypto/miaoCrypto.vue

@@ -3,36 +3,29 @@
         <div class="miaoCrypto-container">
             <div class="miaoCrypto-container-encrypt miaoCrypto-container-item">
                 <n-scrollbar style="max-height: 100%">
-                    <div
-                        v-for="item of workItemList"
-                        class="miaoCrypto-container-item-item">
-                        <div
-                            class="miaoCrypto-container-item-percentBar"
-                            :style="{
-                                zIndex: 0,
-                                width: item.buffer ? `100%` : `0%`,
-                                backgroundColor: 'blue'
-                            }"></div>
-                        <div
-                            class="miaoCrypto-container-item-percentBar"
-                            :style="{
-                                zIndex: 1,
-                                width: item.status === 'finish' ? `100%` : `0%`,
-                                backgroundColor: 'green'
-                            }"></div>
+                    <div v-for="item of workItemList" :key="item.id" class="miaoCrypto-container-item-item">
+                        <div class="miaoCrypto-container-item-percentBar" :style="{
+                            zIndex: 0,
+                            width: item.getBufferProgress !== -1 ? `${item.getBufferProgress * 100}%` : `0%`,
+                            backgroundColor: 'blue'
+                        }"></div>
+                        <div class="miaoCrypto-container-item-percentBar" :style="{
+                            zIndex: 1,
+                            width: item.status === 'finish' ? `100%` : `0%`,
+                            backgroundColor: 'green'
+                        }"></div>
                         <span class="miaoCrypto-container-item-content">{{ item.name }}{{ item.status }}</span>
                     </div>
                 </n-scrollbar>
             </div>
-            <div
-                class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div>
+            <div class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div>
         </div>
     </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
 import { NScrollbar } from 'naive-ui'
-import { ref } from 'vue'
+import { onUnmounted, ref, shallowReactive } from 'vue'
 import aes_ctr_worker from './hooks/AES'
 import { VirtualFile } from '@/class/VirtualDirectory'
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
@@ -44,9 +37,12 @@ import { computed } from 'vue'
 const miaoFetchApi = useMiaoFetchApi()
 
 interface workItem {
+    id: number
     status: 'wait' | 'process' | 'finish'
     buffer?: Uint8Array
     getBuffer: () => Promise<Uint8Array>
+    getBufferProgress: number
+    getBufferAbort?: () => void
     isGettingBuffer: boolean
     name: string
 }
@@ -55,14 +51,16 @@ class Work {
     constructor(func: (key: string, data: Uint8Array) => Promise<Uint8Array>) {
         this.queue = []
         this.func = func
+        this.abortLoop = false
     }
     queue: workItem[]
     func: (key: string, data: Uint8Array) => Promise<Uint8Array>
+    abortLoop: boolean
     get isBusy() {
         return this.queue.filter((v) => v.status === 'process').length > 0
     }
     async funcLoop() {
-        if (this.isBusy) {
+        if (this.isBusy || this.abortLoop) {
             return
         }
         const currentItem = this.queue.filter((v) => v.status === 'wait')[0]
@@ -78,7 +76,7 @@ class Work {
         const _list = this.queue.filter(
             (v) => v.isGettingBuffer === false && v.buffer === undefined
         )
-        if (_list.length === 0) {
+        if (_list.length === 0 || this.abortLoop) {
             return
         }
         const item = _list[0]
@@ -94,12 +92,25 @@ class Work {
     }
     pushVFiles(itemList: VirtualFile[]) {
         this.push(
-            itemList.map((v) => ({
-                name: v.name,
-                getBuffer: () => miaoFetchApi.getFile(v),
-                status: 'wait',
-                isGettingBuffer: false
-            }))
+            itemList.map((v) => {
+                const item: workItem = shallowReactive({
+                    id: Math.random(),
+                    status: 'wait',
+                    name: v.name,
+                    getBuffer: () => {
+                        const { response, abort } = miaoFetchApi.getFile(v, {
+                            onProcess(percent) {
+                                item.getBufferProgress = percent
+                            }
+                        })
+                        item.getBufferAbort = abort
+                        return response
+                    },
+                    isGettingBuffer: false,
+                    getBufferProgress: 0
+                })
+                return item
+            })
         )
     }
 }
@@ -125,6 +136,13 @@ const handleDropVirtualFiles = (vFiles: VirtualFile[]) => {
 onMounted(() => {
     encryptWork.pushVFiles(currentFiles.value)
 })
+
+onUnmounted(() => {
+    encryptWork.abortLoop = true
+    encryptWork.queue.forEach(item=>{
+        item.getBufferAbort && item.getBufferAbort()
+    })
+})
 </script>
 
 <style scoped lang="scss">
@@ -133,12 +151,14 @@ onMounted(() => {
     height: 100%;
     display: flex;
     flex-direction: column;
+
     &-item {
         max-height: 100%;
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
+
         &-item {
             margin: 10px auto;
             width: 95%;
@@ -148,12 +168,15 @@ onMounted(() => {
                 0 0 3px 1px #43434359;
             border-radius: 5px;
             position: relative;
+
             .miaoCrypto-container-item-percentBar {
                 height: 100%;
                 position: absolute;
                 top: 0;
                 left: 0;
+                border-radius: 5px;
             }
+
             .miaoCrypto-container-item-content {
                 position: relative;
                 z-index: 3

src/plugins/miaoCrypto/workers/aes-worker.ts

@@ -3,7 +3,6 @@ import aesJs from 'aes-js'
 self.onmessage = async function (event) {
     const data = event.data.data as Uint8Array
     const key = event.data.key as Uint8Array
-    console.log(event)
     var aesCtr = new aesJs.ModeOfOperation.ctr(key, new aesJs.Counter(7058))
     const encryptData = aesCtr.encrypt(data)
     self.postMessage(encryptData)

src/plugins/miaoImages/miaoImages.vue

@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import miaoMask from '@/components/miaoMask.vue'
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
-import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
+import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import { uniq } from 'lodash'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
@@ -199,7 +199,7 @@ const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
         // @ts-ignore
         await updateImageSrcList(vItems)
     }
-    miaoMessageRef.value?.message(
+    miaoMessageRef.value?.alertTip(
         length_before === imageFileList.value.length
             ? '未发现任何可添加图片'
             : `导入${imageFileList.value.length - length_before}张图片`,
@@ -247,7 +247,7 @@ onMounted(async () => {
     for (const i of [currentFiles.value, ...currentDirectories.value]) {
         await updateImageSrcList(i)
     }
-    miaoMessageRef.value?.message(
+    miaoMessageRef.value?.alertTip(
         length_before === imageFileList.value.length
             ? '未发现任何新增图片'
             : `导入${imageFileList.value.length - length_before}张图片`,

src/plugins/miaoMarkdown/miaoMarkdown.vue

@@ -28,7 +28,7 @@ const md = new MarkdownIt()
 
 onMounted(async () => {
   markdownSrc.value = currentFiles.value[0].url
-  const text = decoder.decode(await miaoFetchApi.getFile(currentFiles.value[0]))
+  const text = decoder.decode(await(miaoFetchApi.getFile(currentFiles.value[0])).response)
   renderedMarkdown.value = md.render(text)
 })
 </script>

src/plugins/miaoPDF/miaoPDF.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
+import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
 import { onMounted, ref, shallowReactive } from 'vue'
 import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
 import { VirtualFile } from '@/class/VirtualDirectory'
@@ -89,7 +89,7 @@ const handleResetMargin = () => {
 }
 
 onMounted(async () => {
-    const setLoadingMessage = miaoMessageRef.value?.message('加载PDF插件中', {
+    const setLoadingMessage = miaoMessageRef.value?.alertTip('加载PDF插件中', {
         type: 'info',
         timeout: -1
     })

src/plugins/miaoPluginTemplate/template.vue

@@ -3,11 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import { VirtualFile } from '@/class/VirtualDirectory'
+// import { VirtualFile } from '@/class/VirtualDirectory'
 
-const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
-})
+// const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+//     required: true
+// })
 
 </script>