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

change to vite and enabled typescript

master
cast1e 2025-03-06 22:25:09 +08:00
parent 9ad162a5b9
commit aea4b310b7
38 changed files with 11086 additions and 12911 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -21,3 +21,6 @@ pnpm-debug.log*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
auto-imports.d.ts
component.d.ts

36
components.d.ts vendored 100644
View File

@ -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']
}
}

10
public/index.html → index.html
View File

@ -1,13 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="zh-CN">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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> <title>
<%= htmlWebpackPlugin.options.title %> Wordin
</title> </title>
<style> <style>
html, html,
@ -29,10 +28,11 @@
<body> <body>
<noscript> <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> Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>

19
jsconfig.json
View File

@ -1,19 +0,0 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

11637
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

35
package.json
View File

@ -2,31 +2,48 @@
"name": "wordin", "name": "wordin",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"type": "module",
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "dev": "vite",
"build": "vue-cli-service build", "build": "vue-tsc --noEmit && vite build",
"lint": "vue-cli-service lint" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@jamescoyle/vue-icon": "^0.1.2",
"@mdi/font": "^7.4.47",
"axios": "^1.5.1", "axios": "^1.5.1",
"boxicons": "^2.1.4", "boxicons": "^2.1.4",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"marked": "^11.1.1", "marked": "^11.1.1",
"node-uuid": "^1.4.8", "pinia": "^3.0.1",
"vue": "^3.2.13", "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", "vue-router": "^4.2.5",
"vuex": "^4.1.0" "vuetify": "^3.7.15"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.12.16",
"@babel/eslint-parser": "^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-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"element-plus": "^2.3.14", "element-plus": "^2.3.14",
"eslint": "^7.32.0", "eslint": "^9.21.0",
"eslint-plugin-vue": "^8.0.3" "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": { "eslintConfig": {
"root": true, "root": true,

9548
pnpm-lock.yaml 100644
View File

File diff suppressed because it is too large Load Diff

1
result.json
View File

@ -1 +0,0 @@
{"requestId":"8f5a2a3c-2a9e-4929-906d-d1f5195fdef4","errorCode":"202","l":"en2zh-CHS"}

57
src/App.vue
View File

@ -20,60 +20,13 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import _wordsets from './js/wordsets' import { useRouter } from 'vue-router'
import _history from './js/history';
window.htmlClasses = []; const router = useRouter()
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(" ");
}
}
export default { const go = (path: string) => {
name: 'App', router.push(path)
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");
}
});
}
} }
</script> </script>

162
src/components/UI/CDialog.vue
View File

@ -1,96 +1,94 @@
<template> <template>
<div id="mask" v-if="visible"> <div id="mask" v-if="visible_" @click.self="handleClose">
<div ref="bg" id="bg"> <div ref="bg" id="bg">
<div id="content"> <div id="content">
<slot name="content"></slot> <slot name="content"></slot>
</div> </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>
</div> </div>
</template> </template>
<script> <script setup lang="ts">
export default { import { ref, watch, nextTick, onMounted } from 'vue'
name:"CDiaLog", import "@/style/cui.scss"
props:{
"visible":{ const props = defineProps<{
type:Boolean, visible: boolean,
default:false width?: string,
} height?: string
}, }>()
methods:{
handleClose(){ const emit = defineEmits(['update:visible'])
this.$refs.bg.style.animation = "cui-dialog-disappear .3s ease-in";
setTimeout(()=>this.$emit("update:visible",false),300); 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> </script>
<style> <style lang="scss" scoped>
@keyframes cui-dialog-appear { #mask {
0%{ z-index: 500;
opacity: 0%; position: absolute;
transform: translate(-50%,-50%) scale(0.5); top: 0;
} left: 0;
100%{ width: 100%;
opacity: 100%; height: 100%;
transform: translate(-50%,-50%) scale(1); backdrop-filter: blur(10px);
} animation: cui-dialog-blur .6s;
} }
@keyframes cui-dialog-disappear {
0%{
opacity: 100%;
transform: translate(-50%,-50%) scale(1);
}
100%{
opacity: 0%;
transform: translate(-50%,-50%) scale(0.5);
}
}
@keyframes cui-dialog-blur{
0%{
backdrop-filter:blur(0px);
}
100%{
backdrop-filter:blur(10px);
}
}
</style>
<style scoped> #bg {
#mask{ position: absolute;
z-index: 500; width: 500px;
position: absolute; height: 300px;
top:0; max-width: 80%;
left: 0; border: solid var(--bd-color) 1px;
width: 100%; background-color: var(--bg-color-solid);
height: 100%; border-radius: 8px;
backdrop-filter: blur(10px); transform: translate(-50%, -50%);
animation: cui-dialog-blur .5s ; top: 50%;
} left: 50%;
#bg{ animation: cui-dialog-appear .6s cubic-bezier(0, 0.6, 0.2, 1.0);
position: absolute; }
width: 500px;
height: 300px; #content {
max-width: 80%; padding: 20px;
border: solid var(--bd-color) 1px; height: calc(100% - 40px);
background-color: var(--bg-color-solid); overflow: auto;
border-radius: 8px; }
transform: translate(-50%,-50%);
top: 50%; #close {
left: 50%; position: absolute;
animation: cui-dialog-appear .4s cubic-bezier(0, 0, 0.36, 1.29); right: 0;
} top: 0;
#content{ margin: 15px;
padding: 20px; cursor: pointer;
height: 100%; }
}
#close{
position: absolute;
right:0;
top: 0;
margin: 5px;
cursor: pointer;
}
</style> </style>

