From 3a18bb3cbd0e7f14a7edc65b6bbc53229a2d1665 Mon Sep 17 00:00:00 2001
From: Zhoujiahui <539943419@qq.com>
Date: Wed, 4 Sep 2024 17:30:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=201.=E7=8E=B0=E5=9C=A8miaoFetchApi.getFil?=
 =?UTF-8?q?e=E5=A7=8B=E7=BB=88=E8=BF=94=E5=9B=9EPromise<uint8array>.=202.?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=96=87=E4=BB=B6=E5=8A=A0/=E8=A7=A3?=
 =?UTF-8?q?=E5=AF=86=E6=8F=92=E4=BB=B6=EF=BC=8C=E6=A0=B7=E5=BC=8F=E8=BF=98?=
 =?UTF-8?q?=E6=B2=A1=E5=86=99=EF=BC=8C=E5=8A=A0=E5=AF=86=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E6=98=AF=E6=8C=BA=E6=AD=A3=E5=B8=B8=E7=9A=84=E3=80=823.?=
 =?UTF-8?q?=E5=8A=A0=E4=BA=86=E4=B8=AA=E6=8F=92=E4=BB=B6=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   1 +
 package.json                                  |   2 +
 pnpm-lock.yaml                                |  16 ++
 src/hooks/useMiaoFetchApi.ts                  |  16 +-
 src/plugins/miaoCodeMirror/miaoCodeMirror.vue |  34 +++-
 src/plugins/miaoCrypto/export.ts              |  21 +++
 src/plugins/miaoCrypto/hooks/AES.ts           |  19 ++
 src/plugins/miaoCrypto/miaoCrypto.vue         | 164 ++++++++++++++++++
 src/plugins/miaoCrypto/workers/aes-worker.ts  |  10 ++
 src/plugins/miaoMarkdown/miaoMarkdown.vue     |   5 +-
 src/plugins/miaoPluginTemplate/_export.ts     |  22 +++
 src/plugins/miaoPluginTemplate/template.vue   |  19 ++
 12 files changed, 313 insertions(+), 16 deletions(-)
 create mode 100644 src/plugins/miaoCrypto/export.ts
 create mode 100644 src/plugins/miaoCrypto/hooks/AES.ts
 create mode 100644 src/plugins/miaoCrypto/miaoCrypto.vue
 create mode 100644 src/plugins/miaoCrypto/workers/aes-worker.ts
 create mode 100644 src/plugins/miaoPluginTemplate/_export.ts
 create mode 100644 src/plugins/miaoPluginTemplate/template.vue

diff --git a/README.md b/README.md
index e46d872..7994f83 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@
 | 完善PDF插件 | ✅ |
 | 完善Code插件 | ✅ |
 | 实现miaoDirectory的搜索功能 | ✅ |
+| 重构miaoFetchApi.getFile， 增加进度 | ❌ |
 | plugin增加些属性，icon, disable, group之类的 | ❌ |
 | 完善miaoDirectory的搜索功能 | ❌ |
 | 实现miaoDirectory的排序功能 | ❌ |
diff --git a/package.json b/package.json
index 531242e..773f364 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.1",
         "@vicons/ionicons5": "^0.12.0",
+        "aes-js": "^3.1.2",
         "axios": "^1.7.3",
         "codemirror": "^6.0.1",
         "lodash": "^4.17.21",
