fix mobile display issue

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 /test
+page/
 
 # local env files
 .env.local
@@ -21,3 +22,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+auto-imports.d.ts
+components.d.ts

babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
-  ]
+  ],
+  plugins: ["@babel/plugin-transform-private-methods"]
 }

index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="favicon.ico">
+  <title>
+    Wordin
+  </title>
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/misans@4.0.0/lib/Normal/MiSans-Medium.min.css" media="print" onload="this.media='all'" crossorigin="anonymous">
+</head>
+<body>
+  <noscript>
+    <strong>We're sorry but doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

jsconfig.json

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

package.json

@@ -2,29 +2,49 @@
   "name": "wordin",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "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": {
+    "@jamescoyle/vue-icon": "^0.1.2",
+    "@mdi/font": "^7.4.47",
+    "@types/animejs": "^3.1.13",
+    "animejs": "^3.2.2",
     "axios": "^1.5.1",
-    "boxicons": "^2.1.4",
     "core-js": "^3.8.3",
     "crypto-js": "^4.1.1",
-    "node-uuid": "^1.4.8",
+    "marked": "^11.1.1",
-    "vue": "^3.2.13",
+    "pinia": "^3.0.1",
-    "vue-router": "^4.2.5"
+    "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",
+    "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": "^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": {
     "root": true,

public/index.html

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title>
-    <%= htmlWebpackPlugin.options.title %>
-  </title>
-  <style>
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-      height: 100%;
-      width: 100%;
-      overflow: hidden;
-    }
-
-    #app {
-      height: 100%;
-      width: 100%;
-      overflow: hidden;
-    }
-  </style>
-</head>
-
-<body>
-  <noscript>
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
-        Please enable it to continue.</strong>
-  </noscript>
-  <div id="app"></div>
-  <!-- built files will be auto injected -->
-</body>
-
-</html>

result.json

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

src/App.vue

@@ -1,142 +1,101 @@
 <template>
+  <div class="pconly main-navibar">
+    <div class="main-navibar">
+      <div class="navi-item"><el-link @click="go('/')" id="logo">wordIn</el-link></div>
+      <div class="navi-item"><el-link @click="go('/select')" class="link">背诵</el-link></div>
+      <div class="navi-item"><el-link @click="go('/manage')" class="link">编辑单词本</el-link></div>
+      <div class="navi-item"><el-link @click="go('/manual')" class="link">使用说明</el-link></div>
+      <div class="navi-item"><el-link @click="go('/about')" class="link">关于</el-link></div>
+    </div>
+  </div>
+  <div class="main-app-view">
     <router-view></router-view>
+  </div>
+  <div class="mbonly">
+    <div class="main-navibar">
+      <div class="navi-item"><v-icon @click="$router.push('/')">mdi-home</v-icon> <div>主页</div></div>
+      <div class="navi-item"><v-icon @click="$router.push('/select')">mdi-book</v-icon> <div>背诵</div></div>
+      <div class="navi-item"><v-icon  @click="$router.push('/manage')">mdi-folder</v-icon><div>浏览</div></div>
+      <div class="navi-item"><v-icon @click="$router.push('/manual')">mdi-file</v-icon><div>说明</div></div>
+      <div class="navi-item"><v-icon @click="$router.push('/about')">mdi-information</v-icon><div>关于</div></div>
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
 
-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;
-    }
-  },
-  created() {
-    let wordsets = localStorage.getItem("wordsets");
-    if (wordsets) {
-      window.wordsets = JSON.parse(wordsets);
-    } else window.wordsets = {};
-    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>
 
-<style>
+<style scoped>
-
+@media screen and (max-width: 500px) {
-html {
+  .main-navibar {
-  --bg-color: #ffffffae;
+    height: 60px;
-  --text-color: #464646;
+    border-top: solid 1px var(--bd-color);
-}
-
-html.dark {
-  --bg-color: #2a2a2aae;
-  --text-color: #c0c0c0;
-}
-
-@keyframes enter {
-  0% {
-    translate: 100px 0;
-    opacity: 0;
-    filter: blur(20px);
-  }
-
-  100% {
-    translate: 0 0;
-    opacity: 1;
-    filter: blur(0px);
-  }
-}
-
-.container {
-  height: calc(100%-20px);
-  width: calc(100%-20px);
-  padding: 20px;
-  animation: enter ease-out .6s backwards;
-}
-
-.colbox {
     display: flex;
     flex-direction: row;
-}
+    justify-content: space-around;
+    background-color: var(--navi-bg-color);
+    backdrop-filter: blur(10px);
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
 
-.rowbox {
+  .navi-item {
+    height: 100%;
+    font-size: 11px;
     display: flex;
     flex-direction: column;
-}
+    align-items: center;
-
+    justify-content: center;
-.card {
+    justify-content: baseline;
-  border-radius: 8px;
-  box-shadow: var(--el-box-shadow);
-  padding: 20px;
-  margin: 10px;
     color: var(--text-color);
+  }
 }
 
-html.bgimged .card{
+@media screen and (min-width: 500px) {
-  background-color: var(--bg-color);
+  .main-navibar {
-  backdrop-filter: blur(15px);
+    height: 60px;
-}
+    border-bottom: solid 1px var(--bd-color);
+    display: flex;
+    flex-direction: row;
+    background-color: var(--navi-bg-color);
+    backdrop-filter: blur(10px);
+  }
 
-
+  .navi-item {
-.wordset {
+    height: 100%;
-  border-radius: 13px;
+    font-size: 22px;
-  padding: 20px;
+    display: flex;
-  height: 220px;
+    justify-content: baseline;
-  width: 170px;
+    margin-left: 20px;
-  box-shadow: var(--el-box-shadow);
-  margin: 20px;
-  background-color: var(--bg-color);
     color: var(--text-color);
+  }
 }
 
-.btn {
+#logo {
-  cursor: pointer;
+  font-size: 28px;
+  margin-right: 20px;
+  height: 100%;
 }
 
-.mid-text {
+.link {
-  width: 65px;
+  font-size: 18px;
-  transform: translate(0, 6px);
-  color: var(--text-color);
-  margin-right: 5px;
-  margin-left: 5px;
 }
+</style>
 
-.para {
+<style>
-  margin: 15px;
+.main-app-view{
+  height: calc(100% - 60px);
+  width: 100%;
+}
+.main-navibar{
+  background-color: var(--bg-color-solid);
 }
 </style>

src/components/DynamicBackground.vue

@@ -0,0 +1,132 @@
+<style scoped>
+html:not(.dark) .dynamic-bg-container {
+    background: linear-gradient(135deg,
+            #ffe8f3,
+            #d9f3ff);
+}
+
+html:not(.dark) .dynamic-bg-wrapper::before,
+html:not(.dark) .dynamic-bg-wrapper::after {
+    background: conic-gradient(from 0deg,
+            #ff9aa2,
+            /* Soft pink */
+            #ffb7b2,
+            /* Light peach */
+            #ffdac1,
+            /* Pastel yellow */
+            #e2f0cb,
+            /* Mint green */
+            #a2e4ff,
+            /* Baby blue */
+            #c9afff,
+            /* Lavender */
+            #ffb7b2,
+            #ff9aa2);
+
+}
+
+html.dark .dynamic-bg-container {
+    background: linear-gradient(135deg,
+            #331a26,
+            #1a2a33);
+}
+
+html.dark .dynamic-bg-wrapper::before,
+html.dark .dynamic-bg-wrapper::after {
+    background: conic-gradient(from 0deg,
+            #662a30,
+            #663a36,
+            #664a40,
+            #3a4a33,
+            #2a4a66,
+            #3a2a66,
+            #663a36,
+            #662a30);
+    opacity: 0.6;
+}
+
+.dynamic-bg-container {
+    margin: 0;
+    padding: 0;
+    height:max-content;
+    width: 100%;
+    /* Soft pastel gradient background */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.dynamic-bg-wrapper {
+    position: absolute;
+    width: 100%;
+    /* Fill the entire screen */
+    height: 100%;
+    overflow: hidden;
+    background: radial-gradient(circle,
+            rgba(255, 255, 255, 0.2),
+            rgba(0, 0, 0, 0.1));
+}
+
+.dynamic-bg-wrapper::before,
+.dynamic-bg-wrapper::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200%;
+    height: 200%;
+    transform: translate(-50%, -50%);
+    animation: rotate 8s linear infinite;
+    filter: blur(50px);
+    /* Create a soft glowing effect */
+    opacity: 0.8;
+    z-index: 9;
+}
+
+/* Secondary rotating layer for depth */
+.dynamic-bg-wrapper::after {
+    width: 180%;
+    height: 180%;
+    animation: rotate-reverse 10s linear infinite;
+    opacity: 0.6;
+}
+
+/* Rotating animations */
+@keyframes rotate {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes rotate-reverse {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(-360deg);
+    }
+}
+
+.dynamic-bg-content {
+    width: 100%;
+    height: max-content;
+    margin-bottom: 10px;
+    z-index: 10;
+}
+</style>
+
+<template>
+    <div class="dynamic-bg-container">
+        <div class="dynamic-bg-wrapper"></div>
+        <div class="dynamic-bg-content">
+            <slot name="content"></slot>
+        </div>
+    </div>
+</template>

src/components/Home.vue

@@ -1,140 +0,0 @@
-<template>
-    <div id="ball"></div>
-    <div class="container">
-        <div id="main">
-            <div id="title">WordIn</div>
-            <div class="colbox">
-                <router-link to="/recite" class="button">
-                    背诵
-                </router-link>
-                <router-link to="/manage" class="button">
-                    编辑单词本
-                </router-link>
-            </div>
-        </div>
-    </div>
-    <div id="setting">
-        <box-icon class="btn" color="var(--text-color)" name='cog' @click="open_setting_dialog"></box-icon>
-    </div>
-    <el-dialog v-model="settingVisible" title="设置">
-        <div class="title">更换自定义背景</div>
-        <div class="colbox" style="margin: 10px;">
-            <el-input v-model="img_url"></el-input>
-            <el-button type="primary" style="margin-left: 10px;" @click="set_bg">确定</el-button>
-        </div>
-        <div class="title">黑暗模式</div>
-        <el-switch @change="toggleDark" v-model="isdark" size="large" active-text="Dark" inactive-text="Light" />
-    </el-dialog>
-</template>
-
-<script>
-
-export default {
-    name: "HomePage",
-    data() {
-        return {
-            img_url: "",
-            settingVisible: false,
-            isdark: false,
-        }
-    },
-    methods: {
-        set_bg() {
-            localStorage.setItem("bgimg", this.img_url);
-            window.location.reload();
-        },
-        open_setting_dialog() {
-            this.settingVisible = true;
-        },
-        toggleDark() {
-            if (this.isdark) {
-                window.addHtmlclasses("dark");
-            } else {
-                window.delHtmlclasses("dark");
-            }
-        }
-    },
-    created() {
-        if (document.getElementsByTagName("html")[0].className.indexOf("dark")!=-1) {
-            this.isdark = true;
-        }
-    }
-}
-</script>
-
-<style scoped>
-.title {
-    font-weight: 800;
-    color: var(--text-color);
-    font-size: 35px;
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-#setting {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    margin: 20px;
-}
-
-#title {
-    font-size: 180px;
-    color: var(--text-color);
-    text-shadow:  #00000057 5px 5px 20px ;
-}
-
-.button {
-    width: 200px;
-    height: 100px;
-    font-size: 25px;
-    font-weight: 800;
-    border-radius: 5px;
-    border: solid 1px #FAFAFA;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    text-align: center;
-    box-shadow: var(--el-box-shadow);
-    background-color: rgba(255, 255, 255, 0.237);
-    backdrop-filter: blur(20px);
-    cursor: pointer;
-    transition: .5s;
-    margin: 30px;
-    color: var(--text-color);
-    text-decoration: none;
-}
-
-html.dark .button {
-    background-color: rgba(56, 56, 56, 0.301);
-    border: solid 1px #848484;
-    box-shadow: 0px 12px 32px 4px rgba(198, 198, 198, 0.078), 0px 8px 20px rgba(216, 216, 216, 0.171);
-}
-
-.button:hover {
-    box-shadow: var(--el-box-shadow) inset #00000017 0px 500px;
-}
-
-#ball {
-    background-image: linear-gradient(120deg, #e0c3fcca 0%, #8ec5fcc4 100%);
-    width: 1350px;
-    height: 1350px;
-    border-radius: 100%;
-    position: absolute;
-    top: -50%;
-    right: -10%;
-    animation: enter .8s ease-out;
-    box-shadow:#e0c3fcca 0px 0px 50px 10px;
-    z-index: -1;
-}
-
-html.bgimged #ball{
-    backdrop-filter: blur(20px);
-}
-
-#main {
-    margin: 80px;
-}
-</style>

src/components/Manage.vue

@@ -1,32 +0,0 @@
-<template>
-    <el-page-header style="margin:20px" @back="back_home">
-        <template #content>
-            <span class="text-large font-600 mr-3"> 编辑单词本 </span>
-        </template>
-    </el-page-header>
-    <router-view>
-
-    </router-view>
-</template>
-
-<script>
-
-export default {
-    name: "SetManage",
-    data() {
-        return {
-            
-        }
-    },
-    methods: {
-        back_home() {
-            this.$router.push("/");
-        },
-    },
-    
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/Recite.vue

@@ -1,367 +0,0 @@
-<template>
-    <el-page-header style="margin:20px" @back="back_home">
-        <template #content>
-            <span class="text-large font-600 mr-3"> 背诵 </span>
-        </template>
-    </el-page-header>
-    <div v-if="mode === 0" id="range" class="container colbox">
-        <div id="rangeselect" class="card item">
-            <div class="title">选择测验范围：</div>
-            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
-                size="large">全选</el-checkbox>
-            <el-checkbox-group v-model="checkedSets" @change="handleChange">
-                <div class="set_radios" v-for="(set_class, set_class_name) in wordsets" :key="set_class_name">
-                    <p>{{ set_class_name }}</p>
-                    <el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id" size="large"
-                        border>
-                        <div style="font-size: 18px;font-weight: 500;">
-                            {{ set.name }}
-                        </div>
-                    </el-checkbox>
-                </div>
-            </el-checkbox-group>
-            <el-button style="margin: 20px;width: 50%;" type="primary" @click="init">开始背诵</el-button>
-        </div>
-        <div id="lastrecite" class="card item">
-            <div class="title" style="font-size: 35px;">继续上一次的背诵</div>
-            <el-button style="margin: 20px;width: 50%;" type="primary" @click="last_recite">开始背诵</el-button>
-        </div>
-    </div>
-    <div id="test" class="colbox" v-if="mode === 1">
-        <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>
-            <p 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>
-            </p>
-            <div id="trans">{{ word.type }} {{ word.trans }}</div>
-        </div>
-        <div id="add-to-box" class="card">
-            <el-text class="mx-1" style="font-size: 35px;font-weight: 800;">加入至</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 Object.keys(wordsets)" :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[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>
-</template>
-
-<script>
-import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
-import { nextTick } from 'vue';
-
-export default {
-    name: "WordRecite",
-    data() {
-        return {
-            mode: 0,
-            allsets: [],
-            wordsets: window.wordsets,
-            checkedSets: [],
-            isIndeterminate: false,
-            checkAll: false,
-            testWords: [],
-            seq: [],
-            total: 0,
-            current: 0,
-            answered: 0,
-            word: {},
-            set_class: "",
-            set_id: "",
-        };
-    },
-    methods: {
-        handleCheckAllChange(val) {
-            this.checkedSets = val ? this.allsets : [];
-            this.isIndeterminate = false;
-        },
-        handleChange(value) {
-            console.log(this.checkedSets);
-            this.checkAll = value.length === this.allsets.length;
-            this.isIndeterminate = value.length > 0 && value.length < this.allsets.length;
-        },
-        init() {
-            if (this.checkedSets.length <= 0) {
-                ElMessage({
-                    message: "请至少选择一个单词本",
-                    type: "error"
-                })
-                return;
-            }
-            let seed = (new Date()).getTime();
-            this.testWords = [];
-            for (let i of this.checkedSets) {
-                let words = JSON.parse(localStorage.getItem(i));
-                this.testWords = this.testWords.concat(...words);
-            }
-            localStorage.setItem("lastrecite", JSON.stringify({
-                checkedSets: this.checkedSets,
-                seed: seed
-            }))
-            this.total = this.testWords.length;
-            if (this.total === 0) {
-                ElMessage({
-                    message: "单词本为空",
-                    type: "error"
-                });
-                return;
-            }
-            let arr = Array.from(new Array(this.total).keys());
-            for (let i = this.total - 1; i > 0; i--) {
-                [arr[i], arr[seed % i]] = [arr[seed % i], arr[i]];
-            }
-            this.seq = arr;
-            this.current = 0;
-            this.answered = 0;
-            this.mode = 1;
-            nextTick(() => {
-                this.show();
-            });
-        },
-        last_recite() {
-            let lr = JSON.parse(localStorage.getItem("lastrecite"));
-            if (!lr) {
-                ElMessage({
-                    message: "没有记录",
-                    type: "error"
-                })
-                return;
-            }
-            this.testWords = [];
-            for (let i of lr.checkedSets) {
-                let content = localStorage.getItem(i);
-                if (content) this.testWords = this.testWords.concat(...JSON.parse(content));
-                else {
-                    ElMessage({
-                        message: "单词本不存在",
-                        type: "error"
-                    });
-                    return;
-                }
-            }
-            this.total = this.testWords.length;
-            let arr = Array.from(new Array(this.total).keys());
-            for (let i = this.total - 1; i > 0; i--) {
-                [arr[i], arr[lr.seed % i]] = [arr[lr.seed % i], arr[i]];
-            }
-            this.seq = arr;
-            let cur = Number(localStorage.getItem("lastcurrent"));
-            this.current = cur;
-            this.answered = cur;
-            this.mode = 1;
-            nextTick(() => {
-                this.show();
-            });
-        },
-        next() {
-            this.current++;
-            if (this.current === this.total) {
-                this.mode = 0;
-                ElNotification({
-                    message: "您已完成所有单词的背诵",
-                    title: "Congratulations!",
-                    type: "success"
-                })
-                return;
-            }
-            nextTick(() => {
-                this.show();
-            });
-        },
-        skip() {
-            ElMessage({
-                message: "已经跳过该词",
-                type: "info"
-            });
-            this.answered++;
-            localStorage.setItem("lastcurrent", this.answered.toString());
-            this.next();
-            return;
-        },
-        prev() {
-            this.current--;
-            this.show();
-        },
-        showAnswer() {
-            ElMessage(`答案：${this.word.word}`);
-        },
-        show() {
-            this.word = this.testWords[this.seq[this.current]];
-            console.log(this.word);
-            if (this.current === this.answered) {
-                let e = document.getElementById("input");
-                e.value = "_".repeat(this.word.word.length);
-                e.setSelectionRange(0, 0);
-                e.style.height = `${e.scrollHeight}px`;
-            }
-        },
-        change() {
-            let e = document.getElementById("input");
-            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++;
-                    localStorage.setItem("lastcurrent", this.answered.toString());
-                    this.next();
-                    return;
-                }
-                ElMessage({
-                    title: "Error",
-                    message: "错误",
-                    type: "error"
-                }),
-                    o = "_".repeat(this.word.word.length);
-                n = 0;
-            } else
-                n == -1 ? o = "_".repeat(this.word.word.length) : (o = t.substring(0, n),
-                    o += "_".repeat(this.word.word.length - n));
-            e.value = o;
-            e.setSelectionRange(n, n);
-            e.style.height = `${e.scrollHeight}px`;
-            e.focus();
-        },
-        audio_play() {
-            var t = new Audio("https://dict.youdao.com/dictvoice?audio=" + this.word.word);
-            t.play();
-        },
-        terminate() {
-            ElMessageBox.confirm("确定要终止吗？")
-                .then(() => {
-                    this.mode = 0;
-                    ElNotification({
-                        message: "背诵已终止",
-                        type: "info",
-                        title: "Terminate"
-                    });
-                });
-        },
-        back_home() {
-            this.$router.push("/");
-        },
-        add_to() {
-            let data = JSON.parse(localStorage.getItem(this.set_id));
-            data.push(this.word);
-            localStorage.setItem(this.set_id, JSON.stringify(data));
-            return ElMessage({
-                message: `已添加 ${this.word.word} (${this.word.type})`,
-                type: 'success',
-            });
-        }
-    },
-    created() {
-        for (let i of Object.values(window.wordsets)) {
-            for (let j of i) {
-                this.allsets.push(j.id);
-            }
-        }
-        console.log(this.allsets);
-    },
-}
-</script>
-
-<style scoped>
-.item {
-    margin-bottom: 20px;
-    background-color: var(--bg-color);
-    width: 50%;
-}
-
-.title {
-    font-size: 50px;
-    font-weight: 800;
-    color: var(--text-color);
-}
-
-.checkbox {
-    font-size: 30px;
-}
-
-#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;
-    font-size: 70px;
-    letter-spacing: 30px;
-    border: none;
-    outline-style: none;
-    height: 100px;
-    padding: 0;
-    transition: .5s;
-    resize: vertical;
-    width: 100%;
-    min-height: 100px;
-}
-
-#test {
-    padding: 50px;
-    animation: enter .5s ease-out;
-}
-
-#explain {
-    font-size: 25px;
-    margin-top: 20px;
-}
-
-#trans {
-    font-size: 50px;
-    transition: .5s;
-}
-
-.set_radios {
-    margin: 10px;
-}
-
-.set_radios p {
-    font-size: 25px;
-    font-weight: 700;
-    color: var(--text-color);
-}
-
-#add-to-box {
-    width: 30%;
-    min-width: 200px;
-}
-
-#lastrecite {
-    max-height: 150px;
-}
-
-#range {
-    max-height: 85%;
-}
-
-#rangeselect {
-    max-height: 100%;
-    overflow-x: auto;
-}
-</style>

