feat: miaoDirectory的多选功能，多选后删除/移动文件夹有额外效果。

README.md

@@ -1,8 +1,11 @@
 todo: 标签页，miaoDirectory切换动画                      [finish]
 todo: 重构virtualPage，所有page以插件形式使用             [finish]
 todo: miaoDirectory插件化，为后续插件功能开发做准备        [finish]
-todo: miaoPopupInput, 弹出一个输入框
+todo: miaoPopupInput, 弹出一个输入框                     [finish]
-todo: miaoDirectory的新建文件/文件夹功能
+todo: miaoDirectory的重命名功能                          [finish]
-todo: miaoDirectory的重命名功能
+todo: miaoDirectory的剪切功能                            [finish]
-todo: miaoDirectory的多选功能
+todo: miaoDirectory的上传按钮                            [finish]
+todo: miaoDirectory的新建文件/文件夹功能                  [finish]
+todo: miaoDirectory的多选功能                            [finish]
 todo: VirtualDirectory更新时更新文件信息
+todo: miaoDirectory的复制文件/文件夹功能

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@vicons/ionicons5": "^0.12.0",
     "axios": "^1.7.3",
+    "lodash": "^4.17.21",
     "naive-ui": "^2.39.0",
     "sass": "^1.77.8",
     "vue": "^3.4.35"

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       axios:
         specifier: ^1.7.3
         version: 1.7.3
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       naive-ui:
         specifier: ^2.39.0
         version: 2.39.0(vue@3.4.37(typescript@5.5.4))

src/App.vue