@@ -37,6 +38,7 @@
         "xgplayer-subtitles": "^3.0.20"
     },
     "devDependencies": {
+        "@types/aes-js": "^3.1.4",
         "@types/lodash": "^4.17.7",
         "@types/markdown-it": "^14.1.2",
         "@types/node": "^22.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 599b3dd..3c8726e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@vicons/ionicons5':
         specifier: ^0.12.0
         version: 0.12.0
+      aes-js:
+        specifier: ^3.1.2
+        version: 3.1.2
       axios:
         specifier: ^1.7.3
         version: 1.7.3
@@ -78,6 +81,9 @@ importers:
         specifier: ^3.0.20
         version: 3.0.20(core-js@3.38.1)
     devDependencies:
+      '@types/aes-js':
+        specifier: ^3.1.4
+        version: 3.1.4
       '@types/lodash':
         specifier: ^4.17.7
         version: 4.17.7
@@ -480,6 +486,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@types/aes-js@3.1.4':
+    resolution: {integrity: sha512-v3D66IptpUqh+pHKVNRxY8yvp2ESSZXe0rTzsGdzUhEwag7ljVfgCllkWv2YgiYXDhWFBrEywll4A5JToyTNFA==}
+
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -579,6 +588,9 @@ packages:
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
+  aes-js@3.1.2:
+    resolution: {integrity: sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==}
+
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -1614,6 +1626,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.20.0':
     optional: true
 
+  '@types/aes-js@3.1.4': {}
+
   '@types/estree@1.0.5': {}
 
   '@types/katex@0.16.7': {}
@@ -1753,6 +1767,8 @@ snapshots:
   abbrev@1.1.1:
     optional: true
 
+  aes-js@3.1.2: {}
+
   agent-base@6.0.2:
     dependencies:
       debug: 4.3.6
diff --git a/src/hooks/useMiaoFetchApi.ts b/src/hooks/useMiaoFetchApi.ts
index e336d22..016019e 100644
--- a/src/hooks/useMiaoFetchApi.ts
+++ b/src/hooks/useMiaoFetchApi.ts
@@ -11,14 +11,16 @@ import {
     mkdirOption
 } from '@/types/fetch'
 import Config from '@/config'
-import axios, { AxiosRequestConfig } from 'axios'
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
 
 export const useMiaoFetch = (option?: miaoFetchConfig) => {
     const retry = option?.retry ?? 0
     const controller = new AbortController()
     let flag = true
     return {
-        miaoFetch: async (config: AxiosRequestConfig<any>) => {
+        miaoFetch: async (
+            config: AxiosRequestConfig<any>
+        ): Promise<AxiosResponse<any, any>> => {
             let counter = 0
             let response: any
             let errList = []
@@ -68,12 +70,12 @@ const miaoFetchApi = {
     },
 
     /**
-     * 获取对应文件夹下的数据
+     * 获取对应文件下的数据
      */
     async getFile(
         vFile: VirtualFile,
         option?: getOption
-    ): Promise<getResponse> {
+    ) {
         // const { baseUrl, api } = Config
         const url = vFile.url
         const retry = option?.retry ?? 0
@@ -83,9 +85,11 @@ const miaoFetchApi = {
             retry
         })
         const response = await miaoFetch({
-            url, ...axiosOption
+            url,
+            responseType: 'arraybuffer',
+            ...axiosOption
         })
-        return response.data
+        return new Uint8Array(response.data)
     },
 
     /**
diff --git a/src/plugins/miaoCodeMirror/miaoCodeMirror.vue b/src/plugins/miaoCodeMirror/miaoCodeMirror.vue
index 60f9325..92b3bdb 100644
--- a/src/plugins/miaoCodeMirror/miaoCodeMirror.vue
+++ b/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))]
 
diff --git a/src/plugins/miaoCrypto/export.ts b/src/plugins/miaoCrypto/export.ts
new file mode 100644
index 0000000..a8685cc
--- /dev/null
+++ b/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
diff --git a/src/plugins/miaoCrypto/hooks/AES.ts b/src/plugins/miaoCrypto/hooks/AES.ts
new file mode 100644
index 0000000..ab786b7
--- /dev/null
+++ b/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 })
+    })
+}
diff --git a/src/plugins/miaoCrypto/miaoCrypto.vue b/src/plugins/miaoCrypto/miaoCrypto.vue
new file mode 100644
index 0000000..fc5b9b2
--- /dev/null
+++ b/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>
diff --git a/src/plugins/miaoCrypto/workers/aes-worker.ts b/src/plugins/miaoCrypto/workers/aes-worker.ts
new file mode 100644
index 0000000..472fb38
--- /dev/null
+++ b/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)
+}
diff --git a/src/plugins/miaoMarkdown/miaoMarkdown.vue b/src/plugins/miaoMarkdown/miaoMarkdown.vue
index 12e095d..4a2cf32 100644
--- a/src/plugins/miaoMarkdown/miaoMarkdown.vue
+++ b/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>
diff --git a/src/plugins/miaoPluginTemplate/_export.ts b/src/plugins/miaoPluginTemplate/_export.ts
new file mode 100644
index 0000000..dc57b94
--- /dev/null
+++ b/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
diff --git a/src/plugins/miaoPluginTemplate/template.vue b/src/plugins/miaoPluginTemplate/template.vue
new file mode 100644
index 0000000..96377b3
--- /dev/null
+++ b/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>