src/components/UI/CDialog.vue

@@ -0,0 +1,94 @@
+<template>
+    <div id="mask" v-if="visible_" @click.self="handleClose">
+        <div ref="bg" id="bg">
+            <div id="content">
+                <slot name="content"></slot>
+            </div>
+            <div id="close" @click="handleClose">
+                <v-icon :size="25" icon="mdi-close"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted } from 'vue'
+import "@/styles/cui.css"
+
+const props = defineProps<{
+    visible: boolean,
+    width?: string,
+    height?: string
+}>()
+
+const emit = defineEmits(['update:visible'])
+
+const visible_ = ref(false);
+const bg = ref<HTMLElement | null>(null);
+
+const handleClose = () => {
+    emit("update:visible", false);
+};
+
+const resize = () => {
+    if (bg.value) {
+        bg.value.style.width = props.width || "500px";
+        bg.value.style.height = props.height || "300px";
+    }
+};
+
+watch(() => props.visible, (val) => {
+    if (val) {
+        visible_.value = true;
+        nextTick(() => resize());
+    } else {
+        if (bg.value) bg.value.style.animation = "cui-dialog-disappear .3s ease-in";
+        setTimeout(() => { visible_.value = false }, 295);
+    }
+});
+
+onMounted(() => {
+    if (props.visible) nextTick(() => resize());
+});
+</script>
+
+<style scoped>
+#mask {
+    z-index: 500;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    animation: cui-dialog-blur .6s;
+}
+
+#bg {
+    position: absolute;
+    width: 500px;
+    height: 300px;
+    max-width: 80%;
+    border: solid var(--bd-color) 1px;
+    background-color: var(--bg-color-solid);
+    border-radius: 8px;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    animation: cui-dialog-appear .6s cubic-bezier(0, 0.6, 0.2, 1.0);
+}
+
+#content {
+    padding: 20px;
+    height: calc(100% - 40px);
+    overflow: auto;
+}
+
+#close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 15px;
+    cursor: pointer;
+}
+</style>

src/components/manage/Editor.vue

@@ -1,218 +0,0 @@
-<template>
-    <div class="container" style="overflow: auto;">
-        <el-page-header @back="$router.push('/manage')">
-            <template #content>
-                <span class="text-large font-600 mr-3"> {{ editing.name }} ({{ editing.id }}) </span>
-            </template>
-        </el-page-header>
-        <div class="colbox" style="margin-top: 20px;">
-            <div class="rowbox">
-                <div class="card" style="margin-bottom: 20px;">
-                    <div class="title">添加单词</div>
-                    <el-input ref="input1" autofocus @change="focusnext($refs.input2)" v-model="new_word.word"></el-input>
-                    <div class="colbox">
-                        <el-text class="mx-1" style="width: 60px;">翻译:</el-text>
-                        <el-input ref="input2" @change="focusnext($refs.input3)" v-model="new_word.trans"></el-input>
-                    </div>
-                    <div class="colbox">
-                        <el-text class="mx-1" style="width: 80px;">词性：</el-text>
-                        <el-select ref="input3" v-model="new_word.type" class="m-2" placeholder="Select">
-                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-                        </el-select>
-                    </div>
-                    <el-button @click="add_word()" type="primary">添加</el-button>
-                </div>
-                <div class="card">
-                    <div class="title">更改名称</div>
-                    <div class="colbox">
-                        <el-text class="mx-1" style="width: 60px;">新名称:</el-text>
-                        <el-input v-model="new_name"></el-input>
-                    </div>
-                    <el-button @click="change_name()" type="primary">更改名称</el-button>
-                </div>
-            </div>
-            <div style="width: 100%;" class="card">
-                <el-table :data="table" style="max-height: 550px;overflow: auto;border-radius: 10px;">
-                    <el-table-column type="index" />
-                    <el-table-column prop="word" label="单词" />
-                    <el-table-column prop="type" label="词性" />
-                    <el-table-column prop="trans" label="翻译" />
-                    <el-table-column width="100px" fixed="right" label="操作">
-                        <template #default="scope">
-                            <div style="display: flex;flex-direction: row;justify-content: space-around;">
-                                <box-icon color="var(--text-color)" size="14px" class="btn" name='trash'
-                                    @click="del_word(scope.$index)"></box-icon>
-                                <box-icon color="var(--text-color)" size="14px" class="btn" name='edit-alt'
-                                    @click="edit_word(scope.$index)"></box-icon>
-                            </div>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-        </div>
-    </div>
-    <el-dialog v-model="word_editing">
-        <div class="title">修改单词</div>
-        <el-input v-model="editing_word.word"></el-input>
-        <div class="colbox">
-            <el-text class="mx-1" style="width: 60px;">翻译:</el-text>
-            <el-input v-model="editing_word.trans"></el-input>
-        </div>
-        <div class="colbox">
-            <el-text class="mx-1" style="width: 80px;">词性：</el-text>
-            <el-select v-model="editing_word.type" class="m-2" placeholder="Select">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </div>
-        <el-button @click="save_word" type="primary">更改</el-button>
-    </el-dialog>
-</template>
-
-<script>
-import { ElMessage } from 'element-plus';
-
-export default {
-    name: "NoteEditor",
-    data() {
-        return {
-            editing: window.editing.set,
-            editingClass:window.editing.set_class_name,
-            wordsets: window.wordsets,
-            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:"",
-        }
-    },
-    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));
-            localStorage.setItem(this.editing.id, JSON.stringify(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,
-            }
-            localStorage.setItem(this.editing.id, JSON.stringify(this.table));
-            ElMessage({
-                message: `已保存更改`,
-                type: 'success',
-            });
-            this.word_editing = false;
-        },
-        change_name() {
-            let old_name = this.editing.name;
-            this.editing.name = this.new_name;
-            localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
-            ElMessage({
-                message: `已更改 ${old_name} 为 ${this.new_name}`,
-                type: 'success',
-            });
-            return;
-        },
-        del_word(index) {
-            let word = this.table[index].word.concat();
-            this.table.splice(index, 1);
-            localStorage.setItem(this.editing.id, JSON.stringify(this.table));
-            ElMessage({
-                message: `已删除 ${word}`,
-                type: 'warning',
-            });
-        },
-
-    },
-    created() {
-        this.table = JSON.parse(localStorage.getItem(this.editing.id));
-    },
-}
-</script>
-
-<style scoped>
-#main-container {
-    height: 87%;
-}
-
-.title {
-    font-weight: 800;
-    color: var(--text-color);
-    font-size: 35px;
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-height: 60px;
-}
-
-
-.card div {
-    margin-bottom: 10px;
-}
-
-#new div {
-    margin-bottom: 20px;
-}
-
-#sets-container {
-    background-color: var(--bg-color);
-    padding: 5px;
-    border-radius: 8px;
-}
-
-
-.el-collapse {
-    --el-collapse-header-bg-color: #FFFFFF00;
-    --el-collapse-content-bg-color: #FFFFFF00;
-    --el-collapse-header-font-size: 18px;
-}
-</style>

