online functions

src/components/Recite.vue

@@ -7,9 +7,9 @@
     <div v-if="mode === 0" id="range" class="container colbox">
         <div id="rangeselect" class="card item">
             <div class="title">选择测验范围：</div>
-            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
+            <el-checkbox v-model="local.checkAll" :indeterminate="local.isIndeterminate"
-                size="large">全选</el-checkbox>
+                @change="(res) => { handleCheckAllChange(local, res) }" size="large">全选</el-checkbox>
-            <el-checkbox-group v-model="checkedSets" @change="handleChange">
+            <el-checkbox-group v-model="local.checkedSets" @change="(res) => { handleChange(local, res) }">
                 <div class="set_radios" v-for="(set_class, set_class_name) in wordsets" :key="set_class_name">
                     <p>{{ set_class_name }}</p>
                     <el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id" size="large"
@@ -20,11 +20,31 @@
                     </el-checkbox>
                 </div>
             </el-checkbox-group>
-            <el-button style="margin: 20px;width: 50%;" type="primary" @click="init">开始背诵</el-button>
         </div>
-        <div id="lastrecite" class="card item">
+        <div class="rowbox item">
-            <div class="title" style="font-size: 35px;">继续上一次的背诵</div>
+            <div id="lastrecite" class="card">
-            <el-button style="margin: 20px;width: 50%;" type="primary" @click="last_recite">开始背诵</el-button>
+                <el-button style="margin-bottom: 20px;width: 50%;" type="primary" @click="init">开始背诵</el-button><br />
+                <el-button style="margin:0;width: 50%;" type="success" @click="last_recite">继续上一次的背诵</el-button>
+            </div>
+            <div id="online-set-container" class="card">
+                <div class="title" style="font-size: 35px;">在线词库</div>
+                <el-checkbox v-model="online.checkAll" :indeterminate="online.isIndeterminate"
+                    @change="(res) => { handleCheckAllChange(online, res) }" size="large">全选</el-checkbox>
+                <el-checkbox-group v-model="online.checkedSets" @change="(res) => { handleChange(online, res) }">
+                    <div class="set_radios" v-for="(set, set_name) in online_sets" :key="set_name">
+                        <div class="subtitle">{{ set_name }}</div>
+                        <div v-for="(book, book_name) in set" :key="book_name">
+                            <p>{{ book_name }}</p>
+                            <el-checkbox class="checkbox" v-for="(config, id) in book" :key="id" :label="id" size="large"
+                                border>
+                                <div style="font-size: 18px;font-weight: 500;">
+                                    {{ config.name }}
+                                </div>
+                            </el-checkbox>
+                        </div>
+                    </div>
+                </el-checkbox-group>
+            </div>
         </div>
     </div>
     <div id="test" class="colbox" v-if="mode === 1">
@@ -67,6 +87,7 @@
 </template>
 
 <script>
+import axios from 'axios';
 import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
 import { nextTick } from 'vue';
 
