Skip to content

Commit

Permalink
feat: 增加 mbp 类型键盘 补充 ts 类型注释
Browse files Browse the repository at this point in the history
  • Loading branch information
@YasinChan
YasinChan committed Dec 16, 2023
1 parent 2dc96fc commit d2aa6a4
Show file tree
Hide file tree
Showing 5 changed files with 219 additions and 61 deletions.
11 changes: 4 additions & 7 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,20 @@ provide('message', (obj: any) => {
onMounted(() => {
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('scroll', handleScroll);
document.addEventListener('mouseover', handleMouseMove);
document.addEventListener('mousemove', handleMouseMove);
});
function handleKeyDown() {
console.log('----------', 'handleKeyDown', 1, '----------cyy log');
useConfig.setOnlyShowMain(true);
}
function handleScroll() {
console.log('----------', 'handleScroll', 3, '----------cyy log');
useConfig.setOnlyShowMain(false);
}
function handleMouseMove() {
console.log('----------', 'handleMouseMove', 4, '----------cyy log');
useConfig.setOnlyShowMain(false);
}
const showMessage = ({ message = '', type = 'success', settimeout = 3000 }) => {
const showMessage = ({ message = '', type = 'success', timeout = 3000 }) => {
clearTimeout(obj.timeout);
// 在这个函数中，设置Message组件的message和show属性，
// 以显示消息
Expand All @@ -66,7 +63,7 @@ const showMessage = ({ message = '', type = 'success', settimeout = 3000 }) => {
obj.timeout = setTimeout(() => {
// 过一段时间后，隐藏消息
obj.visible = false;
}, settimeout);
}, timeout);
};
const changeTheme = () => {
Expand Down Expand Up @@ -246,7 +243,7 @@ main {
letter-spacing: 1px;
}
.y-main {
margin: 100px;
margin: 100px auto;
color: $gray-08;
}
Expand Down
99 changes: 57 additions & 42 deletions src/components/key/SingleKey.vue
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,34 @@
<script setup lang="ts">
import { SUB_VALUE } from '@/config/key';
import { reactive, watch, computed } from 'vue';
import SingleKey from '@/components/key/SingleKey.vue';
const props = defineProps({
/**
* 键帽的宽度
* 1、125、15、225、25
*/
unit: {
type: Number,
default: 1
},
/**
* 键帽的背景颜色
*/
backgroundColor: {
type: String,
default: '#4F5767' // //#4F5767 #F4F4F5
},
/**
* 键帽上的字体颜色
*/
color: {
type: String,
default: '#fff'
},
/**
* 键帽上的主要字符
*/
value: {
type: String,
default: ''
},
code: {
type: String,
default: ''
},
/**
* 当前按下的键盘的 code
*/
keysPressed: {
type: Object,
default: () => ({})
}
import type { KEY_PERMUTATION_VALUE } from '@/config/key';
type Props = {
unit: number;
backgroundColor: string;
color: string;
value: string;
code: string;
keysPressed: any;
heightType: string;
type: string;
area: Array<Array<KEY_PERMUTATION_VALUE>> | null;
currentSystem: string;
};
const props = withDefaults(defineProps<Props>(), {
unit: 1,
backgroundColor: '#4F5767',
color: '#fff',
value: '',
code: '',
keysPressed: {},
heightType: 'normal',
type: 'normal',
area: null,
currentSystem: 'win'
});
const state = reactive({
Expand Down Expand Up @@ -73,15 +59,30 @@ const subValue = computed(() => {
});
</script>
<template>
<div class="y-single-key__inner" v-if="type === 'inner' && area">
<div class="y-single-key__inner-item" v-for="(v, i) in area" :key="i">
<single-key
v-for="item in v"
:key="item.code"
height-type="half"
:code="currentSystem === 'mac' && item.macCode ? item.macCode : item.code"
:value="currentSystem === 'mac' && item.macValue ? item.macValue : item.value"
:unit="item.unit"
:keys-pressed="keysPressed"
></single-key>
</div>
</div>
<div
v-else
class="y-single-key"
:class="[
code ? '' : 'y-single-key--empty',
'y-single-key--' + unit,
subValue ? 'y-single-key__small-size' : '',
value.length > 1 ? 'y-single-key__word' : 'y-single-key__letter',
state.isActive ? 'y-single-key--active' : '',
isKeyPressed ? 'y-single-key--pressed' : ''
isKeyPressed ? 'y-single-key--pressed' : '',
heightType === 'half' ? 'y-single-key--half' : ''
]"
:style="{
backgroundColor,
Expand Down Expand Up @@ -118,6 +119,10 @@ $unit: 40px;
transition: background-color 0.1s;
}
}
.y-single-key--half {
height: $unit / 2;
margin: 1px 0;
}
.y-single-key--active {
&:after {
content: '';
Expand Down Expand Up @@ -196,4 +201,14 @@ $unit: 40px;
.y-single-key--7 {
width: $unit * 7;
}
.y-single-key__inner {
display: flex;
flex-direction: column;
}
.y-single-key__inner-item {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
118 changes: 110 additions & 8 deletions src/config/key.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export type KEY_PERMUTATION_VALUE = {
type?: string;
macValue?: string;
macCode?: string;
area?: Array<Array<KEY_PERMUTATION_VALUE>>;
};

export type KEY_PERMUTATION_TYPE = Partial<
Expand Down Expand Up @@ -121,11 +122,11 @@ export const KEY_PERMUTATION_68: KEY_PERMUTATION_TYPE = {
],
[
{ code: 'ControlLeft', unit: 125, value: 'Ctrl', macValue: '⌃' },
{ code: 'Win', unit: 125, value: 'Win', macValue: '⌘', macCode: 'AltLeft' },
{ code: 'AltLeft', unit: 125, value: 'Alt', macValue: '⌥', macCode: 'MetaLeft' },
{ code: 'Win', unit: 125, value: 'Win', macValue: '⌥', macCode: 'AltLeft' },
{ code: 'AltLeft', unit: 125, value: 'Alt', macValue: '⌘', macCode: 'MetaLeft' },
{ code: 'Space', unit: 7, value: 'Space' },
{ code: 'AltRight', unit: 1, value: 'Alt', macValue: '⌥', macCode: 'MetaRight' },
{ code: 'Win', unit: 1, value: 'Win', macValue: '⌘', macCode: 'AltRight' },
{ code: 'AltRight', unit: 1, value: 'Alt', macValue: '⌘', macCode: 'MetaRight' },
{ code: 'Win', unit: 1, value: 'Win', macValue: '⌥', macCode: 'AltRight' },
{ code: 'ControlRight', unit: 1, value: 'Ctrl', macValue: '⌃' },
{ code: 'ArrowLeft', unit: 1, value: '←' },
{ code: 'ArrowDown', unit: 1, value: '↓' },
Expand Down Expand Up @@ -214,11 +215,11 @@ export const KEY_PERMUTATION_STANDARD: KEY_PERMUTATION_TYPE = {
],
[
{ code: 'ControlLeft', unit: 125, value: 'Ctrl', macValue: '⌃' },
{ code: 'MetaLeft', unit: 125, value: 'Win', macValue: '⌘', macCode: 'AltLeft' },
{ code: 'AltLeft', unit: 125, value: 'Alt', macValue: '⌥', macCode: 'MetaLeft' },
{ code: 'MetaLeft', unit: 125, value: 'Win', macValue: '⌥', macCode: 'AltLeft' },
{ code: 'AltLeft', unit: 125, value: 'Alt', macValue: '⌘', macCode: 'MetaLeft' },
{ code: 'Space', unit: 7, value: 'Space' },
{ code: 'AltRight', unit: 125, value: 'Alt', macValue: '⌥', macCode: 'MetaRight' },
{ code: 'MetaRight', unit: 125, value: 'Win', macValue: '⌘', macCode: 'AltRight' },
{ code: 'AltRight', unit: 125, value: 'Alt', macValue: '⌘', macCode: 'MetaRight' },
{ code: 'MetaRight', unit: 125, value: 'Win', macValue: '⌥', macCode: 'AltRight' },
{ code: 'ContextMenu', unit: 125, value: 'Menu' },
{ code: 'ControlRight', unit: 125, value: 'Ctrl', macValue: '⌃' }
]
Expand Down Expand Up @@ -282,6 +283,107 @@ export const KEY_PERMUTATION_STANDARD: KEY_PERMUTATION_TYPE = {
]
};

export const KEY_PERMUTATION_MBP: KEY_PERMUTATION_TYPE = {
[KEY_PERMUTATION_KEY.MAIN_AREA]: [
[
{ code: 'Escape', unit: 1, value: 'Esc' },
{ code: 'F1', unit: 1, value: 'F1' },
{ code: 'F2', unit: 1, value: 'F2' },
{ code: 'F3', unit: 1, value: 'F3' },
{ code: 'F4', unit: 1, value: 'F4' },
{ code: 'F5', unit: 1, value: 'F5' },
{ code: 'F6', unit: 1, value: 'F6' },
{ code: 'F7', unit: 1, value: 'F7' },
{ code: 'F8', unit: 1, value: 'F8' },
{ code: 'F9', unit: 1, value: 'F9' },
{ code: 'F10', unit: 1, value: 'F10' },
{ code: 'F11', unit: 1, value: 'F11' },
{ code: 'F12', unit: 1, value: 'F12' }
],
[
{ code: 'Backquote', unit: 1, value: '`' },
{ code: 'Digit1', unit: 1, value: '1' },
{ code: 'Digit2', unit: 1, value: '2' },
{ code: 'Digit3', unit: 1, value: '3' },
{ code: 'Digit4', unit: 1, value: '4' },
{ code: 'Digit5', unit: 1, value: '5' },
{ code: 'Digit6', unit: 1, value: '6' },
{ code: 'Digit7', unit: 1, value: '7' },
{ code: 'Digit8', unit: 1, value: '8' },
{ code: 'Digit9', unit: 1, value: '9' },
{ code: 'Digit0', unit: 1, value: '0' },
{ code: 'Minus', unit: 1, value: '-' },
{ code: 'Equal', unit: 1, value: '=' },
{ code: 'Backspace', unit: 2, value: 'Backspace' }
],
[
{ code: 'Tab', unit: 15, value: 'Tab' },
{ code: 'KeyQ', unit: 1, value: 'q' },
{ code: 'KeyW', unit: 1, value: 'w' },
{ code: 'KeyE', unit: 1, value: 'e' },
{ code: 'KeyR', unit: 1, value: 'r' },
{ code: 'KeyT', unit: 1, value: 't' },
{ code: 'KeyY', unit: 1, value: 'y' },
{ code: 'KeyU', unit: 1, value: 'u' },
{ code: 'KeyI', unit: 1, value: 'i' },
{ code: 'KeyO', unit: 1, value: 'o' },
{ code: 'KeyP', unit: 1, value: 'p' },
{ code: 'BracketLeft', unit: 1, value: '[' },
{ code: 'BracketRight', unit: 1, value: ']' },
{ code: 'Backslash', unit: 15, value: '\\' }
],
[
{ code: 'CapsLock', unit: 175, value: 'CapsLock', type: 'toggle' },
{ code: 'KeyA', unit: 1, value: 'a' },
{ code: 'KeyS', unit: 1, value: 's' },
{ code: 'KeyD', unit: 1, value: 'd' },
{ code: 'KeyF', unit: 1, value: 'f' },
{ code: 'KeyG', unit: 1, value: 'g' },
{ code: 'KeyH', unit: 1, value: 'h' },
{ code: 'KeyJ', unit: 1, value: 'j' },
{ code: 'KeyK', unit: 1, value: 'k' },
{ code: 'KeyL', unit: 1, value: 'l' },
{ code: 'Semicolon', unit: 1, value: ';' },
{ code: 'Quote', unit: 1, value: "'" },
{ code: 'Enter', unit: 25, value: 'Enter' }
],
[
{ code: 'ShiftLeft', unit: 225, value: 'Shift' },
{ code: 'KeyZ', unit: 1, value: 'z' },
{ code: 'KeyX', unit: 1, value: 'x' },
{ code: 'KeyC', unit: 1, value: 'c' },
{ code: 'KeyV', unit: 1, value: 'v' },
{ code: 'KeyB', unit: 1, value: 'b' },
{ code: 'KeyN', unit: 1, value: 'n' },
{ code: 'KeyM', unit: 1, value: 'm' },
{ code: 'Comma', unit: 1, value: ',' },
{ code: 'Period', unit: 1, value: '.' },
{ code: 'Slash', unit: 1, value: '/' },
{ code: 'ShiftRight', unit: 3, value: 'Shift' }
],
[
{ code: 'Fn', unit: 1, value: 'Fn' },
{ code: 'ControlLeft', unit: 1, value: 'Ctrl', macValue: '⌃' },
{ code: 'MetaLeft', unit: 1, value: 'Win', macValue: '⌘', macCode: 'AltLeft' },
{ code: 'AltLeft', unit: 1, value: 'Alt', macValue: '⌥', macCode: 'MetaLeft' },
{ code: 'Space', unit: 7, value: 'Space' },
{ code: 'MetaRight', unit: 125, value: 'Win', macValue: '⌘', macCode: 'MetaRight' },
{ code: 'AltRight', unit: 1, value: 'Alt', macValue: '⌥', macCode: 'AltRight' },
{
type: 'inner',
area: [
[{}, { code: 'ArrowUp', unit: 1, value: '↑' }, {}],
[
{ code: 'ArrowLeft', unit: 1, value: '←' },
{ code: 'ArrowDown', unit: 1, value: '↓' },
{ code: 'ArrowRight', unit: 1, value: '→' }
]
]
}
]
]
};

export const CAN_PRINT_KEY: any = {
KeyQ: 'q',
KeyW: 'w',
Expand Down
3 changes: 3 additions & 0 deletions src/types/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export type KeyBoardType = '68' | 'standard' | 'mbp';

export type SystemType = 'mac' | 'win';
Loading

0 comments on commit d2aa6a4

Please sign in to comment.