feats

package.json

@@ -16,7 +16,8 @@
     "js-base64": "^3.7.2",
     "nprogress": "^0.2.0",
     "vue": "^3.2.25",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vue-simple-context-menu": "^4.0.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",

src/components/ContextMenu.vue

@@ -1,65 +1,58 @@
 <template>
-  <div class="content-menu-box">
-    <a-menu @click="handleMenu" v-model:selectedKeys="selectedKeys">
-      <a-menu-item key="save">
-        新建文件
-      </a-menu-item>
-      <a-menu-divider />
-      <a-menu-item key="newfolder">
-        新建文件夹
-      </a-menu-item>
-    </a-menu>
-  </div>
-  <a-modal v-model:visible="visible" title="新建" @ok="confirmNew">
+  <vue-simple-context-menu
+    element-id="my-context-menu"
+    :options="contextMenuOptions"
+    :ref="el => contextMenuRef = el"
+    @option-clicked="optionClicked"
+  />
+  <a-modal v-model:visible="modelProps.visible" :title="modelProps.title" @ok="confirmNew">
     <a-input v-model:value="inputText" placeholder="请输入名称" />
   </a-modal>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-// import { useModel } from '@zjxpcyc/vue-tiny-store'
+import { reactive, ref } from 'vue'
 import eventBus from '@/utils/eventBus'
 
-const visible = ref(false)
+const modelProps = reactive({ visible: false, title: undefined })
 const inputText = ref()
-const menuKey = ref()
-const selectedKeys = ref([])
-// const { curMenu } = useModel('menu')
-// const saveDisabledItem = computed(() => {
-//   return !curMenu.value || curMenu.value.type !== 'file'
-// })
 
-const emit = defineEmits(['menuClick'])
+const menuRef = ref()
+const contextMenuRef = ref()
+const contextMenuOptions = [
+  { id: 'newFolder', name: '新建文件夹' },
+  { id: 'newFile', name: '新建文件' },
+]
+const optionRef = ref()
 
