github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: header 菜单重构

Browse Source
This commit is contained in:
pipipi-pikachu 2023-09-13 20:15:27 +08:00
parent 32212a992f
commit 10b01876c2
2 changed files with 95 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/plugins/icon.ts
View File

@ -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 {

176
src/views/Editor/EditorHeader/index.vue
View File

@ -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">
<Tooltip :mouseLeaveDelay="0" title="导出">
<div class="menu-item" @click="setDialogForExport('pptx')">
<IconDownload size="18" fill="#666" />
</div>
</Tooltip>
<div class="group-menu-item">
<Tooltip :mouseLeaveDelay="0" title="幻灯片放映">
<div class="menu-item" @click="enterScreening()">
<IconPpt size="19" fill="#666" style="margin-top: 1px;" />
<IconPpt class="icon" />
</div>
</Tooltip>
<a href="https://github.com/pipipi-pikachu/PPTist" target="_blank">
<div class="menu-item"><IconGithub size="18" fill="#666" /></div>
<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 class="icon" />
</div>
</Tooltip>
<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>