添加miaoContextMenu用于自定义右键菜单

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

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

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,88 @@
+<!-- 基于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
+    // }, 200)
+    nextTick(()=>{
+        showContextMenu.value -= 1
+    })
+}
+
+const handleSelect = async (key: string) => {
+    emit('select', key)
+}
+
+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,13 +1,8 @@
 <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"
-        ref="itemRef"
-        @dragstart="handleDragStart">
             <div class="item-main">
-            <div
+                <div class="item-main-front" :style="{ backgroundColor: props.color }"></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">
@@ -17,22 +12,20 @@
                         {{ 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,15 +36,10 @@ import {
     LogoJavascript,
     LogoVue,
     PlayCircle,
-    EllipsisVertical,
     Disc
 } from '@vicons/ionicons5'
 import { computed, ref } from 'vue'
 import dateFormatter from '@/hooks/dateFormatter'
-// import useDataBus from '@/hooks/useDataBus'
-import { NDropdown } from 'naive-ui'
-
-// const dataBus = useDataBus()
 
 const props = defineProps<{
     item: VirtualDirectory | VirtualFile
@@ -96,7 +84,7 @@ const dropDownOptions = computed(() => {
     return options
 })
 
-const handleDropdownSelect = (key: 'download' | 'delete') => {
+const handleDropdownSelect = (key: string) => {
     if (key === 'download') {
         emit('download')
     } else if (key === 'delete') {
@@ -179,6 +167,7 @@ const handleDragStart = (event: DragEvent) => {
     justify-content: center;
     align-items: center;
     margin: 10px 10px;
+
     .item-main {
         position: relative;
         width: 100%;
@@ -188,30 +177,36 @@ const handleDragStart = (event: DragEvent) => {
         display: flex;
         align-items: center;
         transition: background-color 0.3s;
+
         .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;
         }
+
         .item-main-info {
             margin-left: 10px;
             height: 100%;
             display: flex;
             flex-direction: column;
+
             &-name {
                 user-select: none;
             }
+
             &-date {
                 user-select: none;
                 font-size: small;
             }
         }
+
         .item-main-option {
             height: 100%;
             width: 20px;
@@ -225,18 +220,22 @@ 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;

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,79 @@
 <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
+  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
   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;
+
+    .popup-button-container-button {
+      &:not(:last-child) {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+</style>

src/views/miaoDirectory.vue

@@ -1,15 +1,11 @@
 <template>
     <miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles">
         <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 +15,8 @@
                                     <CloudOutline />
                                 </n-icon>
                             </n-breadcrumb-item>
-                            <n-breadcrumb-item
+                            <n-breadcrumb-item v-for="dir in currentDirectory?.directoryArray"
-                                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,69 +24,44 @@
                     <!-- </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" @click="setCurrentDirectory(dir)"
-                            v-for="dir in showData_directory"
+                            :item="dir" :key="dir.uid" :color="props.color" @delete="handleItemDelete(dir)"
-                            @click="setCurrentDirectory(dir)"
-                            :item="dir"
-                            :key="dir.uid"
-                            :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"
+                            @click="openUrl(`${baseUrl}${api.get}${file.path}`)" @download="
-                            :item="file"
-                            :key="file.uid"
-                            @click="openUrl(`${baseUrl}${api.get}${file.path}`)"
-                            @download="
                                 openUrl(`${baseUrl}${api.get}${file.path}`, {
                                     download: file.name
                                 })
-                            "
+                                " @delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
-                            @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>
             <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>
@@ -105,7 +74,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'
@@ -146,6 +115,7 @@ const currentDirectory = computed(() => {
     return currentObjects.value[0]
 })
 
+// 当前组件在views中的序号
 const index = computed(() => {
     for (let i in views) {
         if (views[i].uid === props.id) {
@@ -249,10 +219,6 @@ const handleItemDragStart = async (
     }
 }
 
-const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
-    setCurrentDirectory(vDirs[0])
-}
-
 const handleDropFiles = async (files: File[]) => {
     currentDirectory.value &&
         uploadQueue.push(files, currentDirectory.value, {
@@ -262,6 +228,30 @@ const handleDropFiles = async (files: File[]) => {
         })
 }
 
+const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
+    if (vDirs[0].parent === currentDirectory.value) {
+        return
+    }
+    const popupRes = await popupInput.value.popup({
+        title: '重命名',
+        showInput: true,
+        inputProps: {
+            placeholder: '',
+        },
+        options: [{
+            label: '取消',
+            key: false,
+            type: 'error'
+        }, {
+            label: '确认',
+            key: true,
+            type: 'success'
+        },]
+    })
+    console.log({ popupRes })
+    // setCurrentDirectory(vDirs[0])
+}
+
 onMounted(async () => {
     await setCurrentDirectory(currentDirectory.value)
 })
@@ -404,5 +394,4 @@ $bottom-bar-height: 60px;
 //             position: absolute;
 //         }
 //     }
-// }
+// }</style>
-</style>