422
src/components/recite/recite.vue
View File

@ -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>

21
src/composables/useDarkMode.ts 100644
View File

@ -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);
}

21
src/composables/useVuetifyDarkmode.ts 100644
View File

@ -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);
}
);
}

53
src/loader/el-loader.js
View File

@ -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

15
src/loader/md-loader.js
View File

@ -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
View File

@ -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');

32
src/main.ts 100644
View File

@ -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");

20
src/router.js → src/router/index.ts
View File

@ -1,14 +1,14 @@
import {createRouter,createWebHashHistory} from 'vue-router' import {createRouter,createWebHashHistory} from 'vue-router'
const manage = ()=>import('./components/Manage.vue'); const manage = ()=>import('@/views/ManageView.vue');
const editor = ()=>import('./components/manage/Editor.vue'); const editor = ()=>import('@/views/manage/EditorView.vue');
const home = ()=>import("./components/Home.vue"); const home = ()=>import("@/views/HomeView.vue");
const recite = ()=>import('./components/recite/recite.vue'); const recite = ()=>import('@/views/recite/ReciteView.vue');
const setlist = ()=>import('./components/manage/SetList.vue'); const setlist = ()=>import('@/views/manage/SetListView.vue');
const newset = ()=>import('./components/manage/NewSet.vue'); const newset = ()=>import('@/views/manage/NewSetView.vue');
const display = ()=>import('./components/manage/Display.vue'); const display = ()=>import('@/views/manage/DisplayView.vue');
const select = ()=>import('./components/recite/select.vue'); const select = ()=>import('@/views/recite/SelectView.vue');
const manual = ()=>import('./components/post/manual.vue'); const manual = ()=>import('@/views/post/ManualView.vue');
const about = ()=>import('./components/post/about.vue'); const about = ()=>import('@/views/post/AboutView.vue');
const routes = [ const routes = [
{ path: '/', component: home }, { path: '/', component: home },

102
src/js/history.js → src/scripts/history.ts
View File

@ -1,6 +1,11 @@
import axios from './request.js' import { HistoryItem, WordItem } from '@/types';
import axios from './request.ts';
const limit = 10; const limit = 10;
export default class _history {
export default class IHistory {
private histories: HistoryItem[];
constructor() { constructor() {
this.histories = []; this.histories = [];
let histories = localStorage.getItem("histories"); let histories = localStorage.getItem("histories");
@ -8,113 +13,136 @@ export default class _history {
this.histories = JSON.parse(histories); this.histories = JSON.parse(histories);
} }
} }
save() {
save(): void {
localStorage.setItem('histories', JSON.stringify(this.histories)); localStorage.setItem('histories', JSON.stringify(this.histories));
} }
get length() {
get length(): number {
return this.histories.length; return this.histories.length;
} }
get top() {
get top(): HistoryItem | undefined {
return this.histories[0]; return this.histories[0];
} }
get _content(){
get _content(): HistoryItem[] {
return this.histories; return this.histories;
} }
use(index) {
use(index: number): boolean {
if (this.histories.length > index) { if (this.histories.length > index) {
console.log(this.histories); console.log(this.histories);
let history = this.histories.splice(index, 1); let history = this.histories.splice(index, 1)[0];
history.modified = (new Date()).getTime(); history.modified = (new Date()).getTime();
this.histories = history.concat(this.histories); this.histories = [history].concat(this.histories);
console.log(this.histories); console.log(this.histories);
this.save(); this.save();
return true; return true;
} }
else return false; else return false;
} }
del(index) {
del(index: number): void {
this.histories.splice(index, 1); this.histories.splice(index, 1);
this.save(); this.save();
} }
add(localsets, onlinesets, settings, callback) {
add(localsets: string[], onlinesets: any[], settings: any, callback?: () => void): void {
let time = (new Date()).getTime(); let time = (new Date()).getTime();
let data = { let data: HistoryItem = {
localsets, onlinesets, settings, localsets,
onlinesets,
settings,
current: 0, current: 0,
modified: time modified: time
}; };
if (settings.shuffle) { if (settings.shuffle) {
data.settings.seed = time; data.settings.seed = time;
} }
this.histories = [data].concat(this.histories); this.histories = [data].concat(this.histories);
if(this.histories.length > limit){ if (this.histories.length > limit) {
this.histories = this.histories.slice(0,limit); this.histories = this.histories.slice(0, limit);
} }
this.save(); this.save();
if (typeof callback === 'function') { if (typeof callback === 'function') {
callback(); callback();
} }
} }
count(cnt) {
count(cnt: number): void {
if (this.histories.length > 0) { if (this.histories.length > 0) {
this.histories[0].current = cnt; this.histories[0].current = cnt;
this.save(); 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 history = this.histories[0];
let words = []; let words: WordItem[] = [];
for (let i of history.localsets) { for (let i of history.localsets) {
let content = localStorage.getItem(i); let content = localStorage.getItem(i);
if (content){ if (content) {
let temp = JSON.parse(content); let temp = JSON.parse(content);
if(history.settings.ignore_phrases){ if (history.settings.ignore_phrases) {
for(let j of temp){ for (let j of temp) {
console.log(j); console.log(j);
if(j.type != 'phr.'){ if (j.type != 'phr.') {
words.push(j); 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) { for (let i of history.onlinesets) {
let res = await axios.get("wordset/detail", { let res = await axios.get("wordset/detail", {
params: i params: i
}) });
if (res.status != 200) { if (res.status != 200) {
return this.handle_err("获取单词本时出现错误",err); return this.handle_err("获取单词本时出现错误", err);
} }
let temp = res.data; let temp = res.data;
if(history.settings.ignore_phrases){ if (history.settings.ignore_phrases) {
for(let j of temp){ for (let j of temp) {
if(j.type != 'phr.'){ if (j.type != 'phr.') {
words.push(j); words.push(j);
} }
} }
} }
else words = words.concat(...temp); else words = words.concat(temp);
} }
history.total = words.length; history.total = words.length;
if(words.length <= 0){ if (words.length <= 0) {
return this.handle_err("单词本为空",err); return this.handle_err("单词本为空", err);
} }
let arr = Array.from(new Array(words.length).keys()); let arr = Array.from(new Array(words.length).keys());
if(history.settings.shuffle){ if (history.settings.shuffle) {
let seed = history.settings.seed; let seed = history.settings.seed as number;
for (let i = words.length - 1; i > 0; i--) { for (let i = words.length - 1; i > 0; i--) {
[arr[i], arr[seed % i]] = [arr[seed % i], arr[i]]; [arr[i], arr[seed % i]] = [arr[seed % i], arr[i]];
} }
} }
this.save(); this.save();
if (typeof callback === 'function') { if (typeof callback === 'function') {
callback(words,history.current,arr,history.settings); callback(words, history.current, arr, history.settings);
} }
} }
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(); this.save();
if (typeof err === 'function') { if (typeof err === 'function') {
err(msg); err(msg);

0
src/js/request.js → src/scripts/request.ts
View File

142
src/js/wordsets.js → src/scripts/wordsets.ts
View File

@ -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() { constructor() {
this.sets = {}; this.sets = {};
let wordsets = localStorage.getItem("wordsets"); let wordsets = localStorage.getItem("wordsets");
@ -9,54 +43,65 @@ export default class _wordset {
this.sets = JSON.parse(wordsets); this.sets = JSON.parse(wordsets);
} }
} }
save() {
save(): void {
localStorage.setItem("wordsets", JSON.stringify(this.sets)); localStorage.setItem("wordsets", JSON.stringify(this.sets));
} }
get _inner() {
get _inner(): {[className: string]: WordSetInfo[]} {
return this.sets; return this.sets;
} }
get _firstClass(){
get _firstClass(): string | null {
return Object.keys(this.sets)[0] || null; return Object.keys(this.sets)[0] || null;
} }
get _allclass(){
get _allclass(): string[] {
return Object.keys(this.sets); return Object.keys(this.sets);
} }
get _allsets(){
get _allsets(): WordSetInfo[][] {
return Object.values(this.sets); return Object.values(this.sets);
} }
getClass(class_name) {
getClass(class_name: string): WordSetInfo[] | null {
if (this.sets[class_name]) { if (this.sets[class_name]) {
return this.sets[class_name]; return this.sets[class_name];
} }
else return null; else return null;
} }
getSetStatus(class_name,id){
getSetStatus(class_name: string, id: string): WordSetInfo | null {
let set_class = this.getClass(class_name); let set_class = this.getClass(class_name);
if(set_class){ if(set_class) {
for(let i of set_class){ for(let i of set_class) {
if(i.id === id){ if(i.id === id) {
return i; return i;
} }
} }
} }
return null; return null;
} }
getId(class_name,id){
getId(class_name: string, id: string): number | undefined {
let set_class = this.sets[class_name]; let set_class = this.sets[class_name];
for(let index in set_class){ for(let index in set_class) {
if(set_class[index].id === id){ if(set_class[index].id === id) {
return index; 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) { if (sets) {
return sets; return JSON.parse(sets);
} }
else return []; else return [];
} }
delSet(class_name, index) {
delSet(class_name: string, index: number): boolean {
let set_class = this.sets[class_name]; let set_class = this.sets[class_name];
if (set_class) { if (set_class) {
if (set_class[index]) { if (set_class[index]) {
@ -71,11 +116,12 @@ export default class _wordset {
} }
return false; return false;
} }
addSet(class_name,name) {
addSet(class_name: string, name: string): string {
if (!this.sets[class_name]) { if (!this.sets[class_name]) {
this.sets[class_name] = []; this.sets[class_name] = [];
} }
let id = uuid.v1(); let id = uuidv1();
let time = (new Date()).getTime() let time = (new Date()).getTime()
this.sets[class_name].push({ this.sets[class_name].push({
name: name, name: name,
@ -86,14 +132,16 @@ export default class _wordset {
this.save(); this.save();
return id; return id;
} }
saveSet(id,data){
saveSet(id: string, data: WordItem[]): void {
localStorage.setItem(id, JSON.stringify(data)); 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); let set_class = this.getClass(class_name);
if(set_class){ if(set_class) {
for(let i of set_class){ for(let i of set_class) {
if(i.id === id){ if(i.id === id) {
i.name = new_name; i.name = new_name;
this.save(); this.save();
return; 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 origin_set = this.getSet(origin_id);
let dest_set = this.getSet(dest_id); let dest_set = this.getSet(dest_id);
let set={}; let set: {[word: string]: WordItem} = {};
origin_set.forEach(element => { origin_set.forEach(element => {
set[element.word] = element; set[element.word] = element;
}); });
dest_set.forEach(element => { dest_set.forEach(element => {
set[element.word] = element; set[element.word] = element;
}); });
set = Object.values(set); let mergedSet = Object.values(set);
this.saveSet(dest_id,set); this.saveSet(dest_id, mergedSet);
return origin_set.length + dest_set.length - set.length; return origin_set.length + dest_set.length - mergedSet.length;
} }
fromArray(arr,class_name,name){
let id = this.addSet(class_name,name); fromArray(arr: WordItem[], class_name: string, name: string): void {
this.saveSet(id,arr); 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({ let [fileHandle] = await window.showOpenFilePicker({
types: [ types: [
{ {
@ -144,11 +195,12 @@ export default class _wordset {
} }
} }
this.save(); this.save();
if(typeof callback === "function"){ if(typeof callback === "function") {
callback(cnt); callback(cnt);
} }
} }
async export_set(callback) {
async export_set(callback?: (count: number) => void): Promise<void> {
let fileHandle = await window.showSaveFilePicker({ let fileHandle = await window.showSaveFilePicker({
types: [ types: [
{ {
@ -162,19 +214,21 @@ export default class _wordset {
let writestream = await fileHandle.createWritable(); let writestream = await fileHandle.createWritable();
let data = { let data = {
wordsets: this.sets, wordsets: this.sets,
words: {} words: {} as {[id: string]: string}
}; };
let cnt = 0; let cnt = 0;
for (let i of Object.values(this.sets)) { for (let i of Object.values(this.sets)) {
for (let j of i) { for (let j of i) {
let temp = localStorage.getItem(j.id); let temp = localStorage.getItem(j.id);
data.words[j.id] = temp; if (temp) {
cnt++; data.words[j.id] = temp;
cnt++;
}
} }
} }
writestream.write(JSON.stringify(data)); await writestream.write(JSON.stringify(data));
writestream.close(); await writestream.close();
if(typeof callback === "function"){ if(typeof callback === "function") {
callback(cnt); callback(cnt);
} }
} }

17
src/store/index.ts 100644
View File

@ -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
}
})

25
src/types/index.d.ts vendored 100644
View File

@ -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;
}

66
src/components/Home.vue → src/views/HomeView.vue
View File

@ -17,7 +17,7 @@
</div> </div>
<div id="history" class="wrapper"> <div id="history" class="wrapper">
<div class="title" style="margin-left: 20px;margin-top: 10px;width: 95%;">历史记录</div> <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: 25px;">{{ index + 1 }}</div>
<div style="width: 200px;">背诵进度: {{ history.current }}/{{ history.total || "Unknown" }}</div> <div style="width: 200px;">背诵进度: {{ history.current }}/{{ history.total || "Unknown" }}</div>
<div style="flex-grow: 1;"> {{ (new Date(history.modified)) }}</div> <div style="flex-grow: 1;"> {{ (new Date(history.modified)) }}</div>
@ -34,50 +34,34 @@
<el-input v-model="img_url"></el-input> <el-input v-model="img_url"></el-input>
<el-button type="primary" style="margin-left: 10px;" @click="set_bg">确定</el-button> <el-button type="primary" style="margin-left: 10px;" @click="set_bg">确定</el-button>
</div> </div>
<div class="title">黑暗模式</div>
<el-switch @change="toggleDark" v-model="isdark" size="large" active-text="Dark" inactive-text="Light" />
</el-dialog> </el-dialog>
</template> </template>
<script> <script setup lang="ts">
import { useMainStore } from '@/store';
import { ref} from 'vue';
import { useRouter } from 'vue-router';
export default { const store = useMainStore();
name: "HomePage", const router = useRouter();
data() { const img_url = ref("");
return { const settingVisible = ref(false);
img_url: "",
settingVisible: false, const set_bg = (): void => {
isdark: false, localStorage.setItem("bgimg", img_url.value);
} window.location.reload();
}, };
methods: {
set_bg() { const open_setting_dialog = (): void => {
localStorage.setItem("bgimg", this.img_url); settingVisible.value = true;
window.location.reload(); };
},
open_setting_dialog() { const restart = (index: number): void => {
this.settingVisible = true; router.push({
}, path: "./recite",
toggleDark() { query: { index }
if (this.isdark) { });
window.addHtmlclasses("dark"); };
} else {
window.delHtmlclasses("dark");
}
},
restart(index){
this.$router.push({
path: "./recite",
query: { index}
})
}
},
created() {
if (document.getElementsByTagName("html")[0].className.indexOf("dark") != -1) {
this.isdark = true;
}
}
}
</script> </script>
<style scoped> <style scoped>

7
src/components/Manage.vue → src/views/ManageView.vue
View File

@ -6,12 +6,7 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
export default {
name: "SetManage",
}
</script> </script>
<style scoped> <style scoped>

80
src/components/manage/Display.vue → src/views/manage/DisplayView.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container" style="overflow: auto;"> <div class="container" style="overflow: auto;">
<el-page-header style="margin: 10px;" @back="this.$router.push('/manage');"> <el-page-header style="margin: 10px;" @back="router.push('/manage');">
<template #content> <template #content>
<span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span> <span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
</template> </template>
@ -31,40 +31,56 @@
</div> </div>
</template> </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 { ElMessage } from 'element-plus';
import axios from 'axios';
export default { interface WordEntry {
name: "NoteEditor", word: string;
data() { type: string;
return { trans: string;
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;
}
);
}
},
} }
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> </script>
<style scoped> <style scoped>

320
src/components/manage/Editor.vue → src/views/manage/EditorView.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container" style="overflow: auto;"> <div class="container" style="overflow: auto;">
<el-page-header style="margin: 10px;" @back="this.$router.push('/manage');"> <el-page-header style="margin: 10px;" @back="router.push('/manage');">
<template #content> <template #content>
<span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span> <span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
</template> </template>
@ -91,15 +91,14 @@
<div class="colbox para"> <div class="colbox para">
<div class="mid-text">分组:</div> <div class="mid-text">分组:</div>
<el-select v-model="select.set_class" class="m-2" placeholder="Select"> <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" <el-option v-for="item in wordsets._allclass" :key="item" :label="item" :value="item" />
:value="item" />
</el-select> </el-select>
</div> </div>
<div class="colbox para"> <div class="colbox para">
<div class="mid-text">单词本:</div> <div class="mid-text">单词本:</div>
<el-select v-model="select.id" class="m-2" placeholder="Select"> <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" <el-option v-for="item in wordsets.getClass(select.set_class)" :key="item.id" :label="item.name"
:label="item.name" :value="item.id" /> :value="item.id" />
</el-select> </el-select>
</div> </div>
<el-button @click="select.confirm(select.id)" type="primary">确认</el-button> <el-button @click="select.confirm(select.id)" type="primary">确认</el-button>
@ -107,152 +106,177 @@
</CDialog> </CDialog>
</template> </template>
<script> <script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'; import { ref, reactive, onMounted } from 'vue'
import CDialog from '../UI/CDialog.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 { const router = useRouter()
name: "NoteEditor", const route = useRoute()
components: { const store = useMainStore()
CDialog const wordsets = ref(store.wordsets);
},
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 new_word = reactive({
this.select.visible = false; word: "",
} trans: "",
}, type: "adj.",
}, })
created() {
this.class_name = this.$route.query.classname; const editing_word = reactive({
this.id = this.$route.query.id; word: "",
if (this.id) { trans: "",
let status = this.$store.state.wordsets.getSetStatus(this.class_name, this.id); type: "adj.",
if (status) { index: 0,
this.name = status.name; })
}
this.table = this.$store.state.wordsets.getSet(this.id); 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> </script>
<style scoped> <style scoped>

45
src/components/manage/NewSet.vue → src/views/manage/NewSetView.vue
View File

@ -11,7 +11,7 @@
<el-input v-model="set_name"></el-input> <el-input v-model="set_name"></el-input>
<div class="mid-text">分组:</div> <div class="mid-text">分组:</div>
<el-select allow-create filterable default-first-option v-model="new_set_class" class="m-2" placeholder="输入新单词本类后后请按回车"> <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> </el-select>
</div> </div>
<el-button style="width: 50%;margin-top: 20px;" type="primary" @click="new_wordset()">创建</el-button> <el-button style="width: 50%;margin-top: 20px;" type="primary" @click="new_wordset()">创建</el-button>
@ -19,31 +19,28 @@
</el-container> </el-container>
</template> </template>
<script> <script lang="ts" setup>
import { ElMessage } from 'element-plus'; import { ref } from 'vue'
import { useMainStore } from '@/store'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
export default { const store = useMainStore()
name: "NewSet", const router = useRouter()
data() {
return { const set_name = ref("")
set_name: "", const new_set_class = ref("")
new_set_class: "",
} const new_wordset = () => {
}, if (!new_set_class.value) {
methods: { ElMessage({
new_wordset() { message: "集合不能为空",
if (!this.new_set_class) { type: "error"
ElMessage({ })
message: "集合不能为空", return
type: "error"
})
return;
}
this.$store.state.wordsets.addSet(this.new_set_class,this.set_name);
this.$router.push('/manage');
return;
},
} }
store.wordsets.addSet(new_set_class.value, set_name.value)
router.push('/manage')
} }
</script> </script>

243
src/components/manage/SetList.vue → src/views/manage/SetListView.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-container id="main-container"> <el-container id="main-container">
<el-header id="header" style=""> <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> <template #content>
<span class="text-large font-600 mr-3"> 编辑单词本 </span> <span class="text-large font-600 mr-3"> 编辑单词本 </span>
</template> </template>
@ -37,7 +37,7 @@
<div class="sidebar-title"> <div class="sidebar-title">
|本地 |本地
</div> </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"> @click="view(class_name)" class="sidebar-item">
{{ class_name }} {{ class_name }}
</div> </div>
@ -45,8 +45,8 @@
|在线 |在线
</div> </div>
<div v-for="set in Object.keys(online_wordsets)" :key="set"> <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" <div v-for="(set_class, class_name) in online_wordsets[set]" :title="String(class_name)"
:key="class_name" @click="view_online(set, class_name)" class="sidebar-item"> :key="class_name" @click="view_online(set, String(class_name))" class="sidebar-item">
{{ class_name }} {{ class_name }}
</div> </div>
</div> </div>
@ -59,7 +59,7 @@
<el-main id="wordsets-container"> <el-main id="wordsets-container">
<div id="sets-container"> <div id="sets-container">
<div v-if="mode === 0" class="colbox wordclass"> <div v-if="mode === 0" class="colbox wordclass">
<div v-for="(wordset, index) in $store.state.wordsets.getClass(view_wordsets)" :key="index" <div v-for="(wordset, index) in store.wordsets.getClass(view_wordsets)" :key="index"
class="wordset rowbox"> class="wordset rowbox">
<div class="no"> <div class="no">
{{ index + 1 }} {{ index + 1 }}
@ -89,7 +89,7 @@
</div> </div>
<div class="option"> <div class="option">
<box-icon class="btn" name='show' color="var(--text-color)" <box-icon class="btn" name='show' color="var(--text-color)"
@click="show(index, wordset.name)"></box-icon> @click="show(String(index), wordset.name)"></box-icon>
</div> </div>
</div> </div>
</div> </div>
@ -99,105 +99,140 @@
</el-container> </el-container>
</template> </template>
<script> <script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'; import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store';
import axios from 'axios';
export default { interface WordSet {
name: "SetList", id: string;
data() { name: string;
return { created: number;
view_wordsets: "", }
viewing: {
set: "", interface OnlineWordSets {
book: "", [set: string]: {
}, [book: string]: {
online_wordsets: [], [id:string]:WordSet
mode: 0,
} }
},
methods: {
view(classname) {
this.mode = 0;
this.view_wordsets = classname;
let node = document.getElementById("wordsets-container").style;
node.animation = "";
setTimeout(() => {
node.animation = "enter ease-out .6s backwards";
}, 0);
},
view_online(set_name, class_name) {
this.mode = 1;
this.viewing = { set: set_name, book: class_name };
let node = document.getElementById("wordsets-container").style;
node.animation = "";
setTimeout(() => {
node.animation = "enter ease-out .6s backwards";
}, 0);
},
manage_online_wordsets() {
window.location.href = '/dashboard';
},
del(class_name, id, index) {
ElMessageBox.confirm("确定要删除吗？")
.then(() => {
this.$store.state.wordsets.delSet(class_name, index);
ElMessage(`已经删除 ${class_name} ${id}`);
});
},
edit(id) {
this.$router.push({
path: "./manage/edit",
query: { id, classname: this.view_wordsets }
})
},
show(id, 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> </script>
<style scoped> <style scoped>
@ -231,8 +266,8 @@ export default {
z-index: 100; z-index: 100;
} }
.sidebar-hidden{ .sidebar-hidden {
transform: translate(-100%,0); transform: translate(-100%, 0);
} }
.wordset { .wordset {
@ -316,7 +351,7 @@ export default {
} }
#aside { #aside {
width:180px; width: 180px;
} }
#sidebar { #sidebar {
@ -379,7 +414,7 @@ export default {
transition: .5s; transition: .5s;
} }
#sidebar-content{ #sidebar-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;

13
src/components/post/about.vue → src/views/post/AboutView.vue
View File

@ -4,17 +4,8 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import Post from '@/md/about.md' import Post from '@/md/about.md';
export default {
name: "ManualPage",
components:{
Post
},
created() {
}
}
</script> </script>
<style scoped> <style scoped>

13
src/components/post/manual.vue → src/views/post/ManualView.vue
View File

@ -4,17 +4,8 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import Post from '@/md/manual.md' import Post from '@/md/manual.md';
export default {
name: "ManualPage",
components:{
Post
},
created() {
}
}
</script> </script>
<style scoped> <style scoped>

440
src/views/recite/ReciteView.vue 100644
View File

@ -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>

243
src/components/recite/select.vue → src/views/recite/SelectView.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="container" id="page"> <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> <template #content>
<span class="text-large font-600 mr-3">开始新背诵</span> <span class="text-large font-600 mr-3">开始新背诵</span>
</template> </template>
@ -14,9 +15,9 @@
<el-tabs style="height: calc(100% - 40px);position: relative;overflow: hidden;"> <el-tabs style="height: calc(100% - 40px);position: relative;overflow: hidden;">
<el-tab-pane label="本地"> <el-tab-pane label="本地">
<el-checkbox v-model="local.checkAll" :indeterminate="local.isIndeterminate" <el-checkbox v-model="local.checkAll" :indeterminate="local.isIndeterminate"
@change="(res) => { handleCheckAllChange(local, res) }" size="large">全选</el-checkbox> @change="(res: boolean) => { handleCheckAllChange(local, res) }" size="large">全选</el-checkbox>
<el-checkbox-group v-model="local.checkedSets" @change="(res) => { handleChange(local, res) }"> <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.state.wordsets._inner" <div class="set_radios" v-for="(set_class, set_class_name) in store.wordsets._inner"
:key="set_class_name"> :key="set_class_name">
<p>{{ set_class_name }}</p> <p>{{ set_class_name }}</p>
<el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id" <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>
<el-tab-pane label="在线"> <el-tab-pane label="在线">
<el-checkbox v-model="online.checkAll" :indeterminate="online.isIndeterminate" <el-checkbox v-model="online.checkAll" :indeterminate="online.isIndeterminate"
@change="(res) => { handleCheckAllChange(online, res) }" size="large">全选</el-checkbox> @change="(res: boolean) => { handleCheckAllChange(online, res) }" size="large">全选</el-checkbox>
<el-checkbox-group v-model="online.checkedSets" @change="(res) => { handleChange(online, res) }"> <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="set_radios" v-for="(set, set_name) in online_sets" :key="set_name">
<div class="subtitle">{{ set_name }}</div> <div class="subtitle">{{ set_name }}</div>
<div v-for="(book, book_name) in set" :key="book_name"> <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: 20px;">忽略词组</div>
<div style="font-size: 14px;">开启后不背诵词组</div> <div style="font-size: 14px;">开启后不背诵词组</div>
</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> </div>
<el-button style="position: absolute;left: 30px;bottom: 30px;" @click="backSelect">上一步</el-button> <el-button style="position: absolute;left: 30px;bottom: 30px;" @click="backSelect">上一步</el-button>
<el-button style="position: absolute;right: 30px;bottom: 30px;" type="primary" <el-button style="position: absolute;right: 30px;bottom: 30px;" type="primary"
@ -82,107 +85,136 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store';
import axios from '@/scripts/request';
export default { const router = useRouter();
name: "SelectPage", const store = useMainStore();
data() {
return { interface WordSetState {
step: 1, allsets: string[];
local: { checkedSets: string[];
allsets: [], isIndeterminate: boolean;
checkedSets: [], checkAll: boolean;
isIndeterminate: false, }
checkAll: false,
}, interface ReciteSettings {
online: { shuffle: boolean;
allsets: [], direct_answer: boolean;
checkedSets: [], ignore_phrases: boolean;
isIndeterminate: false, }
checkAll: false,
}, interface OnlineIdInfo {
online_sets: {}, set: string;
online_ids: {}, book: string;
settings: { }
shuffle: true,
direct_answer: false, const step = ref(1);
ignore_phrases: true, 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: { axios.get("wordset/list").then((res: any) => {
handleCheckAllChange(range, val) { online_sets.value = res.data;
range.checkedSets = val ? range.allsets : []; for (let i in online_sets.value) {
range.isIndeterminate = false; for (let j in online_sets.value[i]) {
}, for (let k in online_sets.value[i][j]) {
handleChange(range, value) { online.allsets.push(k);
range.checkAll = value.length === range.allsets.length; online_ids.value[k] = {
range.isIndeterminate = value.length > 0 && value.length < range.allsets.length; set: i,
}, book: j
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
}
}
} }
} }
}) }
} }).catch(()=> {
} ElMessage({
message: "在线词库加载失败",
type: "error"
});
});
});
</script> </script>
<style scoped> <style scoped>
@ -201,14 +233,15 @@ export default {
} }
} }
#page{ #page {
width: 100%; width: 100%;
/* margin: 20px; */ /* margin: 20px; */
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top:10px; margin-top: 10px;
} }
.subtitle { .subtitle {
font-size: 23px; font-size: 23px;
line-height: 35px; line-height: 35px;

20
tsconfig.app.json 100644
View File

@ -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"]
}

31
tsconfig.json 100644
View File

@ -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" }]
}

10
tsconfig.node.json 100644
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

44
vite.config.ts 100644
View File

@ -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,
},
},
},
});

21
vue.config.js
View File

@ -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()
}
})