style: update dropdown-menu

doocs · Aug 17, 2024 · d16bfc0 · d16bfc0
1 parent 219f484
commit d16bfc0
Show file tree

Hide file tree

Showing 8 changed files with 249 additions and 258 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>