change to vite and enabled typescript
cast1e
parent
9ad162a5b9
commit
aea4b310b7
|
|
@ -21,3 +21,6 @@ pnpm-debug.log*
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
auto-imports.d.ts
|
||||
component.d.ts
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
CDialog: typeof import('./src/components/UI/CDialog.vue')['default']
|
||||
ElAside: typeof import('element-plus/es')['ElAside']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||
ElContainer: typeof import('element-plus/es')['ElContainer']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElLink: typeof import('element-plus/es')['ElLink']
|
||||
ElMain: typeof import('element-plus/es')['ElMain']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElStep: typeof import('element-plus/es')['ElStep']
|
||||
ElSteps: typeof import('element-plus/es')['ElSteps']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
|
||||
<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="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<title>
|
||||
<%= htmlWebpackPlugin.options.title %>
|
||||
Wordin
|
||||
</title>
|
||||
<style>
|
||||
html,
|
||||
|
|
@ -29,10 +28,11 @@
|
|||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||
<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>
|
||||
|
||||
|
|
@ -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
35
package.json
35
package.json
|
|
@ -2,31 +2,48 @@
|
|||
"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",
|
||||
"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"
|
||||
"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 +0,0 @@
|
|||
{"requestId":"8f5a2a3c-2a9e-4929-906d-d1f5195fdef4","errorCode":"202","l":"en2zh-CHS"}
|
||||
57
src/App.vue
57
src/App.vue
|
|
@ -20,60 +20,13 @@
|
|||
</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,96 +1,94 @@
|
|||
<template>
|
||||
<div id="mask" v-if="visible">
|
||||
<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"><box-icon color="var(--text-color)" size="20px" name="x"></box-icon></div>
|
||||
<div id="close" @click="handleClose">
|
||||
<v-icon :size="25" icon="mdi-close"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"CDiaLog",
|
||||
props:{
|
||||
"visible":{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleClose(){
|
||||
this.$refs.bg.style.animation = "cui-dialog-disappear .3s ease-in";
|
||||
setTimeout(()=>this.$emit("update:visible",false),300);
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick, onMounted } from 'vue'
|
||||
import "@/style/cui.scss"
|
||||
|
||||
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>
|
||||
@keyframes cui-dialog-appear {
|
||||
0%{
|
||||
opacity: 0%;
|
||||
transform: translate(-50%,-50%) scale(0.5);
|
||||
}
|
||||
100%{
|
||||
opacity: 100%;
|
||||
transform: translate(-50%,-50%) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes cui-dialog-disappear {
|
||||
0%{
|
||||
opacity: 100%;
|
||||
transform: translate(-50%,-50%) scale(1);
|
||||
}
|
||||
100%{
|
||||
opacity: 0%;
|
||||
transform: translate(-50%,-50%) scale(0.5);
|
||||
}
|
||||
}
|
||||
@keyframes cui-dialog-blur{
|
||||
0%{
|
||||
backdrop-filter:blur(0px);
|
||||
}
|
||||
100%{
|
||||
backdrop-filter:blur(10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
#mask {
|
||||
z-index: 500;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(10px);
|
||||
animation: cui-dialog-blur .6s;
|
||||
}
|
||||
|
||||
<style scoped>
|
||||
#mask{
|
||||
z-index: 500;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(10px);
|
||||
animation: cui-dialog-blur .5s ;
|
||||
}
|
||||
#bg{
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
max-width: 80%;
|
||||
border: solid var(--bd-color) 1px;
|
||||
background-color: var(--bg-color-solid);
|
||||
border-radius: 8px;
|
||||
transform: translate(-50%,-50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
animation: cui-dialog-appear .4s cubic-bezier(0, 0, 0.36, 1.29);
|
||||
}
|
||||
#content{
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
#close{
|
||||
position: absolute;
|
||||
right:0;
|
||||
top: 0;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#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,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,53 +0,0 @@
|
|||
import {
|
||||
ElForm,
|
||||
ElButton,
|
||||
ElInput,
|
||||
ElCheckbox,
|
||||
ElDialog,
|
||||
ElTable,
|
||||
ElStep,
|
||||
ElLink,
|
||||
ElCard,
|
||||
ElCheckboxGroup,
|
||||
ElDropdown,
|
||||
ElFooter,
|
||||
ElMain,
|
||||
ElContainer,
|
||||
ElHeader,
|
||||
ElPageHeader,
|
||||
ElTabs,
|
||||
ElTabPane,
|
||||
ElSteps,
|
||||
ElSwitch,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
} from 'element-plus'
|
||||
|
||||
const element = {
|
||||
install: function(app) {
|
||||
app.use(ElForm)
|
||||
app.use(ElButton)
|
||||
app.use(ElInput)
|
||||
app.use(ElCheckbox)
|
||||
app.use(ElDialog)
|
||||
app.use(ElTable)
|
||||
app.use(ElStep)
|
||||
app.use(ElLink)
|
||||
app.use(ElCard)
|
||||
app.use(ElCheckboxGroup)
|
||||
app.use(ElDropdown)
|
||||
app.use(ElFooter)
|
||||
app.use(ElMain)
|
||||
app.use(ElContainer)
|
||||
app.use(ElHeader)
|
||||
app.use(ElPageHeader)
|
||||
app.use(ElTabPane)
|
||||
app.use(ElSteps)
|
||||
app.use(ElTabs)
|
||||
app.use(ElSwitch)
|
||||
app.use(ElSelect)
|
||||
app.use(ElOption)
|
||||
}
|
||||
}
|
||||
|
||||
export default element
|
||||
|
|
@ -1,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
|
||||
}
|
||||
21
src/main.js
21
src/main.js
|
|
@ -1,21 +0,0 @@
|
|||
import {createApp} from 'vue'
|
||||
import App from './App.vue'
|
||||
import { createStore } from 'vuex'
|
||||
// import ElementPlus from 'element-plus'
|
||||
import element from './loader/el-loader'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import 'boxicons'
|
||||
import router from './router.js'
|
||||
import axios from './js/request.js'
|
||||
|
||||
const app = createApp(App);
|
||||
const store = createStore({
|
||||
state(){
|
||||
}
|
||||
});
|
||||
app.use(store);
|
||||
app.use(element);
|
||||
app.use(router);
|
||||
app.config.globalProperties.$axios = axios;
|
||||
app.mount('#app');
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
import App from "./App.vue";
|
||||
import "element-plus/dist/index.css";
|
||||
import "element-plus/theme-chalk/dark/css-vars.css";
|
||||
import { useDarkMode } from "./composables/useDarkMode";
|
||||
import router from "./router";
|
||||
|
||||
// Vuetify
|
||||
import "vuetify/styles";
|
||||
import { createVuetify } from "vuetify";
|
||||
import { aliases, mdi } from "vuetify/iconsets/mdi";
|
||||
import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using
|
||||
|
||||
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,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');
|
||||
const home = ()=>import("@/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 './request.js'
|
||||
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", {
|
||||
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);
|
||||
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;
|
||||
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]];
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
@ -1,7 +1,41 @@
|
|||
import uuid from 'node-uuid';
|
||||
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[]};
|
||||
|
||||
export default class _wordset {
|
||||
constructor() {
|
||||
this.sets = {};
|
||||
let wordsets = localStorage.getItem("wordsets");
|
||||
|
|
@ -9,54 +43,65 @@ export default class _wordset {
|
|||
this.sets = JSON.parse(wordsets);
|
||||
}
|
||||
}
|
||||
save() {
|
||||
|
||||
save(): void {
|
||||
localStorage.setItem("wordsets", JSON.stringify(this.sets));
|
||||
}
|
||||
get _inner() {
|
||||
|
||||
get _inner(): {[className: string]: WordSetInfo[]} {
|
||||
return this.sets;
|
||||
}
|
||||
get _firstClass(){
|
||||
|
||||
get _firstClass(): string | null {
|
||||
return Object.keys(this.sets)[0] || null;
|
||||
}
|
||||
get _allclass(){
|
||||
|
||||
get _allclass(): string[] {
|
||||
return Object.keys(this.sets);
|
||||
}
|
||||
get _allsets(){
|
||||
|
||||
get _allsets(): WordSetInfo[][] {
|
||||
return Object.values(this.sets);
|
||||
}
|
||||
getClass(class_name) {
|
||||
|
||||
getClass(class_name: string): WordSetInfo[] | null {
|
||||
if (this.sets[class_name]) {
|
||||
return this.sets[class_name];
|
||||
}
|
||||
else return null;
|
||||
}
|
||||
getSetStatus(class_name,id){
|
||||
|
||||
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){
|
||||
if(set_class) {
|
||||
for(let i of set_class) {
|
||||
if(i.id === id) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
getId(class_name,id){
|
||||
|
||||
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 index;
|
||||
for(let index in set_class) {
|
||||
if(set_class[index].id === id) {
|
||||
return Number(index);
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
getSet(id) {
|
||||
let sets = JSON.parse(localStorage.getItem(id));
|
||||
|
||||
getSet(id: string): WordItem[] {
|
||||
let sets = localStorage.getItem(id);
|
||||
if (sets) {
|
||||
return sets;
|
||||
return JSON.parse(sets);
|
||||
}
|
||||
else return [];
|
||||
}
|
||||
delSet(class_name, index) {
|
||||
|
||||
delSet(class_name: string, index: number): boolean {
|
||||
let set_class = this.sets[class_name];
|
||||
if (set_class) {
|
||||
if (set_class[index]) {
|
||||
|
|
@ -71,11 +116,12 @@ export default class _wordset {
|
|||
}
|
||||
return false;
|
||||
}
|
||||
addSet(class_name,name) {
|
||||
|
||||
addSet(class_name: string, name: string): string {
|
||||
if (!this.sets[class_name]) {
|
||||
this.sets[class_name] = [];
|
||||
}
|
||||
let id = uuid.v1();
|
||||
let id = uuidv1();
|
||||
let time = (new Date()).getTime()
|
||||
this.sets[class_name].push({
|
||||
name: name,
|
||||
|
|
@ -86,14 +132,16 @@ export default class _wordset {
|
|||
this.save();
|
||||
return id;
|
||||
}
|
||||
saveSet(id,data){
|
||||
|
||||
saveSet(id: string, data: WordItem[]): void {
|
||||
localStorage.setItem(id, JSON.stringify(data));
|
||||
}
|
||||
renameSet(class_name,id,new_name){
|
||||
|
||||
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){
|
||||
if(set_class) {
|
||||
for(let i of set_class) {
|
||||
if(i.id === id) {
|
||||
i.name = new_name;
|
||||
this.save();
|
||||
return;
|
||||
|
|
@ -101,25 +149,28 @@ export default class _wordset {
|
|||
}
|
||||
}
|
||||
}
|
||||
addSetTo(origin_id,dest_id){
|
||||
|
||||
addSetTo(origin_id: string, dest_id: string): number {
|
||||
let origin_set = this.getSet(origin_id);
|
||||
let dest_set = this.getSet(dest_id);
|
||||
let set={};
|
||||
let set: {[word: string]: WordItem} = {};
|
||||
origin_set.forEach(element => {
|
||||
set[element.word] = element;
|
||||
});
|
||||
dest_set.forEach(element => {
|
||||
set[element.word] = element;
|
||||
});
|
||||
set = Object.values(set);
|
||||
this.saveSet(dest_id,set);
|
||||
return origin_set.length + dest_set.length - set.length;
|
||||
let mergedSet = Object.values(set);
|
||||
this.saveSet(dest_id, mergedSet);
|
||||
return origin_set.length + dest_set.length - mergedSet.length;
|
||||
}
|
||||
fromArray(arr,class_name,name){
|
||||
let id = this.addSet(class_name,name);
|
||||
this.saveSet(id,arr);
|
||||
|
||||
fromArray(arr: WordItem[], class_name: string, name: string): void {
|
||||
let id = this.addSet(class_name, name);
|
||||
this.saveSet(id, arr);
|
||||
}
|
||||
async import_set(callback){
|
||||
|
||||
async import_set(callback?: (count: number) => void): Promise<void> {
|
||||
let [fileHandle] = await window.showOpenFilePicker({
|
||||
types: [
|
||||
{
|
||||
|
|
@ -144,11 +195,12 @@ export default class _wordset {
|
|||
}
|
||||
}
|
||||
this.save();
|
||||
if(typeof callback === "function"){
|
||||
if(typeof callback === "function") {
|
||||
callback(cnt);
|
||||
}
|
||||
}
|
||||
async export_set(callback) {
|
||||
|
||||
async export_set(callback?: (count: number) => void): Promise<void> {
|
||||
let fileHandle = await window.showSaveFilePicker({
|
||||
types: [
|
||||
{
|
||||
|
|
@ -162,19 +214,21 @@ export default class _wordset {
|
|||
let writestream = await fileHandle.createWritable();
|
||||
let data = {
|
||||
wordsets: this.sets,
|
||||
words: {}
|
||||
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);
|
||||
data.words[j.id] = temp;
|
||||
cnt++;
|
||||
if (temp) {
|
||||
data.words[j.id] = temp;
|
||||
cnt++;
|
||||
}
|
||||
}
|
||||
}
|
||||
writestream.write(JSON.stringify(data));
|
||||
writestream.close();
|
||||
if(typeof callback === "function"){
|
||||
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,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;
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
</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 class="card colbox history-item" v-for="(history, index) in store.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>
|
||||
|
|
@ -34,50 +34,34 @@
|
|||
<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>
|
||||
<script setup lang="ts">
|
||||
import { useMainStore } from '@/store';
|
||||
import { ref} from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
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 }
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -6,12 +6,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "SetManage",
|
||||
|
||||
}
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="container" style="overflow: auto;">
|
||||
<el-page-header style="margin: 10px;" @back="this.$router.push('/manage');">
|
||||
<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>
|
||||
|
|
@ -31,40 +31,56 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<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';
|
||||
|
||||
export default {
|
||||
name: "NoteEditor",
|
||||
data() {
|
||||
return {
|
||||
table: [],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
download(){
|
||||
this.$store.state.wordsets.fromArray(this.table,this.book,this.name);
|
||||
ElMessage("下载完毕");
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.set = this.$route.query.set;
|
||||
this.book = this.$route.query.book;
|
||||
this.id = this.$route.query.id;
|
||||
this.name = this.$route.query.name || "default";
|
||||
if (this.set && this.book && this.id) {
|
||||
this.$axios.get("wordset/detail", {
|
||||
params:{
|
||||
set: this.set, book: this.book, id: this.id
|
||||
}
|
||||
}).then(
|
||||
(res) => {
|
||||
this.table = res.data;
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="container" style="overflow: auto;">
|
||||
<el-page-header style="margin: 10px;" @back="this.$router.push('/manage');">
|
||||
<el-page-header style="margin: 10px;" @back="router.push('/manage');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
|
||||
</template>
|
||||
|
|
@ -91,15 +91,14 @@
|
|||
<div class="colbox para">
|
||||
<div class="mid-text">分组:</div>
|
||||
<el-select v-model="select.set_class" class="m-2" placeholder="Select">
|
||||
<el-option v-for="item in $store.state.wordsets._allclass" :key="item" :label="item"
|
||||
:value="item" />
|
||||
<el-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 $store.state.wordsets.getClass(select.set_class)" :key="item.id"
|
||||
:label="item.name" :value="item.id" />
|
||||
<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>
|
||||
|
|
@ -107,152 +106,177 @@
|
|||
</CDialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import CDialog from '../UI/CDialog.vue'
|
||||
<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'
|
||||
|
||||
export default {
|
||||
name: "NoteEditor",
|
||||
components: {
|
||||
CDialog
|
||||
},
|
||||
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: "",
|
||||
select: {
|
||||
visible: false,
|
||||
set_class: "",
|
||||
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',
|
||||
});
|
||||
},
|
||||
del_set() {
|
||||
ElMessageBox.confirm("确定要删除吗？")
|
||||
.then(() => {
|
||||
let index = this.$store.state.wordsets.getId(this.class_name, this.id);
|
||||
this.$store.state.wordsets.delSet(this.class_name, index);
|
||||
ElMessage(`已经删除 ${this.class_name} ${this.id}`);
|
||||
this.$router.push("/manage");
|
||||
});
|
||||
},
|
||||
addTo() {
|
||||
this.select.visible = true;
|
||||
this.select.confirm = (dest_id) => {
|
||||
if (this.id) {
|
||||
if(this.id != dest_id){
|
||||
let failed = this.$store.state.wordsets.addSetTo(this.id, dest_id);
|
||||
ElMessage(`已经添加到 ${dest_id}, 已经去除 ${failed} 个重复单词`);
|
||||
}
|
||||
else ElMessage(`请选择一个不同的单词本`);
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const store = useMainStore()
|
||||
const wordsets = ref(store.wordsets);
|
||||
|
||||
}
|
||||
this.select.visible = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<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,31 +19,28 @@
|
|||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ElMessage } from 'element-plus';
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { useMainStore } from '@/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
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')
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<el-container id="main-container">
|
||||
<el-header id="header" style="">
|
||||
<el-page-header style="margin: 10px;" @back="this.$router.push('/');">
|
||||
<el-page-header style="margin: 10px;" @back="router.push('/');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 编辑单词本 </span>
|
||||
</template>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<div class="sidebar-title">
|
||||
|本地
|
||||
</div>
|
||||
<div v-for="class_name in $store.state.wordsets._allclass" :title="class_name" :key="class_name"
|
||||
<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>
|
||||
|
|
@ -45,8 +45,8 @@
|
|||
|在线
|
||||
</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">
|
||||
<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>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<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"
|
||||
<div v-for="(wordset, index) in store.wordsets.getClass(view_wordsets)" :key="index"
|
||||
class="wordset rowbox">
|
||||
<div class="no">
|
||||
{{ index + 1 }}
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
</div>
|
||||
<div class="option">
|
||||
<box-icon class="btn" name='show' color="var(--text-color)"
|
||||
@click="show(index, wordset.name)"></box-icon>
|
||||
@click="show(String(index), wordset.name)"></box-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -99,105 +99,140 @@
|
|||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useMainStore } from '@/store';
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: "SetList",
|
||||
data() {
|
||||
return {
|
||||
view_wordsets: "",
|
||||
viewing: {
|
||||
set: "",
|
||||
book: "",
|
||||
},
|
||||
online_wordsets: [],
|
||||
mode: 0,
|
||||
interface WordSet {
|
||||
id: string;
|
||||
name: string;
|
||||
created: number;
|
||||
}
|
||||
|
||||
interface OnlineWordSets {
|
||||
[set: string]: {
|
||||
[book: string]: {
|
||||
[id:string]:WordSet
|
||||
}
|
||||
},
|
||||
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, name) {
|
||||
this.$router.push({
|
||||
path: "./manage/show",
|
||||
query: { set: this.viewing.set, book: this.viewing.book, id, name }
|
||||
})
|
||||
},
|
||||
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");
|
||||
let class_name = "sidebar-hidden";
|
||||
if(node.classList.contains(class_name)){
|
||||
node.classList.remove(class_name);
|
||||
}
|
||||
else node.classList.add(class_name);
|
||||
return;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let first_set = this.$store.state.wordsets._firstClass;
|
||||
if (first_set) {
|
||||
setTimeout(() => {
|
||||
this.view(first_set);
|
||||
}, 0);
|
||||
}
|
||||
this.$axios.get("wordset/list").then(
|
||||
(res) => {
|
||||
this.online_wordsets = res.data;
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
let node = document.getElementById("wordsets-container")?.style;
|
||||
if (node) {
|
||||
node.animation = "";
|
||||
setTimeout(() => {
|
||||
node.animation = "enter ease-out .6s backwards";
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
const view_online = (set_name: string, class_name: string): void => {
|
||||
mode.value = 1;
|
||||
viewing.set = set_name;
|
||||
viewing.book = class_name;
|
||||
let node = document.getElementById("wordsets-container")?.style;
|
||||
if (node) {
|
||||
node.animation = "";
|
||||
setTimeout(() => {
|
||||
node.animation = "enter ease-out .6s backwards";
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
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?.classList.contains(class_name)) {
|
||||
node.classList.remove(class_name);
|
||||
}
|
||||
else if (node) {
|
||||
node.classList.add(class_name);
|
||||
}
|
||||
};
|
||||
|
||||
// Convert created lifecycle hook to onMounted
|
||||
onMounted(() => {
|
||||
let first_set = store.wordsets._firstClass;
|
||||
if (first_set) {
|
||||
setTimeout(() => {
|
||||
view(first_set);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
axios.get < OnlineWordSets > ("wordset/list").then(
|
||||
(res) => {
|
||||
online_wordsets.value = res.data;
|
||||
}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -231,8 +266,8 @@ export default {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
.sidebar-hidden{
|
||||
transform: translate(-100%,0);
|
||||
.sidebar-hidden {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
|
||||
.wordset {
|
||||
|
|
@ -316,7 +351,7 @@ export default {
|
|||
}
|
||||
|
||||
#aside {
|
||||
width:180px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
|
|
@ -379,7 +414,7 @@ export default {
|
|||
transition: .5s;
|
||||
}
|
||||
|
||||
#sidebar-content{
|
||||
#sidebar-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
|
@ -4,17 +4,8 @@
|
|||
</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';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -4,17 +4,8 @@
|
|||
</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';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -0,0 +1,440 @@
|
|||
<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" 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>
|
||||
<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 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';
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener("keyup", 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>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<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 @back="router.push('/');"
|
||||
style="width: calc(100% - 30px);margin-left: 30px;margin-top: 5px;">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3">开始新背诵</span>
|
||||
</template>
|
||||
|
|
@ -14,9 +15,9 @@
|
|||
<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>
|
||||
<el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id"
|
||||
|
|
@ -30,8 +31,9 @@
|
|||
</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">
|
||||
|
|
@ -71,7 +73,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,107 +85,136 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<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';
|
||||
|
||||
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);
|
||||
this.$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"
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -201,14 +233,15 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
#page{
|
||||
#page {
|
||||
width: 100%;
|
||||
/* margin: 20px; */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top:10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 23px;
|
||||
line-height: 35px;
|
||||
|
|
@ -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,44 @@
|
|||
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'
|
||||
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
build: {
|
||||
outDir: 'page',
|
||||
},
|
||||
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: {
|
||||
'/': {
|
||||
target: 'https://app.cast1e.top/wordin',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
const { defineConfig } = require('@vue/cli-service')
|
||||
const path = require('path');
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
publicPath:"./",
|
||||
outputDir:"page",
|
||||
devServer: {
|
||||
proxy: 'https://app.cast1e.top/wordin'
|
||||
},
|
||||
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