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

perf: 兼容至1024px

Browse Source
This commit is contained in:
zxc 2024-09-15 15:40:17 +08:00
parent da43a56f96
commit f765b936ec
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/plugins/icon.ts
View File

@ -124,6 +124,7 @@ import {
Comment, Comment,
User, User,
Switch, Switch,
More,
} from '@icon-park/vue-next' } from '@icon-park/vue-next'
export interface Icons { export interface Icons {
@ -253,6 +254,7 @@ export const icons: Icons = {
IconComment: Comment, IconComment: Comment,
IconUser: User, IconUser: User,
IconSwitch: Switch, IconSwitch: Switch,
IconMore: More,
} }
export default { export default {

19
src/views/Editor/CanvasTool/index.vue
View File

@ -5,7 +5,15 @@
<IconNext class="handler-item" :class="{ 'disable': !canRedo }" v-tooltip="'重做（Ctrl + Y）'" @click="redo()" /> <IconNext class="handler-item" :class="{ 'disable': !canRedo }" v-tooltip="'重做（Ctrl + Y）'" @click="redo()" />
<div class="more"> <div class="more">
<Divider type="vertical" style="height: 20px;" /> <Divider type="vertical" style="height: 20px;" />
<IconComment class="handler-item" :class="{ 'active': showNotesPanel }" v-tooltip="'批注'" @click="toggleNotesPanel()" /> <Popover class="more-icon" trigger="click" v-model:value="moreVisible" :offset="10">
<template #content>
<PopoverMenuItem center @click="toggleNotesPanel(); moreVisible = false">批注面板</PopoverMenuItem>
<PopoverMenuItem center @click="toggleSelectPanel(); moreVisible = false">选择窗格</PopoverMenuItem>
<PopoverMenuItem center @click="toggleSraechPanel(); moreVisible = false">查找替换</PopoverMenuItem>
</template>
<IconMore class="handler-item" />
</Popover>
<IconComment class="handler-item" :class="{ 'active': showNotesPanel }" v-tooltip="'批注面板'" @click="toggleNotesPanel()" />
<IconMoveOne class="handler-item" :class="{ 'active': showSelectPanel }" v-tooltip="'选择窗格'" @click="toggleSelectPanel()" /> <IconMoveOne class="handler-item" :class="{ 'active': showSelectPanel }" v-tooltip="'选择窗格'" @click="toggleSelectPanel()" />
<IconSearch class="handler-item" :class="{ 'active': showSearchPanel }" v-tooltip="'查找/替换（Ctrl + F）'" @click="toggleSraechPanel()" /> <IconSearch class="handler-item" :class="{ 'active': showSearchPanel }" v-tooltip="'查找/替换（Ctrl + F）'" @click="toggleSraechPanel()" />
</div> </div>
@ -172,6 +180,7 @@ const mediaInputVisible = ref(false)
const latexEditorVisible = ref(false) const latexEditorVisible = ref(false)
const textTypeSelectVisible = ref(false) const textTypeSelectVisible = ref(false)
const shapeMenuVisible = ref(false) const shapeMenuVisible = ref(false)
const moreVisible = ref(false)
// 绘制文字范围 // 绘制文字范围
const drawText = (vertical = false) => { const drawText = (vertical = false) => {
@ -235,6 +244,9 @@ const toggleNotesPanel = () => {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.more-icon {
display: none;
}
.add-element-handler { .add-element-handler {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -334,9 +346,12 @@ const toggleNotesPanel = () => {
.right-handler .text { .right-handler .text {
display: none; display: none;
} }
.more { .more > .handler-item {
display: none; display: none;
} }
.more-icon {
display: block;
}
} }
@media screen and (width <= 1000px) { @media screen and (width <= 1000px) {
.left-handler, .right-handler { .left-handler, .right-handler {