feat:keyboard complete

src/assets/js/mock.js

@@ -11,9 +11,9 @@ const keys = [
   { id: 1, type: "Letter", primaryName: "8", subName: "*" },
   { id: 1, type: "Letter", primaryName: "9", subName: "(" },
   { id: 1, type: "Letter", primaryName: "0", subName: ")" },
-  { id: 1, type: "Letter", primaryName: "-", subName: "—" },
+  { id: 1, type: "Letter", primaryName: "-", subName: "_" },
   { id: 1, type: "Letter", primaryName: "=", subName: "+" },
-  { id: 1, type: "Backspace", primaryName: "Backspace", subName: "" },
+  { id: 1, type: "Fill", primaryName: "Backspace", subName: "" },
 
   // 第二行
   { id: 1, type: "Tab", primaryName: "Tab", subName: "" },
@@ -27,11 +27,43 @@ const keys = [
   { id: 4, type: "Letter", primaryName: "I", subName: "" },
   { id: 4, type: "Letter", primaryName: "O", subName: "" },
   { id: 4, type: "Letter", primaryName: "P", subName: "" },
-  { id: 4, type: "Letter", primaryName: "[", subName: "" },
-  { id: 4, type: "Letter", primaryName: "]", subName: "" },
-  { id: 4, type: "Letter", primaryName: "\\", subName: "|" },
+  { id: 4, type: "Letter", primaryName: "[", subName: "{" },
+  { id: 4, type: "Letter", primaryName: "]", subName: "}" },
+  { id: 4, type: "Fill", primaryName: "\\", subName: "|" },
   // 第三行
   { id: 4, type: "Caps Lock", primaryName: "Caps Lock", subName: "" },
+  { id: 4, type: "Letter", primaryName: "A", subName: "" },
+  { id: 4, type: "Letter", primaryName: "S", subName: "" },
+  { id: 4, type: "Letter", primaryName: "D", subName: "" },
+  { id: 4, type: "Letter", primaryName: "F", subName: "" },
+  { id: 4, type: "Letter", primaryName: "G", subName: "" },
+  { id: 4, type: "Letter", primaryName: "H", subName: "" },
+  { id: 4, type: "Letter", primaryName: "J", subName: "" },
+  { 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: "Fill", primaryName: "Enter", subName: "" },
+  // 第四行
+  { id: 4, type: "Shift", primaryName: "Shift", subName: "" },
+  { id: 4, type: "Letter", primaryName: "Z", subName: "" },
+  { id: 4, type: "Letter", primaryName: "X", subName: "" },
+  { id: 4, type: "Letter", primaryName: "C", subName: "" },
+  { id: 4, type: "Letter", primaryName: "V", subName: "" },
+  { id: 4, type: "Letter", primaryName: "B", subName: "" },
+  { id: 4, type: "Letter", primaryName: "N", subName: "" },
+  { id: 4, type: "Letter", primaryName: "M", subName: "" },
+  { id: 4, type: "Letter", primaryName: ",", subName: "<" },
+  { id: 4, type: "Letter", primaryName: ".", subName: ">" },
+  { id: 4, type: "Letter", primaryName: "/", subName: "?" },
+  { id: 4, type: "Fill", primaryName: "Shift", subName: "" },
+  // 第五行
+  { 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: "Letter", primaryName: "Alt", subName: "" },
+  { id: 4, type: "Function", primaryName: "Ctrl", subName: "" },
 ];
 
 export default keys;

src/components/key.vue

 <template>
-  <div class="key" :style="{ width: keyWidth + 'px' }">
+  <div
+    class="key"
+    :style="{
+      'min-width': keyWidth + 'px',
+      flex: type === 'Fill' ? 1 : 'none',
+    }"
+  >
     <div class="multiple" v-if="subName">
       <span v-html="subName"></span>
       <span v-html="primaryName"></span>
@@ -39,8 +45,11 @@ export default {
         case "Caps Lock":
           keyWidth = 82;
           break;
-        case "Backspace":
-          keyWidth = 94;
+        case "Shift":
+          keyWidth = 110;
+          break;
+        case "Function":
+          keyWidth = 80;
           break;
         default:
           break;

src/components/keyboard.vue

@@ -21,7 +21,7 @@ export default {
 .keyboard {
   width: 722px;
   margin: 80px auto;
-  padding: 20px;
+  padding: 12px;
   background: @keyboard-bg-color;
   border-radius: 10px;
   display: flex;