From 36891a901af8de9b0f788a76e11a4c8b154ada8e Mon Sep 17 00:00:00 2001
From: cast1e <rooger233@gmail.com>
Date: Fri, 5 Jan 2024 21:01:52 +0800
Subject: [PATCH] css bug fixes

---
 src/App.vue                       |   6 +-
 src/components/Manage.vue         |  17 +--
 src/components/Recite.vue         | 217 +++++++++++++++++-------------
 src/components/manage/Display.vue |  89 ++++++++++++
 src/components/manage/Editor.vue  |  31 +++--
 src/components/manage/NewSet.vue  |  17 ++-
 src/components/manage/SetList.vue | 116 ++++++++++++----
 src/router.js                     |   4 +-
 8 files changed, 337 insertions(+), 160 deletions(-)
 create mode 100644 src/components/manage/Display.vue

diff --git a/src/App.vue b/src/App.vue
index 18049e9..bbad2e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <router-view></router-view>
+  <router-view style="margin-top: 10px;"></router-view>
 </template>
 
 <script>
@@ -108,8 +108,8 @@ html.dark {
 
 
 .container {
-  height: calc(100%-20px);
-  width: calc(100%-20px);
+  height: calc(100% - 20px);
+  width: calc(100% - 20px);
   padding: 20px;
   animation: enter ease-out .6s backwards;
 }
diff --git a/src/components/Manage.vue b/src/components/Manage.vue
index c5f638f..f762995 100644
--- a/src/components/Manage.vue
+++ b/src/components/Manage.vue
@@ -1,9 +1,4 @@
 <template>
-    <el-page-header style="margin:20px" @back="back_home">
-        <template #content>
-            <span class="text-large font-600 mr-3"> 编辑单词本 </span>
-        </template>
-    </el-page-header>
     <div id="container">
         <router-view>
 
@@ -15,23 +10,13 @@
 
 export default {
     name: "SetManage",
-    data() {
-        return {
-            
-        }
-    },
-    methods: {
-        back_home() {
-            this.$router.push("/");
-        },
-    },
     
 }
 </script>
 
 <style scoped>
     #container{
-        height: calc(100% - 64px);
+        height: 100%;
         width: 100%;
     }
 </style>
diff --git a/src/components/Recite.vue b/src/components/Recite.vue
index 9447ab4..c38b295 100644
--- a/src/components/Recite.vue
+++ b/src/components/Recite.vue
@@ -1,89 +1,98 @@
 <template>
-    <el-page-header style="margin:20px" @back="back_home">
-        <template #content>
-            <span class="text-large font-600 mr-3"> 背诵 </span>
-        </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 class="rowbox item">
-            <div id="rangeselect" 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 v-if="mode === 0" class="wrapper">
+        <el-page-header style="margin-top:20px;margin-left:20px" @back="back_home">
+            <template #content>
+                <span class="text-large font-600 mr-3"> 选择范围 </span>
+            </template>
+        </el-page-header>
+        <div 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;">
-                                    {{ config.name }}
+                                    {{ set.name }}
                                 </div>
                             </el-checkbox>
                         </div>
-                    </div>
-                </el-checkbox-group>
+                    </el-checkbox-group>
+                </div>
+            </div>
+            <div class="rowbox item">
+                <div id="rangeselect" class="card">
+                    <div class="title">在线词库</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>
-    <div id="test" class="colbox" v-if="mode === 1">
-        <div style="flex-grow: 1;" class="card">
-            <div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
-            <div>
-                <textarea autofocus id="input" v-if="current === answered" @input="change" class="answer"
-                    spellcheck="false">
-            </textarea>
-                <div v-if="current < answered" class="answer">{{ word.word }}</div>
+    <div v-if="mode === 1">
+        <el-page-header style="margin-top:20px;margin-left:20px" @back="mode = 0">
+            <template #content>
+                <span class="text-large font-600 mr-3"> 背诵 </span>
+            </template>
+        </el-page-header>
+        <div id="test" class="colbox">
+            <div style="flex-grow: 1;" class="card">
+                <div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
+                <div>
+                    <textarea autofocus id="input" v-if="current === answered" @input="change" class="answer"
+                        spellcheck="false">
+                    </textarea>
+                    <div v-if="current < answered" class="answer">{{ word.word }}</div>
+                </div>
+                <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>
+                    <el-button v-if="current === answered" type="warning" @click="skip">跳过</el-button>
+                    <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>
+                </div>
+                <div id="trans">{{ word.type }} {{ word.trans }}</div>
             </div>
