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',
|
||||
SPACE = ' ',
|
||||
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"
|
||||
@close="hotkeyDrawerVisible = false"
|
||||
>
|
||||
<div class="hotkeys">
|
||||
<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>
|
||||
<HotkeyDoc />
|
||||
</Drawer>
|
||||
</div>
|
||||
</template>
|
||||
@ -74,81 +66,14 @@ import useScreening from '@/hooks/useScreening'
|
||||
import useSlideHandler from '@/hooks/useSlideHandler'
|
||||
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
|
||||
|
||||
import HotkeyDoc from './HotkeyDoc.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({
|
||||
name: 'editor-header',
|
||||
components: {
|
||||
HotkeyDoc,
|
||||
},
|
||||
setup() {
|
||||
const store = useStore()
|
||||
|
||||
@ -187,7 +112,6 @@ export default defineComponent({
|
||||
resetSlides,
|
||||
openDoc,
|
||||
hotkeyDrawerVisible,
|
||||
hotkeys,
|
||||
}
|
||||
},
|
||||
})
|
||||
@ -212,27 +136,4 @@ export default defineComponent({
|
||||
margin: 0 10px;
|
||||
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>
|
||||
@ -173,7 +173,7 @@ export default () => {
|
||||
e.preventDefault()
|
||||
order(ElementOrderCommands.BOTTOM)
|
||||
}
|
||||
if (key === KEYS.DELETE) {
|
||||
if (key === KEYS.DELETE || key === KEYS.BACKSPACE) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
remove()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user