@@ -42,14 +42,18 @@ const rootDirectory = reactive(
 // component就是一个vue组件，类似于miaoDirectory
 const createView = (
     component: any,
-    currentObjects: (VirtualDirectory | VirtualFile)[],
+    currentDirectorys?: VirtualDirectory[],
+    currentFiles?: VirtualFile[],
     index?: number
 ) => {
     index ?? (index = views.length)
     views.splice(
         index,
         0,
-        reactive<VirtualPage>(new VirtualPage(component, [...currentObjects]))
+        reactive<VirtualPage>(new VirtualPage(component, {
+          directorys: [...(currentDirectorys ?? [])],
+          files: [...(currentFiles ?? [])]
+        }))
     )
 }
 
@@ -145,7 +149,8 @@ onMounted(() => {
                                     @click="
                                         createView(
                                             view.component,
-                                            view.currentObjects,
+                                            view.currentDirectorys,
+                                            view.currentFiles,
                                             index + 1
                                         )
                                     ">
@@ -183,7 +188,7 @@ onMounted(() => {
                     :key="view.uid">
                     <component
                         :is="view.component"
-                        v-model:current-objects="view.currentObjects"
+                        v-model:current-objects="view.currentDirectorys"
                         :id="view.uid"
                         :color="view.color"
                         @exit="deleteView(index)"></component>
@@ -194,6 +199,7 @@ onMounted(() => {
     <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
     <MiaoMask v-model:show="showModal" @click="showModal = false">
         <component
+            @click="(e:any) => e.stopPropagation()"
             :is="modalData?.component"
             v-bind="modalData?.props"></component>
     </MiaoMask>

src/class/VirtualDirectory.ts

@@ -1,6 +1,10 @@
 import generateId from "@/hooks/generateId";
+import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
+// import { debounce } from "lodash";
 import type { stats, file, directory } from "@/types/type.ts";
 
+const miaoFetchApi = useMiaoFetchApi();
+
 export class VirtualFile {
 	constructor(info: file, parent: VirtualDirectory) {
 		this.name = info.name;
@@ -68,11 +72,11 @@ class VirtualDirectory {
 	 * 获取从根目录开始的按顺序的文件夹
 	 * @returns {VirtualDirectory[]}
 	 */
-	get directoryArray(): VirtualDirectory[] {
+	get getParents(): VirtualDirectory[] {
 		if (!this.parent) {
 			return [this];
 		}
-		return [...this.parent.directoryArray, this];
+		return [...this.parent.getParents, this];
 	}
 
 	/**
@@ -127,5 +131,14 @@ class VirtualDirectory {
 			return this.files?.includes(item) ?? false;
 		}
 	}
+
+	/**
+	 * 调用后重新向远端拉取文件夹信息并进行更新
+	 * @returns {void}
+	 */
+	async update(): Promise<void> {
+		const data: (file | directory)[] = await miaoFetchApi.get(this);
+		this.updateContent(data);
+	}
 }
 export default VirtualDirectory;

src/class/VirtualPage.ts

@@ -13,20 +13,23 @@ const getRandomWebSafeColor = (() => {
 })();
 
 export default class VirtualPage {
-	constructor(component: any, initObjects: (VirtualDirectory | VirtualFile)[]) {
+	constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) {
 		this.component = shallowRef(component);
-		this.currentObjects = initObjects;
+		this.currentDirectorys = initObjects?.directorys ?? [];
-
+		this.currentFiles = initObjects?.files ?? [];
 		this.visible = true;
 		this.uid = generateId();
 		this.refreshKey = Math.random();
 		this.color = getRandomWebSafeColor();
 	}
+	// 页面使用的组件
 	component: any;
 	// 是否可见
 	visible: boolean;
-	// 当前正在使用的文件或是文件夹
+	// 当前正在使用的文件夹
-	currentObjects: (VirtualDirectory | VirtualFile)[];
+	currentDirectorys: VirtualDirectory[];
+	// 当前正在使用的文件
+	currentFiles: VirtualFile[];
 	// 区分每一个页面的唯一id
 	uid: number;
 	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
@@ -40,7 +43,7 @@ export default class VirtualPage {
 		if (this._title) {
 			return this._title;
 		}
-		return this.currentObjects[0].name;
+		return this.currentDirectorys[0].name;
 	}
 
 	setTitle(title: string) {

src/components/miaoContextMenu.vue

@@ -0,0 +1,89 @@
+<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
+<!-- 支持长按和右键呼出下拉菜单 -->
+<template>
+    <div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart"
+     @touchend="handleTouchEnd">
+        <slot></slot>
+    </div>
+    <n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
+        :show="showContextMenu > 0" :on-clickoutside="onClickoutside" @select="handleSelect" @mouseleave="
+            showContextMenu -= 1" @mouseenter="showContextMenu += 1" />
+</template>
+
+<script setup lang="ts">
+import { NDropdown } from 'naive-ui/es/dropdown';
+import { DropdownOption } from 'naive-ui/es/dropdown';
+import { nextTick, ref } from 'vue';
+
+const props = defineProps<{
+    options: DropdownOption[]
+    // 长按呼出右键菜单的时延，undefined时不生效
+    touchTimeOut?: number
+}>()
+const emit = defineEmits<{
+    select: [key: string]
+}>()
+
+const x = ref(0)
+const y = ref(0)
+const showContextMenu = ref(0)
+// 长按计时器
+let timer_touch: string | number | NodeJS.Timeout | undefined
+
+const onClickoutside = async () => {
+    showContextMenu.value = 0
+}
+
+const handleMainMouseLeave = async () => {
+    setTimeout(() => {
+        showContextMenu.value -= 1
+    }, 20)
+    // nextTick(()=>{
+    //     showContextMenu.value -= 1
+    // })
+}
+
+const handleSelect = async (key: string) => {
+    emit('select', key)
+    showContextMenu.value = 0
+}
+
+const handleContextMenu = (e: MouseEvent) => {
+    e.preventDefault()
+    showContextMenu.value = 0
+    nextTick().then(() => {
+        showContextMenu.value += 1
+        x.value = e.clientX
+        y.value = e.clientY
+    })
+}
+
+const handleTouchStart = (e: TouchEvent) => {
+    if(props.touchTimeOut === undefined) {
+        return
+    }
+    timer_touch ?? clearTimeout(timer_touch)
+    timer_touch = setTimeout(() => {
+        showContextMenu.value = 1
+        x.value = e.targetTouches[0].clientX
+        y.value = e.targetTouches[0].clientY
+    }, props.touchTimeOut)
+}
+
+const handleTouchEnd = () => {
+    if(timer_touch) {
+        clearTimeout(timer_touch)
+        timer_touch = undefined
+    }
+
+}
+
+</script>
+
+<style>
+.main {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+</style>

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -1,38 +1,32 @@
 <template>
-    <div
+    <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
-        class="miao-item"
+        <miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
-        draggable="true"
+            <div class="item-main" :class="props.selected ? 'item-main-selected' : ''" ref="mainRef">
-        ref="itemRef"
+                <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
-        @dragstart="handleDragStart">
+                <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
-        <div class="item-main">
-            <div
-                class="item-main-front"
-                :style="{ backgroundColor: props.color }"></div>
-            <Icon class="item-main-icon"></Icon>
                 <div class="item-main-info">
                     <div class="item-main-info-name">
-                    {{ name }}
+                        <Icon class="item-main-info-name-icon" v-show="clientWidth <= 250"></Icon>
+                        <n-ellipsis style="max-width: 140px;">{{ name }}</n-ellipsis>
                     </div>
                     <div class="item-main-info-date" v-if="time">
                         {{ time }}
                     </div>
                 </div>
-            <n-dropdown
+                <!-- 菜单现在通过右键/长按呼出 -->
-                trigger="click"
+                <!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
-                :options="dropDownOptions"
+                    <div class="item-main-option" @click="(e) => e.stopPropagation()">
-                @select="handleDropdownSelect">
-                <div
-                    class="item-main-option"
-                    @click="(e) => e.stopPropagation()">
                         <EllipsisVertical class="item-main-option-icon" />
                     </div>
-            </n-dropdown>
+                </n-dropdown> -->
             </div>
+        </miaoContextMenu>
     </div>
 </template>
 
 <script setup lang="ts">
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import miaoContextMenu from '../miaoContextMenu.vue'
 import {
     DocumentText,
     FileTray,
@@ -43,30 +37,37 @@ import {
     LogoJavascript,
     LogoVue,
     PlayCircle,
-    EllipsisVertical,
     Disc
 } from '@vicons/ionicons5'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import dateFormatter from '@/hooks/dateFormatter'
-// import useDataBus from '@/hooks/useDataBus'
+import { NEllipsis } from 'naive-ui'
-import { NDropdown } from 'naive-ui'
+// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 
-// const dataBus = useDataBus()
+// const miaoFetchApi = useMiaoFetchApi()
 
 const props = defineProps<{
     item: VirtualDirectory | VirtualFile
     name?: string
     color: string
+    selected: boolean
 }>()
 
 const emit = defineEmits<{
     download: []
     delete: []
+    rename: []
     dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
+    onSelected: []
 }>()
 
 const itemType = ref<'file' | 'directory'>(props.item.type)
 
+const mainRef = ref<HTMLDivElement>()
+
+// 使用ResizeObserver实现
+const clientWidth = ref<number>(666)
+
 const name = props.name ?? props.item.name
 
 const time = computed(() => {
@@ -78,10 +79,14 @@ const time = computed(() => {
 
 const dropDownOptions = computed(() => {
     const options = [
+        {
+            label: '重命名',
+            key: 'rename'
+        },
         {
             label: '删除',
             key: 'delete'
-        }
+        },
     ]
     if (itemType.value === 'file') {
         options.push(
@@ -93,14 +98,38 @@ const dropDownOptions = computed(() => {
             ]
         )
     }
+    if (props.selected === false) {
+        options.push(
+            ...[
+                {
+                    label: '多选:选择',
+                    key: 'select'
+                }
+            ]
+        )
+    } else {
+        options.push(
+            ...[
+                {
+                    label: '多选:取消',
+                    key: 'select'
+                }
+            ]
+        )
+    }
     return options
 })
 
-const handleDropdownSelect = (key: 'download' | 'delete') => {
+// 是不是可以直接在这里面实现？
-    if (key === 'download') {
+const handleDropdownSelect = (key: string) => {
+    if (key === 'rename') {
+        emit('rename')
+    } else if (key === 'download') {
         emit('download')
     } else if (key === 'delete') {
         emit('delete')
+    } else if (key === 'select') {
+        emit('onSelected')
     }
 }
 
@@ -165,13 +194,24 @@ const handleDragStart = (event: DragEvent) => {
     emit('dragStart', event, props.item)
     // dataBus.set('dragData', [props.item])
 }
+
+onMounted(() => {
+    const observer = new ResizeObserver(entries => {
+        for (let entry of entries) {
+            clientWidth.value = entry.contentRect.width;
+        }
+    });
+    if (mainRef.value) {
+        observer.observe(mainRef.value);
+    }
+})
 </script>
 
 <style lang="scss" scoped>
 .miao-item {
     cursor: pointer;
     width: calc(100% - 20px);
-    min-width: 250px;
+    min-width: 170px;
     // aspect-ratio: 66/9;
     height: 50px;
     position: relative;
@@ -179,6 +219,7 @@ const handleDragStart = (event: DragEvent) => {
     justify-content: center;
     align-items: center;
     margin: 10px 10px;
+
     .item-main {
         position: relative;
         width: 100%;
@@ -187,31 +228,49 @@ const handleDragStart = (event: DragEvent) => {
         border-radius: 7px;
         display: flex;
         align-items: center;
-        transition: background-color 0.3s;
+        transition: background-color 0.3s ease;
+
         .item-main-front {
             height: 100%;
             width: 10px;
             border-radius: 7px 0 0 7px;
             background-color: rgb(0, 0, 0);
         }
+
         .item-main-icon {
             margin-left: 10px;
             height: 80%;
             color: #00403e;
+            transition: color 0.15s ease-out;
         }
+
         .item-main-info {
             margin-left: 10px;
             height: 100%;
             display: flex;
             flex-direction: column;
+
             &-name {
+                position: relative;
                 user-select: none;
+                display: flex;
+                align-items: center;
+                margin-top: 3px;
+
+                &-icon {
+                    color: #00403e;
+                    width: 20px;
+                    margin-right: 5px;
+                    transition: color 0.15s ease-out;
                 }
+            }
+
             &-date {
                 user-select: none;
                 font-size: small;
             }
         }
+
         .item-main-option {
             height: 100%;
             width: 20px;
@@ -225,22 +284,32 @@ const handleDragStart = (event: DragEvent) => {
             align-items: center;
 
             transition: background-color 0.3s;
+
             .item-main-option-icon {
                 color: #000;
                 transition: color 0.15s;
             }
+
             &:hover,
             &:active {
                 background-color: #8b8b8b;
+
                 .item-main-option-icon {
                     color: #fff;
                 }
             }
         }
+
         &:hover,
         &:active {
             background-color: #d2d2d2;
         }
     }
+    .item-main-selected {
+        background-color: rgba(0, 128, 207, 0.32);
+        &:hover {
+            background-color: rgba(0, 128, 207, 0.64);;
+        }
+    }
 }
 </style>

src/components/miaoMask.vue

@@ -1,9 +1,7 @@
 <template>
   <transition name="transition">
     <div class="mask-body" ref="maskBodyRef" v-show="showMask">
-      <div @click="e=>e.stopPropagation()">
         <slot></slot>
-      </div>
     </div>
   </transition>
 </template>
@@ -27,17 +25,24 @@ const showMask = defineModel<boolean | number>('show', { default: false, require
   align-items: center;
   background-color: rgba(0, 0, 0, 0.3);
   z-index: 7058214053994319;
+
+  // &-container {
+
+  // }
+
   &-show {
     display: flex;
     transition: opacity 0.3s 0.01s;
     opacity: 1;
   }
+
   &-hide {
     opacity: 0;
     transition: display 0.01s 0.3s;
     display: none;
   }
 }
+
 .transition-enter-active,
 .transition-leave-active {
   transition: opacity 0.3s ease;

src/components/miaoPopupInput.vue

@@ -1,43 +1,83 @@
 <template>
   <miao-mask v-model:show="showMask">
-    <n-card title="">
+    <n-card class="popup-card" :title="popupConfig?.title" size="medium">
-      <n-input v-model:value="inputValue" type="text" placeholder="基本的 Input" />
+      {{ popupConfig?.content }}
-      <n-button @click="_resolve && _resolve(inputValue)">确认</n-button>
+      <n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
+        v-if="popupConfig?.inputProps" />
+      <div class="popup-button-container">
+        <n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
+          :type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
+      </div>
     </n-card>
   </miao-mask>
 </template>
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
+import { ref, nextTick } from "vue";
 import { NCard, NInput, NButton } from "naive-ui";
 import miaoMask from "./miaoMask.vue";
+import { InputProps } from "naive-ui";
 
-const showMask = ref(true);
+const showMask = ref(false);
 const inputValue = ref<string>("");
-const _resolve = ref<(text: string) => void>()
+const _resolve = ref()
 
-type popupConfig = {
+type popupConfigType = {
   title: string
-  placeholder: string
+  content?: string
+  inputValue?: string,
+  inputProps?: InputProps
   options: {
-    label
+    label: string
-  }
+    key: unknown
+    type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
+  }[]
 }
 
-const _config = reactive<popupConfig>({
+const popupConfig = ref<popupConfigType>()
-  title: '',
-  placeholder: ''
-})
 
-
+const popup = async (config: popupConfigType) => {
-const popup = () => {
+  popupConfig.value = config
+  inputValue.value = config.inputValue ?? ''
   showMask.value = true
-  return new Promise((resolve: (text: string) => void) => { _resolve.value = resolve }).then((text: string) => {
+  const key = await new Promise((resolve: (key: unknown) => unknown) => {
-    showMask.value = false
+    _resolve.value = resolve
-    return text;
+  })
-  });
+  const text = inputValue.value
+  showMask.value = false;
+  nextTick(() => {
+    inputValue.value = ''
+    _resolve.value = undefined
+  })
+  return {
+    text,
+    key
+  };
 };
 
 defineExpose({ popup });
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.popup-card {
+  width: 80%;
+
+  .popup-input {
+    margin-bottom: 10px;
+  }
+
+  .popup-button-container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+
+    .popup-button-container-button {
+      margin-top: 3px;
+      &:not(:last-child) {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+</style>

src/config.ts

@@ -7,7 +7,10 @@ export default {
         get: '/get',
         upload: '/upload',
         delete: '/delete',
-		query: '/query'
+        query: '/query',
+        rename: '/rename',
+        mkdir: '/mkdir',
+        cut: '/cut'
     },
-	enableUpload: true,
+    enableUpload: true
-};
+}

src/hooks/miaoTools.ts

@@ -0,0 +1,47 @@
+export const filePicker = (() => {
+	let _resolve: ((files: File[]) => void) | undefined;
+	return (option?: { accept?: "string"; multiple: boolean }) => {
+		if (_resolve) {
+			_resolve([]);
+			_resolve = undefined;
+		}
+		return new Promise<File[]>(resolve => {
+			const inpEle = document.createElement("input");
+			inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
+			inpEle.type = "file";
+			inpEle.style.display = "none";
+			_resolve = resolve;
+			// 文件类型限制
+			// inpEle.accept="image/*"
+			option?.accept && (inpEle.accept = option?.accept);
+			// 多选限制
+			option?.multiple && (inpEle.multiple = option?.multiple);
+			// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
+			inpEle.addEventListener(
+				"change",
+				() => {
+					if (!inpEle.files) {
+						return;
+					}
+					const files: File[] = [];
+					let i = 0;
+					while (i < inpEle.files?.length) {
+						const _file = inpEle?.files?.item(i);
+						if (_file !== null) {
+							files.push(_file);
+						}
+						i += 1;
+					}
+					resolve(files);
+                    _resolve = undefined
+				},
+				{ once: true }
+			);
+			inpEle.click();
+		});
+	};
+})();
+
+export default {
+	filePicker
+};

src/hooks/useMiaoFetchApi.ts

@@ -1,151 +1,266 @@
-import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import { getOption, getResponse, miaoFetchConfig, deleteOption, uploadOption, queryOption } from "@/types/fetch";
+import {
-import Config from "@/config";
+    getOption,
-import axios, { AxiosRequestConfig } from "axios";
+    getResponse,
+    miaoFetchConfig,
+    deleteOption,
+    uploadOption,
+    queryOption,
+    renameOption,
+    cutOption,
+    mkdirOption
+} from '@/types/fetch'
+import Config from '@/config'
+import axios, { AxiosRequestConfig } from 'axios'
 
 export const useMiaoFetch = (option?: miaoFetchConfig) => {
-	const retry = option?.retry ?? 0;
+    const retry = option?.retry ?? 0
-	const controller = new AbortController();
+    const controller = new AbortController()
-	let flag = true;
+    let flag = true
     return {
         miaoFetch: async (config: AxiosRequestConfig<any>) => {
-			let counter = 0;
+            let counter = 0
-			let response: any;
+            let response: any
-			let errList = [];
+            let errList = []
             while (flag && counter <= retry) {
                 try {
                     response = await axios({
                         ...config,
                         signal: controller.signal
-					});
+                    })
-					return response;
+                    return response
                 } catch (_e) {
-					errList.push(_e);
+                    errList.push(_e)
-					counter += 1;
+                    counter += 1
                 }
             }
-			throw errList;
+            throw errList
         },
         /**
          * 强制终止miaoFetch
          */
         abortMiaoFetch: () => {
-			flag = false;
+            flag = false
-			controller.abort();
+            controller.abort()
+        }
+    }
 }
-	};
-};
 
 const miaoFetchApi = {
     /**
      * 获取对应文件夹下的数据
      */
-	async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
+    async get(
-		const { baseUrl, api } = Config;
+        vDirectory: VirtualDirectory,
-		const url = `${baseUrl}${api.get}${vDirectory.path}`;
+        option?: getOption
-		const retry = option?.retry ?? 0;
+    ): 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;
+        return response.data
     },
 
     /**
      * 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
+		 * 正常上传文件请使用uploadQueue
      */
     upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
-		const { baseUrl, api } = Config;
+        const { baseUrl, api } = Config
-		const url = `${baseUrl}${api.upload}${targetVDir.path}`;
+        const url = `${baseUrl}${api.upload}${targetVDir.path}`
-		const retry = option?.retry ?? 0;
+        const retry = option?.retry ?? 0
         const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
             retry
-		});
+        })
-		const sizeTotal = data.size;
+        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('file', data)
         // 必须这样传，不然中文乱码
-		formData.append("fileName", data.name)
+        formData.append('fileName', data.name)
-		formData.append("oprateType", opType);
+        formData.append('operateType', opType)
 
         return {
             abort: () => abortMiaoFetch(),
             response: new Promise<{
                 message: 'success' | 'failed'
                 error?: string
-			}>(async resolve => {
+            }>(async (resolve) => {
                 const response = await miaoFetch({
                     url,
-					method: "post",
+                    method: 'post',
                     data: formData,
                     onUploadProgress(progressEvent) {
-						option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
+                        option &&
+                            option.onProcess &&
+                            option.onProcess(progressEvent.loaded / sizeTotal)
                     }
-				});
-				resolve(response.data);
                 })
-		};
+                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
+        })
+
+        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 { baseUrl, api } = Config
-		const url = `${baseUrl}${api.delete}${target.path}`;
+        const url = `${baseUrl}${api.delete}${target.path}`
-		const retry = option?.retry ?? 0;
+        const retry = option?.retry ?? 0
         const { miaoFetch } = useMiaoFetch({
             retry
-		});
+        })
 
         return {
             response: new Promise<{
                 eventId: number
-			}>(async resolve => {
+            }>(async (resolve) => {
                 const response = await miaoFetch({
                     url,
-					method: "post"
+                    method: 'post'
-				});
-				resolve(response.data);
                 })
-		};
+                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)
+            })
+        }
     },
 
     /**
      * 查询服务端操作事件的进展
      */
     query(eventId: number, option?: queryOption) {
-		const { baseUrl, api } = Config;
+        const { baseUrl, api } = Config
-		const url = `${baseUrl}${api.query}`;
+        const url = `${baseUrl}${api.query}`
-		const retry = option?.retry ?? 0;
+        const retry = option?.retry ?? 0
         const { miaoFetch } = useMiaoFetch({
             retry
-		});
+        })
         return {
             response: new Promise<{
-				status: 'process' | 'success' | 'failed',
+                status: 'process' | 'success' | 'failed'
                 error?: unknown
-			}>(async resolve => {
+            }>(async (resolve) => {
                 const response = await miaoFetch({
                     url,
-					method: "get",
+                    method: 'get',
                     params: {
                         id: eventId
                     }
-				});
-				resolve(response.data);
                 })
-		};
+                resolve(response.data)
+            })
+        }
+    }
 }
-};
 
 export default function useMiaoFetchApi() {
-	return miaoFetchApi;
+    return miaoFetchApi
 }

src/types/fetch.ts

@@ -1,29 +1,29 @@
 import { directory, file } from "./type";
 
 export type miaoFetchConfig = {
-    retry?: number
+	retry?: number;
-}
+};
 
-export type getOption = {
+export type getOption = {} & miaoFetchConfig;
-} & miaoFetchConfig
 
-export type getResponse = (file | directory)[]
+export type getResponse = (file | directory)[];
 
 export type uploadOption = {
 	/**
 	 * 上传进度回调函数
 	 * @param {any} percent 进度百分比，float类型
 	 */
-    onProcess?: (percent: number) => void
+	onProcess?: (percent: number) => void;
 	/**
 	 * 上传文件执行的操作
 	 * write即为覆盖写
 	 * append即为增量写
 	 */
-    type?: 'write' | 'append'
+	type?: "write" | "append";
-} & miaoFetchConfig
+} & miaoFetchConfig;
 
-export type deleteOption = {
+export type deleteOption = {} & miaoFetchConfig;
-} & miaoFetchConfig
+export type renameOption = {} & miaoFetchConfig;
-export type queryOption = {
+export type cutOption = {} & miaoFetchConfig
-} & miaoFetchConfig
+export type mkdirOption = {} & miaoFetchConfig
+export type queryOption = {} & miaoFetchConfig;

src/views/miaoDirectory.vue

@@ -1,15 +1,12 @@
 <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">
-            <div
+            <div class="container-top" :style="{
-                class="container-top"
-                :style="{
                 backgroundColor:
                     index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
             }">
-                <div
+                <div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
-                    class="container-top-colorfulBar"
-                    :style="{ backgroundColor: props.color }"></div>
                 <div class="container-top-breadcrumb">
                     <!-- <n-scrollbar x-scrollable> -->
                     <div class="container-top-breadcrumb-container">
@@ -19,10 +16,8 @@
                                     <CloudOutline />
                                 </n-icon>
                             </n-breadcrumb-item>
-                            <n-breadcrumb-item
+                            <n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
-                                v-for="dir in currentDirectory?.directoryArray"
+                                @click="setCurrentDirectory(dir)" :clickable="true">
-                                @click="setCurrentDirectory(dir)"
-                                :clickable="true">
                                 <div>{{ dir.name }}</div>
                             </n-breadcrumb-item>
                         </n-breadcrumb>
@@ -30,82 +25,77 @@
                     <!-- </n-scrollbar> -->
                 </div>
                 <div class="container-top-tools">
-                    <n-icon
+                    <n-icon class="container-top-tools-item" size="15" @click="handleBack">
-                        class="container-top-tools-item"
-                        size="15"
-                        @click="handleBack">
                         <ChevronBackOutline />
                     </n-icon>
-                    <n-icon
+                    <n-icon class="container-top-tools-item" size="14" @click="handleReload">
-                        class="container-top-tools-item"
+                        <ReloadOutline class="container-top-tools-item-reload" />
-                        size="14"
-                        @click="handleReload">
-                        <ReloadOutline
-                            class="container-top-tools-item-reload" />
                     </n-icon>
-                    <n-icon
+                    <n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
-                        class="container-top-tools-item"
-                        size="20"
-                        @click="emit('exit')">
                         <CloseOutline />
                     </n-icon>
                 </div>
             </div>
-            <div
+            <div class="container-items" :style="{
-                class="container-items"
-                :style="{
                 backgroundColor:
                     index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
             }">
                 <n-scrollbar>
                     <transition-group name="dirItem">
-                        <miaoDirectoryItem
+                        <miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
-                            v-for="dir in showData_directory"
+                            :color="props.color" :selected="selectedItem.value.includes(dir)"
-                            @click="setCurrentDirectory(dir)"
+                            @delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
-                            :item="dir"
+                            @drag-start="handleItemDragStart" @rename="handleItemRename(dir)"
-                            :key="dir.uid"
+                            @on-selected="handleItemSelect(dir)" />
-                            :color="props.color"
-                            @delete="handleItemDelete(dir)"
-                            @drag-start="handleItemDragStart" />
                     </transition-group>
                     <transition-group name="dirItem">
-                        <miaoDirectoryItem
+                        <miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
-                            v-for="file in showData_files"
+                            :color="props.color" :selected="selectedItem.value.includes(file)"
-                            :item="file"
+                            @click="handleItemClick(file)" @download="handleItemDownload(file)"
-                            :key="file.uid"
+                            @delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
-                            @click="openUrl(`${baseUrl}${api.get}${file.path}`)"
+                            @rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
-                            @download="
-                                openUrl(`${baseUrl}${api.get}${file.path}`, {
-                                    download: file.name
-                                })
-                            "
-                            @delete="handleItemDelete(file)"
-                            @drag-start="handleItemDragStart"
-                            :color="props.color" />
                     </transition-group>
                 </n-scrollbar>
             </div>
-            <div
+            <div class="container-bottom" :style="{
-                class="container-bottom"
-                :style="{
                 backgroundColor:
                     index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
-                }"></div>
+            }">
+                <div class="container-bottom-item">
+                    <div class="container-bottom-item-icon">
+                        <add-outline :style="{
+                            color:
+                                index % 2 === 0
+                                    ? 'rgb(0 0 0)'
+                                    : 'rgb(255 255 255)'
+                        }" @click="handleAddNewItem" />
+                    </div>
+                </div>
+                <div class="container-bottom-item">
+                    <div class="container-bottom-item-icon">
+                        <cloud-upload-outline :style="{
+                            color:
+                                index % 2 === 0
+                                    ? 'rgb(0 0 0)'
+                                    : 'rgb(255 255 255)'
+                        }" @click="handlePickFilesUpload" />
+                    </div>
+                </div>
+            </div>
             <miao-mask v-model:show="showModel"></miao-mask>