src/components/manage/NewSet.vue

@@ -1,66 +0,0 @@
-<template>
-    <el-container id="main-container" class="container card">
-        <div style="overflow: auto;">
-        <el-page-header @back="$router.push('/manage')">
-            <template #content>
-                <span class="text-large font-600 mr-3"> 新建单词本 </span>
-            </template>
-        </el-page-header>
-        <div class="colbox">
-            <div class="mid-text">名称:</div>
-            <el-input v-model="set_name"></el-input>
-            <div class="mid-text">分组:</div>
-            <el-select allow-create filterable v-model="new_set_class" class="m-2" placeholder="Select">
-                <el-option v-for="item in Object.keys(wordsets)" :key="item" :label="item" :value="item" />
-            </el-select>
-        </div>
-        <el-button style="width: 50%;" type="primary" @click="new_wordset()">创建</el-button>
-    </div>
-    </el-container>
-</template>
-
-<script>
-import uuid from 'node-uuid';
-import { ElMessage} from 'element-plus';
-
-export default {
-    name: "NewSet",
-    data() {
-        return {
-            wordsets: window.wordsets,
-            set_name: "",
-            new_set_class: "",
-        }
-    },
-    methods: {
-        new_wordset() {
-            if (!this.new_set_class) {
-                ElMessage({
-                    message: "集合不能为空",
-                    type: "error"
-                })
-                return;
-            }
-            if (!this.wordsets[this.new_set_class]) {
-                this.wordsets[this.new_set_class] = [];
-            }
-            let id = uuid.v1();
-            this.wordsets[this.new_set_class].push({
-                name: this.set_name,
-                created: (new Date()).getTime(),
-                id: id
-            });
-            localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
-            localStorage.setItem(id, JSON.stringify([]));
-            this.mode = 0;
-            return;
-        },
-    }
-}
-</script>
-
-<style scoped>
-#main-container {
-    height: 87%;
-}
-</style>

src/components/manage/SetList.vue

@@ -1,186 +0,0 @@
-<template>
-    <el-container id="main-container" class="container card">
-        <el-header id="header" class="colbox">
-            <div class="no">共有{{ Object.keys(wordsets).length }}个单词集合</div>
-            <div>
-                <el-button @click="export_set" type="success"><box-icon color="white" name='export'
-                        size="15px"></box-icon>导出</el-button>
-                <el-button @click="import_set" type="warning"><box-icon color="white" name='import'
-                        size="15px"></box-icon>导入</el-button>
-                <el-button @click="$router.push('/manage/new')" type="primary"><box-icon color="white" name='plus'></box-icon>新建单词本</el-button>
-            </div>
-        </el-header>
-        <el-main id="wordsets-container">
-            <div class="colbox" if="sets-container">
-                <el-collapse accordion v-model="active_set_class" style="width: 100%;border: none;">
-                    <el-collapse-item v-for="(set_class, class_name) in wordsets" :title="class_name" :key="class_name"
-                        :name="class_name">
-                        <div class="colbox wordclass">
-                            <div v-for="(wordset, index) in set_class" :key="index" class="wordset rowbox">
-                                <div class="no">
-                                    {{ index + 1 }}
-                                </div>
-                                <div class="title">
-                                    {{ wordset.name }}
-                                </div>
-                                <div style="font-size: 17px;font-weight: 200;">
-                                    创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
-                                </div>
-                                <div class="option">
-                                    <box-icon class="btn" name='edit' color="var(--text-color)"
-                                        @click="edit(wordset, class_name)"></box-icon>
-                                    <box-icon class="btn" name='trash' color="var(--text-color)"
-                                        @click="del(class_name, wordset.id, index)"></box-icon>
-                                </div>
-                            </div>
-                        </div>
-                    </el-collapse-item>
-                </el-collapse>
-            </div>
-        </el-main>
-    </el-container>
-</template>
-
-<script>
-import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
-
-export default {
-    name: "SetList",
-    data() {
-        return {
-            wordsets:window.wordsets,
-            active_set_class: "",
-        }
-    },
-    methods:{
-        del(set_class_name, id, index) {
-            ElMessageBox.confirm("确定要删除吗？")
-                .then(() => {
-                    localStorage.removeItem(id);
-                    this.wordsets[set_class_name].splice(index, 1);
-                    if (!this.wordsets[set_class_name].length) {
-                        delete this.wordsets[set_class_name];
-                    }
-                    localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
-                    ElMessage(`已经删除 ${set_class_name} `);
-                });
-        },
-        edit(set, set_class_name) {
-            window.editing = {set,set_class_name};
-            this.$router.push({
-                path:"/manage/edit",
-            })
-        },
-        async export_set() {
-            let fileHandle = await window.showSaveFilePicker({
-                types: [
-                    {
-                        description: "JSON file",
-                        accept: {
-                            'text/json': ['.json'],
-                        },
-                    },
-                ],
-            });
-            let writestream = await fileHandle.createWritable();
-            let data = {
-                wordsets: this.wordsets,
-                words: {}
-            };
-            for (let i of Object.values(this.wordsets)) {
-                for (let j of i) {
-                    let temp = localStorage.getItem(j.id);
-                    data.words[j.id] = temp;
-                }
-            }
-            writestream.write(JSON.stringify(data));
-            writestream.close();
-        },
-        async import_set() {
-            let [fileHandle] = await window.showOpenFilePicker({
-                types: [
-                    {
-                        description: "JSON file",
-                        accept: {
-                            'text/json': ['.json'],
-                        },
-                    },
-                ],
-            });
-            let file = await fileHandle.getFile();
-            let data = JSON.parse(await file.text());
-            let cnt = 0;
-            for (let i of Object.keys(data.wordsets)) {
-                for (let j of data.wordsets[i]) {
-                    if (!localStorage.getItem(j.id)) {
-                        if (!this.wordsets[i]) this.wordsets[i] = [];
-                        this.wordsets[i].push(j);
-                        localStorage.setItem(j.id, data.words[j.id]);
-                        cnt++;
-                    }
-                }
-            }
-            localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
-            ElNotification({
-                type: "success",
-                title: "添加成功",
-                message: `已添加 ${cnt} 本单词本`
-            });
-        }
-    },
-    created() {
-        this.active_set_class = Object.keys(this.wordsets)[0];
-    }
-}
-</script>
-
-<style scoped>
-.title {
-    font-weight: 800;
-    color: var(--text-color);
-    font-size: 35px;
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-height: 60px;
-}
-.option {
-    display: flex;
-    justify-content: space-around;
-    opacity: 0;
-    transition: .5s;
-}
-
-.wordset:hover .option{
-    opacity: 1;
-}
-
-#header {
-    /* border-bottom: solid 1px #bcbcbc; */
-    justify-content: space-between;
-    height: 40px;
-}
-
-.no {
-    font-size: 20px;
-    font-weight: 700;
-}
-
-#wordsets-container {
-    overflow-x: auto;
-    height: 100%;
-}
-
-#main-container {
-    height: 87%;
-}
-
-.wordclass {
-    flex-wrap: wrap
-}
-
-.card div {
-    margin-bottom: 10px;
-}
-</style>

src/composables/useDarkMode.ts

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

src/composables/useVuetifyDarkmode.ts

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

src/main.js

@@ -1,12 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/dark/css-vars.css'
-import 'boxicons'
-import router from './router.js'
-
-const app = createApp(App);
-app.use(ElementPlus);
-app.use(router);
-app.mount('#app');

src/main.ts

@@ -0,0 +1,32 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+import { useDarkMode } from "./composables/useDarkMode";
+import router from "./router";
+import "./styles/global.css";
+import "element-plus/theme-chalk/dark/css-vars.css";
+import "@mdi/font/css/materialdesignicons.css"
+import "vuetify/styles"
+// Vuetify
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import { aliases, mdi } from "vuetify/iconsets/mdi";
+
+const vuetify = createVuetify({
+  icons: {
+    defaultSet: "mdi",
+    aliases,
+    sets: {
+      mdi,
+    },
+  },
+});
+
+const app = createApp(App);
+app.use(vuetify);
+app.use(router);
+app.use(createPinia());
+
+useDarkMode();
+
+app.mount("#app");

src/md/about.md

@@ -0,0 +1,99 @@
+# 关于 wordIn
+
+## 1. wordIn 是什么
+
+wordIn 是一款基于 vue.js 的单词默写器，致力于为用户提供便捷有效的单词记忆方式
+
+## 2.获取源代码
+
+wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1e/wordIn)
+！！需要从浙江大学内网访问
+
+如果有获取后端代码的需求请联系作者
+
+## 3.联系作者
+
+- 通过电子邮件
+  - [rooger@zju.edu.cn](mailto:rooger@zju.edu.cn)
+  - [rooger233@gmail.com](mailto:rooger233@gmail.com)
+- 通过QQ
+  - 1176075089
+
+## 3.更新日志
+
+### 1.03
+
+1. 更新内容
+
+   - 使用 anime.js 构建动画效果
+   - 修复显示 bug
+   - 主页视觉效果更新
+
+### 1.02
+
+1. 更新内容
+   - 使用 Vite 构建，更加现代化
+   - 使用 TypeScript 解析，减少错误
+   - 优化了启动速度，精简了代码
+2. 抱歉鸽了这么久，在这期间我也学会了很多新的技能，认识了很多新的朋友，感谢 ACEE 的各位！
+
+### 1.0.2 Beta 2
+
+1. 更新内容
+
+   - 减小了打包体积
+2. Bug修复进度
+
+   - （解决中）自定义背景
+   - （已解决）移动端UI错位问题
+
+### 1.0.2 Beta 1
+
+1. 更新内容
+
+   - 重写对话框组件
+   - 增加了一些单词本管理功能
+2. Bug修复进度
+
+   - （解决中）自定义背景
+   - （解决中）移动端UI错位问题
+
+### 1.0.1 Release
+
+#### 1.0.1 是wordIn第一个正式版
+
+1. 更新内容
+
+   - 暂时禁用了自定义背景功能（预计1.0.2恢复）
+   - 增加了背诵选择界面
+   - 增加了历史记录功能，最多可以存储十条记录
+   - 重写了主页
+   - 优化了过渡动画
+   - 优化了全局变量管理
+2. Bug修复进度
+
+   - （已修复）背诵时插入导致指针归位
+   - （已修复）查看之前的单词时溢出的错误
+   - （解决中）手机端适配问题
+
+#### Patch 1
+
+- 增加了移动端底部导航栏
+- 修复了无法随机顺序问题
+
+#### Patch 2
+
+- 封装网络请求
+- 其他源码优化
+
+### 1.0
+
+#### 1.0 及之前的版本汇总
+
+1. 内容
+
+   - 1.0是整个项目的开始，项目包括前端界面（/），运维管理界面（/manage），后端服务器。
+
+## 4.开发者的话
+
+整个项目的开发已经有半年了，在这期间我为 wordIn 花费了很多时间和精力，也收获了很多。希望 wordIn 能够帮助到大家的英语学习，祝各位大英都能满绩！

src/md/manual.md

