From 93d7cf8d9dc45ffe78042887702b3c2168c07aa0 Mon Sep 17 00:00:00 2001
From: YangFong <yangfong2022@qq.com>
Date: Sat, 24 Aug 2024 13:06:29 +0800
Subject: [PATCH] feat: update trigger of dropdown

---
 src/App.vue                                   |  7 +-
 .../EditorHeader/EditDropdown.vue             | 17 +++-
 .../EditorHeader/FileDropdown.vue             | 17 +++-
 .../EditorHeader/HelpDropdown.vue             | 17 +++-
 .../EditorHeader/StyleDropdown.vue            | 17 +++-
 .../CodemirrorEditor/EditorHeader/index.vue   | 97 +++++++++++++++----
 6 files changed, 129 insertions(+), 43 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 27b91420d..ce01a90ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,6 +17,11 @@ body,
   padding: 0;
 }
 
+// 抵消下拉菜单开启时带来的样式
+body {
+  pointer-events: initial !important;
+}
+
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -78,6 +83,4 @@ body,
 .el-icon.el-color-picker__icon.is-icon-arrow-down {
   position: absolute;
 }
-
-
 </style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
index 2d9641234..36119a7fd 100644
--- a/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
@@ -8,6 +8,8 @@ import {
 
 import { useStore } from '@/stores'
 
+const props = defineProps([`isOpen`, `clickTrigger`, `openDropdown`, `updateOpen`])
+
 const store = useStore()
 
 const {
@@ -17,12 +19,17 @@ const {
 </script>
 
 <template>
-  <DropdownMenu>
-    <DropdownMenuTrigger class="flex items-center">
+  <DropdownMenu :open="props.isOpen" @update:open="props.updateOpen">
+    <DropdownMenuTrigger
+      class="flex items-center p-2 px-4"
+      :class="{
+        'bg-gray-2': props.isOpen,
+        'dark:bg-stone-9': props.isOpen,
+      }"
+      @click="props.clickTrigger()"
+      @mouseenter="props.openDropdown()"
+    >
       编辑
-      <el-icon class="ml-2">
-        <ElIconArrowDown />
-      </el-icon>
     </DropdownMenuTrigger>
     <DropdownMenuContent>
       <DropdownMenuItem @click="toggleShowUploadImgDialog()">
diff --git a/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
index bd575fee8..0a4f8f4f6 100644
--- a/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
@@ -11,6 +11,8 @@ import {
 
 import { useStore } from '@/stores'
 
+const props = defineProps([`isOpen`, `clickTrigger`, `openDropdown`, `updateOpen`])
+
 const store = useStore()
 
 const {
@@ -28,12 +30,17 @@ const {
 </script>
 
 <template>
-  <DropdownMenu>
-    <DropdownMenuTrigger class="flex items-center">
+  <DropdownMenu :open="props.isOpen" @update:open="props.updateOpen">
+    <DropdownMenuTrigger
+      class="flex items-center p-2 px-4"
+      :class="{
+        'bg-gray-2': props.isOpen,
+        'dark:bg-stone-9': props.isOpen,
+      }"
+      @click="props.clickTrigger()"
+      @mouseenter="props.openDropdown()"
+    >
       文件
-      <el-icon class="ml-2">
-        <ElIconArrowDown />
-      </el-icon>
     </DropdownMenuTrigger>
     <DropdownMenuContent>
       <DropdownMenuItem @click="importMarkdownContent()">
diff --git a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
index 68d3a42e3..441e9fd72 100644
--- a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
@@ -10,16 +10,23 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
+const props = defineProps([`isOpen`, `clickTrigger`, `openDropdown`, `updateOpen`])
+
 const aboutDialogVisible = ref(false)
 </script>
 
 <template>
-  <DropdownMenu>
-    <DropdownMenuTrigger class="flex items-center">
+  <DropdownMenu :open="props.isOpen" @update:open="props.updateOpen">
+    <DropdownMenuTrigger
+      class="flex items-center p-2 px-4"
+      :class="{
+        'bg-gray-2': props.isOpen,
+        'dark:bg-stone-9': props.isOpen,
+      }"
+      @click="props.clickTrigger()"
+      @mouseenter="props.openDropdown()"
+    >
       帮助
-      <el-icon class="ml-2">
-        <ElIconArrowDown />
-      </el-icon>
     </DropdownMenuTrigger>
     <DropdownMenuContent>
       <DropdownMenuItem @click="aboutDialogVisible = true">
diff --git a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
index e6540f195..96d9c22db 100644
--- a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
@@ -21,6 +21,8 @@ import {
 import { codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, legendOptions, themeOptions } from '@/config'
 import { useStore } from '@/stores'
 
+const props = defineProps([`isOpen`, `clickTrigger`, `openDropdown`, `updateOpen`])
+
 const store = useStore()
 
 const {
@@ -67,12 +69,17 @@ function customStyle() {
 </script>
 
 <template>
-  <DropdownMenu>
-    <DropdownMenuTrigger class="flex items-center">
+  <DropdownMenu :open="props.isOpen" @update:open="props.updateOpen">
+    <DropdownMenuTrigger
+      class="flex items-center p-2 px-4"
+      :class="{
+        'bg-gray-2': props.isOpen,
+        'dark:bg-stone-9': props.isOpen,
+      }"
+      @click="props.clickTrigger()"
+      @mouseenter="props.openDropdown()"
+    >
       样式
-      <el-icon class="ml-2">
-        <ElIconArrowDown />
-      </el-icon>
     </DropdownMenuTrigger>
     <DropdownMenuContent class="w-56">
       <StyleOptionMenu title="主题" :options="themeOptions" :current="theme" :change="themeChanged" />
diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index 7fced6a82..7261dfb34 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -1,8 +1,9 @@
 <script setup>
-import { nextTick } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElNotification } from 'element-plus'
 import CodeMirror from 'codemirror'
+import { Command } from 'lucide-vue-next'
 
 import PostInfo from './PostInfo.vue'
 import FileDropdown from './FileDropdown.vue'
@@ -32,35 +33,38 @@ const defaultKeyMap = CodeMirror.keyMap.default
 const modPrefix
   = defaultKeyMap === CodeMirror.keyMap.macDefault ? `Cmd` : `Ctrl`
 
+const kbdIcon
+  = defaultKeyMap === CodeMirror.keyMap.macDefault ? `⌘` : `⌃`
+
 const formatItems = [
   {
     label: `加粗`,
-    kbd: `${modPrefix} + B`,
+    kbd: `${kbdIcon}B`,
     emitArgs: [`addFormat`, `${modPrefix}-B`],
   },
   {
     label: `斜体`,
-    kbd: `${modPrefix} + I`,
+    kbd: `${kbdIcon}I`,
     emitArgs: [`addFormat`, `${modPrefix}-I`],
   },
   {
     label: `删除线`,
-    kbd: `${modPrefix} + D`,
+    kbd: `${kbdIcon}D`,
     emitArgs: [`addFormat`, `${modPrefix}-D`],
   },
   {
     label: `超链接`,
-    kbd: `${modPrefix} + K`,
+    kbd: `${kbdIcon}K`,
     emitArgs: [`addFormat`, `${modPrefix}-K`],
   },
   {
     label: `行内代码`,
-    kbd: `${modPrefix} + E`,
+    kbd: `${kbdIcon}E`,
     emitArgs: [`addFormat`, `${modPrefix}-E`],
   },
   {
     label: `格式化`,
-    kbd: `${modPrefix} + F`,
+    kbd: `${kbdIcon}F`,
     emitArgs: [`formatContent`],
   },
 ]
@@ -153,29 +157,64 @@ function copy() {
     })
   }, 350)
 }
