fix: dark mode

doocs · Aug 24, 2024 · 90ea858 · 90ea858
1 parent f816aad
commit 90ea858
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 12 deletions.
diff --git 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 hover:bg-gray-2 hover:dark:bg-gray-2"
+      class="flex items-center p-2 px-4 hover:bg-gray-2 dark:hover:bg-stone-9"
       :class="{
         'bg-gray-2': props.isOpen,
         'dark:bg-stone-9': props.isOpen,
@@ -31,7 +31,7 @@ const {
     >
       编辑
     </DropdownMenuTrigger>
-    <DropdownMenuContent>
+    <DropdownMenuContent align="start">
       <DropdownMenuItem @click="toggleShowUploadImgDialog()">
         <el-icon class="mr-2 h-4 w-4">
           <ElIconUpload />

diff --git 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 hover:bg-gray-2 hover:dark:bg-gray-2"
+      class="flex items-center p-2 px-4 hover:bg-gray-2 dark:hover:bg-stone-9"
       :class="{
         'bg-gray-2': props.isOpen,
         'dark:bg-stone-9': props.isOpen,
@@ -42,7 +42,7 @@ const {
     >
       文件
     </DropdownMenuTrigger>
-    <DropdownMenuContent>
+    <DropdownMenuContent align="start">
       <DropdownMenuItem @click="importMarkdownContent()">
         <el-icon class="mr-2 h-4 w-4">
           <ElIconUpload />

diff --git 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 hover:bg-gray-2 hover:dark:bg-gray-2"
+      class="flex items-center p-2 px-4 hover:bg-gray-2 dark:hover:bg-stone-9"
       :class="{
         'bg-gray-2': props.isOpen,
         'dark:bg-stone-9': props.isOpen,
@@ -28,7 +28,7 @@ const aboutDialogVisible = ref(false)
     >
       帮助
     </DropdownMenuTrigger>
-    <DropdownMenuContent>
+    <DropdownMenuContent align="start">
       <DropdownMenuItem @click="aboutDialogVisible = true">
         <el-icon class="mr-2 h-4 w-4" />
         <span>关于</span>

diff --git 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 hover:bg-gray-2 hover:dark:bg-gray-2"
+      class="flex items-center p-2 px-4 hover:bg-gray-2 dark:hover:bg-stone-9"
       :class="{
         'bg-gray-2': props.isOpen,
         'dark:bg-stone-9': props.isOpen,
@@ -81,7 +81,7 @@ function customStyle() {
     >
       样式
     </DropdownMenuTrigger>
-    <DropdownMenuContent class="w-56">
+    <DropdownMenuContent class="w-56" align="start">
       <StyleOptionMenu title="主题" :options="themeOptions" :current="theme" :change="themeChanged" />
       <DropdownMenuSeparator />
       <StyleOptionMenu title="字体" :options="fontFamilyOptions" :current="fontFamily" :change="fontChanged" />

diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -191,7 +191,7 @@ function updateOpen(isOpen) {
 
       <DropdownMenu :open="isClickTrigger && isOpenList[1]" @update:open="updateOpen">
         <DropdownMenuTrigger
-          class="flex items-center p-2 px-4 hover:bg-gray-2 hover:dark:bg-gray-2"
+          class="flex items-center p-2 px-4 hover:bg-gray-2 dark:hover:bg-stone-9"
           :class="{
             'bg-gray-2': isOpenList[1],
             'dark:bg-stone-9': isOpenList[1],
@@ -201,12 +201,12 @@ function updateOpen(isOpen) {
         >
           格式
         </DropdownMenuTrigger>
-        <DropdownMenuContent class="w-60">
+        <DropdownMenuContent class="w-60" align="start">
           <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 v-for="item in kbd" :key="item" class="mx-1">
+              <kbd v-for="item in kbd" :key="item" class="mx-1 bg-gray-2 dark:bg-stone-9">
                 {{ item }}
               </kbd>
             </DropdownMenuShortcut>
@@ -261,7 +261,6 @@ kbd {
   justify-content: center;
   align-items: center;
   border: 1px solid #a8a8a8;
-  background-color: #f4f4f7;
   padding: 1px 4px;
   border-radius: 2px;
 }