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

2024-08-19 22:39:15 +08:00
commit 1b5abdf40c
@@ -1,11 +1,11 @@
 todo: 标签页，miaoDirectory切换动画                      [finish]
 todo: 重构virtualPage，所有page以插件形式使用             [finish]
-todo: miaoDirectory插件化，为后续插件功能开发做准备        [finish]
+todo: miaoDirectory插件化，为后续插件功能开发做准备       [finish]
 todo: miaoPopupInput, 弹出一个输入框                     [finish]
 todo: miaoDirectory的重命名功能                          [finish]
 todo: miaoDirectory的剪切功能                            [finish]
 todo: miaoDirectory的上传按钮                            [finish]
+todo: miaoDirectory的新建文件/文件夹功能                  [finish]
 todo: VirtualDirectory更新时更新文件信息
-todo: miaoDirectory的新建文件/文件夹功能
 todo: miaoDirectory的复制文件/文件夹功能
 todo: miaoDirectory的多选功能
@@ -71,11 +71,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];
 	}

 	/**
@@ -83,11 +83,11 @@ class VirtualDirectory {
 	 * @param {number} layer 需要跳转的层数
 	 * @returns {VirtualDirectory}
 	 */
-	getParents(layer: number): VirtualDirectory {
+	getParent(layer: number): VirtualDirectory {
 		if (layer <= 0 || !this.parent) {
 			return this;
 		}
-		return this.parent.getParents(layer - 1);
+		return this.parent.getParent(layer - 1);
 	}

 	updateContent(content: (file | directory)[]) {
@@ -59,7 +59,7 @@ const handleContextMenu = (e: MouseEvent) => {

 const handleTouchStart = (e: TouchEvent) => {
    if(props.touchTimeOut === undefined) {
-        return 
+        return
    }
    timer_touch ?? clearTimeout(timer_touch)
    timer_touch = setTimeout(() => {
@@ -1,15 +1,16 @@
 const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');

 export default {
-	baseUrl,
-	uploadSizeLimit: 1024 * 1024 * 100,
-	api: {
-		get: '/get',
-		upload: '/upload',
-		delete: '/delete',
-		query: '/query',
-		rename: '/rename',
-		cut: '/cut'
-	},
-	enableUpload: true,
-};
+    baseUrl,
+    uploadSizeLimit: 1024 * 1024 * 100,
+    api: {
+        get: '/get',
+        upload: '/upload',
+        delete: '/delete',
+        query: '/query',
+        rename: '/rename',
+        mkdir: '/mkdir',
+        cut: '/cut'
+    },
+    enableUpload: true
+}
@@ -1,199 +1,266 @@
-import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
-import { getOption, getResponse, miaoFetchConfig, deleteOption, uploadOption, queryOption, renameOption, cutOption } from "@/types/fetch";
-import Config from "@/config";
-import axios, { AxiosRequestConfig } from "axios";
+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 } 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>) => {
-			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>) => {
+            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
+    },

-	/**
-	 * 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
-	 */
-	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("oprateType", 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)
+            })
+        }
+    },

-	/**
-	 * 删除对应的文件或文件夹，若为文件夹会递归删除
-	 */
-	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
-		});
+    /**
+     * 在目标文件夹下创建新的文件夹
+     */
+    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 {
-			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 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 {
-			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);
-			})
-		};
-	},
+    /**
+     * 删除对应的文件或文件夹，若为文件夹会递归删除
+     */
+    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
+        })

-	/**
-	 * 查询服务端操作事件的进展
-	 */
-	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);
-			})
-		};
-	}
-};
+        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)
+            })
+        }
+    },
+
+    /**
+     * 查询服务端操作事件的进展
+     */
+    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
 }
@@ -24,5 +24,6 @@ export type uploadOption = {

 export type deleteOption = {} & miaoFetchConfig;
 export type renameOption = {} & miaoFetchConfig;
-export type cutOption = {} & miaoFetchConfig;
+export type cutOption = {} & miaoFetchConfig
+export type mkdirOption = {} & miaoFetchConfig
 export type queryOption = {} & miaoFetchConfig;
@@ -1,12 +1,18 @@
 <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 class="container-top" :style="{
-                backgroundColor:
-                    index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-            }">
-                <div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
+            <div
+                class="container-top"
+                :style="{
+                    backgroundColor:
+                        index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+                }">
+                <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">
@@ -16,8 +22,10 @@
                                    <CloudOutline />
                                </n-icon>
                            </n-breadcrumb-item>
-                            <n-breadcrumb-item v-for="dir in currentDirectory?.directoryArray"
-                                @click="setCurrentDirectory(dir)" :clickable="true">
+                            <n-breadcrumb-item
+                                v-for="dir in currentDirectory?.getParents"
+                                @click="setCurrentDirectory(dir)"
+                                :clickable="true">
                                <div>{{ dir.name }}</div>
                            </n-breadcrumb-item>
                        </n-breadcrumb>
@@ -25,42 +33,88 @@
                    <!-- </n-scrollbar> -->
                </div>
                <div class="container-top-tools">
-                    <n-icon class="container-top-tools-item" size="15" @click="handleBack">
+                    <n-icon
+                        class="container-top-tools-item"
+                        size="15"
+                        @click="handleBack">
                        <ChevronBackOutline />
                    </n-icon>
-                    <n-icon class="container-top-tools-item" size="14" @click="handleReload">
-                        <ReloadOutline class="container-top-tools-item-reload" />
+                    <n-icon
+                        class="container-top-tools-item"
+                        size="14"
+                        @click="handleReload">
+                        <ReloadOutline
+                            class="container-top-tools-item-reload" />
                    </n-icon>
