feat: 优化测试键盘页面交互

YasinChan · Dec 10, 2023 · 27e9bd8 · 27e9bd8
1 parent 4d334a9
commit 27e9bd8
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 65 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -10,20 +10,18 @@ import { storeToRefs } from 'pinia';
 import { useRouter } from 'vue-router';
 import YDropDown from '@/components/ui/DropDown.vue';
 
-const router = useRouter();
 const userStore = useUserStore();
 userStore.setProfile();
 userStore.setConfig();
 const useConfig = useConfigStore();
 
 const { config } = storeToRefs(userStore);
-const { currentSystem, onlyShowMain } = storeToRefs(useConfig);
+const { onlyShowMain } = storeToRefs(useConfig);
 
 setTheme(getTheme());
 
 const obj = reactive({
   showChangeFontModal: false,
-  showChangeSystemModal: false,
   userName: '',
   password: '',
   userNameError: '',
@@ -75,10 +73,6 @@ const changeTheme = () => {
   const currentTheme = getTheme();
   currentTheme === 'light' ? setTheme('dark') : setTheme('light');
 };
-
-function changeSystem(system: string) {
-  useConfig.setCurrentSystem(system);
-}
 </script>
 
 <template>
@@ -103,11 +97,6 @@ function changeSystem(system: string) {
           <template #menu>
             <div class="y-auth__menu">
               <div
-                v-if="
-                  router.currentRoute.value.name === 'TimeLimit' ||
-                  router.currentRoute.value.name === 'WordsLimit' ||
-                  router.currentRoute.value.name === 'QuoteLimit'
-                "
                 class="y-menu__change y-menu__change-font"
                 @click="
                   () => {
@@ -117,19 +106,7 @@ function changeSystem(system: string) {
               >
                 切换字体
               </div>
-              <div
-                v-else-if="router.currentRoute.value.name === 'TypingKeyboard'"
-                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>
@@ -143,7 +120,11 @@ function changeSystem(system: string) {
   <router-view></router-view>
 
   <Teleport to="body">
-    <y-modal :show="obj.showChangeFontModal" @close="obj.showChangeFontModal = false">
+    <y-modal
+      :show="obj.showChangeFontModal"
+      @close="obj.showChangeFontModal = false"
+      @confirm="obj.showChangeFontModal = false"
+    >
       <template #header>
         <h3>选择字体</h3>
       </template>
@@ -170,29 +151,6 @@ function changeSystem(system: string) {
       </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>

diff --git a/src/store/config.ts b/src/store/config.ts
@@ -3,25 +3,17 @@ import { defineStore } from 'pinia';
 export const useConfigStore = defineStore('config', {
   state: () => ({
     onlyShowMain: false as boolean,
-    currentSystem: 'win' as string, // win, mac
     currentFont: 'default' as string,
-    keyboardModalStatus: false as boolean,
     printContent: '' as string,
     currentCode: [] as any[]
   }),
   actions: {
     setOnlyShowMain(val: boolean) {
       this.onlyShowMain = val;
     },
-    setCurrentSystem(val: string) {
-      this.currentSystem = val;
-    },
     setCurrentFont(val: string) {
       this.currentFont = val;
     },
-    setKeyboardModalStatus(val: boolean) {
-      this.keyboardModalStatus = val;
-    },
     setPrintContent(val: string) {
       this.printContent += val;
     },

diff --git a/src/view/TypingKeyboard.vue b/src/view/TypingKeyboard.vue
@@ -10,11 +10,12 @@ import YModal from '@/components/ui/Modal.vue';
 const screenBottomRef = ref();
 const state = reactive({
   currentKeyBoard: 'standard', // '68' | 'standard'
-  currentSystem: 'win' // 'mac' | 'win'
+  currentSystem: 'win', // 'mac' | 'win'
+  keyboardModal: false
 });
 
 const configStore = useConfigStore();
-const { printContent, keyboardModalStatus, currentCode, currentSystem } = storeToRefs(configStore);
+const { printContent, currentCode, onlyShowMain } = storeToRefs(configStore);
 
 let timeout: any = null;
 
@@ -50,6 +51,25 @@ const changeKeyboard = (keyboard: string) => {
       >
         <div class="y-main__sub-screen-text" v-html="currentCode.join('')"></div>
       </div>
+      <Transition name="menu">
+        <div class="y-main__selection" v-show="!onlyShowMain">
+          <div
+            class="y-main__selection-item"
+            v-if="state.currentSystem === 'win'"
+            @click="state.currentSystem = 'mac'"
+          >
+            Windows
+          </div>
+          <div
+            class="y-main__selection-item"
+            v-if="state.currentSystem === 'mac'"
+            @click="state.currentSystem = 'win'"
+          >
+            Mac
+          </div>
+          <div class="y-main__selection-item" @click="state.keyboardModal = true">切换键盘</div>
+        </div>
+      </Transition>
     </div>
     <key-wrap
       v-if="state.currentKeyBoard === '68'"
@@ -63,8 +83,8 @@ const changeKeyboard = (keyboard: string) => {
             <single-key
               v-for="item in v"
               :key="item.code"
-              :code="currentSystem === 'mac' && item.macCode ? item.macCode : item.code"
-              :value="currentSystem === 'mac' && item.macValue ? item.macValue : item.value"
+              :code="state.currentSystem === 'mac' && item.macCode ? item.macCode : item.code"
+              :value="state.currentSystem === 'mac' && item.macValue ? item.macValue : item.value"
               :unit="item.unit"
               :keys-pressed="keysPressed"
             ></single-key>
@@ -84,8 +104,8 @@ const changeKeyboard = (keyboard: string) => {
             <single-key
               v-for="item in v"
               :key="item.code"
-              :code="currentSystem === 'mac' && item.macCode ? item.macCode : item.code"
-              :value="currentSystem === 'mac' && item.macValue ? item.macValue : item.value"
+              :code="state.currentSystem === 'mac' && item.macCode ? item.macCode : item.code"
+              :value="state.currentSystem === 'mac' && item.macValue ? item.macValue : item.value"
               :unit="item.unit"
               :keys-pressed="keysPressed"
             ></single-key>
@@ -96,9 +116,9 @@ const changeKeyboard = (keyboard: string) => {
   </div>
   <Teleport to="body">
     <y-modal
-      :show="keyboardModalStatus"
-      @close="configStore.setKeyboardModalStatus(false)"
-      @confirm="configStore.setKeyboardModalStatus(false)"
+      :show="state.keyboardModal"
+      @close="state.keyboardModal = false"
+      @confirm="state.keyboardModal = false"
     >
       <template #header>
         <h3>选择键盘</h3>
@@ -120,6 +140,26 @@ const changeKeyboard = (keyboard: string) => {
   margin: 20px auto;
   justify-content: center;
   align-items: flex-end;
+  position: relative;
+}
+.y-main__selection {
+  position: absolute;
+  right: 0;
+  width: 100px;
+}
+.y-main__selection-item {
+  padding: 4px 8px;
+  color: $gray-06;
+  margin-bottom: 4px;
+  cursor: pointer;
+  text-align: center;
+  transform: scale(0.9);
+  opacity: 0.6;
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+  &:hover {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 .y-main__screen {
   width: 600px;