@@ -0,0 +1,51 @@
+# wordIn 使用说明
+
+- 近期发现ZJUWLAN无法访问unpkg.com导致部分图标无法显示,请使用ZJUWLAN-Secure访问
+
+## 1. 背诵单词
+
+### 开始新的背诵
+
+- 在主页点击“开始新背诵”按钮
+- 选择在线或者本地单词本（可以多选）
+- 调整设置开始背诵
+
+### 背诵中
+
+- 快捷键说明
+  - ctrl+B 显示答案
+  - ctrl+M 跳过单词
+  - ctrl+I 插入到单词本
+  - ctrl+Y 播放音频
+  - ctrl+方向键左键 上一个单词
+  - ctrl+方向键右键 下一个单词
+- 错题本功能
+  - wordIn内置丰富的单词管理功能，首先新建一个单词本
+  - 在背诵过程中选择新建的单词本
+  - 点击插入到单词本即可将现在显示的单词插入到单词本中
+- 进度记忆功能
+  - 一下子没有背完？不必担心,wordIn会自动记忆您的背诵进度，您可以从主页随时返回到背诵
+
+## 2. 单词本管理
+
+### 新建单词本
+
+- 单击新建单词本
+- 输入单词本的名称
+- 选择单词本的分类
+  - 选择现有的分类
+  - 在选择框中输入新的分类并 ***回车*** 创建新的分类
+- 创建完毕
+
+### 管理单词本
+
+- 在界面左侧选择单词本分类
+- 将鼠标移至单词本，选项会自动出现
+- 手动添加单词输入完毕后按下回车键会自动focus下一个输入框
+
+### 备份本地单词本
+
+- 暂不支持Andriod & iOS等系统的设备
+- 选择导出单词本将单词本导出为json格式文件
+- 选择导入单词本导入备份的单词本（不会覆盖已经存在的单词本）
+- 如果没反应，请确认您是否使用了支持的浏览器(推荐Edge,Chrome等基于Chromium的浏览器) [MDN Reference](https://developer.mozilla.org/zh-CN/docs/Web/API/File_System_API)

src/router.js

@@ -1,23 +0,0 @@
-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.vue');
-const setlist = ()=>import('./components/manage/SetList.vue');
-const newset = ()=>import('./components/manage/NewSet.vue');
-
-const routes = [
-    { path: '/', component: home },
-    { path: '/recite', component: recite },
-    { path: '/manage', component: manage,
-      children:[
-        {path: '',component:setlist},
-        {path: 'new',component:newset},
-        {path: 'edit',component:editor}
-      ]},
-  ]
-  
-export default createRouter({
-    history: createWebHashHistory(),
-    routes, 
-})

src/router/index.ts

@@ -0,0 +1,31 @@
+import {createRouter,createWebHashHistory} from 'vue-router'
+const manage = ()=>import('@/views/ManageView.vue');
+const editor = ()=>import('@/views/manage/EditorView.vue');
+import home from "@/views/HomeView.vue";
+const recite = ()=>import('@/views/recite/ReciteView.vue');
+const setlist = ()=>import('@/views/manage/SetListView.vue');
+const newset = ()=>import('@/views/manage/NewSetView.vue');
+const display = ()=>import('@/views/manage/DisplayView.vue');
+const select = ()=>import('@/views/recite/SelectView.vue');
+const manual = ()=>import('@/views/post/ManualView.vue');
+const about = ()=>import('@/views/post/AboutView.vue');
+
+const routes = [
+    { path: '/', component: home },
+    { path: '/select',component:select},
+    { path:'/recite',component:recite},
+    { path: '/manage', component: manage,
+      children:[
+        {path: '',component:setlist},
+        {path: 'new',component:newset},
+        {path: 'edit',component:editor},
+        {path: 'show',component:display}
+      ]},
+      { path: '/manual',component:manual},
+      { path: '/about',component:about},
+  ]
+  
+export default createRouter({
+    history: createWebHashHistory(),
+    routes, 
+})

src/scripts/history.ts

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

src/scripts/request.ts

@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+const instance = axios.create({
+    baseURL:"./",
+    timeout:6000,
+})
+
+export default instance;

src/scripts/wordsets.ts

@@ -0,0 +1,235 @@
+import { WordItem, WordSetInfo } from '@/types';
+import { v1 as uuidv1 } from 'uuid';
+
+// Add type declarations for the File System Access API
+declare global {
+  interface FileSystemWritableFileStream {
+    write(data: any): Promise<void>;
+    seek(position: number): Promise<void>;
+    truncate(size: number): Promise<void>;
+    close(): Promise<void>;
+  }
+
+  interface FileSystemFileHandle {
+    getFile(): Promise<File>;
+    createWritable(): Promise<FileSystemWritableFileStream>;
+  }
+
+  interface Window {
+    showSaveFilePicker(options?: {
+      types?: Array<{
+        description: string;
+        accept: Record<string, string[]>;
+      }>;
+    }): Promise<FileSystemFileHandle>;
+    
+    showOpenFilePicker(options?: {
+      multiple?: boolean;
+      types?: Array<{
+        description: string;
+        accept: Record<string, string[]>;
+      }>;
+    }): Promise<FileSystemFileHandle[]>;
+  }
+}
+
+export class Wordset {
+    private sets: {[className: string]: WordSetInfo[]};
+
+    constructor() {
+        this.sets = {};
+        let wordsets = localStorage.getItem("wordsets");
+        if (wordsets) {
+            this.sets = JSON.parse(wordsets);
+        }
+    }
+    
+    save(): void {
+        localStorage.setItem("wordsets", JSON.stringify(this.sets));
+    }
+    
+    get _inner(): {[className: string]: WordSetInfo[]} {
+        return this.sets;
+    }
+    
+    get _firstClass(): string | null {
+        return Object.keys(this.sets)[0] || null;
+    }
+    
+    get _allclass(): string[] {
+        return Object.keys(this.sets);
+    }
+    
+    get _allsets(): WordSetInfo[][] {
+        return Object.values(this.sets);
+    }
+    
+    getClass(class_name: string): WordSetInfo[] | null {
+        if (this.sets[class_name]) {
+            return this.sets[class_name];
+        }
+        else return null;
+    }
+    
+    getSetStatus(class_name: string, id: string): WordSetInfo | null {
+        let set_class = this.getClass(class_name);
+        if(set_class) {
+            for(let i of set_class) {
+                if(i.id === id) {
+                    return i;
+                }
+            }
+        }
+        return null;
+    }
+    
+    getId(class_name: string, id: string): number | undefined {
+        let set_class = this.sets[class_name];
+        for(let index in set_class) {
+            if(set_class[index].id === id) {
+                return Number(index);
+            }
+        }
+        return undefined;
+    }
+    
+    getSet(id: string): WordItem[] {
+        let sets = localStorage.getItem(id);
+        if (sets) {
+            return JSON.parse(sets);
+        }
+        else return [];
+    }
+    
+    delSet(class_name: string, index: number): boolean {
+        let set_class = this.sets[class_name];
+        if (set_class) {
+            if (set_class[index]) {
+                localStorage.removeItem(set_class[index].id);
+                this.sets[class_name].splice(index, 1);
+                if (!this.sets[class_name].length) {
+                    delete this.sets[class_name];
+                }
+                localStorage.setItem("wordsets", JSON.stringify(this.sets));
+                return true;
+            }
+        }
+        return false;
+    }
+    
+    addSet(class_name: string, name: string): string {
+        if (!this.sets[class_name]) {
+            this.sets[class_name] = [];
+        }
+        let id = uuidv1();
+        let time = (new Date()).getTime()
+        this.sets[class_name].push({
+            name: name,
+            id: id,
+            created: time,
+        });
+        localStorage.setItem(id, JSON.stringify([]));
+        this.save();
+        return id;
+    }
+    
+    saveSet(id: string, data: WordItem[]): void {
+        localStorage.setItem(id, JSON.stringify(data));
+    }
+    
+    renameSet(class_name: string, id: string, new_name: string): void {
+        let set_class = this.getClass(class_name);
+        if(set_class) {
+            for(let i of set_class) {
+                if(i.id === id) {
+                    i.name = new_name;
+                    this.save();
+                    return;
+                }
+            }
+        }
+    }
+    
+    addSetTo(origin_id: string, dest_id: string): number {
+        let origin_set = this.getSet(origin_id);
+        let dest_set = this.getSet(dest_id);
+        let set: {[word: string]: WordItem} = {};
+        origin_set.forEach(element => {
+            set[element.word] = element;
+        });
+        dest_set.forEach(element => {
+            set[element.word] = element;
+        });
+        let mergedSet = Object.values(set);
+        this.saveSet(dest_id, mergedSet);
+        return origin_set.length + dest_set.length - mergedSet.length;
+    }
+    
+    fromArray(arr: WordItem[], class_name: string, name: string): void {
+        let id = this.addSet(class_name, name);
+        this.saveSet(id, arr);
+    }
+    
+    async import_set(callback?: (count: number) => void): Promise<void> {
+        let [fileHandle] = await window.showOpenFilePicker({
+            types: [
+                {
+                    description: "JSON file",
+                    accept: {
+                        'text/json': ['.json'],
+                    },
+                },
+            ],
+        });
+        let file = await fileHandle.getFile();
+        let data = JSON.parse(await file.text());
+        let cnt = 0;
+        for (let i of Object.keys(data.wordsets)) {
+            for (let j of data.wordsets[i]) {
+                if (!localStorage.getItem(j.id)) {
+                    if (!this.sets[i]) this.sets[i] = [];
+                    this.sets[i].push(j);
+                    localStorage.setItem(j.id, data.words[j.id]);
+                    cnt++;
+                }
+            }
+        }
+        this.save();
+        if(typeof callback === "function") {
+            callback(cnt);
+        }
+    }
+    
+    async export_set(callback?: (count: number) => void): Promise<void> {
+        let fileHandle = await window.showSaveFilePicker({
+            types: [
+                {
+                    description: "JSON file",
+                    accept: {
+                        'text/json': ['.json'],
+                    },
+                },
+            ],
+        });
+        let writestream = await fileHandle.createWritable();
+        let data = {
+            wordsets: this.sets,
+            words: {} as {[id: string]: string}
+        };
+        let cnt = 0;
+        for (let i of Object.values(this.sets)) {
+            for (let j of i) {
+                let temp = localStorage.getItem(j.id);
+                if (temp) {
+                    data.words[j.id] = temp;
+                    cnt++;
+                }
+            }
+        }
+        await writestream.write(JSON.stringify(data));
+        await writestream.close();
+        if(typeof callback === "function") {
+            callback(cnt);
+        }
+    }
+}

src/store/index.ts

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

src/styles/cui.css

@@ -0,0 +1,35 @@
+@keyframes cui-dialog-appear {
+    0% {
+        /* opacity: 0%; */
+        transform: translate(-50%, -50%) scale(0.7);
+    }
+
+    100% {
+        /* opacity: 100%; */
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+@keyframes cui-dialog-disappear {
+    0% {
+        opacity: 100%;
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    100% {
+        opacity: 0%;
+        transform: translate(-50%, -50%) scale(0.5);
+    }
+}
+
+@keyframes cui-dialog-blur {
+    0% {
+        opacity: 0%;
+        /* backdrop-filter: blur(0px); */
+    }
+
+    100% {
+        opacity: 100%;
+        /* backdrop-filter: blur(10px); */
+    }
+}

src/styles/global.css

@@ -0,0 +1,121 @@
+html{
+  height: 100%;
+  width: 100%;
+  overflow: hidden !important;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden !important;
+  font-family: 
+      'MiSans',
+      -apple-system, /* macOS, iOS */
+      BlinkMacSystemFont, /* Chrome macOS */
+      "Segoe UI", /* Windows */
+      Roboto, /* Android */
+      "Helvetica Neue", /* 一些 macOS 和 iOS 系统 */
+      Arial, /* 常见替代字体 */
+      "Noto Sans", /* 国际化字体 */
+      "Liberation Sans", /* Linux 系统的替代字体 */
+      sans-serif; /* 默认字体 */
+}
+
+html.dark body{
+  background-color: var(--bg-color-solid);
+  color: var(--text-color);
+}
+
+#app {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 500px) {
+  .pconly {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 500px) {
+  .mbonly {
+    display: none;
+  }
+}
+
+#app {
+  transition: 0.5s;
+}
+
+html {
+  --bg-color-solid: #e8e8e8;
+  --bg-color: #ffffffae;
+  --bg-color-acrylic:#ffffff54;
+  --text-color: #464646;
+  --bd-color: #bbbbbb99;
+}
+
+html.dark {
+  --bg-color-solid: #191919;
+  --bg-color: #2a2a2a88;
+  --bg-color-acrylic:rgba(42, 42, 42, 0.263);
+  --text-color: #c0c0c0;
+  --bd-color: #7f7f7f7c;
+  --navi-bg-color: #131313e2;
+}
+
+.container {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.colbox {
+  display: flex;
+  flex-direction: row;
+}
+
+.rowbox {
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  border-radius: 8px;
+  border: solid 1px var(--bd-color);
+  padding: 20px;
+  margin: 10px;
+  color: var(--text-color);
+}
+
+.card:hover {
+  box-shadow: var(--el-box-shadow);
+}
+
+html.bgimged .card {
+  background-color: var(--bg-color);
+  backdrop-filter: blur(15px);
+}
+
+.btn {
+  cursor: pointer;
+}
+
+.mid-text {
+  width: 65px;
+  transform: translate(0, 6px);
+  color: var(--text-color);
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.para {
+  margin: 15px;
+}
+
+.blured {
+  filter: blur(10px);
+}

src/styles/markdown.css

@@ -0,0 +1,155 @@
+/* Markdown Typography */
+.markdown {
+    line-height: 1.6;
+    color: #333;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+/* Headings */
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+    /* margin-top: 1.5em; */
+    margin-bottom: 0.5em;
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.markdown h1 {
+    font-size: 2.5em;
+    border-bottom: 1px solid var(--bd-color);
+    padding-bottom: 0.3em;
+}
+
+.markdown h2 {
+    font-size: 1.75em;;
+    padding-bottom: 0.3em;
+}
+
+.markdown h3 {
+    font-size: 1.25em;
+}
+
+.markdown h4 {
+    font-size: 1em;
+}
+
+.markdown h5 {
+    font-size: 0.875em;
+}
+
+.markdown h6 {
+    font-size: 0.85em;
+    color: #6a737d;
+}
+
+/* Lists */
+.markdown ul,
+.markdown ol {
+    padding-left: 2em;
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+}
+
+.markdown ul {
+    list-style-type: disc;
+}
+
+.markdown ol {
+    list-style-type: decimal;
+}
+
+.markdown li {
+    margin-bottom: 0.25em;
+}
+
+.markdown li > ul,
+.markdown li > ol {
+    margin-top: 0.25em;
+    margin-bottom: 0.5em;
+}
+
+/* Paragraphs and spacing */
+.markdown p {
+    margin-top: 0;
+    margin-bottom: 1em;
+}
+
+/* Links */
+.markdown a {
+    text-decoration: none;
+}
+
+.markdown a:hover {
+    text-decoration: underline;
+}
+
+/* Code blocks */
+.markdown pre {
+    background-color: #f6f8fa;
+    border-radius: 3px;
+    padding: 16px;
+    overflow: auto;
+    margin-bottom: 1em;
+}
+
+.markdown code {
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    background-color: var(--bg-color-solid);
+    border-radius: 3px;
+    padding: 0.2em 0.4em;
+    font-size: 85%;
+}
+
+.markdown pre code {
+    background-color: transparent;
+    padding: 0;
+}
+
+/* Blockquotes */
+.markdown blockquote {
+    margin-left: 0;
+    padding: 0 1em;
+    color: var(--text-color);
+    border-left: 0.25em solid var(--bd-color);
+}
+
+/* Tables */
+.markdown table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: 1em;
+}
+
+.markdown table th,
+.markdown table td {
+    padding: 6px 13px;
+    border: 1px solid var(--bd-color);
+}
+
+.markdown table tr {
+    background-color: var(--bg-color-solid);
+    border-top: 1px solid var(--bd-color);
+}
+
+.markdown table tr:nth-child(2n) {
+    background-color: var(--bg-color-solid);
+}
+
+/* Horizontal rule */
+.markdown hr {
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: var(--bg-color-solid);
+    border: 0;
+}
+
+/* Images */
+.markdown img {
+    max-width: 100%;
+    box-sizing: border-box;
+}

src/types/index.d.ts

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

src/types/markdown.d.ts

@@ -0,0 +1,13 @@
+declare module "*.vue" {
+  import type { ComponentOptions } from "vue";
+
+  const Component: ComponentOptions;
+  export default Component;
+}
+
+declare module "*.md" {
+  import type { ComponentOptions } from "vue";
+
+  const Component: ComponentOptions;
+  export default Component;
+}

src/types/vite-env.d.ts

@@ -0,0 +1,2 @@
+declare const __BUILD_TIME__: string;
+declare const __APP_VERSION__: string;

src/views/HomeView.vue

@@ -0,0 +1,231 @@
+<template>
+    <div class="home-view-container">
+        <DynamicBackground class="home-view-header">
+            <template #content>
+                <div class="colbox" style="width: 95%;margin-top: 10px;">
+                    <div style="flex-grow: 2;margin:30px;" class="rowbox">
+                        <div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
+                        <div id="title">wordIn</div>
+                        <div>当前版本: {{ appVersion }} <br /> 更新时间: {{ buildTime }}</div>
+                    </div>
+                    <div class="colbox card home-view-option-wrapper">
+                        <router-link to="/select" class="button">
+                            开始新背诵
+                        </router-link>
+                        <router-link to="/manage" class="button">
+                            查看单词本
+                        </router-link>
+                    </div>
+                </div>
+            </template>
+        </DynamicBackground>
+        <div class="wrapper home-view-history">
+            <div class="home-view-history-title" style="margin-left: 20px;margin-top: 10px;width: 95%;">历史记录</div>
+            <div class="home-view-history-item" v-for="(history, index) in store.history._content" :key="index">
+                <div class="card colbox" >
+                <div style="width: 25px;">{{ index + 1 }}</div>
+                <div style="width: 200px;">背诵进度: {{ history.current }}/{{ history.total || "Unknown" }}</div>
+                <div style="flex-grow: 1;"> {{ (new Date(history.modified)) }}</div>
+                <el-button @click="restart(index)">继续</el-button>
+            </div>
+            </div>
+        </div>
+    </div>
+    <div id="setting">
+        <v-icon class="btn" @click="open_setting_dialog">mdi-cog</v-icon>
+    </div>
+    <el-dialog v-model="settingVisible" title="设置" width="75%">
+        <div class="title">更换自定义背景</div>
+        <div class="colbox" style="margin: 10px;">
+            <el-input v-model="img_url"></el-input>
+            <el-button type="primary" style="margin-left: 10px;" @click="set_bg">确定</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { useMainStore } from '@/store';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import DynamicBackground from '@/components/DynamicBackground.vue';
+import animejs from 'animejs';
+
+const appVersion = __APP_VERSION__;
+const buildTime = __BUILD_TIME__;
+
+const store = useMainStore();
+const router = useRouter();
+const img_url = ref("");
+const settingVisible = ref(false);
+
+const set_bg = (): void => {
+    localStorage.setItem("bgimg", img_url.value);
+    window.location.reload();
+};
+
+const open_setting_dialog = (): void => {
+    settingVisible.value = true;
+};
+
+const restart = (index: number): void => {
+    router.push({
+        path: "./recite",
+        query: { index }
+    });
+};
+
+onMounted(()=>{
+    animejs({
+        targets:".home-view-header",
+        translateY: [-50,0],
+        opacity: [0,1],
+    })
+    animejs({
+        targets:".home-view-history-title,.home-view-history-item",
+        translateX: [50,0],
+        opacity: [0,1],
+        delay: animejs.stagger(50),
+    })
+})
+
+</script>
+
+<style scoped>
+@media screen and (max-width: 500px) {
+    #title {
+        font-size: 80px;
+        color: var(--text-color);
+        text-shadow: #00000057 5px 5px 20px;
+    }
+
+    .home-view-history-title {
+        font-weight: 800;
+        color: var(--text-color);
+        font-size: 15px;
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    #main {
+        margin: 10px;
+        margin-top: 80px;
+    }
+
+    .colbox {
+        flex-direction: column;
+    }
+
+    .button {
+        margin-top: 30px;
+    }
+
+    .container {
+        overflow: hidden;
+    }
+}
+
+@media screen and (min-width: 500px) {
+    #title {
+        font-size: 100px;
+        color: var(--text-color);
+        text-shadow: #00000057 5px 5px 20px;
+        line-height: 100px;
+        font-weight: 500;
+        margin-bottom: 15px;
+    }
+
+    .home-view-history-title {
+        font-weight: 600;
+        color: var(--text-color);
+        font-size: 35px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    #main {
+        margin: 80px;
+    }
+
+    .button {
+        margin: 30px;
+    }
+
+    #ball {
+        width: 1350px;
+        height: 1350px;
+        top: -50%;
+        right: -10%;
+    }
+}
+
+.wrapper {
+    /* border: 1px solid var(--bd-color); */
+    border-radius: 5px;
+    margin-top: 10px;
+}
+
+#setting {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin: 20px;
+}
+
+.button {
+    width: 200px;
+    height: 100px;
+    font-size: 25px;
+    font-weight: 800;
+    border-radius: 5px;
+    border: solid 1px #FAFAFA;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    box-shadow: var(--el-box-shadow);
+    background-color: rgba(255, 255, 255, 0.237);
+    backdrop-filter: blur(20px);
+    cursor: pointer;
+    transition: .5s;
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+html.dark .button {
+    background-color: rgba(56, 56, 56, 0.301);
+    border: solid 1px #848484;
+    box-shadow: 0px 12px 32px 4px rgba(198, 198, 198, 0.078), 0px 8px 20px rgba(216, 216, 216, 0.171);
+}
+
+.button:hover {
+    box-shadow: var(--el-box-shadow) inset #00000017 0px 500px;
+}
+</style>
+
+<style>
+.home-view-history {
+    width: 100%;
+    padding: 20px;
+    padding-top: 10px;
+    box-sizing: border-box;
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.home-view-container{
+    height: 100%; 
+    align-items: center;
+    width: 100%;
+    overflow: auto;
+}
+
+.home-view-option-wrapper{
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--bg-color-acrylic);
+}
+</style>

src/views/ManageView.vue

@@ -0,0 +1,17 @@
+<template>
+    <div id="container">
+        <router-view>
+
+        </router-view>
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+    #container{
+        height: 100%;
+        width: 100%;
+    }
+</style>

src/views/manage/DisplayView.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="container" style="overflow: auto;">
+        <el-page-header style="margin: 10px;" @back="router.push('/manage');">
+            <template #content>
+                <span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
+            </template>
+            <template #extra>
+                <el-dropdown trigger="click">
+                    <el-button>
+                        操作<v-icon size="20px">mdi-chevron-down</v-icon>
+                    </el-button>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="download"><v-icon
+                                    size="20px">mdi-download</v-icon>下载</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </template>
+        </el-page-header>
+        <div class="colbox" id="main">
+            <div style="flex-grow: 1;" class="card">
+                <el-table :data="table" style="height:calc(100% - 10px);overflow: auto;border-radius: 10px;">
+                    <el-table-column type="index" />
+                    <el-table-column prop="word" label="单词" />
+                    <el-table-column prop="type" label="词性" />
+                    <el-table-column prop="trans" label="翻译" />
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useMainStore } from '@/store';
+import { ElMessage } from 'element-plus';
+import axios from 'axios';
+
+interface WordEntry {
+    word: string;
+    type: string;
+    trans: string;
+}
+
+const table = ref<WordEntry[]>([]);
+const set = ref('');
+const book = ref('');
+const id = ref('');
+const name = ref('default');
+
+const route = useRoute();
+const router = useRouter();
+const store = useMainStore();
+
+const download = () => {
+    store.wordsets.fromArray(table.value, book.value, name.value);
+    ElMessage("下载完毕");
+};
+
+const goBack = () => {
+    router.push('/manage');
+};
+
+onMounted(() => {
+    set.value = route.query.set as string;
+    book.value = route.query.book as string;
+    id.value = route.query.id as string;
+    name.value = (route.query.name as string) || "default";
+
+    if (set.value && book.value && id.value) {
+        axios.get("wordset/detail", {
+            params: {
+                set: set.value,
+                book: book.value,
+                id: id.value
+            }
+        }).then(res => {
+            table.value = res.data;
+        });
+    }
+});
+</script>
+
+<style scoped>
+@media screen and (max-width: 500px) {
+    #main {
+        flex-direction: column;
+        overflow: scroll;
+    }
+
+    .container {
+        padding: 10px;
+        height: calc(100% - 20px);
+    }
+
+    .title {
+        font-size: 25px;
+        min-height: 50px;
+    }
+}
+
+@media screen and (min-width: 500px) {
+    .title {
+        font-size: 35px;
+        min-height: 60px;
+    }
+}
+
+.container {
+    padding: 10px;
+    padding-top: 0;
+}
+
+#main {
+    height: calc(100% - 50px);
+}
+
+.el-table {
+    --el-table-bg-color: #FFFFFF00;
+    --el-table-tr-bg-color: #FFFFFF00;
+}
+</style>

