feat: 添加一个复制文件链接到剪切板的插件

package.json

@@ -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

@@ -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/class/PluginCenter.ts

@@ -1,7 +1,7 @@
 import useVirtualPages from "@/hooks/useVirtualPages";
 import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
 import { ShallowRef, shallowRef } from "vue";
-import { alertTipType } from "@/types/type";
+import { alertTipType, usePluginHooksType } from "@/types/type";
 
 export enum PluginGroup {
 	default = "default",
@@ -19,7 +19,7 @@ export interface registerComponentOption {
 	exitConfirm?: boolean;
 }
 
-type Plugin = {
+export type Plugin = {
 	// 用于显示的名字
 	name: string;
 	// 代表插件的icon
@@ -31,7 +31,12 @@ type Plugin = {
 	// 判断在未禁用时是否可以使用这个组件
 	// 使用组件即调用下面的func
 	filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
-	func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[], ...args: any[]) => void;
+	func: (
+		VDirectories: VirtualDirectory[],
+		VFiles: VirtualFile[],
+		hooks: usePluginHooksType,
+		...args: any[]
+	) => void;
 };
 
 export default class PluginCenter {
@@ -107,6 +112,8 @@ export default class PluginCenter {
 	}
 
 	usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]) {
-		this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], ...args);
+		this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], {
+			globalAlertTip: this.globalAlertTip
+		}, ...args);
 	}
 }

src/hooks/init/initPlugin.ts

@@ -1,6 +1,6 @@
 import usePluginCenter, { initPluginCenter } from "@/hooks/usePluginCenter";
-import { registerComponentOption } from "@/class/PluginCenter";
+import { Plugin, registerComponentOption } from "@/class/PluginCenter";
-import { alertTipType } from "@/types/type";
+import { alertTipType, PluginExportType } from "@/types/type";
 
 const initPlugin = async (globalAlertTip: alertTipType) => {
 	initPluginCenter(globalAlertTip)
@@ -11,9 +11,18 @@ const initPlugin = async (globalAlertTip: alertTipType) => {
 		promiseArray.push(
 			new Promise(async resolve => {
 				const _config = pluginConfig as () => Promise<{
-					default: registerComponentOption;
+					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));
+				}
 			})
 		);
 	}

src/plugins/copyFileUrl2Clipboard/copy.ts

@@ -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

@@ -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

@@ -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/miaoCrypto/export.ts

@@ -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

@@ -2,6 +2,7 @@
     <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" :key="item.id" class="miaoCrypto-container-item-item">
                         <div class="miaoCrypto-container-item-percentBar" :style="{
@@ -18,7 +19,7 @@
                     </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>
@@ -38,7 +39,7 @@ const miaoFetchApi = useMiaoFetchApi()
 
 interface workItem {
     id: number
-    status: 'wait' | 'process' | 'finish'
+    status: 'wait' | 'process' | 'finish' | 'error'
     buffer?: Uint8Array
     getBuffer: () => Promise<Uint8Array>
     getBufferProgress: number
@@ -68,8 +69,12 @@ class Work {
             return
         }
         currentItem.status = 'process'
+        try {
             currentItem.buffer = await this.func(key.value, currentItem.buffer)
             currentItem.status = 'finish'
+        } catch (e) {
+            currentItem.status = 'error'
+        }
         this.funcLoop()
     }
     async getBufferLoop() {
@@ -81,7 +86,11 @@ class Work {
         }
         const item = _list[0]
         item.isGettingBuffer = true
+        try {
             item.buffer = await item.getBuffer()
+        } catch(e) {
+            item.status = 'error'
+        }
         item.isGettingBuffer = false
         this.funcLoop()
         this.getBufferLoop()
@@ -139,7 +148,7 @@ onMounted(() => {
 
 onUnmounted(() => {
     encryptWork.abortLoop = true
-    encryptWork.queue.forEach(item=>{
+    encryptWork.queue.forEach(item => {
         item.getBufferAbort && item.getBufferAbort()
     })
 })

src/plugins/miaoDirectory/export.ts

@@ -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

@@ -1,42 +1,23 @@
 <template>
-    <miao-drop-handler
+    <miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
-        @on-virtual-directory="handleDropVDirectory"
-        @on-files="handleDropFiles"
         @on-virtual-files="handleDropVirtualFiles">
         <div class="miao-directory-item-container" ref="rootDomRef">
             <!-- 顶部面包屑导航和工具栏 -->
-            <miao-directory-top
+            <miao-directory-top :color="props.color" :current-directory="currentDirectory" @back="handleBack"
-                :color="props.color"
+                :open-menu-option="topBarMenuOption" @reload="handleReload" @exit="emit('exit')" :index="index"
-                :current-directory="currentDirectory"
+                @set-current-directory="setCurrentDirectory" @search="handleSearch"
-                @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
+            <miao-directory-items ref="miaoDirectoryItemRef" :color="props.color"
-                ref="miaoDirectoryItemRef"
+                :showData_directory="showData_directory" :showData_files="showData_files"
-                :color="props.color"
+                :selected-item="selectedItem.value" :index="index" @item-click="handleItemClick"
-                :showData_directory="showData_directory"
+                @item-download="handleItemDownload" @item-delete="handleItemDelete"
-                :showData_files="showData_files"
+                @item-drag-start="handleItemDragStart" @item-rename="handleItemRename"
-                :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
+            <miao-directory-bottom :index="index" @add-new-item="handleAddNewItem" v-if="false"
-                :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() {
@@ -199,13 +187,13 @@ const topBarMenuOption = computed(() => {
                 icon: renderIcon(SearchOutline)
             }
             : undefined,
-        selectedItem.value.length !== 0
+        // selectedItem.value.length !== 0
-            ? {
+        //     ? {
-                  label: '重置多选',
+        //         label: '重置多选',
-                  key: 'selectedItemReset',
+        //         key: 'selectedItemReset',
-                  icon: renderIcon(CheckmarkDoneOutline)
+        //         icon: renderIcon(CheckmarkDoneOutline)
-              }
+        //     }
-            : undefined,
+        //     : 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') {
+        // } else if (key === 'selectedItemReset') {
-        selectedItem.clear()
+        //     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

@@ -19,3 +19,7 @@ const pluginConfig: registerComponentOption = {
 }
 
 export default pluginConfig
+
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component

src/plugins/miaoImages/export.ts

@@ -43,3 +43,7 @@ const pluginConfig: registerComponentOption = {
 }
 
 export default pluginConfig
+
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component

src/plugins/miaoMarkdown/export.ts

@@ -19,3 +19,7 @@ const pluginConfig: registerComponentOption = {
 }
 
 export default pluginConfig
+
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component

src/plugins/miaoPDF/export.ts

@@ -19,3 +19,7 @@ const pluginConfig: registerComponentOption = {
 }
 
 export default pluginConfig
+
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component

src/plugins/miaoPluginTemplate/_export.ts

@@ -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

@@ -26,3 +26,7 @@ const pluginConfig: registerComponentOption = {
 }
 
 export default pluginConfig
+
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component

src/types/type.ts

@@ -28,3 +28,12 @@ export interface AlertTipMessageOptions {
     timeout?: number
     id?: number
 }
+
+export enum PluginExportType {
+	default = 'default',
+	component = 'component'
+}
+
+export interface usePluginHooksType {
+	globalAlertTip: alertTipType;
+}