From 9ad162a5b90dfacca3da3af0a0b8f2ed2c984891 Mon Sep 17 00:00:00 2001
From: cast1e <rooger233@gmail.com>
Date: Fri, 12 Apr 2024 12:41:02 +0800
Subject: [PATCH] beta2

---
 src/components/Home.vue           |   2 +-
 src/components/manage/SetList.vue | 141 +++++++++++++++++-------------
 src/md/about.md                   |  23 +++++
 vue.config.js                     |   1 +
 4 files changed, 104 insertions(+), 63 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 34620a2..0c2fc15 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -4,7 +4,7 @@
             <div style="flex-grow: 2;margin:30px;" class="rowbox">
                 <div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
                 <div id="title">wordIn</div>
-                <div>当前版本: 1.01 Patch 1 <br/> 更新时间:2024年1月11日 5:07 PM</div>
+                <div>当前版本: 1.02 Beta 2 <br/> 更新时间:2024年1月11日 5:07 PM</div>
             </div>
             <div style="flex-grow: 1;align-items: center;" class="colbox card">
                 <router-link to="/select" class="button">
diff --git a/src/components/manage/SetList.vue b/src/components/manage/SetList.vue
index 135e798..2321832 100644
--- a/src/components/manage/SetList.vue
+++ b/src/components/manage/SetList.vue
@@ -6,48 +6,53 @@
                     <span class="text-large font-600 mr-3"> 编辑单词本 </span>
                 </template>
                 <template #extra>
-                    <div>
+                    <div class="colbox">
                         <el-button @click="$router.push('/manage/new')" type="success"><box-icon color="white"
                                 name='plus'></box-icon>新建单词本</el-button>
-                        <el-dropdown trigger="click" class="pconly" style="margin-left: 20px;">
-                            <el-button type="primary">
-                                更多<box-icon color="white" name='chevron-down' size="20px"></box-icon>
-                            </el-button>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item @click="manage_online_wordsets"><box-icon color="white"
-                                            name='world' size="20px"></box-icon>管理在线单词本</el-dropdown-item>
-                                    <el-dropdown-item @click="export_set"><box-icon color="white" name='export'
-                                            size="18px"></box-icon>导出</el-dropdown-item>
-                                    <el-dropdown-item @click="import_set"><box-icon color="white" name='import'
-                                            size="18px"></box-icon>导入</el-dropdown-item>
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
+                        <div class="pconly">
+                            <el-dropdown trigger="click" style="margin-left: 20px;">
+                                <el-button type="primary">
+                                    更多<box-icon color="white" name='chevron-down' size="20px"></box-icon>
+                                </el-button>
+                                <template #dropdown>
+                                    <el-dropdown-menu>
+                                        <el-dropdown-item @click="manage_online_wordsets"><box-icon color="white"
+                                                name='world' size="20px"></box-icon>管理在线单词本</el-dropdown-item>
+                                        <el-dropdown-item @click="export_set"><box-icon color="white" name='export'
+                                                size="18px"></box-icon>导出</el-dropdown-item>
+                                        <el-dropdown-item @click="import_set"><box-icon color="white" name='import'
+                                                size="18px"></box-icon>导入</el-dropdown-item>
+                                    </el-dropdown-menu>
+                                </template>
+                            </el-dropdown>
+                        </div>
                     </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% - 200px);position: relative;">
-            <el-aside id="sidebar">
-                <div class="sidebar-title">
-                    |本地
-                </div>
-                <div v-for="class_name in $store.state.wordsets._allclass" :title="class_name" :key="class_name"
-                    @click="view(class_name)" class="sidebar-item">
-                    {{ class_name }}
-                </div>
-                <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 }}
+            <el-aside id="aside">
+                <div id="sidebar" class="sidebar-hidden">
+                    <div id="sidebar-content">
+                        <div class="sidebar-title">
+                            |本地
+                        </div>
+                        <div v-for="class_name in $store.state.wordsets._allclass" :title="class_name" :key="class_name"
+                            @click="view(class_name)" class="sidebar-item">
+                            {{ class_name }}
+                        </div>
+                        <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>
+                    </div>
+                    <div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
+                        <box-icon name='list-ul' color="var(--text-color)"></box-icon>
                     </div>
                 </div>
             </el-aside>
@@ -84,14 +89,11 @@
                             </div>
                             <div class="option">
                                 <box-icon class="btn" name='show' color="var(--text-color)"