-const confirmNew = () => {
-  const inputValue = inputText.value
+const emit = defineEmits(['newFile', 'newFolder'])
 
-  switch (menuKey.value) {
-    case 'save':
-      eventBus.dispatchEvent('menu.newFile', inputValue)
-      break;
-    case 'newfolder':
-      eventBus.dispatchEvent('menu.newFolder', inputValue)
-      break;
-    default:
-      break;
-  }
-  visible.value = false
-  inputText.value = undefined
+const onContextMenu = ({ event, menu }) => {
+  contextMenuRef.value.showMenu(event)
+  menuRef.value = menu
 }
 
-const handleMenu = (e) => {
-  menuKey.value = e.key
-  visible.value = true
-  // 主要是为了清除样式, 但是暂时不起作用, 不知道为啥
-  selectedKeys.value = []
-  emit('menuClick')
+const optionClicked = (event) => {
+  modelProps.visible = true
+  modelProps.title = event.option.name
+  optionRef.value = event.option
 }
 
+const confirmNew = () => {
+  const option = optionRef.value
+  const data = { menu: menuRef.value, name: inputText.value }
+  emit(option.id, data)
+  modelProps.visible = false
+  inputText.value = undefined
+}
+
+eventBus.addEventListener('menu.contextMenu', onContextMenu)
+
 </script>
 
 <style lang="less" scoped>
-.content-menu-box {
+.my-context-menu {
   width: 200px;
+  background-color: #fff;
 }
 </style>

src/components/SubMenu.vue

@@ -4,18 +4,13 @@
       v-if="menu.type === 'dir'"
       :key="`/@@dir@@/${menu.path}`"
     >
-      <template #title>
-        <a-tooltip v-model:visible="tipVisible" trigger="no-trigger" placement="bottom" overlayClassName="menu-tooltip">
-          <template #title>
-            <ContextMenuVue @menuClick="tipVisible = false" />
-          </template>
-          <div class="dir-context-menu" @contextmenu.stop="handleContextMenu(`/@@dir@@/${menu.path}`)">
-            {{menu.name}}
-          </div>
-        </a-tooltip>
+      <template #title>        
+        <div class="dir-context-menu" @contextmenu.prevent.stop="event => onContextMenu(event, menu)">
+          {{menu.name}}
+        </div>
       </template>
       <template v-if="menu.children">
-        <SubMenu :menus="menu.children" :sub-menu="SubMenu" @contextfolder="handleContextMenu" />
+        <SubMenu :menus="menu.children" :sub-menu="SubMenu" />
       </template>
     </a-sub-menu>
     <a-menu-item v-else :key="`/@@file@@/${menu.path}`">{{ menu.name }}</a-menu-item>
@@ -23,9 +18,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import ContextMenuVue from './ContextMenu.vue';
-
+import eventBus from '@/utils/eventBus'
 const props = defineProps({
   menus: {
     type: Array,
@@ -34,20 +27,10 @@ const props = defineProps({
   subMenu: undefined,
 })
 
-const emit = defineEmits([ 'contextfolder' ])
-
 const SubMenu = props.subMenu
 
-const tipVisible = ref(false)
-
-const handleContextMenu = (key) => {
-  tipVisible.value = true
-
-  if (Array.isArray(key)) {
-    emit('contextfolder', key)
-  } else {
-    emit('contextfolder', [key])
-  }
+const onContextMenu = (event, menu) => {
+  eventBus.dispatchEvent('menu.contextMenu', { event, menu })
 }
 
 </script>

src/layouts/components/SiderBar.vue

@@ -10,22 +10,19 @@
     >
       <a-menu-item-group key="g1">
         <template #title>
-          <a-tooltip trigger="contextmenu" placement="bottom" overlayClassName="menu-tooltip">
-            <template #title>
-              <ContextMenuVue />
-            </template>
-            <div>我的日记</div>
-          </a-tooltip>
+          <div>我的日记</div>
         </template>
       </a-menu-item-group>
-      <SubMenu :menus="fileTree" :sub-menu="SubMenu" @contextfolder="handleOpenChange"></SubMenu>
+      <SubMenu :menus="fileTree" :sub-menu="SubMenu"></SubMenu>
     </a-menu>
+    <ContextMenu :newFile="createNewFile" :newFolder="createNewFolder" />
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { useModel } from '@zjxpcyc/vue-tiny-store'
-import ContextMenuVue from '@/components/ContextMenu.vue';
+import ContextMenu from '@/components/ContextMenu.vue';
 import SubMenu from '@/components/SubMenu.vue';
 import eventBus from '@/utils/eventBus'
 
@@ -36,6 +33,7 @@ const props = defineProps({
   }
 })
 
+
 const { user } = useModel('user')
 const { curMenu, menus, getMenus } = useModel('menu')
 const { fileArr, fileTree, getNote, getFiles } = useModel('note')
@@ -51,10 +49,6 @@ if (!fileTree || !fileTree.length) {
 const handleMenu = (e) => {
   const menuId = e.key
   const path = menuId.replace('/@@file@@/', '')
-
-  // const note = fileArr.filter(x => x.name === path)[0]
-  // curMenu.value = menu
-
   getNote(user, path)
 }
 
@@ -63,16 +57,12 @@ const handleOpenChange = (keys) => {
   if (!menuId) return;
 
   const path = menuId.replace('/@@dir@@/', '')
-
-  // const menu = getDeep(menus, path, 'dir');
-  // curMenu.value = menu
-
   getFiles(user, path, repo)
 }
 
 // 创建新文件
-const createNewFile = (newFileName) => {
-  const parentPath = curMenu.value ? curMenu.value.path : undefined
+const createNewFile = (parentMenu, newFileName) => {
+  const parentPath = parentMenu.path
   const newFilePath = parentPath ? `${parentPath}/${newFileName}.html` : `${newFileName}.html`
 
   newFile('又是一篇崭新的日记...', newFilePath, user).then(() => {
@@ -88,8 +78,8 @@ const createNewFile = (newFileName) => {
 }
 
 // 创建新目录
-const createNewFolder = (newFolderName) => {
-  const parentPath = curMenu.value ? curMenu.value.path : undefined
+const createNewFolder = (parentMenu, newFolderName) => {
+  const parentPath = parentMenu.path
   const newFilePath = parentPath ? `${parentPath}/${newFolderName}` : newFolderName
 
   newFolder(newFilePath, user).then(() => {
@@ -104,6 +94,4 @@ const createNewFolder = (newFolderName) => {
   })
 }
 
-eventBus.addEventListener('menu.newFile', createNewFile)
-eventBus.addEventListener('menu.newFolder', createNewFolder)
 </script>

src/main.js

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import Antd from 'ant-design-vue';
+import VueSimpleContextMenu from 'vue-simple-context-menu';
+import 'vue-simple-context-menu/dist/vue-simple-context-menu.css';
 import 'ant-design-vue/dist/antd.css';
 import 'nprogress/nprogress.css'
 import App from './App.vue'
@@ -11,4 +13,5 @@ const app = createApp(App)
 app.use(store)
 app.use(router)
 app.use(Antd)
+app.component('vue-simple-context-menu', VueSimpleContextMenu);
 app.mount('#app')

yarn.lock

@@ -284,6 +284,11 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+click-outside-vue3@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/click-outside-vue3/-/click-outside-vue3-4.0.1.tgz#81a6ac01696b301764b42db6fdbdf28e7cd8ef95"
+  integrity sha512-sbplNecrup5oGqA3o4bo8XmvHRT6q9fvw21Z67aDbTqB9M6LF7CuYLTlLvNtOgKU6W3zst5H5zJuEh4auqA34g==
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -945,6 +950,13 @@ vue-router@4:
   dependencies:
     "@vue/devtools-api" "^6.0.0"
 
+vue-simple-context-menu@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/vue-simple-context-menu/-/vue-simple-context-menu-4.0.4.tgz#97aff25ee0ae0f82c0049797fdd60abbc3460b8d"
+  integrity sha512-Kn6rTXzKHpdTsPoKpBUQC4K+iZxpYiDU04BbGOgLuX/jLFIA7arzIstOp3+tFoV5JaWrjxGPLAuj2BAf8/G4pQ==
+  dependencies:
+    click-outside-vue3 "^4.0.1"
+
 vue-types@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/vue-types/-/vue-types-3.0.2.tgz#ec16e05d412c038262fc1efa4ceb9647e7fb601d"