src/views/manage/EditorView.vue

@@ -0,0 +1,361 @@
+<template>
+    <div class="container editor-container">
+        <el-page-header class="editor-header editor-animation-el" @back="router.push('/manage');">
+            <template #content>
+                <span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
+            </template>
+            <template #extra>
+                <el-dropdown trigger="click">
+                    <el-button>
+                        操作<v-icon size="20px">mdi-chevron-down</v-icon>
+                    </el-button>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="del_set"><v-icon size="20px">mdi-delete</v-icon>删除</el-dropdown-item>
+                            <el-dropdown-item @click="addTo"><v-icon
+                                    size="18px">mdi-plus</v-icon>添加到</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </template>
+        </el-page-header>
+        <div class="colbox" id="main">
+            <div class="rowbox">
+                <div class="card editor-animation-el">
+                    <div class="title">添加单词</div>
+                    <el-input ref="input1" autofocus @change="focusnext($refs.input2)"
+                        v-model="new_word.word"></el-input>
+                    <div class="colbox">
+                        <el-text class="mx-1" style="width: 60px;">翻译:</el-text>
+                        <el-input ref="input2" @change="focusnext($refs.input3)" v-model="new_word.trans"></el-input>
+                    </div>
+                    <div class="colbox">
+                        <el-text class="mx-1" style="width: 80px;">词性：</el-text>
+                        <el-select ref="input3" v-model="new_word.type" class="m-2" placeholder="Select">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                :value="item.value" />
+                        </el-select>
+                    </div>
+                    <el-button @click="add_word()" type="primary">添加</el-button>
+                </div>
+                <div class="card editor-animation-el">
+                    <div class="title">更改名称</div>
+                    <div class="colbox">
+                        <el-text class="mx-1" style="width: 60px;">新名称:</el-text>
+                        <el-input v-model="new_name"></el-input>
+                    </div>
+                    <el-button @click="change_name()" type="primary">更改名称</el-button>
+                </div>
+            </div>
+            <div class="card editor-wordlist editor-animation-el">
+                <el-table :data="table" style="height: calc(100% - 10px);overflow: auto;border-radius: 10px;">
+                    <el-table-column type="index" />
+                    <el-table-column prop="word" label="单词" />
+                    <el-table-column prop="type" label="词性" />
+                    <el-table-column prop="trans" label="翻译" />
+                    <el-table-column width="100px" fixed="right" label="操作">
+                        <template #default="scope">
+                            <div style="display: flex;flex-direction: row;justify-content: space-around;">
+                                <v-icon size="14px" class="btn" @click="del_word(scope.$index)">mdi-delete</v-icon>
+                                <v-icon size="14px" class="btn" name='edit-alt'
+                                    @click="edit_word(scope.$index)">mdi-invoice-text-edit</v-icon>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+    </div>
+    <CDialog v-model:visible="word_editing">
+        <template #content>
+            <div class="title">修改单词</div>
+            <el-input v-model="editing_word.word"></el-input>
+            <div class="colbox">
+                <el-text class="mx-1" style="width: 60px;">翻译:</el-text>
+                <el-input v-model="editing_word.trans"></el-input>
+            </div>
+            <div class="colbox">
+                <el-text class="mx-1" style="width: 80px;">词性：</el-text>
+                <el-select v-model="editing_word.type" class="m-2" placeholder="Select">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </div>
+            <el-button @click="save_word" type="primary">更改</el-button>
+        </template>
+    </CDialog>
+    <CDialog v-model:visible="select.visible">
+        <template #content>
+            <el-text class="mx-1 title">选择加入的单词本</el-text>
+            <div class="colbox para">
+                <div class="mid-text">分组:</div>
+                <el-select v-model="select.set_class" class="m-2" placeholder="Select">
+                    <el-option v-for="item in wordsets._allclass" :key="item" :label="item" :value="item" />
+                </el-select>
+            </div>
+            <div class="colbox para">
+                <div class="mid-text">单词本:</div>
+                <el-select v-model="select.id" class="m-2" placeholder="Select">
+                    <el-option v-for="item in wordsets.getClass(select.set_class)" :key="item.id" :label="item.name"
+                        :value="item.id" />
+                </el-select>
+            </div>
+            <el-button @click="select.confirm(select.id)" type="primary">确认</el-button>
+        </template>
+    </CDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useMainStore } from '@/store'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import CDialog from '@/components/UI/CDialog.vue'
+import anime from 'animejs'
+
+const router = useRouter()
+const route = useRoute()
+const store = useMainStore()
+const wordsets = ref(store.wordsets);
+
+const new_word = reactive({
+    word: "",
+    trans: "",
+    type: "adj.",
+})
+
+const editing_word = reactive({
+    word: "",
+    trans: "",
+    type: "adj.",
+    index: 0,
+})
+
+const options = [
+    { label: "adjective(adj.)", value: "adj." },
+    { label: "verb(v.)", value: "v." },
+    { label: "noun(n.)", value: "n." },
+    { label: "adverb(adv.)", value: "adv." },
+    { label: "prepositions(prep.)", value: "prep." },
+    { label: "phrase(phr.)", value: "phr." },
+]
+
+const table = ref<any[]>([])
+const word_editing = ref(false)
+const new_name = ref("")
+const name = ref("")
+const id = ref("")
+const class_name = ref("")
+
+const select = reactive({
+    visible: false,
+    set_class: "",
+    id: "",
+    confirm: (dest_id: string) => { }
+})
+
+const input1 = ref<any>(null)
+const input2 = ref<any>(null)
+const input3 = ref<any>(null)
+
+const focusnext = (node: any) => {
+    node.focus()
+}
+
+const has_word = (word: string) => {
+    for (let i of table.value) {
+        if (i.word === word) return true
+    }
+    return false
+}
+
+const add_word = () => {
+    if (has_word(new_word.word)) {
+        ElMessage({
+            message: `单词 ${new_word.word} 已存在`,
+            type: 'error',
+        })
+        return
+    }
+    table.value.push(Object.assign({}, new_word))
+    wordsets.value.saveSet(id.value, table.value)
+    ElMessage({
+        message: `已添加 ${new_word.word} (${new_word.type})`,
+        type: 'success',
+    })
+    new_word.word = ""
+    new_word.trans = ""
+    input1.value.focus()
+}
+
+const edit_word = (index: number) => {
+    editing_word.word = table.value[index].word
+    editing_word.trans = table.value[index].trans
+    editing_word.type = table.value[index].type
+    editing_word.index = index
+    word_editing.value = true
+}
+
+const save_word = () => {
+    if (editing_word.word != table.value[editing_word.index].word) {
+        if (has_word(editing_word.word)) {
+            ElMessage({
+                message: `单词 ${new_word.word} 已存在`,
+                type: 'error',
+            })
+            return
+        }
+    }
+    table.value[editing_word.index] = {
+        word: editing_word.word,
+        type: editing_word.type,
+        trans: editing_word.trans,
+    }
+    wordsets.value.saveSet(id.value, table.value)
+    ElMessage({
+        message: `已保存更改`,
+        type: 'success',
+    })
+    word_editing.value = false
+}
+
+const change_name = () => {
+    const old_name = name.value
+    name.value = new_name.value
+    wordsets.value.renameSet(class_name.value, id.value, new_name.value)
+    ElMessage({
+        message: `已更改 ${old_name} 为 ${name.value}`,
+        type: 'success',
+    })
+}
+
+const del_word = (index: number) => {
+    const word = table.value[index].word.concat()
+    table.value.splice(index, 1)
+    wordsets.value.saveSet(id.value, table.value)
+    ElMessage({
+        message: `已删除 ${word}`,
+        type: 'warning',
+    })
+}
+
+const del_set = () => {
+    ElMessageBox.confirm("确定要删除吗？")
+        .then(() => {
+            const index = wordsets.value.getId(class_name.value, id.value)
+            if (index) {
+                wordsets.value.delSet(class_name.value, index)
+                ElMessage(`已经删除 ${class_name.value} ${id.value}`)
+                router.push("/manage")
+            }
+        })
+}
+
+const addTo = () => {
+    select.visible = true
+    select.confirm = (dest_id: string) => {
+        if (id.value) {
+            if (id.value != dest_id) {
+                const failed = wordsets.value.addSetTo(id.value, dest_id)
+                ElMessage(`已经添加到 ${dest_id}, 已经去除 ${failed} 个重复单词`)
+            } else {
+                ElMessage(`请选择一个不同的单词本`)
+            }
+        }
+        select.visible = false
+    }
+}
+
+onMounted(() => {
+    class_name.value = route.query.classname as string
+    id.value = route.query.id as string
+    if (id.value) {
+        const status = wordsets.value.getSetStatus(class_name.value, id.value)
+        if (status) {
+            name.value = status.name
+        }
+        table.value = wordsets.value.getSet(id.value)
+    }
+    anime({
+        targets: '.editor-animation-el',
+        translateY: [-50, 0],
+        opacity: [0, 1],
+        delay: anime.stagger(50),
+    });
+})
+</script>
+
+<style>
+.editor-container{
+    height: 100%;
+    width: 100%;
+    padding: 10px;
+    overflow: hidden;
+    padding-top: 0;
+    box-sizing: border-box;
+}
+.editor-wordlist{
+    flex-grow: 1;
+    height: calc(100% - 60px);
+}
+.editor-header{
+    margin: 10px;
+}
+</style>
+
+<style scoped>
+@media screen and (max-width: 500px) {
+    #main {
+        flex-direction: column;
+        overflow: scroll;
+    }
+
+    .title {
+        font-size: 25px;
+        min-height: 50px;
+    }
+}
+
+@media screen and (min-width: 500px) {
+    .title {
+        font-size: 35px;
+        min-height: 60px;
+    }
+}
+
+#main {
+    height: 100%;
+}
+
+#main-container {
+    height: 100%;
+}
+
+.title {
+    font-weight: 800;
+    color: var(--text-color);
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+.card div {
+    margin-bottom: 10px;
+}
+
+#new div {
+    margin-bottom: 20px;
+}
+
+#sets-container {
+    background-color: var(--bg-color);
+    padding: 5px;
+    border-radius: 8px;
+}
+
+.el-table {
+    --el-table-bg-color: #FFFFFF00;
+    --el-table-tr-bg-color: #FFFFFF00;
+}
+</style>