-            <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>
-                <el-button v-if="current === answered" type="warning" @click="skip">跳过</el-button>
-                <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>
+            <div id="add-to-box" class="card">
+                <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">
+                        <el-option v-for="item in Object.keys(wordsets)" :key="item" :label="item" :value="item" />
+                    </el-select>
+                </div>
+                <div class="colbox para">
+                    <div class="mid-text">单词本:</div>
+                    <el-select v-model="set_id" class="m-2" placeholder="Select">
+                        <el-option v-for="item in wordsets[set_class]" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </div>
+                <el-button @click="add_to" type="primary">添加</el-button>
             </div>
-            <div id="trans">{{ word.type }} {{ word.trans }}</div>
-        </div>
-        <div id="add-to-box" class="card">
-            <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">
-                    <el-option v-for="item in Object.keys(wordsets)" :key="item" :label="item" :value="item" />
-                </el-select>
-            </div>
-            <div class="colbox para">
-                <div class="mid-text">单词本:</div>
-                <el-select v-model="set_id" class="m-2" placeholder="Select">
-                    <el-option v-for="item in wordsets[set_class]" :key="item.id" :label="item.name" :value="item.id" />
-                </el-select>
-            </div>
-            <el-button @click="add_to" type="primary">添加</el-button>
         </div>
     </div>
 </template>
@@ -291,6 +300,8 @@ export default {
                         title: "Congratulations!",
                         type: "success"
                     })
+                    localStorage.removeItem("lastrecite");
+                    localStorage.removeItem("lastcurrent");
                     return;
                 }
                 nextTick(() => {
@@ -298,8 +309,8 @@ export default {
                 });
             }
             else ElMessage({
-                type:"error",
-                message:"您还未答过该词,跳过请使用ctrl+M",
+                type: "error",
+                message: "您还未答过该词,跳过请使用ctrl+M",
             })
         },
         skip() {
@@ -313,13 +324,13 @@ export default {
             return;
         },
         prev() {
-            if(this.current>0){
+            if (this.current > 0) {
                 this.current--;
                 this.show();
             }
             else ElMessage({
-                type:'error',
-                message:"已经是第一个单词"
+                type: 'error',
+                message: "已经是第一个单词"
             })
         },
         showAnswer() {
@@ -331,7 +342,10 @@ export default {
                 let e = document.getElementById("input");
                 e.value = "_".repeat(this.word.word.length);
                 e.setSelectionRange(0, 0);
-                e.style.height = `${e.scrollHeight}px`;
+                e.style.height = "0";
+                setTimeout(() => {
+                    e.style.height = `${e.scrollHeight}px`;
+                }, 200);
             }
         },
         change() {
@@ -353,18 +367,23 @@ export default {
                     title: "Error",
                     message: "错误",
                     type: "error"
-                }),
-                    o = "_".repeat(this.word.word.length);
+                });
+                o = "_".repeat(this.word.word.length);
                 n = 0;
+                e.style.height = "0";
+                setTimeout(() => {
+                    e.style.height = `${e.scrollHeight}px`;
+                }, 200);
             } else
                 n == -1 ? o = "_".repeat(this.word.word.length) : (o = t.substring(0, n),
                     o += "_".repeat(this.word.word.length - n));
             e.value = o;
             e.setSelectionRange(n, n);
