Fast keys & Bug fixes

package-lock.json

@@ -14,7 +14,8 @@
         "crypto-js": "^4.1.1",
         "node-uuid": "^1.4.8",
         "vue": "^3.2.13",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vuex": "^4.1.0"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -10974,6 +10975,17 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
+      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

package.json

@@ -14,7 +14,8 @@
     "crypto-js": "^4.1.1",
     "node-uuid": "^1.4.8",
     "vue": "^3.2.13",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/components/Recite.vue

@@ -127,8 +127,26 @@ export default {
         key_listener(e) {
             if (this.mode === 1) {
                 let ctrlKey = e.ctrlKey || e.metaKey;
-                if (ctrlKey && e.key === 'b') {
+                if (ctrlKey) {
-                    this.showAnswer();
+                    switch (e.key) {
+                        case 'b':
+                            this.showAnswer();
+                            break;
+                        case 'm':
+                            this.skip();
+                            break;
+                        case 'i':
+                            this.add_to();
+                            break;
+                        case 'ArrowLeft':
+                            this.prev();
+                            break;
+                        case 'ArrowRight':
+                            this.next();
+                            break;
+                        default:
+                            return;
+                    }
                 }
                 e.preventDefault();
                 return;
@@ -179,7 +197,6 @@ export default {
                 onlineSets: this.online.checkedSets,
                 seed: seed
             }))
-            console.log(this.testWords);
             this.total = this.testWords.length;
             if (this.total === 0) {
                 ElMessage({
@@ -265,19 +282,25 @@ export default {
             });
         },
         next() {
-            this.current++;
+            if (this.current < this.answered) {
-            if (this.current === this.total) {
+                this.current++;
-                this.mode = 0;
+                if (this.current === this.total) {
-                ElNotification({
+                    this.mode = 0;
-                    message: "您已完成所有单词的背诵",
+                    ElNotification({
-                    title: "Congratulations!",
+                        message: "您已完成所有单词的背诵",
-                    type: "success"
+                        title: "Congratulations!",
-                })
+                        type: "success"
-                return;
+                    })
+                    return;
+                }
+                nextTick(() => {
+                    this.show();
+                });
             }
-            nextTick(() => {
+            else ElMessage({
-                this.show();
+                type:"error",
-            });
+                message:"您还未答过该词,跳过请使用ctrl+M",
+            })
         },
         skip() {
             ElMessage({
@@ -290,8 +313,14 @@ export default {
             return;
         },
         prev() {
-            this.current--;
+            if(this.current>0){
-            this.show();
+                this.current--;
+                this.show();
+            }
+            else ElMessage({
+                type:'error',
+                message:"已经是第一个单词"
+            })
         },
         showAnswer() {
             ElMessage(`答案：${this.word.word}`);
@@ -332,7 +361,10 @@ export default {
                     o += "_".repeat(this.word.word.length - n));
             e.value = o;
             e.setSelectionRange(n, n);
-            e.style.height = `${e.scrollHeight}px`;
+            e.style.height = 0;
+            setTimeout(() => {
+                e.style.height = `${e.scrollHeight}px`;
+            }, 0);
             e.focus();
         },
         audio_play() {
@@ -354,22 +386,28 @@ export default {
             this.$router.push("/");
         },
         add_to() {
-            let data = JSON.parse(localStorage.getItem(this.set_id));
+            if (this.set_id) {
-            for (let i of data) {
+                let data = JSON.parse(localStorage.getItem(this.set_id));
-                if (i.word === this.word.word) {
+                for (let i of data) {
-                    ElMessage({
+                    if (i.word === this.word.word) {
-                        message: '已经添加过该词',
+                        ElMessage({
-                        type: 'error',
+                            message: '已经添加过该词',
-                    })
+                            type: 'error',
-                    return;
+                        })
+                        return;
+                    }
                 }
+                data.push(this.word);
+                localStorage.setItem(this.set_id, JSON.stringify(data));
+                ElMessage({
+                    message: `已添加 ${this.word.word} (${this.word.type})`,
+                    type: 'success',
+                });
             }
-            data.push(this.word);
+            else ElMessage({
-            localStorage.setItem(this.set_id, JSON.stringify(data));
+                message: '请先选择单词本',
-            ElMessage({
+                type: 'error',
-                message: `已添加 ${this.word.word} (${this.word.type})`,
+            })
-                type: 'success',
-            });
             return;
         },
     },
@@ -390,7 +428,6 @@ export default {
                 return;
             }
             this.online_sets = res.data;
-            console.log(this.online_sets);
             for (let i in this.online_sets) {
                 for (let j in this.online_sets[i]) {
                     for (let k in this.online_sets[i][j]) {

src/components/manage/Editor.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="container" style="overflow: auto;">
-        <el-page-header @back="$router.push('/manage')" class="pconly">
+        <div class="colbox" style="justify-content: space-between;margin: 0 20px 0 20px;">
-            <template #content>
+            <div>{{ editing.name }} ({{ editing.id }}) </div>
-                <span class="text-large font-600 mr-3"> {{ editing.name }} ({{ editing.id }}) </span>
+            <box-icon name="x" color="var(--text-color)" style="cursor: pointer;" @click="$router.push('/manage')"></box-icon>
-            </template>
+        </div>
-        </el-page-header>
         <div class="colbox" id="main">
             <div class="rowbox">
                 <div class="card">
@@ -75,8 +74,6 @@ export default {
     name: "NoteEditor",
     data() {
         return {
-            editing: window.editing.set,
-            editingClass: window.editing.set_class_name,
             wordsets: window.wordsets,
             new_word: {
                 word: "",
@@ -173,7 +170,11 @@ export default {
 
     },
     created() {
-        this.table = JSON.parse(localStorage.getItem(this.editing.id));
+        this.editing = this.$store.state.editing.set;
+        this.editingClass = this.$store.state.editing.set_class_name;
+        if(this.editing && this.editingClass){
+            this.table = JSON.parse(localStorage.getItem(this.editing.id));
+        }
     },
 }
 </script>

src/components/manage/SetList.vue

@@ -40,9 +40,9 @@
                             </div>
                             <div class="option">
                                 <box-icon class="btn" name='edit' color="var(--text-color)"
-                                    @click="edit(wordset, class_name)"></box-icon>
+                                    @click="edit(wordset, view_class)"></box-icon>
                                 <box-icon class="btn" name='trash' color="var(--text-color)"
-                                    @click="del(class_name, wordset.id, index)"></box-icon>
+                                    @click="del(view_class, wordset.id, index)"></box-icon>
                             </div>
                         </div>
                     </div>
@@ -91,7 +91,7 @@ export default {
                 });
         },
         edit(set, set_class_name) {
-            window.editing = { set, set_class_name };
+            this.$store.state.editing = {set, set_class_name};
             this.$router.push({
                 path: "/manage/edit",
             })

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import { createStore } from 'vuex'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
@@ -7,6 +8,11 @@ import 'boxicons'
 import router from './router.js'
 
 const app = createApp(App);
+const store = createStore({
+    state(){
+    }
+});
+app.use(store);
 app.use(ElementPlus);
 app.use(router);
 app.mount('#app');