539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

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

Browse Source
This commit is contained in:
539943419 committed 2024-09-04 17:30:22 +08:00
1 parent 282bf327bb
commit 3a18bb3cbd
12 files changed
+313 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+1
View File
@@ -7,6 +7,7 @@
| 完善PDF插件 | ✅ |
| 完善Code插件 | ✅ |
| 实现miaoDirectory的搜索功能 | ✅ |
| 重构miaoFetchApi.getFile， 增加进度 | ❌ |
| plugin增加些属性，icon, disable, group之类的 | ❌ |
| 完善miaoDirectory的搜索功能 | ❌ |
| 实现miaoDirectory的排序功能 | ❌ |
package.json
+2
View File
@@ -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",
pnpm-lock.yaml
Generated
+16
View File
@@ -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
src/hooks/useMiaoFetchApi.ts
+10 -6
View File
@@ -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)
},
/**
src/plugins/miaoCodeMirror/miaoCodeMirror.vue
+25 -9
View File
@@ -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
+21
View File
@@ -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
+19
View File
@@ -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
+164
View File
@@ -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
+10
View File
@@ -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
+4 -1
View File
@@ -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
+22
View File
@@ -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
+19
View File
@@ -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>