src/views/manage/NewSetView.vue

@@ -0,0 +1,85 @@
+<template>
+    <el-page-header class="new-set-header new-set-animation-el"@back="$router.push('/manage')">
+        <template #content>
+            <span class="text-large font-600 mr-3"> 新建单词本 </span>
+        </template>
+    </el-page-header>
+    <el-container id="main-container" class="container card new-set-animation-el">
+        <div style="overflow: auto;">
+            <div class="colbox">
+                <div class="mid-text">名称:</div>
+                <el-input v-model="set_name"></el-input>
+                <div class="mid-text">分组:</div>
+                <el-select allow-create filterable default-first-option v-model="new_set_class" class="m-2" placeholder="输入新单词本类后后请按回车">
+                    <el-option v-for="item in store.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>
+        </div>
+    </el-container>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useMainStore } from '@/store'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import anime from 'animejs'
+
+const store = useMainStore()
+const router = useRouter()
+
+const set_name = ref("")
+const new_set_class = ref("")
+
+const new_wordset = () => {
+    if (!new_set_class.value) {
+        ElMessage({
+            message: "集合不能为空",
+            type: "error"
+        })
+        return
+    }
+    store.wordsets.addSet(new_set_class.value, set_name.value)
+    router.push('/manage')
+}
+
+onMounted(() => {
+    anime({
+        targets: '.new-set-animation-el',
+        translateY: [-50, 0],
+        opacity: [0, 1],
+    })
+})
+</script>
+
+<style>
+.new-set-header {
+    margin: 20px;
+}
+</style>
+
+<style scoped>
+@media screen and (max-width: 500px) {
+    .colbox {
+        flex-direction: column;
+    }
+
+    .colbox * {
+        margin-top: 15px;
+    }
+
+    .card {
+        box-shadow: none;
+    }
+}
+
+#main-container {
+    height: calc(100% - 80px);
+    width: calc(100% - 20px);
+}
+
+.colbox {
+    margin-top: 20px;
+}
+</style>

src/views/manage/SetListView.vue

