cast1e
/
wordIn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

beta2

master
cast1e 2024-04-12 12:41:02 +08:00
parent a4a5e7ce9b
commit 9ad162a5b9
4 changed files with 104 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Home.vue
View File

@ -4,7 +4,7 @@
<div style="flex-grow: 2;margin:30px;" class="rowbox"> <div style="flex-grow: 2;margin:30px;" class="rowbox">
<div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div> <div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
<div id="title">wordIn</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>
<div style="flex-grow: 1;align-items: center;" class="colbox card"> <div style="flex-grow: 1;align-items: center;" class="colbox card">
<router-link to="/select" class="button"> <router-link to="/select" class="button">

141
src/components/manage/SetList.vue
View File

@ -6,48 +6,53 @@
<span class="text-large font-600 mr-3"> 编辑单词本 </span> <span class="text-large font-600 mr-3"> 编辑单词本 </span>
</template> </template>
<template #extra> <template #extra>
<div> <div class="colbox">
<el-button @click="$router.push('/manage/new')" type="success"><box-icon color="white" <el-button @click="$router.push('/manage/new')" type="success"><box-icon color="white"
name='plus'></box-icon>新建单词本</el-button> name='plus'></box-icon>新建单词本</el-button>
<el-dropdown trigger="click" class="pconly" style="margin-left: 20px;"> <div class="pconly">
<el-button type="primary"> <el-dropdown trigger="click" style="margin-left: 20px;">
更多<box-icon color="white" name='chevron-down' size="20px"></box-icon> <el-button type="primary">
</el-button> 更多<box-icon color="white" name='chevron-down' size="20px"></box-icon>
<template #dropdown> </el-button>
<el-dropdown-menu> <template #dropdown>
<el-dropdown-item @click="manage_online_wordsets"><box-icon color="white" <el-dropdown-menu>
name='world' size="20px"></box-icon>管理在线单词本</el-dropdown-item> <el-dropdown-item @click="manage_online_wordsets"><box-icon color="white"
<el-dropdown-item @click="export_set"><box-icon color="white" name='export' name='world' size="20px"></box-icon>管理在线单词本</el-dropdown-item>
size="18px"></box-icon>导出</el-dropdown-item> <el-dropdown-item @click="export_set"><box-icon color="white" name='export'
<el-dropdown-item @click="import_set"><box-icon color="white" name='import' size="18px"></box-icon>导出</el-dropdown-item>
size="18px"></box-icon>导入</el-dropdown-item> <el-dropdown-item @click="import_set"><box-icon color="white" name='import'
</el-dropdown-menu> size="18px"></box-icon>导入</el-dropdown-item>
</template> </el-dropdown-menu>
</el-dropdown> </template>
</el-dropdown>
</div>
</div> </div>
</template> </template>
</el-page-header> </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-header>
<el-container style="height:calc(100% - 200px);position: relative;"> <el-container style="height:calc(100% - 200px);position: relative;">
<el-aside id="sidebar"> <el-aside id="aside">
<div class="sidebar-title"> <div id="sidebar" class="sidebar-hidden">
|本地 <div id="sidebar-content">
</div> <div class="sidebar-title">
<div v-for="class_name in $store.state.wordsets._allclass" :title="class_name" :key="class_name" |本地
@click="view(class_name)" class="sidebar-item"> </div>
{{ class_name }} <div v-for="class_name in $store.state.wordsets._allclass" :title="class_name" :key="class_name"
</div> @click="view(class_name)" class="sidebar-item">
<div class="sidebar-title"> {{ class_name }}
|在线 </div>
</div> <div class="sidebar-title">
<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>
@click="view_online(set, class_name)" class="sidebar-item"> <div v-for="set in Object.keys(online_wordsets)" :key="set">
{{ class_name }} <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>
</div> </div>
</el-aside> </el-aside>
@ -84,14 +89,11 @@
</div> </div>
<div class="option"> <div class="option">
<box-icon class="btn" name='show' color="var(--text-color)" <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> </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-main>
</el-container> </el-container>
</el-container> </el-container>
@ -148,10 +150,10 @@ export default {
query: { id, classname: this.view_wordsets } query: { id, classname: this.view_wordsets }
}) })
}, },
show(id,name) { show(id, name) {
this.$router.push({ this.$router.push({
path: "./manage/show", 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() { async export_set() {
@ -174,18 +176,11 @@ export default {
}, },
taggle_sidebar() { taggle_sidebar() {
let node = document.getElementById("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; return;
} }
}, },
@ -223,11 +218,21 @@ export default {
height: 70px; height: 70px;
} }
#sidebar { #aside {
display: none;
width: 0; width: 0;
position: relative;
}
#sidebar {
position: absolute;
width: 180px;
margin-top: 20px; margin-top: 20px;
transition: .5s; transition: .5s;
z-index: 100;
}
.sidebar-hidden{
transform: translate(-100%,0);
} }
.wordset { .wordset {
@ -265,6 +270,7 @@ export default {
} }
#show-sidebar { #show-sidebar {
position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -272,9 +278,8 @@ export default {
border-radius: 100%; border-radius: 100%;
width: 40px; width: 40px;
height: 40px; height: 40px;
position: absolute; bottom: 0;
bottom: 20px; right: -50px;
left: 20px;
color: var(--text-color); color: var(--text-color);
box-shadow: var(--el-box-shadow); box-shadow: var(--el-box-shadow);
background-color: var(--bg-color); background-color: var(--bg-color);
@ -310,6 +315,10 @@ export default {
height: 60px; height: 60px;
} }
#aside {
width:180px;
}
#sidebar { #sidebar {
width: 180px; width: 180px;
animation: sidebar-enter ease-out .6s backwards; animation: sidebar-enter ease-out .6s backwards;
@ -362,15 +371,19 @@ export default {
box-shadow: var(--el-box-shadow); box-shadow: var(--el-box-shadow);
} }
#sidebar { #sidebar {
background-color: var(--bg-color); background-color: var(--bg-color-solid);
border-radius: 5px; border-radius: 5px;
overflow-y: auto;
overflow-x: hidden;
height: calc(100% - 100px); height: calc(100% - 100px);
border: 1px solid var(--bd-color); border: 1px solid var(--bd-color);
transition: .5s;
}
#sidebar-content{
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
} }
.sidebar-title { .sidebar-title {
@ -441,4 +454,8 @@ html.bgimged .wordset {
--el-collapse-content-bg-color: #FFFFFF00; --el-collapse-content-bg-color: #FFFFFF00;
--el-collapse-header-font-size: 18px; --el-collapse-header-font-size: 18px;
} }
.el-aside {
overflow: visible;
}
</style> </style>

23
src/md/about.md
View File

@ -23,6 +23,29 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
## 3.更新日志 ## 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 Release
#### 1.0.1 是wordIn第一个正式版 #### 1.0.1 是wordIn第一个正式版

1
vue.config.js
View File

@ -3,6 +3,7 @@ const path = require('path');
module.exports = defineConfig({ module.exports = defineConfig({
transpileDependencies: true, transpileDependencies: true,
publicPath:"./", publicPath:"./",
outputDir:"page",
devServer: { devServer: {
proxy: 'https://app.cast1e.top/wordin' proxy: 'https://app.cast1e.top/wordin'
}, },