-            e.style.height = 0;
             setTimeout(() => {
-                e.style.height = `${e.scrollHeight}px`;
-            }, 0);
+                if (parseInt(e.style.height) < e.scrollHeight) {
+                    e.style.height = `${e.scrollHeight}px`;
+                }
+            },0);
             e.focus();
         },
         audio_play() {
@@ -450,7 +469,7 @@ export default {
 <style scoped>
 @media screen and (max-width: 500px) {
     #range {
-        max-height: calc(100% - 104px);
+        max-height: calc(100% - 40px);
         flex-direction: column;
         overflow-y: scroll;
     }
@@ -460,7 +479,6 @@ export default {
     }
 
     .item {
-        margin-bottom: 20px;
         /* background-color: var(--bg-color); */
         width: 100%;
     }
@@ -482,10 +500,6 @@ export default {
         margin-top: 15px;
     }
 
-    #add-to-box {
-        width: 100%;
-    }
-
     #explain {
         font-size: 18px;
         margin-top: 15px;
@@ -521,7 +535,7 @@ export default {
 
 @media screen and (min-width: 500px) {
     #range {
-        max-height: calc(100% - 64px);
+        height: 100%;
     }
 
     #rangeselect {
@@ -540,18 +554,18 @@ export default {
     }
 
     .title {
-        font-size: 50px;
+        font-size: 35px;
         font-weight: 800;
         color: var(--text-color);
     }
 
     #test {
-        padding: 50px;
+        padding: 30px;
         animation: enter .5s ease-out;
     }
 
     #trans {
-        font-size: 50px;
+        font-size: 43px;
         transition: .5s;
         margin-top: 10px;
     }
@@ -579,6 +593,15 @@ export default {
     }
 }
 
+.wrapper {
+    height: calc(100% - 10px);
+}
+
+.container {
+    padding: 10px;
+    height: calc(100% - 50px);
+}
+
 .subtitle {
     font-size: 23px;
     line-height: 35px;
diff --git a/src/components/manage/Display.vue b/src/components/manage/Display.vue
new file mode 100644
index 0000000..ab8e8dc
--- /dev/null
+++ b/src/components/manage/Display.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="container" style="overflow: auto;">
+        <el-page-header style="margin: 10px;" @back="this.$router.push('/manage');">
+                <template #content>
+                    <span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
+                </template>
+        </el-page-header>
+        <div class="colbox" id="main">
+            <div style="flex-grow: 1;" class="card">
+                <el-table :data="table" style="height:calc(100% - 10px);overflow: auto;border-radius: 10px;">
+                    <el-table-column type="index" />
+                    <el-table-column prop="word" label="单词" />
+                    <el-table-column prop="type" label="词性" />
+                    <el-table-column prop="trans" label="翻译" />
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import axios from 'axios';
+
+export default {
+    name: "NoteEditor",
+    data() {
+        return {
+            table: [],
+        }
+    },
+    created() {
+        this.set = this.$route.query.set;
+        this.book = this.$route.query.book;
+        this.id = this.$route.query.id;
+        if (this.set && this.book && this.id) {
+            axios.get("./wordset/detail", {
+                params:{
+                    set: this.set, book: this.book, id: this.id
+                }
+            }).then(
+                (res) => {
+                    this.table = res.data;
+                }
+            );
+        }
+    },
+}
+</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;
+    }
+}
+
+.container {
+    padding: 10px;
+    padding-top: 0;
+}
+
+#main{
+    height: calc(100% - 50px);
+}
+
+.el-table {
+    --el-table-bg-color: #FFFFFF00;
+    --el-table-tr-bg-color: #FFFFFF00;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/manage/Editor.vue b/src/components/manage/Editor.vue
index fafb9ca..0172896 100644
--- a/src/components/manage/Editor.vue
+++ b/src/components/manage/Editor.vue
@@ -1,9 +1,10 @@
 <template>
     <div class="container" style="overflow: auto;">
-        <div class="colbox" style="justify-content: space-between;margin: 0 20px 0 20px;">
-            <div>{{ editing.name }} ({{ editing.id }}) </div>
-            <box-icon name="x" color="var(--text-color)" style="cursor: pointer;" @click="$router.push('/manage')"></box-icon>
-        </div>
+        <el-page-header style="margin: 10px;" @back="this.$router.push('/manage');">
+                <template #content>
+                    <span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
+                </template>
+        </el-page-header>
         <div class="colbox" id="main">
             <div class="rowbox">
                 <div class="card">
@@ -170,10 +171,10 @@ export default {
 
     },
     created() {
-        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));
+        this.name = this.$route.query.name;
+        this.id = this.$route.query.id;
+        if(this.name && this.id){
+            this.table = JSON.parse(localStorage.getItem(this.id));
         }
     },
 }
@@ -185,10 +186,7 @@ export default {
         flex-direction: column;
         overflow: scroll;
     }
-    .container{
-        padding: 10px;
-        height: calc(100% - 20px);
-    }
+    
     .title{
         font-size: 25px;
         min-height: 50px;
@@ -200,9 +198,16 @@ export default {
         font-size: 35px;
         min-height: 60px;
     }
+
+    .container{
+        padding: 10px;
+        height: 100%;
+    }   
 }
 
