feat:添加文本长度控制

src/assets/style/global.css

@@ -18,7 +18,7 @@ body {
   box-sizing: border-box;
 }
 .col-2 {
-  width: 16.66666667%;
+  width: 2/12 * 100%;
 }
 .col-3 {
   width: 25%;
@@ -27,5 +27,8 @@ body {
   width: 75%;
 }
 .col-10 {
-  width: 83.33333333%;
+  width: 10/12 * 100%;
+}
+.col-12 {
+  width: 100%;
 }

src/assets/style/global.less

@@ -32,5 +32,9 @@ body {
   width: 10/12 * 100%;
 }
 
+.col-12 {
+  width: 100%;
+}
+
 @keyboard-bg-color: #dfd9d9;
 @border-style: 1px solid rgba(0, 10, 20, 0.1);

src/components/common/settings.vue

@@ -23,6 +23,17 @@
         @input="changePracticeLetters"
       ></el-slider>
     </div>
+    <div class="setting-item">
+      <label for="practiceLetters">文本长度</label>
+      <el-slider
+        :min="0"
+        :max="20"
+        :show-tooltip="false"
+        :value="letterLength"
+        style="margin-top: -30px"
+        @input="changeLetterLength($event)"
+      ></el-slider>
+    </div>
     <div class="setting-item">
       <label for="showFingers">显示指位</label>
       <el-switch
@@ -59,11 +70,16 @@ export default {
       "keyboardColor",
       "practiceLetters",
       "keyLetter",
+      "letterLength",
       "minRange"
     ])
   },
   methods: {
-    ...mapMutations(["changeFingersShow", "changeKeyboardColor"]),
+    ...mapMutations([
+      "changeFingersShow",
+      "changeKeyboardColor",
+      "setLetterLength"
+    ]),
     isKeyLetter(val) {
       if (!val) return false;
       return val === this.keyLetter;
@@ -72,6 +88,10 @@ export default {
       if (!val) return false;
       return this.practiceLetters.includes(val);
     },
+    changeLetterLength(val) {
+      const min = this.minRange;
+      this.setLetterLength(Math.max(min, val));
+    },
     // 滑动设置预设练习按键范围
     changePracticeLetters(val) {
       if (val < this.minRange) {
@@ -115,6 +135,7 @@ export default {
     color: @default-color;
     margin-left: 0.5em;
     text-align: center;
+    cursor: pointer;
     &.practiceLetter {
       border-color: @practice-color;
       color: @practice-color;

src/components/index/text.vue

@@ -23,7 +23,12 @@ export default {
     };
   },
   computed: {
-    ...mapState(["currentLetter", "practiceLetters", "keyLetter"])
+    ...mapState([
+      "currentLetter",
+      "practiceLetters",
+      "keyLetter",
+      "letterLength"
+    ])
   },
   watch: {
     currentLetter(val) {
@@ -40,6 +45,9 @@ export default {
     },
     keyLetter() {
       this.createTextList();
+    },
+    letterLength() {
+      this.createTextList();
     }
   },
   created() {
@@ -49,7 +57,7 @@ export default {
     ...mapMutations(["saveError", "saveSpeed", "saveScore"]),
     createTextList() {
       const textModel = new CreateText(this.practiceLetters, this.keyLetter);
-      const arr = new Array(this.length).fill(0);
+      const arr = new Array(this.letterLength).fill(0);
       const res = arr.map(() => textModel.create());
       this.text = res.join(" ").toLowerCase();
       this.startTime = new Date();

src/store/index.js

@@ -10,6 +10,7 @@ export default new Vuex.Store({
     practiceLetters: "ENITRL", // 预设练习按键组
     minRange: 4, // 预设按键组最小长度
     keyLetter: "E", // 预设重点练习按键
+    letterLength: 4,
     showFingers: true, // 是否显示指位
     keyboardColor: "#87CEEB", // 键盘颜色
     startTime: "", // 开始时间
@@ -33,6 +34,9 @@ export default new Vuex.Store({
     setKeyLetter(state, val) {
       state.keyLetter = val;
     },
+    setLetterLength(state, val) {
+      state.letterLength = val;
+    },
     changeFingersShow(state, val) {
       state.showFingers = val;
     },

src/views/index.vue

 <template>
   <div class="index">
-    <div class="col-10">
+    <div class="col-12">
       <settings-info />
       <speed />
       <text-component />
@@ -9,9 +9,9 @@
         <fingers v-if="showFingers" class="fingers" />
       </div>
     </div>
-    <div class="col-2">
+    <!-- <div class="col-2">
       <menu-component />
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -21,7 +21,7 @@ import textComponent from "@/components/index/text.vue";
 import keyboard from "@/components/index/keyboard.vue";
 import fingers from "@/components/index/fingers.vue";
 import speed from "@/components/index/speed.vue";
-import menuComponent from "@/components/common/menu.vue";
+// import menuComponent from "@/components/common/menu.vue";
 import { mapState } from "vuex";
 export default {
   name: "Home",
@@ -31,7 +31,7 @@ export default {
     fingers,
     speed,
     settingsInfo,
-    menuComponent
+    // menuComponent
   },
   computed: {
     ...mapState(["showFingers"])