-                    <n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
+                    <n-icon
+                        class="container-top-tools-item"
+                        size="20"
+                        @click="emit('exit')">
                        <CloseOutline />
                    </n-icon>
                </div>
            </div>
-            <div class="container-items" :style="{
-                backgroundColor:
-                    index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-            }">
+            <div
+                class="container-items"
+                :style="{
+                    backgroundColor:
+                        index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+                }">
                <n-scrollbar>
                    <transition-group name="dirItem">
-                        <miaoDirectoryItem v-for="dir in showData_directory" @click="setCurrentDirectory(dir)"
-                            :item="dir" :key="dir.uid" :color="props.color" @delete="handleItemDelete(dir)"
-                            @drag-start="handleItemDragStart" @rename="handleItemRename(dir)" />
+                        <miaoDirectoryItem
+                            v-for="dir in showData_directory"
+                            @click="setCurrentDirectory(dir)"
+                            :item="dir"
+                            :key="dir.uid"
+                            :color="props.color"
+                            @delete="handleItemDelete(dir)"
+                            @drag-start="handleItemDragStart"
+                            @rename="handleItemRename(dir)" />
                    </transition-group>
                    <transition-group name="dirItem">
-                        <miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
-                            @click="openUrl(`${baseUrl}${api.get}${file.path}`)" @download="handleItemDownload(file)"
-                            @delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
-                            @rename="handleItemRename(file)" :color="props.color" />
+                        <miaoDirectoryItem
+                            v-for="file in showData_files"
+                            :item="file"
+                            :key="file.uid"
+                            @click="openUrl(`${baseUrl}${api.get}${file.path}`)"
+                            @download="handleItemDownload(file)"
+                            @delete="handleItemDelete(file)"
+                            @drag-start="handleItemDragStart"
+                            @rename="handleItemRename(file)"
+                            :color="props.color" />
                    </transition-group>
                </n-scrollbar>
            </div>
-            <div class="container-bottom" :style="{
-                backgroundColor:
-                    index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
-            }">
-                <div class="container-bottom-icon">
-                    <cloud-upload-outline
-                        :style="{ color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)' }" @click="handlePickFilesUpload"/>
+            <div
+                class="container-bottom"
+                :style="{
+                    backgroundColor:
+                        index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
+                }">
+                <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>
@@ -77,7 +131,7 @@ import { computed, onMounted, 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'
@@ -86,7 +140,8 @@ import {
    ChevronBackOutline,
    ReloadOutline,
    CloseOutline,
-    CloudUploadOutline
+    CloudUploadOutline,
+    AddOutline
 } from '@vicons/ionicons5'
 import useUploadQueue from '@/hooks/useUploadQueue'
 import useVirtualPages from '@/hooks/useVirtualPages'
@@ -161,7 +216,7 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
        )
        virtualDirectory.updateContent(data)
    } else {
-        ; (async () => {
+        ;(async () => {
            const data: (file | directory)[] = await miaoFetchApi.get(
                virtualDirectory
            )
@@ -225,17 +280,20 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
        showInput: true,
        inputValue: item.name,
        inputProps: {
-            placeholder: item.name,
+            placeholder: item.name
        },
-        options: [{
-            label: '取消',
-            key: false,
-            type: 'error'
-        }, {
-            label: '确认',
-            key: true,
-            type: 'success'
-        },]
+        options: [
+            {
+                label: '取消',
+                key: false,
+                type: 'error'
+            },
+            {
+                label: '确认',
+                key: true,
+                type: 'success'
+            }
+        ]
    })
    if (popupRes.key === false) {
        return
@@ -273,11 +331,14 @@ const handleDropFiles = async (files: File[]) => {
 }

 const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
-    if (vDirs[0].parent === currentDirectory.value) {
-        return
+    // 不能移到自己或自己的子文件夹内
+    for (let vDir of vDirs) {
+        if (currentDirectory.value.getParents.includes(vDir)) {
+            return
+        }
    }
    for (let dir of vDirs) {
-        ; (async () => {
+        ;(async () => {
            const _from = dir.parent
            const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
            const id = (await response).eventId
@@ -297,7 +358,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
@@ -317,12 +378,58 @@ const handlePickFilesUpload = async () => {
    })
    const _currDir = currentDirectory.value
    uploadQueue.push(files, _currDir, {
-        onFinish(){
+        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
+    }
+    console.log(popupRes)
+    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()
+        }
+    }
+}
 onMounted(async () => {
    await setCurrentDirectory(currentDirectory.value)
 })
@@ -438,24 +545,31 @@ $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-icon {
-            svg {
-                width: 30px;
-                height: 30px;
-                transition: all 0.3s ease;
-                cursor: pointer;
-            }
-
-            &:hover {
+        .container-bottom-item {
+            height: 40px;
+            width: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .container-bottom-item-icon {
                svg {
-                    width: 40px;
-                    height: 40px;
+                    width: 30px;
+                    height: 30px;
+                    transition: all 0.3s ease;
+                    cursor: pointer;
+                }
+
+                &:hover {
+                    svg {
+                        width: 40px;
+                        height: 40px;
+                    }
                }
            }
        }
@@ -481,4 +595,5 @@ $bottom-bar-height: 60px;
 //             position: absolute;
 //         }
 //     }
-// }</style>
+// }
+</style>
@@ -1,65 +1,70 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import { resolve } from "path";
-import { viteSingleFile } from "vite-plugin-singlefile"
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import { viteSingleFile } from 'vite-plugin-singlefile'

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