Compare commits
12 Commits
| Author | SHA1 | Date |
|---|---|---|
cast1e
|
8c34ca8c4c | |
|
cast1e
|
15a51caf4b | |
|
cast1e
|
02d0402c15 | |
|
cast1e
|
5fd32162ac | |
|
cast1e
|
4cf4fdce17 | |
|
cast1e
|
5c258b85e8 | |
|
cast1e
|
480d874910 | |
|
cast1e
|
aea4b310b7 | |
|
cast1e
|
9ad162a5b9 | |
|
cast1e
|
a4a5e7ce9b | |
|
cast1e
|
34ad23db7a | |
|
cast1e
|
585ed83a3f |
|
|
@ -2,6 +2,7 @@
|
|||
node_modules
|
||||
/dist
|
||||
/test
|
||||
page/
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
|
|
@ -21,3 +22,6 @@ pnpm-debug.log*
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
auto-imports.d.ts
|
||||
components.d.ts
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<title>
|
||||
Wordin
|
||||
</title>
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/misans@4.0.0/lib/Normal/MiSans-Medium.min.css" media="print" onload="this.media='all'" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but doesn't work properly without JavaScript enabled.
|
||||
Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
39
package.json
39
package.json
|
|
@ -2,32 +2,49 @@
|
|||
"name": "wordin",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jamescoyle/vue-icon": "^0.1.2",
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@types/animejs": "^3.1.13",
|
||||
"animejs": "^3.2.2",
|
||||
"axios": "^1.5.1",
|
||||
"boxicons": "^2.1.4",
|
||||
"core-js": "^3.8.3",
|
||||
"crypto-js": "^4.1.1",
|
||||
"marked": "^11.1.1",
|
||||
"node-uuid": "^1.4.8",
|
||||
"vue": "^3.2.13",
|
||||
"pinia": "^3.0.1",
|
||||
"unplugin-vue-markdown": "^28.3.1",
|
||||
"uuid": "^11.1.0",
|
||||
"vite-plugin-vuetify": "^2.1.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-eslint-parser": "^10.1.1",
|
||||
"vue-router": "^4.2.5",
|
||||
"vuex": "^4.1.0"
|
||||
"vuetify": "^3.7.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@types/crypto-js": "^4.2.2",
|
||||
"@types/marked": "^5.0.2",
|
||||
"@types/node": "^20.17.23",
|
||||
"@types/node-uuid": "^0.0.29",
|
||||
"@types/web": "^0.0.208",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"element-plus": "^2.3.14",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"raw-loader": "^4.0.2"
|
||||
"eslint": "^9.21.0",
|
||||
"eslint-plugin-vue": "^10.0.0",
|
||||
"typescript": "^5.8.2",
|
||||
"unplugin-auto-import": "^19.1.1",
|
||||
"unplugin-vue-components": "^28.4.1",
|
||||
"vite": "^6.2.0",
|
||||
"vue-tsc": "^2.2.8"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>
|
||||
<%= htmlWebpackPlugin.options.title %>
|
||||
</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||
Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"requestId":"8f5a2a3c-2a9e-4929-906d-d1f5195fdef4","errorCode":"202","l":"en2zh-CHS"}
|
||||
240
src/App.vue
240
src/App.vue
|
|
@ -1,194 +1,84 @@
|
|||
<template>
|
||||
<div id="navibar" class="pconly" >
|
||||
<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('/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('/about')" class="link">关于</el-link></div>
|
||||
<div class="pconly main-navibar">
|
||||
<div class="main-navibar">
|
||||
<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('/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('/about')" class="link">关于</el-link></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-app-view">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div class="mbonly">
|
||||
<div class="main-navibar">
|
||||
<div class="navi-item"><v-icon @click="$router.push('/')">mdi-home</v-icon> <div>主页</div></div>
|
||||
<div class="navi-item"><v-icon @click="$router.push('/select')">mdi-book</v-icon> <div>背诵</div></div>
|
||||
<div class="navi-item"><v-icon @click="$router.push('/manage')">mdi-folder</v-icon><div>浏览</div></div>
|
||||
<div class="navi-item"><v-icon @click="$router.push('/manual')">mdi-file</v-icon><div>说明</div></div>
|
||||
<div class="navi-item"><v-icon @click="$router.push('/about')">mdi-information</v-icon><div>关于</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<router-view style="margin-top: 10px;"></router-view>
|
||||
<!-- <div id="navibar" class="mbonly"></div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _wordsets from './js/wordsets'
|
||||
import _history from './js/history';
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
window.htmlClasses = [];
|
||||
window.addHtmlclasses = (classname) => {
|
||||
let index = window.htmlClasses.indexOf(classname);
|
||||
if (index === -1) {
|
||||
window.htmlClasses.push(classname);
|
||||
document.getElementsByTagName("html")[0].className = window.htmlClasses.join(" ");
|
||||
}
|
||||
}
|
||||
window.delHtmlclasses = (classname) => {
|
||||
let index = window.htmlClasses.indexOf(classname);
|
||||
if (index != -1) {
|
||||
window.htmlClasses.splice(index, 1);
|
||||
document.getElementsByTagName("html")[0].className = window.htmlClasses.join(" ");
|
||||
}
|
||||
}
|
||||
const router = useRouter()
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(index) {
|
||||
this.index = index;
|
||||
},
|
||||
go(path) {
|
||||
this.$router.push(path);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.state.wordsets = new _wordsets();
|
||||
this.$store.state.history = new _history();
|
||||
// let res = localStorage.getItem("bgimg");
|
||||
// if (res) {
|
||||
// document.body.style.backgroundImage = `url("${res}")`;
|
||||
// document.body.style.backgroundSize = "cover";
|
||||
// window.addHtmlclasses("bgimged");
|
||||
// }
|
||||
const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
if (isDarkTheme.matches) window.addHtmlclasses("dark");
|
||||
isDarkTheme.addEventListener('change', (event) => {
|
||||
if (event.matches) {
|
||||
window.addHtmlclasses("dark");
|
||||
} else {
|
||||
window.delHtmlclasses("dark");
|
||||
}
|
||||
});
|
||||
}
|
||||
const go = (path: string) => {
|
||||
router.push(path)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
.pconly {
|
||||
display: none;
|
||||
.main-navibar {
|
||||
height: 60px;
|
||||
border-top: solid 1px var(--bd-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
background-color: var(--navi-bg-color);
|
||||
backdrop-filter: blur(10px);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes enter {
|
||||
0% {
|
||||
translate: 100px 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
.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) {
|
||||
.mbonly {
|
||||
display: none;
|
||||
.main-navibar {
|
||||
height: 60px;
|
||||
border-bottom: solid 1px var(--bd-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: var(--navi-bg-color);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@keyframes enter {
|
||||
0% {
|
||||
translate: 100px 0;
|
||||
opacity: 0;
|
||||
/* filter: blur(20px); */
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
/* filter: blur(0px); */
|
||||
}
|
||||
.navi-item {
|
||||
height: 100%;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
justify-content: baseline;
|
||||
margin-left: 20px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
--bg-color: #ffffffae;
|
||||
--text-color: #464646;
|
||||
--bd-color: #bbbbbb99;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--bg-color: #2a2a2a88;
|
||||
--text-color: #c0c0c0;
|
||||
--bd-color: #7f7f7f7c;
|
||||
--navi-bg-color: #131313e2;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc(100% - 20px);
|
||||
width: calc(100% - 20px);
|
||||
/* padding: 20px; */
|
||||
animation: enter ease-out .6s backwards;
|
||||
}
|
||||
|
||||
.colbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.rowbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 8px;
|
||||
border: solid 1px var(--bd-color);
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
color: var(--text-color);
|
||||
transition: .5s;
|
||||
}
|
||||
.card:hover{
|
||||
box-shadow: var(--el-box-shadow);
|
||||
}
|
||||
|
||||
html.bgimged .card {
|
||||
background-color: var(--bg-color);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mid-text {
|
||||
width: 65px;
|
||||
transform: translate(0, 6px);
|
||||
color: var(--text-color);
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.para {
|
||||
margin: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
#navibar {
|
||||
height: 60px;
|
||||
border-bottom: solid 1px var(--bd-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: var(--navi-bg-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 {
|
||||
font-size: 28px;
|
||||
margin-right: 20px;
|
||||
|
|
@ -198,4 +88,14 @@ html.bgimged .card {
|
|||
.link {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.main-app-view{
|
||||
height: calc(100% - 60px);
|
||||
width: 100%;
|
||||
}
|
||||
.main-navibar{
|
||||
background-color: var(--bg-color-solid);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<style scoped>
|
||||
html:not(.dark) .dynamic-bg-container {
|
||||
background: linear-gradient(135deg,
|
||||
#ffe8f3,
|
||||
#d9f3ff);
|
||||
}
|
||||
|
||||
html:not(.dark) .dynamic-bg-wrapper::before,
|
||||
html:not(.dark) .dynamic-bg-wrapper::after {
|
||||
background: conic-gradient(from 0deg,
|
||||
#ff9aa2,
|
||||
/* Soft pink */
|
||||
#ffb7b2,
|
||||
/* Light peach */
|
||||
#ffdac1,
|
||||
/* Pastel yellow */
|
||||
#e2f0cb,
|
||||
/* Mint green */
|
||||
#a2e4ff,
|
||||
/* Baby blue */
|
||||
#c9afff,
|
||||
/* Lavender */
|
||||
#ffb7b2,
|
||||
#ff9aa2);
|
||||
|
||||
}
|
||||
|
||||
html.dark .dynamic-bg-container {
|
||||
background: linear-gradient(135deg,
|
||||
#331a26,
|
||||
#1a2a33);
|
||||
}
|
||||
|
||||
html.dark .dynamic-bg-wrapper::before,
|
||||
html.dark .dynamic-bg-wrapper::after {
|
||||
background: conic-gradient(from 0deg,
|
||||
#662a30,
|
||||
#663a36,
|
||||
#664a40,
|
||||
#3a4a33,
|
||||
#2a4a66,
|
||||
#3a2a66,
|
||||
#663a36,
|
||||
#662a30);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.dynamic-bg-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height:max-content;
|
||||
width: 100%;
|
||||
/* Soft pastel gradient background */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dynamic-bg-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
/* Fill the entire screen */
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.dynamic-bg-wrapper::before,
|
||||
.dynamic-bg-wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: rotate 8s linear infinite;
|
||||
filter: blur(50px);
|
||||
/* Create a soft glowing effect */
|
||||
opacity: 0.8;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
/* Secondary rotating layer for depth */
|
||||
.dynamic-bg-wrapper::after {
|
||||
width: 180%;
|
||||
height: 180%;
|
||||
animation: rotate-reverse 10s linear infinite;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Rotating animations */
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-reverse {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dynamic-bg-content {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
margin-bottom: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="dynamic-bg-container">
|
||||
<div class="dynamic-bg-wrapper"></div>
|
||||
<div class="dynamic-bg-content">
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,217 +0,0 @@
|
|||
<template>
|
||||
<div class="container rowbox" style="height: calc(100% - 65px); align-items: center;width: 100%;overflow: auto;">
|
||||
<div class="colbox" style="width: 95%;margin-top: 10px;">
|
||||
<div style="flex-grow: 2;margin:30px;" class="rowbox">
|
||||
<div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
|
||||
<div id="title">wordIn</div>
|
||||
<div>当前版本: 1.01 更新时间:2024年1月11日 10:43 AM</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1;align-items: center;" class="colbox card">
|
||||
<router-link to="/select" class="button">
|
||||
开始新背诵
|
||||
</router-link>
|
||||
<router-link to="/manage" class="button">
|
||||
查看单词本
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div id="history" class="wrapper">
|
||||
<div class="title" style="margin-left: 20px;margin-top: 10px;width: 95%;">历史记录</div>
|
||||
<div class="card colbox history-item" v-for="(history, index) in $store.state.history._content" :key="index">
|
||||
<div style="width: 25px;">{{ index + 1 }}</div>
|
||||
<div style="width: 200px;">背诵进度: {{ history.current }}/{{ history.total || "Unknown" }}</div>
|
||||
<div style="flex-grow: 1;"> {{ (new Date(history.modified)) }}</div>
|
||||
<el-button @click="restart(index)">继续</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="setting">
|
||||
<box-icon class="btn" color="var(--text-color)" name='cog' @click="open_setting_dialog"></box-icon>
|
||||
</div>
|
||||
<el-dialog v-model="settingVisible" title="设置" width="75%">
|
||||
<div class="title">更换自定义背景</div>
|
||||
<div class="colbox" style="margin: 10px;">
|
||||
<el-input v-model="img_url"></el-input>
|
||||
<el-button type="primary" style="margin-left: 10px;" @click="set_bg">确定</el-button>
|
||||
</div>
|
||||
<div class="title">黑暗模式</div>
|
||||
<el-switch @change="toggleDark" v-model="isdark" size="large" active-text="Dark" inactive-text="Light" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "HomePage",
|
||||
data() {
|
||||
return {
|
||||
img_url: "",
|
||||
settingVisible: false,
|
||||
isdark: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
set_bg() {
|
||||
localStorage.setItem("bgimg", this.img_url);
|
||||
window.location.reload();
|
||||
},
|
||||
open_setting_dialog() {
|
||||
this.settingVisible = true;
|
||||
},
|
||||
toggleDark() {
|
||||
if (this.isdark) {
|
||||
window.addHtmlclasses("dark");
|
||||
} else {
|
||||
window.delHtmlclasses("dark");
|
||||
}
|
||||
},
|
||||
restart(index){
|
||||
this.$router.push({
|
||||
path: "./recite",
|
||||
query: { index}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (document.getElementsByTagName("html")[0].className.indexOf("dark") != -1) {
|
||||
this.isdark = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
#title {
|
||||
font-size: 80px;
|
||||
color: var(--text-color);
|
||||
text-shadow: #00000057 5px 5px 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
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;
|
||||
}
|
||||
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
#title {
|
||||
font-size: 100px;
|
||||
color: var(--text-color);
|
||||
text-shadow: #00000057 5px 5px 20px;
|
||||
line-height: 100px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
font-size: 35px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin: 80px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
#ball {
|
||||
width: 1350px;
|
||||
height: 1350px;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
}
|
||||
}
|
||||
|
||||
#history{
|
||||
width: calc(95% - 20px);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border: 1px solid var(--bd-color);
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
margin: 20px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#setting {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
font-size: 25px;
|
||||
font-weight: 800;
|
||||
border-radius: 5px;
|
||||
border: solid 1px #FAFAFA;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-shadow: var(--el-box-shadow);
|
||||
background-color: rgba(255, 255, 255, 0.237);
|
||||
backdrop-filter: blur(20px);
|
||||
cursor: pointer;
|
||||
transition: .5s;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html.dark .button {
|
||||
background-color: rgba(56, 56, 56, 0.301);
|
||||
border: solid 1px #848484;
|
||||
box-shadow: 0px 12px 32px 4px rgba(198, 198, 198, 0.078), 0px 8px 20px rgba(216, 216, 216, 0.171);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
box-shadow: var(--el-box-shadow) inset #00000017 0px 500px;
|
||||
}
|
||||
|
||||
#ball {
|
||||
background-image: linear-gradient(120deg, #e0c3fcca 0%, #8ec5fcc4 100%);
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
animation: enter .8s ease-out;
|
||||
box-shadow: #e0c3fcca 0px 0px 50px 10px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
html.bgimged #ball {
|
||||
backdrop-filter: blur(20px);
|
||||
}</style>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div id="mask" v-if="visible_" @click.self="handleClose">
|
||||
<div ref="bg" id="bg">
|
||||
<div id="content">
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
<div id="close" @click="handleClose">
|
||||
<v-icon :size="25" icon="mdi-close"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick, onMounted } from 'vue'
|
||||
import "@/styles/cui.css"
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean,
|
||||
width?: string,
|
||||
height?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:visible'])
|
||||
|
||||
const visible_ = ref(false);
|
||||
const bg = ref<HTMLElement | null>(null);
|
||||
|
||||
const handleClose = () => {
|
||||
emit("update:visible", false);
|
||||
};
|
||||
|
||||
const resize = () => {
|
||||
if (bg.value) {
|
||||
bg.value.style.width = props.width || "500px";
|
||||
bg.value.style.height = props.height || "300px";
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.visible, (val) => {
|
||||
if (val) {
|
||||
visible_.value = true;
|
||||
nextTick(() => resize());
|
||||
} else {
|
||||
if (bg.value) bg.value.style.animation = "cui-dialog-disappear .3s ease-in";
|
||||
setTimeout(() => { visible_.value = false }, 295);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (props.visible) nextTick(() => resize());
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#mask {
|
||||
z-index: 500;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(10px);
|
||||
animation: cui-dialog-blur .6s;
|
||||
}
|
||||
|
||||
#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 .6s cubic-bezier(0, 0.6, 0.2, 1.0);
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
<template>
|
||||
<div class="container" style="overflow: auto;">
|
||||
<el-page-header style="margin: 10px;" @back="this.$router.push('/manage');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div class="colbox" id="main">
|
||||
<div style="flex-grow: 1;" class="card">
|
||||
<el-table :data="table" style="height:calc(100% - 10px);overflow: auto;border-radius: 10px;">
|
||||
<el-table-column type="index" />
|
||||
<el-table-column prop="word" label="单词" />
|
||||
<el-table-column prop="type" label="词性" />
|
||||
<el-table-column prop="trans" label="翻译" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: "NoteEditor",
|
||||
data() {
|
||||
return {
|
||||
table: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.set = this.$route.query.set;
|
||||
this.book = this.$route.query.book;
|
||||
this.id = this.$route.query.id;
|
||||
if (this.set && this.book && this.id) {
|
||||
axios.get("./wordset/detail", {
|
||||
params:{
|
||||
set: this.set, book: this.book, id: this.id
|
||||
}
|
||||
}).then(
|
||||
(res) => {
|
||||
this.table = res.data;
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#main{
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-bg-color: #FFFFFF00;
|
||||
--el-table-tr-bg-color: #FFFFFF00;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,250 +0,0 @@
|
|||
<template>
|
||||
<div class="container" style="overflow: auto;">
|
||||
<el-page-header style="margin: 10px;" @back="this.$router.push('/manage');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div class="colbox" id="main">
|
||||
<div class="rowbox">
|
||||
<div class="card">
|
||||
<div class="title">添加单词</div>
|
||||
<el-input ref="input1" autofocus @change="focusnext($refs.input2)" v-model="new_word.word"></el-input>
|
||||
<div class="colbox">
|
||||
<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>
|
||||
</div>
|
||||
<div class="colbox">
|
||||
<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-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button @click="add_word()" type="primary">添加</el-button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="title">更改名称</div>
|
||||
<div class="colbox">
|
||||
<el-text class="mx-1" style="width: 60px;">新名称:</el-text>
|
||||
<el-input v-model="new_name"></el-input>
|
||||
</div>
|
||||
<el-button @click="change_name()" type="primary">更改名称</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1;" class="card">
|
||||
<el-table :data="table" style="height: calc(100% - 10px);overflow: auto;border-radius: 10px;">
|
||||
<el-table-column type="index" />
|
||||
<el-table-column prop="word" label="单词" />
|
||||
<el-table-column prop="type" label="词性" />
|
||||
<el-table-column prop="trans" label="翻译" />
|
||||
<el-table-column width="100px" fixed="right" label="操作">
|
||||
<template #default="scope">
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-around;">
|
||||
<box-icon color="var(--text-color)" size="14px" class="btn" name='trash'
|
||||
@click="del_word(scope.$index)"></box-icon>
|
||||
<box-icon color="var(--text-color)" size="14px" class="btn" name='edit-alt'
|
||||
@click="edit_word(scope.$index)"></box-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="word_editing" width="80%">
|
||||
<div class="title">修改单词</div>
|
||||
<el-input v-model="editing_word.word"></el-input>
|
||||
<div class="colbox">
|
||||
<el-text class="mx-1" style="width: 60px;">翻译:</el-text>
|
||||
<el-input v-model="editing_word.trans"></el-input>
|
||||
</div>
|
||||
<div class="colbox">
|
||||
<el-text class="mx-1" style="width: 80px;">词性：</el-text>
|
||||
<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-select>
|
||||
</div>
|
||||
<el-button @click="save_word" type="primary">更改</el-button>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
export default {
|
||||
name: "NoteEditor",
|
||||
data() {
|
||||
return {
|
||||
new_word: {
|
||||
word: "",
|
||||
trans: "",
|
||||
type: "adj.",
|
||||
},
|
||||
editing_word: {
|
||||
word: "",
|
||||
trans: "",
|
||||
type: "adj.",
|
||||
index: 0,
|
||||
},
|
||||
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: [],
|
||||
word_editing: false,
|
||||
new_name: "",
|
||||
name:"",
|
||||
id:""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
focusnext(node) {
|
||||
node.focus();
|
||||
},
|
||||
has_word(word) {
|
||||
for (let i of this.table) {
|
||||
if (i.word === word) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
add_word() {
|
||||
if (this.has_word(this.new_word.word)) {
|
||||
ElMessage({
|
||||
message: `单词 ${this.new_word.word} 已存在`,
|
||||
type: 'error',
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.table.push(Object.assign({}, this.new_word));
|
||||
this.$store.state.wordsets.saveSet(this.id,this.table);
|
||||
ElMessage({
|
||||
message: `已添加 ${this.new_word.word} (${this.new_word.type})`,
|
||||
type: 'success',
|
||||
});
|
||||
this.new_word.word = "";
|
||||
this.new_word.trans = "";
|
||||
this.$refs.input1.focus();
|
||||
},
|
||||
edit_word(index) {
|
||||
this.editing_word = Object.assign({}, this.table[index]);
|
||||
this.editing_word.index = index;
|
||||
this.word_editing = true;
|
||||
return;
|
||||
},
|
||||
save_word() {
|
||||
if (this.editing_word.word != this.table[this.editing_word.index].word) {
|
||||
if (this.has_word(this.editing_word.word)) {
|
||||
ElMessage({
|
||||
message: `单词 ${this.new_word.word} 已存在`,
|
||||
type: 'error',
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.table[this.editing_word.index] = {
|
||||
word: this.editing_word.word,
|
||||
type: this.editing_word.type,
|
||||
trans: this.editing_word.trans,
|
||||
}
|
||||
this.$store.state.wordsets.saveSet(this.id,this.table);
|
||||
ElMessage({
|
||||
message: `已保存更改`,
|
||||
type: 'success',
|
||||
});
|
||||
this.word_editing = false;
|
||||
},
|
||||
change_name() {
|
||||
let old_name = this.name;
|
||||
this.name = this.new_name;
|
||||
this.$store.state.wordsets.renameSet(this.class_name,this.id,this.new_name);
|
||||
ElMessage({
|
||||
message: `已更改 ${old_name} 为 ${this.name}`,
|
||||
type: 'success',
|
||||
});
|
||||
return;
|
||||
},
|
||||
del_word(index) {
|
||||
let word = this.table[index].word.concat();
|
||||
this.table.splice(index, 1);
|
||||
this.$store.state.wordsets.saveSet(this.id,this.table);
|
||||
ElMessage({
|
||||
message: `已删除 ${word}`,
|
||||
type: 'warning',
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
this.class_name = this.$route.query.classname;
|
||||
this.id = this.$route.query.id;
|
||||
if(this.id){
|
||||
let status = this.$store.state.wordsets.getSetStatus(this.class_name,this.id);
|
||||
if(status){
|
||||
this.name = status.name;
|
||||
}
|
||||
this.table = this.$store.state.wordsets.getSet(this.id);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
#main{
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 25px;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.title{
|
||||
font-size: 35px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.container{
|
||||
padding: 10px;
|
||||
height: calc(100% - 70px);
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#main{
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
#main-container {
|
||||
height: 87%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.card div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#new div {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#sets-container {
|
||||
background-color: var(--bg-color);
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-bg-color: #FFFFFF00;
|
||||
--el-table-tr-bg-color: #FFFFFF00;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,421 +0,0 @@
|
|||
<template>
|
||||
<el-container id="main-container">
|
||||
<el-header id="header" style="">
|
||||
<el-page-header style="margin: 10px;" @back="this.$router.push('/');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 编辑单词本 </span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<div class="pconly">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div class="mbonly">
|
||||
<el-button @click="$router.push('/manage/new')" type="primary"><box-icon color="white"
|
||||
name='plus'></box-icon>新建单词本</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-container style="height:calc(100% - 200px);position: relative;">
|
||||
<el-aside id="sidebar">
|
||||
<div class="sidebar-title">
|
||||
|本地
|
||||
</div>
|
||||
<div v-for="class_name in $store.state.wordsets._allclass" :title="class_name" :key="class_name"
|
||||
@click="view(class_name)" class="sidebar-item">
|
||||
{{ class_name }}
|
||||
</div>
|
||||
<div class="sidebar-title">
|
||||
|在线
|
||||
</div>
|
||||
<div v-for="set in Object.keys(online_wordsets)" :key="set">
|
||||
<div v-for="(set_class, class_name) in online_wordsets[set]" :title="class_name" :key="class_name"
|
||||
@click="view_online(set, class_name)" class="sidebar-item">
|
||||
{{ class_name }}
|
||||
</div>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main id="wordsets-container">
|
||||
<div id="sets-container">
|
||||
<div v-if="mode === 0" class="colbox wordclass">
|
||||
<div v-for="(wordset, index) in $store.state.wordsets.getClass(view_wordsets)" :key="index" class="wordset rowbox">
|
||||
<div class="no">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="title">
|
||||
{{ wordset.name }}
|
||||
</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.id)"></box-icon>
|
||||
<box-icon class="btn" name='trash' color="var(--text-color)"
|
||||
@click="del(view_wordsets, wordset.id, index)"></box-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="mode === 1" class="colbox wordclass">
|
||||
<div v-for="(wordset, index) in online_wordsets[viewing.set][viewing.book]" :key="index"
|
||||
class="wordset rowbox">
|
||||
<div class="title">
|
||||
{{ wordset.name }}
|
||||
</div>
|
||||
<div class="created-date">
|
||||
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
|
||||
</div>
|
||||
<div class="option">
|
||||
<box-icon class="btn" name='show' color="var(--text-color)" @click="show(index)"></box-icon>
|
||||
</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-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: "SetList",
|
||||
data() {
|
||||
return {
|
||||
view_wordsets: "",
|
||||
viewing: {
|
||||
set: "",
|
||||
book: "",
|
||||
},
|
||||
online_wordsets: [],
|
||||
mode: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
view(classname) {
|
||||
this.mode = 0;
|
||||
this.view_wordsets = classname;
|
||||
let node = document.getElementById("wordsets-container").style;
|
||||
node.animation = "";
|
||||
setTimeout(() => {
|
||||
node.animation = "enter ease-out .6s backwards";
|
||||
}, 0);
|
||||
},
|
||||
view_online(set_name, class_name) {
|
||||
this.mode = 1;
|
||||
this.viewing = { set: set_name, book: class_name };
|
||||
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(class_name, id, index) {
|
||||
ElMessageBox.confirm("确定要删除吗？")
|
||||
.then(() => {
|
||||
this.$store.state.wordsets.delSet(class_name,index);
|
||||
ElMessage(`已经删除 ${class_name} ${id}`);
|
||||
});
|
||||
},
|
||||
edit(id) {
|
||||
this.$router.push({
|
||||
path: "./manage/edit",
|
||||
query: { id,classname:this.view_wordsets}
|
||||
})
|
||||
},
|
||||
show(id) {
|
||||
this.$router.push({
|
||||
path: "./manage/show",
|
||||
query: { set: this.viewing.set, book: this.viewing.book, id }
|
||||
})
|
||||
},
|
||||
async export_set() {
|
||||
this.$store.state.wordsets.export_set((cnt) => {
|
||||
ElNotification({
|
||||
type: "success",
|
||||
title: "导出成功",
|
||||
message: `已导出 ${cnt} 本单词本`
|
||||
});
|
||||
})
|
||||
},
|
||||
async import_set() {
|
||||
this.$store.state.wordsets.import_set((cnt) => {
|
||||
ElNotification({
|
||||
type: "success",
|
||||
title: "添加成功",
|
||||
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() {
|
||||
let first_set = this.$store.state.wordsets._firstClass;
|
||||
if (first_set) {
|
||||
setTimeout(() => {
|
||||
this.view(first_set);
|
||||
}, 0);
|
||||
}
|
||||
axios.get("/wordset/list").then(
|
||||
(res) => {
|
||||
this.online_wordsets = res.data;
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
@keyframes sidebar-enter {
|
||||
0% {
|
||||
translate: -100px 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.wordset {
|
||||
border-radius: 13px;
|
||||
padding: 10px;
|
||||
height: 180px;
|
||||
width: 40%;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.wordset {
|
||||
border-radius: 13px;
|
||||
padding: 20px;
|
||||
height: 220px;
|
||||
width: 170px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.wordset{
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
transition: .5s;
|
||||
border: solid 1px var(--bd-color);
|
||||
}
|
||||
|
||||
.wordset:hover{
|
||||
box-shadow: var(--el-box-shadow);
|
||||
}
|
||||
|
||||
|
||||
|
||||
#sidebar {
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 5px;
|
||||
overflow-y: auto;
|
||||
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 {
|
||||
width: 100%;
|
||||
font-size: 25px;
|
||||
line-height: 60px;
|
||||
padding-left: 5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
opacity: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#header {
|
||||
/* border-bottom: solid 1px #bcbcbc; */
|
||||
justify-content: space-between;
|
||||
animation: enter ease-out .6s backwards;
|
||||
}
|
||||
|
||||
#wordsets-container {
|
||||
overflow-x: auto;
|
||||
height: calc(100% - 60px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wordclass {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -1,422 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-page-header style="margin-top:20px;margin-left:20px" @back="$router.push('/')">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 背诵 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div id="test" class="colbox">
|
||||
<div style="flex-grow: 1;" class="card">
|
||||
<div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
|
||||
<div>
|
||||
<textarea autofocus id="input" v-if="current === answered" @input="change" class="answer"
|
||||
spellcheck="false">
|
||||
</textarea>
|
||||
<div v-if="current < answered" class="answer">{{ word.word }}</div>
|
||||
</div>
|
||||
<div id="explain">
|
||||
<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="showAnswer">显示答案</el-button>
|
||||
<el-button v-if="current === answered" type="warning" @click="skip">跳过</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;"
|
||||
@click="audio_play" name='volume-full'></box-icon>
|
||||
</div>
|
||||
<div id="trans">{{ word.type }} {{ word.trans }}</div>
|
||||
</div>
|
||||
<div id="add-to-box" class="card">
|
||||
<el-text class="mx-1 title">加入至</el-text>
|
||||
<div class="colbox para">
|
||||
<div class="mid-text">分组:</div>
|
||||
<el-select v-model="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="set_id" class="m-2" placeholder="Select">
|
||||
<el-option v-for="item in $store.state.wordsets.getClass(set_class)" :key="item.id"
|
||||
:label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button @click="add_to" type="primary">添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
export default {
|
||||
name: "WordRecite",
|
||||
data() {
|
||||
return {
|
||||
wordsets: this.$store.state.wordsets,
|
||||
testWords: [],
|
||||
seq: [],
|
||||
total: 0,
|
||||
current: 0,
|
||||
answered: 0,
|
||||
word: {},
|
||||
set_class: "",
|
||||
set_id: "",
|
||||
online_sets: {},
|
||||
online_ids: {},
|
||||
settings: {
|
||||
direct_answer: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
key_listener(e) {
|
||||
let ctrlKey = e.ctrlKey || e.metaKey;
|
||||
if (ctrlKey) {
|
||||
switch (e.key) {
|
||||
case 'b':
|
||||
this.showAnswer();
|
||||
break;
|
||||
case 'm':
|
||||
this.skip();
|
||||
break;
|
||||
case 'i':
|
||||
this.add_to();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
this.prev();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
this.next();
|
||||
break;
|
||||
case 'y':
|
||||
this.audio_play();
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
e.preventDefault();
|
||||
return;
|
||||
},
|
||||
next() {
|
||||
if (this.current < this.answered) {
|
||||
this.current++;
|
||||
if (this.current === this.total) {
|
||||
ElNotification({
|
||||
message: "您已完成所有单词的背诵",
|
||||
title: "Congratulations!",
|
||||
type: "success"
|
||||
})
|
||||
this.$router.push('/');
|
||||
return;
|
||||
}
|
||||
nextTick(() => {
|
||||
this.show();
|
||||
});
|
||||
}
|
||||
else ElMessage({
|
||||
type: "error",
|
||||
message: "您还未答过该词,跳过请使用ctrl+M",
|
||||
})
|
||||
},
|
||||
skip() {
|
||||
ElMessage({
|
||||
message: "已经跳过该词",
|
||||
type: "info"
|
||||
});
|
||||
this.answered++;
|
||||
this.$store.state.history.count(this.answered);
|
||||
this.next();
|
||||
return;
|
||||
},
|
||||
prev() {
|
||||
if (this.current > 0) {
|
||||
this.current--;
|
||||
this.show();
|
||||
}
|
||||
else ElMessage({
|
||||
type: 'error',
|
||||
message: "已经是第一个单词"
|
||||
})
|
||||
},
|
||||
showAnswer() {
|
||||
if (!this.settings.direct_answer) {
|
||||
let e = document.getElementById("input");
|
||||
if (e.value === "_".repeat(this.word.word.length)) {
|
||||
e.value = this.word.word[0] + "_".repeat(this.word.word.length - 1);
|
||||
e.setSelectionRange(1, 1);
|
||||
ElMessage(`首字母为：${this.word.word[0]}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
ElMessage(`答案：${this.word.word}`);
|
||||
return;
|
||||
},
|
||||
show() {
|
||||
this.word = this.testWords[this.seq[this.current]];
|
||||
if (this.current === this.answered) {
|
||||
let e = document.getElementById("input");
|
||||
e.value = "_".repeat(this.word.word.length);
|
||||
e.setSelectionRange(0, 0);
|
||||
e.style.height = "0";
|
||||
setTimeout(() => {
|
||||
e.style.height = `${e.scrollHeight}px`;
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
change() {
|
||||
let e = document.getElementById("input");
|
||||
let cur = e.selectionStart;
|
||||
let t = e.value, n = t.indexOf("_"), o;
|
||||
if (n == this.word.word.length) {
|
||||
if (t.substring(0, t.length - 1).toLowerCase() == this.word.word.toLowerCase()) {
|
||||
ElMessage({
|
||||
title: "Success",
|
||||
message: "正确",
|
||||
type: "success"
|
||||
});
|
||||
this.answered++;
|
||||
this.$store.state.history.count(this.answered);
|
||||
this.next();
|
||||
return;
|
||||
}
|
||||
ElMessage({
|
||||
title: "Error",
|
||||
message: "错误",
|
||||
type: "error"
|
||||
});
|
||||
o = "_".repeat(this.word.word.length);
|
||||
e.value = o;
|
||||
e.setSelectionRange(0, 0);
|
||||
e.style.height = "0";
|
||||
setTimeout(() => {
|
||||
e.style.height = `${e.scrollHeight}px`;
|
||||
}, 200);
|
||||
return;
|
||||
} else {
|
||||
n == -1 ? o = "_".repeat(this.word.word.length) : (o = t.substring(0, n),
|
||||
o += "_".repeat(this.word.word.length - n));
|
||||
e.value = o;
|
||||
if (cur > n) {
|
||||
e.setSelectionRange(n, n);
|
||||
}
|
||||
else e.setSelectionRange(cur, cur);
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (parseInt(e.style.height) < e.scrollHeight) {
|
||||
e.style.height = `${e.scrollHeight}px`;
|
||||
}
|
||||
}, 0);
|
||||
e.focus();
|
||||
},
|
||||
audio_play() {
|
||||
var t = new Audio("https://dict.youdao.com/dictvoice?audio=" + this.word.word);
|
||||
t.play();
|
||||
},
|
||||
terminate() {
|
||||
ElMessageBox.confirm("确定要终止吗？")
|
||||
.then(() => {
|
||||
this.$router.push('/');
|
||||
ElNotification({
|
||||
message: "背诵已终止",
|
||||
type: "info",
|
||||
title: "Terminate"
|
||||
});
|
||||
});
|
||||
},
|
||||
add_to() {
|
||||
if (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);
|
||||
localStorage.setItem(this.set_id, JSON.stringify(data));
|
||||
ElMessage({
|
||||
message: `已添加 ${this.word.word} (${this.word.type})`,
|
||||
type: 'success',
|
||||
});
|
||||
}
|
||||
else ElMessage({
|
||||
message: '请先选择单词本',
|
||||
type: 'error',
|
||||
})
|
||||
return;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
document.addEventListener('keyup', this.key_listener);
|
||||
let index = this.$route.query.index;
|
||||
if (index) {
|
||||
this.$store.state.history.use(Number(index));
|
||||
}
|
||||
this.$store.state.history.init_recite((words, current, seq, settings) => {
|
||||
this.testWords = words;
|
||||
this.current = current;
|
||||
this.total = words.length;
|
||||
this.answered = current;
|
||||
this.settings = settings;
|
||||
this.seq = seq;
|
||||
if (this.answered >= this.total) {
|
||||
this.answered = 0;
|
||||
this.current = 0;
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: "进度已经重置"
|
||||
})
|
||||
this.$store.state.history.count(this.answered);
|
||||
}
|
||||
nextTick(() => {
|
||||
this.show();
|
||||
})
|
||||
}, (msg) => {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: msg
|
||||
})
|
||||
this.$router.push('/select');
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener("keyup", this.key_listener);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.item {
|
||||
margin-bottom: 20px;
|
||||
/* background-color: var(--bg-color); */
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.tbtn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 35px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#test {
|
||||
padding: 30px;
|
||||
animation: enter .5s ease-out;
|
||||
}
|
||||
|
||||
#trans {
|
||||
font-size: 43px;
|
||||
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: 25px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
#status {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.answer {
|
||||
margin-top: 10px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--bg-color);
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
border: none;
|
||||
outline-style: none;
|
||||
padding: 0;
|
||||
transition: .5s;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { useMainStore } from '../store';
|
||||
|
||||
export function useDarkMode() {
|
||||
const store = useMainStore();
|
||||
const HTMLnode = document.documentElement;
|
||||
|
||||
const setDarkMode = () => {
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
if (prefersDark) {
|
||||
HTMLnode.classList.add('dark');
|
||||
store.setDarkMode(true);
|
||||
} else {
|
||||
HTMLnode.classList.remove('dark');
|
||||
store.setDarkMode(false);
|
||||
}
|
||||
};
|
||||
|
||||
setDarkMode();
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
mediaQuery.addEventListener('change', setDarkMode);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { watch } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
import { useMainStore } from '@/store';
|
||||
|
||||
export function useVuetifyDarkmode() {
|
||||
const theme = useTheme();
|
||||
const store = useMainStore();
|
||||
|
||||
const setVuetifyDarkmode = (isDarkMode: boolean) => {
|
||||
theme.global.name.value = isDarkMode ? 'dark' : 'light';
|
||||
};
|
||||
|
||||
setVuetifyDarkmode(store.isDarkMode);
|
||||
|
||||
watch(
|
||||
() => store.isDarkMode,
|
||||
(isDarkMode) => {
|
||||
setVuetifyDarkmode(isDarkMode);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
import uuid from 'node-uuid';
|
||||
|
||||
export default class _wordset {
|
||||
constructor() {
|
||||
this.sets = {};
|
||||
let wordsets = localStorage.getItem("wordsets");
|
||||
if (wordsets) {
|
||||
this.sets = JSON.parse(wordsets);
|
||||
}
|
||||
}
|
||||
save() {
|
||||
localStorage.setItem("wordsets", JSON.stringify(this.sets));
|
||||
}
|
||||
get _inner() {
|
||||
return this.sets;
|
||||
}
|
||||
get _firstClass(){
|
||||
return Object.keys(this.sets)[0] || null;
|
||||
}
|
||||
get _allclass(){
|
||||
return Object.keys(this.sets);
|
||||
}
|
||||
get _allsets(){
|
||||
return Object.values(this.sets);
|
||||
}
|
||||
getClass(class_name) {
|
||||
if (this.sets[class_name]) {
|
||||
return this.sets[class_name];
|
||||
}
|
||||
else return null;
|
||||
}
|
||||
getSetStatus(class_name,id){
|
||||
let set_class = this.getClass(class_name);
|
||||
if(set_class){
|
||||
for(let i of set_class){
|
||||
if(i.id === id){
|
||||
return i;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
getSet(id) {
|
||||
let sets = JSON.parse(localStorage.getItem(id));
|
||||
if (sets) {
|
||||
return sets;
|
||||
}
|
||||
else return [];
|
||||
}
|
||||
delSet(class_name, index) {
|
||||
let set_class = this.sets[class_name];
|
||||
if (set_class) {
|
||||
if (set_class[index]) {
|
||||
localStorage.removeItem(set_class[index].id);
|
||||
this.sets[class_name].splice(index, 1);
|
||||
if (!this.sets[class_name].length) {
|
||||
delete this.sets[class_name];
|
||||
}
|
||||
localStorage.setItem("wordsets", JSON.stringify(this.sets));
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
addSet(class_name,name) {
|
||||
if (!this.sets[class_name]) {
|
||||
this.sets[class_name] = [];
|
||||
}
|
||||
let id = uuid.v1();
|
||||
let time = (new Date()).getTime()
|
||||
this.sets[class_name].push({
|
||||
name: name,
|
||||
id: id,
|
||||
created: time,
|
||||
});
|
||||
localStorage.setItem(id, JSON.stringify([]));
|
||||
this.save();
|
||||
return;
|
||||
}
|
||||
saveSet(id,data){
|
||||
localStorage.setItem(id, JSON.stringify(data));
|
||||
}
|
||||
renameSet(class_name,id,new_name){
|
||||
let set_class = this.getClass(class_name);
|
||||
if(set_class){
|
||||
for(let i of set_class){
|
||||
if(i.id === id){
|
||||
i.name = new_name;
|
||||
this.save();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
async import_set(callback){
|
||||
let [fileHandle] = await window.showOpenFilePicker({
|
||||
types: [
|
||||
{
|
||||
description: "JSON file",
|
||||
accept: {
|
||||
'text/json': ['.json'],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
let file = await fileHandle.getFile();
|
||||
let data = JSON.parse(await file.text());
|
||||
let cnt = 0;
|
||||
for (let i of Object.keys(data.wordsets)) {
|
||||
for (let j of data.wordsets[i]) {
|
||||
if (!localStorage.getItem(j.id)) {
|
||||
if (!this.sets[i]) this.sets[i] = [];
|
||||
this.sets[i].push(j);
|
||||
localStorage.setItem(j.id, data.words[j.id]);
|
||||
cnt++;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.save();
|
||||
if(typeof callback === "function"){
|
||||
callback(cnt);
|
||||
}
|
||||
}
|
||||
async export_set(callback) {
|
||||
let fileHandle = await window.showSaveFilePicker({
|
||||
types: [
|
||||
{
|
||||
description: "JSON file",
|
||||
accept: {
|
||||
'text/json': ['.json'],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
let writestream = await fileHandle.createWritable();
|
||||
let data = {
|
||||
wordsets: this.sets,
|
||||
words: {}
|
||||
};
|
||||
let cnt = 0;
|
||||
for (let i of Object.values(this.sets)) {
|
||||
for (let j of i) {
|
||||
let temp = localStorage.getItem(j.id);
|
||||
data.words[j.id] = temp;
|
||||
cnt++;
|
||||
}
|
||||
}
|
||||
writestream.write(JSON.stringify(data));
|
||||
writestream.close();
|
||||
if(typeof callback === "function"){
|
||||
callback(cnt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const md = require('marked')
|
||||
|
||||
module.exports = function (source) {
|
||||
this.cacheable()
|
||||
// source 是原始文件内容，html 是用 markdown-it 编译后的 html 内容
|
||||
const html = md.parse(source);
|
||||
const template = (
|
||||
`<template>
|
||||
<div class="markdown-body">
|
||||
${html}
|
||||
</div>
|
||||
</template>`
|
||||
)
|
||||
return template
|
||||
}
|
||||
18
src/main.js
18
src/main.js
|
|
@ -1,18 +0,0 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { createStore } from 'vuex'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import 'boxicons'
|
||||
import router from './router.js'
|
||||
|
||||
const app = createApp(App);
|
||||
const store = createStore({
|
||||
state(){
|
||||
}
|
||||
});
|
||||
app.use(store);
|
||||
app.use(ElementPlus);
|
||||
app.use(router);
|
||||
app.mount('#app');
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
import App from "./App.vue";
|
||||
import { useDarkMode } from "./composables/useDarkMode";
|
||||
import router from "./router";
|
||||
import "./styles/global.css";
|
||||
import "element-plus/theme-chalk/dark/css-vars.css";
|
||||
import "@mdi/font/css/materialdesignicons.css"
|
||||
import "vuetify/styles"
|
||||
// Vuetify
|
||||
import "vuetify/styles";
|
||||
import { createVuetify } from "vuetify";
|
||||
import { aliases, mdi } from "vuetify/iconsets/mdi";
|
||||
|
||||
const vuetify = createVuetify({
|
||||
icons: {
|
||||
defaultSet: "mdi",
|
||||
aliases,
|
||||
sets: {
|
||||
mdi,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(vuetify);
|
||||
app.use(router);
|
||||
app.use(createPinia());
|
||||
|
||||
useDarkMode();
|
||||
|
||||
app.mount("#app");
|
||||
|
|
@ -1,29 +1,64 @@
|
|||
# 关于 wordIn
|
||||
|
||||
---
|
||||
|
||||
## 1. wordIn 是什么
|
||||
|
||||
wordIn 是一款基于 vue.js 的单词默写器，致力于为用户提供便捷有效的单词记忆方式
|
||||
wordIn 是一款基于 vue.js 的单词默写器，致力于为用户提供便捷有效的单词记忆方式
|
||||
|
||||
## 2.获取源代码
|
||||
|
||||
wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1e/wordIn)
|
||||
wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1e/wordIn)
|
||||
！！需要从浙江大学内网访问
|
||||
|
||||
如果有获取后端代码的需求请联系作者
|
||||
|
||||
## 3.联系作者
|
||||
|
||||
- 通过电子邮件
|
||||
- <rooger@zju.edu.cn>
|
||||
- <rooger233@gmail.com>
|
||||
- 通过电子邮件
|
||||
- [rooger@zju.edu.cn](mailto:rooger@zju.edu.cn)
|
||||
- [rooger233@gmail.com](mailto:rooger233@gmail.com)
|
||||
- 通过QQ
|
||||
- 1176075089
|
||||
- 1176075089
|
||||
|
||||
## 3.更新日志
|
||||
|
||||
### 1.0.1 Release
|
||||
### 1.03
|
||||
|
||||
1. 更新内容
|
||||
|
||||
- 使用 anime.js 构建动画效果
|
||||
- 修复显示 bug
|
||||
- 主页视觉效果更新
|
||||
|
||||
### 1.02
|
||||
|
||||
1. 更新内容
|
||||
- 使用 Vite 构建，更加现代化
|
||||
- 使用 TypeScript 解析，减少错误
|
||||
- 优化了启动速度，精简了代码
|
||||
2. 抱歉鸽了这么久，在这期间我也学会了很多新的技能，认识了很多新的朋友，感谢 ACEE 的各位！
|
||||
|
||||
### 1.0.2 Beta 2
|
||||
|
||||
1. 更新内容
|
||||
|
||||
- 减小了打包体积
|
||||
2. Bug修复进度
|
||||
|
||||
- （解决中）自定义背景
|
||||
- （已解决）移动端UI错位问题
|
||||
|
||||
### 1.0.2 Beta 1
|
||||
|
||||
1. 更新内容
|
||||
|
||||
- 重写对话框组件
|
||||
- 增加了一些单词本管理功能
|
||||
2. Bug修复进度
|
||||
|
||||
- （解决中）自定义背景
|
||||
- （解决中）移动端UI错位问题
|
||||
|
||||
### 1.0.1 Release
|
||||
|
||||
#### 1.0.1 是wordIn第一个正式版
|
||||
|
||||
|
|
@ -35,14 +70,23 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
|
|||
- 重写了主页
|
||||
- 优化了过渡动画
|
||||
- 优化了全局变量管理
|
||||
|
||||
2. Bug修复进度
|
||||
|
||||
- （已修复）背诵时插入导致指针归位
|
||||
- （已修复）查看之前的单词时溢出的错误
|
||||
- （解决中）手机端适配问题
|
||||
|
||||
### 1.0
|
||||
#### Patch 1
|
||||
|
||||
- 增加了移动端底部导航栏
|
||||
- 修复了无法随机顺序问题
|
||||
|
||||
#### Patch 2
|
||||
|
||||
- 封装网络请求
|
||||
- 其他源码优化
|
||||
|
||||
### 1.0
|
||||
|
||||
#### 1.0 及之前的版本汇总
|
||||
|
||||
|
|
@ -50,6 +94,6 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
|
|||
|
||||
- 1.0是整个项目的开始，项目包括前端界面（/），运维管理界面（/manage），后端服务器。
|
||||
|
||||
## 4.开发者的话
|
||||
## 4.开发者的话
|
||||
|
||||
整个项目的开发已经有半年了，在这期间我为 wordIn 花费了很多时间和精力，也收获了很多。希望 wordIn 能够帮助到大家的英语学习，祝各位大英都能满绩！
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
# wordIn 使用说明
|
||||
|
||||
---
|
||||
|
||||
- 近期发现ZJUWLAN无法访问unpkg.com导致部分图标无法显示,请使用ZJUWLAN-Secure访问
|
||||
|
||||
## 1. 背诵单词
|
||||
|
|
@ -27,7 +25,7 @@
|
|||
- 点击插入到单词本即可将现在显示的单词插入到单词本中
|
||||
- 进度记忆功能
|
||||
- 一下子没有背完？不必担心,wordIn会自动记忆您的背诵进度，您可以从主页随时返回到背诵
|
||||
|
||||
|
||||
## 2. 单词本管理
|
||||
|
||||
### 新建单词本
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import {createRouter,createWebHashHistory} from 'vue-router'
|
||||
const manage = ()=>import('./components/Manage.vue');
|
||||
const editor = ()=>import('./components/manage/Editor.vue');
|
||||
const home = ()=>import("./components/Home.vue");
|
||||
const recite = ()=>import('./components/recite/recite.vue');
|
||||
const setlist = ()=>import('./components/manage/SetList.vue');
|
||||
const newset = ()=>import('./components/manage/NewSet.vue');
|
||||
const display = ()=>import('./components/manage/Display.vue');
|
||||
const select = ()=>import('./components/recite/select.vue');
|
||||
const manual = ()=>import('./components/post/manual.vue');
|
||||
const about = ()=>import('./components/post/about.vue');
|
||||
const manage = ()=>import('@/views/ManageView.vue');
|
||||
const editor = ()=>import('@/views/manage/EditorView.vue');
|
||||
import home from "@/views/HomeView.vue";
|
||||
const recite = ()=>import('@/views/recite/ReciteView.vue');
|
||||
const setlist = ()=>import('@/views/manage/SetListView.vue');
|
||||
const newset = ()=>import('@/views/manage/NewSetView.vue');
|
||||
const display = ()=>import('@/views/manage/DisplayView.vue');
|
||||
const select = ()=>import('@/views/recite/SelectView.vue');
|
||||
const manual = ()=>import('@/views/post/ManualView.vue');
|
||||
const about = ()=>import('@/views/post/AboutView.vue');
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: home },
|
||||
|
|
@ -1,6 +1,11 @@
|
|||
import axios from 'axios'
|
||||
import { HistoryItem, WordItem } from '@/types';
|
||||
import axios from './request.ts';
|
||||
|
||||
const limit = 10;
|
||||
export default class _history {
|
||||
|
||||
export default class IHistory {
|
||||
private histories: HistoryItem[];
|
||||
|
||||
constructor() {
|
||||
this.histories = [];
|
||||
let histories = localStorage.getItem("histories");
|
||||
|
|
@ -8,113 +13,136 @@ export default class _history {
|
|||
this.histories = JSON.parse(histories);
|
||||
}
|
||||
}
|
||||
save() {
|
||||
|
||||
save(): void {
|
||||
localStorage.setItem('histories', JSON.stringify(this.histories));
|
||||
}
|
||||
get length() {
|
||||
|
||||
get length(): number {
|
||||
return this.histories.length;
|
||||
}
|
||||
get top() {
|
||||
|
||||
get top(): HistoryItem | undefined {
|
||||
return this.histories[0];
|
||||
}
|
||||
get _content(){
|
||||
|
||||
get _content(): HistoryItem[] {
|
||||
return this.histories;
|
||||
}
|
||||
use(index) {
|
||||
|
||||
use(index: number): boolean {
|
||||
if (this.histories.length > index) {
|
||||
console.log(this.histories);
|
||||
let history = this.histories.splice(index, 1);
|
||||
let history = this.histories.splice(index, 1)[0];
|
||||
history.modified = (new Date()).getTime();
|
||||
this.histories = history.concat(this.histories);
|
||||
this.histories = [history].concat(this.histories);
|
||||
console.log(this.histories);
|
||||
this.save();
|
||||
return true;
|
||||
}
|
||||
else return false;
|
||||
}
|
||||
del(index) {
|
||||
|
||||
del(index: number): void {
|
||||
this.histories.splice(index, 1);
|
||||
this.save();
|
||||
}
|
||||
add(localsets, onlinesets, settings, callback) {
|
||||
|
||||
add(localsets: string[], onlinesets: any[], settings: any, callback?: () => void): void {
|
||||
let time = (new Date()).getTime();
|
||||
let data = {
|
||||
localsets, onlinesets, settings,
|
||||
let data: HistoryItem = {
|
||||
localsets,
|
||||
onlinesets,
|
||||
settings,
|
||||
current: 0,
|
||||
modified: time
|
||||
};
|
||||
|
||||
if (settings.shuffle) {
|
||||
data.settings.seed = time;
|
||||
}
|
||||
|
||||
this.histories = [data].concat(this.histories);
|
||||
if(this.histories.length > limit){
|
||||
this.histories = this.histories.slice(0,limit);
|
||||
if (this.histories.length > limit) {
|
||||
this.histories = this.histories.slice(0, limit);
|
||||
}
|
||||
this.save();
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
count(cnt) {
|
||||
|
||||
count(cnt: number): void {
|
||||
if (this.histories.length > 0) {
|
||||
this.histories[0].current = cnt;
|
||||
this.save();
|
||||
}
|
||||
}
|
||||
async init_recite(callback, err) {
|
||||
|
||||
async init_recite(
|
||||
callback?: (words: WordItem[], current: number, arr: number[], settings: any) => void,
|
||||
err?: (msg: string) => void
|
||||
): Promise<void> {
|
||||
let history = this.histories[0];
|
||||
let words = [];
|
||||
let words: WordItem[] = [];
|
||||
|
||||
for (let i of history.localsets) {
|
||||
let content = localStorage.getItem(i);
|
||||
if (content){
|
||||
if (content) {
|
||||
let temp = JSON.parse(content);
|
||||
if(history.settings.ignore_phrases){
|
||||
for(let j of temp){
|
||||
if (history.settings.ignore_phrases) {
|
||||
for (let j of temp) {
|
||||
console.log(j);
|
||||
if(j.type != 'phr.'){
|
||||
if (j.type != 'phr.') {
|
||||
words.push(j);
|
||||
}
|
||||
}
|
||||
}
|
||||
else words = words.concat(...temp);
|
||||
else words = words.concat(temp);
|
||||
}
|
||||
else return this.handle_err("单词本不存在",err);
|
||||
else return this.handle_err("单词本不存在", err);
|
||||
}
|
||||
|
||||
for (let i of history.onlinesets) {
|
||||
let res = await axios.get("/wordset/detail", {
|
||||
let res = await axios.get("wordset/detail", {
|
||||
params: i
|
||||
})
|
||||
});
|
||||
if (res.status != 200) {
|
||||
return this.handle_err("获取单词本时出现错误",err);
|
||||
return this.handle_err("获取单词本时出现错误", err);
|
||||
}
|
||||
let temp = res.data;
|
||||
if(history.settings.ignore_phrases){
|
||||
for(let j of temp){
|
||||
if(j.type != 'phr.'){
|
||||
if (history.settings.ignore_phrases) {
|
||||
for (let j of temp) {
|
||||
if (j.type != 'phr.') {
|
||||
words.push(j);
|
||||
}
|
||||
}
|
||||
}
|
||||
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());
|
||||
if(history.settings.shuffle){
|
||||
let seed = history.settings.seed;
|
||||
for (let i = this.total - 1; i > 0; i--) {
|
||||
if (history.settings.shuffle) {
|
||||
let seed = history.settings.seed as number;
|
||||
for (let i = words.length - 1; i > 0; 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();
|
||||
if (typeof callback === 'function') {
|
||||
callback(words,history.current,arr,history.settings);
|
||||
callback(words, history.current, arr, history.settings);
|
||||
}
|
||||
}
|
||||
handle_err(msg,err){
|
||||
this.histories.splice(0,1);
|
||||
|
||||
handle_err(msg: string, err?: (msg: string) => void): void {
|
||||
this.histories.splice(0, 1);
|
||||
this.save();
|
||||
if (typeof err === 'function') {
|
||||
err(msg);
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import axios from 'axios'
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL:"./",
|
||||
timeout:6000,
|
||||
})
|
||||
|
||||
export default instance;
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
import { WordItem, WordSetInfo } from '@/types';
|
||||
import { v1 as uuidv1 } from 'uuid';
|
||||
|
||||
// Add type declarations for the File System Access API
|
||||
declare global {
|
||||
interface FileSystemWritableFileStream {
|
||||
write(data: any): Promise<void>;
|
||||
seek(position: number): Promise<void>;
|
||||
truncate(size: number): Promise<void>;
|
||||
close(): Promise<void>;
|
||||
}
|
||||
|
||||
interface FileSystemFileHandle {
|
||||
getFile(): Promise<File>;
|
||||
createWritable(): Promise<FileSystemWritableFileStream>;
|
||||
}
|
||||
|
||||
interface Window {
|
||||
showSaveFilePicker(options?: {
|
||||
types?: Array<{
|
||||
description: string;
|
||||
accept: Record<string, string[]>;
|
||||
}>;
|
||||
}): Promise<FileSystemFileHandle>;
|
||||
|
||||
showOpenFilePicker(options?: {
|
||||
multiple?: boolean;
|
||||
types?: Array<{
|
||||
description: string;
|
||||
accept: Record<string, string[]>;
|
||||
}>;
|
||||
}): Promise<FileSystemFileHandle[]>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Wordset {
|
||||
private sets: {[className: string]: WordSetInfo[]};
|
||||
|
||||
constructor() {
|
||||
this.sets = {};
|
||||
let wordsets = localStorage.getItem("wordsets");
|
||||
if (wordsets) {
|
||||
this.sets = JSON.parse(wordsets);
|
||||
}
|
||||
}
|
||||
|
||||
save(): void {
|
||||
localStorage.setItem("wordsets", JSON.stringify(this.sets));
|
||||
}
|
||||
|
||||
get _inner(): {[className: string]: WordSetInfo[]} {
|
||||
return this.sets;
|
||||
}
|
||||
|
||||
get _firstClass(): string | null {
|
||||
return Object.keys(this.sets)[0] || null;
|
||||
}
|
||||
|
||||
get _allclass(): string[] {
|
||||
return Object.keys(this.sets);
|
||||
}
|
||||
|
||||
get _allsets(): WordSetInfo[][] {
|
||||
return Object.values(this.sets);
|
||||
}
|
||||
|
||||
getClass(class_name: string): WordSetInfo[] | null {
|
||||
if (this.sets[class_name]) {
|
||||
return this.sets[class_name];
|
||||
}
|
||||
else return null;
|
||||
}
|
||||
|
||||
getSetStatus(class_name: string, id: string): WordSetInfo | null {
|
||||
let set_class = this.getClass(class_name);
|
||||
if(set_class) {
|
||||
for(let i of set_class) {
|
||||
if(i.id === id) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getId(class_name: string, id: string): number | undefined {
|
||||
let set_class = this.sets[class_name];
|
||||
for(let index in set_class) {
|
||||
if(set_class[index].id === id) {
|
||||
return Number(index);
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
getSet(id: string): WordItem[] {
|
||||
let sets = localStorage.getItem(id);
|
||||
if (sets) {
|
||||
return JSON.parse(sets);
|
||||
}
|
||||
else return [];
|
||||
}
|
||||
|
||||
delSet(class_name: string, index: number): boolean {
|
||||
let set_class = this.sets[class_name];
|
||||
if (set_class) {
|
||||
if (set_class[index]) {
|
||||
localStorage.removeItem(set_class[index].id);
|
||||
this.sets[class_name].splice(index, 1);
|
||||
if (!this.sets[class_name].length) {
|
||||
delete this.sets[class_name];
|
||||
}
|
||||
localStorage.setItem("wordsets", JSON.stringify(this.sets));
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
addSet(class_name: string, name: string): string {
|
||||
if (!this.sets[class_name]) {
|
||||
this.sets[class_name] = [];
|
||||
}
|
||||
let id = uuidv1();
|
||||
let time = (new Date()).getTime()
|
||||
this.sets[class_name].push({
|
||||
name: name,
|
||||
id: id,
|
||||
created: time,
|
||||
});
|
||||
localStorage.setItem(id, JSON.stringify([]));
|
||||
this.save();
|
||||
return id;
|
||||
}
|
||||
|
||||
saveSet(id: string, data: WordItem[]): void {
|
||||
localStorage.setItem(id, JSON.stringify(data));
|
||||
}
|
||||
|
||||
renameSet(class_name: string, id: string, new_name: string): void {
|
||||
let set_class = this.getClass(class_name);
|
||||
if(set_class) {
|
||||
for(let i of set_class) {
|
||||
if(i.id === id) {
|
||||
i.name = new_name;
|
||||
this.save();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addSetTo(origin_id: string, dest_id: string): number {
|
||||
let origin_set = this.getSet(origin_id);
|
||||
let dest_set = this.getSet(dest_id);
|
||||
let set: {[word: string]: WordItem} = {};
|
||||
origin_set.forEach(element => {
|
||||
set[element.word] = element;
|
||||
});
|
||||
dest_set.forEach(element => {
|
||||
set[element.word] = element;
|
||||
});
|
||||
let mergedSet = Object.values(set);
|
||||
this.saveSet(dest_id, mergedSet);
|
||||
return origin_set.length + dest_set.length - mergedSet.length;
|
||||
}
|
||||
|
||||
fromArray(arr: WordItem[], class_name: string, name: string): void {
|
||||
let id = this.addSet(class_name, name);
|
||||
this.saveSet(id, arr);
|
||||
}
|
||||
|
||||
async import_set(callback?: (count: number) => void): Promise<void> {
|
||||
let [fileHandle] = await window.showOpenFilePicker({
|
||||
types: [
|
||||
{
|
||||
description: "JSON file",
|
||||
accept: {
|
||||
'text/json': ['.json'],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
let file = await fileHandle.getFile();
|
||||
let data = JSON.parse(await file.text());
|
||||
let cnt = 0;
|
||||
for (let i of Object.keys(data.wordsets)) {
|
||||
for (let j of data.wordsets[i]) {
|
||||
if (!localStorage.getItem(j.id)) {
|
||||
if (!this.sets[i]) this.sets[i] = [];
|
||||
this.sets[i].push(j);
|
||||
localStorage.setItem(j.id, data.words[j.id]);
|
||||
cnt++;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.save();
|
||||
if(typeof callback === "function") {
|
||||
callback(cnt);
|
||||
}
|
||||
}
|
||||
|
||||
async export_set(callback?: (count: number) => void): Promise<void> {
|
||||
let fileHandle = await window.showSaveFilePicker({
|
||||
types: [
|
||||
{
|
||||
description: "JSON file",
|
||||
accept: {
|
||||
'text/json': ['.json'],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
let writestream = await fileHandle.createWritable();
|
||||
let data = {
|
||||
wordsets: this.sets,
|
||||
words: {} as {[id: string]: string}
|
||||
};
|
||||
let cnt = 0;
|
||||
for (let i of Object.values(this.sets)) {
|
||||
for (let j of i) {
|
||||
let temp = localStorage.getItem(j.id);
|
||||
if (temp) {
|
||||
data.words[j.id] = temp;
|
||||
cnt++;
|
||||
}
|
||||
}
|
||||
}
|
||||
await writestream.write(JSON.stringify(data));
|
||||
await writestream.close();
|
||||
if(typeof callback === "function") {
|
||||
callback(cnt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import IHistory from '@/scripts/history';
|
||||
import { Wordset } from '@/scripts/wordsets';
|
||||
import { defineStore} from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export const useMainStore = defineStore('main', () => {
|
||||
const sets = ref({});
|
||||
const history = ref(new IHistory())
|
||||
const wordsets = ref(new Wordset())
|
||||
const isDarkMode = ref(false)
|
||||
function setDarkMode(value: boolean) {
|
||||
isDarkMode.value = value;
|
||||
}
|
||||
return {
|
||||
sets,history,wordsets,setDarkMode,isDarkMode
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
@keyframes cui-dialog-appear {
|
||||
0% {
|
||||
/* opacity: 0%; */
|
||||
transform: translate(-50%, -50%) scale(0.7);
|
||||
}
|
||||
|
||||
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% {
|
||||
opacity: 0%;
|
||||
/* backdrop-filter: blur(0px); */
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 100%;
|
||||
/* backdrop-filter: blur(10px); */
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
html{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden !important;
|
||||
font-family:
|
||||
'MiSans',
|
||||
-apple-system, /* macOS, iOS */
|
||||
BlinkMacSystemFont, /* Chrome macOS */
|
||||
"Segoe UI", /* Windows */
|
||||
Roboto, /* Android */
|
||||
"Helvetica Neue", /* 一些 macOS 和 iOS 系统 */
|
||||
Arial, /* 常见替代字体 */
|
||||
"Noto Sans", /* 国际化字体 */
|
||||
"Liberation Sans", /* Linux 系统的替代字体 */
|
||||
sans-serif; /* 默认字体 */
|
||||
}
|
||||
|
||||
html.dark body{
|
||||
background-color: var(--bg-color-solid);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.pconly {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.mbonly {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
html {
|
||||
--bg-color-solid: #e8e8e8;
|
||||
--bg-color: #ffffffae;
|
||||
--bg-color-acrylic:#ffffff54;
|
||||
--text-color: #464646;
|
||||
--bd-color: #bbbbbb99;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--bg-color-solid: #191919;
|
||||
--bg-color: #2a2a2a88;
|
||||
--bg-color-acrylic:rgba(42, 42, 42, 0.263);
|
||||
--text-color: #c0c0c0;
|
||||
--bd-color: #7f7f7f7c;
|
||||
--navi-bg-color: #131313e2;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.colbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.rowbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 8px;
|
||||
border: solid 1px var(--bd-color);
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--el-box-shadow);
|
||||
}
|
||||
|
||||
html.bgimged .card {
|
||||
background-color: var(--bg-color);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mid-text {
|
||||
width: 65px;
|
||||
transform: translate(0, 6px);
|
||||
color: var(--text-color);
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.para {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.blured {
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
/* Markdown Typography */
|
||||
.markdown {
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
.markdown h1,
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
/* margin-top: 1.5em; */
|
||||
margin-bottom: 0.5em;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 2.5em;
|
||||
border-bottom: 1px solid var(--bd-color);
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 1.75em;;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 0.85em;
|
||||
color: #6a737d;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.markdown ul,
|
||||
.markdown ol {
|
||||
padding-left: 2em;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.markdown ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.markdown ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.markdown li {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.markdown li > ul,
|
||||
.markdown li > ol {
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* Paragraphs and spacing */
|
||||
.markdown p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.markdown a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.markdown pre {
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
background-color: var(--bg-color-solid);
|
||||
border-radius: 3px;
|
||||
padding: 0.2em 0.4em;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.markdown pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.markdown blockquote {
|
||||
margin-left: 0;
|
||||
padding: 0 1em;
|
||||
color: var(--text-color);
|
||||
border-left: 0.25em solid var(--bd-color);
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.markdown table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.markdown table th,
|
||||
.markdown table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid var(--bd-color);
|
||||
}
|
||||
|
||||
.markdown table tr {
|
||||
background-color: var(--bg-color-solid);
|
||||
border-top: 1px solid var(--bd-color);
|
||||
}
|
||||
|
||||
.markdown table tr:nth-child(2n) {
|
||||
background-color: var(--bg-color-solid);
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
.markdown hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: var(--bg-color-solid);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.markdown img {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
export interface HistoryItem {
|
||||
localsets: string[];
|
||||
onlinesets: any[];
|
||||
settings: {
|
||||
shuffle: boolean;
|
||||
seed?: number;
|
||||
ignore_phrases?: boolean;
|
||||
[key: string]: any;
|
||||
};
|
||||
current: number;
|
||||
modified: number;
|
||||
total?: number;
|
||||
}
|
||||
|
||||
export interface WordItem {
|
||||
type: string;
|
||||
word: string;
|
||||
trans: string
|
||||
}
|
||||
|
||||
export interface WordSetInfo {
|
||||
name: string;
|
||||
id: string;
|
||||
created: number;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
declare module "*.vue" {
|
||||
import type { ComponentOptions } from "vue";
|
||||
|
||||
const Component: ComponentOptions;
|
||||
export default Component;
|
||||
}
|
||||
|
||||
declare module "*.md" {
|
||||
import type { ComponentOptions } from "vue";
|
||||
|
||||
const Component: ComponentOptions;
|
||||
export default Component;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
declare const __BUILD_TIME__: string;
|
||||
declare const __APP_VERSION__: string;
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<template>
|
||||
<div class="home-view-container">
|
||||
<DynamicBackground class="home-view-header">
|
||||
<template #content>
|
||||
<div class="colbox" style="width: 95%;margin-top: 10px;">
|
||||
<div style="flex-grow: 2;margin:30px;" class="rowbox">
|
||||
<div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
|
||||
<div id="title">wordIn</div>
|
||||
<div>当前版本: {{ appVersion }} <br /> 更新时间: {{ buildTime }}</div>
|
||||
</div>
|
||||
<div class="colbox card home-view-option-wrapper">
|
||||
<router-link to="/select" class="button">
|
||||
开始新背诵
|
||||
</router-link>
|
||||
<router-link to="/manage" class="button">
|
||||
查看单词本
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DynamicBackground>
|
||||
<div class="wrapper home-view-history">
|
||||
<div class="home-view-history-title" style="margin-left: 20px;margin-top: 10px;width: 95%;">历史记录</div>
|
||||
<div class="home-view-history-item" v-for="(history, index) in store.history._content" :key="index">
|
||||
<div class="card colbox" >
|
||||
<div style="width: 25px;">{{ index + 1 }}</div>
|
||||
<div style="width: 200px;">背诵进度: {{ history.current }}/{{ history.total || "Unknown" }}</div>
|
||||
<div style="flex-grow: 1;"> {{ (new Date(history.modified)) }}</div>
|
||||
<el-button @click="restart(index)">继续</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="setting">
|
||||
<v-icon class="btn" @click="open_setting_dialog">mdi-cog</v-icon>
|
||||
</div>
|
||||
<el-dialog v-model="settingVisible" title="设置" width="75%">
|
||||
<div class="title">更换自定义背景</div>
|
||||
<div class="colbox" style="margin: 10px;">
|
||||
<el-input v-model="img_url"></el-input>
|
||||
<el-button type="primary" style="margin-left: 10px;" @click="set_bg">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useMainStore } from '@/store';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import DynamicBackground from '@/components/DynamicBackground.vue';
|
||||
import animejs from 'animejs';
|
||||
|
||||
const appVersion = __APP_VERSION__;
|
||||
const buildTime = __BUILD_TIME__;
|
||||
|
||||
const store = useMainStore();
|
||||
const router = useRouter();
|
||||
const img_url = ref("");
|
||||
const settingVisible = ref(false);
|
||||
|
||||
const set_bg = (): void => {
|
||||
localStorage.setItem("bgimg", img_url.value);
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
const open_setting_dialog = (): void => {
|
||||
settingVisible.value = true;
|
||||
};
|
||||
|
||||
const restart = (index: number): void => {
|
||||
router.push({
|
||||
path: "./recite",
|
||||
query: { index }
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(()=>{
|
||||
animejs({
|
||||
targets:".home-view-header",
|
||||
translateY: [-50,0],
|
||||
opacity: [0,1],
|
||||
})
|
||||
animejs({
|
||||
targets:".home-view-history-title,.home-view-history-item",
|
||||
translateX: [50,0],
|
||||
opacity: [0,1],
|
||||
delay: animejs.stagger(50),
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
#title {
|
||||
font-size: 80px;
|
||||
color: var(--text-color);
|
||||
text-shadow: #00000057 5px 5px 20px;
|
||||
}
|
||||
|
||||
.home-view-history-title {
|
||||
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;
|
||||
}
|
||||
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
#title {
|
||||
font-size: 100px;
|
||||
color: var(--text-color);
|
||||
text-shadow: #00000057 5px 5px 20px;
|
||||
line-height: 100px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.home-view-history-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
font-size: 35px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin: 80px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
#ball {
|
||||
width: 1350px;
|
||||
height: 1350px;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
/* border: 1px solid var(--bd-color); */
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#setting {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
font-size: 25px;
|
||||
font-weight: 800;
|
||||
border-radius: 5px;
|
||||
border: solid 1px #FAFAFA;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-shadow: var(--el-box-shadow);
|
||||
background-color: rgba(255, 255, 255, 0.237);
|
||||
backdrop-filter: blur(20px);
|
||||
cursor: pointer;
|
||||
transition: .5s;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html.dark .button {
|
||||
background-color: rgba(56, 56, 56, 0.301);
|
||||
border: solid 1px #848484;
|
||||
box-shadow: 0px 12px 32px 4px rgba(198, 198, 198, 0.078), 0px 8px 20px rgba(216, 216, 216, 0.171);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
box-shadow: var(--el-box-shadow) inset #00000017 0px 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.home-view-history {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-view-container{
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.home-view-option-wrapper{
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color: var(--bg-color-acrylic);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,12 +6,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "SetManage",
|
||||
|
||||
}
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div class="container" style="overflow: auto;">
|
||||
<el-page-header style="margin: 10px;" @back="router.push('/manage');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>
|
||||
操作<v-icon size="20px">mdi-chevron-down</v-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="download"><v-icon
|
||||
size="20px">mdi-download</v-icon>下载</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div class="colbox" id="main">
|
||||
<div style="flex-grow: 1;" class="card">
|
||||
<el-table :data="table" style="height:calc(100% - 10px);overflow: auto;border-radius: 10px;">
|
||||
<el-table-column type="index" />
|
||||
<el-table-column prop="word" label="单词" />
|
||||
<el-table-column prop="type" label="词性" />
|
||||
<el-table-column prop="trans" label="翻译" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useMainStore } from '@/store';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import axios from 'axios';
|
||||
|
||||
interface WordEntry {
|
||||
word: string;
|
||||
type: string;
|
||||
trans: string;
|
||||
}
|
||||
|
||||
const table = ref<WordEntry[]>([]);
|
||||
const set = ref('');
|
||||
const book = ref('');
|
||||
const id = ref('');
|
||||
const name = ref('default');
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useMainStore();
|
||||
|
||||
const download = () => {
|
||||
store.wordsets.fromArray(table.value, book.value, name.value);
|
||||
ElMessage("下载完毕");
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/manage');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
set.value = route.query.set as string;
|
||||
book.value = route.query.book as string;
|
||||
id.value = route.query.id as string;
|
||||
name.value = (route.query.name as string) || "default";
|
||||
|
||||
if (set.value && book.value && id.value) {
|
||||
axios.get("wordset/detail", {
|
||||
params: {
|
||||
set: set.value,
|
||||
book: book.value,
|
||||
id: id.value
|
||||
}
|
||||
}).then(res => {
|
||||
table.value = res.data;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#main {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-bg-color: #FFFFFF00;
|
||||
--el-table-tr-bg-color: #FFFFFF00;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
<template>
|
||||
<div class="container editor-container">
|
||||
<el-page-header class="editor-header editor-animation-el" @back="router.push('/manage');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>
|
||||
操作<v-icon size="20px">mdi-chevron-down</v-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="del_set"><v-icon size="20px">mdi-delete</v-icon>删除</el-dropdown-item>
|
||||
<el-dropdown-item @click="addTo"><v-icon
|
||||
size="18px">mdi-plus</v-icon>添加到</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div class="colbox" id="main">
|
||||
<div class="rowbox">
|
||||
<div class="card editor-animation-el">
|
||||
<div class="title">添加单词</div>
|
||||
<el-input ref="input1" autofocus @change="focusnext($refs.input2)"
|
||||
v-model="new_word.word"></el-input>
|
||||
<div class="colbox">
|
||||
<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>
|
||||
</div>
|
||||
<div class="colbox">
|
||||
<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-option v-for="item in options" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button @click="add_word()" type="primary">添加</el-button>
|
||||
</div>
|
||||
<div class="card editor-animation-el">
|
||||
<div class="title">更改名称</div>
|
||||
<div class="colbox">
|
||||
<el-text class="mx-1" style="width: 60px;">新名称:</el-text>
|
||||
<el-input v-model="new_name"></el-input>
|
||||
</div>
|
||||
<el-button @click="change_name()" type="primary">更改名称</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card editor-wordlist editor-animation-el">
|
||||
<el-table :data="table" style="height: calc(100% - 10px);overflow: auto;border-radius: 10px;">
|
||||
<el-table-column type="index" />
|
||||
<el-table-column prop="word" label="单词" />
|
||||
<el-table-column prop="type" label="词性" />
|
||||
<el-table-column prop="trans" label="翻译" />
|
||||
<el-table-column width="100px" fixed="right" label="操作">
|
||||
<template #default="scope">
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-around;">
|
||||
<v-icon size="14px" class="btn" @click="del_word(scope.$index)">mdi-delete</v-icon>
|
||||
<v-icon size="14px" class="btn" name='edit-alt'
|
||||
@click="edit_word(scope.$index)">mdi-invoice-text-edit</v-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CDialog v-model:visible="word_editing">
|
||||
<template #content>
|
||||
<div class="title">修改单词</div>
|
||||
<el-input v-model="editing_word.word"></el-input>
|
||||
<div class="colbox">
|
||||
<el-text class="mx-1" style="width: 60px;">翻译:</el-text>
|
||||
<el-input v-model="editing_word.trans"></el-input>
|
||||
</div>
|
||||
<div class="colbox">
|
||||
<el-text class="mx-1" style="width: 80px;">词性：</el-text>
|
||||
<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-select>
|
||||
</div>
|
||||
<el-button @click="save_word" type="primary">更改</el-button>
|
||||
</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 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 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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useMainStore } from '@/store'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import CDialog from '@/components/UI/CDialog.vue'
|
||||
import anime from 'animejs'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const store = useMainStore()
|
||||
const wordsets = ref(store.wordsets);
|
||||
|
||||
const new_word = reactive({
|
||||
word: "",
|
||||
trans: "",
|
||||
type: "adj.",
|
||||
})
|
||||
|
||||
const editing_word = reactive({
|
||||
word: "",
|
||||
trans: "",
|
||||
type: "adj.",
|
||||
index: 0,
|
||||
})
|
||||
|
||||
const 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." },
|
||||
]
|
||||
|
||||
const table = ref<any[]>([])
|
||||
const word_editing = ref(false)
|
||||
const new_name = ref("")
|
||||
const name = ref("")
|
||||
const id = ref("")
|
||||
const class_name = ref("")
|
||||
|
||||
const select = reactive({
|
||||
visible: false,
|
||||
set_class: "",
|
||||
id: "",
|
||||
confirm: (dest_id: string) => { }
|
||||
})
|
||||
|
||||
const input1 = ref<any>(null)
|
||||
const input2 = ref<any>(null)
|
||||
const input3 = ref<any>(null)
|
||||
|
||||
const focusnext = (node: any) => {
|
||||
node.focus()
|
||||
}
|
||||
|
||||
const has_word = (word: string) => {
|
||||
for (let i of table.value) {
|
||||
if (i.word === word) return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const add_word = () => {
|
||||
if (has_word(new_word.word)) {
|
||||
ElMessage({
|
||||
message: `单词 ${new_word.word} 已存在`,
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
table.value.push(Object.assign({}, new_word))
|
||||
wordsets.value.saveSet(id.value, table.value)
|
||||
ElMessage({
|
||||
message: `已添加 ${new_word.word} (${new_word.type})`,
|
||||
type: 'success',
|
||||
})
|
||||
new_word.word = ""
|
||||
new_word.trans = ""
|
||||
input1.value.focus()
|
||||
}
|
||||
|
||||
const edit_word = (index: number) => {
|
||||
editing_word.word = table.value[index].word
|
||||
editing_word.trans = table.value[index].trans
|
||||
editing_word.type = table.value[index].type
|
||||
editing_word.index = index
|
||||
word_editing.value = true
|
||||
}
|
||||
|
||||
const save_word = () => {
|
||||
if (editing_word.word != table.value[editing_word.index].word) {
|
||||
if (has_word(editing_word.word)) {
|
||||
ElMessage({
|
||||
message: `单词 ${new_word.word} 已存在`,
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
table.value[editing_word.index] = {
|
||||
word: editing_word.word,
|
||||
type: editing_word.type,
|
||||
trans: editing_word.trans,
|
||||
}
|
||||
wordsets.value.saveSet(id.value, table.value)
|
||||
ElMessage({
|
||||
message: `已保存更改`,
|
||||
type: 'success',
|
||||
})
|
||||
word_editing.value = false
|
||||
}
|
||||
|
||||
const change_name = () => {
|
||||
const old_name = name.value
|
||||
name.value = new_name.value
|
||||
wordsets.value.renameSet(class_name.value, id.value, new_name.value)
|
||||
ElMessage({
|
||||
message: `已更改 ${old_name} 为 ${name.value}`,
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
|
||||
const del_word = (index: number) => {
|
||||
const word = table.value[index].word.concat()
|
||||
table.value.splice(index, 1)
|
||||
wordsets.value.saveSet(id.value, table.value)
|
||||
ElMessage({
|
||||
message: `已删除 ${word}`,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
|
||||
const del_set = () => {
|
||||
ElMessageBox.confirm("确定要删除吗？")
|
||||
.then(() => {
|
||||
const index = wordsets.value.getId(class_name.value, id.value)
|
||||
if (index) {
|
||||
wordsets.value.delSet(class_name.value, index)
|
||||
ElMessage(`已经删除 ${class_name.value} ${id.value}`)
|
||||
router.push("/manage")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const addTo = () => {
|
||||
select.visible = true
|
||||
select.confirm = (dest_id: string) => {
|
||||
if (id.value) {
|
||||
if (id.value != dest_id) {
|
||||
const failed = wordsets.value.addSetTo(id.value, dest_id)
|
||||
ElMessage(`已经添加到 ${dest_id}, 已经去除 ${failed} 个重复单词`)
|
||||
} else {
|
||||
ElMessage(`请选择一个不同的单词本`)
|
||||
}
|
||||
}
|
||||
select.visible = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
class_name.value = route.query.classname as string
|
||||
id.value = route.query.id as string
|
||||
if (id.value) {
|
||||
const status = wordsets.value.getSetStatus(class_name.value, id.value)
|
||||
if (status) {
|
||||
name.value = status.name
|
||||
}
|
||||
table.value = wordsets.value.getSet(id.value)
|
||||
}
|
||||
anime({
|
||||
targets: '.editor-animation-el',
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(50),
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.editor-container{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.editor-wordlist{
|
||||
flex-grow: 1;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
.editor-header{
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
#main {
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 25px;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.title {
|
||||
font-size: 35px;
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
#main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.card div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#new div {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#sets-container {
|
||||
background-color: var(--bg-color);
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-bg-color: #FFFFFF00;
|
||||
--el-table-tr-bg-color: #FFFFFF00;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<el-page-header style="margin: 20px;" @back="$router.push('/manage')">
|
||||
<el-page-header class="new-set-header new-set-animation-el"@back="$router.push('/manage')">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 新建单词本 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-container id="main-container" class="container card">
|
||||
<el-container id="main-container" class="container card new-set-animation-el">
|
||||
<div style="overflow: auto;">
|
||||
<div class="colbox">
|
||||
<div class="mid-text">名称:</div>
|
||||
<el-input v-model="set_name"></el-input>
|
||||
<div class="mid-text">分组:</div>
|
||||
<el-select allow-create filterable default-first-option v-model="new_set_class" class="m-2" placeholder="输入新单词本类后后请按回车">
|
||||
<el-option v-for="item in $store.state.wordsets._allclass" :key="item" :label="item" :value="item" />
|
||||
<el-option v-for="item in store.wordsets._allclass" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button style="width: 50%;margin-top: 20px;" type="primary" @click="new_wordset()">创建</el-button>
|
||||
|
|
@ -19,34 +19,46 @@
|
|||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ElMessage } from 'element-plus';
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useMainStore } from '@/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import anime from 'animejs'
|
||||
|
||||
export default {
|
||||
name: "NewSet",
|
||||
data() {
|
||||
return {
|
||||
set_name: "",
|
||||
new_set_class: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
new_wordset() {
|
||||
if (!this.new_set_class) {
|
||||
ElMessage({
|
||||
message: "集合不能为空",
|
||||
type: "error"
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.$store.state.wordsets.addSet(this.new_set_class,this.set_name);
|
||||
this.$router.push('/manage');
|
||||
return;
|
||||
},
|
||||
const store = useMainStore()
|
||||
const router = useRouter()
|
||||
|
||||
const set_name = ref("")
|
||||
const new_set_class = ref("")
|
||||
|
||||
const new_wordset = () => {
|
||||
if (!new_set_class.value) {
|
||||
ElMessage({
|
||||
message: "集合不能为空",
|
||||
type: "error"
|
||||
})
|
||||
return
|
||||
}
|
||||
store.wordsets.addSet(new_set_class.value, set_name.value)
|
||||
router.push('/manage')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
anime({
|
||||
targets: '.new-set-animation-el',
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.new-set-header {
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
.colbox {
|
||||
|
|
@ -0,0 +1,508 @@
|
|||
<template>
|
||||
<el-container id="main-container">
|
||||
<el-header class="list-view-header" style="">
|
||||
<el-page-header style="margin: 10px;" @back="router.push('/');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 编辑单词本 </span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<div class="colbox">
|
||||
<el-button @click="$router.push('/manage/new')"
|
||||
type="success"><v-icon>mdi-plus</v-icon>新建单词本</el-button>
|
||||
<div class="pconly">
|
||||
<el-dropdown trigger="click" style="margin-left: 20px;">
|
||||
<el-button type="primary">
|
||||
更多<v-icon size="20px">mdi-chevron-down</v-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="manage_online_wordsets"><v-icon
|
||||
size="20px">mdi-earth</v-icon>管理在线单词本</el-dropdown-item>
|
||||
<el-dropdown-item @click="export_set"><v-icon
|
||||
size="18px">mdi-export</v-icon>导出</el-dropdown-item>
|
||||
<el-dropdown-item @click="import_set"><v-icon color="white" name=''
|
||||
size="18px">mdi-import</v-icon>导入</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-page-header>
|
||||
</el-header>
|
||||
<el-container style="height:calc(100% - 60px);position: relative;">
|
||||
<el-aside class="list-view-aside">
|
||||
<div id="sidebar" class="sidebar-hidden">
|
||||
<div id="sidebar-content">
|
||||
<div class="sidebar-title">
|
||||
|本地
|
||||
</div>
|
||||
<div v-for="class_name in store.wordsets._allclass" :title="class_name" :key="class_name"
|
||||
@click="view(class_name)" class="sidebar-item">
|
||||
{{ class_name }}
|
||||
</div>
|
||||
<div class="sidebar-title">
|
||||
|在线
|
||||
</div>
|
||||
<div v-for="set in Object.keys(online_wordsets)" :key="set">
|
||||
<div v-for="(set_class, class_name) in online_wordsets[set]" :title="String(class_name)"
|
||||
:key="class_name" @click="view_online(set, String(class_name))" class="sidebar-item">
|
||||
{{ class_name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
|
||||
<v-icon>mdi-format-list-bulleted</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main id="wordsets-container">
|
||||
<div id="sets-container">
|
||||
<div v-if="mode === 0" class="colbox wordclass">
|
||||
<div v-for="(wordset, index) in store.wordsets.getClass(view_wordsets)" :key="index"
|
||||
class="wordset rowbox">
|
||||
<div class="no">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="title">
|
||||
{{ wordset.name }}
|
||||
</div>
|
||||
<div class="created-date">
|
||||
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
|
||||
</div>
|
||||
<div class="option">
|
||||
<v-icon class="btn" @click="edit(wordset.id)">mdi-book-edit</v-icon>
|
||||
<v-icon class="btn" @click="del(view_wordsets, wordset.id, index)">mdi-delete</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="mode === 1" class="colbox wordclass">
|
||||
<div v-for="(wordset, index) in online_wordsets[viewing.set][viewing.book]" :key="index"
|
||||
class="wordset rowbox">
|
||||
<div class="title">
|
||||
{{ wordset.name }}
|
||||
</div>
|
||||
<div class="created-date">
|
||||
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
|
||||
</div>
|
||||
<div class="option">
|
||||
<v-icon class="btn" @click="show(String(index), wordset.name)">mdi-eye</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useMainStore } from '@/store';
|
||||
import axios from 'axios';
|
||||
import anime from 'animejs';
|
||||
|
||||
interface WordSet {
|
||||
id: string;
|
||||
name: string;
|
||||
created: number;
|
||||
}
|
||||
|
||||
interface OnlineWordSets {
|
||||
[set: string]: {
|
||||
[book: string]: {
|
||||
[id: string]: WordSet
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
const store = useMainStore();
|
||||
|
||||
// Convert data properties to refs/reactive
|
||||
const view_wordsets = ref<string>("");
|
||||
const viewing = reactive<{
|
||||
set: string;
|
||||
book: string;
|
||||
}>({
|
||||
set: "",
|
||||
book: "",
|
||||
});
|
||||
const online_wordsets = ref<OnlineWordSets>({});
|
||||
const mode = ref<number>(0);
|
||||
|
||||
// Convert methods to functions
|
||||
const view = (classname: string): void => {
|
||||
mode.value = 0;
|
||||
view_wordsets.value = classname;
|
||||
close_sidebar();
|
||||
nextTick(() => {
|
||||
anime({
|
||||
targets: ".wordset",
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(50, { grid: [6, 6] })
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
const view_online = (set_name: string, class_name: string): void => {
|
||||
mode.value = 1;
|
||||
viewing.set = set_name;
|
||||
viewing.book = class_name;
|
||||
close_sidebar();
|
||||
nextTick(() => {
|
||||
anime({
|
||||
targets: ".wordset",
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(50, { grid: [6, 6] })
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
const manage_online_wordsets = (): void => {
|
||||
window.location.href = '/dashboard';
|
||||
};
|
||||
|
||||
const del = (class_name: string, id: string, index: number): void => {
|
||||
ElMessageBox.confirm("确定要删除吗？")
|
||||
.then(() => {
|
||||
store.wordsets.delSet(class_name, index);
|
||||
ElMessage(`已经删除 ${class_name} ${id}`);
|
||||
});
|
||||
};
|
||||
|
||||
const edit = (id: string): void => {
|
||||
router.push({
|
||||
path: "./manage/edit",
|
||||
query: { id, classname: view_wordsets.value }
|
||||
});
|
||||
};
|
||||
|
||||
const show = (id: string, name: string): void => {
|
||||
router.push({
|
||||
path: "./manage/show",
|
||||
query: { set: viewing.set, book: viewing.book, id, name }
|
||||
});
|
||||
};
|
||||
|
||||
const export_set = async (): Promise<void> => {
|
||||
store.wordsets.export_set((cnt: number) => {
|
||||
ElNotification({
|
||||
type: "success",
|
||||
title: "导出成功",
|
||||
message: `已导出 ${cnt} 本单词本`
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const import_set = async (): Promise<void> => {
|
||||
store.wordsets.import_set((cnt: number) => {
|
||||
ElNotification({
|
||||
type: "success",
|
||||
title: "添加成功",
|
||||
message: `已添加 ${cnt} 本单词本`
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const taggle_sidebar = (): void => {
|
||||
let node = document.getElementById("sidebar");
|
||||
let class_name = "sidebar-hidden";
|
||||
if (node) {
|
||||
if (node.classList.contains(class_name)) {
|
||||
node.classList.remove(class_name);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const close_sidebar = (): void => {
|
||||
let node = document.getElementById("sidebar");
|
||||
let class_name = "sidebar-hidden";
|
||||
if (node) {
|
||||
if (!node.classList.contains(class_name)) {
|
||||
node.classList.add(class_name);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Convert created lifecycle hook to onMounted
|
||||
onMounted(() => {
|
||||
anime({
|
||||
targets: ".list-view-header",
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
});
|
||||
anime({
|
||||
targets: ".list-view-aside",
|
||||
translateX: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
});
|
||||
let first_set = store.wordsets._firstClass;
|
||||
if (first_set) {
|
||||
view(first_set);
|
||||
}
|
||||
|
||||
axios.get<OnlineWordSets>("wordset/list").then(
|
||||
(res) => {
|
||||
online_wordsets.value = res.data;
|
||||
}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media screen and (max-width: 500px) {
|
||||
.list-view-header {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.list-view-aside {
|
||||
width: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.list-view-header {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.list-view-aside {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-view-aside {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.list-view-header {
|
||||
justify-content: space-between;
|
||||
animation: enter ease-out .6s backwards;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
#sidebar {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
margin-top: 20px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.sidebar-hidden {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
|
||||
.wordset {
|
||||
border-radius: 13px;
|
||||
padding: 10px;
|
||||
height: 180px;
|
||||
width: 40%;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: absolute;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
bottom: 0;
|
||||
right: -50px;
|
||||
color: var(--text-color);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
background-color: var(--bg-color);
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.sidebar-hidden #show-sidebar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#wordsets-container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#sets-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
#sidebar {
|
||||
width: 180px;
|
||||
padding-left: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.wordset {
|
||||
border-radius: 13px;
|
||||
padding: 20px;
|
||||
height: 230px;
|
||||
width: 170px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.wordset {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
border: solid 1px var(--bd-color);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.wordset:hover {
|
||||
box-shadow: var(--el-box-shadow);
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
background-color: var(--bg-color-solid);
|
||||
border-radius: 5px;
|
||||
height: calc(100% - 20px);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--bd-color);
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#sidebar-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
width: 100%;
|
||||
font-size: 25px;
|
||||
line-height: 60px;
|
||||
padding-left: 5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
opacity: 0;
|
||||
transition: .5s;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#wordsets-container {
|
||||
overflow-x: auto;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wordclass {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +1,22 @@
|
|||
<template>
|
||||
<div id="wrapper" class="rowbox container">
|
||||
<Post id="post"/>
|
||||
<Post class="markdown" id="post"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from '@/md/about.md'
|
||||
export default {
|
||||
name: "ManualPage",
|
||||
components:{
|
||||
Post
|
||||
},
|
||||
created() {
|
||||
<script setup lang="ts">
|
||||
import Post from '@/md/about.md';
|
||||
import '@/styles/markdown.css';
|
||||
import anime from 'animejs';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
anime({
|
||||
targets: '#post',
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -31,7 +33,9 @@ export default {
|
|||
}
|
||||
|
||||
#wrapper {
|
||||
height:calc(100% - 80px);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
|
|
@ -1,20 +1,22 @@
|
|||
<template>
|
||||
<div id="wrapper" class="rowbox container">
|
||||
<Post id="post"/>
|
||||
<Post class="markdown" id="post"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from '@/md/manual.md'
|
||||
export default {
|
||||
name: "ManualPage",
|
||||
components:{
|
||||
Post
|
||||
},
|
||||
created() {
|
||||
<script setup lang="ts">
|
||||
import Post from '@/md/manual.md';
|
||||
import '@/styles/markdown.css';
|
||||
import anime from 'animejs';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
anime({
|
||||
targets: '#post',
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -31,7 +33,9 @@ export default {
|
|||
}
|
||||
|
||||
#wrapper {
|
||||
height:calc(100% - 90px);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
|
|
@ -0,0 +1,454 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-page-header class="recite-view-header recite-view-animation-el" @back="$router.push('/')">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 背诵 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div id="test" class="colbox">
|
||||
<div style="flex-grow: 1;" class="card recite-view-animation-el">
|
||||
<div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
|
||||
<div>
|
||||
<textarea autofocus id="input" ref="inputAreaRef" v-if="current === answered" @input="change"
|
||||
class="answer" spellcheck="false">
|
||||
</textarea>
|
||||
<div v-if="current < answered" class="answer">{{ word.word }}</div>
|
||||
</div>
|
||||
<div id="explain">
|
||||
<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="showAnswer">显示答案</el-button>
|
||||
<el-button v-if="current === answered" type="warning" @click="skip">跳过</el-button>
|
||||
<el-button @click="terminate" type="danger">停止背诵</el-button>
|
||||
<v-icon style="margin-left: 10px;translate: 0 4px;"
|
||||
@click="audio_play">mdi-volume-high</v-icon>
|
||||
</div>
|
||||
<div id="trans">{{ word.type }} {{ word.trans }}</div>
|
||||
</div>
|
||||
<div id="add-to-box" class="card recite-view-animation-el">
|
||||
<el-text class="mx-1 title">加入至</el-text>
|
||||
<div class="colbox para">
|
||||
<div class="mid-text">分组:</div>
|
||||
<el-select v-model="set_class" class="m-2" placeholder="Select">
|
||||
<el-option v-for="item in wordsets._allclass" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="colbox para">
|
||||
<div class="mid-text">单词本:</div>
|
||||
<el-select v-model="set_id" class="m-2" placeholder="Select">
|
||||
<el-option v-for="item in wordsets.getClass(set_class)" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button @click="add_to" type="primary">添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
|
||||
import { useMainStore } from '@/store';
|
||||
import { WordItem } from '@/types';
|
||||
import anime from 'animejs';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useMainStore();
|
||||
|
||||
interface Settings {
|
||||
direct_answer: boolean;
|
||||
}
|
||||
|
||||
const wordsets = ref(store.wordsets)
|
||||
const testWords = ref<WordItem[]>([]);
|
||||
const seq = ref<number[]>([]);
|
||||
const total = ref(0);
|
||||
const current = ref(0);
|
||||
const answered = ref(0);
|
||||
const word = ref<WordItem>({} as WordItem);
|
||||
const set_class = ref("");
|
||||
const set_id = ref("");
|
||||
const settings = ref<Settings>({
|
||||
direct_answer: false,
|
||||
});
|
||||
const inputAreaRef = ref<HTMLTextAreaElement | null>(null)
|
||||
|
||||
const key_listener = (event: KeyboardEvent) => {
|
||||
let ctrlKey = event.ctrlKey || event.metaKey;
|
||||
if (ctrlKey) {
|
||||
switch (event.key) {
|
||||
case 'b':
|
||||
showAnswer();
|
||||
break;
|
||||
case 'm':
|
||||
skip();
|
||||
break;
|
||||
case 'i':
|
||||
add_to();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
prev();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
next();
|
||||
break;
|
||||
case 'y':
|
||||
audio_play();
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
const next = () => {
|
||||
if (current.value < answered.value) {
|
||||
current.value++;
|
||||
if (current.value === total.value) {
|
||||
ElNotification({
|
||||
message: "您已完成所有单词的背诵",
|
||||
title: "Congratulations!",
|
||||
type: "success"
|
||||
});
|
||||
router.push('/');
|
||||
return;
|
||||
}
|
||||
nextTick(() => {
|
||||
show();
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
type: "error",
|
||||
message: "您还未答过该词,跳过请使用ctrl+M",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const skip = () => {
|
||||
ElMessage({
|
||||
message: "已经跳过该词",
|
||||
type: "info"
|
||||
});
|
||||
answered.value++;
|
||||
store.history.count(answered.value);
|
||||
next();
|
||||
};
|
||||
|
||||
const prev = () => {
|
||||
if (current.value > 0) {
|
||||
current.value--;
|
||||
show();
|
||||
} else {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: "已经是第一个单词"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showAnswer = () => {
|
||||
if (!settings.value.direct_answer) {
|
||||
if (inputAreaRef.value) {
|
||||
const inputArea = inputAreaRef.value;
|
||||
if (inputArea.value === "_".repeat(word.value.word.length)) {
|
||||
inputArea.value = word.value.word[0] + "_".repeat(word.value.word.length - 1);
|
||||
inputArea.setSelectionRange(1, 1);
|
||||
ElMessage(`首字母为：${word.value.word[0]}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
ElMessage(`答案：${word.value.word}`);
|
||||
};
|
||||
|
||||
const show = () => {
|
||||
word.value = testWords.value[seq.value[current.value]];
|
||||
if (current.value === answered.value) {
|
||||
if (inputAreaRef.value) {
|
||||
const inputArea = inputAreaRef.value;
|
||||
inputArea.value = "_".repeat(word.value.word.length);
|
||||
inputArea.setSelectionRange(0, 0);
|
||||
inputArea.style.height = "0";
|
||||
setTimeout(() => {
|
||||
inputArea.style.height = `${inputArea.scrollHeight}px`;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const change = () => {
|
||||
if (inputAreaRef.value) {
|
||||
const inputArea = inputAreaRef.value;
|
||||
const cur = inputArea.selectionStart;
|
||||
const value = inputArea.value;
|
||||
const n = value.indexOf("_");
|
||||
let content: string;
|
||||
|
||||
if (n == word.value.word.length) {
|
||||
if (value.substring(0, value.length - 1).toLowerCase() == word.value.word.toLowerCase()) {
|
||||
ElMessage.success("正确");
|
||||
answered.value++;
|
||||
store.history.count(answered.value);
|
||||
next();
|
||||
return;
|
||||
}
|
||||
ElMessage.error("错误");
|
||||
content = "_".repeat(word.value.word.length);
|
||||
inputArea.value = content;
|
||||
inputArea.setSelectionRange(0, 0);
|
||||
inputArea.style.height = "0";
|
||||
setTimeout(() => {
|
||||
inputArea.style.height = `${inputArea.scrollHeight}px`;
|
||||
}, 200);
|
||||
return;
|
||||
} else {
|
||||
n == -1 ? content = "_".repeat(word.value.word.length) : (content = value.substring(0, n),
|
||||
content += "_".repeat(word.value.word.length - n));
|
||||
inputArea.value = content;
|
||||
if (cur && cur > n) {
|
||||
inputArea.setSelectionRange(n, n);
|
||||
} else if (cur !== null) {
|
||||
inputArea.setSelectionRange(cur, cur);
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
const height = parseInt(inputArea.style.height || '0');
|
||||
if (height < inputArea.scrollHeight) {
|
||||
inputArea.style.height = `${inputArea.scrollHeight}px`;
|
||||
}
|
||||
}, 0);
|
||||
inputArea.focus();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const audio_play = () => {
|
||||
const t = new Audio("https://dict.youdao.com/dictvoice?audio=" + word.value.word);
|
||||
t.play();
|
||||
};
|
||||
|
||||
const terminate = () => {
|
||||
ElMessageBox.confirm("确定要终止吗？")
|
||||
.then(() => {
|
||||
router.push('/');
|
||||
ElNotification({
|
||||
message: "背诵已终止",
|
||||
type: "info",
|
||||
title: "Terminate"
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const add_to = () => {
|
||||
if (set_id.value) {
|
||||
const data = JSON.parse(localStorage.getItem(set_id.value) || '[]');
|
||||
for (let i of data) {
|
||||
if (i.word === word.value.word) {
|
||||
ElMessage({
|
||||
message: '已经添加过该词',
|
||||
type: 'error',
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
data.push(word.value);
|
||||
localStorage.setItem(set_id.value, JSON.stringify(data));
|
||||
ElMessage({
|
||||
message: `已添加 ${word.value.word} (${word.value.type})`,
|
||||
type: 'success',
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '请先选择单词本',
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keyup', key_listener);
|
||||
const index = route.query.index;
|
||||
if (index) {
|
||||
store.history.use(Number(index));
|
||||
}
|
||||
|
||||
store.history.init_recite((words: WordItem[], currentVal: number, seqVal: number[], settingsVal: Settings) => {
|
||||
testWords.value = words;
|
||||
current.value = currentVal;
|
||||
total.value = words.length;
|
||||
answered.value = currentVal;
|
||||
settings.value = settingsVal;
|
||||
seq.value = seqVal;
|
||||
|
||||
if (answered.value >= total.value) {
|
||||
answered.value = 0;
|
||||
current.value = 0;
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: "进度已经重置"
|
||||
});
|
||||
store.history.count(answered.value);
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
show();
|
||||
});
|
||||
}, (msg: string) => {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: msg
|
||||
});
|
||||
router.push('/select');
|
||||
});
|
||||
anime({
|
||||
targets: '.recite-view-animation-el',
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(50),
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener("keyup", key_listener);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.recite-view-header {
|
||||
margin-top:20px;
|
||||
margin-left:20px
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.item {
|
||||
margin-bottom: 20px;
|
||||
/* background-color: var(--bg-color); */
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.tbtn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 35px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#test {
|
||||
padding: 30px;
|
||||
animation: enter .5s ease-out;
|
||||
}
|
||||
|
||||
#trans {
|
||||
font-size: 43px;
|
||||
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: 25px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
#status {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.answer {
|
||||
margin-top: 10px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--bg-color);
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
border: none;
|
||||
outline-style: none;
|
||||
padding: 0;
|
||||
transition: .5s;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +1,24 @@
|
|||
<template>
|
||||
<div class="container" id="page">
|
||||
<el-page-header @back="this.$router.push('/');" style="width: calc(100% - 30px);margin-left: 30px;margin-top: 5px;">
|
||||
<el-page-header class="recite-select-animation-el recite-select-header" @back="router.push('/');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3">开始新背诵</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-steps style="width: 100%;" align-center :active="step">
|
||||
<el-steps class="recite-select-animation-el" style="width: 100%;" align-center :active="step">
|
||||
<el-step title="选择单词本" description="选择在线或本地单词本以开始背诵"></el-step>
|
||||
<el-step title="自定义背诵" description="您可以在此处更改背诵设置"></el-step>
|
||||
</el-steps>
|
||||
<div id="main" class="card" style="overflow: hidden;">
|
||||
<div id="main" class="card recite-select-animation-el">
|
||||
<div class="item" id="select-area" v-show="step === 1">
|
||||
<el-tabs style="height: calc(100% - 40px);position: relative;overflow: hidden;">
|
||||
<el-tab-pane label="本地">
|
||||
<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 $store.state.wordsets._inner"
|
||||
@change="(res: boolean) => { handleCheckAllChange(local, res) }" size="large">全选</el-checkbox>
|
||||
<el-checkbox-group v-model="local.checkedSets" @change="(res: string[]) => { handleChange(local, res) }">
|
||||
<div class="set_radios" v-for="(set_class, set_class_name) in store.wordsets._inner"
|
||||
:key="set_class_name">
|
||||
<p>{{ set_class_name }}</p>
|
||||
<p class="mb-4 mt-2">{{ 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;">
|
||||
|
|
@ -30,12 +30,13 @@
|
|||
</el-tab-pane>
|
||||
<el-tab-pane label="在线">
|
||||
<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) }">
|
||||
@change="(res: boolean) => { handleCheckAllChange(online, res) }" size="large">全选</el-checkbox>
|
||||
<el-checkbox-group v-model="online.checkedSets"
|
||||
@change="(res: string[]) => { 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>
|
||||
<p class="mb-4 mt-2">{{ 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;">
|
||||
|
|
@ -71,7 +72,8 @@
|
|||
<div style="font-size: 20px;">忽略词组</div>
|
||||
<div style="font-size: 14px;">开启后不背诵词组</div>
|
||||
</div>
|
||||
<el-switch @change="update" v-model="settings.ignore_phrases" active-color="#13ce66"></el-switch>
|
||||
<el-switch @change="update" v-model="settings.ignore_phrases"
|
||||
active-color="#13ce66"></el-switch>
|
||||
</div>
|
||||
<el-button style="position: absolute;left: 30px;bottom: 30px;" @click="backSelect">上一步</el-button>
|
||||
<el-button style="position: absolute;right: 30px;bottom: 30px;" type="primary"
|
||||
|
|
@ -82,108 +84,143 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useMainStore } from '@/store';
|
||||
import axios from '@/scripts/request';
|
||||
import anime from 'animejs';
|
||||
|
||||
export default {
|
||||
name: "SelectPage",
|
||||
data() {
|
||||
return {
|
||||
step: 1,
|
||||
local: {
|
||||
allsets: [],
|
||||
checkedSets: [],
|
||||
isIndeterminate: false,
|
||||
checkAll: false,
|
||||
},
|
||||
online: {
|
||||
allsets: [],
|
||||
checkedSets: [],
|
||||
isIndeterminate: false,
|
||||
checkAll: false,
|
||||
},
|
||||
online_sets: {},
|
||||
online_ids: {},
|
||||
settings: {
|
||||
shuffle: true,
|
||||
direct_answer: false,
|
||||
ignore_phrases: true,
|
||||
}
|
||||
const router = useRouter();
|
||||
const store = useMainStore();
|
||||
|
||||
interface WordSetState {
|
||||
allsets: string[];
|
||||
checkedSets: string[];
|
||||
isIndeterminate: boolean;
|
||||
checkAll: boolean;
|
||||
}
|
||||
|
||||
interface ReciteSettings {
|
||||
shuffle: boolean;
|
||||
direct_answer: boolean;
|
||||
ignore_phrases: boolean;
|
||||
}
|
||||
|
||||
interface OnlineIdInfo {
|
||||
set: string;
|
||||
book: string;
|
||||
}
|
||||
|
||||
const step = ref(1);
|
||||
const local = reactive<WordSetState>({
|
||||
allsets: [],
|
||||
checkedSets: [],
|
||||
isIndeterminate: false,
|
||||
checkAll: false,
|
||||
});
|
||||
|
||||
const online = reactive<WordSetState>({
|
||||
allsets: [],
|
||||
checkedSets: [],
|
||||
isIndeterminate: false,
|
||||
checkAll: false,
|
||||
});
|
||||
|
||||
const online_sets = ref<Record<string, any>>({});
|
||||
const online_ids = ref<Record<string, OnlineIdInfo>>({});
|
||||
const settings = reactive<ReciteSettings>({
|
||||
shuffle: true,
|
||||
direct_answer: false,
|
||||
ignore_phrases: true,
|
||||
});
|
||||
|
||||
const handleCheckAllChange = (range: WordSetState, val: boolean) => {
|
||||
range.checkedSets = val ? range.allsets : [];
|
||||
range.isIndeterminate = false;
|
||||
};
|
||||
|
||||
const handleChange = (range: WordSetState, value: string[]) => {
|
||||
range.checkAll = value.length === range.allsets.length;
|
||||
range.isIndeterminate = value.length > 0 && value.length < range.allsets.length;
|
||||
};
|
||||
|
||||
const completeSelect = () => {
|
||||
if (online.checkedSets.length + local.checkedSets.length > 0) {
|
||||
const selectArea = document.getElementById("select-area");
|
||||
if (selectArea) selectArea.style.animation = "exitLeft .25s ease-in forwards";
|
||||
setTimeout(() => {
|
||||
const settingArea = document.getElementById("setting-area");
|
||||
if (settingArea) settingArea.style.animation = "enterRight .25s ease-out forwards";
|
||||
step.value++;
|
||||
}, 250);
|
||||
return;
|
||||
}
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: "请选择单词本",
|
||||
});
|
||||
};
|
||||
|
||||
const backSelect = () => {
|
||||
const settingArea = document.getElementById("setting-area");
|
||||
if (settingArea) settingArea.style.animation = "exitRight .25s ease-in forwards";
|
||||
setTimeout(() => {
|
||||
step.value--;
|
||||
setTimeout(() => {
|
||||
const selectArea = document.getElementById("select-area");
|
||||
if (selectArea) selectArea.style.animation = "enterLeft .25s ease-out forwards";
|
||||
}, 0);
|
||||
}, 250);
|
||||
};
|
||||
|
||||
const startRecite = () => {
|
||||
const onlinesets = [];
|
||||
for (let i of online.checkedSets) {
|
||||
onlinesets.push(Object.assign({ id: i }, online_ids.value[i]));
|
||||
}
|
||||
store.history.add(local.checkedSets, onlinesets, settings, () => {
|
||||
router.push('/recite');
|
||||
});
|
||||
};
|
||||
|
||||
const update = () => {
|
||||
// Method to handle switch changes if needed
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
for (let i of store.wordsets._allsets) {
|
||||
for (let j of i) {
|
||||
local.allsets.push(j.id);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCheckAllChange(range, val) {
|
||||
range.checkedSets = val ? range.allsets : [];
|
||||
range.isIndeterminate = false;
|
||||
},
|
||||
handleChange(range, value) {
|
||||
range.checkAll = value.length === range.allsets.length;
|
||||
range.isIndeterminate = value.length > 0 && value.length < range.allsets.length;
|
||||
},
|
||||
completeSelect() {
|
||||
if (this.online.checkedSets.length + this.local.checkedSets.length > 0) {
|
||||
document.getElementById("select-area").style.animation = "exitLeft .25s ease-in forwards";
|
||||
setTimeout(() => {
|
||||
document.getElementById("setting-area").style.animation = "enterRight .25s ease-out forwards";
|
||||
this.step++;
|
||||
}, 250)
|
||||
return;
|
||||
}
|
||||
ElMessage({
|
||||
type:'error',
|
||||
message:"请选择单词本",
|
||||
})
|
||||
},
|
||||
backSelect() {
|
||||
document.getElementById("setting-area").style.animation = "exitRight .25s ease-in forwards";
|
||||
setTimeout(() => {
|
||||
this.step--;
|
||||
setTimeout(() => {
|
||||
document.getElementById("select-area").style.animation = "enterLeft .25s ease-out forwards";
|
||||
}, 0);
|
||||
}, 250)
|
||||
},
|
||||
startRecite() {
|
||||
let onlinesets = [];
|
||||
for(let i of this.online.checkedSets){
|
||||
onlinesets.push(Object.assign({id:i},this.online_ids[i]))
|
||||
}
|
||||
this.$store.state.history.add(this.local.checkedSets,onlinesets,this.settings,()=>{
|
||||
this.$router.push('/recite');
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
for (let i of this.$store.state.wordsets._allsets) {
|
||||
for (let j of i) {
|
||||
this.local.allsets.push(j.id);
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', this.key_listener);
|
||||
axios.get("/wordset/list").then((res, err) => {
|
||||
if (err) {
|
||||
ElMessage({
|
||||
message: "在线词库加载失败",
|
||||
type: "error"
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.online_sets = res.data;
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
axios.get("wordset/list").then((res: any) => {
|
||||
online_sets.value = res.data;
|
||||
for (let i in online_sets.value) {
|
||||
for (let j in online_sets.value[i]) {
|
||||
for (let k in online_sets.value[i][j]) {
|
||||
online.allsets.push(k);
|
||||
online_ids.value[k] = {
|
||||
set: i,
|
||||
book: j
|
||||
};
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch(()=> {
|
||||
ElMessage({
|
||||
message: "在线词库加载失败",
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
anime({
|
||||
targets: ".recite-select-animation-el",
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(50),
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -202,13 +239,14 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
#page{
|
||||
#page {
|
||||
width: 100%;
|
||||
/* margin: 20px; */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 23px;
|
||||
line-height: 35px;
|
||||
|
|
@ -228,8 +266,9 @@ export default {
|
|||
|
||||
#main {
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 250px);
|
||||
height: calc(100% - 60px);
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -265,6 +304,12 @@ export default {
|
|||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.recite-select-header {
|
||||
width: calc(100% - 30px);
|
||||
margin-left: 30px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@keyframes exitLeft {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["src/*"],
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
|
||||
/* Paths */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import { resolve } from 'path';
|
||||
import vuetify from 'vite-plugin-vuetify';
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
import Markdown from 'unplugin-vue-markdown/vite'
|
||||
|
||||
const now = new Date();
|
||||
const buildTime = now.toLocaleString('zh-CN');
|
||||
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
build: {
|
||||
outDir: 'page',
|
||||
},
|
||||
define: {
|
||||
__BUILD_TIME__: JSON.stringify(buildTime),
|
||||
__APP_VERSION__: JSON.stringify('1.03 beta1')
|
||||
},
|
||||
plugins: [
|
||||
vue({
|
||||
include: [ /\.vue$/,/\.md$/],
|
||||
}),
|
||||
vuetify({
|
||||
autoImport: true,
|
||||
}),
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
Markdown({})
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, './src'),
|
||||
'~/': resolve(__dirname, './src/'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/wordset': {
|
||||
target: 'https://app.cast1e.top/wordin',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/upload': {
|
||||
target: 'https://app.cast1e.top/wordin',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
const { defineConfig } = require('@vue/cli-service')
|
||||
const path = require('path');
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
publicPath:"./",
|
||||
devServer: {
|
||||
proxy: 'https://localhost:443'
|
||||
},
|
||||
chainWebpack: config => {
|
||||
config.module
|
||||
.rule('markdown')
|
||||
.test(/\.md$/)
|
||||
.use('vue-loader')
|
||||
.loader('vue-loader')
|
||||
.end()
|
||||
.use('md-loader')
|
||||
.loader(path.resolve(__dirname, 'src/loader/md-loader.js'))
|
||||
.end()
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue