diff --git a/src/assets/js/mock.js b/src/assets/js/mock.js
index 9aff2ffe078c5cb24582ce6290e21631c0ad24e7..234fe7000b483bd81e17c347e0fe66579686a9b0 100644
--- a/src/assets/js/mock.js
+++ b/src/assets/js/mock.js
@@ -31,7 +31,7 @@ const keys = [
   { id: 4, type: "Letter", primaryName: "]", subName: "}" },
   { id: 4, type: "Fill", primaryName: "\\", subName: "|" },
   // 第三行
-  { id: 4, type: "Caps Lock", primaryName: "Caps Lock", subName: "" },
+  { id: 4, type: "Caps Lock", primaryName: "CapsLock", subName: "" },
   { id: 4, type: "Letter", primaryName: "A", subName: "" },
   { id: 4, type: "Letter", primaryName: "S", subName: "" },
   { id: 4, type: "Letter", primaryName: "D", subName: "" },
@@ -42,7 +42,7 @@ const keys = [
   { id: 4, type: "Letter", primaryName: "K", subName: "" },
   { id: 4, type: "Letter", primaryName: "L", subName: "" },
   { id: 4, type: "Letter", primaryName: ";", subName: ":" },
-  { id: 4, type: "Letter", primaryName: ",", subName: "\"" },
+  { id: 4, type: "Letter", primaryName: "'", subName: '"' },
   { id: 4, type: "Fill", primaryName: "Enter", subName: "" },
   // 第四行
   { id: 4, type: "Shift", primaryName: "Shift", subName: "" },
@@ -60,10 +60,9 @@ const keys = [
   // 第五行
   { id: 4, type: "Function", primaryName: "Ctrl", subName: "" },
   { id: 4, type: "Letter", primaryName: "Alt", subName: "" },
-  // { id: 4, type: "Function", primaryName: "Command", subName: "" },
-  { id: 4, type: "Fill", primaryName: "", subName: "" },
+  { id: 4, type: "Fill", primaryName: " ", subName: "" },
   { id: 4, type: "Letter", primaryName: "Alt", subName: "" },
-  { id: 4, type: "Function", primaryName: "Ctrl", subName: "" },
+  { id: 4, type: "Function", primaryName: "Ctrl", subName: "" }
 ];
 
 export default keys;
diff --git a/src/components/key.vue b/src/components/key.vue
index a0deb324703db4ad357bfd45da73a2f576e342dc..93a6fafd252ed63457d2cc58177c9d67a8ab1b6b 100644
--- a/src/components/key.vue
+++ b/src/components/key.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="key"
+    :class="['key', { active: isCurrentKey($store.state.currentKey) }]"
     :style="{
       'min-width': keyWidth + 'px',
-      flex: type === 'Fill' ? 1 : 'none',
+      flex: type === 'Fill' ? 1 : 'none'
     }"
   >
     <div class="multiple" v-if="subName">
@@ -19,16 +19,16 @@ export default {
   props: {
     type: {
       type: String,
-      default: "",
+      default: ""
     },
     primaryName: {
       type: String,
-      default: "",
+      default: ""
     },
     subName: {
       type: String,
-      defualt: "",
-    },
+      defualt: ""
+    }
   },
   computed: {
     keyWidth() {
@@ -55,11 +55,14 @@ export default {
           break;
       }
       return keyWidth;
-    },
-  },
-  data() {
-    return {};
+    }
   },
+  methods: {
+    isCurrentKey(key) {
+      if (key === null) return false;
+      return key.toLowerCase() === this.primaryName.toLowerCase();
+    }
+  }
 };
 </script>
 
@@ -79,5 +82,8 @@ export default {
       line-height: 1em;
     }
   }
+  &.active {
+    opacity: 0.4;
+  }
 }
 </style>
diff --git a/src/components/keyboard.vue b/src/components/keyboard.vue
index bb2edeab571433314f904d8d885f191c3ac8c632..42b67464f21d54c7069d41ae7b95ab227002b1b1 100644
--- a/src/components/keyboard.vue
+++ b/src/components/keyboard.vue
@@ -14,6 +14,20 @@ export default {
       list: mock
     };
   },
+  mounted() {
+    this.keyboardInit();
+  },
+  methods: {
+    keyboardInit() {
+      document.addEventListener("keydown", e => {
+        e.preventDefault();
+        this.$store.commit("onkeydown", e.key);
+      });
+      document.addEventListener("keyup", () => {
+        this.$store.commit("onkeyup");
+      });
+    }
+  }
 };
 </script>
 
diff --git a/src/store/index.js b/src/store/index.js
index fb6015f46f54d17cb9b981303ad25a8e5bd5bcfe..d883714f5a29467383d8bca42b38d59e93687908 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,8 +4,17 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
+  state: {
+    currentKey: ""
+  },
+  mutations: {
+    onkeydown(state, val) {
+      state.currentKey = val;
+    },
+    onkeyup(state) {
+      state.currentKey = null;
+    }
+  },
   actions: {},
   modules: {}
 });