diff --git a/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue b/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue
index 21f0c37e2..fefdbc3a4 100644
--- a/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue
@@ -26,6 +26,7 @@ function onRedirect(url) {
       <h3>一款高度简洁的微信 Markdown 编辑器</h3>
       <p>扫码关注公众号 Doocs，原创技术文章第一时间推送！</p>
       <img
+        class="mx-auto my-5"
         src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/1648303220922-7e14aefa-816e-44c1-8604-ade709ca1c69.png"
         style="width: 40%"
       >
diff --git a/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
index 5e2cd244c..49f0f44c3 100644
--- a/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
@@ -1,4 +1,11 @@
 <script setup>
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
 import { useStore } from '@/stores'
 
 const store = useStore()
@@ -10,35 +17,26 @@ const {
 </script>
 
 <template>
-  <el-dropdown>
-    <span class="el-dropdown-link">
-      编辑<el-icon class="ml-2">
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      编辑
+      <el-icon class="ml-2">
         <ElIconArrowDown />
       </el-icon>
-    </span>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item class="leading-8" @click="toggleShowUploadImgDialog()">
-          <el-icon>
-            <ElIconUpload />
-          </el-icon>
-          上传图片
-        </el-dropdown-item>
-        <el-dropdown-item class="leading-8" @click="toggleShowInsertFormDialog()">
-          <el-icon>
-            <ElIconGrid />
-          </el-icon>
-          插入表格
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="toggleShowUploadImgDialog()">
+        <el-icon class="mr-2 h-4 w-4">
+          <ElIconUpload />
+        </el-icon>
+        上传图片
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="toggleShowInsertFormDialog()">
+        <el-icon class="mr-2 h-4 w-4">
+          <ElIconGrid />
+        </el-icon>
+        插入表格
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
 </template>
-
-<style lang="less" scoped>
-.el-dropdown-link {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
index 4a3d16b1b..e1943158c 100644
--- a/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
@@ -1,6 +1,14 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
 import { useStore } from '@/stores'
 
 const store = useStore()
@@ -20,53 +28,46 @@ const {
 </script>
 
 <template>
-  <el-dropdown>
-    <span class="el-dropdown-link">
-      文件<el-icon class="ml-2">
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      文件
+      <el-icon class="ml-2">
         <ElIconArrowDown />
       </el-icon>
-    </span>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item class="leading-8" @click="importMarkdownContent()">
-          <el-icon>
-            <ElIconUpload />
-          </el-icon>
-          导入 .md
-        </el-dropdown-item>
-        <el-dropdown-item class="leading-8" @click="exportEditorContent2MD()">
-          <el-icon>
-            <ElIconDownload />
-          </el-icon>
-          导出 .md
-        </el-dropdown-item>
-        <el-dropdown-item class="leading-8" @click="exportEditorContent2HTML()">
-          <el-icon>
-            <ElIconDocument />
-          </el-icon>
-          导出 .html
-        </el-dropdown-item>
-        <el-dropdown-item divided class="leading-8" @click="toggleDark()">
-          <el-icon :class="{ 'opacity-0': !isDark }">
-            <ElIconCheck />
-          </el-icon>
-          深色模式
-        </el-dropdown-item>
-        <el-dropdown-item divided class="leading-8" @click="toggleEditOnLeft()">
-          <el-icon :class="{ 'opacity-0': !isEditOnLeft }">
-            <ElIconCheck />
-          </el-icon>
-          左侧编辑
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="importMarkdownContent()">
+        <el-icon class="mr-2 h-4 w-4">
+          <ElIconUpload />
+        </el-icon>
+        导入 .md
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="exportEditorContent2MD()">
+        <el-icon class="mr-2 h-4 w-4">
+          <ElIconDownload />
+        </el-icon>
+        导出 .md
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="exportEditorContent2HTML()">
+        <el-icon class="mr-2 h-4 w-4">
+          <ElIconDocument />
+        </el-icon>
+        导出 .html
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem @click="toggleDark()">
+        <el-icon class="mr-2 h-4 w-4" :class="{ 'opacity-0': !isDark }">
+          <ElIconCheck />
+        </el-icon>
+        深色模式
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem @click="toggleEditOnLeft()">
+        <el-icon class="mr-2 h-4 w-4" :class="{ 'opacity-0': !isEditOnLeft }">
+          <ElIconCheck />
+        </el-icon>
+        左侧编辑
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
 </template>
-
-<style lang="less" scoped>
-.el-dropdown-link {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
index 0373afc9c..68d3a42e3 100644
--- a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
@@ -1,37 +1,36 @@
 <script setup>
 import { ref } from 'vue'
+
 import AboutDialog from './AboutDialog.vue'
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
 const aboutDialogVisible = ref(false)
 </script>
 
 <template>
-  <el-dropdown>
-    <span class="el-dropdown-link">
-      帮助<el-icon class="ml-2"><ElIconArrowDown /></el-icon>
-    </span>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item
-          class="leading-8"
-          @click="aboutDialogVisible = true"
-        >
-          关于
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
+  <DropdownMenu>
+    <DropdownMenuTrigger class="flex items-center">
+      帮助
+      <el-icon class="ml-2">
+        <ElIconArrowDown />
+      </el-icon>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="aboutDialogVisible = true">
+        <el-icon class="mr-2 h-4 w-4" />
+        <span>关于</span>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
 
   <AboutDialog
     :visible="aboutDialogVisible"
     @close="aboutDialogVisible = false"
   />
 </template>
-
-<style lang="less" scoped>
-.el-dropdown-link {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
index ee7eb7f72..f38767777 100644
--- a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
@@ -4,6 +4,20 @@ import { storeToRefs } from 'pinia'
 
 import StyleOptionMenu from './StyleOptionMenu.vue'
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card'
+
 import { codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, githubConfig, legendOptions } from '@/config'
 import { useStore } from '@/stores'
 
@@ -51,87 +65,78 @@ function customStyle() {
 </script>
 
 <template>
-  <el-dropdown>
-    <span class="el-dropdown-link">
-      样式<el-icon class="ml-2">
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      样式
+      <el-icon class="ml-2">
         <ElIconArrowDown />
       </el-icon>
-    </span>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item class="leading-8">
-          <StyleOptionMenu title="字体" :options="fontFamilyOptions" :current="fontFamily" :change="fontChanged" />
-        </el-dropdown-item>
-        <el-dropdown-item class="leading-8">
-          <StyleOptionMenu title="字号" :options="fontSizeOptions" :current="fontSize" :change="sizeChanged" />
-        </el-dropdown-item>
-        <el-dropdown-item class="leading-8">
-          <StyleOptionMenu
-            title="颜色"
-            :options="colorOptions"
-            :current="fontColor"
-            :change="colorChanged"
-          />
-        </el-dropdown-item>
-        <el-dropdown-item class="leading-8">
-          <StyleOptionMenu
-            title="代码主题"
-            :options="codeBlockThemeOptions"
-            :current="codeBlockTheme"
-            :change="codeBlockThemeChanged"
-          />
-        </el-dropdown-item>
-        <el-dropdown-item class="leading-8">
-          <StyleOptionMenu title="图注格式" :options="legendOptions" :current="legend" :change="legendChanged" />
-        </el-dropdown-item>
-        <el-dropdown-item divided class="leading-8" @click="showPicker()">
-          <el-tooltip placement="right" effect="light">
-            <template #content>
-              <el-color-picker
-                ref="colorPicker"
-                v-model="fontColor"
-                :teleported="false"
-                show-alpha
-                class="ml-auto"
-                style="height: 2em"
-                @change="colorChanged"
-              />
-            </template>
-            <div class="w-full flex">
-              <el-icon class="opacity-0">
-                <ElIconCheck />
-              </el-icon>
-              自定义颜色
-            </div>
-          </el-tooltip>
-        </el-dropdown-item>
-        <el-dropdown-item class="leading-8" @click="customStyle">
-          <el-icon class="opacity-0">
-            <ElIconCheck />
-          </el-icon>
-          自定义 CSS
-        </el-dropdown-item>
-        <el-dropdown-item divided class="leading-8" @click="macCodeBlockChanged">
-          <el-icon :class="{ 'opacity-0': !isMacCodeBlock }">
-            <ElIconCheck />
-          </el-icon>
-          Mac 代码块
-        </el-dropdown-item>
-        <el-dropdown-item divided class="leading-8" @click="resetStyleConfirm">
-          <el-icon class="opacity-0">
-            <ElIconCheck />
-          </el-icon>
-          重置
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="w-56">
+      <StyleOptionMenu title="字体" :options="fontFamilyOptions" :current="fontFamily" :change="fontChanged" />
+      <StyleOptionMenu title="字号" :options="fontSizeOptions" :current="fontSize" :change="sizeChanged" />
+      <StyleOptionMenu
+        title="主题色"
+        :options="colorOptions"
+        :current="fontColor"
+        :change="colorChanged"
+      />
+      <StyleOptionMenu
+        title="代码块主题"
+        :options="codeBlockThemeOptions"
+        :current="codeBlockTheme"
+        :change="codeBlockThemeChanged"
+      />
+      <StyleOptionMenu title="图注格式" :options="legendOptions" :current="legend" :change="legendChanged" />
+      <DropdownMenuSeparator />
+      <DropdownMenuItem @click.self.prevent="showPicker">
+        <HoverCard :open-delay="100">
+          <HoverCardTrigger class="w-full flex">
+            <el-icon class="mr-2 h-4 w-4" />
+            自定义主题色
+          </HoverCardTrigger>
+          <HoverCardContent side="right" class="w-min">
+            <el-color-picker
+              ref="colorPicker"
+              v-model="fontColor"
+              :teleported="false"
+              show-alpha
+              class="ml-auto"
+              style="height: 2em"
+              @change="colorChanged"
+              @click="showPicker"
+            />
+          </HoverCardContent>
+        </HoverCard>
+        <!-- <el-icon class="mr-2 h-4 w-4" />
+        自定义主题色
+        <el-color-picker
+          ref="colorPicker"
+          v-model="fontColor"
+          :teleported="false"
+          show-alpha
+          class="ml-auto"
+          style="height: 2em"
+          @change="colorChanged"
+          @click="showPicker"
+        /> -->
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="customStyle">
+        <el-icon class="mr-2 h-4 w-4" />
+        自定义 CSS
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem @click="macCodeBlockChanged">
+        <el-icon class="mr-2 h-4 w-4" :class="{ 'opacity-0': !isMacCodeBlock }">
+          <ElIconCheck />
+        </el-icon>
+        Mac 代码块
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem divided class="leading-8" @click="resetStyleConfirm">
+        <el-icon class="mr-2 h-4 w-4" />
+        重置
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
 </template>
-
-<style lang="less" scoped>
-.el-dropdown-link {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue b/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue
index 1b349224b..a2ef385f0 100644
--- a/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue
@@ -1,4 +1,13 @@
 <script setup>
+import {
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '@/components/ui/dropdown-menu'
+
 const props = defineProps({
   title: {
     type: String,
@@ -24,7 +33,7 @@ function setStyle(title, value) {
       return { fontFamily: value }
     case `字号`:
       return { fontSize: value }
-    case `颜色`:
+    case `主题色`:
       return { color: value }
     default:
       return {}
@@ -33,46 +42,30 @@ function setStyle(title, value) {
 </script>
 
 <template>
-  <el-dropdown placement="right" class="style-option-menu">
-    <div class="el-dropdown-link flex items-center leading-8">
-      <el-icon class="opacity-0">
-        <ElIconCheck />
-      </el-icon>
-      {{ props.title }}
-      <el-icon class="ml-auto">
-        <ElIconArrowRight />
-      </el-icon>
-    </div>
-    <template #dropdown>
-      <el-dropdown-menu style="width: 200px">
-        <el-dropdown-item
+  <DropdownMenuSub>
+    <DropdownMenuSubTrigger>
+      <el-icon class="mr-2 h-4 w-4" />
+      <span>{{ props.title }}</span>
+    </DropdownMenuSubTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuSubContent>
+        <DropdownMenuItem
           v-for="{ label, value, desc } in options"
           :key="value"
           :label="label"
           :model-value="value"
-          class="leading-8"
+          class="w-50"
           @click="change(value)"
         >
-          <el-icon :style="{ opacity: +(current === value) }">
+          <el-icon class="mr-2 h-4 w-4" :style="{ opacity: +(current === value) }">
             <ElIconCheck />
           </el-icon>
           {{ label }}
-          <span class="ml-auto" :style="setStyle(title, value)">
+          <DropdownMenuShortcut :style="setStyle(title, value)">
             {{ desc }}
-          </span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuSubContent>
+    </DropdownMenuPortal>
+  </DropdownMenuSub>
 </template>
-
-<style lang="less" scoped>
-.style-option-menu {
-  margin: 0;
-  width: 180px;
-
-  .el-dropdown-link {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index 310bb5ec2..d7d6a431f 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -9,6 +9,21 @@ import HelpDropdown from './HelpDropdown.vue'
 import StyleDropdown from './StyleDropdown.vue'
 import EditDropdown from './EditDropdown.vue'
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card'
+
 import { mergeCss, solveWeChatImage } from '@/utils'
 import { useStore } from '@/stores'
 
@@ -139,35 +154,30 @@ function copy() {
   <div class="header-container">
     <el-space class="dropdowns flex-auto" size="large">
       <FileDropdown />
-      <el-dropdown>
-        <span class="el-dropdown-link">
-          格式<el-icon class="ml-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          格式
+          <el-icon class="ml-2">
             <ElIconArrowDown />
           </el-icon>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu class="format-list">
-            <el-dropdown-item
-              v-for="{ label, kbd, emitArgs } in formatItems"
-              :key="kbd"
-              class="format-item leading-8"
-              @click="$emit(...emitArgs)"
-            >
-              <el-icon class="opacity-0">
-                <ElIconCheck />
-              </el-icon>
-              {{ label }}
-              <kbd class="ml-auto">{{ kbd }}</kbd>
-            </el-dropdown-item>
-            <el-dropdown-item divided class="leading-8" @click="citeStatusChanged">
-              <el-icon :class="{ 'opacity-0': !isCiteStatus }">
-                <ElIconCheck />
-              </el-icon>
-              微信外链转底部引用
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="w-60">
+          <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 }}
+            </DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem @click="citeStatusChanged">
+            <el-icon class="mr-2 h-4 w-4" :class="{ 'opacity-0': !isCiteStatus }">
+              <ElIconCheck />
+            </el-icon>
+            微信外链转底部引用
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
       <EditDropdown />
       <StyleDropdown />
       <HelpDropdown />
@@ -187,22 +197,4 @@ function copy() {
   height: 100%;
   padding: 0 20px;
 }
-
-.el-dropdown-link {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.format-list {
-  width: 250px;
-}
-
-.format-item {
-  kbd {
-    font-size: 0.75em;
-    float: right;
-    color: #666;
-  }
-}
 </style>
diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
index ec2de0cd6..c345181af 100644
--- a/src/views/CodemirrorEditor.vue
+++ b/src/views/CodemirrorEditor.vue
@@ -547,6 +547,8 @@ onMounted(() => {
 <style lang="less" scoped>
 .container {
   height: 100%;
+  min-width: 100%;
+  padding: 0;
 }
 
 .container-main {