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

Merge branch 'main' of http://git.miaospring.top:3000/539943419/miaoDirectory

Browse Source
This commit is contained in:
539943419 committed 2024-09-26 17:02:41 +08:00
2 parents 54c48c0f8f f2ff05f4e3
commit 96ca8fcf4c
32 files changed
+833 -600
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+1
View File
@@ -27,6 +27,7 @@
"aes-js": "^3.1.2",
"axios": "^1.7.3",
"codemirror": "^6.0.1",
"copy-to-clipboard": "^3.3.3",
"lodash": "^4.17.21",
"markdown-it": "^14.1.0",
"naive-ui": "^2.39.0",
pnpm-lock.yaml
Generated
+15
View File
@@ -53,6 +53,9 @@ importers:
codemirror:
specifier: ^6.0.1
version: 6.0.1(@lezer/common@1.2.1)
copy-to-clipboard:
specifier: ^3.3.3
version: 3.3.3
lodash:
specifier: ^4.17.21
version: 4.17.21
@@ -672,6 +675,9 @@ packages:
console-control-strings@1.1.0:
resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
copy-to-clipboard@3.3.3:
resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
core-js@3.38.1:
resolution: {integrity: sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==}
@@ -1103,6 +1109,9 @@ packages:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
engines: {node: '>=8.0'}
toggle-selection@1.0.6:
resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
tr46@0.0.3:
resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
@@ -1877,6 +1886,10 @@ snapshots:
console-control-strings@1.1.0:
optional: true
copy-to-clipboard@3.3.3:
dependencies:
toggle-selection: 1.0.6
core-js@3.38.1: {}
crelt@1.0.6: {}
@@ -2371,6 +2384,8 @@ snapshots:
dependencies:
is-number: 7.0.0
toggle-selection@1.0.6: {}
tr46@0.0.3:
optional: true
src/App.vue
+66 -85
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { h, onMounted, reactive, ref, shallowRef } from 'vue'
import { h, onMounted, provide, reactive, ref, shallowRef, useTemplateRef } from 'vue'
import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
import {
EyeOffOutline,
@@ -11,10 +11,12 @@ import {
} from '@vicons/ionicons5'
import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
import MiaoMask from './components/miaoMask.vue'
import MiaoMessageProvider from './components/miaoAlertTipProvider.vue'
import config from './config'
import useVirtualPages from './hooks/useVirtualPages'
import init from './hooks/init'
import usePluginCenter from './hooks/usePluginCenter'
import PluginCenter from './class/PluginCenter'
const { baseUrl } = config
@@ -25,8 +27,10 @@ const modalData = shallowRef<{
props: any
}>()
const messageProviderRef = useTemplateRef('messageProviderRef')
const views = useVirtualPages()
const pluginCenter = usePluginCenter()
let pluginCenter: PluginCenter
const rootDirectory = reactive(
new VirtualDirectory({
@@ -105,107 +109,83 @@ const handleMenuSelect = async (key: string) => {
}
onMounted(async () => {
await init()
// @ts-ignore
await init(messageProviderRef.value?.alertTip)
pluginCenter = usePluginCenter()
pluginCenter.usePlugin('miaoDirectory', [rootDirectory], [])
// createView(miaoDirectory, [rootDirectory])
console.log(rootDirectory.tree)
})
// @ts-ignore
provide('globalAlertTip', messageProviderRef.value?.alertTip)
provide('rootDirectory', rootDirectory)
</script>
<template>
<div class="view">
<div class="view-controller">
<n-scrollbar x-scrollable>
<div class="tabs-container">
<transition-group name="tab">
<div
class="tab"
v-for="(view, index) of views._views"
:key="view.id">
<span
class="tab-title"
:title="view.title"
@click="handleClickTitle(index)">
{{
view.title.length > 5 && 0
? `${view.title.substring(0, 5)}...`
: view.title
}}
</span>
<div
class="tab-point"
:style="{ backgroundColor: view.color }"></div>
<div class="tab-control">
<n-icon
class="tag-control-icon icon"
@click="view.switchShow()">
<EyeOutline
v-show="view.visible"
class="icon-inner" />
<EyeOffOutline
v-show="!view.visible"
class="icon-inner" />
</n-icon>
<n-icon
class="tag-control-icon icon"
@click="
<miao-message-provider ref="messageProviderRef">
<div class="view-controller">
<n-scrollbar x-scrollable>
<div class="tabs-container">
<transition-group name="tab">
<div class="tab" v-for="(view, index) of views._views" :key="view.id">
<span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
{{
view.title.length > 5 && 0
? `${view.title.substring(0, 5)}...`
: view.title
}}
</span>
<div class="tab-point" :style="{ backgroundColor: view.color }"></div>
<div class="tab-control">
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
<EyeOutline v-show="view.visible" class="icon-inner" />
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
</n-icon>
<n-icon class="tag-control-icon icon" @click="
createView(
view.component,
view.currentDirectories,
view.currentFiles,
index + 1
)
">
<CopyOutline />
</n-icon>
<n-icon
class="tag-control-icon icon"
@click="deleteView(index)">
<CloseOutline class="icon-inner" />
</n-icon>
">
<CopyOutline />
</n-icon>
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
<CloseOutline class="icon-inner" />
</n-icon>
</div>
</div>
</div>
</transition-group>
</div>
</n-scrollbar>
<div class="view-controller-menu">
<div class="view-controller-menu-item">
<n-dropdown
trigger="click"
:options="openMenuOption"
@select="handleMenuSelect">
<n-icon class="icon">
<EllipsisVertical class="icon-inner" />
</n-icon>
</n-dropdown>
</transition-group>
</div>
</n-scrollbar>
<div class="view-controller-menu">
<div class="view-controller-menu-item">
<n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
<n-icon class="icon">
<EllipsisVertical class="icon-inner" />
</n-icon>
</n-dropdown>
</div>
</div>
</div>
</div>
<div class="view-container">
<transition-group name="page">
<div
class="view-container-item"
v-for="(view, index) of views._views"
v-show="view.visible"
:key="view.id">
<component
:is="view.component"
v-model:current-directories="view.currentDirectories"
v-model:current-files="view.currentFiles"
:id="view.id"
:color="view.color"
:view="view"
:views="views"
@exit="deleteView(index)"></component>
</div>
</transition-group>
</div>
<div class="view-container">
<transition-group name="page">
<div class="view-container-item" v-for="(view, index) of views._views" v-show="view.visible"
:key="view.id">
<component :is="view.component" v-model:current-directories="view.currentDirectories"
v-model:current-files="view.currentFiles" :id="view.id" :color="view.color" :view="view"
:views="views" @exit="deleteView(index)"></component>
</div>
</transition-group>
</div>
</miao-message-provider>
</div>
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
<MiaoMask v-model:show="showModal" @click="showModal = false">
<component
@click="(e: any) => e.stopPropagation()"
:is="modalData?.component"
v-bind="modalData?.props"></component>
<component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
</component>
</MiaoMask>
</template>
@@ -369,6 +349,7 @@ $tag-width: 170px;
.view {
.view-controller {
.tabs-container {
.tab-move,
.tab-enter-active {
transition: all 0.2s ease;
src/class/PluginCenter.ts
+105 -110
View File
@@ -1,124 +1,119 @@
import useVirtualPages from '@/hooks/useVirtualPages'
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
import { ShallowRef, shallowRef } from 'vue'
import useVirtualPages from "@/hooks/useVirtualPages";
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
import { ShallowRef, shallowRef } from "vue";
import { alertTipType, usePluginHooksType } from "@/types/type";
export enum PluginGroup {
default = 'default',
mainMenu = 'mainMenu'
default = "default",
mainMenu = "mainMenu"
}
export interface registerComponentOption {
key: string
name: string
icon?: any
getComponent: () => Promise<any>
group?: PluginGroup[]
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
disable?: boolean
exitConfirm?: boolean
key: string;
name: string;
icon?: any;
getComponent: () => Promise<any>;
group?: PluginGroup[];
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
disable?: boolean;
exitConfirm?: boolean;
}
type Plugin = {
// 用于显示的名字
name: string
// 代表插件的icon
icon?: ShallowRef<any>
// 是否禁用插件
disable: boolean
// 插件所属的group，用于区分插件使用的场合
group: PluginGroup[]
// 判断在未禁用时是否可以使用这个组件
// 使用组件即调用下面的func
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
func: (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
...args: any[]
) => void
}
export type Plugin = {
// 用于显示的名字
name: string;
// 代表插件的icon
icon?: ShallowRef<any>;
// 是否禁用插件
disable: boolean;
// 插件所属的group，用于区分插件使用的场合
group: PluginGroup[];
// 判断在未禁用时是否可以使用这个组件
// 使用组件即调用下面的func
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
func: (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
hooks: usePluginHooksType,
...args: any[]
) => void;
};
export default class PluginCenter {
constructor() {
this.pluginsMap = {}
}
pluginsMap: {
[key: string]: Plugin
}
constructor(globalAlertTip: alertTipType) {
this.pluginsMap = {};
this.globalAlertTip = globalAlertTip;
}
pluginsMap: {
[key: string]: Plugin;
};
register(key: string, plugin: Plugin) {
this.pluginsMap[key] = plugin
}
globalAlertTip: alertTipType;
/**
* 便捷地注册一个组件为插件，触发时直接用新页面打开
*/
registerComponent(option: registerComponentOption): void {
const {
key,
name,
getComponent,
icon,
filter,
group = [PluginGroup.default],
disable = false,
exitConfirm = false
} = option
let _component: any
const views = useVirtualPages()
this.register(key, {
name,
filter,
icon: shallowRef(icon),
group,
disable,
func: async (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
) => {
if (filter(VDirectories, VFiles) === false) {
return
}
if (_component === undefined) _component = await getComponent()
views.push(_component, VDirectories, VFiles, {
VirtualPageOption: {
exitConfirm
}
})
}
})
}
register(key: string, plugin: Plugin) {
this.pluginsMap[key] = plugin;
}
getUsablePlugin(
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
option?: {
group?: PluginGroup[]
}
) {
const { group = [PluginGroup.default] } = option ?? {}
const usableList = []
for (let key of Object.keys(this.pluginsMap)) {
const _plugin = this.pluginsMap[key]
if (
!_plugin.disable &&
_plugin.group.filter((v) => group.includes(v)).length > 0 &&
_plugin.filter(VDirectories, VFiles)
) {
usableList.push(key)
}
}
return usableList.map((key) => ({
key,
...this.pluginsMap[key]
}))
}
/**
* 便捷地注册一个组件为插件，触发时直接用新页面打开
*/
registerComponent(option: registerComponentOption): void {
const { key, name, getComponent, icon, filter, group = [PluginGroup.default], disable = false, exitConfirm = false } = option;
let _component: any;
const views = useVirtualPages();
this.register(key, {
name,
filter,
icon: shallowRef(icon),
group,
disable,
func: async (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => {
if (filter(VDirectories, VFiles) === false) {
return;
}
usePlugin(
key: string,
VDirectories?: VirtualDirectory[],
VFiles?: VirtualFile[],
...args: any[]
) {
this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], ...args)
}
if (_component === undefined) {
const setAlertTip = key !== "miaoDirectory" && this.globalAlertTip(`加载 ${name} 插件中`);
_component = await getComponent();
setAlertTip &&
setAlertTip(`加载 ${name} 插件完成`, {
type: "success",
timeout: 2000
});
}
views.push(_component, VDirectories, VFiles, {
VirtualPageOption: {
exitConfirm
}
});
}
});
}
getUsablePlugin(
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
option?: {
group?: PluginGroup[];
}
) {
const { group = [PluginGroup.default] } = option ?? {};
const usableList = [];
for (let key of Object.keys(this.pluginsMap)) {
const _plugin = this.pluginsMap[key];
if (!_plugin.disable && _plugin.group.filter(v => group.includes(v)).length > 0 && _plugin.filter(VDirectories, VFiles)) {
usableList.push(key);
}
}
return usableList.map(key => ({
key,
...this.pluginsMap[key]
}));
}
usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]) {
this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], {
globalAlertTip: this.globalAlertTip
}, ...args);
}
}
src/class/VirtualDirectory.ts
+34 -1
View File
@@ -6,6 +6,21 @@ import type { stats, file, directory } from "@/types/type.ts";
const miaoFetchApi = useMiaoFetchApi();
export interface Tree {
name: string;
type: 'directory';
path: string;
stats: stats;
files?: {
name: string;
type: 'file';
size: number;
stats: stats;
url: string;
}[];
directories?: Tree[];
}
export class VirtualFile {
constructor(info: file, parent: VirtualDirectory) {
this.name = info.name;
@@ -26,7 +41,7 @@ export class VirtualFile {
}
get url() {
return `${config.api.get}${this.parent.path}${this.name}`
return `${config.api.get}${this.parent.path}${this.name}`;
}
}
@@ -96,6 +111,24 @@ class VirtualDirectory {
return this.parent.getParent(layer - 1);
}
get tree(): Tree {
return {
name: this.name,
type: this.type,
path: this.path,
stats: this.stats,
files:
this.files?.map(v => ({
name: v.name,
type: v.type,
size: v.size,
stats: v.stats,
url: v.url
})) ?? [],
directories: this.directories?.map(v => v.tree) ?? []
};
}
updateContent(content: (file | directory)[]) {
this.files = this.files ?? [];
this.directories = this.directories ?? [];
src/components/miaoMessageProvider.vue → src/components/miaoAlertTipProvider.vue
+6 -10
View File
@@ -18,12 +18,7 @@ import generateId from '@/hooks/generateId';
import { NIcon } from 'naive-ui';
import { computed, onMounted, ref, shallowReactive } from 'vue';
import { InformationCircle, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
interface MessageOptions {
type?: 'info' | 'success' | 'error'
timeout?: number
id?: number
}
import { AlertTipMessageOptions } from '@/types/type';
interface Message {
icon: any,
@@ -48,7 +43,7 @@ const messageList = computed(() => {
...messageMap[v],
}))
})
const message = (content: string, options?: MessageOptions) => {
const alertTip = (content: string, options?: AlertTipMessageOptions) => {
let timer: any
const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
if (timeout > 0) {
@@ -63,10 +58,10 @@ const message = (content: string, options?: MessageOptions) => {
content,
timer
}
return (newContent: string, newOptions?: MessageOptions) => {
return (newContent: string, newOptions?: AlertTipMessageOptions) => {
newOptions = newOptions ?? {}
newOptions.id = id
message(newContent, newOptions)
alertTip(newContent, newOptions)
}
}
@@ -86,7 +81,7 @@ onMounted(async () => {
})
defineExpose({ message });
defineExpose({ alertTip });
</script>
<style scoped lang="scss">
@@ -105,6 +100,7 @@ defineExpose({ message });
flex-direction: column;
align-items: center;
overflow: visible;
z-index: 70582140539943419;
.miao-message {
display: flex;
src/hooks/buildFromTree.ts
+15
View File
@@ -0,0 +1,15 @@
import VirtualDirectory, { Tree, VirtualFile } from "@/class/VirtualDirectory";
/**
* 通过VirtualDirectory的.tree重建文件夹树
* @param {any} data:Tree
* @returns {any}
*/
const buildFromTree = (data: Tree) => {
const root = new VirtualDirectory(data)
root.files = data.files?.map(v=>new VirtualFile(v, root))
root.directories = data.directories?.map(v=>buildFromTree(v))
return root
}
export default buildFromTree;
src/hooks/init.ts
+3 -2
View File
@@ -1,5 +1,6 @@
import { alertTipType } from "@/types/type";
import initPlugin from "./init/initPlugin";
export default async function init() {
await initPlugin()
export default async function init(globalAlertTip: alertTipType) {
await initPlugin(globalAlertTip)
}
src/hooks/init/initPlugin.ts
+30 -14
View File
@@ -1,16 +1,32 @@
import usePluginCenter, { initPluginCenter } from "@/hooks/usePluginCenter";
import { Plugin, registerComponentOption } from "@/class/PluginCenter";
import { alertTipType, PluginExportType } from "@/types/type";
import usePluginCenter from '@/hooks/usePluginCenter'
import { registerComponentOption } from '@/class/PluginCenter'
const initPlugin = async (globalAlertTip: alertTipType) => {
initPluginCenter(globalAlertTip)
const modulesFiles = import.meta.glob("@/plugins/**/export.ts");
const pluginCenter = usePluginCenter();
const promiseArray = [];
for (let pluginConfig of Object.values(modulesFiles)) {
promiseArray.push(
new Promise(async resolve => {
const _config = pluginConfig as () => Promise<{
default: registerComponentOption | Plugin;
type: PluginExportType
key?: string
}>;
const {type, key} = await _config()
if(type === PluginExportType.component) {
// @ts-ignore
resolve(pluginCenter.registerComponent((await _config()).default));
} else if (type === PluginExportType.default) {
// @ts-ignore
resolve(pluginCenter.register(key as string, (await _config()).default));
}
})
);
}
await Promise.all(promiseArray);
};
const initPlugin = async () => {
const modulesFiles = import.meta.glob('@/plugins/**/export.ts')
const pluginCenter = usePluginCenter()
for (let pluginConfig of Object.values(modulesFiles)) {
const _config = pluginConfig as () => Promise<{
default: registerComponentOption
}>
pluginCenter.registerComponent((await _config()).default)
}
}
export default initPlugin
export default initPlugin;
src/hooks/useMiaoFetchApi.ts
+252 -269
View File
@@ -1,291 +1,274 @@
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
import {
getOption,
getResponse,
miaoFetchConfig,
deleteOption,
uploadOption,
queryOption,
renameOption,
cutOption,
mkdirOption
} from '@/types/fetch'
import Config from '@/config'
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
getOption,
getResponse,
miaoFetchConfig,
deleteOption,
uploadOption,
queryOption,
renameOption,
cutOption,
mkdirOption,
getFileOption
} from "@/types/fetch";
import Config from "@/config";
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>
): Promise<AxiosResponse<any, any>> => {
let counter = 0
let response: any
let errList = []
while (flag && counter <= retry) {
try {
response = await axios({
...config,
signal: controller.signal
})
return response
} catch (_e) {
errList.push(_e)
counter += 1
}
}
throw errList
},
/**
* 强制终止miaoFetch
*/
abortMiaoFetch: () => {
flag = false
controller.abort()
}
}
}
const retry = option?.retry ?? 0;
const controller = new AbortController();
let flag = true;
return {
miaoFetch: async (config: AxiosRequestConfig<any>): Promise<AxiosResponse<any, any>> => {
let counter = 0;
let response: any;
let errList = [];
while (flag && counter <= retry) {
try {
response = await axios({
...config,
signal: controller.signal
});
return response;
} catch (_e) {
errList.push(_e);
counter += 1;
}
}
throw errList;
},
/**
* 强制终止miaoFetch
*/
abortMiaoFetch: () => {
flag = false;
controller.abort();
}
};
};
const miaoFetchApi = {
/**
* 获取对应文件夹下的数据
*/
async get(
vDirectory: VirtualDirectory,
option?: getOption
): Promise<getResponse> {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.get}${vDirectory.path}`
const retry = option?.retry ?? 0
/**
* 获取对应文件夹下的数据
*/
async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.get}${vDirectory.path}`;
const retry = option?.retry ?? 0;
const { miaoFetch } = useMiaoFetch({
retry
})
const response = await miaoFetch({
url
})
return response.data
},
const { miaoFetch } = useMiaoFetch({
retry
});
const response = await miaoFetch({
url
});
return response.data;
},
/**
* 获取对应文件下的数据
*/
async getFile(
vFile: VirtualFile,
option?: getOption
) {
// const { baseUrl, api } = Config
const url = vFile.url
const retry = option?.retry ?? 0
const axiosOption = option?.axiosOption ?? {}
/**
* 获取对应文件下的数据
*/
getFile(vFile: VirtualFile, option?: getFileOption) {
// const { baseUrl, api } = Config
const url = vFile.url;
const retry = option?.retry ?? 0;
const axiosOption = option?.axiosOption ?? {};
const { miaoFetch } = useMiaoFetch({
retry
})
const response = await miaoFetch({
url,
responseType: 'arraybuffer',
...axiosOption
})
return new Uint8Array(response.data)
},
const { miaoFetch, abortMiaoFetch: abort } = useMiaoFetch({
retry
});
const response = miaoFetch({
url,
responseType: "arraybuffer",
onDownloadProgress(progressEvent) {
option && option.onProcess && option.onProcess(progressEvent.total ? progressEvent.loaded / progressEvent.total : -1);
},
...axiosOption
});
return {
response: new Promise<Uint8Array>(async resolve => {
resolve(new Uint8Array((await response).data));
}),
abort
};
},
/**
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
* 正常上传文件请使用uploadQueue
*/
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.upload}${targetVDir.path}`
const retry = option?.retry ?? 0
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
retry
})
const sizeTotal = data.size
/**
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
* 正常上传文件请使用uploadQueue
*/
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.upload}${targetVDir.path}`;
const retry = option?.retry ?? 0;
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
retry
});
const sizeTotal = data.size;
const opType = option?.type ?? 'write'
const opType = option?.type ?? "write";
const formData = new FormData()
const formData = new FormData();
formData.append('file', data)
// 必须这样传，不然中文乱码
formData.append('fileName', data.name)
formData.append('operateType', opType)
formData.append("file", data);
// 必须这样传，不然中文乱码
formData.append("fileName", data.name);
formData.append("operateType", opType);
return {
abort: () => abortMiaoFetch(),
response: new Promise<{
message: 'success' | 'failed'
error?: string
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: 'post',
data: formData,
onUploadProgress(progressEvent) {
option &&
option.onProcess &&
option.onProcess(progressEvent.loaded / sizeTotal)
}
})
resolve(response.data)
})
}
},
return {
abort: () => abortMiaoFetch(),
response: new Promise<{
message: "success" | "failed";
error?: string;
}>(async resolve => {
const response = await miaoFetch({
url,
method: "post",
data: formData,
onUploadProgress(progressEvent) {
option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
}
});
resolve(response.data);
})
};
},
/**
* 在目标文件夹下创建新的文件夹
*/
mkdir(
targetVDir: VirtualDirectory,
newFolderName: string,
option?: mkdirOption
) {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
const { miaoFetch } = useMiaoFetch({
retry: option?.retry ?? 0
})
/**
* 在目标文件夹下创建新的文件夹
*/
mkdir(targetVDir: VirtualDirectory, newFolderName: string, option?: mkdirOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`;
const { miaoFetch } = useMiaoFetch({
retry: option?.retry ?? 0
});
return new Promise<{
message: 'success' | 'failed'
error?: string
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: 'post',
data: {
folderName: newFolderName
}
})
resolve(response.data)
})
},
/**
* 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
*/
mkFile(
targetVDir: VirtualDirectory,
newFileName: string,
option?: uploadOption
) {
const emptyBlob = new Blob([])
const emptyFile = new File([emptyBlob], newFileName, {
type: 'text/plain'
})
return this.upload(emptyFile, targetVDir, option)
},
return new Promise<{
message: "success" | "failed";
error?: string;
}>(async resolve => {
const response = await miaoFetch({
url,
method: "post",
data: {
folderName: newFolderName
}
});
resolve(response.data);
});
},
/**
* 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
*/
mkFile(targetVDir: VirtualDirectory, newFileName: string, option?: uploadOption) {
const emptyBlob = new Blob([]);
const emptyFile = new File([emptyBlob], newFileName, {
type: "text/plain"
});
return this.upload(emptyFile, targetVDir, option);
},
/**
* 删除对应的文件或文件夹，若为文件夹会递归删除
*/
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.delete}${target.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
})
/**
* 删除对应的文件或文件夹，若为文件夹会递归删除
*/
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.delete}${target.path}`;
const retry = option?.retry ?? 0;
const { miaoFetch } = useMiaoFetch({
retry
});
return {
response: new Promise<{
eventId: number
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: 'post'
})
resolve(response.data)
})
}
},
/**
* 重命名对应的文件或文件夹
*/
rename(
target: VirtualFile | VirtualDirectory,
newName: string,
option?: renameOption
) {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.rename}${target.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
})
return {
response: new Promise<{
eventId: number;
}>(async resolve => {
const response = await miaoFetch({
url,
method: "post"
});
resolve(response.data);
})
};
},
/**
* 重命名对应的文件或文件夹
*/
rename(target: VirtualFile | VirtualDirectory, newName: string, option?: renameOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.rename}${target.path}`;
const retry = option?.retry ?? 0;
const { miaoFetch } = useMiaoFetch({
retry
});
return {
response: new Promise<{
eventId: number
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: 'post',
data: { newName }
})
resolve(response.data)
})
}
},
/**
* 剪切文件或文件夹
*/
cut(
target: VirtualFile | VirtualDirectory,
to: VirtualDirectory,
option?: cutOption
) {
const newPath = to.path
const { baseUrl, api } = Config
const url = `${baseUrl}${api.cut}${target.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
})
return {
response: new Promise<{
eventId: number
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: 'post',
data: { newPath }
})
resolve(response.data)
})
}
},
return {
response: new Promise<{
eventId: number;
}>(async resolve => {
const response = await miaoFetch({
url,
method: "post",
data: { newName }
});
resolve(response.data);
})
};
},
/**
* 剪切文件或文件夹
*/
cut(target: VirtualFile | VirtualDirectory, to: VirtualDirectory, option?: cutOption) {
const newPath = to.path;
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.cut}${target.path}`;
const retry = option?.retry ?? 0;
const { miaoFetch } = useMiaoFetch({
retry
});
return {
response: new Promise<{
eventId: number;
}>(async resolve => {
const response = await miaoFetch({
url,
method: "post",
data: { newPath }
});
resolve(response.data);
})
};
},
/**
* 查询服务端操作事件的进展
*/
query(eventId: number, option?: queryOption) {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.query}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
})
return {
response: new Promise<{
status: 'process' | 'success' | 'failed'
error?: unknown
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: 'get',
params: {
id: eventId
}
})
resolve(response.data)
})
}
}
}
/**
* 查询服务端操作事件的进展
*/
query(eventId: number, option?: queryOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.query}`;
const retry = option?.retry ?? 0;
const { miaoFetch } = useMiaoFetch({
retry
});
return {
response: new Promise<{
status: "process" | "success" | "failed";
error?: unknown;
}>(async resolve => {
const response = await miaoFetch({
url,
method: "get",
params: {
id: eventId
}
});
resolve(response.data);
})
};
}
};
export default function useMiaoFetchApi() {
return miaoFetchApi
return miaoFetchApi;
}
src/hooks/usePluginCenter.ts
+6 -2
View File
@@ -1,11 +1,15 @@
import PluginCenter from "@/class/PluginCenter";
import { alertTipType } from "@/types/type";
import { reactive } from "vue";
let pluginCenter: PluginCenter
export default function usePluginCenter(){
export const initPluginCenter = (globalAlertTip: alertTipType) => {
if(!pluginCenter) {
pluginCenter = reactive(new PluginCenter())
pluginCenter = reactive(new PluginCenter(globalAlertTip))
}
}
export default function usePluginCenter(){
return pluginCenter
}
src/plugins/copyFileUrl2Clipboard/copy.ts
+16
View File
@@ -0,0 +1,16 @@
import { VirtualFile } from "@/class/VirtualDirectory"
import config from "@/config"
import { usePluginHooksType } from "@/types/type"
import copy2Clipboard from 'copy-to-clipboard'
const copy = (__: any, vFiles: VirtualFile[], hooks: usePluginHooksType) => {
const { globalAlertTip } = hooks
const vFile = vFiles[0]
console.log(vFile.url)
copy2Clipboard(`${config.baseUrl}${vFile.url}`)
globalAlertTip(`${vFile.name}的链接已复制至剪切板`, {
type: 'info',
timeout: 2000
})
}
export default copy
src/plugins/copyFileUrl2Clipboard/export.ts
+26
View File
@@ -0,0 +1,26 @@
import { Plugin, PluginGroup } from "@/class/PluginCenter";
import Copy from "./copy";
import { CopyOutline } from "@vicons/ionicons5";
import { PluginExportType } from "@/types/type";
import { shallowRef } from "vue";
const pluginConfig: Plugin = {
name: "复制链接",
icon: shallowRef(CopyOutline),
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false;
}
if (vFiles.length !== 1) {
return false;
}
return true;
},
disable: false,
group: [PluginGroup.default],
func: Copy
};
export default pluginConfig;
export const type = PluginExportType.default;
src/plugins/miaoCodeMirror/export.ts
+3
View File
@@ -1,5 +1,6 @@
import { registerComponentOption } from '@/class/PluginCenter'
import { CodeOutline } from '@vicons/ionicons5'
import { PluginExportType } from '@/types/type'
const pluginConfig: registerComponentOption = {
key: 'miaoCodeMirror',
@@ -40,3 +41,5 @@ const pluginConfig: registerComponentOption = {
}
export default pluginConfig
export const type = PluginExportType.component
src/plugins/miaoCodeMirror/miaoCodeMirror.vue
+8 -15
View File
@@ -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/export.ts
+4
View File
@@ -1,5 +1,6 @@
// @ts-nocheck
import { registerComponentOption } from '@/class/PluginCenter'
import { PluginExportType } from '@/types/type'
const pluginConfig: registerComponentOption = {
key: 'miaoCrypto',
@@ -16,6 +17,9 @@ const pluginConfig: registerComponentOption = {
}
return vFiles[0].name.endsWith('txt')
},
disable: true,
}
export default pluginConfig
export const type = PluginExportType.component
src/plugins/miaoCrypto/miaoCrypto.vue
+64 -32
View File
@@ -2,37 +2,31 @@
<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>
<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 +38,12 @@ import { computed } from 'vue'
const miaoFetchApi = useMiaoFetchApi()
interface workItem {
status: 'wait' | 'process' | 'finish'
id: number
status: 'wait' | 'process' | 'finish' | 'error'
buffer?: Uint8Array
getBuffer: () => Promise<Uint8Array>
getBufferProgress: number
getBufferAbort?: () => void
isGettingBuffer: boolean
name: string
}
@@ -55,14 +52,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]
@@ -70,20 +69,28 @@ class Work {
return
}
currentItem.status = 'process'
currentItem.buffer = await this.func(key.value, currentItem.buffer)
currentItem.status = 'finish'
try {
currentItem.buffer = await this.func(key.value, currentItem.buffer)
currentItem.status = 'finish'
} catch (e) {
currentItem.status = 'error'
}
this.funcLoop()
}
async getBufferLoop() {
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]
item.isGettingBuffer = true
item.buffer = await item.getBuffer()
try {
item.buffer = await item.getBuffer()
} catch(e) {
item.status = 'error'
}
item.isGettingBuffer = false
this.funcLoop()
this.getBufferLoop()
@@ -94,12 +101,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 +145,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 +160,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 +177,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
-1
View File
@@ -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/miaoDirectory/export.ts
+4
View File
@@ -17,3 +17,7 @@ const pluginConfig: registerComponentOption = {
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoDirectory/miaoDirectory.vue
+98 -48
View File
@@ -1,42 +1,23 @@
<template>
<miao-drop-handler
@on-virtual-directory="handleDropVDirectory"
@on-files="handleDropFiles"
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
@on-virtual-files="handleDropVirtualFiles">
<div class="miao-directory-item-container" ref="rootDomRef">
<!-- 顶部面包屑导航和工具栏 -->
<miao-directory-top
:color="props.color"
:current-directory="currentDirectory"
@back="handleBack"
:open-menu-option="topBarMenuOption"
@reload="handleReload"
@exit="emit('exit')"
:index="index"
@set-current-directory="setCurrentDirectory"
@search="handleSearch"
<miao-directory-top :color="props.color" :current-directory="currentDirectory" @back="handleBack"
:open-menu-option="topBarMenuOption" @reload="handleReload" @exit="emit('exit')" :index="index"
@set-current-directory="setCurrentDirectory" @search="handleSearch"
@menu-select="handleTopBarMenuSelect" />
<!-- 文件和文件夹列表 -->
<miao-directory-items
ref="miaoDirectoryItemRef"
:color="props.color"
:showData_directory="showData_directory"
:showData_files="showData_files"
:selected-item="selectedItem.value"
:index="index"
@item-click="handleItemClick"
@item-download="handleItemDownload"
@item-delete="handleItemDelete"
@item-drag-start="handleItemDragStart"
@item-rename="handleItemRename"
<miao-directory-items ref="miaoDirectoryItemRef" :color="props.color"
:showData_directory="showData_directory" :showData_files="showData_files"
:selected-item="selectedItem.value" :index="index" @item-click="handleItemClick"
@item-download="handleItemDownload" @item-delete="handleItemDelete"
@item-drag-start="handleItemDragStart" @item-rename="handleItemRename"
@item-select="handleItemSelect" />
<!-- 底部工具栏 -->
<miao-directory-bottom
:index="index"
@add-new-item="handleAddNewItem"
v-if="false"
<miao-directory-bottom :index="index" @add-new-item="handleAddNewItem" v-if="false"
@pick-files-upload="handlePickFilesUpload" />
<miao-mask v-model:show="showModel"></miao-mask>
@@ -106,13 +87,20 @@ class SelectedItem {
}
_selectedItem: (VirtualDirectory | VirtualFile)[]
push(item: VirtualDirectory | VirtualFile) {
this._selectedItem = [item, ...this._selectedItem]
this._selectedItem = uniq([item, ...this._selectedItem])
}
pushArray(items: (VirtualDirectory | VirtualFile)[]) {
this._selectedItem = uniq([...items, ...this._selectedItem])
}
remove(item: VirtualDirectory | VirtualFile) {
this._selectedItem = this._selectedItem.filter((v) => v !== item)
}
clear() {
this._selectedItem = []
/**
* 仅保留filter为true的元素, filter默认为()=>false
*/
clear(filter?: (item: VirtualDirectory | VirtualFile) => boolean) {
filter || (filter = (__) => false)
this._selectedItem = this.value.filter(filter)
}
// 保证内容仍然存在于dir中且各个元素不重复
get value() {
@@ -194,18 +182,18 @@ const topBarMenuOption = computed(() => {
},
searchText.value !== ''
? {
label: '重置搜索',
key: 'searchReset',
icon: renderIcon(SearchOutline)
}
: undefined,
selectedItem.value.length !== 0
? {
label: '重置多选',
key: 'selectedItemReset',
icon: renderIcon(CheckmarkDoneOutline)
}
label: '重置搜索',
key: 'searchReset',
icon: renderIcon(SearchOutline)
}
: undefined,
// selectedItem.value.length !== 0
// ? {
// label: '重置多选',
// key: 'selectedItemReset',
// icon: renderIcon(CheckmarkDoneOutline)
// }
// : undefined,
{
label: '筛选',
key: 'filter',
@@ -223,6 +211,30 @@ const topBarMenuOption = computed(() => {
],
icon: renderIcon(FilterOutline)
},
{
label: '多选',
key: 'multiSelect',
children: [
{
label: `全选`,
key: 'multiSelect:all'
},
{
label: `全不选`,
key: 'multiSelect:reset'
},
{
label: `反选`,
key: 'multiSelect:inversion'
},
selectedItem.value.length === 2 ?
{
label: `区间内全选`,
key: 'multiSelect:range'
} : undefined
].filter((v) => v !== undefined),
icon: renderIcon(CheckmarkDoneOutline),
},
{
label: '插件',
key: 'plugin',
@@ -299,15 +311,53 @@ const handleTopBarMenuSelect = (key: string) => {
handleAddNewItem()
} else if (key === 'searchReset') {
handleSearchReset()
} else if (key === 'selectedItemReset') {
selectedItem.clear()
// } else if (key === 'selectedItemReset') {
// selectedItem.clear()
} else if (key === 'showDirs') {
showDirs.value = !showDirs.value
showDirs.value === false && selectedItem.clear(v => v.type !== 'directory')
} else if (key === 'showFiles') {
showFiles.value = !showFiles.value
showFiles.value === false && selectedItem.clear(v => v.type !== 'file')
} else if (key.startsWith('plugin:')) {
const pluginName = key.split(':')[1]
pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
} else if (key.startsWith('multiSelect:')) {
const opName = key.split(':')[1]
switch (opName) {
case 'all':
selectedItem.pushArray([...showData_directory.value, ...showData_files.value])
break;
case 'reset':
selectedItem.clear()
break
case 'inversion':
const sArr = selectedItem.value
const arr = [...showData_directory.value, ...showData_files.value].filter(i => !sArr.includes(i))
selectedItem.clear()
selectedItem.pushArray(arr)
break
case "range":
const _sArr = selectedItem.value
const _arr = [...showData_directory.value, ...showData_files.value]
const _nArr = []
let _counter = 0
for (const i of _arr) {
if (_sArr.includes(i)) {
_counter++
}
if (_counter === 1) {
_nArr.push(i)
} else if (_counter === 2) {
_nArr.push(i)
break
}
}
selectedItem.clear()
selectedItem.pushArray(_nArr)
break
}
}
}
@@ -341,7 +391,7 @@ const handleItemDownload = (item: VirtualFile) => {
const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
for (let item of uniq([...selectedItem.value, _item])) {
;(async () => {
; (async () => {
const { response } = miaoFetchApi.delete(item, {
retry: 5
})
@@ -430,7 +480,7 @@ const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
}
}
for (let dir of vDirs) {
;(async () => {
; (async () => {
const _from = dir.parent
const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
const id = (await response).eventId
@@ -449,7 +499,7 @@ const handleDropVirtualFiles = (files: VirtualFile[]) => {
return
}
for (let file of files) {
;(async () => {
; (async () => {
const _from = file.parent
const { response } = miaoFetchApi.cut(file, currentDirectory.value)
const id = (await response).eventId
src/plugins/miaoIframe/export.ts
+4
View File
@@ -19,3 +19,7 @@ const pluginConfig: registerComponentOption = {
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoIframe/miaoIframe.vue
+19 -2
View File
@@ -1,6 +1,7 @@
<template>
<div class="miao-markdown-container-miaomiaomiao">
<iframe
ref="iframeRef"
:src="iframeSrc"
frameborder="0"
class="iframe-container-iframe"></iframe>
@@ -8,17 +9,33 @@
</template>
<script setup lang="ts">
import { VirtualFile } from '@/class/VirtualDirectory'
import { onMounted, ref } from 'vue'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { cloneDeep } from 'lodash';
import { inject, onMounted, ref } from 'vue'
import buildFromTree from '../../hooks/buildFromTree';
const root = inject('rootDirectory') as VirtualDirectory
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const iframeSrc = ref<string>()
const iframeRef = ref<HTMLIFrameElement>();
const sendRootTree = () => {
iframeRef.value?.contentWindow && iframeRef.value.contentWindow.postMessage(cloneDeep(root.tree), "*");
}
const handleIframeMessage = (e: MessageEvent<any>) => {
// const data = e.data;
sendRootTree()
}
onMounted(() => {
iframeSrc.value = currentFiles.value[0].url
if (typeof window.addEventListener != "undefined") {
window.addEventListener("message", handleIframeMessage, false);
}
console.log(buildFromTree(cloneDeep(root.tree)))
})
</script>
src/plugins/miaoImages/export.ts
+4
View File
@@ -43,3 +43,7 @@ const pluginConfig: registerComponentOption = {
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoImages/miaoImages.vue
+5 -5
View File
@@ -4,7 +4,7 @@
@on-virtual-files="handleDrop">
<miao-message-provider ref="miaoMessageRef">
<div class="miaoImage" ref="rootRef">
<n-scrollbar ref="NScrollbarRef">
<n-scrollbar ref="NScrollbarRef" style="max-height: 100%;">
<div
class="miaoImage-container"
v-for="imageGroup in imageGroupList">
@@ -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'
@@ -152,7 +152,7 @@ const scrollToActiveImage = () => {
const dom = rootRef.value?.querySelector(
'.miaoImage-container-row-image-active'
)
NScrollbarRef.value.scrollTo({
dom && NScrollbarRef.value.scrollTo({
top: dom.offsetTop - 30,
behavior: 'smooth'
})
@@ -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/export.ts
+4
View File
@@ -19,3 +19,7 @@ const pluginConfig: registerComponentOption = {
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoMarkdown/miaoMarkdown.vue
+1 -1
View File
@@ -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/export.ts
+4
View File
@@ -19,3 +19,7 @@ const pluginConfig: registerComponentOption = {
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoPDF/miaoPDF.vue
+2 -2
View File
@@ -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/_export.ts
+4
View File
@@ -20,3 +20,7 @@ const pluginConfig: registerComponentOption = {
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoVideoPlayer/export.ts
+4
View File
@@ -26,3 +26,7 @@ const pluginConfig: registerComponentOption = {
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/types/fetch.ts
+9 -1
View File
@@ -8,12 +8,20 @@ export type miaoFetchConfig = {
export type getOption = {} & miaoFetchConfig;
export type getFileOption = {
/**
* 下载进度回调函数
* @param {any} percent 进度百分比，float类型, 0-1
*/
onProcess?: (percent: number) => void;
} & miaoFetchConfig;
export type getResponse = (file | directory)[];
export type uploadOption = {
/**
* 上传进度回调函数
* @param {any} percent 进度百分比，float类型
* @param {any} percent 进度百分比，float类型, 0-1
*/
onProcess?: (percent: number) => void;
/**
src/types/type.ts
+17
View File
@@ -20,3 +20,20 @@ export type directory = {
stats: stats;
parent?: directory;
};
export type alertTipType = ((content: string, options?: AlertTipMessageOptions) => (newContent: string, newOptions?: AlertTipMessageOptions) => void)
export interface AlertTipMessageOptions {
type?: 'info' | 'success' | 'error'
timeout?: number
id?: number
}
export enum PluginExportType {
default = 'default',
component = 'component'
}
export interface usePluginHooksType {
globalAlertTip: alertTipType;
}