-            <!-- <miao-popup-input ref="popupInput"></miao-popup-input> -->
+            <miao-popup-input ref="popupInput"></miao-popup-input>
         </div>
     </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
 import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
-import type { file, directory } from '@/types/type.ts'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import Config from '@/config'
 import miaoMask from '@/components/miaoMask.vue'
 import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
-// import miaoPopupInput from "@/components/miaoPopupInput.vue";
+import miaoPopupInput from '@/components/miaoPopupInput.vue'
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import useDataBus from '@/hooks/useDataBus'
@@ -113,10 +103,14 @@ import {
     CloudOutline,
     ChevronBackOutline,
     ReloadOutline,
-    CloseOutline
+    CloseOutline,
+    CloudUploadOutline,
+    AddOutline
 } from '@vicons/ionicons5'
 import useUploadQueue from '@/hooks/useUploadQueue'
 import useVirtualPages from '@/hooks/useVirtualPages'
+import { filePicker } from '@/hooks/miaoTools'
+import { uniq } from 'lodash'
 
 const { baseUrl, api } = Config
 const dataBus = useDataBus()
@@ -137,6 +131,34 @@ const popupInput = ref()
 // 是否显示模态框
 const showModel = ref(0)
 
+class SelectedItem {
+    constructor() {
+        this._selectedItem = []
+    }
+    _selectedItem: (VirtualDirectory | VirtualFile)[]
+    push(item: VirtualDirectory | VirtualFile) {
+        this._selectedItem = [item, ...this._selectedItem]
+    }
+    remove(item: VirtualDirectory | VirtualFile) {
+        this._selectedItem = this._selectedItem.filter(v => v !== item)
+    }
+    clear() {
+        this._selectedItem = []
+    }
+    // 保证内容仍然存在于dir中且各个元素不重复
+    get value() {
+        return uniq(this._selectedItem).filter(v => {
+            if (currentDirectory.value === undefined) {
+                return false
+            }
+            // @ts-ignore
+            return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v)
+        })
+    }
+}
+// 已选择的item，用于多选功能
+const selectedItem = reactive(new SelectedItem())
+
 const currentObjects = defineModel<VirtualDirectory[]>('currentObjects', {
     required: true
 })