-                                    @click="show(index,wordset.name)"></box-icon>
+                                    @click="show(index, wordset.name)"></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>
-                </div>
             </el-main>
         </el-container>
     </el-container>
@@ -148,10 +150,10 @@ export default {
                 query: { id, classname: this.view_wordsets }
             })
         },
-        show(id,name) {
+        show(id, name) {
             this.$router.push({
                 path: "./manage/show",
-                query: { set: this.viewing.set, book: this.viewing.book, id,name }
+                query: { set: this.viewing.set, book: this.viewing.book, id, name }
             })
         },
         async export_set() {
@@ -174,18 +176,11 @@ export default {
         },
         taggle_sidebar() {
             let node = document.getElementById("sidebar");
-            if (node.style.width === "180px") {
-                node.style.width = "0";
-                setTimeout(() => {
-                    node.style.display = "none";
-                }, 500)
-            }
-            else {
-                node.style.display = "block";
-                setTimeout(() => {
-                    node.style.width = "180px";
-                }, 0)
+            let class_name = "sidebar-hidden";
+            if(node.classList.contains(class_name)){
+                node.classList.remove(class_name);
             }
+            else node.classList.add(class_name);
             return;
         }
     },
@@ -223,11 +218,21 @@ export default {
         height: 70px;
     }
 
-    #sidebar {
-        display: none;
+    #aside {
         width: 0;
+        position: relative;
+    }
+
+    #sidebar {
+        position: absolute;
+        width: 180px;
         margin-top: 20px;
         transition: .5s;
+        z-index: 100;
+    }
+
+    .sidebar-hidden{
+        transform: translate(-100%,0);
     }
 
     .wordset {
@@ -265,6 +270,7 @@ export default {
     }
 
     #show-sidebar {
+        position: absolute;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -272,9 +278,8 @@ export default {
         border-radius: 100%;
         width: 40px;
         height: 40px;
-        position: absolute;
-        bottom: 20px;
-        left: 20px;
+        bottom: 0;
+        right: -50px;
         color: var(--text-color);
         box-shadow: var(--el-box-shadow);
         background-color: var(--bg-color);
@@ -310,6 +315,10 @@ export default {
         height: 60px;
     }
 
+    #aside {
+        width:180px;
+    }
+
     #sidebar {
         width: 180px;
         animation: sidebar-enter ease-out .6s backwards;
@@ -362,15 +371,19 @@ export default {
     box-shadow: var(--el-box-shadow);
 }
 
-
-
 #sidebar {
-    background-color: var(--bg-color);
+    background-color: var(--bg-color-solid);
     border-radius: 5px;
-    overflow-y: auto;
-    overflow-x: hidden;
     height: calc(100% - 100px);
     border: 1px solid var(--bd-color);
+    transition: .5s;
+}
+
+#sidebar-content{
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .sidebar-title {
@@ -441,4 +454,8 @@ html.bgimged .wordset {
     --el-collapse-content-bg-color: #FFFFFF00;
     --el-collapse-header-font-size: 18px;
 }
+
+.el-aside {
+    overflow: visible;
+}
 </style>
\ No newline at end of file
diff --git a/src/md/about.md b/src/md/about.md
index 05e8820..3e615d7 100644
--- a/src/md/about.md
+++ b/src/md/about.md
@@ -23,6 +23,29 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
 
 ## 3.更新日志
 
+### 1.0.2 Beta 2
+
+1. 更新内容
+
+   - 减小了打包体积
+
+2. Bug修复进度
+
+   - （解决中）自定义背景
+   - （已解决）移动端UI错位问题
+
+### 1.0.2 Beta 1
+
+1. 更新内容
+
+   - 重写对话框组件
+   - 增加了一些单词本管理功能
+
+2. Bug修复进度
+
+   - （解决中）自定义背景
+   - （解决中）移动端UI错位问题
+
 ### 1.0.1 Release  
 
 #### 1.0.1 是wordIn第一个正式版
diff --git a/vue.config.js b/vue.config.js
index 8521b47..17795de 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -3,6 +3,7 @@ const path = require('path');
 module.exports = defineConfig({
   transpileDependencies: true,
   publicPath:"./",
+  outputDir:"page",
   devServer: {
     proxy: 'https://app.cast1e.top/wordin'
   },