feat: 新增 mac 键位适配

YasinChan · Dec 10, 2023 · 3a29100 · 3a29100
1 parent e25cbe9
commit 3a29100
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 66 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,13 +8,15 @@ import { useUserStore } from '@/store/user';
 import { useConfigStore } from '@/store/config';
 import { storeToRefs } from 'pinia';
 import { useRouter } from 'vue-router';
+import YDropDown from '@/components/ui/DropDown.vue';
 
 const router = useRouter();
 
 setTheme(getTheme());
 
 const obj = reactive({
   showChangeFontModal: false,
+  showChangeSystemModal: false,
   userName: '',
   password: '',
   userNameError: '',
@@ -49,11 +51,16 @@ userStore.setConfig();
 const useConfig = useConfigStore();
 
 const { config } = storeToRefs(userStore);
+const { currentSystem } = storeToRefs(useConfig);
 
 const changeTheme = () => {
   const currentTheme = getTheme();
   currentTheme === 'light' ? setTheme('dark') : setTheme('light');
 };
+
+function changeSystem(system: string) {
+  useConfig.setCurrentSystem(system);
+}
 </script>
 
 <template>
@@ -66,33 +73,43 @@ const changeTheme = () => {
     <div class="y-menu">
       <router-link to="/" class="y-menu__item y-menu__item--active">计时模式</router-link>
       <router-link to="time-limit" class="y-menu__item">限时模式</router-link>
-      <router-link to="/keyboard" class="y-menu__item y-menu__keybord-test">键盘测试</router-link>
-      <div
-        v-if="
-          router.currentRoute.value.name === 'TimeKeep' ||
-          router.currentRoute.value.name === 'TimeLimit'
-        "
-        class="y-menu__item y-menu__change y-menu__change-font"
-        @click="
-          () => {
-            obj.showChangeFontModal = true;
-          }
-        "
-      >
-        切换字体
-      </div>
-      <div
-        v-else-if="router.currentRoute.value.name === 'Keyboard'"
-        class="y-menu__item y-menu__change y-menu__change-keyboard"
-        @click="
-          () => {
-            useConfig.setKeyboardModalStatus(true);
-          }
-        "
-      >
-        切换键盘
-      </div>
-      <div class="y-menu__item y-menu__change" @click="changeTheme">切换主题</div>
+      <router-link to="/keyboard" class="y-menu__item y-menu__keyboard-test">键盘测试</router-link>
+      <y-drop-down>
+        <template #title>
+          <div class="y-menu__item">设置</div>
+        </template>
+        <template #menu>
+          <div class="y-auth__menu">
+            <div
+              v-if="
+                router.currentRoute.value.name === 'TimeKeep' ||
+                router.currentRoute.value.name === 'TimeLimit'
+              "
+              class="y-menu__change y-menu__change-font"
+              @click="
+                () => {
+                  obj.showChangeFontModal = true;
+                }
+              "
+            >
+              切换字体
+            </div>
+            <div
+              v-else-if="router.currentRoute.value.name === 'Keyboard'"
+              class="y-menu__change y-menu__change-keyboard"
+              @click="
+                () => {
+                  useConfig.setKeyboardModalStatus(true);
+                }
+              "
+            >
+              切换键盘
+            </div>
+            <div class="y-menu__change" @click="changeTheme">切换主题</div>
+            <div class="y-menu__change" @click="obj.showChangeSystemModal = true">切换系统</div>
+          </div>
+        </template>
+      </y-drop-down>
       <div class="y-menu__item y-menu__change">
         <auth></auth>
       </div>
@@ -107,7 +124,7 @@ const changeTheme = () => {
         <h3>选择字体</h3>
       </template>
       <template #body>
-        <div class="y-change-font__container gray-08">
+        <div class="y-change__container gray-08">
           <ul>
             <li @click="useConfig.setCurrentFont('default')" class="y-font--default">
               默认 字体 测试 TEST test
@@ -129,6 +146,29 @@ const changeTheme = () => {
       </template>
     </y-modal>
   </Teleport>
+  <Teleport to="body">
+    <y-modal
+      :show="obj.showChangeSystemModal"
+      @close="obj.showChangeSystemModal = false"
+      @confirm="obj.showChangeSystemModal = false"
+    >
+      <template #header>
+        <h3>选择系统</h3>
+      </template>
+      <template #body>
+        <div class="y-change__container gray-08">
+          <ul>
+            <li @click="changeSystem('win')" :class="currentSystem === 'win' ? 'active' : ''">
+              Windows
+            </li>
+            <li @click="changeSystem('mac')" :class="currentSystem === 'mac' ? 'active' : ''">
+              Mac
+            </li>
+          </ul>
+        </div>
+      </template>
+    </y-modal>
+  </Teleport>
   <Teleport to="body">
     <message :type="obj.type" :message="obj.message" :visible="obj.visible"></message>
   </Teleport>
@@ -201,16 +241,14 @@ header {
   }
 }
 .y-menu__change {
-  margin-left: 26px;
-  color: $gray-04;
-}
-.y-menu__change-font {
-  text-shadow: -2px -2px 2px $gray-04;
-  color: $gray-06;
-}
-.y-menu__change-keyboard {
-  text-shadow: 2px 2px 2px $gray-04;
-  color: $gray-06;
+  cursor: pointer;
+  border-radius: 2px;
+  padding: 10px 15px;
+  display: block;
+  transition: background 0.2s;
+  &:hover {
+    background: $layout-background-gray-hover;
+  }
 }
 
 main {
@@ -226,7 +264,7 @@ main {
   color: $gray-08;
 }
 
-.y-change-font__container {
+.y-change__container {
   li {
     cursor: pointer;
   }

diff --git a/src/components/Auth.vue b/src/components/Auth.vue
@@ -463,7 +463,7 @@ const updatePassword = () => {
 
 <style lang="scss">
 .y-auth {
-  .y-dorp-down__menu {
+  .y-drop-down__menu {
     margin: 10px 0;
   }
 }

diff --git a/src/components/ui/DropDown.vue b/src/components/ui/DropDown.vue
@@ -9,31 +9,32 @@ const obj = reactive({
 nextTick().then(() => {
   document.addEventListener('click', (event) => {
     const targetElement: any = event.target;
-    if (!targetElement.closest('.y-dorp-down--js')) {
+    if (!targetElement.closest('.y-drop-down--js')) {
       obj.showMenu = false;
     }
   });
 });
 </script>
 <template>
-  <div class="y-dorp-down y-dorp-down--js">
-    <div class="y-dorp-down__title" @click.stop="obj.showMenu = !obj.showMenu">
+  <div class="y-drop-down y-drop-down--js">
+    <div class="y-drop-down__title" @click.stop="obj.showMenu = !obj.showMenu">
       <slot name="title"></slot>
     </div>
     <Transition name="drop-down">
-      <div v-if="obj.showMenu" ref="menuRef" class="y-dorp-down__menu">
+      <div v-if="obj.showMenu" ref="menuRef" class="y-drop-down__menu">
         <slot name="menu"></slot>
       </div>
     </Transition>
   </div>
 </template>
 <style lang="scss">
-.y-dorp-down {
+.y-drop-down {
   position: relative;
 }
-.y-dorp-down__menu {
+.y-drop-down__menu {
   position: absolute;
   right: 0;
+  top: 28px;
   background: $layout-background-gray;
   border-radius: 2px;
   box-shadow: 0px 0px 5px $layout-background-gray;

diff --git a/src/config/key.ts b/src/config/key.ts
@@ -101,13 +101,13 @@ export const KEY_PERMUTATION_68: any = {
       { code: 'PageDown', unit: 1, value: 'PgDn' }
     ],
     [
-      { code: 'ControlLeft', unit: 125, value: 'Ctrl' },
-      { code: 'Win', unit: 125, value: 'Win' },
-      { code: 'AltLeft', unit: 125, value: 'Alt' },
+      { 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: 'Space', unit: 7, value: 'Space' },
-      { code: 'AltRight', unit: 1, value: 'Alt' },
-      { code: 'Win', unit: 1, value: 'Win' },
-      { code: 'ControlRight', unit: 1, value: 'Ctrl' },
+      { 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: '↓' },
       { code: 'ArrowRight', unit: 1, value: '→' }
@@ -194,14 +194,14 @@ export const KEY_PERMUTATION_STANDARD: any = {
       { code: 'ShiftRight', unit: 3, value: 'Shift' }
     ],
     [
-      { code: 'ControlLeft', unit: 125, value: 'Ctrl' },
-      { code: 'MetaLeft', unit: 125, value: 'Win' },
-      { code: 'AltLeft', unit: 125, value: 'Alt' },
+      { 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: 'Space', unit: 7, value: 'Space' },
-      { code: 'AltRight', unit: 125, value: 'Alt' },
-      { code: 'MetaRight', unit: 125, value: 'Win' },
+      { 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' }
+      { code: 'ControlRight', unit: 125, value: 'Ctrl', macValue: '⌃' }
     ]
   ],
   'sub-area': [

diff --git a/src/router/routes.ts b/src/router/routes.ts
@@ -1,11 +1,11 @@
 import TimeKeep from '@/view/TimeKeep.vue';
 import TimeLimit from '@/view/TimeLimit.vue';
-import Keyboard from '@/view/Keyboard.vue';
+import TypingKeyboard from '@/view/TypingKeyboard.vue';
 import User from '@/view/User.vue';
 
 export default [
   { path: '/', name: 'TimeKeep', component: TimeKeep },
   { path: '/time-limit', name: 'TimeLimit', component: TimeLimit },
-  { path: '/keyboard', name: 'Keyboard', component: Keyboard },
+  { path: '/keyboard', name: 'Keyboard', component: TypingKeyboard },
   { path: '/user/:id', name: 'User', component: User }
 ];
diff --git a/src/store/config.ts b/src/store/config.ts
@@ -3,6 +3,7 @@ import { defineStore } from 'pinia';
 export const useConfigStore = defineStore('config', {
   state: () => ({
     currentFont: 'default' as string,
+    currentSystem: 'win' as string, // win, mac
     keyboardModalStatus: false as boolean,
     printContent: '' as string,
     currentCode: [] as any[]
@@ -11,6 +12,9 @@ export const useConfigStore = defineStore('config', {
     setCurrentFont(val: string) {
       this.currentFont = val;
     },
+    setCurrentSystem(val: string) {
+      this.currentSystem = val;
+    },
     setKeyboardModalStatus(val: boolean) {
       this.keyboardModalStatus = val;
     },

diff --git a/src/view/Keyboard.vue → src/view/TypingKeyboard.vue b/src/view/Keyboard.vue → src/view/TypingKeyboard.vue
@@ -9,11 +9,12 @@ import YModal from '@/components/ui/Modal.vue';
 
 const screenBottomRef = ref();
 const state = reactive({
-  currentKeyBoard: 'standard' // '68' | 'standard'
+  currentKeyBoard: 'standard', // '68' | 'standard'
+  currentSystem: 'win' // 'mac' | 'win'
 });
 
 const configStore = useConfigStore();
-const { printContent, keyboardModalStatus, currentCode } = storeToRefs(configStore);
+const { printContent, keyboardModalStatus, currentCode, currentSystem } = storeToRefs(configStore);
 
 let timeout: any = null;
 
@@ -62,8 +63,8 @@ const changeKeyboard = (keyboard: string) => {
             <single-key
               v-for="item in v"
               :key="item.code"
-              :code="item.code"
-              :value="item.value"
+              :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>
@@ -83,8 +84,8 @@ const changeKeyboard = (keyboard: string) => {
             <single-key
               v-for="item in v"
               :key="item.code"
-              :code="item.code"
-              :value="item.value"
+              :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>