507 lines
12 KiB
Vue
507 lines
12 KiB
Vue
|
<script setup>
|
|||
|
|
import { ref, inject, onMounted } from "vue";
|
|||
|
|
import { Skeleton } from "ant-design-vue";
|
|||
|
|
|
|||
|
|
const loading = ref(true);
|
|||
|
|
const shortcuts = ref([]);
|
|||
|
|
const keyboardManager = inject("keyboardManager", null);
|
|||
|
|
const platform = ref({});
|
|||
|
|
|
|||
|
|
// 初始化键盘快捷键信息
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 添加延迟以显示骨架屏效果
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (keyboardManager) {
|
|||
|
|
// 使用KeyboardManager的平台检测
|
|||
|
|
platform.value = {
|
|||
|
|
isMac: keyboardManager.platform === "mac",
|
|||
|
|
isIOS: keyboardManager.platform === "ios",
|
|||
|
|
isIPad:
|
|||
|
|
keyboardManager.platform === "ios" &&
|
|||
|
|
/iPad/.test(window.navigator.userAgent),
|
|||
|
|
isTouchDevice: keyboardManager.isTouchDevice,
|
|||
|
|
isWindows: keyboardManager.platform === "windows",
|
|||
|
|
isAndroid: keyboardManager.platform === "android",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 使用KeyboardManager的API获取所有快捷键
|
|||
|
|
const managerShortcuts = keyboardManager.getShortcuts();
|
|||
|
|
|
|||
|
|
// 转换为组件所需的格式
|
|||
|
|
shortcuts.value = convertShortcuts(managerShortcuts);
|
|||
|
|
} else {
|
|||
|
|
// 如果没有注入keyboardManager，使用默认检测和默认快捷键
|
|||
|
|
platform.value = detectPlatform();
|
|||
|
|
shortcuts.value = generateDefaultShortcuts();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loading.value = false;
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 转换KeyboardManager返回的快捷键格式为组件需要的格式
|
|||
|
|
function convertShortcuts(managerShortcuts) {
|
|||
|
|
// 转换快捷键列表
|
|||
|
|
const result = [];
|
|||
|
|
|
|||
|
|
// 基本的Action到显示名称的映射
|
|||
|
|
const actionDisplayMap = {
|
|||
|
|
undo: "撤销",
|
|||
|
|
redo: "重做",
|
|||
|
|
delete: "删除选中元素",
|
|||
|
|
selectAll: "全选",
|
|||
|
|
copy: "复制",
|
|||
|
|
paste: "粘贴",
|
|||
|
|
cut: "剪切",
|
|||
|
|
save: "保存",
|
|||
|
|
selectTool: "选择工具",
|
|||
|
|
increaseBrushSize: "增加笔触大小",
|
|||
|
|
decreaseBrushSize: "减小笔触大小",
|
|||
|
|
toggleTempTool: "临时切换工具",
|
|||
|
|
newLayer: "新建图层",
|
|||
|
|
groupLayers: "组合图层",
|
|||
|
|
ungroupLayers: "取消组合",
|
|||
|
|
mergeLayers: "合并图层",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 工具ID到显示名称的映射
|
|||
|
|
const toolDisplayMap = {
|
|||
|
|
select: "选择模式",
|
|||
|
|
draw: "绘画模式",
|
|||
|
|
eraser: "橡皮擦模式",
|
|||
|
|
eyedropper: "吸色工具",
|
|||
|
|
pan: "移动画布",
|
|||
|
|
lasso: "套索工具",
|
|||
|
|
area_custom: "自由选区工具",
|
|||
|
|
wave: "波浪工具",
|
|||
|
|
liquify: "液化工具",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理每个快捷键
|
|||
|
|
for (const shortcut of managerShortcuts) {
|
|||
|
|
let actionDisplay = actionDisplayMap[shortcut.action] || shortcut.action;
|
|||
|
|
|
|||
|
|
// 特殊处理工具选择
|
|||
|
|
if (
|
|||
|
|
shortcut.action === "selectTool" &&
|
|||
|
|
shortcut.param &&
|
|||
|
|
toolDisplayMap[shortcut.param]
|
|||
|
|
) {
|
|||
|
|
actionDisplay = toolDisplayMap[shortcut.param];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
result.push({
|
|||
|
|
action: actionDisplay,
|
|||
|
|
windows: shortcut.key.replace(/cmdOrCtrl\+/g, "Ctrl+"),
|
|||
|
|
mac: shortcut.key.replace(/cmdOrCtrl\+/g, "⌘+"),
|
|||
|
|
touch: shortcut.touch || "触控界面点击对应工具",
|
|||
|
|
displayKey: shortcut.displayKey,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加一些组件特定的快捷键
|
|||
|
|
result.push({
|
|||
|
|
action: "缩放画布",
|
|||
|
|
windows: "鼠标滚轮",
|
|||
|
|
mac: "鼠标滚轮 或 触控板缩放手势",
|
|||
|
|
touch: "双指捏合",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检测平台 - 作为备用
|
|||
|
|
function detectPlatform() {
|
|||
|
|
const userAgent = window.navigator.userAgent;
|
|||
|
|
return {
|
|||
|
|
isMac: /Mac/.test(userAgent),
|
|||
|
|
isIOS: /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream,
|
|||
|
|
isIPad: /iPad/.test(userAgent),
|
|||
|
|
isTouchDevice: "ontouchstart" in window || navigator.maxTouchPoints > 0,
|
|||
|
|
isWindows: /Win/.test(userAgent),
|
|||
|
|
isAndroid: /Android/.test(userAgent),
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生成默认快捷键描述
|
|||
|
|
function generateDefaultShortcuts() {
|
|||
|
|
return [
|
|||
|
|
{
|
|||
|
|
action: "撤销",
|
|||
|
|
windows: "Ctrl+Z",
|
|||
|
|
mac: "⌘+Z",
|
|||
|
|
touch: "双指向右轻扫",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "重做",
|
|||
|
|
windows: "Ctrl+Y 或 Ctrl+Shift+Z",
|
|||
|
|
mac: "⌘+Shift+Z",
|
|||
|
|
touch: "双指向左轻扫",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "删除选中元素",
|
|||
|
|
windows: "Delete 或 Backspace",
|
|||
|
|
mac: "Delete 或 ⌫",
|
|||
|
|
touch: "长按选中元素后点击删除",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "全选",
|
|||
|
|
windows: "Ctrl+A",
|
|||
|
|
mac: "⌘+A",
|
|||
|
|
touch: "无",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "复制",
|
|||
|
|
windows: "Ctrl+C",
|
|||
|
|
mac: "⌘+C",
|
|||
|
|
touch: "无",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "粘贴",
|
|||
|
|
windows: "Ctrl+V",
|
|||
|
|
mac: "⌘+V",
|
|||
|
|
touch: "无",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "剪切",
|
|||
|
|
windows: "Ctrl+X",
|
|||
|
|
mac: "⌘+X",
|
|||
|
|
touch: "无",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "缩放画布",
|
|||
|
|
windows: "鼠标滚轮",
|
|||
|
|
mac: "鼠标滚轮 或 触控板缩放手势",
|
|||
|
|
touch: "双指捏合",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "移动画布",
|
|||
|
|
windows: "Alt+拖动 或 鼠标中键拖动",
|
|||
|
|
mac: "Option+拖动 或 触控板双指拖动",
|
|||
|
|
touch: "双指拖动",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "绘画模式",
|
|||
|
|
windows: "B",
|
|||
|
|
mac: "B",
|
|||
|
|
touch: "点击画笔工具",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "选择模式",
|
|||
|
|
windows: "M",
|
|||
|
|
mac: "M",
|
|||
|
|
touch: "点击选择工具",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "橡皮擦模式",
|
|||
|
|
windows: "E",
|
|||
|
|
mac: "E",
|
|||
|
|
touch: "点击橡皮擦工具",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "吸色工具",
|
|||
|
|
windows: "I",
|
|||
|
|
mac: "I",
|
|||
|
|
touch: "点击吸色工具",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "增加笔触大小",
|
|||
|
|
windows: "]",
|
|||
|
|
mac: "]",
|
|||
|
|
touch: "拖动笔刷大小滑块",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "减小笔触大小",
|
|||
|
|
windows: "[",
|
|||
|
|
mac: "[",
|
|||
|
|
touch: "拖动笔刷大小滑块",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "增加材质图片大小",
|
|||
|
|
windows: "Shift+]",
|
|||
|
|
mac: "⇧+]",
|
|||
|
|
touch: "拖动材质大小滑块",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "减小材质图片大小",
|
|||
|
|
windows: "Shift+[",
|
|||
|
|
mac: "⇧+[",
|
|||
|
|
touch: "拖动材质大小滑块",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: "上传图片",
|
|||
|
|
windows: "Ctrl+O",
|
|||
|
|
mac: "⌘+O",
|
|||
|
|
touch: "点击上传按钮",
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取当前平台的快捷键文本
|
|||
|
|
function getShortcutForCurrentPlatform(shortcut) {
|
|||
|
|
if (platform.value.isTouchDevice) {
|
|||
|
|
return shortcut.touch;
|
|||
|
|
} else if (platform.value.isMac) {
|
|||
|
|
return shortcut.displayKey || shortcut.mac;
|
|||
|
|
} else {
|
|||
|
|
return shortcut.displayKey || shortcut.windows;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 按分类获取快捷键
|
|||
|
|
function getShortcutsByCategory(category) {
|
|||
|
|
const categoryMap = {
|
|||
|
|
basic: [
|
|||
|
|
"撤销",
|
|||
|
|
"重做",
|
|||
|
|
"全选",
|
|||
|
|
"复制",
|
|||
|
|
"粘贴",
|
|||
|
|
"剪切",
|
|||
|
|
"删除选中元素",
|
|||
|
|
"上传图片",
|
|||
|
|
],
|
|||
|
|
view: ["缩放画布", "移动画布"],
|
|||
|
|
tools: [
|
|||
|
|
"绘画模式",
|
|||
|
|
"选择模式",
|
|||
|
|
"橡皮擦模式",
|
|||
|
|
"吸色工具",
|
|||
|
|
"套索工具",
|
|||
|
|
"自由选区工具",
|
|||
|
|
"波浪工具",
|
|||
|
|
"液化工具",
|
|||
|
|
],
|
|||
|
|
brush: [
|
|||
|
|
"增加笔触大小",
|
|||
|
|
"减小笔触大小",
|
|||
|
|
"增加材质图片大小",
|
|||
|
|
"减小材质图片大小",
|
|||
|
|
],
|
|||
|
|
layer: ["新建图层", "组合图层", "取消组合", "合并图层"],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return shortcuts.value.filter((s) =>
|
|||
|
|
categoryMap[category]?.includes(s.action)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="keyboard-shortcut-help">
|
|||
|
|
<h2>键盘快捷键 & 操作指南</h2>
|
|||
|
|
|
|||
|
|
<Skeleton active :loading="loading">
|
|||
|
|
<div class="platform-info">
|
|||
|
|
检测到的平台:
|
|||
|
|
<span v-if="platform.isMac">MacOS</span>
|
|||
|
|
<span v-else-if="platform.isWindows">Windows</span>
|
|||
|
|
<span v-else-if="platform.isIPad">iPad</span>
|
|||
|
|
<span v-else-if="platform.isIOS">iOS</span>
|
|||
|
|
<span v-else-if="platform.isAndroid">Android</span>
|
|||
|
|
<span v-else>其他</span>
|
|||
|
|
<span v-if="platform.isTouchDevice"> (触控设备)</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="shortcuts-category">
|
|||
|
|
<h3>基本操作</h3>
|
|||
|
|
<table class="shortcuts-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>操作</th>
|
|||
|
|
<th>快捷键/手势</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr
|
|||
|
|
v-for="item in getShortcutsByCategory('basic')"
|
|||
|
|
:key="item.action"
|
|||
|
|
>
|
|||
|
|
<td>{{ item.action }}</td>
|
|||
|
|
<td>{{ getShortcutForCurrentPlatform(item) }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="shortcuts-category">
|
|||
|
|
<h3>视图操作</h3>
|
|||
|
|
<table class="shortcuts-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>操作</th>
|
|||
|
|
<th>快捷键/手势</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr
|
|||
|
|
v-for="item in getShortcutsByCategory('view')"
|
|||
|
|
:key="item.action"
|
|||
|
|
>
|
|||
|
|
<td>{{ item.action }}</td>
|
|||
|
|
<td>{{ getShortcutForCurrentPlatform(item) }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="shortcuts-category">
|
|||
|
|
<h3>工具切换</h3>
|
|||
|
|
<table class="shortcuts-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>操作</th>
|
|||
|
|
<th>快捷键/手势</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr
|
|||
|
|
v-for="item in getShortcutsByCategory('tools')"
|
|||
|
|
:key="item.action"
|
|||
|
|
>
|
|||
|
|
<td>{{ item.action }}</td>
|
|||
|
|
<td>{{ getShortcutForCurrentPlatform(item) }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="shortcuts-category">
|
|||
|
|
<h3>笔刷调整</h3>
|
|||
|
|
<table class="shortcuts-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>操作</th>
|
|||
|
|
<th>快捷键/手势</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr
|
|||
|
|
v-for="item in getShortcutsByCategory('brush')"
|
|||
|
|
:key="item.action"
|
|||
|
|
>
|
|||
|
|
<td>{{ item.action }}</td>
|
|||
|
|
<td>{{ getShortcutForCurrentPlatform(item) }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="shortcuts-category">
|
|||
|
|
<h3>图层操作</h3>
|
|||
|
|
<table class="shortcuts-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>操作</th>
|
|||
|
|
<th>快捷键/手势</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr
|
|||
|
|
v-for="item in getShortcutsByCategory('layer')"
|
|||
|
|
:key="item.action"
|
|||
|
|
>
|
|||
|
|
<td>{{ item.action }}</td>
|
|||
|
|
<td>{{ getShortcutForCurrentPlatform(item) }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="touch-tips" v-if="platform.isTouchDevice">
|
|||
|
|
<h3>触控设备提示</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>长按图层面板可访问更多选项</li>
|
|||
|
|
<li>双击元素可快速进入编辑模式</li>
|
|||
|
|
<li>双指拖动可平移画布</li>
|
|||
|
|
<li>双指捏合可缩放画布</li>
|
|||
|
|
<li>双指连按可显示元素变换控制点</li>
|
|||
|
|
<li>三指左右滑动可进行撤销/重做操作</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</Skeleton>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.keyboard-shortcut-help {
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|||
|
|
max-width: 600px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 {
|
|||
|
|
margin-top: 0;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
padding-bottom: 5px;
|
|||
|
|
border-bottom: 1px solid #eaeaea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.platform-info {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
padding: 8px;
|
|||
|
|
background-color: #f0f9ff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shortcuts-category {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shortcuts-table {
|
|||
|
|
width: 100%;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shortcuts-table th,
|
|||
|
|
.shortcuts-table td {
|
|||
|
|
border: 1px solid #eaeaea;
|
|||
|
|
padding: 8px 10px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shortcuts-table th {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.touch-tips {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #fffbeb;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border-left: 3px solid #fbbf24;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.touch-tips ul {
|
|||
|
|
margin: 10px 0 0;
|
|||
|
|
padding-left: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.touch-tips li {
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (pointer: coarse) {
|
|||
|
|
.keyboard-shortcut-help {
|
|||
|
|
padding: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shortcuts-table th,
|
|||
|
|
.shortcuts-table td {
|
|||
|
|
padding: 12px 8px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|