Mobile device adaptation

src/App.vue

@@ -5,17 +5,17 @@
 <script>
 
 window.htmlClasses = [];
-window.addHtmlclasses = (classname)=>{
+window.addHtmlclasses = (classname) => {
   let index = window.htmlClasses.indexOf(classname);
-  if(index===-1){
+  if (index === -1) {
     window.htmlClasses.push(classname);
     document.getElementsByTagName("html")[0].className = window.htmlClasses.join(" ");
   }
 }
-window.delHtmlclasses = (classname)=>{
+window.delHtmlclasses = (classname) => {
   let index = window.htmlClasses.indexOf(classname);
-  if(index!=-1){
+  if (index != -1) {
-    window.htmlClasses.splice(index,1);
+    window.htmlClasses.splice(index, 1);
     document.getElementsByTagName("html")[0].className = window.htmlClasses.join(" ");
   }
 }
@@ -38,13 +38,13 @@ export default {
       window.wordsets = JSON.parse(wordsets);
     } else window.wordsets = {};
     let res = localStorage.getItem("bgimg");
-    if(res){
+    if (res) {
       document.body.style.backgroundImage = `url("${res}")`;
       document.body.style.backgroundSize = "cover";
       window.addHtmlclasses("bgimged");
     }
     const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");
-    if(isDarkTheme.matches) window.addHtmlclasses("dark");
+    if (isDarkTheme.matches) window.addHtmlclasses("dark");
     isDarkTheme.addEventListener('change', (event) => {
       if (event.matches) {
         window.addHtmlclasses("dark");
@@ -57,6 +57,43 @@ export default {
 </script>
 
 <style>
+@media screen and (max-width: 500px) {
+  .pconly {
+    display: none;
+  }
+
+  @keyframes enter {
+    0% {
+      translate: 100px 0;
+      opacity: 0;
+    }
+
+    100% {
+      translate: 0 0;
+      opacity: 1;
+    }
+  }
+}
+
+@media screen and (min-width: 500px) {
+  .mbonly {
+    display: none;
+  }
+
+  @keyframes enter {
+    0% {
+      translate: 100px 0;
+      opacity: 0;
+      filter: blur(20px);
+    }
+
+    100% {
+      translate: 0 0;
+      opacity: 1;
+      filter: blur(0px);
+    }
+  }
+}
 
 html {
   --bg-color: #ffffffae;
@@ -68,19 +105,7 @@ html.dark {
   --text-color: #c0c0c0;
 }
 
-@keyframes enter {
-  0% {
-    translate: 100px 0;
-    opacity: 0;
-    filter: blur(20px);
-  }
 
-  100% {
-    translate: 0 0;
-    opacity: 1;
-    filter: blur(0px);
-  }
-}
 
 .container {
   height: calc(100%-20px);
@@ -107,23 +132,11 @@ html.dark {
   color: var(--text-color);
 }
 
-html.bgimged .card{
+html.bgimged .card {
   background-color: var(--bg-color);
   backdrop-filter: blur(15px);
 }
 
-
-.wordset {
-  border-radius: 13px;
-  padding: 20px;
-  height: 220px;
-  width: 170px;
-  box-shadow: var(--el-box-shadow);
-  margin: 20px;
-  background-color: var(--bg-color);
-  color: var(--text-color);
-}
-
 .btn {
   cursor: pointer;
 }

src/components/Home.vue

@@ -2,7 +2,7 @@
     <div id="ball"></div>
     <div class="container">
         <div id="main">
-            <div id="title">WordIn</div>
+            <div id="title"> WordIn</div>
             <div class="colbox">
                 <router-link to="/recite" class="button">
                     背诵
@@ -16,7 +16,7 @@
     <div id="setting">
         <box-icon class="btn" color="var(--text-color)" name='cog' @click="open_setting_dialog"></box-icon>
     </div>
-    <el-dialog v-model="settingVisible" title="设置">
+    <el-dialog v-model="settingVisible" title="设置" width="75%">
         <div class="title">更换自定义背景</div>
         <div class="colbox" style="margin: 10px;">
             <el-input v-model="img_url"></el-input>
@@ -55,7 +55,7 @@ export default {
         }
     },
     created() {
-        if (document.getElementsByTagName("html")[0].className.indexOf("dark")!=-1) {
+        if (document.getElementsByTagName("html")[0].className.indexOf("dark") != -1) {
             this.isdark = true;
         }
     }
@@ -63,16 +63,76 @@ export default {
 </script>
 
 <style scoped>
-.title {
+@media screen and (max-width: 500px) {
-    font-weight: 800;
+    #title {
-    color: var(--text-color);
+        font-size: 80px;
-    font-size: 35px;
+        color: var(--text-color);
-    flex-grow: 1;
+        text-shadow: #00000057 5px 5px 20px;
-    overflow: hidden;
+    }
-    text-overflow: ellipsis;
+
-    white-space: nowrap;
+    .title {
+        font-weight: 800;
+        color: var(--text-color);
+        font-size: 15px;
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    #main {
+        margin: 10px;
+        margin-top: 80px;
+    }
+
+    .colbox {
+        flex-direction: column;
+    }
+
+    .button {
+        margin-top: 30px;
+    }
+    #ball{
+        width: 750px;
+        height: 750px;
+        top: -20%;
+        right: -90%;
+    }
 }
 
+@media screen and (min-width: 500px) {
+    #title {
+        font-size: 180px;
+        color: var(--text-color);
+        text-shadow: #00000057 5px 5px 20px;
+    }
+
+    .title {
+        font-weight: 800;
+        color: var(--text-color);
+        font-size: 35px;
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    #main {
+        margin: 80px;
+    }
+
+    .button {
+        margin: 30px;
+    }
+    #ball{
+        width: 1350px;
+        height: 1350px;
+        top: -50%;
+        right: -10%;
+    }
+}
+
+
 #setting {
     position: absolute;
     right: 0;
@@ -80,12 +140,6 @@ export default {
     margin: 20px;
 }
 
-#title {
-    font-size: 180px;
-    color: var(--text-color);
-    text-shadow:  #00000057 5px 5px 20px ;
-}
-
 .button {
     width: 200px;
     height: 100px;
@@ -102,7 +156,6 @@ export default {
     backdrop-filter: blur(20px);
     cursor: pointer;
     transition: .5s;
-    margin: 30px;
     color: var(--text-color);
     text-decoration: none;
 }
@@ -119,22 +172,13 @@ html.dark .button {
 
 #ball {
     background-image: linear-gradient(120deg, #e0c3fcca 0%, #8ec5fcc4 100%);
-    width: 1350px;
-    height: 1350px;
     border-radius: 100%;
     position: absolute;
-    top: -50%;
-    right: -10%;
     animation: enter .8s ease-out;
-    box-shadow:#e0c3fcca 0px 0px 50px 10px;
+    box-shadow: #e0c3fcca 0px 0px 50px 10px;
     z-index: -1;
 }
 
-html.bgimged #ball{
+html.bgimged #ball {
     backdrop-filter: blur(20px);
-}
+}</style>
-
-#main {
-    margin: 80px;
-}
-</style>

src/components/Manage.vue

@@ -4,9 +4,11 @@
             <span class="text-large font-600 mr-3"> 编辑单词本 </span>
         </template>
     </el-page-header>
-    <router-view>
+    <div id="container">
+        <router-view>
 
-    </router-view>
+        </router-view>
+    </div>
 </template>
 
 <script>
@@ -28,5 +30,8 @@ export default {
 </script>
 
 <style scoped>
-
+    #container{
+        height: calc(100% - 64px);
+        width: 100%;
+    }
 </style>

src/components/Recite.vue

@@ -5,26 +5,46 @@
         </template>
     </el-page-header>
     <div v-if="mode === 0" id="range" class="container colbox">
+        <div class="rowbox item">
+            <div id="lastrecite" class="card">
+                <el-button style="margin-bottom: 20px;" class="tbtn" type="primary" @click="init">开始背诵</el-button><br />
+                <el-button style="margin:0;" class="tbtn" type="success" @click="last_recite">继续上一次的背诵</el-button>
+            </div>
+            <div id="online-set-container" class="card">
+                <div class="title">选择测验范围：</div>
+                <el-checkbox v-model="local.checkAll" :indeterminate="local.isIndeterminate"
+                    @change="(res) => { handleCheckAllChange(local, res) }" size="large">全选</el-checkbox>
+                <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"
+                            border>
+                            <div style="font-size: 18px;font-weight: 500;">
+                                {{ set.name }}
+                            </div>
+                        </el-checkbox>
+                    </div>
+                </el-checkbox-group>
+            </div>
+        </div>
         <div id="rangeselect" class="card item">
-            <div class="title">选择测验范围：</div>
+            <div class="title" style="font-size: 35px;">在线词库</div>
-            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
+            <el-checkbox v-model="online.checkAll" :indeterminate="online.isIndeterminate"
-                size="large">全选</el-checkbox>
+                @change="(res) => { handleCheckAllChange(online, res) }" size="large">全选</el-checkbox>
-            <el-checkbox-group v-model="checkedSets" @change="handleChange">
+            <el-checkbox-group v-model="online.checkedSets" @change="(res) => { handleChange(online, res) }">
-                <div class="set_radios" v-for="(set_class, set_class_name) in wordsets" :key="set_class_name">
+                <div class="set_radios" v-for="(set, set_name) in online_sets" :key="set_name">
-                    <p>{{ set_class_name }}</p>
+                    <div class="subtitle">{{ set_name }}</div>
-                    <el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id" size="large"
+                    <div v-for="(book, book_name) in set" :key="book_name">
-                        border>
+                        <p>{{ book_name }}</p>
-                        <div style="font-size: 18px;font-weight: 500;">
+                        <el-checkbox class="checkbox" v-for="(config, id) in book" :key="id" :label="id" size="large"
-                            {{ set.name }}
+                            border>
-                        </div>
+                            <div style="font-size: 18px;font-weight: 500;">
-                    </el-checkbox>
+                                {{ config.name }}
+                            </div>
+                        </el-checkbox>
+                    </div>
                 </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="title" style="font-size: 35px;">继续上一次的背诵</div>
-            <el-button style="margin: 20px;width: 50%;" type="primary" @click="last_recite">开始背诵</el-button>
         </div>
     </div>
     <div id="test" class="colbox" v-if="mode === 1">
@@ -36,7 +56,7 @@
             </textarea>
                 <div v-if="current < answered" class="answer">{{ word.word }}</div>
             </div>
-            <p id="explain">
+            <div id="explain">
                 <el-button v-if="current > 0" @click="prev">上一个</el-button>
                 <el-button v-if="current < answered" @click="next">下一个</el-button>
                 <el-button v-if="current === answered" @click="showAnswer">显示答案</el-button>
@@ -44,11 +64,11 @@
                 <el-button @click="terminate" type="danger">停止背诵</el-button>
                 <box-icon color="var(--text-color)" class="btn" style="margin-left: 10px;translate: 0 4px;"
                     @click="audio_play" name='volume-full'></box-icon>
-            </p>
+            </div>
             <div id="trans">{{ word.type }} {{ word.trans }}</div>
         </div>
         <div id="add-to-box" class="card">
-            <el-text class="mx-1" style="font-size: 35px;font-weight: 800;">加入至</el-text>
+            <el-text class="mx-1 title">加入至</el-text>
             <div class="colbox para">
                 <div class="mid-text">分组:</div>
                 <el-select v-model="set_class" class="m-2" placeholder="Select">
@@ -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,
-            checkedSets: [],
+            local: {
-            isIndeterminate: false,
+                allsets: [],
-            checkAll: false,
+                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,40 +353,191 @@ 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 {
+@media screen and (max-width: 500px) {
-    margin-bottom: 20px;
+    #range {
-    background-color: var(--bg-color);
+        max-height: calc(100% - 104px);
-    width: 50%;
+        flex-direction: column;
+        overflow-y: scroll;
+    }
+
+    #rangeselect {
+        height: auto;
+    }
+
+    .item {
+        margin-bottom: 20px;
+        /* background-color: var(--bg-color); */
+        width: 100%;
+    }
+
+    .title {
+        font-size: 30px;
+        font-weight: 800;
+        color: var(--text-color);
+    }
+
+    #test {
+        flex-direction: column;
+        animation: enter .5s ease-out;
+    }
+
+    #trans {
+        font-size: 25px;
+        transition: .5s;
+        margin-top: 15px;
+    }
+
+    #add-to-box {
+        width: 100%;
+    }
+
+    #explain {
+        font-size: 18px;
+        margin-top: 15px;
+    }
+
+    .el-button {
+        width: 55px;
+        height: 28px;
+        font-size: 12px;
+    }
+
+    .tbtn {
+        width: 100%;
+    }
+
+    .answer {
+        font-size: 55px;
+        letter-spacing: 15px;
+        min-height: 50px;
+        height: 55px;
+    }
+    .card{
+        box-shadow: none;
+    }
 }
 
-.title {
+@media screen and (min-width: 500px) {
-    font-size: 50px;
+    #range {
+        max-height: calc(100% - 64px);
+    }
+
+    #rangeselect {
+        max-height: 100%;
+        overflow-x: auto;
+    }
+
+    .item {
+        margin-bottom: 20px;
+        /* background-color: var(--bg-color); */
+        width: 50%;
+    }
+
+    .tbtn {
+        width: 50%;
+    }
+
+    .title {
+        font-size: 50px;
+        font-weight: 800;
+        color: var(--text-color);
+    }
+
+    #test {
+        padding: 50px;
+        animation: enter .5s ease-out;
+    }
+
+    #trans {
+        font-size: 50px;
+        transition: .5s;
+        margin-top: 10px;
+    }
+
+    #add-to-box {
+        width: 30%;
+        min-width: 200px;
+    }
+
+    #explain {
+        font-size: 25px;
+        margin-top: 20px;
+    }
+
+    .answer {
+        font-size: 70px;
+        letter-spacing: 30px;
+        min-height: 100px;
+        height: 100px;
+    }
+}
+
+.subtitle {
+    font-size: 23px;
+    line-height: 35px;
+    margin-bottom: 15px;
     font-weight: 800;
-    color: var(--text-color);
 }
 
 .checkbox {
     font-size: 30px;
+    margin-bottom: 10px;
 }
 
 #status {
