mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
feat: 补充快捷键backspace
This commit is contained in:
pipipi-pikachu
parent
3f75a2af94
commit
04131c2137
@ -20,4 +20,76 @@ export const enum KEYS {
|
|||||||
ENTER = 'ENTER',
|
ENTER = 'ENTER',
|
||||||
SPACE = ' ',
|
SPACE = ' ',
|
||||||
TAB = 'TAB',
|
TAB = 'TAB',
|
||||||
|
BACKSPACE = 'BACKSPACE',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const HOTKEY_DOC = [
|
||||||
|
{
|
||||||
|
type: '通用',
|
||||||
|
children: [
|
||||||
|
{ label: '剪切', value: 'Ctrl + X' },
|
||||||
|
{ label: '复制', value: 'Ctrl + C' },
|
||||||
|
{ label: '粘贴', value: 'Ctrl + V' },
|
||||||
|
{ label: '快速复制粘贴', value: 'Ctrl + D' },
|
||||||
|
{ label: '全选', value: 'Ctrl + A' },
|
||||||
|
{ label: '撤销', value: 'Ctrl + Z' },
|
||||||
|
{ label: '恢复', value: 'Ctrl + Y' },
|
||||||
|
{ label: '删除', value: 'Delete / Backspace' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '幻灯片放映',
|
||||||
|
children: [
|
||||||
|
{ label: '开始放映幻灯片', value: 'Ctrl + F' },
|
||||||
|
{ label: '切换上一页', value: '↑ / ←' },
|
||||||
|
{ label: '切换下一页', value: '↓ / → / Enter / Space' },
|
||||||
|
{ label: '退出放映', value: 'ESC' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '幻灯片编辑',
|
||||||
|
children: [
|
||||||
|
{ label: '新建幻灯片', value: 'Enter' },
|
||||||
|
{ label: '缩放画布', value: 'Ctrl + 鼠标滚动' },
|
||||||
|
{ label: '放大画布', value: 'Ctrl + =' },
|
||||||
|
{ label: '缩小画布', value: 'Ctrl + -' },
|
||||||
|
{ label: '缩放画布到合适大小', value: 'Ctrl + 0' },
|
||||||
|
{ label: '编辑上一页', value: '↑ / ←' },
|
||||||
|
{ label: '编辑下一页', value: '↓ / →' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '元素操作',
|
||||||
|
children: [
|
||||||
|
{ label: '移动', value: '↑ / ← / ↓ / →' },
|
||||||
|
{ label: '锁定', value: 'Ctrl + L' },
|
||||||
|
{ label: '组合', value: 'Ctrl + G' },
|
||||||
|
{ label: '取消组合', value: 'Ctrl + Shift + G' },
|
||||||
|
{ label: '置顶层', value: 'Alt + F' },
|
||||||
|
{ label: '置底层', value: 'Alt + B' },
|
||||||
|
{ label: '多选', value: '按住 Ctrl 或 Shift' },
|
||||||
|
{ label: '锁定宽高比例', value: '按住 Ctrl 或 Shift' },
|
||||||
|
{ label: '创建水平 / 垂直线条', value: '按住 Ctrl 或 Shift' },
|
||||||
|
{ label: '确认图片裁剪', value: 'Enter' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '表格编辑',
|
||||||
|
children: [
|
||||||
|
{ label: '聚焦到下一个单元格', value: 'Tab' },
|
||||||
|
{ label: '在上方插入一行', value: 'Ctrl + ↑' },
|
||||||
|
{ label: '在下方插入一行', value: 'Ctrl + ↓' },
|
||||||
|
{ label: '在左侧插入一列', value: 'Ctrl + ←' },
|
||||||
|
{ label: '在右侧插入一列', value: 'Ctrl + →' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '文本编辑',
|
||||||
|
children: [
|
||||||
|
{ label: '加粗', value: 'Ctrl + B' },
|
||||||
|
{ label: '斜体', value: 'Ctrl + I' },
|
||||||
|
{ label: '下划线', value: 'Ctrl + U' },
|
||||||
|
{ label: '删除线', value: 'Ctrl + D' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
52
src/views/Editor/EditorHeader/HotkeyDoc.vue
Normal file
52
src/views/Editor/EditorHeader/HotkeyDoc.vue
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div class="hotkey-doc">
|
||||||
|
<template v-for="item in hotkeys" :key="item.type">
|
||||||
|
<div class="title">{{item.type}}</div>
|
||||||
|
<div class="hotkey-item" v-for="hotkey in item.children" :key="hotkey.label">
|
||||||
|
<div class="label">{{hotkey.label}}</div>
|
||||||
|
<div class="value">{{hotkey.value}}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
import { HOTKEY_DOC } from '@/configs/hotkey'
|
||||||
|
|
||||||
|
const hotkeys = HOTKEY_DOC
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'hotkey-doc',
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
hotkeys,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.hotkey-doc {
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
padding: 15px 0 5px 0;
|
||||||
|
}
|
||||||
|
.hotkey-item {
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
padding: 15px 0 5px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
width: 140px;
|
||||||
|
|
||||||
|
@include ellipsis();
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -53,15 +53,7 @@
|
|||||||
:visible="hotkeyDrawerVisible"
|
:visible="hotkeyDrawerVisible"
|
||||||
@close="hotkeyDrawerVisible = false"
|
@close="hotkeyDrawerVisible = false"
|
||||||
>
|
>
|
||||||
<div class="hotkeys">
|
<HotkeyDoc />
|
||||||
<template v-for="item in hotkeys" :key="item.type">
|
|
||||||
<div class="title">{{item.type}}</div>
|
|
||||||
<div class="hotkey-item" v-for="hotkey in item.children" :key="hotkey.label">
|
|
||||||
<div class="label">{{hotkey.label}}</div>
|
|
||||||
<div class="value">{{hotkey.value}}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -74,81 +66,14 @@ import useScreening from '@/hooks/useScreening'
|
|||||||
import useSlideHandler from '@/hooks/useSlideHandler'
|
import useSlideHandler from '@/hooks/useSlideHandler'
|
||||||
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
|
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
|
||||||
|
|
||||||
|
import HotkeyDoc from './HotkeyDoc.vue'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
|
|
||||||
const hotkeys = [
|
|
||||||
{
|
|
||||||
type: '通用',
|
|
||||||
children: [
|
|
||||||
{ label: '剪切', value: 'Ctrl + X' },
|
|
||||||
{ label: '复制', value: 'Ctrl + C' },
|
|
||||||
{ label: '粘贴', value: 'Ctrl + V' },
|
|
||||||
{ label: '快速复制粘贴', value: 'Ctrl + D' },
|
|
||||||
{ label: '全选', value: 'Ctrl + A' },
|
|
||||||
{ label: '撤销', value: 'Ctrl + Z' },
|
|
||||||
{ label: '恢复', value: 'Ctrl + Y' },
|
|
||||||
{ label: '删除', value: 'Delete' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '幻灯片放映',
|
|
||||||
children: [
|
|
||||||
{ label: '开始放映幻灯片', value: 'Ctrl + F' },
|
|
||||||
{ label: '切换上一页', value: '↑ / ←' },
|
|
||||||
{ label: '切换下一页', value: '↓ / → / Enter / Space' },
|
|
||||||
{ label: '退出放映', value: 'ESC' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '幻灯片编辑',
|
|
||||||
children: [
|
|
||||||
{ label: '新建幻灯片', value: 'Enter' },
|
|
||||||
{ label: '缩放画布', value: 'Ctrl + 鼠标滚动' },
|
|
||||||
{ label: '放大画布', value: 'Ctrl + =' },
|
|
||||||
{ label: '缩小画布', value: 'Ctrl + -' },
|
|
||||||
{ label: '缩放画布到合适大小', value: 'Ctrl + 0' },
|
|
||||||
{ label: '编辑上一页', value: '↑ / ←' },
|
|
||||||
{ label: '编辑下一页', value: '↓ / →' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '元素操作',
|
|
||||||
children: [
|
|
||||||
{ label: '移动', value: '↑ / ← / ↓ / →' },
|
|
||||||
{ label: '锁定', value: 'Ctrl + L' },
|
|
||||||
{ label: '组合', value: 'Ctrl + G' },
|
|
||||||
{ label: '取消组合', value: 'Ctrl + Shift + G' },
|
|
||||||
{ label: '置顶层', value: 'Alt + F' },
|
|
||||||
{ label: '置底层', value: 'Alt + B' },
|
|
||||||
{ label: '多选', value: '按住 Ctrl 或 Shift' },
|
|
||||||
{ label: '锁定宽高比例', value: '按住 Ctrl 或 Shift' },
|
|
||||||
{ label: '创建水平 / 垂直线条', value: '按住 Ctrl 或 Shift' },
|
|
||||||
{ label: '确认图片裁剪', value: 'Enter' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '表格编辑',
|
|
||||||
children: [
|
|
||||||
{ label: '聚焦到下一个单元格', value: 'Tab' },
|
|
||||||
{ label: '在上方插入一行', value: 'Ctrl + ↑' },
|
|
||||||
{ label: '在下方插入一行', value: 'Ctrl + ↓' },
|
|
||||||
{ label: '在左侧插入一列', value: 'Ctrl + ←' },
|
|
||||||
{ label: '在右侧插入一列', value: 'Ctrl + →' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '文本编辑',
|
|
||||||
children: [
|
|
||||||
{ label: '加粗', value: 'Ctrl + B' },
|
|
||||||
{ label: '斜体', value: 'Ctrl + I' },
|
|
||||||
{ label: '下划线', value: 'Ctrl + U' },
|
|
||||||
{ label: '删除线', value: 'Ctrl + D' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'editor-header',
|
name: 'editor-header',
|
||||||
|
components: {
|
||||||
|
HotkeyDoc,
|
||||||
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
|
|
||||||
@ -187,7 +112,6 @@ export default defineComponent({
|
|||||||
resetSlides,
|
resetSlides,
|
||||||
openDoc,
|
openDoc,
|
||||||
hotkeyDrawerVisible,
|
hotkeyDrawerVisible,
|
||||||
hotkeys,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
@ -212,27 +136,4 @@ export default defineComponent({
|
|||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hotkeys {
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
padding: 15px 0 5px 0;
|
|
||||||
}
|
|
||||||
.hotkey-item {
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
padding: 15px 0 5px 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
width: 140px;
|
|
||||||
|
|
||||||
@include ellipsis();
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@ -173,7 +173,7 @@ export default () => {
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
order(ElementOrderCommands.BOTTOM)
|
order(ElementOrderCommands.BOTTOM)
|
||||||
}
|
}
|
||||||
if (key === KEYS.DELETE) {
|
if (key === KEYS.DELETE || key === KEYS.BACKSPACE) {
|
||||||
if (disableHotkeys.value) return
|
if (disableHotkeys.value) return
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
remove()
|
remove()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user