beta2

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">

src/components/manage/SetList.vue

@@ -6,10 +6,11 @@
                     <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;">
+                        <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>
@@ -25,15 +26,14 @@
                                 </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">
+            <el-aside id="aside">
+                <div id="sidebar" class="sidebar-hidden">
+                    <div id="sidebar-content">
                         <div class="sidebar-title">
                             |本地
                         </div>
@@ -45,11 +45,16 @@
                             |在线
                         </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"
+                            <div v-for="(set_class, class_name) in online_wordsets[set]" :title="class_name"
-                        @click="view_online(set, class_name)" class="sidebar-item">
+                                :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>
             <el-main id="wordsets-container">
                 <div id="sets-container">
@@ -89,9 +94,6 @@
                         </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>
@@ -174,18 +176,11 @@ export default {
         },
         taggle_sidebar() {
             let node = document.getElementById("sidebar");
-            if (node.style.width === "180px") {
+            let class_name = "sidebar-hidden";
-                node.style.width = "0";
+            if(node.classList.contains(class_name)){
-                setTimeout(() => {
+                node.classList.remove(class_name);
-                    node.style.display = "none";
-                }, 500)
-            }
-            else {
-                node.style.display = "block";
-                setTimeout(() => {
-                    node.style.width = "180px";
-                }, 0)
             }
+            else node.classList.add(class_name);
             return;
         }
     },
@@ -223,11 +218,21 @@ export default {
         height: 70px;
     }
 
-    #sidebar {
+    #aside {
-        display: none;
         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: 0;
-        bottom: 20px;
+        right: -50px;
-        left: 20px;
         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>

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第一个正式版

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'
   },