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

Compare commits

base: cast1e:fbeb3820f8a0200ca79e5e438606f03d373ab845
Branches Tags
cast1e:master
cast1e:1.0.1
..
compare: cast1e:a88b8bcb5f76ad4a5583e9548299a3fc62f9a73d
Branches Tags
cast1e:master
cast1e:1.0.1

No commits in common. "fbeb3820f8a0200ca79e5e438606f03d373ab845" and "a88b8bcb5f76ad4a5583e9548299a3fc62f9a73d" have entirely different histories.
fbeb3820f8 ... a88b8bcb5f

8 changed files with 236 additions and 747 deletions
Show Stats Expand all files Collapse all files

77
src/App.vue
View File

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

104
src/components/Home.vue
View File

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

11
src/components/Manage.vue
View File

@ -4,11 +4,9 @@
<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 id="container"> <router-view>
<router-view>
</router-view> </router-view>
</div>
</template> </template>
<script> <script>
@ -30,8 +28,5 @@ export default {
</script> </script>
<style scoped> <style scoped>
#container{
height: calc(100% - 64px);
width: 100%;
}
</style> </style>

374
src/components/Recite.vue
View File

@ -5,46 +5,26 @@
</template> </template>
</el-page-header> </el-page-header>
<div v-if="mode === 0" id="range" class="container colbox"> <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 id="rangeselect" class="card item">
<div class="title" style="font-size: 35px;">在线词库</div> <div class="title">选择测验范围：</div>
<el-checkbox v-model="online.checkAll" :indeterminate="online.isIndeterminate" <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
@change="(res) => { handleCheckAllChange(online, res) }" size="large">全选</el-checkbox> size="large">全选</el-checkbox>
<el-checkbox-group v-model="online.checkedSets" @change="(res) => { handleChange(online, res) }"> <el-checkbox-group v-model="checkedSets" @change="handleChange">
<div class="set_radios" v-for="(set, set_name) in online_sets" :key="set_name"> <div class="set_radios" v-for="(set_class, set_class_name) in wordsets" :key="set_class_name">
<div class="subtitle">{{ set_name }}</div> <p>{{ set_class_name }}</p>
<div v-for="(book, book_name) in set" :key="book_name"> <el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id" size="large"
<p>{{ book_name }}</p> border>
<el-checkbox class="checkbox" v-for="(config, id) in book" :key="id" :label="id" size="large" <div style="font-size: 18px;font-weight: 500;">
border> {{ set.name }}
<div style="font-size: 18px;font-weight: 500;"> </div>
{{ config.name }} </el-checkbox>
</div>
</el-checkbox>
</div>
</div> </div>
</el-checkbox-group> </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> </div>
<div id="test" class="colbox" v-if="mode === 1"> <div id="test" class="colbox" v-if="mode === 1">
@ -56,7 +36,7 @@
</textarea> </textarea>
<div v-if="current < answered" class="answer">{{ word.word }}</div> <div v-if="current < answered" class="answer">{{ word.word }}</div>
</div> </div>
<div id="explain"> <p id="explain">
<el-button v-if="current > 0" @click="prev">上一个</el-button> <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="next">下一个</el-button>
<el-button v-if="current === answered" @click="showAnswer">显示答案</el-button> <el-button v-if="current === answered" @click="showAnswer">显示答案</el-button>
@ -64,11 +44,11 @@
<el-button @click="terminate" type="danger">停止背诵</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;" <box-icon color="var(--text-color)" class="btn" style="margin-left: 10px;translate: 0 4px;"
@click="audio_play" name='volume-full'></box-icon> @click="audio_play" name='volume-full'></box-icon>
</div> </p>
<div id="trans">{{ word.type }} {{ word.trans }}</div> <div id="trans">{{ word.type }} {{ word.trans }}</div>
</div> </div>
<div id="add-to-box" class="card"> <div id="add-to-box" class="card">
<el-text class="mx-1 title">加入至</el-text> <el-text class="mx-1" style="font-size: 35px;font-weight: 800;">加入至</el-text>
<div class="colbox para"> <div class="colbox para">
<div class="mid-text">分组:</div> <div class="mid-text">分组:</div>
<el-select v-model="set_class" class="m-2" placeholder="Select"> <el-select v-model="set_class" class="m-2" placeholder="Select">
@ -87,7 +67,6 @@
</template> </template>
<script> <script>
import axios from 'axios';
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus'; import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
@ -96,19 +75,11 @@ export default {
data() { data() {
return { return {
mode: 0, mode: 0,
allsets: [],
wordsets: window.wordsets, wordsets: window.wordsets,
local: { checkedSets: [],
allsets: [], isIndeterminate: false,
checkedSets: [], checkAll: false,
isIndeterminate: false,
checkAll: false,
},
online: {
allsets: [],
checkedSets: [],
isIndeterminate: false,
checkAll: false,
},
testWords: [], testWords: [],
seq: [], seq: [],
total: 0, total: 0,
@ -117,31 +88,20 @@ export default {
word: {}, word: {},
set_class: "", set_class: "",
set_id: "", set_id: "",
online_sets: {},
online_ids: {}
}; };
}, },
methods: { methods: {
key_listener(e) { handleCheckAllChange(val) {
if (this.mode === 1) { this.checkedSets = val ? this.allsets : [];
let ctrlKey = e.ctrlKey || e.metaKey; this.isIndeterminate = false;
if (ctrlKey && e.key === 'b') {
this.showAnswer();
}
e.preventDefault();
return;
}
}, },
handleCheckAllChange(range, val) { handleChange(value) {
range.checkedSets = val ? range.allsets : []; console.log(this.checkedSets);
range.isIndeterminate = false; this.checkAll = value.length === this.allsets.length;
this.isIndeterminate = value.length > 0 && value.length < this.allsets.length;
}, },
handleChange(range, value) { init() {
range.checkAll = value.length === range.allsets.length; if (this.checkedSets.length <= 0) {
range.isIndeterminate = value.length > 0 && value.length < range.allsets.length;
},
async init() {
if (this.local.checkedSets.length + this.online.checkedSets.length <= 0) {
ElMessage({ ElMessage({
message: "请至少选择一个单词本", message: "请至少选择一个单词本",
type: "error" type: "error"
@ -150,34 +110,14 @@ export default {
} }
let seed = (new Date()).getTime(); let seed = (new Date()).getTime();
this.testWords = []; this.testWords = [];
for (let i of this.local.checkedSets) { for (let i of this.checkedSets) {
let words = JSON.parse(localStorage.getItem(i)); let words = JSON.parse(localStorage.getItem(i));
this.testWords = this.testWords.concat(...words); 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({ localStorage.setItem("lastrecite", JSON.stringify({
checkedSets: this.local.checkedSets, checkedSets: this.checkedSets,
onlineSets: this.online.checkedSets,
seed: seed seed: seed
})) }))
console.log(this.testWords);
this.total = this.testWords.length; this.total = this.testWords.length;
if (this.total === 0) { if (this.total === 0) {
ElMessage({ ElMessage({
@ -198,7 +138,7 @@ export default {
this.show(); this.show();
}); });
}, },
async last_recite() { last_recite() {
let lr = JSON.parse(localStorage.getItem("lastrecite")); let lr = JSON.parse(localStorage.getItem("lastrecite"));
if (!lr) { if (!lr) {
ElMessage({ ElMessage({
@ -218,35 +158,6 @@ export default {
}); });
return; 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; this.total = this.testWords.length;
let arr = Array.from(new Array(this.total).keys()); let arr = Array.from(new Array(this.total).keys());
@ -296,6 +207,7 @@ export default {
}, },
show() { show() {
this.word = this.testWords[this.seq[this.current]]; this.word = this.testWords[this.seq[this.current]];
console.log(this.word);
if (this.current === this.answered) { if (this.current === this.answered) {
let e = document.getElementById("input"); let e = document.getElementById("input");
e.value = "_".repeat(this.word.word.length); e.value = "_".repeat(this.word.word.length);
@ -353,191 +265,40 @@ export default {
}, },
add_to() { add_to() {
let data = JSON.parse(localStorage.getItem(this.set_id)); 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); data.push(this.word);
localStorage.setItem(this.set_id, JSON.stringify(data)); localStorage.setItem(this.set_id, JSON.stringify(data));
ElMessage({ return ElMessage({
message: `已添加 ${this.word.word} (${this.word.type})`, message: `已添加 ${this.word.word} (${this.word.type})`,
type: 'success', type: 'success',
}); });
return; }
},
}, },
created() { created() {
for (let i of Object.values(window.wordsets)) { for (let i of Object.values(window.wordsets)) {
for (let j of i) { for (let j of i) {
this.local.allsets.push(j.id); this.allsets.push(j.id);
} }
} }
document.addEventListener('keyup', this.key_listener); console.log(this.allsets);
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> </script>
<style scoped> <style scoped>
@media screen and (max-width: 500px) { .item {
#range { margin-bottom: 20px;
max-height: calc(100% - 104px); background-color: var(--bg-color);
flex-direction: column; width: 50%;
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;
}
} }
@media screen and (min-width: 500px) { .title {
#range { font-size: 50px;
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; font-weight: 800;
color: var(--text-color);
} }
.checkbox { .checkbox {
font-size: 30px; font-size: 30px;
margin-bottom: 10px;
} }
#status { #status {
@ -549,12 +310,31 @@ export default {
border-radius: 8px; border-radius: 8px;
background-color: var(--bg-color); 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-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; border: none;
outline-style: none; outline-style: none;
height: 100px;
padding: 0; padding: 0;
transition: .5s; transition: .5s;
resize: vertical; resize: vertical;
width: 100%; 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 { .set_radios {
@ -562,16 +342,26 @@ export default {
} }
.set_radios p { .set_radios p {
font-size: 18px; font-size: 25px;
font-weight: 700; font-weight: 700;
color: var(--text-color); color: var(--text-color);
} }
#add-to-box {
width: 30%;
min-width: 200px;
}
#lastrecite { #lastrecite {
max-height: 150px; max-height: 150px;
} }
#online-set-container { #range {
height: auto; max-height: 85%;
overflow-y: auto; }
}</style>
#rangeselect {
max-height: 100%;
overflow-x: auto;
}
</style>

48
src/components/manage/Editor.vue
View File

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

48
src/components/manage/NewSet.vue
View File

@ -1,27 +1,27 @@
<template> <template>
<el-container id="main-container" class="container card"> <el-container id="main-container" class="container card">
<div style="overflow: auto;"> <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> </div>
<el-button style="width: 50%;" type="primary" @click="new_wordset()">创建</el-button>
</div>
</el-container> </el-container>
</template> </template>
<script> <script>
import uuid from 'node-uuid'; import uuid from 'node-uuid';
import { ElMessage } from 'element-plus'; import { ElMessage} from 'element-plus';
export default { export default {
name: "NewSet", name: "NewSet",
@ -52,7 +52,7 @@ export default {
}); });
localStorage.setItem("wordsets", JSON.stringify(this.wordsets)); localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
localStorage.setItem(id, JSON.stringify([])); localStorage.setItem(id, JSON.stringify([]));
this.$router.push('/manage'); this.mode = 0;
return; return;
}, },
} }
@ -60,23 +60,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
@media screen and (max-width: 500px) {
.colbox {
flex-direction: column;
}
.colbox * {
margin-top: 15px;
}
.card{
box-shadow: none;
}
}
#main-container { #main-container {
height: 87%; height: 87%;
} }
.colbox {
margin-top: 20px;
}
</style> </style>

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

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

2
vue.config.js
View File

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