save

src/pages/pc/components/Logo.vue

@@ -17,7 +17,7 @@ function goHome(){
 
 <style scoped lang="scss">
 .logo {
-  position: fixed;
+  //position: fixed;
   left: var(--space);
   top: var(--space);
   z-index: 1;

src/pages/pc/dict/index.vue

@@ -4,7 +4,6 @@ import DictManage from "@/pages/pc/dict/DictManage.vue";
 import {onMounted} from "vue";
 import {useRoute} from "vue-router";
 import {useRuntimeStore} from "@/stores/runtime.ts";
-import RightTopBar from "@/pages/pc/components/RightTopBar.vue";
 import Logo from "@/pages/pc/components/Logo.vue";
 
 const router = useRoute()
@@ -27,7 +26,6 @@ onMounted(() => {
         </nav>
         <nav @click.stop="runtimeStore.showSettingModal = true"><a href="javascript:void(0)">设置</a></nav>
       </div>
-      <RightTopBar/>
     </header>
     <div class="content">
       <DictManage/>

src/pages/pc/index.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+
+import {ShortcutKey} from "@/types.ts";
+import Logo from "@/pages/pc/components/Logo.vue";
+import {Icon} from "@iconify/vue";
+import {usePracticeStore} from "@/stores/practice.ts";
+import {useBaseStore} from "@/stores/base.ts";
+import {useSettingStore} from "@/stores/setting.ts";
+import {useRuntimeStore} from "@/stores/runtime.ts";
+
+const practiceStore = usePracticeStore()
+const store = useBaseStore()
+const settingStore = useSettingStore()
+const runtimeStore = useRuntimeStore()
+</script>
+
+<template>
+  <div class="layout">
+    <div class="aside">
+      <div class="top">
+        <Logo/>
+        <div class="row">
+          <Icon icon="material-symbols-light:dictionary-outline-sharp"/>
+          <!--          <Icon icon="streamline:dictionary-language-book"/>-->
+          <span>单词</span>
+        </div>
+        <div class="row">
+          <Icon icon="ph:article-ny-times"/>
+          <span>文章</span>
+        </div>
+        <div class="row">
+          <Icon icon="healthicons:i-exam-multiple-choice-outline"/>
+          <span>试卷</span>
+        </div>
+        <div class="row">
+          <Icon icon="mdi-light:forum"/>
+          <span>社区</span>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="row"
+             :title="`设置(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
+             @click="runtimeStore.showSettingModal = true">
+          <Icon icon="uil:setting"/>
+          <span>试卷</span>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.layout {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  font-size: 14rem;
+}
+
+.aside {
+  background: white;
+  //position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 200rem;
+  padding: 20rem 10rem;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .row {
+    padding: 10rem;
+    display: flex;
+    align-items: center;
+    gap: 10rem;
+    font-size: 16rem;
+    //font-weight: bold;
+
+    svg {
+      font-size: 36rem;
+    }
+  }
+}
+
+.content {
+  flex: 1;
+}
+</style>

src/pages/pc/practice/index.vue

@@ -5,7 +5,7 @@ import {onMounted, onUnmounted, watch} from "vue";
 import {usePracticeStore} from "@/stores/practice.ts";
 import Footer from "@/pages/pc/practice/Footer.vue";
 import {useBaseStore} from "@/stores/base.ts";
-import {$ref} from "vue/macros";
+
 import Statistics from "@/pages/pc/practice/Statistics.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useSettingStore} from "@/stores/setting.ts";
@@ -18,6 +18,7 @@ import DictModal from "@/pages/pc/components/dialog/DictDiglog.vue";
 import {useStartKeyboardEventListener} from "@/hooks/event.ts";
 import useTheme from "@/hooks/theme.ts";
 import Logo from "@/pages/pc/components/Logo.vue";
+import {Icon} from "@iconify/vue";
 
 const practiceStore = usePracticeStore()
 const store = useBaseStore()
@@ -141,9 +142,6 @@ useStartKeyboardEventListener()
 </script>
 <template>
   <div class="practice-wrapper">
-    <div class="left">
-      <Logo/>
-    </div>
     <Toolbar/>
     <!--    <BaseButton @click="test">test</BaseButton>-->
     <PracticeArticle ref="practiceRef" v-if="store.isArticle"/>
@@ -167,8 +165,5 @@ useStartKeyboardEventListener()
   transform: translateX(var(--practice-wrapper-translateX));
 }
 
-.left{
-  background: white;
-}
 
 </style>

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

@@ -1,18 +1,13 @@
 <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.ts";
+import {$ref} from "vue/macros";
+import {Article, ArticleWord, DefaultArticle, ShortcutKey, 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 "@/pages/pc/practice/Options.vue";
-import {Icon} from "@iconify/vue";
-import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
-import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {useArticleOptions} from "@/hooks/dict.ts";
 

src/pages/pc/word/WordHome.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="word flex s1s  font-bold underline">
+    asdf
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>