@@ -310,31 +549,12 @@ export default {
     border-radius: 8px;
     background-color: var(--bg-color);
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    font-size: 70px;
-    letter-spacing: 30px;
     border: none;
     outline-style: none;
-    height: 100px;
     padding: 0;
     transition: .5s;
     resize: vertical;
     width: 100%;
-    min-height: 100px;
-}
-
-#test {
-    padding: 50px;
-    animation: enter .5s ease-out;
-}
-
-#explain {
-    font-size: 25px;
-    margin-top: 20px;
-}
-
-#trans {
-    font-size: 50px;
-    transition: .5s;
 }
 
 .set_radios {
@@ -342,26 +562,16 @@ export default {
 }
 
 .set_radios p {
-    font-size: 25px;
+    font-size: 18px;
     font-weight: 700;
     color: var(--text-color);
 }
 
-#add-to-box {
-    width: 30%;
-    min-width: 200px;
-}
-
 #lastrecite {
     max-height: 150px;
 }
 
-#range {
+#online-set-container {
-    max-height: 85%;
+    height: auto;
-}
+    overflow-y: auto;
-
+}</style>
-#rangeselect {
-    max-height: 100%;
-    overflow-x: auto;
-}
-</style>

src/components/manage/Editor.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="container" style="overflow: auto;">
-        <el-page-header @back="$router.push('/manage')">
+        <el-page-header @back="$router.push('/manage')" class="pconly">
             <template #content>
                 <span class="text-large font-600 mr-3"> {{ editing.name }} ({{ editing.id }}) </span>
             </template>
         </el-page-header>