@@ -146,6 +168,7 @@ const currentDirectory = computed(() => {
     return currentObjects.value[0]
 })
 
+// 当前组件在views中的序号
 const index = computed(() => {
     for (let i in views) {
         if (views[i].uid === props.id) {
@@ -181,17 +204,9 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
         virtualDirectory.files === undefined ||
         virtualDirectory.directorys === undefined
     ) {
-        const data: (file | directory)[] = await miaoFetchApi.get(
+        await virtualDirectory.update()
-            virtualDirectory
-        )
-        virtualDirectory.updateContent(data)
     } else {
-        ;(async () => {
+        virtualDirectory.update()
-            const data: (file | directory)[] = await miaoFetchApi.get(
-                virtualDirectory
-            )
-            virtualDirectory.updateContent(data)
-        })()
     }
     currentObjects.value[0] = virtualDirectory
 }
@@ -225,7 +240,27 @@ const handleReload = () => {
     reload()
 }
 
-const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
+const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
+    if (selectedItem.value.length > 0) {
+        handleItemSelect(item)
+    } else {
+        if (item.type === 'file') {
+            openUrl(`${baseUrl}${api.get}${item.path}`)
+        } else if (item.type === 'directory') {
+            setCurrentDirectory(item)
+        }
+    }
+}
+
+const handleItemDownload = (item: VirtualFile) => {
+    openUrl(`${baseUrl}${api.get}${item.path}`, {
+        download: item.name
+    })
+}
+
+const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
+    for (let item of uniq([...selectedItem.value, _item])) {
+        ; (async () => {
             const { response } = miaoFetchApi.delete(item, {
                 retry: 5
             })
@@ -236,21 +271,54 @@ const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
             if (eventResult.status === 'success') {
                 reload()
             }
+        })()
+    }
+}
+
+const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
+    const popupRes = await popupInput.value.popup({
+        title: '重命名',
+        showInput: true,
+        inputValue: item.name,
+        inputProps: {
+            placeholder: item.name
+        },
+        options: [
+            {
+                label: '取消',
+                key: false,
+                type: 'error'
+            },
+            {
+                label: '确认',
+                key: true,
+                type: 'success'
+            }
+        ]
+    })
+    if (popupRes.key === false) {
+        return
+    }
+    const newName = popupRes.text
+    const { response } = miaoFetchApi.rename(item, newName, {
+        retry: 5
+    })
+    const id = (await response).eventId
+    const { response: res } = miaoFetchApi.query(id)
+    const eventResult = await res
+    if (eventResult.status === 'success') {
+        reload()
+    }
 }
 
 const handleItemDragStart = async (
     _event: DragEvent,
     item: VirtualDirectory | VirtualFile
 ) => {
-    if (item.type === 'file') {
+    const items = uniq([item, ...selectedItem.value])
-        dataBus.set('dragData_vFiles', [item])
+    dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
-    } else {
+    dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
-        dataBus.set('dragData_vDirectory', [item])
+    selectedItem.clear()
-    }
-}
-
-const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
-    setCurrentDirectory(vDirs[0])
 }
 
 const handleDropFiles = async (files: File[]) => {
@@ -262,6 +330,112 @@ const handleDropFiles = async (files: File[]) => {
         })
 }
 