@@ -0,0 +1,508 @@
+<template>
+    <el-container id="main-container">
+        <el-header class="list-view-header" style="">
+            <el-page-header style="margin: 10px;" @back="router.push('/');">
+                <template #content>
+                    <span class="text-large font-600 mr-3"> 编辑单词本 </span>
+                </template>
+                <template #extra>
+                    <div class="colbox">
+                        <el-button @click="$router.push('/manage/new')"
+                            type="success"><v-icon>mdi-plus</v-icon>新建单词本</el-button>
+                        <div class="pconly">
+                            <el-dropdown trigger="click" style="margin-left: 20px;">
+                                <el-button type="primary">
+                                    更多<v-icon size="20px">mdi-chevron-down</v-icon>
+                                </el-button>
+                                <template #dropdown>
+                                    <el-dropdown-menu>
+                                        <el-dropdown-item @click="manage_online_wordsets"><v-icon
+                                                size="20px">mdi-earth</v-icon>管理在线单词本</el-dropdown-item>
+                                        <el-dropdown-item @click="export_set"><v-icon
+                                                size="18px">mdi-export</v-icon>导出</el-dropdown-item>
+                                        <el-dropdown-item @click="import_set"><v-icon color="white" name=''
+                                                size="18px">mdi-import</v-icon>导入</el-dropdown-item>
+                                    </el-dropdown-menu>
+                                </template>
+                            </el-dropdown>
+                        </div>
+                    </div>
+                </template>
+            </el-page-header>
+        </el-header>
+        <el-container style="height:calc(100% - 60px);position: relative;">
+            <el-aside class="list-view-aside">
+                <div id="sidebar" class="sidebar-hidden">
+                    <div id="sidebar-content">
+                        <div class="sidebar-title">
+                            |本地
+                        </div>
+                        <div v-for="class_name in store.wordsets._allclass" :title="class_name" :key="class_name"
+                            @click="view(class_name)" class="sidebar-item">
+                            {{ class_name }}
+                        </div>
+                        <div class="sidebar-title">
+                            |在线
+                        </div>
+                        <div v-for="set in Object.keys(online_wordsets)" :key="set">
+                            <div v-for="(set_class, class_name) in online_wordsets[set]" :title="String(class_name)"
+                                :key="class_name" @click="view_online(set, String(class_name))" class="sidebar-item">
+                                {{ class_name }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
+                        <v-icon>mdi-format-list-bulleted</v-icon>
+                    </div>
+                </div>
+            </el-aside>
+            <el-main id="wordsets-container">
+                <div id="sets-container">
+                    <div v-if="mode === 0" class="colbox wordclass">
+                        <div v-for="(wordset, index) in store.wordsets.getClass(view_wordsets)" :key="index"
+                            class="wordset rowbox">
+                            <div class="no">
+                                {{ index + 1 }}
+                            </div>
+                            <div class="title">
+                                {{ wordset.name }}
+                            </div>
+                            <div class="created-date">
+                                创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
+                            </div>
+                            <div class="option">
+                                <v-icon class="btn" @click="edit(wordset.id)">mdi-book-edit</v-icon>
+                                <v-icon class="btn" @click="del(view_wordsets, wordset.id, index)">mdi-delete</v-icon>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-if="mode === 1" class="colbox wordclass">
+                        <div v-for="(wordset, index) in online_wordsets[viewing.set][viewing.book]" :key="index"
+                            class="wordset rowbox">
+                            <div class="title">
+                                {{ wordset.name }}
+                            </div>
+                            <div class="created-date">
+                                创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
+                            </div>
+                            <div class="option">
+                                <v-icon class="btn" @click="show(String(index), wordset.name)">mdi-eye</v-icon>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, nextTick } from 'vue';
+import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
+import { useRouter } from 'vue-router';
+import { useMainStore } from '@/store';
+import axios from 'axios';
+import anime from 'animejs';
+
+interface WordSet {
+    id: string;
+    name: string;
+    created: number;
+}
+
+interface OnlineWordSets {
+    [set: string]: {
+        [book: string]: {
+            [id: string]: WordSet
+        }
+    }
+}
+
+const router = useRouter();
+const store = useMainStore();
+
+// Convert data properties to refs/reactive
+const view_wordsets = ref<string>("");
+const viewing = reactive<{
+    set: string;
+    book: string;
+}>({
+    set: "",
+    book: "",
+});
+const online_wordsets = ref<OnlineWordSets>({});
+const mode = ref<number>(0);
+
+// Convert methods to functions
+const view = (classname: string): void => {
+    mode.value = 0;
+    view_wordsets.value = classname;
+    close_sidebar();
+    nextTick(() => {
+        anime({
+            targets: ".wordset",
+            translateY: [-50, 0],
+            opacity: [0, 1],
+            delay: anime.stagger(50, { grid: [6, 6] })
+        })
+    })
+};
+
+const view_online = (set_name: string, class_name: string): void => {
+    mode.value = 1;
+    viewing.set = set_name;
+    viewing.book = class_name;
+    close_sidebar();
+    nextTick(() => {
+        anime({
+            targets: ".wordset",
+            translateY: [-50, 0],
+            opacity: [0, 1],
+            delay: anime.stagger(50, { grid: [6, 6] })
+        })
+    })
+};
+
+const manage_online_wordsets = (): void => {
+    window.location.href = '/dashboard';
+};
+
+const del = (class_name: string, id: string, index: number): void => {
+    ElMessageBox.confirm("确定要删除吗？")
+        .then(() => {
+            store.wordsets.delSet(class_name, index);
+            ElMessage(`已经删除 ${class_name} ${id}`);
+        });
+};
+
+const edit = (id: string): void => {
+    router.push({
+        path: "./manage/edit",
+        query: { id, classname: view_wordsets.value }
+    });
+};
+
+const show = (id: string, name: string): void => {
+    router.push({
+        path: "./manage/show",
+        query: { set: viewing.set, book: viewing.book, id, name }
+    });
+};
+
+const export_set = async (): Promise<void> => {
+    store.wordsets.export_set((cnt: number) => {
+        ElNotification({
+            type: "success",
+            title: "导出成功",
+            message: `已导出 ${cnt} 本单词本`
+        });
+    });
+};
+
+const import_set = async (): Promise<void> => {
+    store.wordsets.import_set((cnt: number) => {
+        ElNotification({
+            type: "success",
+            title: "添加成功",
+            message: `已添加 ${cnt} 本单词本`
+        });
+    });
+};
+
+const taggle_sidebar = (): void => {
+    let node = document.getElementById("sidebar");
+    let class_name = "sidebar-hidden";
+    if (node) {
+        if (node.classList.contains(class_name)) {
+            node.classList.remove(class_name);
+        }
+    }
+};
+
+const close_sidebar = (): void => {
+    let node = document.getElementById("sidebar");
+    let class_name = "sidebar-hidden";
+    if (node) {
+        if (!node.classList.contains(class_name)) {
+            node.classList.add(class_name);
+        }
+    }
+};
+
+// Convert created lifecycle hook to onMounted
+onMounted(() => {
+    anime({
+        targets: ".list-view-header",
+        translateY: [-50, 0],
+        opacity: [0, 1],
+    });
+    anime({
+        targets: ".list-view-aside",
+        translateX: [-50, 0],
+        opacity: [0, 1],
+    });
+    let first_set = store.wordsets._firstClass;
+    if (first_set) {
+        view(first_set);
+    }
+
+    axios.get<OnlineWordSets>("wordset/list").then(
+        (res) => {
+            online_wordsets.value = res.data;
+        }
+    );
+});
+</script>
+
+<style>
+@media screen and (max-width: 500px) {
+    .list-view-header {
+        height: 60px;
+    }
+
+    .list-view-aside {
+        width: 0;
+        position: relative;
+    }
+}
+
+@media screen and (min-width: 500px) {
+    .list-view-header {
+        height: 60px;
+    }
+
+    .list-view-aside {
+        width: 180px;
+    }
+}
+
+.list-view-aside {
+    z-index: 1000;
+}
+
+.list-view-header {
+    justify-content: space-between;
+    animation: enter ease-out .6s backwards;
+}
+</style>
+
+<style scoped>
+@media screen and (max-width: 500px) {
+    #sidebar {
+        position: absolute;
+        width: 180px;
+        margin-top: 20px;
+        transition: .5s;
+    }
+
+    .sidebar-hidden {
+        transform: translate(-100%, 0);
+    }
+
+    .wordset {
+        border-radius: 13px;
+        padding: 10px;
+        height: 180px;
+        width: 40%;
+        margin: 5px;
+    }
+
+    .no {
+        font-size: 14px;
+        font-weight: 700;
+    }
+
+    .title {
+        font-weight: 800;
+        color: var(--text-color);
+        font-size: 30px;
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-height: 60px;
+    }
+
+    .created-date {
+        font-size: 12px;
+        font-weight: 200;
+        height: 45px;
+    }
+
+    .wordset .option {
+        opacity: 1;
+    }
+
+    #show-sidebar {
+        position: absolute;
+        display: none;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border-radius: 100%;
+        width: 40px;
+        height: 40px;
+        bottom: 0;
+        right: -50px;
+        color: var(--text-color);
+        box-shadow: var(--el-box-shadow);
+        background-color: var(--bg-color);
+        cursor: pointer;
+        backdrop-filter: blur(10px);
+    }
+
+    .sidebar-hidden #show-sidebar {
+        display: flex;
+    }
+
+    #wordsets-container {
+        width: 100%;
+        box-sizing: border-box;
+        display: flex;
+        transition: .5s;
+    }
+
+    #sets-container {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 500px) {
+    #sidebar {
+        width: 180px;
+        padding-left: 10px;
+        margin: 10px;
+    }
+
+    .wordset {
+        border-radius: 13px;
+        padding: 20px;
+        height: 230px;
+        width: 170px;
+        margin: 20px;
+    }
+
+    .no {
+        font-size: 20px;
+        font-weight: 700;
+    }
+
+    .title {
+        font-weight: 800;
+        color: var(--text-color);
+        font-size: 35px;
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-height: 60px;
+    }
+
+    .created-date {
+        font-size: 17px;
+        font-weight: 200;
+    }
+
+    .wordset:hover .option {
+        opacity: 1;
+    }
+}
+
+.wordset {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    border: solid 1px var(--bd-color);
+    opacity: 0;
+}
+
+.wordset:hover {
+    box-shadow: var(--el-box-shadow);
+}
+
+#sidebar {
+    background-color: var(--bg-color-solid);
+    border-radius: 5px;
+    height: calc(100% - 20px);
+    box-sizing: border-box;
+    border: 1px solid var(--bd-color);
+    transition: .5s;
+}
+
+#sidebar-content {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.sidebar-title {
+    width: 100%;
+    font-size: 25px;
+    line-height: 60px;
+    padding-left: 5px;
+    font-weight: 800;
+    letter-spacing: 3px;
+}
+
+html.bgimged #sidebar {
+    backdrop-filter: blur(10px);
+}
+
+html.bgimged .wordset {
+    backdrop-filter: blur(10px);
+}
+
+.sidebar-item {
+    margin-left: 10px;
+    width: 100%;
+    font-size: 20px;
+    line-height: 50px;
+    padding-left: 5px;
+    cursor: pointer;
+    transition: .5s;
+}
+
+.sidebar-item:hover {
+    background-color: #00000033;
+}
+
+.option {
+    display: flex;
+    justify-content: space-around;
+    opacity: 0;
+    transition: .5s;
+    margin: 10px;
+}
+
+#wordsets-container {
+    overflow-x: auto;
+    height: 100%;
+    box-sizing: border-box;
+    padding-bottom: 20px;
+    position: relative;
+    z-index: 1;
+}
+
+#main-container {
+    height: 100%;
+    width: 100%;
+}
+
+.wordclass {
+    flex-wrap: wrap
+}
+
+.card div {
+    margin-bottom: 10px;
+}
+
+.el-collapse {
+    --el-collapse-header-bg-color: #FFFFFF00;
+    --el-collapse-content-bg-color: #FFFFFF00;
+    --el-collapse-header-font-size: 18px;
+}
+
+.el-aside {
+    overflow: visible;
+}
+</style>

src/views/post/AboutView.vue

@@ -0,0 +1,43 @@
+<template>
+    <div id="wrapper" class="rowbox container">
+        <Post class="markdown" id="post"/>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Post from '@/md/about.md';
+import '@/styles/markdown.css';
+import anime from 'animejs';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+    anime({
+        targets: '#post',
+        translateY: [-50, 0],
+        opacity: [0, 1],
+    });
+});
+</script>
+
+<style scoped>
+#post {
+    height:auto;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    padding-top:0;
+    padding:30px;
+    border-radius:10px;
+    width: 80%;
+    border:solid 1px var(--bd-color);
+    color:var(--text-color);
+}
+
+#wrapper {
+    height: 100%;
+    box-sizing: border-box;
+    padding-bottom: 20px;
+    width: 100%;
+    align-items: center;
+    overflow: auto;
+}
+</style>

src/views/post/ManualView.vue

@@ -0,0 +1,43 @@
+<template>
+    <div id="wrapper" class="rowbox container">
+        <Post class="markdown" id="post"/>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Post from '@/md/manual.md';
+import '@/styles/markdown.css';
+import anime from 'animejs';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+    anime({
+        targets: '#post',
+        translateY: [-50, 0],
+        opacity: [0, 1],
+    });
+});
+</script>
+
+<style scoped>
+#post {
+    height:auto;
+    margin-top: 20px;
+    margin-bottom:20px;
+    padding-top:0;
+    padding:30px;
+    border-radius:10px;
+    width: 80%;
+    border:solid 1px var(--bd-color);
+    color:var(--text-color);
+}
+
+#wrapper {
+    height: 100%;
+    box-sizing: border-box;
+    padding-bottom: 20px;
+    width: 100%;
+    align-items: center;
+    overflow: auto;
+}
+</style>

src/views/recite/ReciteView.vue

