From f816aad75acfdc2ec2217a06a04e987525ff9d37 Mon Sep 17 00:00:00 2001
From: YangFong <yangfong2022@qq.com>
Date: Sat, 24 Aug 2024 17:10:23 +0800
Subject: [PATCH] style: update dropdown-menu

---
 .../EditorHeader/EditDropdown.vue             |  2 +-
 .../EditorHeader/FileDropdown.vue             |  2 +-
 .../EditorHeader/HelpDropdown.vue             |  2 +-
 .../EditorHeader/StyleDropdown.vue            |  2 +-
 .../CodemirrorEditor/EditorHeader/index.vue   | 32 ++++++++++++-------
 5 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
index 36119a7fd..5b8d4cfdc 100644
--- a/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
@@ -21,7 +21,7 @@ const {
 <template>
   <DropdownMenu :open="props.isOpen" @update:open="props.updateOpen">
     <DropdownMenuTrigger
-      class="flex items-center p-2 px-4"
+      class="flex items-center p-2 px-4 hover:bg-gray-2 hover:dark:bg-gray-2"
       :class="{
         'bg-gray-2': props.isOpen,
         'dark:bg-stone-9': props.isOpen,
diff --git a/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
index 0a4f8f4f6..d12a39ae3 100644
--- a/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
@@ -32,7 +32,7 @@ const {
 <template>
   <DropdownMenu :open="props.isOpen" @update:open="props.updateOpen">
     <DropdownMenuTrigger
-      class="flex items-center p-2 px-4"
+      class="flex items-center p-2 px-4 hover:bg-gray-2 hover:dark:bg-gray-2"
       :class="{
         'bg-gray-2': props.isOpen,
         'dark:bg-stone-9': props.isOpen,
diff --git a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
index 441e9fd72..7b90e76e4 100644
--- a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
@@ -18,7 +18,7 @@ const aboutDialogVisible = ref(false)
 <template>
   <DropdownMenu :open="props.isOpen" @update:open="props.updateOpen">
     <DropdownMenuTrigger
-      class="flex items-center p-2 px-4"
+      class="flex items-center p-2 px-4 hover:bg-gray-2 hover:dark:bg-gray-2"
       :class="{
         'bg-gray-2': props.isOpen,
         'dark:bg-stone-9': props.isOpen,
diff --git a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
index 96d9c22db..50e4dc795 100644
--- a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
@@ -71,7 +71,7 @@ function customStyle() {
 <template>
   <DropdownMenu :open="props.isOpen" @update:open="props.updateOpen">
     <DropdownMenuTrigger
-      class="flex items-center p-2 px-4"
+      class="flex items-center p-2 px-4 hover:bg-gray-2 hover:dark:bg-gray-2"
       :class="{
         'bg-gray-2': props.isOpen,
         'dark:bg-stone-9': props.isOpen,
diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index 7261dfb34..2845e8ab0 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -34,37 +34,37 @@ const modPrefix
   = defaultKeyMap === CodeMirror.keyMap.macDefault ? `Cmd` : `Ctrl`
 
 const kbdIcon
-  = defaultKeyMap === CodeMirror.keyMap.macDefault ? `⌘` : `⌃`
+  = defaultKeyMap === CodeMirror.keyMap.macDefault ? `⌘` : `Ctrl`
 
 const formatItems = [
   {
     label: `加粗`,
-    kbd: `${kbdIcon}B`,
+    kbd: [kbdIcon, `B`],
     emitArgs: [`addFormat`, `${modPrefix}-B`],
   },
   {
     label: `斜体`,
-    kbd: `${kbdIcon}I`,
+    kbd: [kbdIcon, `I`],
     emitArgs: [`addFormat`, `${modPrefix}-I`],
   },
   {
     label: `删除线`,
-    kbd: `${kbdIcon}D`,
+    kbd: [kbdIcon, `D`],
     emitArgs: [`addFormat`, `${modPrefix}-D`],
   },
   {
     label: `超链接`,
-    kbd: `${kbdIcon}K`,
+    kbd: [kbdIcon, `K`],
     emitArgs: [`addFormat`, `${modPrefix}-K`],
   },
   {
     label: `行内代码`,
-    kbd: `${kbdIcon}E`,
+    kbd: [kbdIcon, `E`],
     emitArgs: [`addFormat`, `${modPrefix}-E`],
   },
   {
     label: `格式化`,
-    kbd: `${kbdIcon}F`,
+    kbd: [kbdIcon, `F`],
     emitArgs: [`formatContent`],
   },
 ]
@@ -191,7 +191,7 @@ function updateOpen(isOpen) {
 
       <DropdownMenu :open="isClickTrigger && isOpenList[1]" @update:open="updateOpen">
         <DropdownMenuTrigger
-          class="flex items-center p-2 px-4"
+          class="flex items-center p-2 px-4 hover:bg-gray-2 hover:dark:bg-gray-2"
           :class="{
             'bg-gray-2': isOpenList[1],
             'dark:bg-stone-9': isOpenList[1],
@@ -206,10 +206,8 @@ function updateOpen(isOpen) {
             <el-icon class="mr-2 h-4 w-4" />
             {{ label }}
             <DropdownMenuShortcut>
-              <kbd>
-                <span v-for="v in kbd" :key="v" class="ml-1 text-sm">
-                  {{ v }}
-                </span>
+              <kbd v-for="item in kbd" :key="item" class="mx-1">
+                {{ item }}
               </kbd>
             </DropdownMenuShortcut>
           </DropdownMenuItem>
@@ -257,4 +255,14 @@ function updateOpen(isOpen) {
   height: 100%;
   padding: 0 20px;
 }
+
+kbd {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #a8a8a8;
+  background-color: #f4f4f7;
+  padding: 1px 4px;
+  border-radius: 2px;
+}
 </style>