-
+#main{
+    height: calc(100% - 50px);
+}
 
 #main-container {
     height: 87%;
diff --git a/src/components/manage/NewSet.vue b/src/components/manage/NewSet.vue
index f1125eb..093ce98 100644
--- a/src/components/manage/NewSet.vue
+++ b/src/components/manage/NewSet.vue
@@ -1,11 +1,11 @@
 <template>
+    <el-page-header style="margin: 20px;" @back="$router.push('/manage')">
+        <template #content>
+            <span class="text-large font-600 mr-3"> 新建单词本 </span>
+        </template>
+    </el-page-header>
     <el-container id="main-container" class="container card">
         <div style="overflow: auto;">
-            <el-page-header @back="$router.push('/manage')">
-                <template #content>
-                    <span class="text-large font-600 mr-3"> 新建单词本 </span>
-                </template>
-            </el-page-header>
             <div class="colbox">
                 <div class="mid-text">名称:</div>
                 <el-input v-model="set_name"></el-input>
@@ -64,16 +64,19 @@ export default {
     .colbox {
         flex-direction: column;
     }
+
     .colbox * {
         margin-top: 15px;
     }
-    .card{
+
+    .card {
         box-shadow: none;
     }
 }
 
 #main-container {
-    height: 87%;
+    height: calc(100% - 80px);
+    width: calc(100% - 20px);
 }
 
 .colbox {
diff --git a/src/components/manage/SetList.vue b/src/components/manage/SetList.vue
index 7ffb9c2..efa92a8 100644
--- a/src/components/manage/SetList.vue
+++ b/src/components/manage/SetList.vue
@@ -1,18 +1,30 @@
 <template>
     <el-container id="main-container">
-        <el-header id="header" style="text-align: right;">
-            <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" class="pconly"><box-icon color="white" name='export'
-                        size="18px"></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>
+        <el-header id="header" style="">
+            <el-page-header style="margin: 10px;" @back="this.$router.push('/');">
+                <template #content>
+                    <span class="text-large font-600 mr-3"> 编辑单词本 </span>
+                </template>
+                <template #extra>
+                    <div class="pconly">
+                        <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="18px"></box-icon>导出</el-button>
+                        <el-button @click="import_set" type="warning"><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>
+                </template>
+            </el-page-header>
+            <div class="mbonly">
+                <el-button  @click="$router.push('/manage/new')" type="primary"><box-icon color="white"
+                                name='plus'></box-icon>新建单词本</el-button>
             </div>
         </el-header>
         <el-container style="height:calc(100% - 40px);">
+            
             <el-aside id="sidebar">
                 <div class="sidebar-title">
                     |本地
@@ -24,11 +36,17 @@
                 <div class="sidebar-title">
                     |在线
                 </div>
+                <div v-for="set in Object.keys(online_wordsets)" :key="set">
+                    <div v-for="(set_class, class_name) in online_wordsets[set]" :title="class_name" :key="class_name"
+                        @click="view_online(set, class_name)" class="sidebar-item">
+                        {{ class_name }}
+                    </div>
+                </div>
             </el-aside>
             <el-main id="wordsets-container">
                 <div id="sets-container">
-                    <div class="colbox wordclass">
-                        <div v-for="(wordset, index) in wordsets[view_class]" :key="index" class="wordset rowbox">
+                    <div v-if="mode === 0" class="colbox wordclass">
+                        <div v-for="(wordset, index) in view_wordsets" :key="index" class="wordset rowbox">
                             <div class="no">
                                 {{ index + 1 }}
                             </div>
@@ -40,12 +58,26 @@
                             </div>
                             <div class="option">
                                 <box-icon class="btn" name='edit' color="var(--text-color)"
-                                    @click="edit(wordset, view_class)"></box-icon>
+                                    @click="edit(wordset.id, wordset.name)"></box-icon>
                                 <box-icon class="btn" name='trash' color="var(--text-color)"
                                     @click="del(view_class, wordset.id, index)"></box-icon>
                             </div>
                         </div>
                     </div>
+                    <div v-if="mode === 1" class="colbox wordclass">
+                        <div v-for="(wordset, index) in online_wordsets[viewing.set][viewing.book]" :key="index"
+                            class="wordset rowbox">
+                            <div class="title">
+                                {{ wordset.name }}
+                            </div>
+                            <div class="created-date">
+                                创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
+                            </div>
+                            <div class="option">
+                                <box-icon class="btn" name='show' color="var(--text-color)" @click="show(index)"></box-icon>
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
                     <box-icon name='list-ul' color="var(--text-color)"></box-icon>
@@ -57,18 +89,35 @@
 
 <script>
 import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
+import axios from 'axios';
 
 export default {
     name: "SetList",
     data() {
         return {
             wordsets: window.wordsets,
-            view_class: "",
+            view_wordsets: [],
+            viewing: {
+                set: "",
+                book: "",
+            },
+            online_wordsets: [],
+            mode: 0,
         }
     },
     methods: {
         view(classname) {
-            this.view_class = classname;
+            this.mode = 0;
+            this.view_wordsets = this.wordsets[classname];
+            let node = document.getElementById("wordsets-container").style;
+            node.animation = "";
+            setTimeout(() => {
+                node.animation = "enter ease-out .6s backwards";
+            }, 0);
+        },
+        view_online(set_name, class_name) {
+            this.mode = 1;
+            this.viewing = { set: set_name, book: class_name };
             let node = document.getElementById("wordsets-container").style;
             node.animation = "";
             setTimeout(() => {
@@ -90,10 +139,16 @@ export default {
                     ElMessage(`已经删除 ${set_class_name} `);
                 });
         },
-        edit(set, set_class_name) {
-            this.$store.state.editing = {set, set_class_name};
+        edit(id, name) {
             this.$router.push({
-                path: "/manage/edit",
+                path: "./manage/edit",
+                query: { id, name }
+            })
+        },
+        show(id) {
+            this.$router.push({
+                path: "./manage/show",
+                query: { set: this.viewing.set, book: this.viewing.book, id }
             })
         },
         async export_set() {
@@ -152,9 +207,9 @@ export default {
                 message: `已添加 ${cnt} 本单词本`
             });
         },
-        taggle_sidebar(){
+        taggle_sidebar() {
             let node = document.getElementById("sidebar");
-            if(node.style.width === "180px") node.style.width = "0";
+            if (node.style.width === "180px") node.style.width = "0";
             else node.style.width = "180px";
             return;
         }
@@ -166,6 +221,11 @@ export default {
                 this.view(first_set);
             }, 0);
         }
+        axios.get("/wordset/list").then(
+            (res) => {
+                this.online_wordsets = res.data;
+            }
+        );
     }
 }
 </script>
@@ -184,6 +244,10 @@ export default {
         }
     }
 
