Compare commits
No commits in common. "9ad162a5b90dfacca3da3af0a0b8f2ed2c984891" and "3cf483c4221e630243fb268167ad29760e2324ba" have entirely different histories.
9ad162a5b9
...
3cf483c422
|
|
@ -26,7 +26,8 @@
|
||||||
"@vue/cli-service": "~5.0.0",
|
"@vue/cli-service": "~5.0.0",
|
||||||
"element-plus": "^2.3.14",
|
"element-plus": "^2.3.14",
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^7.32.0",
|
||||||
"eslint-plugin-vue": "^8.0.3"
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"raw-loader": "^4.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@aashutoshrathi/word-wrap": {
|
"node_modules/@aashutoshrathi/word-wrap": {
|
||||||
|
|
@ -9330,6 +9331,58 @@
|
||||||
"node": ">= 0.8"
|
"node": ">= 0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/raw-loader": {
|
||||||
|
"version": "4.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
|
||||||
|
"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"loader-utils": "^2.0.0",
|
||||||
|
"schema-utils": "^3.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"webpack": "^4.0.0 || ^5.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/raw-loader/node_modules/loader-utils": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"big.js": "^5.2.2",
|
||||||
|
"emojis-list": "^3.0.0",
|
||||||
|
"json5": "^2.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/raw-loader/node_modules/schema-utils": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
|
||||||
|
"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/json-schema": "^7.0.8",
|
||||||
|
"ajv": "^6.12.5",
|
||||||
|
"ajv-keywords": "^3.5.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react": {
|
"node_modules/react": {
|
||||||
"version": "16.14.0",
|
"version": "16.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,8 @@
|
||||||
"@vue/cli-service": "~5.0.0",
|
"@vue/cli-service": "~5.0.0",
|
||||||
"element-plus": "^2.3.14",
|
"element-plus": "^2.3.14",
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^7.32.0",
|
||||||
"eslint-plugin-vue": "^8.0.3"
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"raw-loader": "^4.0.2"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"root": true,
|
"root": true,
|
||||||
|
|
|
||||||
95
src/App.vue
95
src/App.vue
|
|
@ -1,23 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="pconly">
|
<div id="navibar" class="pconly" >
|
||||||
<div id="navibar">
|
<div class="navi-item"><el-link @click="go('/')" id="logo">wordIn</el-link></div>
|
||||||
<div class="navi-item"><el-link @click="go('/')" id="logo">wordIn</el-link></div>
|
<div class="navi-item"><el-link @click="go('/select')" class="link">背诵</el-link></div>
|
||||||
<div class="navi-item"><el-link @click="go('/select')" class="link">背诵</el-link></div>
|
<div class="navi-item"><el-link @click="go('/manage')" class="link">编辑单词本</el-link></div>
|
||||||
<div class="navi-item"><el-link @click="go('/manage')" class="link">编辑单词本</el-link></div>
|
<div class="navi-item"><el-link @click="go('/manual')" class="link">使用说明</el-link></div>
|
||||||
<div class="navi-item"><el-link @click="go('/manual')" class="link">使用说明</el-link></div>
|
<div class="navi-item"><el-link @click="go('/about')" class="link">关于</el-link></div>
|
||||||
<div class="navi-item"><el-link @click="go('/about')" class="link">关于</el-link></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<router-view style=""></router-view>
|
|
||||||
<div class="mbonly">
|
|
||||||
<div id="navibar">
|
|
||||||
<div class="navi-item"><box-icon name="home-alt-2" @click="$router.push('/')" color="var(--text-color)" size="27px"></box-icon><div>主页</div></div>
|
|
||||||
<div class="navi-item"><box-icon name="book-open" @click="$router.push('/select')" color="var(--text-color)" size="27px"></box-icon><div>背诵</div></div>
|
|
||||||
<div class="navi-item"><box-icon name="folder" @click="$router.push('/manage')" color="var(--text-color)" size="27px"></box-icon><div>浏览</div></div>
|
|
||||||
<div class="navi-item"><box-icon name="file" @click="$router.push('/manual')" color="var(--text-color)" size="27px"></box-icon><div>说明</div></div>
|
|
||||||
<div class="navi-item"><box-icon name="info-circle" @click="$router.push('/about')" color="var(--text-color)" size="27px"></box-icon><div>关于</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<router-view style="margin-top: 10px;"></router-view>
|
||||||
|
<!-- <div id="navibar" class="mbonly"></div> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -116,19 +106,13 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#app{
|
|
||||||
transition: .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
--bg-color-solid:#e8e8e8;
|
|
||||||
--bg-color: #ffffffae;
|
--bg-color: #ffffffae;
|
||||||
--text-color: #464646;
|
--text-color: #464646;
|
||||||
--bd-color: #bbbbbb99;
|
--bd-color: #bbbbbb99;
|
||||||
}
|
}
|
||||||
|
|
||||||
html.dark {
|
html.dark {
|
||||||
--bg-color-solid:#191919;
|
|
||||||
--bg-color: #2a2a2a88;
|
--bg-color: #2a2a2a88;
|
||||||
--text-color: #c0c0c0;
|
--text-color: #c0c0c0;
|
||||||
--bd-color: #7f7f7f7c;
|
--bd-color: #7f7f7f7c;
|
||||||
|
|
@ -160,8 +144,7 @@ html.dark {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
transition: .5s;
|
transition: .5s;
|
||||||
}
|
}
|
||||||
|
.card:hover{
|
||||||
.card:hover {
|
|
||||||
box-shadow: var(--el-box-shadow);
|
box-shadow: var(--el-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -185,57 +168,25 @@ html.bgimged .card {
|
||||||
.para {
|
.para {
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blured {
|
|
||||||
filter: blur(10px);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@media screen and (max-width: 500px) {
|
#navibar {
|
||||||
#navibar {
|
height: 60px;
|
||||||
height: 55px;
|
border-bottom: solid 1px var(--bd-color);
|
||||||
border-top: solid 1px var(--bd-color);
|
display: flex;
|
||||||
display: flex;
|
flex-direction: row;
|
||||||
flex-direction: row;
|
background-color: var(--navi-bg-color);
|
||||||
justify-content: space-around;
|
backdrop-filter: blur(10px);
|
||||||
background-color: var(--navi-bg-color);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navi-item {
|
|
||||||
height: 100%;
|
|
||||||
font-size: 11px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
justify-content: baseline;
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 500px) {
|
.navi-item {
|
||||||
#navibar {
|
height: 100%;
|
||||||
height: 60px;
|
font-size: 22px;
|
||||||
border-bottom: solid 1px var(--bd-color);
|
display: flex;
|
||||||
display: flex;
|
justify-content: baseline;
|
||||||
flex-direction: row;
|
margin-left: 20px;
|
||||||
background-color: var(--navi-bg-color);
|
color: var(--text-color);
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navi-item {
|
|
||||||
height: 100%;
|
|
||||||
font-size: 22px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: baseline;
|
|
||||||
margin-left: 20px;
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
|
|
|
||||||
|
|
@ -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.02 Beta 2 <br/> 更新时间:2024年1月11日 5:07 PM</div>
|
<div>当前版本: 1.01 更新时间:2024年1月11日 10:43 AM</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">
|
||||||
|
|
@ -122,12 +122,12 @@ export default {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
text-shadow: #00000057 5px 5px 20px;
|
text-shadow: #00000057 5px 5px 20px;
|
||||||
line-height: 100px;
|
line-height: 100px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-weight: 600;
|
font-weight: 800;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="mask" v-if="visible">
|
|
||||||
<div ref="bg" id="bg">
|
|
||||||
<div id="content">
|
|
||||||
<slot name="content"></slot>
|
|
||||||
</div>
|
|
||||||
<div id="close" @click="handleClose"><box-icon color="var(--text-color)" size="20px" name="x"></box-icon></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name:"CDiaLog",
|
|
||||||
props:{
|
|
||||||
"visible":{
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
handleClose(){
|
|
||||||
this.$refs.bg.style.animation = "cui-dialog-disappear .3s ease-in";
|
|
||||||
setTimeout(()=>this.$emit("update:visible",false),300);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@keyframes cui-dialog-appear {
|
|
||||||
0%{
|
|
||||||
opacity: 0%;
|
|
||||||
transform: translate(-50%,-50%) scale(0.5);
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
opacity: 100%;
|
|
||||||
transform: translate(-50%,-50%) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes cui-dialog-disappear {
|
|
||||||
0%{
|
|
||||||
opacity: 100%;
|
|
||||||
transform: translate(-50%,-50%) scale(1);
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
opacity: 0%;
|
|
||||||
transform: translate(-50%,-50%) scale(0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes cui-dialog-blur{
|
|
||||||
0%{
|
|
||||||
backdrop-filter:blur(0px);
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
backdrop-filter:blur(10px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
#mask{
|
|
||||||
z-index: 500;
|
|
||||||
position: absolute;
|
|
||||||
top:0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
animation: cui-dialog-blur .5s ;
|
|
||||||
}
|
|
||||||
#bg{
|
|
||||||
position: absolute;
|
|
||||||
width: 500px;
|
|
||||||
height: 300px;
|
|
||||||
max-width: 80%;
|
|
||||||
border: solid var(--bd-color) 1px;
|
|
||||||
background-color: var(--bg-color-solid);
|
|
||||||
border-radius: 8px;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
animation: cui-dialog-appear .4s cubic-bezier(0, 0, 0.36, 1.29);
|
|
||||||
}
|
|
||||||
#content{
|
|
||||||
padding: 20px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#close{
|
|
||||||
position: absolute;
|
|
||||||
right:0;
|
|
||||||
top: 0;
|
|
||||||
margin: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -4,19 +4,6 @@
|
||||||
<template #content>
|
<template #content>
|
||||||
<span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
|
<span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
|
||||||
</template>
|
</template>
|
||||||
<template #extra>
|
|
||||||
<el-dropdown trigger="click">
|
|
||||||
<el-button>
|
|
||||||
操作<box-icon color="var(--text-color)" name='chevron-down' size="20px"></box-icon>
|
|
||||||
</el-button>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item @click="download"><box-icon color="var(--text-color)" name='download'
|
|
||||||
size="20px"></box-icon>下载</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</template>
|
|
||||||
</el-page-header>
|
</el-page-header>
|
||||||
<div class="colbox" id="main">
|
<div class="colbox" id="main">
|
||||||
<div style="flex-grow: 1;" class="card">
|
<div style="flex-grow: 1;" class="card">
|
||||||
|
|
@ -32,7 +19,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ElMessage } from 'element-plus';
|
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "NoteEditor",
|
name: "NoteEditor",
|
||||||
|
|
@ -41,19 +29,12 @@ export default {
|
||||||
table: [],
|
table: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
|
||||||
download(){
|
|
||||||
this.$store.state.wordsets.fromArray(this.table,this.book,this.name);
|
|
||||||
ElMessage("下载完毕");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
created() {
|
||||||
this.set = this.$route.query.set;
|
this.set = this.$route.query.set;
|
||||||
this.book = this.$route.query.book;
|
this.book = this.$route.query.book;
|
||||||
this.id = this.$route.query.id;
|
this.id = this.$route.query.id;
|
||||||
this.name = this.$route.query.name || "default";
|
|
||||||
if (this.set && this.book && this.id) {
|
if (this.set && this.book && this.id) {
|
||||||
this.$axios.get("wordset/detail", {
|
axios.get("./wordset/detail", {
|
||||||
params:{
|
params:{
|
||||||
set: this.set, book: this.book, id: this.id
|
set: this.set, book: this.book, id: this.id
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container" style="overflow: auto;">
|
<div class="container" style="overflow: auto;">
|
||||||
<el-page-header style="margin: 10px;" @back="this.$router.push('/manage');">
|
<el-page-header style="margin: 10px;" @back="this.$router.push('/manage');">
|
||||||
<template #content>
|
<template #content>
|
||||||
<span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
|
<span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
|
||||||
</template>
|
</template>
|
||||||
<template #extra>
|
|
||||||
<el-dropdown trigger="click">
|
|
||||||
<el-button>
|
|
||||||
操作<box-icon color="var(--text-color)" name='chevron-down' size="20px"></box-icon>
|
|
||||||
</el-button>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item @click="del_set"><box-icon color="var(--text-color)" name='trash'
|
|
||||||
size="20px"></box-icon>删除</el-dropdown-item>
|
|
||||||
<el-dropdown-item @click="addTo"><box-icon color="var(--text-color)" name='plus'
|
|
||||||
size="18px"></box-icon>添加到</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</template>
|
|
||||||
</el-page-header>
|
</el-page-header>
|
||||||
<div class="colbox" id="main">
|
<div class="colbox" id="main">
|
||||||
<div class="rowbox">
|
<div class="rowbox">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="title">添加单词</div>
|
<div class="title">添加单词</div>
|
||||||
<el-input ref="input1" autofocus @change="focusnext($refs.input2)"
|
<el-input ref="input1" autofocus @change="focusnext($refs.input2)" v-model="new_word.word"></el-input>
|
||||||
v-model="new_word.word"></el-input>
|
|
||||||
<div class="colbox">
|
<div class="colbox">
|
||||||
<el-text class="mx-1" style="width: 60px;">翻译:</el-text>
|
<el-text class="mx-1" style="width: 60px;">翻译:</el-text>
|
||||||
<el-input ref="input2" @change="focusnext($refs.input3)" v-model="new_word.trans"></el-input>
|
<el-input ref="input2" @change="focusnext($refs.input3)" v-model="new_word.trans"></el-input>
|
||||||
|
|
@ -33,8 +17,7 @@
|
||||||
<div class="colbox">
|
<div class="colbox">
|
||||||
<el-text class="mx-1" style="width: 80px;">词性：</el-text>
|
<el-text class="mx-1" style="width: 80px;">词性：</el-text>
|
||||||
<el-select ref="input3" v-model="new_word.type" class="m-2" placeholder="Select">
|
<el-select ref="input3" v-model="new_word.type" class="m-2" placeholder="Select">
|
||||||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
:value="item.value" />
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<el-button @click="add_word()" type="primary">添加</el-button>
|
<el-button @click="add_word()" type="primary">添加</el-button>
|
||||||
|
|
@ -68,54 +51,28 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<CDialog v-model:visible="word_editing">
|
<el-dialog v-model="word_editing" width="80%">
|
||||||
<template #content>
|
<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">
|
<el-text class="mx-1" style="width: 60px;">翻译:</el-text>
|
||||||
<el-text class="mx-1" style="width: 60px;">翻译:</el-text>
|
<el-input v-model="editing_word.trans"></el-input>
|
||||||
<el-input v-model="editing_word.trans"></el-input>
|
</div>
|
||||||
</div>
|
<div class="colbox">
|
||||||
<div class="colbox">
|
<el-text class="mx-1" style="width: 80px;">词性：</el-text>
|
||||||
<el-text class="mx-1" style="width: 80px;">词性：</el-text>
|
<el-select v-model="editing_word.type" class="m-2" placeholder="Select">
|
||||||
<el-select v-model="editing_word.type" class="m-2" placeholder="Select">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
||||||
</el-select>
|
</div>
|
||||||
</div>
|
<el-button @click="save_word" type="primary">更改</el-button>
|
||||||
<el-button @click="save_word" type="primary">更改</el-button>
|
</el-dialog>
|
||||||
</template>
|
|
||||||
</CDialog>
|
|
||||||
<CDialog v-model:visible="select.visible">
|
|
||||||
<template #content>
|
|
||||||
<el-text class="mx-1 title">选择加入的单词本</el-text>
|
|
||||||
<div class="colbox para">
|
|
||||||
<div class="mid-text">分组:</div>
|
|
||||||
<el-select v-model="select.set_class" class="m-2" placeholder="Select">
|
|
||||||
<el-option v-for="item in $store.state.wordsets._allclass" :key="item" :label="item"
|
|
||||||
:value="item" />
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
<div class="colbox para">
|
|
||||||
<div class="mid-text">单词本:</div>
|
|
||||||
<el-select v-model="select.id" class="m-2" placeholder="Select">
|
|
||||||
<el-option v-for="item in $store.state.wordsets.getClass(select.set_class)" :key="item.id"
|
|
||||||
:label="item.name" :value="item.id" />
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
<el-button @click="select.confirm(select.id)" type="primary">确认</el-button>
|
|
||||||
</template>
|
|
||||||
</CDialog>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
import CDialog from '../UI/CDialog.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "NoteEditor",
|
name: "NoteEditor",
|
||||||
components: {
|
|
||||||
CDialog
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
new_word: {
|
new_word: {
|
||||||
|
|
@ -133,13 +90,8 @@ export default {
|
||||||
table: [],
|
table: [],
|
||||||
word_editing: false,
|
word_editing: false,
|
||||||
new_name: "",
|
new_name: "",
|
||||||
name: "",
|
name:"",
|
||||||
id: "",
|
id:""
|
||||||
select: {
|
|
||||||
visible: false,
|
|
||||||
set_class: "",
|
|
||||||
id: ""
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -161,7 +113,7 @@ export default {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.table.push(Object.assign({}, this.new_word));
|
this.table.push(Object.assign({}, this.new_word));
|
||||||
this.$store.state.wordsets.saveSet(this.id, this.table);
|
this.$store.state.wordsets.saveSet(this.id,this.table);
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: `已添加 ${this.new_word.word} (${this.new_word.type})`,
|
message: `已添加 ${this.new_word.word} (${this.new_word.type})`,
|
||||||
type: 'success',
|
type: 'success',
|
||||||
|
|
@ -191,7 +143,7 @@ export default {
|
||||||
type: this.editing_word.type,
|
type: this.editing_word.type,
|
||||||
trans: this.editing_word.trans,
|
trans: this.editing_word.trans,
|
||||||
}
|
}
|
||||||
this.$store.state.wordsets.saveSet(this.id, this.table);
|
this.$store.state.wordsets.saveSet(this.id,this.table);
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: `已保存更改`,
|
message: `已保存更改`,
|
||||||
type: 'success',
|
type: 'success',
|
||||||
|
|
@ -201,7 +153,7 @@ export default {
|
||||||
change_name() {
|
change_name() {
|
||||||
let old_name = this.name;
|
let old_name = this.name;
|
||||||
this.name = this.new_name;
|
this.name = this.new_name;
|
||||||
this.$store.state.wordsets.renameSet(this.class_name, this.id, this.new_name);
|
this.$store.state.wordsets.renameSet(this.class_name,this.id,this.new_name);
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: `已更改 ${old_name} 为 ${this.name}`,
|
message: `已更改 ${old_name} 为 ${this.name}`,
|
||||||
type: 'success',
|
type: 'success',
|
||||||
|
|
@ -211,42 +163,20 @@ export default {
|
||||||
del_word(index) {
|
del_word(index) {
|
||||||
let word = this.table[index].word.concat();
|
let word = this.table[index].word.concat();
|
||||||
this.table.splice(index, 1);
|
this.table.splice(index, 1);
|
||||||
this.$store.state.wordsets.saveSet(this.id, this.table);
|
this.$store.state.wordsets.saveSet(this.id,this.table);
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: `已删除 ${word}`,
|
message: `已删除 ${word}`,
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
del_set() {
|
|
||||||
ElMessageBox.confirm("确定要删除吗？")
|
|
||||||
.then(() => {
|
|
||||||
let index = this.$store.state.wordsets.getId(this.class_name, this.id);
|
|
||||||
this.$store.state.wordsets.delSet(this.class_name, index);
|
|
||||||
ElMessage(`已经删除 ${this.class_name} ${this.id}`);
|
|
||||||
this.$router.push("/manage");
|
|
||||||
});
|
|
||||||
},
|
|
||||||
addTo() {
|
|
||||||
this.select.visible = true;
|
|
||||||
this.select.confirm = (dest_id) => {
|
|
||||||
if (this.id) {
|
|
||||||
if(this.id != dest_id){
|
|
||||||
let failed = this.$store.state.wordsets.addSetTo(this.id, dest_id);
|
|
||||||
ElMessage(`已经添加到 ${dest_id}, 已经去除 ${failed} 个重复单词`);
|
|
||||||
}
|
|
||||||
else ElMessage(`请选择一个不同的单词本`);
|
|
||||||
|
|
||||||
}
|
|
||||||
this.select.visible = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.class_name = this.$route.query.classname;
|
this.class_name = this.$route.query.classname;
|
||||||
this.id = this.$route.query.id;
|
this.id = this.$route.query.id;
|
||||||
if (this.id) {
|
if(this.id){
|
||||||
let status = this.$store.state.wordsets.getSetStatus(this.class_name, this.id);
|
let status = this.$store.state.wordsets.getSetStatus(this.class_name,this.id);
|
||||||
if (status) {
|
if(status){
|
||||||
this.name = status.name;
|
this.name = status.name;
|
||||||
}
|
}
|
||||||
this.table = this.$store.state.wordsets.getSet(this.id);
|
this.table = this.$store.state.wordsets.getSet(this.id);
|
||||||
|
|
@ -257,31 +187,31 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@media screen and (max-width: 500px) {
|
@media screen and (max-width: 500px) {
|
||||||
#main {
|
#main{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title{
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 500px) {
|
@media screen and (min-width: 500px) {
|
||||||
.title {
|
.title{
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container{
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
height: calc(100% - 70px);
|
height: calc(100% - 70px);
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#main{
|
||||||
height: calc(100% - 50px);
|
height: calc(100% - 50px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,61 +6,46 @@
|
||||||
<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 class="colbox">
|
<div class="pconly">
|
||||||
<el-button @click="$router.push('/manage/new')" type="success"><box-icon color="white"
|
<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="18px"></box-icon>导出</el-button>
|
||||||
|
<el-button @click="import_set" type="warning"><box-icon color="white" name='import'
|
||||||
|
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>
|
name='plus'></box-icon>新建单词本</el-button>
|
||||||
<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>
|
</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="aside">
|
<el-aside id="sidebar">
|
||||||
<div id="sidebar" class="sidebar-hidden">
|
<div class="sidebar-title">
|
||||||
<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"
|
||||||
</div>
|
@click="view(class_name)" class="sidebar-item">
|
||||||
<div v-for="class_name in $store.state.wordsets._allclass" :title="class_name" :key="class_name"
|
{{ class_name }}
|
||||||
@click="view(class_name)" class="sidebar-item">
|
</div>
|
||||||
{{ class_name }}
|
<div class="sidebar-title">
|
||||||
</div>
|
|在线
|
||||||
<div class="sidebar-title">
|
</div>
|
||||||
|在线
|
<div v-for="set in Object.keys(online_wordsets)" :key="set">
|
||||||
</div>
|
<div v-for="(set_class, class_name) in online_wordsets[set]" :title="class_name" :key="class_name"
|
||||||
<div v-for="set in Object.keys(online_wordsets)" :key="set">
|
@click="view_online(set, class_name)" class="sidebar-item">
|
||||||
<div v-for="(set_class, class_name) in online_wordsets[set]" :title="class_name"
|
{{ 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>
|
||||||
<el-main id="wordsets-container">
|
<el-main id="wordsets-container">
|
||||||
<div id="sets-container">
|
<div id="sets-container">
|
||||||
<div v-if="mode === 0" class="colbox wordclass">
|
<div v-if="mode === 0" class="colbox wordclass">
|
||||||
<div v-for="(wordset, index) in $store.state.wordsets.getClass(view_wordsets)" :key="index"
|
<div v-for="(wordset, index) in $store.state.wordsets.getClass(view_wordsets)" :key="index" class="wordset rowbox">
|
||||||
class="wordset rowbox">
|
|
||||||
<div class="no">
|
<div class="no">
|
||||||
{{ index + 1 }}
|
{{ index + 1 }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -88,12 +73,14 @@
|
||||||
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
|
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
|
||||||
</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)"></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>
|
||||||
|
|
@ -101,6 +88,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
|
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "SetList",
|
name: "SetList",
|
||||||
|
|
@ -140,20 +128,20 @@ export default {
|
||||||
del(class_name, id, index) {
|
del(class_name, id, index) {
|
||||||
ElMessageBox.confirm("确定要删除吗？")
|
ElMessageBox.confirm("确定要删除吗？")
|
||||||
.then(() => {
|
.then(() => {
|
||||||
this.$store.state.wordsets.delSet(class_name, index);
|
this.$store.state.wordsets.delSet(class_name,index);
|
||||||
ElMessage(`已经删除 ${class_name} ${id}`);
|
ElMessage(`已经删除 ${class_name} ${id}`);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
edit(id) {
|
edit(id) {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "./manage/edit",
|
path: "./manage/edit",
|
||||||
query: { id, classname: this.view_wordsets }
|
query: { id,classname:this.view_wordsets}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
show(id, name) {
|
show(id) {
|
||||||
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 }
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
async export_set() {
|
async export_set() {
|
||||||
|
|
@ -176,11 +164,8 @@ export default {
|
||||||
},
|
},
|
||||||
taggle_sidebar() {
|
taggle_sidebar() {
|
||||||
let node = document.getElementById("sidebar");
|
let node = document.getElementById("sidebar");
|
||||||
let class_name = "sidebar-hidden";
|
if (node.style.width === "180px") node.style.width = "0";
|
||||||
if(node.classList.contains(class_name)){
|
else node.style.width = "180px";
|
||||||
node.classList.remove(class_name);
|
|
||||||
}
|
|
||||||
else node.classList.add(class_name);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -191,7 +176,7 @@ export default {
|
||||||
this.view(first_set);
|
this.view(first_set);
|
||||||
}, 0);
|
}, 0);
|
||||||
}
|
}
|
||||||
this.$axios.get("wordset/list").then(
|
axios.get("/wordset/list").then(
|
||||||
(res) => {
|
(res) => {
|
||||||
this.online_wordsets = res.data;
|
this.online_wordsets = res.data;
|
||||||
}
|
}
|
||||||
|
|
@ -218,21 +203,9 @@ export default {
|
||||||
height: 70px;
|
height: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aside {
|
|
||||||
width: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
position: absolute;
|
width: 0;
|
||||||
width: 180px;
|
|
||||||
margin-top: 20px;
|
|
||||||
transition: .5s;
|
transition: .5s;
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-hidden{
|
|
||||||
transform: translate(-100%,0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wordset {
|
.wordset {
|
||||||
|
|
@ -270,7 +243,6 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
#show-sidebar {
|
#show-sidebar {
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -278,8 +250,9 @@ export default {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
bottom: 0;
|
position: absolute;
|
||||||
right: -50px;
|
bottom: 20px;
|
||||||
|
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);
|
||||||
|
|
@ -290,7 +263,6 @@ export default {
|
||||||
#wordsets-container {
|
#wordsets-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
transition: .5s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sets-container {
|
#sets-container {
|
||||||
|
|
@ -315,15 +287,8 @@ export default {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aside {
|
|
||||||
width:180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
width: 180px;
|
width: 180px;
|
||||||
animation: sidebar-enter ease-out .6s backwards;
|
|
||||||
padding-left: 10px;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wordset {
|
.wordset {
|
||||||
|
|
@ -331,7 +296,7 @@ export default {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
height: 220px;
|
height: 220px;
|
||||||
width: 170px;
|
width: 170px;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no {
|
.no {
|
||||||
|
|
@ -360,30 +325,29 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wordset {
|
.wordset{
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
transition: .5s;
|
transition: .5s;
|
||||||
border: solid 1px var(--bd-color);
|
border: solid 1px var(--bd-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wordset:hover {
|
.wordset:hover{
|
||||||
box-shadow: var(--el-box-shadow);
|
box-shadow: var(--el-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar {
|
|
||||||
background-color: var(--bg-color-solid);
|
|
||||||
border-radius: 5px;
|
|
||||||
height: calc(100% - 100px);
|
|
||||||
border: 1px solid var(--bd-color);
|
|
||||||
transition: .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar-content{
|
|
||||||
width: 100%;
|
#sidebar {
|
||||||
height: 100%;
|
background-color: var(--bg-color);
|
||||||
|
border-radius: 5px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
animation: sidebar-enter ease-out .6s backwards;
|
||||||
|
height: calc(100% - 100px);
|
||||||
|
padding-left: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
border: 1px solid var(--bd-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-title {
|
.sidebar-title {
|
||||||
|
|
@ -454,8 +418,4 @@ 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>
|
||||||
|
|
@ -83,6 +83,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import axios from 'axios';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -160,7 +161,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.addEventListener('keyup', this.key_listener);
|
document.addEventListener('keyup', this.key_listener);
|
||||||
this.$axios.get("wordset/list").then((res, err) => {
|
axios.get("/wordset/list").then((res, err) => {
|
||||||
if (err) {
|
if (err) {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: "在线词库加载失败",
|
message: "在线词库加载失败",
|
||||||
|
|
@ -206,8 +207,7 @@ export default {
|
||||||
/* margin: 20px; */
|
/* margin: 20px; */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column
|
||||||
margin-top:10px;
|
|
||||||
}
|
}
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: 23px;
|
font-size: 23px;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import axios from './request.js'
|
import axios from 'axios'
|
||||||
const limit = 10;
|
const limit = 10;
|
||||||
export default class _history {
|
export default class _history {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|
@ -81,7 +81,7 @@ export default class _history {
|
||||||
else return this.handle_err("单词本不存在",err);
|
else return this.handle_err("单词本不存在",err);
|
||||||
}
|
}
|
||||||
for (let i of history.onlinesets) {
|
for (let i of history.onlinesets) {
|
||||||
let res = await axios.get("wordset/detail", {
|
let res = await axios.get("/wordset/detail", {
|
||||||
params: i
|
params: i
|
||||||
})
|
})
|
||||||
if (res.status != 200) {
|
if (res.status != 200) {
|
||||||
|
|
@ -97,17 +97,17 @@ export default class _history {
|
||||||
}
|
}
|
||||||
else words = words.concat(...temp);
|
else words = words.concat(...temp);
|
||||||
}
|
}
|
||||||
history.total = words.length;
|
|
||||||
if(words.length <= 0){
|
|
||||||
return this.handle_err("单词本为空",err);
|
|
||||||
}
|
|
||||||
let arr = Array.from(new Array(words.length).keys());
|
let arr = Array.from(new Array(words.length).keys());
|
||||||
if(history.settings.shuffle){
|
if(history.settings.shuffle){
|
||||||
let seed = history.settings.seed;
|
let seed = history.settings.seed;
|
||||||
for (let i = words.length - 1; i > 0; i--) {
|
for (let i = this.total - 1; i > 0; i--) {
|
||||||
[arr[i], arr[seed % i]] = [arr[seed % i], arr[i]];
|
[arr[i], arr[seed % i]] = [arr[seed % i], arr[i]];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if(words.length <= 0){
|
||||||
|
return this.handle_err("单词本为空",err);
|
||||||
|
}
|
||||||
|
history.total = words.length;
|
||||||
this.save();
|
this.save();
|
||||||
if (typeof callback === 'function') {
|
if (typeof callback === 'function') {
|
||||||
callback(words,history.current,arr,history.settings);
|
callback(words,history.current,arr,history.settings);
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
const instance = axios.create({
|
|
||||||
baseURL:"./",
|
|
||||||
timeout:6000,
|
|
||||||
})
|
|
||||||
|
|
||||||
export default instance;
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
import uuid from 'node-uuid';
|
import uuid from 'node-uuid';
|
||||||
|
|
||||||
|
|
||||||
export default class _wordset {
|
export default class _wordset {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.sets = {};
|
this.sets = {};
|
||||||
|
|
@ -41,14 +40,6 @@ export default class _wordset {
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
getId(class_name,id){
|
|
||||||
let set_class = this.sets[class_name];
|
|
||||||
for(let index in set_class){
|
|
||||||
if(set_class[index].id === id){
|
|
||||||
return index;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
getSet(id) {
|
getSet(id) {
|
||||||
let sets = JSON.parse(localStorage.getItem(id));
|
let sets = JSON.parse(localStorage.getItem(id));
|
||||||
if (sets) {
|
if (sets) {
|
||||||
|
|
@ -84,7 +75,7 @@ export default class _wordset {
|
||||||
});
|
});
|
||||||
localStorage.setItem(id, JSON.stringify([]));
|
localStorage.setItem(id, JSON.stringify([]));
|
||||||
this.save();
|
this.save();
|
||||||
return id;
|
return;
|
||||||
}
|
}
|
||||||
saveSet(id,data){
|
saveSet(id,data){
|
||||||
localStorage.setItem(id, JSON.stringify(data));
|
localStorage.setItem(id, JSON.stringify(data));
|
||||||
|
|
@ -101,24 +92,6 @@ export default class _wordset {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
addSetTo(origin_id,dest_id){
|
|
||||||
let origin_set = this.getSet(origin_id);
|
|
||||||
let dest_set = this.getSet(dest_id);
|
|
||||||
let set={};
|
|
||||||
origin_set.forEach(element => {
|
|
||||||
set[element.word] = element;
|
|
||||||
});
|
|
||||||
dest_set.forEach(element => {
|
|
||||||
set[element.word] = element;
|
|
||||||
});
|
|
||||||
set = Object.values(set);
|
|
||||||
this.saveSet(dest_id,set);
|
|
||||||
return origin_set.length + dest_set.length - set.length;
|
|
||||||
}
|
|
||||||
fromArray(arr,class_name,name){
|
|
||||||
let id = this.addSet(class_name,name);
|
|
||||||
this.saveSet(id,arr);
|
|
||||||
}
|
|
||||||
async import_set(callback){
|
async import_set(callback){
|
||||||
let [fileHandle] = await window.showOpenFilePicker({
|
let [fileHandle] = await window.showOpenFilePicker({
|
||||||
types: [
|
types: [
|
||||||
|
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
import {
|
|
||||||
ElForm,
|
|
||||||
ElButton,
|
|
||||||
ElInput,
|
|
||||||
ElCheckbox,
|
|
||||||
ElDialog,
|
|
||||||
ElTable,
|
|
||||||
ElStep,
|
|
||||||
ElLink,
|
|
||||||
ElCard,
|
|
||||||
ElCheckboxGroup,
|
|
||||||
ElDropdown,
|
|
||||||
ElFooter,
|
|
||||||
ElMain,
|
|
||||||
ElContainer,
|
|
||||||
ElHeader,
|
|
||||||
ElPageHeader,
|
|
||||||
ElTabs,
|
|
||||||
ElTabPane,
|
|
||||||
ElSteps,
|
|
||||||
ElSwitch,
|
|
||||||
ElSelect,
|
|
||||||
ElOption,
|
|
||||||
} from 'element-plus'
|
|
||||||
|
|
||||||
const element = {
|
|
||||||
install: function(app) {
|
|
||||||
app.use(ElForm)
|
|
||||||
app.use(ElButton)
|
|
||||||
app.use(ElInput)
|
|
||||||
app.use(ElCheckbox)
|
|
||||||
app.use(ElDialog)
|
|
||||||
app.use(ElTable)
|
|
||||||
app.use(ElStep)
|
|
||||||
app.use(ElLink)
|
|
||||||
app.use(ElCard)
|
|
||||||
app.use(ElCheckboxGroup)
|
|
||||||
app.use(ElDropdown)
|
|
||||||
app.use(ElFooter)
|
|
||||||
app.use(ElMain)
|
|
||||||
app.use(ElContainer)
|
|
||||||
app.use(ElHeader)
|
|
||||||
app.use(ElPageHeader)
|
|
||||||
app.use(ElTabPane)
|
|
||||||
app.use(ElSteps)
|
|
||||||
app.use(ElTabs)
|
|
||||||
app.use(ElSwitch)
|
|
||||||
app.use(ElSelect)
|
|
||||||
app.use(ElOption)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default element
|
|
||||||
|
|
@ -1,13 +1,11 @@
|
||||||
import {createApp} from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import { createStore } from 'vuex'
|
import { createStore } from 'vuex'
|
||||||
// import ElementPlus from 'element-plus'
|
import ElementPlus from 'element-plus'
|
||||||
import element from './loader/el-loader'
|
|
||||||
import 'element-plus/dist/index.css'
|
import 'element-plus/dist/index.css'
|
||||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||||
import 'boxicons'
|
import 'boxicons'
|
||||||
import router from './router.js'
|
import router from './router.js'
|
||||||
import axios from './js/request.js'
|
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
const store = createStore({
|
const store = createStore({
|
||||||
|
|
@ -15,7 +13,6 @@ const store = createStore({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
app.use(store);
|
app.use(store);
|
||||||
app.use(element);
|
app.use(ElementPlus);
|
||||||
app.use(router);
|
app.use(router);
|
||||||
app.config.globalProperties.$axios = axios;
|
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
|
@ -23,29 +23,6 @@ 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第一个正式版
|
||||||
|
|
@ -65,16 +42,6 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
|
||||||
- （已修复）查看之前的单词时溢出的错误
|
- （已修复）查看之前的单词时溢出的错误
|
||||||
- （解决中）手机端适配问题
|
- （解决中）手机端适配问题
|
||||||
|
|
||||||
#### Patch 1
|
|
||||||
|
|
||||||
- 增加了移动端底部导航栏
|
|
||||||
- 修复了无法随机顺序问题
|
|
||||||
|
|
||||||
#### Patch 2
|
|
||||||
|
|
||||||
- 封装网络请求
|
|
||||||
- 其他源码优化
|
|
||||||
|
|
||||||
### 1.0
|
### 1.0
|
||||||
|
|
||||||
#### 1.0 及之前的版本汇总
|
#### 1.0 及之前的版本汇总
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,8 @@ 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://localhost:443'
|
||||||
},
|
},
|
||||||
chainWebpack: config => {
|
chainWebpack: config => {
|
||||||
config.module
|
config.module
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue