feat: 1.现在miaoFetchApi.getFile始终返回Promise<uint8array>. 2.增加文件加/解密插件，样式还没写，加密功能是挺正常的。3.加了个插件模板

src/plugins/miaoCodeMirror/miaoCodeMirror.vue

@@ -1,12 +1,23 @@
 <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>
-                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
+                <div
+                    class="codemirror-container-btn codemirror-container-btn-save"
+                    @click="handleSave">
+                    保存
+                </div>
+                <div
+                    class="codemirror-container-btn codemirror-container-btn-save"
+                    @click="handleReset">
+                    恢复到上次保存
+                </div>
             </div>
             <div class="codemirror-container-main">
-                <NScrollbar style="max-height: calc( 100% );">
+                <NScrollbar style="max-height: calc(100%)">
                     <codemirror v-model="codeData" :extensions="extensions" />
                 </NScrollbar>
             </div>
@@ -28,6 +39,8 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 })
 
+const decoder = new TextDecoder('utf-8')
+
 const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
 const vFile = ref<VirtualFile>()
 const rootRef = ref<HTMLDivElement>()
@@ -60,7 +73,6 @@ const handleSave = async () => {
         timeout: 5000,
         type: 'success'
     })
-
 }
 
 const handleReset = async () => {
@@ -87,7 +99,12 @@ const getLangExtensions = async (fileName: string) => {
         case 'ts':
         case 'tsx':
             const { javascript } = await import('@codemirror/lang-javascript')
-            return [javascript({ jsx: ext.substring(2, 3) === 'x', typescript: ext.substring(0, 2) === 'js', })]
+            return [
+                javascript({
+                    jsx: ext.substring(2, 3) === 'x',
+                    typescript: ext.substring(0, 2) === 'js'
+                })
+            ]
             break
         case 'css':
         case 'scss':
@@ -134,16 +151,15 @@ const getLangExtensions = async (fileName: string) => {
 onMounted(async () => {
     vFile.value = currentFiles.value[0]
     const fileName = currentFiles.value[0].name
-    codeData.value = (
+    codeData.value = decoder.decode(
         await miaoFetchApi.getFile(currentFiles.value[0], {
             axiosOption: {
-                responseType: 'text',
                 headers: {
                     'Cache-Control': 'no-cache'
                 }
             }
         })
-    ).toString()
+    )
     bakData.value = codeData.value
     extensions.value = [...(await getLangExtensions(fileName))]
 

src/plugins/miaoCrypto/export.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import { registerComponentOption } from '@/class/PluginCenter'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoCrypto',
+    name: '文件加密',
+    getComponent: async () =>
+        (await import('./miaoCrypto.vue')).default,
+    filter: (vDirs, vFiles) => {
+        return true
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        return vFiles[0].name.endsWith('txt')
+    },
+}
+
+export default pluginConfig

src/plugins/miaoCrypto/hooks/AES.ts

@@ -0,0 +1,19 @@
+import aesJs from 'aes-js'
+import aes_worker from '../workers/aes-worker?worker'
+
+/**
+ * 使用worker进行aes加密
+ * @param {any} key:string 须保证长度正确
+ * @param {any} data:Uint8Array
+ * @returns {Uint8Array}
+ */
+export default (key: string, data: Uint8Array) => {
+    const key_u8i = aesJs.utils.utf8.toBytes(key)
+    return new Promise<Uint8Array>((resolve) => {
+        const aesWorker = new aes_worker()
+        aesWorker.onmessage = (event) => {
+            resolve(event.data)
+        }
+        aesWorker.postMessage({ data, key: key_u8i })
+    })
+}

src/plugins/miaoCrypto/miaoCrypto.vue

@@ -0,0 +1,164 @@
+<template>
+    <miao-drop-handler @on-virtual-files="handleDropVirtualFiles">
+        <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>
+                        <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>
+    </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar } from 'naive-ui'
+import { ref } from 'vue'
+import aes_ctr_worker from './hooks/AES'
+import { VirtualFile } from '@/class/VirtualDirectory'
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import { reactive } from 'vue'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+import { onMounted } from 'vue'
+import { computed } from 'vue'
+
+const miaoFetchApi = useMiaoFetchApi()
+
+interface workItem {
+    status: 'wait' | 'process' | 'finish'
+    buffer?: Uint8Array
+    getBuffer: () => Promise<Uint8Array>
+    isGettingBuffer: boolean
+    name: string
+}
+
+class Work {
+    constructor(func: (key: string, data: Uint8Array) => Promise<Uint8Array>) {
+        this.queue = []
+        this.func = func
+    }
+    queue: workItem[]
+    func: (key: string, data: Uint8Array) => Promise<Uint8Array>
+    get isBusy() {
+        return this.queue.filter((v) => v.status === 'process').length > 0
+    }
+    async funcLoop() {
+        if (this.isBusy) {
+            return
+        }
+        const currentItem = this.queue.filter((v) => v.status === 'wait')[0]
+        if (currentItem === undefined || currentItem.buffer === undefined) {
+            return
+        }
+        currentItem.status = 'process'
+        currentItem.buffer = await this.func(key.value, currentItem.buffer)
+        currentItem.status = 'finish'
+        this.funcLoop()
+    }
+    async getBufferLoop() {
+        const _list = this.queue.filter(
+            (v) => v.isGettingBuffer === false && v.buffer === undefined
+        )
+        if (_list.length === 0) {
+            return
+        }
+        const item = _list[0]
+        item.isGettingBuffer = true
+        item.buffer = await item.getBuffer()
+        item.isGettingBuffer = false
+        this.funcLoop()
+        this.getBufferLoop()
+    }
+    push(itemList: workItem[]) {
+        this.queue.push(...itemList)
+        this.getBufferLoop()
+    }
+    pushVFiles(itemList: VirtualFile[]) {
+        this.push(
+            itemList.map((v) => ({
+                name: v.name,
+                getBuffer: () => miaoFetchApi.getFile(v),
+                status: 'wait',
+                isGettingBuffer: false
+            }))
+        )
+    }
+}
+
+const encryptWork = reactive(new Work(aes_ctr_worker))
+// const decryptWork = reactive(new Work(aes_ctr_worker))
+
+const workItemList = computed(() => [
+    ...encryptWork.queue
+    // ...decryptWork.queue
+])
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+const key = ref('ABlockIs16Bytes!')
+
+const handleDropVirtualFiles = (vFiles: VirtualFile[]) => {
+    encryptWork.pushVFiles(vFiles)
+}
+
+onMounted(() => {
+    encryptWork.pushVFiles(currentFiles.value)
+})
+</script>
+
+<style scoped lang="scss">
+.miaoCrypto-container {
+    width: 100%;
+    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%;
+            height: 40px;
+            background-color: #fff;
+            box-shadow: 0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
+                0 0 3px 1px #43434359;
+            border-radius: 5px;
+            position: relative;
+            .miaoCrypto-container-item-percentBar {
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+            .miaoCrypto-container-item-content {
+                position: relative;
+                z-index: 3
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,10 @@
+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/miaoMarkdown/miaoMarkdown.vue

@@ -12,6 +12,9 @@ import { onMounted, ref } from 'vue'
 import MarkdownIt from 'markdown-it'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
 
+
+    const decoder = new TextDecoder('utf-8');
+
 const miaoFetchApi = useMiaoFetchApi()
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
@@ -25,7 +28,7 @@ const md = new MarkdownIt()
 
 onMounted(async () => {
   markdownSrc.value = currentFiles.value[0].url
-  const text = (await miaoFetchApi.getFile(currentFiles.value[0])).toString()
+  const text = decoder.decode(await miaoFetchApi.getFile(currentFiles.value[0]))
   renderedMarkdown.value = md.render(text)
 })
 </script>

src/plugins/miaoPluginTemplate/_export.ts

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import { registerComponentOption } from '@/class/PluginCenter'
+
+const pluginConfig: registerComponentOption = {
+    key: 'yourPluginKey',
+    name: 'yourPluginName',
+    // icon: LogoChrome,
+    getComponent: async () => null,
+        // (await import('yourPluginPath')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        return vFiles[0].name.endsWith('?')
+    },
+    disable: true
+}
+
+export default pluginConfig

src/plugins/miaoPluginTemplate/template.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="miaoCrypto-container"></div>
+</template>
+
+<script setup lang="ts">
+import { VirtualFile } from '@/class/VirtualDirectory'
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+</script>
+
+<style scoped lang="scss">
+.miaoCrypto-container {
+    width: 100%;
+    height: 100%;
+}
+</style>