+    #header{
+        height: 70px;
+    }
+
     #sidebar {
         width: 0;
         transition: .5s;
@@ -243,11 +307,13 @@ export default {
         cursor: pointer;
         backdrop-filter: blur(10px);
     }
-    #wordsets-container{
+
+    #wordsets-container {
         width: 100%;
         display: flex;
     }
-    #sets-container{
+
+    #sets-container {
         width: 100%;
     }
 }
@@ -267,6 +333,10 @@ export default {
         }
     }
 
+    #header{
+        height: 60px;
+    }
+
     #sidebar {
         width: 180px;
     }
@@ -359,7 +429,7 @@ html.bgimged .wordset {
 #header {
     /* border-bottom: solid 1px #bcbcbc; */
     justify-content: space-between;
-    height: 40px;
+    animation: enter ease-out .6s backwards;
 }
 
 #wordsets-container {
diff --git a/src/router.js b/src/router.js
index 107d0ee..54cf53a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -5,6 +5,7 @@ const home = ()=>import("./components/Home.vue");
 const recite = ()=>import('./components/Recite.vue');
 const setlist = ()=>import('./components/manage/SetList.vue');
 const newset = ()=>import('./components/manage/NewSet.vue');
+const display = ()=>import('./components/manage/Display.vue');
 
 const routes = [
     { path: '/', component: home },
@@ -13,7 +14,8 @@ const routes = [
       children:[
         {path: '',component:setlist},
         {path: 'new',component:newset},
-        {path: 'edit',component:editor}
+        {path: 'edit',component:editor},
+        {path: 'show',component:display}
       ]},
   ]