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

online functions

master
cast1e 2023-11-16 10:13:20 +08:00
parent a88b8bcb5f
commit d86bbd5cdc
4 changed files with 201 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
src/components/Recite.vue
View File

@ -7,9 +7,9 @@
<div v-if="mode === 0" id="range" class="container colbox">
<div id="rangeselect" class="card item">
<div class="title">选择测验范围：</div>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
size="large">全选</el-checkbox>
<el-checkbox-group v-model="checkedSets" @change="handleChange">
<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"
@ -20,11 +20,31 @@
</el-checkbox>
</div>
</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 class="rowbox item">
<div id="lastrecite" class="card">
<el-button style="margin-bottom: 20px;width: 50%;" type="primary" @click="init">开始背诵</el-button><br />
<el-button style="margin:0;width: 50%;" type="success" @click="last_recite">继续上一次的背诵</el-button>
</div>
<div id="online-set-container" 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 style="font-size: 18px;font-weight: 500;">
{{ config.name }}
</div>
</el-checkbox>
</div>
</div>
</el-checkbox-group>
</div>
</div>
</div>
<div id="test" class="colbox" v-if="mode === 1">
@ -67,6 +87,7 @@
</template>
<script>
import axios from 'axios';
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
import { nextTick } from 'vue';
@ -75,11 +96,19 @@ export default {
data() {
return {
mode: 0,
allsets: [],
wordsets: window.wordsets,
local: {
allsets: [],
checkedSets: [],
isIndeterminate: false,
checkAll: false,
},
online: {
allsets: [],
checkedSets: [],
isIndeterminate: false,
checkAll: false,
},
testWords: [],
seq: [],
total: 0,
@ -88,20 +117,31 @@ export default {
word: {},
set_class: "",
set_id: "",
online_sets: {},
online_ids: {}
};
},
methods: {
handleCheckAllChange(val) {
this.checkedSets = val ? this.allsets : [];
this.isIndeterminate = false;
key_listener(e) {
if (this.mode === 1) {
let ctrlKey = e.ctrlKey || e.metaKey;
if (ctrlKey && e.key === 'b') {
this.showAnswer();
}
e.preventDefault();
return;
}
},
handleChange(value) {
console.log(this.checkedSets);
this.checkAll = value.length === this.allsets.length;
this.isIndeterminate = value.length > 0 && value.length < this.allsets.length;
handleCheckAllChange(range, val) {
range.checkedSets = val ? range.allsets : [];
range.isIndeterminate = false;
},
init() {
if (this.checkedSets.length <= 0) {
handleChange(range, value) {
range.checkAll = value.length === range.allsets.length;
range.isIndeterminate = value.length > 0 && value.length < range.allsets.length;
},
async init() {
if (this.local.checkedSets.length + this.online.checkedSets.length <= 0) {
ElMessage({
message: "请至少选择一个单词本",
type: "error"
@ -110,14 +150,34 @@ export default {
}
let seed = (new Date()).getTime();
this.testWords = [];
for (let i of this.checkedSets) {
for (let i of this.local.checkedSets) {
let words = JSON.parse(localStorage.getItem(i));
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({
checkedSets: this.checkedSets,
checkedSets: this.local.checkedSets,
onlineSets: this.online.checkedSets,
seed: seed
}))
console.log(this.testWords);
this.total = this.testWords.length;
if (this.total === 0) {
ElMessage({
@ -138,7 +198,7 @@ export default {
this.show();
});
},
last_recite() {
async last_recite() {
let lr = JSON.parse(localStorage.getItem("lastrecite"));
if (!lr) {
ElMessage({
@ -158,6 +218,35 @@ export default {
});
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;
let arr = Array.from(new Array(this.total).keys());
@ -207,7 +296,6 @@ export default {
},
show() {
this.word = this.testWords[this.seq[this.current]];
console.log(this.word);
if (this.current === this.answered) {
let e = document.getElementById("input");
e.value = "_".repeat(this.word.word.length);
@ -265,29 +353,65 @@ export default {
},
add_to() {
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);
localStorage.setItem(this.set_id, JSON.stringify(data));
return ElMessage({
ElMessage({
message: `已添加 ${this.word.word} (${this.word.type})`,
type: 'success',
});
}
return;
},
},
created() {
for (let i of Object.values(window.wordsets)) {
for (let j of i) {
this.allsets.push(j.id);
this.local.allsets.push(j.id);
}
}
console.log(this.allsets);
document.addEventListener('keyup', this.key_listener);
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>
<style scoped>
.item {
margin-bottom: 20px;
background-color: var(--bg-color);
/* background-color: var(--bg-color); */
width: 50%;
}
@ -297,8 +421,16 @@ export default {
color: var(--text-color);
}
.subtitle {
font-size: 23px;
line-height: 35px;
margin-bottom: 15px;
font-weight: 800;
}
.checkbox {
font-size: 30px;
margin-bottom: 10px;
}
#status {
@ -342,7 +474,7 @@ export default {
}
.set_radios p {
font-size: 25px;
font-size: 18px;
font-weight: 700;
color: var(--text-color);
}
@ -364,4 +496,9 @@ export default {
max-height: 100%;
overflow-x: auto;
}
#online-set-container {
height: auto;
overflow-y: auto;
}
</style>

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

@ -209,10 +209,8 @@ export default {
border-radius: 8px;
}
.el-collapse {
--el-collapse-header-bg-color: #FFFFFF00;
--el-collapse-content-bg-color: #FFFFFF00;
--el-collapse-header-font-size: 18px;
.el-table{
--el-table-bg-color:#FFFFFF00;
--el-table-tr-bg-color:#FFFFFF00;
}
</style>

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

@ -14,14 +14,14 @@
<el-option v-for="item in Object.keys(wordsets)" :key="item" :label="item" :value="item" />
</el-select>
</div>
<el-button style="width: 50%;" type="primary" @click="new_wordset()">创建</el-button>
<el-button style="width: 50%;margin-top: 20px;" type="primary" @click="new_wordset()">创建</el-button>
</div>
</el-container>
</template>
<script>
import uuid from 'node-uuid';
import { ElMessage} from 'element-plus';
import { ElMessage } from 'element-plus';
export default {
name: "NewSet",
@ -52,7 +52,7 @@ export default {
});
localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
localStorage.setItem(id, JSON.stringify([]));
this.mode = 0;
this.$router.push('/manage');
return;
},
}
@ -63,4 +63,7 @@ export default {
#main-container {
height: 87%;
}
.colbox{
margin-top: 20px;
}
</style>

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

@ -3,10 +3,11 @@
<el-header id="header" class="colbox">
<div class="no">共有{{ Object.keys(wordsets).length }}个单词集合</div>
<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"><box-icon color="white" name='export'
size="15px"></box-icon>导出</el-button>
size="18px"></box-icon>导出</el-button>
<el-button @click="import_set" type="warning"><box-icon color="white" name='import'
size="15px"></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>
</el-header>
@ -53,6 +54,9 @@ export default {
}
},
methods:{
manage_online_wordsets(){
window.location.href='/dashboard';
},
del(set_class_name, id, index) {
ElMessageBox.confirm("确定要删除吗？")
.then(() => {
@ -183,4 +187,10 @@ export default {
.card div {
margin-bottom: 10px;
}
.el-collapse {
--el-collapse-header-bg-color: #FFFFFF00;
--el-collapse-content-bg-color: #FFFFFF00;
--el-collapse-header-font-size: 18px;
}
</style>