+
+const isClickTrigger = ref(false)
+const isOpenList = reactive(Array.from({ length: 5 }).fill(false))
+function clickTrigger() {
+  isClickTrigger.value = !isClickTrigger.value
+}
+
+function openDropdown(index) {
+  return () => {
+    isOpenList.fill(false)
+    isOpenList[index] = true
+  }
+}
+
+function updateOpen(isOpen) {
+  if (!isOpen) {
+    isOpenList.fill(false)
+    isClickTrigger.value = false
+  }
+}
 </script>
 
 <template>
   <div class="header-container">
-    <el-space class="dropdowns flex-auto" size="large">
-      <FileDropdown />
-      <DropdownMenu>
-        <DropdownMenuTrigger class="flex items-center">
+    <div class="dropdowns flex flex-auto">
+      <FileDropdown
+        :is-open="isClickTrigger && isOpenList[0]"
+        :click-trigger="clickTrigger"
+        :open-dropdown="openDropdown(0)"
+        :update-open="updateOpen"
+      />
+
+      <DropdownMenu :open="isClickTrigger && isOpenList[1]" @update:open="updateOpen">
+        <DropdownMenuTrigger
+          class="flex items-center p-2 px-4"
+          :class="{
+            'bg-gray-2': isOpenList[1],
+            'dark:bg-stone-9': isOpenList[1],
+          }"
+          @click="clickTrigger()"
+          @mouseenter="openDropdown(1)()"
+        >
           格式
-          <el-icon class="ml-2">
-            <ElIconArrowDown />
-          </el-icon>
         </DropdownMenuTrigger>
         <DropdownMenuContent class="w-60">
-          <DropdownMenuItem v-for="{ label, kbd, emitArgs } in formatItems" :key="kbd" @click="$emit(...emitArgs)">
+          <DropdownMenuItem v-for="{ label, kbd, emitArgs } in formatItems" :key="kbd" @click="$emit(...emitArgs);">
             <el-icon class="mr-2 h-4 w-4" />
             {{ label }}
             <DropdownMenuShortcut>
-              {{ kbd }}
+              <kbd>
+                <span v-for="v in kbd" :key="v" class="ml-1 text-sm">
+                  {{ v }}
+                </span>
+              </kbd>
             </DropdownMenuShortcut>
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuItem @click="citeStatusChanged">
+          <DropdownMenuItem @click="citeStatusChanged()">
             <el-icon class="mr-2 h-4 w-4" :class="{ 'opacity-0': !isCiteStatus }">
               <ElIconCheck />
             </el-icon>
@@ -183,10 +222,26 @@ function copy() {
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-      <EditDropdown />
-      <StyleDropdown />
-      <HelpDropdown />
-    </el-space>
+      <EditDropdown
+        :is-open="isClickTrigger && isOpenList[2]"
+        :click-trigger="clickTrigger"
+        :open-dropdown="openDropdown(2)"
+        :update-open="updateOpen"
+      />
+      <StyleDropdown
+
+        :is-open="isClickTrigger && isOpenList[3]"
+        :click-trigger="clickTrigger"
+        :open-dropdown="openDropdown(3)"
+        :update-open="updateOpen"
+      />
+      <HelpDropdown
+        :is-open="isClickTrigger && isOpenList[4]"
+        :click-trigger="clickTrigger"
+        :open-dropdown="openDropdown(4)"
+        :update-open="updateOpen"
+      />
+    </div>
     <el-button plain type="primary" @click="copy">
       复制
     </el-button>