@@ -75,11 +96,19 @@ export default {
     data() {
         return {
             mode: 0,
-            allsets: [],
             wordsets: window.wordsets,
+            local: {
+                allsets: [],
                 checkedSets: [],
                 isIndeterminate: false,
                 checkAll: false,
+            },
+            online: {
+                allsets: [],
+                checkedSets: [],
+                isIndeterminate: false,
+                checkAll: false,
+            },
             testWords: [],
             seq: [],
             total: 0,
@@ -88,20 +117,31 @@ export default {
             word: {},
             set_class: "",
             set_id: "",
+            online_sets: {},
+            online_ids: {}
         };
     },
     methods: {
-        handleCheckAllChange(val) {
+        key_listener(e) {
-            this.checkedSets = val ? this.allsets : [];
+            if (this.mode === 1) {
-            this.isIndeterminate = false;
+                let ctrlKey = e.ctrlKey || e.metaKey;
+                if (ctrlKey && e.key === 'b') {
+                    this.showAnswer();
+                }
+                e.preventDefault();
+                return;
+            }
         },
-        handleChange(value) {
+        handleCheckAllChange(range, val) {
-            console.log(this.checkedSets);
+            range.checkedSets = val ? range.allsets : [];
-            this.checkAll = value.length === this.allsets.length;
+            range.isIndeterminate = false;
-            this.isIndeterminate = value.length > 0 && value.length < this.allsets.length;
         },
-        init() {
+        handleChange(range, value) {
-            if (this.checkedSets.length <= 0) {
+            range.checkAll = value.length === range.allsets.length;
+            range.isIndeterminate = value.length > 0 && value.length < range.allsets.length;
+        },
+        async init() {
+            if (this.local.checkedSets.length + this.online.checkedSets.length <= 0) {
                 ElMessage({
                     message: "请至少选择一个单词本",
                     type: "error"
@@ -110,14 +150,34 @@ export default {
             }
             let seed = (new Date()).getTime();
             this.testWords = [];
-            for (let i of this.checkedSets) {
+            for (let i of this.local.checkedSets) {
                 let words = JSON.parse(localStorage.getItem(i));
                 this.testWords = this.testWords.concat(...words);
             }
+            for (let i of this.online.checkedSets) {
+                let config = this.online_ids[i];
+                let res = await axios.get("/wordset/detail", {
+                    params: {
+                        set: config.set,
+                        book: config.book,
+                        id: i
+                    }
+                })
+                if (res.status != 200) {
+                    ElMessage({
+                        message: "获取单词本时出现错误",
+                        type: "error"
+                    });
+                    return;
+                }
+                this.testWords = this.testWords.concat(...res.data);
+            }
             localStorage.setItem("lastrecite", JSON.stringify({
-                checkedSets: this.checkedSets,
+                checkedSets: this.local.checkedSets,
+                onlineSets: this.online.checkedSets,
                 seed: seed
             }))
+            console.log(this.testWords);
             this.total = this.testWords.length;
             if (this.total === 0) {
                 ElMessage({
@@ -138,7 +198,7 @@ export default {
                 this.show();
             });
         },
-        last_recite() {
+        async last_recite() {
             let lr = JSON.parse(localStorage.getItem("lastrecite"));
             if (!lr) {
                 ElMessage({
@@ -158,6 +218,35 @@ export default {
                     });
                     return;
                 }
+            }
+            for (let i of lr.onlineSets) {
+                let config = this.online_ids[i];
+                if (config) {
+                    let res = await axios.get("/wordset/detail", {
+                        params: {
+                            set: config.set,
+                            book: config.book,
+                            id: i
+                        }
+                    })
+                    if (res.status != 200) {
+                        ElMessage({
+                            message: "获取单词本时出现错误",
+                            type: "error"
+                        });
+                        return;
+                    }
+                    this.testWords = this.testWords.concat(...res.data);
+                }
+                else {
+                    ElMessage({
+                        message: "在线单词本不存在",
+                        type: "error"
+                    });
+                    return;
+                }
+
+
             }
             this.total = this.testWords.length;
             let arr = Array.from(new Array(this.total).keys());
@@ -207,7 +296,6 @@ export default {
         },
         show() {
             this.word = this.testWords[this.seq[this.current]];
-            console.log(this.word);
             if (this.current === this.answered) {
                 let e = document.getElementById("input");
                 e.value = "_".repeat(this.word.word.length);
@@ -265,29 +353,65 @@ export default {
         },
         add_to() {
             let data = JSON.parse(localStorage.getItem(this.set_id));
+            for (let i of data) {
+                if (i.word === this.word.word) {
+                    ElMessage({
+                        message: '已经添加过该词',
+                        type: 'error',
+                    })
+                    return;
+                }
+            }
             data.push(this.word);
             localStorage.setItem(this.set_id, JSON.stringify(data));
-            return ElMessage({
+            ElMessage({
                 message: `已添加 ${this.word.word} (${this.word.type})`,
                 type: 'success',
             });
-        }
+            return;
+        },
     },
     created() {
         for (let i of Object.values(window.wordsets)) {
             for (let j of i) {
-                this.allsets.push(j.id);
+                this.local.allsets.push(j.id);
             }
         }
-        console.log(this.allsets);
+        document.addEventListener('keyup', this.key_listener);
+        axios.get("/wordset/list").then((res, err) => {
+            if (err) {
+                console.log(err);
+                ElMessage({
+                    message: "在线词库加载失败",
+                    type: "error"
+                })
+                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]) {
+                        this.online.allsets.push(k);
+                        this.online_ids[k] = {
+                            set: i,
+                            book: j
+                        }
+                    }
+                }
+            }
+        })
     },
+    beforeUnmount() {
+        document.removeEventListener("keyup", this.key_listener);
+    }
 }
 </script>
 
 <style scoped>
 .item {
     margin-bottom: 20px;
-    background-color: var(--bg-color);
+    /* background-color: var(--bg-color); */
     width: 50%;
 }
 
@@ -297,8 +421,16 @@ export default {
     color: var(--text-color);
 }
 
+.subtitle {
+    font-size: 23px;
+    line-height: 35px;
+    margin-bottom: 15px;
+    font-weight: 800;
+}
+
 .checkbox {
     font-size: 30px;
+    margin-bottom: 10px;
 }
 
 #status {
@@ -342,7 +474,7 @@ export default {
 }
 
 .set_radios p {
-    font-size: 25px;
+    font-size: 18px;
     font-weight: 700;
     color: var(--text-color);
 }
@@ -364,4 +496,9 @@ export default {
     max-height: 100%;
     overflow-x: auto;
 }
+
+#online-set-container {
+    height: auto;
+    overflow-y: auto;
+}
 </style>

src/components/manage/Editor.vue

@@ -209,10 +209,8 @@ export default {
     border-radius: 8px;
 }
 
-
+.el-table{
-.el-collapse {
+    --el-table-bg-color:#FFFFFF00;
-    --el-collapse-header-bg-color: #FFFFFF00;
+    --el-table-tr-bg-color:#FFFFFF00;
-    --el-collapse-content-bg-color: #FFFFFF00;
-    --el-collapse-header-font-size: 18px;
 }
 </style>

src/components/manage/NewSet.vue

@@ -14,7 +14,7 @@
                     <el-option v-for="item in Object.keys(wordsets)" :key="item" :label="item" :value="item" />
                 </el-select>
             </div>
-        <el-button style="width: 50%;" type="primary" @click="new_wordset()">创建</el-button>
+            <el-button style="width: 50%;margin-top: 20px;" type="primary" @click="new_wordset()">创建</el-button>
         </div>
     </el-container>
 </template>
@@ -52,7 +52,7 @@ export default {
             });
             localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
             localStorage.setItem(id, JSON.stringify([]));
-            this.mode = 0;
+            this.$router.push('/manage');
             return;
         },
     }
@@ -63,4 +63,7 @@ export default {
 #main-container {
     height: 87%;
 }
+.colbox{
+    margin-top: 20px;
+}
 </style>

src/components/manage/SetList.vue

@@ -3,10 +3,11 @@
         <el-header id="header" class="colbox">
             <div class="no">共有{{ Object.keys(wordsets).length }}个单词集合</div>
             <div>
+                <el-button @click="manage_online_wordsets" type="primary"><box-icon color="white" name='world' size="20px"></box-icon>管理在线单词本</el-button>
                 <el-button @click="export_set" type="success"><box-icon color="white" name='export'
-                        size="15px"></box-icon>导出</el-button>
+                        size="18px"></box-icon>导出</el-button>
                 <el-button @click="import_set" type="warning"><box-icon color="white" name='import'
-                        size="15px"></box-icon>导入</el-button>
+                        size="18px"></box-icon>导入</el-button>
                 <el-button @click="$router.push('/manage/new')" type="primary"><box-icon color="white" name='plus'></box-icon>新建单词本</el-button>
             </div>
         </el-header>
@@ -53,6 +54,9 @@ export default {
         }
     },
     methods:{
+        manage_online_wordsets(){
+            window.location.href='/dashboard';
+        },
         del(set_class_name, id, index) {
             ElMessageBox.confirm("确定要删除吗？")
                 .then(() => {
@@ -183,4 +187,10 @@ export default {
 .card div {
     margin-bottom: 10px;
 }
+
+.el-collapse {
+    --el-collapse-header-bg-color: #FFFFFF00;
+    --el-collapse-content-bg-color: #FFFFFF00;
+    --el-collapse-header-font-size: 18px;
+}
 </style>