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

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,38 +1,31 @@
 <template>
-    <div
-        class="miao-item"
-        draggable="true"
-        ref="itemRef"
-        @dragstart="handleDragStart">
-        <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 }}
-                </div>
-                <div class="item-main-info-date" v-if="time">
-                    {{ time }}
+    <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
+        <miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
+            <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 }}
+                    </div>
+                    <div class="item-main-info-date" v-if="time">
+                        {{ time }}
+                    </div>
                 </div>
+                <!-- 菜单现在通过右键/长按呼出 -->
+                <!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
+                    <div class="item-main-option" @click="(e) => e.stopPropagation()">
+                        <EllipsisVertical class="item-main-option-icon" />
+                    </div>
+                </n-dropdown> -->
             </div>
-            <n-dropdown
-                trigger="click"
-                :options="dropDownOptions"
-                @select="handleDropdownSelect">
-                <div
-                    class="item-main-option"
-                    @click="(e) => e.stopPropagation()">
-                    <EllipsisVertical class="item-main-option-icon" />
-                </div>
-            </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,11 +1,9 @@
 <template>
-	<transition name="transition">
-		<div class="mask-body" ref="maskBodyRef" v-show="showMask">
-      <div @click="e=>e.stopPropagation()">
+  <transition name="transition">
+    <div class="mask-body" ref="maskBodyRef" v-show="showMask">
         <slot></slot>
-      </div>
-		</div>
-	</transition>
+    </div>
+  </transition>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
@@ -17,27 +15,34 @@ const showMask = defineModel<boolean | number>('show', { default: false, require
 </script>
 <style lang="scss" scoped>
 .mask-body {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top:0;
-    left: 0;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 7058214053994319;
+
+  // &-container {
+
+  // }
+
+  &-show {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(0, 0, 0, 0.3);
-    z-index: 7058214053994319;
-    &-show {
-        display: flex;
-        transition: opacity 0.3s 0.01s;
-        opacity: 1;
-    }
-    &-hide {
-        opacity: 0;
-        transition: display 0.01s 0.3s;
-        display: none;
-    }
+    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-input v-model:value="inputValue" type="text" placeholder="基本的 Input" />
-      <n-button @click="_resolve && _resolve(inputValue)">确认</n-button>
+    <n-card class="popup-card" :title="popupConfig?.title" size="medium">
+      {{ popupConfig?.content }}
+      <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>({
-  title: '',
-  placeholder: ''
-})
+const popupConfig = ref<popupConfigType>()
 
-
-const popup = () => {
+const popup = async (config: popupConfigType) => {
+  popupConfig.value = config
   showMask.value = true
-  return new Promise((resolve: (text: string) => void) => { _resolve.value = resolve }).then((text: string) => {
-    showMask.value = false
-    return text;
-  });
+  const key = await new Promise((resolve: (key: unknown) => unknown) => {
+    _resolve.value = resolve
+  })
+  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>