+const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
+    // 不能移到自己或自己的子文件夹内
+    for (let vDir of vDirs) {
+        if (currentDirectory.value.getParents.includes(vDir)) {
+            return
+        }
+    }
+    for (let dir of vDirs) {
+        ; (async () => {
+            const _from = dir.parent
+            const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+                _from && _from.update()
+            }
+        })()
+    }
+}
+
+const handleDropVirtualFiles = (files: VirtualFile[]) => {
+    if (files[0].parent === currentDirectory.value) {
+        return
+    }
+    for (let file of files) {
+        ; (async () => {
+            const _from = file.parent
+            const { response } = miaoFetchApi.cut(file, currentDirectory.value)
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+                _from.update()
+            }
+        })()
+    }
+}
+
+const handlePickFilesUpload = async () => {
+    const files = await filePicker({
+        multiple: true
+    })
+    const _currDir = currentDirectory.value
+    uploadQueue.push(files, _currDir, {
+        onFinish() {
+            _currDir.update()
+        }
+    })
+}
+
+const handleAddNewItem = async () => {
+    const popupRes = await popupInput.value.popup({
+        title: '新建文件/文件夹',
+        showInput: true,
+        inputProps: {
+            placeholder: ''
+        },
+        options: [
+            {
+                label: '取消',
+                key: 'cancel',
+                type: 'error'
+            },
+            {
+                label: '文件',
+                key: 'file',
+                type: 'success'
+            },
+            {
+                label: '文件夹',
+                key: 'dir',
+                type: 'success'
+            }
+        ]
+    })
+    // todo: 上传前如重名文件夹等等的错误提前检查
+    if (popupRes.key === 'cancel' || popupRes.text === '') {
+        return
+    }
+    const _currDir = currentDirectory.value
+    const name = popupRes.text
+    const opType: 'file' | 'dir' = popupRes.key
+    if (opType === 'dir') {
+        const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
+        if (res.message === 'success') {
+            _currDir.update()
+        }
+    } else {
+        const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
+        const res = await response
+        if (res.message === 'success') {
+            _currDir.update()
+        }
+    }
+}
+
+const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
+    if (!selectedItem.value.includes(item)) {
+        selectedItem.push(item)
+    } else {
+        selectedItem.remove(item)
+    }
+}
 onMounted(async () => {
     await setCurrentDirectory(currentDirectory.value)
 })