@@ -0,0 +1,454 @@
+<template>
+    <div>
+        <el-page-header class="recite-view-header recite-view-animation-el"  @back="$router.push('/')">
+            <template #content>
+                <span class="text-large font-600 mr-3"> 背诵 </span>
+            </template>
+        </el-page-header>
+        <div id="test" class="colbox">
+            <div style="flex-grow: 1;" class="card recite-view-animation-el">
+                <div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
+                <div>
+                    <textarea autofocus id="input" ref="inputAreaRef" v-if="current === answered" @input="change"
+                        class="answer" spellcheck="false">
+            </textarea>
+                    <div v-if="current < answered" class="answer">{{ word.word }}</div>
+                </div>
+                <div id="explain">
+                    <el-button v-if="current > 0" @click="prev">上一个</el-button>
+                    <el-button v-if="current < answered" @click="next">下一个</el-button>
+                    <el-button v-if="current === answered" @click="showAnswer">显示答案</el-button>
+                    <el-button v-if="current === answered" type="warning" @click="skip">跳过</el-button>
+                    <el-button @click="terminate" type="danger">停止背诵</el-button>
+                    <v-icon style="margin-left: 10px;translate: 0 4px;"
+                        @click="audio_play">mdi-volume-high</v-icon>
+                </div>
+                <div id="trans">{{ word.type }} {{ word.trans }}</div>
+            </div>
+            <div id="add-to-box" class="card recite-view-animation-el">
+                <el-text class="mx-1 title">加入至</el-text>
+                <div class="colbox para">
+                    <div class="mid-text">分组:</div>
+                    <el-select v-model="set_class" class="m-2" placeholder="Select">
+                        <el-option v-for="item in wordsets._allclass" :key="item" :label="item" :value="item" />
+                    </el-select>
+                </div>
+                <div class="colbox para">
+                    <div class="mid-text">单词本:</div>
+                    <el-select v-model="set_id" class="m-2" placeholder="Select">
+                        <el-option v-for="item in wordsets.getClass(set_class)" :key="item.id" :label="item.name"
+                            :value="item.id" />
+                    </el-select>
+                </div>
+                <el-button @click="add_to" type="primary">添加</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
+import { useMainStore } from '@/store';
+import { WordItem } from '@/types';
+import anime from 'animejs';
+
+const router = useRouter();
+const route = useRoute();
+const store = useMainStore();
+
+interface Settings {
+    direct_answer: boolean;
+}
+
+const wordsets = ref(store.wordsets)
+const testWords = ref<WordItem[]>([]);
+const seq = ref<number[]>([]);
+const total = ref(0);
+const current = ref(0);
+const answered = ref(0);
+const word = ref<WordItem>({} as WordItem);
+const set_class = ref("");
+const set_id = ref("");
+const settings = ref<Settings>({
+    direct_answer: false,
+});
+const inputAreaRef = ref<HTMLTextAreaElement | null>(null)
+
+const key_listener = (event: KeyboardEvent) => {
+    let ctrlKey = event.ctrlKey || event.metaKey;
+    if (ctrlKey) {
+        switch (event.key) {
+            case 'b':
+                showAnswer();
+                break;
+            case 'm':
+                skip();
+                break;
+            case 'i':
+                add_to();
+                break;
+            case 'ArrowLeft':
+                prev();
+                break;
+            case 'ArrowRight':
+                next();
+                break;
+            case 'y':
+                audio_play();
+                break;
+            default:
+                return;
+        }
+    }
+    event.preventDefault();
+};
+
+const next = () => {
+    if (current.value < answered.value) {
+        current.value++;
+        if (current.value === total.value) {
+            ElNotification({
+                message: "您已完成所有单词的背诵",
+                title: "Congratulations!",
+                type: "success"
+            });
+            router.push('/');
+            return;
+        }
+        nextTick(() => {
+            show();
+        });
+    } else {
+        ElMessage({
+            type: "error",
+            message: "您还未答过该词,跳过请使用ctrl+M",
+        });
+    }
+};
+
+const skip = () => {
+    ElMessage({
+        message: "已经跳过该词",
+        type: "info"
+    });
+    answered.value++;
+    store.history.count(answered.value);
+    next();
+};
+
+const prev = () => {
+    if (current.value > 0) {
+        current.value--;
+        show();
+    } else {
+        ElMessage({
+            type: 'error',
+            message: "已经是第一个单词"
+        });
+    }
+};
+
+const showAnswer = () => {
+    if (!settings.value.direct_answer) {
+        if (inputAreaRef.value) {
+            const inputArea = inputAreaRef.value;
+            if (inputArea.value === "_".repeat(word.value.word.length)) {
+                inputArea.value = word.value.word[0] + "_".repeat(word.value.word.length - 1);
+                inputArea.setSelectionRange(1, 1);
+                ElMessage(`首字母为：${word.value.word[0]}`);
+                return;
+            }
+        }
+    }
+    ElMessage(`答案：${word.value.word}`);
+};
+
+const show = () => {
+    word.value = testWords.value[seq.value[current.value]];
+    if (current.value === answered.value) {
+        if (inputAreaRef.value) {
+            const inputArea = inputAreaRef.value;
+            inputArea.value = "_".repeat(word.value.word.length);
+            inputArea.setSelectionRange(0, 0);
+            inputArea.style.height = "0";
+            setTimeout(() => {
+                inputArea.style.height = `${inputArea.scrollHeight}px`;
+            }, 200);
+        }
+    }
+};
+
+const change = () => {
+    if (inputAreaRef.value) {
+        const inputArea = inputAreaRef.value;
+        const cur = inputArea.selectionStart;
+        const value = inputArea.value;
+        const n = value.indexOf("_");
+        let content: string;
+
+        if (n == word.value.word.length) {
+            if (value.substring(0, value.length - 1).toLowerCase() == word.value.word.toLowerCase()) {
+                ElMessage.success("正确");
+                answered.value++;
+                store.history.count(answered.value);
+                next();
+                return;
+            }
+            ElMessage.error("错误");
+            content = "_".repeat(word.value.word.length);
+            inputArea.value = content;
+            inputArea.setSelectionRange(0, 0);
+            inputArea.style.height = "0";
+            setTimeout(() => {
+                inputArea.style.height = `${inputArea.scrollHeight}px`;
+            }, 200);
+            return;
+        } else {
+            n == -1 ? content = "_".repeat(word.value.word.length) : (content = value.substring(0, n),
+                content += "_".repeat(word.value.word.length - n));
+            inputArea.value = content;
+            if (cur && cur > n) {
+                inputArea.setSelectionRange(n, n);
+            } else if (cur !== null) {
+                inputArea.setSelectionRange(cur, cur);
+            }
+        }
+        setTimeout(() => {
+            const height = parseInt(inputArea.style.height || '0');
+            if (height < inputArea.scrollHeight) {
+                inputArea.style.height = `${inputArea.scrollHeight}px`;
+            }
+        }, 0);
+        inputArea.focus();
+    }
+
+};
+
+const audio_play = () => {
+    const t = new Audio("https://dict.youdao.com/dictvoice?audio=" + word.value.word);
+    t.play();
+};
+
+const terminate = () => {
+    ElMessageBox.confirm("确定要终止吗？")
+        .then(() => {
+            router.push('/');
+            ElNotification({
+                message: "背诵已终止",
+                type: "info",
+                title: "Terminate"
+            });
+        });
+};
+
+const add_to = () => {
+    if (set_id.value) {
+        const data = JSON.parse(localStorage.getItem(set_id.value) || '[]');
+        for (let i of data) {
+            if (i.word === word.value.word) {
+                ElMessage({
+                    message: '已经添加过该词',
+                    type: 'error',
+                });
+                return;
+            }
+        }
+        data.push(word.value);
+        localStorage.setItem(set_id.value, JSON.stringify(data));
+        ElMessage({
+            message: `已添加 ${word.value.word} (${word.value.type})`,
+            type: 'success',
+        });
+    } else {
+        ElMessage({
+            message: '请先选择单词本',
+            type: 'error',
+        });
+    }
+};
+
+onMounted(() => {
+    document.addEventListener('keyup', key_listener);
+    const index = route.query.index;
+    if (index) {
+        store.history.use(Number(index));
+    }
+
+    store.history.init_recite((words: WordItem[], currentVal: number, seqVal: number[], settingsVal: Settings) => {
+        testWords.value = words;
+        current.value = currentVal;
+        total.value = words.length;
+        answered.value = currentVal;
+        settings.value = settingsVal;
+        seq.value = seqVal;
+
+        if (answered.value >= total.value) {
+            answered.value = 0;
+            current.value = 0;
+            ElMessage({
+                type: 'warning',
+                message: "进度已经重置"
+            });
+            store.history.count(answered.value);
+        }
+
+        nextTick(() => {
+            show();
+        });
+    }, (msg: string) => {
+        ElMessage({
+            type: 'error',
+            message: msg
+        });
+        router.push('/select');
+    });
+    anime({
+        targets: '.recite-view-animation-el',
+        translateY: [-50, 0],
+        opacity: [0, 1],
+        delay: anime.stagger(50),
+    });
+});
+
+onBeforeUnmount(() => {
+    document.removeEventListener("keyup", key_listener);
+});
+</script>
+
+<style>
+.recite-view-header {
+    margin-top:20px;
+    margin-left:20px
+}
+</style>
+
+<style scoped>
+@media screen and (max-width: 500px) {
+
+    .title {
+        font-size: 30px;
+        font-weight: 800;
+        color: var(--text-color);
+    }
+
+    #test {
+        flex-direction: column;
+        animation: enter .5s ease-out;
+    }
+
+    #trans {
+        font-size: 25px;
+        transition: .5s;
+        margin-top: 15px;
+    }
+
+    #explain {
+        font-size: 18px;
+        margin-top: 15px;
+    }
+
+    .el-button {
+        width: 55px;
+        height: 28px;
+        font-size: 12px;
+    }
+
+    .tbtn {
+        width: 100%;
+    }
+
+    .answer {
+        font-size: 55px;
+        letter-spacing: 15px;
+        min-height: 50px;
+    }
+
+    .card {
+        box-shadow: none;
+    }
+
+    .checkbox {
+        font-size: 30px;
+        margin-bottom: 10px;
+        margin-right: 15px;
+    }
+}
+
+@media screen and (min-width: 500px) {
+    .item {
+        margin-bottom: 20px;
+        /* background-color: var(--bg-color); */
+        width: 50%;
+    }
+
+    .tbtn {
+        width: 50%;
+    }
+
+    .title {
+        font-size: 35px;
+        font-weight: 800;
+        color: var(--text-color);
+    }
+
+    #test {
+        padding: 30px;
+        animation: enter .5s ease-out;
+    }
+
+    #trans {
+        font-size: 43px;
+        transition: .5s;
+        margin-top: 10px;
+    }
+
+    #add-to-box {
+        width: 30%;
+        min-width: 200px;
+    }
+
+    #explain {
+        font-size: 25px;
+        margin-top: 20px;
+    }
+
+    .answer {
+        font-size: 70px;
+        letter-spacing: 25px;
+        min-height: 100px;
+    }
+
+    .checkbox {
+        font-size: 30px;
+        margin-bottom: 10px;
+    }
+}
+
+.wrapper {
+    height: calc(100% - 10px);
+}
+
+.container {
+    padding: 10px;
+    height: calc(100% - 50px);
+}
+
+#status {
+    font-size: 20px;
+}
+
+.answer {
+    margin-top: 10px;
+    border-radius: 8px;
+    background-color: var(--bg-color);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    border: none;
+    outline-style: none;
+    padding: 0;
+    transition: .5s;
+    resize: vertical;
+    width: 100%;
+}
+</style>

src/views/recite/SelectView.vue

@@ -0,0 +1,358 @@
+<template>
+    <div class="container" id="page">
+        <el-page-header class="recite-select-animation-el recite-select-header" @back="router.push('/');">
+            <template #content>
+                <span class="text-large font-600 mr-3">开始新背诵</span>
+            </template>
+        </el-page-header>
+        <el-steps class="recite-select-animation-el" style="width: 100%;" align-center :active="step">
+            <el-step title="选择单词本" description="选择在线或本地单词本以开始背诵"></el-step>
+            <el-step title="自定义背诵" description="您可以在此处更改背诵设置"></el-step>
+        </el-steps>
+        <div id="main" class="card recite-select-animation-el">
+            <div class="item" id="select-area" v-show="step === 1">
+                <el-tabs style="height: calc(100% - 40px);position: relative;overflow: hidden;">
+                    <el-tab-pane label="本地">
+                        <el-checkbox v-model="local.checkAll" :indeterminate="local.isIndeterminate"
+                            @change="(res: 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 class="mb-4 mt-2">{{ set_class_name }}</p>
+                                <el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id"
+                                    size="large" border>
+                                    <div style="font-size: 18px;font-weight: 500;">
+                                        {{ set.name }}
+                                    </div>
+                                </el-checkbox>
+                            </div>
+                        </el-checkbox-group>
+                    </el-tab-pane>
+                    <el-tab-pane label="在线">
+                        <el-checkbox v-model="online.checkAll" :indeterminate="online.isIndeterminate"
+                            @change="(res: boolean) => { handleCheckAllChange(online, res) }" size="large">全选</el-checkbox>
+                        <el-checkbox-group v-model="online.checkedSets"
+                            @change="(res: string[]) => { handleChange(online, res) }">
+                            <div class="set_radios" v-for="(set, set_name) in online_sets" :key="set_name">
+                                <div class="subtitle">{{ set_name }}</div>
+                                <div v-for="(book, book_name) in set" :key="book_name">
+                                    <p class="mb-4 mt-2">{{ book_name }}</p>
+                                    <el-checkbox class="checkbox" v-for="(config, id) in book" :key="id" :label="id"
+                                        size="large" border>
+                                        <div style="font-size: 18px;font-weight: 500;">
+                                            {{ config.name }}
+                                        </div>
+                                    </el-checkbox>
+                                </div>
+                            </div>
+                        </el-checkbox-group>
+                    </el-tab-pane>
+                </el-tabs>
+                <el-button style="position: absolute;margin-top: 10px;right: 30px;" type="primary"
+                    @click="completeSelect">下一步</el-button>
+            </div>
+            <div class="item" id="setting-area" v-show="step === 2">
+                <div style="margin: 20px;">
+                    <div class="setting-item">
+                        <div class="setting-header">
+                            <div style="font-size: 20px;">随机顺序</div>
+                            <div style="font-size: 14px;">开启后单词顺序将打乱</div>
+                        </div>
+                        <el-switch @change="update" v-model="settings.shuffle" active-color="#13ce66"></el-switch>
+                    </div>
+                    <div class="setting-item">
+                        <div class="setting-header">
+                            <div style="font-size: 20px;">直接显示答案</div>
+                            <div style="font-size: 14px;">开启后答案提示不会先提示首字母</div>
+                        </div>
+                        <el-switch @change="update" v-model="settings.direct_answer" active-color="#13ce66"></el-switch>
+                    </div>
+                    <div class="setting-item">
+                        <div class="setting-header">
+                            <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>
+                    </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"
+                        @click="startRecite">下一步</el-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { useRouter } from 'vue-router';
+import { useMainStore } from '@/store';
+import axios from '@/scripts/request';
+import anime from 'animejs';
+
+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);
+        }
+    }
+    axios.get("wordset/list").then((res: any) => {
+        online_sets.value = res.data;
+        for (let i in online_sets.value) {
+            for (let j in online_sets.value[i]) {
+                for (let k in online_sets.value[i][j]) {
+                    online.allsets.push(k);
+                    online_ids.value[k] = {
+                        set: i,
+                        book: j
+                    };
+                }
+            }
+        }
+    }).catch(()=> {
+        ElMessage({
+            message: "在线词库加载失败",
+            type: "error"
+        });
+    });
+    anime({
+        targets: ".recite-select-animation-el",
+        translateY: [-50, 0],
+        opacity: [0, 1],
+        delay: anime.stagger(50),
+    })
+});
+</script>
+
+<style scoped>
+@media screen and (max-width: 500px) {
+    .checkbox {
+        font-size: 30px;
+        margin-bottom: 10px;
+        margin-right: 15px;
+    }
+}
+
+@media screen and (min-width: 500px) {
+    .checkbox {
+        font-size: 30px;
+        margin-bottom: 10px;
+    }
+}
+
+#page {
+    width: 100%;
+    /* margin: 20px; */
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.subtitle {
+    font-size: 23px;
+    line-height: 35px;
+    margin-bottom: 15px;
+    font-weight: 800;
+}
+
+.set_radios {
+    margin: 10px;
+}
+
+.set_radios p {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-color);
+}
+
+#main {
+    margin-top: 10px;
+    height: calc(100% - 60px);
+    width: 90%;
+    overflow: hidden;
+}
+
+.item {
+    height: 100%;
+    position: relative;
+}
+
+.el-tab-pane {
+    height: 100%;
+    overflow: auto;
+}
+
+.setting-header {
+    min-width: 25%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: self-start;
+}
+
+.setting-item {
+    margin-bottom: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 40px;
+    align-items: center;
+}
+</style>
+
+<style>
+.el-tabs__content {
+    height: calc(100% - 50px);
+}
+
+.recite-select-header {
+    width: calc(100% - 30px);
+    margin-left: 30px;
+    margin-top: 15px;
+}
+
+@keyframes exitLeft {
+    0% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateX(-50px);
+    }
+}
+
+@keyframes exitRight {
+    0% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateX(50px);
+    }
+}
+
+@keyframes enterLeft {
+    0% {
+        opacity: 0;
+        transform: translateX(-50px);
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes enterRight {
+    0% {
+        opacity: 0;
+        transform: translateX(50px);
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+</style>

tsconfig.app.json

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

tsconfig.json

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

tsconfig.node.json

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

vite.config.ts

@@ -0,0 +1,55 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import vuetify from 'vite-plugin-vuetify';
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import Markdown from 'unplugin-vue-markdown/vite'
+
+const now = new Date();
+const buildTime = now.toLocaleString('zh-CN');
+
+export default defineConfig({
+  base: './',
+  build: {
+    outDir: 'page',
+  },
+  define: {
+    __BUILD_TIME__: JSON.stringify(buildTime),
+    __APP_VERSION__: JSON.stringify('1.03 beta1')
+  },
+  plugins: [
+    vue({
+      include: [ /\.vue$/,/\.md$/],
+    }),
+    vuetify({
+      autoImport: true,
+    }),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Markdown({})
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '~/': resolve(__dirname, './src/'),
+    },
+  },
+  server: {
+    proxy: {
+      '/wordset': {
+        target: 'https://app.cast1e.top/wordin',
+        changeOrigin: true,
+      },
+      '/upload': {
+        target: 'https://app.cast1e.top/wordin',
+        changeOrigin: true,
+      },
+    },
+  },
+});

vue.config.js

@@ -1,8 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-  transpileDependencies: true,
-  publicPath:"./",
-  devServer: {
-    proxy: 'http://localhost:3000'
-  }
-})