save

src/App.vue

@@ -3,7 +3,7 @@
 import {onMounted, watch} from "vue";
 import {BaseState, useBaseStore} from "@/stores/base.ts";
 import {DictType, SaveConfig, SaveDict} from "@/types.ts"
-import Practice from "@/components/Practice/index.vue"
+import Practice from "@/pages/practice/index.vue"
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {cloneDeep} from "lodash-es";
@@ -65,9 +65,7 @@ onMounted(() => {
 
 <template>
   <Backgorund/>
-  <div class="main-page anim">
-    <Practice/>
-  </div>
+  <router-view/>
 </template>
 
 <style scoped lang="scss">

src/main.ts

@@ -7,6 +7,7 @@ import {createPinia} from "pinia"
 import VirtualList from 'vue-virtual-list-v3';
 import ZH from "@/locales/zh-CN.ts";
 import {createI18n} from 'vue-i18n'
+import router from "@/router.ts";
 
 const i18n = createI18n({
   locale: 'zh-CN',
@@ -15,6 +16,7 @@ const i18n = createI18n({
     'zh-CN': ZH
   },
 })
+
 const pinia = createPinia()
 // const app = createApp(Mobile)
 const app = createApp(App)
@@ -23,5 +25,6 @@ const app = createApp(App)
 app.use(pinia)
 app.use(VirtualList);
 app.use(i18n)
+app.use(router)
 
 app.mount('#app')

src/pages/dict/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div id="page">
+    dict
+  </div>
+</template>
+
+<style scoped lang="scss">
+#page {
+  width: 100%;
+  height: 100%;
+  color: white;
+  position: relative;
+  z-index: 2;
+  font-size: 14rem;
+}
+</style>

src/pages/practice/Panel.vue

@@ -213,7 +213,7 @@ const {
   </Transition>
 </template>
 <style scoped lang="scss">
-@import "@/assets/css/variable.scss";
+@import "@/assets/css/variable";
 
 $header-height: 50rem;
 

src/pages/practice/Statistics.vue

@@ -126,7 +126,7 @@ const isEnd = $computed(() => {
   <Fireworks v-if="statModalIsOpen"/>
 </template>
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .statistics {
   width: 800rem;

src/pages/practice/index.vue

@@ -3,16 +3,16 @@
 import Toolbar from "@/components/toolbar/index.vue"
 import {onMounted, onUnmounted, watch} from "vue";
 import {usePracticeStore} from "@/stores/practice.ts";
-import Footer from "@/components/Practice/Footer.vue";
+import Footer from "@/pages/practice/Footer.vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {$ref} from "vue/macros";
-import Statistics from "@/components/Practice/Statistics.vue";
-import {emitter, EventKey} from "@/utils/eventBus";
-import {useSettingStore} from "@/stores/setting";
+import Statistics from "@/pages/practice/Statistics.vue";
+import {emitter, EventKey} from "@/utils/eventBus.ts";
+import {useSettingStore} from "@/stores/setting.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {MessageBox} from "@/utils/MessageBox.tsx";
-import PracticeArticle from "@/components/Practice/practice-article/index.vue";
-import PracticeWord from "@/components/Practice/practice-word/index.vue";
+import PracticeArticle from "@/pages/practice/practice-article/index.vue";
+import PracticeWord from "@/pages/practice/practice-word/index.vue";
 import {ShortcutKey} from "@/types.ts";
 import useTheme from "@/hooks/useTheme.ts";
 import SettingDialog from "@/components/dialog/SettingDialog.vue";

src/pages/practice/practice-article/TypingArticle.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import {computed, nextTick, onMounted, onUnmounted, watch} from "vue"
 import {$computed, $ref} from "vue/macros";
-import {Article, ArticleWord, DefaultArticle, ShortcutKey, ShortcutKeyMap, Word} from "@/types";
-import {useBaseStore} from "@/stores/base";
+import {Article, ArticleWord, DefaultArticle, ShortcutKey, ShortcutKeyMap, Word} from "@/types.ts";
+import {useBaseStore} from "@/stores/base.ts";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio} from "@/hooks/sound.ts";
 import {useOnKeyboardEventListener} from "@/hooks/event.ts";
 import {cloneDeep} from "lodash-es";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
-import Options from "@/components/Practice/Options.vue";
+import Options from "@/pages/practice/Options.vue";
 import {Icon} from "@iconify/vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import Tooltip from "@/components/Tooltip.vue";
@@ -479,7 +479,7 @@ const {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .wrote {
   //color: green;

src/pages/practice/practice-article/index.vue

@@ -12,7 +12,7 @@ import {
   Word
 } from "@/types.ts";
 import {cloneDeep} from "lodash-es";
-import TypingWord from "@/components/Practice/practice-word/TypingWord.vue";
+import TypingWord from "@/pages/practice/practice-word/TypingWord.vue";
 import Panel from "../Panel.vue";
 import {onMounted, watch} from "vue";
 import {renewSectionTexts, renewSectionTranslates} from "@/hooks/translate.ts";
@@ -317,7 +317,7 @@ const {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 $article-width: 50vw;
 

src/pages/practice/practice-word/TypingWord.vue

@@ -2,7 +2,7 @@
 import {onMounted, onUnmounted, watch} from "vue"
 import {$computed, $ref} from "vue/macros"
 import {useBaseStore} from "@/stores/base.ts"
-import {DefaultDisplayStatistics, DictType, ShortcutKey, Word} from "../../../types";
+import {DefaultDisplayStatistics, DictType, ShortcutKey, Word} from "../../../types.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts"
 import {cloneDeep} from "lodash-es"
 import {usePracticeStore} from "@/stores/practice.ts"
@@ -10,9 +10,9 @@ import {useSettingStore} from "@/stores/setting.ts";
 import {useOnKeyboardEventListener} from "@/hooks/event.ts";
 import {Icon} from "@iconify/vue";
 import Tooltip from "@/components/Tooltip.vue";
-import Options from "@/components/Practice/Options.vue";
-import Typing from "@/components/Practice/practice-word/Typing.vue";
-import Panel from "@/components/Practice/Panel.vue";
+import Options from "@/pages/practice/Options.vue";
+import Typing from "@/pages/practice/practice-word/Typing.vue";
+import Panel from "@/pages/practice/Panel.vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useWordOptions} from "@/hooks/dict.ts";

src/pages/practice/practice-word/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import TypingWord from "@/components/Practice/practice-word/TypingWord.vue";
+import TypingWord from "@/pages/practice/practice-word/TypingWord.vue";
 import {$ref} from "vue/macros";
 import {chunk, cloneDeep} from "lodash-es";
 import {useBaseStore} from "@/stores/base.ts";

src/router.ts

@@ -0,0 +1,16 @@
+import * as VueRouter from 'vue-router'
+import Practice from "@/pages/practice/index.vue";
+import Dict from '@/pages/dict'
+
+const routes = [
+  {path: '/practice', component: Practice},
+  {path: '/dict', component: Dict},
+  {path: '/', redirect:'/dict'},
+]
+
+const router = VueRouter.createRouter({
+  history: VueRouter.createWebHashHistory(),
+  routes,
+})
+
+export default router