@@ -275,7 +449,7 @@ $bottom-bar-height: 60px;
     position: relative;
     height: 100%;
     width: inherit;
-    min-width: 266px;
+    // min-width: 236px;
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -377,11 +551,35 @@ $bottom-bar-height: 60px;
         height: $bottom-bar-height;
         background-color: bisque;
         display: flex;
-        justify-content: center;
+        justify-content: space-around;
         align-items: center;
         user-select: none;
         box-shadow: 0px 1px 10px #888888;
         z-index: 2;
+
+        .container-bottom-item {
+            height: 40px;
+            width: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .container-bottom-item-icon {
+                svg {
+                    width: 30px;
+                    height: 30px;
+                    transition: all 0.3s ease;
+                    cursor: pointer;
+                }
+
+                &:hover {
+                    svg {
+                        width: 40px;
+                        height: 40px;
+                    }
+                }
+            }
+        }
     }
 }
 
@@ -404,5 +602,4 @@ $bottom-bar-height: 60px;
 //             position: absolute;
 //         }
 //     }
-// }
+// }</style>
-</style>

vite.config.ts

@@ -1,55 +1,70 @@
-import { defineConfig } from "vite";
+import { defineConfig } from 'vite'
-import vue from "@vitejs/plugin-vue";
+import vue from '@vitejs/plugin-vue'
-import { resolve } from "path";
+import { resolve } from 'path'
-import { viteSingleFile } from "vite-plugin-singlefile"
+import { viteSingleFile } from 'vite-plugin-singlefile'
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [vue(), viteSingleFile()],
     resolve: {
         alias: {
-			"@": resolve(__dirname, "src")
+            '@': resolve(__dirname, 'src')
         }
     },
     server: {
         proxy: {
-			"/get": {
+            '/get': {
-				target: "http://127.0.0.1:17705",
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/get/, "/get")
+                rewrite: (path) => path.replace(/^\/get/, '/get')
             },
 
-			"/upload": {
+            '/upload': {
-				target: "http://127.0.0.1:17705",
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/upload/, "/upload")
+                rewrite: (path) => path.replace(/^\/upload/, '/upload')
             },
 
-			"/delete": {
+            '/delete': {
-				target: "http://127.0.0.1:17705",
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/delete/, "/delete")
+                rewrite: (path) => path.replace(/^\/delete/, '/delete')
             },
-			"/query": {
+            '/query': {
-				target: "http://127.0.0.1:17705",
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/query/, "/query")
+                rewrite: (path) => path.replace(/^\/query/, '/query')
             },
+            '/rename': {
+                target: 'http://127.0.0.1:17705',
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/rename/, '/rename')
+            },
+            '/cut': {
+                target: 'http://127.0.0.1:17705',
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/cut/, '/cut')
+            },
+            '/mkdir': {
+                target: 'http://127.0.0.1:17705',
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/mkdir/, '/mkdir')
+            }
         }
     },
     build: {
         rollupOptions: {
             input: {
-				main: resolve(__dirname, "index.html")
+                main: resolve(__dirname, 'index.html')
             },
             output: {
                 // 配置输出为单文件
                 inlineDynamicImports: true,
                 manualChunks: undefined,
-				entryFileNames: "bundle.js",
+                entryFileNames: 'bundle.js',
-				format: "iife", // 立即执行函数格式
+                format: 'iife', // 立即执行函数格式
-				name: "MyBundle"
+                name: 'MyBundle'
             }
         }
     }
-});
+})