-        <div class="colbox" style="margin-top: 20px;">
+        <div class="colbox" id="main">
             <div class="rowbox">
-                <div class="card" style="margin-bottom: 20px;">
+                <div class="card">
                     <div class="title">添加单词</div>
                     <el-input ref="input1" autofocus @change="focusnext($refs.input2)" v-model="new_word.word"></el-input>
                     <div class="colbox">
@@ -31,7 +31,7 @@
                     <el-button @click="change_name()" type="primary">更改名称</el-button>
                 </div>
             </div>
-            <div style="width: 100%;" class="card">
+            <div style="flex-grow: 1;" class="card">
                 <el-table :data="table" style="max-height: 550px;overflow: auto;border-radius: 10px;">
                     <el-table-column type="index" />
                     <el-table-column prop="word" label="单词" />
@@ -51,7 +51,7 @@
             </div>
         </div>
     </div>
-    <el-dialog v-model="word_editing">
+    <el-dialog v-model="word_editing" width="80%">
         <div class="title">修改单词</div>
         <el-input v-model="editing_word.word"></el-input>
         <div class="colbox">
@@ -76,7 +76,7 @@ export default {
     data() {
         return {
             editing: window.editing.set,
-            editingClass:window.editing.set_class_name,
+            editingClass: window.editing.set_class_name,
             wordsets: window.wordsets,
             new_word: {
                 word: "",
@@ -92,7 +92,7 @@ export default {
             options: [{ label: "adjective(adj.)", value: "adj." }, { label: "verb(v.)", value: "v." }, { label: "noun(n.)", value: "n." }, { label: "adverb(adv.)", value: "adv." }, { label: "prepositions(prep.)", value: "prep." }, { label: "phrase(phr.)", value: "phr." },],
             table: [],
             word_editing: false,
-            new_name:"",
+            new_name: "",
         }
     },
     methods: {
@@ -179,6 +179,30 @@ export default {
 </script>
 
 <style scoped>
+@media screen and (max-width: 500px) {
+    #main{
+        flex-direction: column;
+        overflow: scroll;
+    }
+    .container{
+        padding: 10px;
+        height: calc(100% - 20px);
+    }
+    .title{
+        font-size: 25px;
+        min-height: 50px;
+    }
+}
+
+@media screen and (min-width: 500px) {
+    .title{
+        font-size: 35px;
+        min-height: 60px;
+    }
+}
+
+
+
 #main-container {
     height: 87%;
 }
@@ -186,12 +210,10 @@ export default {
 .title {
     font-weight: 800;
     color: var(--text-color);
-    font-size: 35px;
     flex-grow: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    min-height: 60px;
 }
 
 
@@ -209,10 +231,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

@@ -1,27 +1,27 @@
 <template>
     <el-container id="main-container" class="container card">
         <div style="overflow: auto;">
-        <el-page-header @back="$router.push('/manage')">
+            <el-page-header @back="$router.push('/manage')">
-            <template #content>
+                <template #content>
-                <span class="text-large font-600 mr-3"> 新建单词本 </span>
+                    <span class="text-large font-600 mr-3"> 新建单词本 </span>
-            </template>
+                </template>
-        </el-page-header>
+            </el-page-header>
-        <div class="colbox">
+            <div class="colbox">
-            <div class="mid-text">名称:</div>
+                <div class="mid-text">名称:</div>
-            <el-input v-model="set_name"></el-input>
+                <el-input v-model="set_name"></el-input>
-            <div class="mid-text">分组:</div>
+                <div class="mid-text">分组:</div>
-            <el-select allow-create filterable v-model="new_set_class" class="m-2" placeholder="Select">
+                <el-select allow-create filterable v-model="new_set_class" class="m-2" placeholder="Select">
-                <el-option v-for="item in Object.keys(wordsets)" :key="item" :label="item" :value="item" />
+                    <el-option v-for="item in Object.keys(wordsets)" :key="item" :label="item" :value="item" />
-            </el-select>
+                </el-select>
+            </div>
+            <el-button style="width: 50%;margin-top: 20px;" type="primary" @click="new_wordset()">创建</el-button>
         </div>
-        <el-button style="width: 50%;" type="primary" @click="new_wordset()">创建</el-button>
-    </div>
     </el-container>
 </template>
 
 <script>
 import uuid from 'node-uuid';
-import { ElMessage} from 'element-plus';
+import { ElMessage } from 'element-plus';
 
 export default {
     name: "NewSet",
@@ -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;
         },
     }
@@ -60,7 +60,23 @@ export default {
 </script>
 
 <style scoped>
+@media screen and (max-width: 500px) {
+    .colbox {
+        flex-direction: column;
+    }
+    .colbox * {
+        margin-top: 15px;
+    }
+    .card{
+        box-shadow: none;
+    }
+}
+
 #main-container {
     height: 87%;
 }
+
+.colbox {
+    margin-top: 20px;
+}
 </style>

src/components/manage/SetList.vue

@@ -1,43 +1,57 @@
 <template>
-    <el-container id="main-container" class="container card">
+    <el-container id="main-container">
-        <el-header id="header" class="colbox">
+        <el-header id="header" style="text-align: right;">
-            <div class="no">共有{{ Object.keys(wordsets).length }}个单词集合</div>
             <div>
-                <el-button @click="export_set" type="success"><box-icon color="white" name='export'
+                <el-button @click="manage_online_wordsets" type="primary"><box-icon color="white" name='world'
-                        size="15px"></box-icon>导出</el-button>
+                        size="20px"></box-icon>管理在线单词本</el-button>
-                <el-button @click="import_set" type="warning"><box-icon color="white" name='import'
+                <el-button @click="export_set" type="success" class="pconly"><box-icon color="white" name='export'
-                        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>
+                <el-button @click="import_set" type="warning" class="pconly"><box-icon color="white" name='import'
+                        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>
-        <el-main id="wordsets-container">
+        <el-container style="height:calc(100% - 40px);">
-            <div class="colbox" if="sets-container">
+            <el-aside id="sidebar">
-                <el-collapse accordion v-model="active_set_class" style="width: 100%;border: none;">
+                <div class="sidebar-title">
-                    <el-collapse-item v-for="(set_class, class_name) in wordsets" :title="class_name" :key="class_name"
+                    |本地
-                        :name="class_name">
+                </div>
-                        <div class="colbox wordclass">
+                <div v-for="(set_class, class_name) in wordsets" :title="class_name" :key="class_name"
-                            <div v-for="(wordset, index) in set_class" :key="index" class="wordset rowbox">
+                    @click="view(class_name)" class="sidebar-item">
-                                <div class="no">
+                    {{ class_name }}
-                                    {{ index + 1 }}
+                </div>
-                                </div>
+                <div class="sidebar-title">
-                                <div class="title">
+                    |在线
-                                    {{ wordset.name }}
+                </div>
-                                </div>
+            </el-aside>
-                                <div style="font-size: 17px;font-weight: 200;">
+            <el-main id="wordsets-container">
-                                    创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
+                <div id="sets-container">
-                                </div>
+                    <div class="colbox wordclass">
-                                <div class="option">
+                        <div v-for="(wordset, index) in wordsets[view_class]" :key="index" class="wordset rowbox">
-                                    <box-icon class="btn" name='edit' color="var(--text-color)"
+                            <div class="no">
-                                        @click="edit(wordset, class_name)"></box-icon>
+                                {{ index + 1 }}
-                                    <box-icon class="btn" name='trash' color="var(--text-color)"
+                            </div>
-                                        @click="del(class_name, wordset.id, index)"></box-icon>
+                            <div class="title">
-                                </div>
+                                {{ wordset.name }}
+                            </div>
+                            <div class="created-date">
+                                创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
+                            </div>
+                            <div class="option">
+                                <box-icon class="btn" name='edit' color="var(--text-color)"
+                                    @click="edit(wordset, class_name)"></box-icon>
+                                <box-icon class="btn" name='trash' color="var(--text-color)"
+                                    @click="del(class_name, wordset.id, index)"></box-icon>
                             </div>
                         </div>
-                    </el-collapse-item>
+                    </div>
-                </el-collapse>
+                </div>
-            </div>
+                <div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
-        </el-main>
+                    <box-icon name='list-ul' color="var(--text-color)"></box-icon>
+                </div>
+            </el-main>
+        </el-container>
     </el-container>
 </template>
 
@@ -48,11 +62,22 @@ export default {
     name: "SetList",
     data() {
         return {
-            wordsets:window.wordsets,
+            wordsets: window.wordsets,
-            active_set_class: "",
+            view_class: "",
         }
     },
-    methods:{
+    methods: {
+        view(classname) {
+            this.view_class = classname;
+            let node = document.getElementById("wordsets-container").style;
+            node.animation = "";
+            setTimeout(() => {
+                node.animation = "enter ease-out .6s backwards";
+            }, 0);
+        },
+        manage_online_wordsets() {
+            window.location.href = '/dashboard';
+        },
         del(set_class_name, id, index) {
             ElMessageBox.confirm("确定要删除吗？")
                 .then(() => {
@@ -66,9 +91,9 @@ export default {
                 });
         },
         edit(set, set_class_name) {
-            window.editing = {set,set_class_name};
+            window.editing = { set, set_class_name };
             this.$router.push({
-                path:"/manage/edit",
+                path: "/manage/edit",
             })
         },
         async export_set() {
@@ -126,25 +151,204 @@ export default {
                 title: "添加成功",
                 message: `已添加 ${cnt} 本单词本`
             });
+        },
+        taggle_sidebar(){
+            let node = document.getElementById("sidebar");
+            if(node.style.width === "180px") node.style.width = "0";
+            else node.style.width = "180px";
+            return;
         }
     },
     created() {
-        this.active_set_class = Object.keys(this.wordsets)[0];
+        let first_set = Object.keys(this.wordsets)[0];
+        if (first_set) {
+            setTimeout(() => {
+                this.view(first_set);
+            }, 0);
+        }
     }
 }
 </script>
 
 <style scoped>
-.title {
+@media screen and (max-width: 500px) {
-    font-weight: 800;
+    @keyframes sidebar-enter {
-    color: var(--text-color);
+        0% {
-    font-size: 35px;
+            translate: -100px 0;
-    flex-grow: 1;
+            opacity: 0;
-    overflow: hidden;
+        }
-    text-overflow: ellipsis;
+
-    white-space: nowrap;
+        100% {
-    min-height: 60px;
+            translate: 0 0;
+            opacity: 1;
+        }
+    }
+
+    #sidebar {
+        width: 0;
+        transition: .5s;
+    }
+
+    .wordset {
+        border-radius: 13px;
+        padding: 10px;
+        height: 180px;
+        width: 40%;
+        box-shadow: var(--el-box-shadow);
+        margin: 5px;
+        background-color: var(--bg-color);
+        color: var(--text-color);
+    }
+
+    .no {
+        font-size: 14px;
+        font-weight: 700;
+    }
+
+    .title {
+        font-weight: 800;
+        color: var(--text-color);
+        font-size: 30px;
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-height: 60px;
+    }
+
+    .created-date {
+        font-size: 12px;
+        font-weight: 200;
+        height: 45px;
+    }
+
+    .wordset .option {
+        opacity: 1;
+    }
+
+    #show-sidebar {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border-radius: 100%;
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        bottom: 20px;
+        left: 20px;
+        color: var(--text-color);
+        box-shadow: var(--el-box-shadow);
+        background-color: var(--bg-color);
+        cursor: pointer;
+        backdrop-filter: blur(10px);
+    }
+    #wordsets-container{
+        width: 100%;
+        display: flex;
+    }
+    #sets-container{
+        width: 100%;
+    }
 }
+
+@media screen and (min-width: 500px) {
+    @keyframes sidebar-enter {
+        0% {
+            translate: -100px 0;
+            opacity: 0;
+            filter: blur(20px);
+        }
+
+        100% {
+            translate: 0 0;
+            opacity: 1;
+            filter: blur(0px);
+        }
+    }
+
+    #sidebar {
+        width: 180px;
+    }
+
+    .wordset {
+        border-radius: 13px;
+        padding: 20px;
+        height: 220px;
+        width: 170px;
+        box-shadow: var(--el-box-shadow);
+        margin: 20px;
+        background-color: var(--bg-color);
+        color: var(--text-color);
+    }
+
+    .no {
+        font-size: 20px;
+        font-weight: 700;
+    }
+
+    .title {
+        font-weight: 800;
+        color: var(--text-color);
+        font-size: 35px;
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-height: 60px;
+    }
+
+    .created-date {
+        font-size: 17px;
+        font-weight: 200;
+    }
+
+    .wordset:hover .option {
+        opacity: 1;
+    }
+}
+
+
+
+#sidebar {
+    background-color: var(--bg-color);
+    border-radius: 0 5px 5px 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    animation: sidebar-enter ease-out .6s backwards;
+}
+
+.sidebar-title {
+    width: 100%;
+    font-size: 25px;
+    line-height: 60px;
+    padding-left: 5px;
+    font-weight: 800;
+    letter-spacing: 3px;
+}
+
+html.bgimged #sidebar {
+    backdrop-filter: blur(10px);
+}
+
+html.bgimged .wordset {
+    backdrop-filter: blur(10px);
+}
+
+.sidebar-item {
+    margin-left: 10px;
+    width: 100%;
+    font-size: 20px;
+    line-height: 50px;
+    padding-left: 5px;
+    cursor: pointer;
+    transition: .5s;
+}
+
+.sidebar-item:hover {
+    background-color: #00000033;
+}
+
 .option {
     display: flex;
     justify-content: space-around;
@@ -152,28 +356,21 @@ export default {
     transition: .5s;
 }
 
-.wordset:hover .option{
-    opacity: 1;
-}
-
 #header {
     /* border-bottom: solid 1px #bcbcbc; */
     justify-content: space-between;
     height: 40px;
 }
 
-.no {
-    font-size: 20px;
-    font-weight: 700;
-}
-
 #wordsets-container {
     overflow-x: auto;
     height: 100%;
+    position: relative;
 }
 
 #main-container {
-    height: 87%;
+    height: 100%;
+    width: 100%;
 }
 
 .wordclass {
@@ -183,4 +380,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>

vue.config.js

@@ -3,6 +3,6 @@ module.exports = defineConfig({
   transpileDependencies: true,
   publicPath:"./",
   devServer: {
-    proxy: 'http://localhost:3000'
+    proxy: 'https://localhost:443'
   }
 })