refactor: header 菜单重构

src/plugins/icon.ts

@@ -12,7 +12,6 @@ import {
   FullScreen,
   List,
   OrderedList,
-  Helpcenter,
   FlipVertically,
   FlipHorizontally,
   FontSize,
@@ -81,7 +80,6 @@ import {
   Logout,
   Erase,
   Clear,
-  FolderClose,
   AlignTextTopOne,
   AlignTextBottomOne,
   AlignTextMiddleOne,
@@ -117,6 +115,7 @@ import {
   Left,
   Right,
   MoveOne,
+  HamburgerButton,
 } from '@icon-park/vue-next'
 
 export interface Icons {
@@ -134,7 +133,6 @@ export const icons: Icons = {
   IconFullScreen: FullScreen,
   IconList: List,
   IconOrderedList: OrderedList,
-  IconHelpcenter: Helpcenter,
   IconFlipVertically: FlipVertically,
   IconFlipHorizontally: FlipHorizontally,
   IconFontSize: FontSize,
@@ -203,7 +201,6 @@ export const icons: Icons = {
   IconLogout: Logout,
   IconErase: Erase,
   IconClear: Clear,
-  IconFolderClose: FolderClose,
   IconAlignTextTopOne: AlignTextTopOne,
   IconAlignTextBottomOne: AlignTextBottomOne,
   IconAlignTextMiddleOne: AlignTextMiddleOne,
@@ -239,6 +236,7 @@ export const icons: Icons = {
   IconLeft: Left,
   IconRight: Right,
   IconMoveOne: MoveOne,
+  IconHamburgerButton: HamburgerButton,
 }
 
 export default {

src/views/Editor/EditorHeader/index.vue

@@ -1,69 +1,50 @@
 <template>
   <div class="editor-header">
     <div class="left">
-      <Dropdown :trigger="['click']">
-        <div class="menu-item"><IconFolderClose /> <span class="text">文件</span></div>
-        <template #overlay>
-          <Menu>
+      <Popover trigger="click" placement="bottomLeft" v-model:open="mainMenuVisible">
+        <template #content>
+          <div class="popover-list">
             <FileInput accept=".pptist"  @change="files => importSpecificFile(files)">
-              <MenuItem>导入 pptist 文件</MenuItem>
+              <div class="popover-item" @click="mainMenuVisible = false">导入 pptist 文件</div>
             </FileInput>
             <FileInput accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"  @change="files => importPPTXFile(files)">
-              <MenuItem>导入 pptx 文件（demo）</MenuItem>
+              <div class="popover-item" @click="mainMenuVisible = false">导入 pptx 文件（测试版）</div>
             </FileInput>
-            <MenuItem @click="setDialogForExport('pptx')">导出文件</MenuItem>
-          </Menu>
+            <div class="popover-item" @click="setDialogForExport('pptx')">导出文件</div>
+            <div class="popover-item" @click="resetSlides(); mainMenuVisible = false">重置幻灯片</div>
+            <div class="popover-item" @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</div>
+            <div class="popover-item" @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</div>
+            <div class="popover-item" @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷键</div>
+          </div>
         </template>
-      </Dropdown>
-      <Dropdown :trigger="['click']">
-        <div class="menu-item"><IconEdit /> <span class="text">编辑</span></div>
-        <template #overlay>
-          <Menu>
-            <MenuItem @click="undo()">撤销</MenuItem>
-            <MenuItem @click="redo()">重做</MenuItem>
-            <MenuItem @click="createSlide()">添加页面</MenuItem>
-            <MenuItem @click="deleteSlide()">删除页面</MenuItem>
-            <MenuItem @click="toggleGridLines()">{{ gridLineSize ? '关闭网格线' : '打开网格线' }}</MenuItem>
-            <MenuItem @click="toggleRuler()">{{ showRuler ? '关闭标尺' : '打开标尺' }}</MenuItem>
-            <MenuItem @click="resetSlides()">重置幻灯片</MenuItem>
-            <MenuItem @click="openSelectPanel()">{{ showSelectPanel ? '关闭选择面板' : '打开选择面板' }}</MenuItem>
-          </Menu>
-        </template>
-      </Dropdown>
-      <Dropdown :trigger="['click']">
-        <div class="menu-item"><IconPpt /> <span class="text">演示</span></div>
-        <template #overlay>
-          <Menu>
-            <MenuItem @click="enterScreeningFromStart()">从头开始</MenuItem>
-            <MenuItem @click="enterScreening()">从当前页开始</MenuItem>
-          </Menu>
-        </template>
-      </Dropdown>
-      <Dropdown :trigger="['click']">
-        <div class="menu-item"><IconHelpcenter /> <span class="text">帮助</span></div>
-        <template #overlay>
-          <Menu>
-            <MenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</MenuItem>
-            <MenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</MenuItem>
-            <MenuItem @click="hotkeyDrawerVisible = true">快捷键</MenuItem>
-          </Menu>
-        </template>
-      </Dropdown>
+        <div class="menu-item"><IconHamburgerButton class="icon" /></div>
+      </Popover>
     </div>
 
     <div class="right">
+      <div class="group-menu-item">
+        <Tooltip :mouseLeaveDelay="0" title="幻灯片放映">
+          <div class="menu-item" @click="enterScreening()">
+            <IconPpt class="icon" />
+          </div>
+        </Tooltip>
+        <Popover trigger="click">
+          <template #content>
+            <div class="popover-list">
+              <div class="popover-item" @click="enterScreeningFromStart()">从头开始</div>
+              <div class="popover-item" @click="enterScreening()">从当前页开始</div>
+            </div>
+          </template>
+          <div class="arrow-btn"><IconDown class="arrow" /></div>
+        </Popover>
+      </div>
       <Tooltip :mouseLeaveDelay="0" title="导出">
         <div class="menu-item" @click="setDialogForExport('pptx')">
-          <IconDownload size="18" fill="#666" />
+          <IconDownload class="icon" />
         </div>
       </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" title="幻灯片放映">
-        <div class="menu-item" @click="enterScreening()">
-          <IconPpt size="19" fill="#666" style="margin-top: 1px;" />
-        </div>
-      </Tooltip>
-      <a href="https://github.com/pipipi-pikachu/PPTist" target="_blank">
-        <div class="menu-item"><IconGithub size="18" fill="#666" /></div>
+      <a class="github-link" href="https://github.com/pipipi-pikachu/PPTist" target="_blank">
+        <div class="menu-item"><IconGithub class="icon" /></div>
       </a>
     </div>
 
@@ -83,50 +64,38 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import useScreening from '@/hooks/useScreening'
-import useSlideHandler from '@/hooks/useSlideHandler'
-import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import useImport from '@/hooks/useImport'
+import useSlideHandler from '@/hooks/useSlideHandler'
+import type { DialogForExportTypes } from '@/types/export'
 
 import HotkeyDoc from './HotkeyDoc.vue'
 import FileInput from '@/components/FileInput.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 import {
   Tooltip,
-  Dropdown,
-  Menu,
   Drawer,
+  Popover,
 } from 'ant-design-vue'
-const MenuItem = Menu.Item
 
 const mainStore = useMainStore()
-const { gridLineSize, showRuler, showSelectPanel } = storeToRefs(mainStore)
-
 const { enterScreening, enterScreeningFromStart } = useScreening()
-const { createSlide, deleteSlide, resetSlides } = useSlideHandler()
-const { redo, undo } = useHistorySnapshot()
 const { importSpecificFile, importPPTXFile, exporting } = useImport()
+const { resetSlides } = useSlideHandler()
 
-const setDialogForExport = mainStore.setDialogForExport
-
-const toggleGridLines = () => {
-  mainStore.setGridLineSize(gridLineSize.value ? 0 : 50)
-}
-
-const toggleRuler = () => {
-  mainStore.setRulerState(!showRuler.value)
-}
-
-const openSelectPanel = () => {
-  if (!showSelectPanel.value) mainStore.setSelectPanelState(true)
-  else mainStore.setSelectPanelState(false)
-}
-
+const mainMenuVisible = ref(false)
 const hotkeyDrawerVisible = ref(false)
 
-const goLink = (url: string) => window.open(url)
+const goLink = (url: string) => {
+  window.open(url)
+  mainMenuVisible.value = false
+}
+
+const setDialogForExport = (type: DialogForExportTypes) => {
+  mainStore.setDialogForExport(type)
+  mainMenuVisible.value = false
+}
 </script>
 
 <style lang="scss" scoped>
@@ -136,7 +105,7 @@ const goLink = (url: string) => window.open(url)
   border-bottom: 1px solid $borderColor;
   display: flex;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 0 5px;
 }
 .left, .right {
   display: flex;
@@ -144,20 +113,61 @@ const goLink = (url: string) => window.open(url)
   align-items: center;
 }
 .menu-item {
-  height: 100%;
+  height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 14px;
   padding: 0 10px;
+  border-radius: $borderRadius;
   cursor: pointer;
 
-  .text {
-    margin-left: 4px;
+  .icon {
+    font-size: 18px;
+    color: #666;
+  }
+
+  &:hover {
+    background-color: #f1f1f1;
   }
 }
+.group-menu-item {
+  height: 30px;
+  display: flex;
+  margin: 0 8px;
+  padding: 0 2px;
 
-.left .menu-item:hover {
-  background-color: #f9f9f9;
+  &:hover {
+    background-color: #f1f1f1;
+  }
+
+  .menu-item {
+    padding: 0 3px;
+  }
+  .arrow-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+}
+.github-link {
+  display: inline-block;
+  height: 30px;
+}
+.popover-list {
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  margin: -12px;
+}
+.popover-item {
+  padding: 6px 10px;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f1f1f1;
+  }
 }
 </style>