save

package.json

@@ -50,14 +50,17 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.3.4",
+    "autoprefixer": "^10.4.19",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "esm": "^3.2.25",
     "gulp": "^4.0.2",
     "husky": "^8.0.3",
+    "postcss": "^8.4.38",
     "push-dir": "^0.4.1",
     "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.64.2",
+    "tailwindcss": "^3.4.3",
     "tslib": "^2.6.2",
     "typescript": "^5.2.0",
     "unplugin-auto-import": "^0.16.6",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/assets/css/style.scss

@@ -1,9 +1,14 @@
 //@import '/node_modules/element-plus/dist/index.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import "/node_modules/hover.css";
 @import "variable.scss";
 @import "anim";
 @import 'element-plus/theme-chalk/dark/css-vars';
 
+
 :root {
   --color-background: #E6E8EB;
   --color-main-bg: #E6E8EB;

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>

src/router.ts

@@ -17,8 +17,16 @@ import About from "@/pages/mobile/my/About.vue";
 import Feedback from "@/pages/mobile/my/Feedback.vue";
 import MusicSetting from "@/pages/mobile/my/setting/MusicSetting.vue";
 import OtherSetting from "@/pages/mobile/my/setting/OtherSetting.vue";
+import WordHome from "@/pages/pc/word/WordHome.vue";
+import PC from "@/pages/pc/index.vue";
 
 export const routes: RouteRecordRaw[] = [
+  {
+    path: '/', component: PC,
+    children: [
+      {path: '/word', component: WordHome},
+    ]
+  },
   {path: '/pc/practice', component: Practice},
   {path: '/pc/dict', component: Dict},
 

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+