save

package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@opentranslate/baidu": "^1.4.2",
     "@opentranslate/translator": "^1.4.2",
-    "axios": "^1.5.0",
+    "axios": "^1.6.8",
     "compromise": "^14.10.0",
     "copy-to-clipboard": "^3.3.3",
     "element-plus": "^2.3.9",
@@ -32,14 +32,14 @@
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "nanoid": "^5.0.3",
-    "pinia": "^2.1.6",
     "sentence-splitter": "^4.2.1",
     "tesseract.js": "^4.1.1",
     "vant": "^4.8.1",
-    "vue": "^3.3.4",
     "vue-activity-calendar": "^1.2.2",
     "vue-i18n": "9",
-    "vue-router": "4",
+    "pinia": "^2.1.7",
+    "vue": "3.4.21",
+    "vue-router": "4.3.0",
     "vue-virtual-scroller": "2.0.0-beta.8"
   },
   "devDependencies": {
@@ -47,24 +47,26 @@
     "@types/file-saver": "^2.0.5",
     "@types/lodash-es": "^4.17.9",
     "@types/uuid": "^9.0.4",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vue/compiler-sfc": "^3.3.4",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "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",
+    "typescript": "5.3.3",
     "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.2",
-    "unplugin-vue-define-options": "^1.4.1",
-    "vite": "^4.4.5",
-    "vue-tsc": "^1.8.5",
+    "unplugin-vue-macros": "^2.9.1",
+    "vite": "^5.2.0",
+    "vue-tsc": "^2.0.6",
     "xlsx": "^0.18.5"
   },
   "config": {

src/App.vue

@@ -14,7 +14,7 @@ import CollectNotice from "@/pages/pc/components/CollectNotice.vue";
 import {SAVE_DICT_KEY, SAVE_SETTING_KEY} from "@/utils/const.ts";
 import {isMobile, shakeCommonDict} from "@/utils";
 import router, {routes} from "@/router.ts";
-import {$ref} from "vue/macros";
+
 import {useRoute} from "vue-router";
 import * as eruda from "eruda";
 

src/assets/css/style.scss

@@ -3,10 +3,14 @@
 @import "variable.scss";
 @import "anim";
 @import 'element-plus/theme-chalk/dark/css-vars';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   --color-background: #E6E8EB;
-  --color-main-bg: #E6E8EB;
+  //--color-main-bg: #E6E8EB;
+  --color-main-bg: rgb(238,240,244);
   --color-second-bg: rgb(240, 242, 244);
   --color-third-bg: rgb(213, 215, 217);
 
@@ -232,7 +236,7 @@ a {
 
 /* 火狐美化滚动条 */
 * {
-  scrollbar-color: var(--color-scrollbar) #f3f4f9;
+    scrollbar-color: var(--color-scrollbar) #f3f4f9;
   /* 滑块颜色  滚动条背景颜色 */
   scrollbar-width: thin;
   /* 滚动条宽度有三种：thin、auto、none */

src/components/icon/VolumeIcon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {Icon} from "@iconify/vue";
-import {$ref} from "vue/macros";
+
 import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {ShortcutKey} from "@/types.ts";

src/hooks/dict.ts

@@ -4,7 +4,7 @@ import {useRuntimeStore} from "@/stores/runtime.ts";
 import {chunk, cloneDeep} from "lodash-es";
 import {isArticle} from "@/hooks/article.ts";
 import {nanoid} from "nanoid";
-import {$ref} from "vue/macros";
+
 
 
 export function useWordOptions() {

src/hooks/sound.ts

@@ -3,7 +3,7 @@ import {useSettingStore} from "@/stores/setting.ts";
 import {PronunciationApi} from "@/types.ts";
 import beep from "@/assets/sound/beep.wav";
 import correct from "@/assets/sound/correct.wav";
-import {$ref} from "vue/macros";
+
 import {SoundFileOptions} from "@/utils/const.ts";
 import {useBaseStore} from "@/stores/base.ts";
 

src/pages/mobile/DictDetail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import SlideItem from "@/components/slide/SlideItem.vue";
-import {$ref} from "vue/macros";
+
 import {useBaseStore} from "@/stores/base.ts";
 import {showConfirmDialog, showToast} from "vant";
 import 'vant/lib/index.css'

src/pages/mobile/DictListManage.vue

@@ -3,7 +3,6 @@
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import SlideItem from "@/components/slide/SlideItem.vue";
 import {useBaseStore} from "@/stores/base.ts";
-import {$computed, $ref} from "vue/macros";
 import {groupBy} from "lodash-es";
 import {dictionaryResources} from "@/assets/dictionary.ts";
 import {Dict, DictResource, languageCategoryOptions} from "@/types.ts";

src/pages/mobile/My-old.vue

@@ -4,7 +4,7 @@
 <!--import IconWrapper from "@/components/IconWrapper.vue";-->
 <!--import useTheme from "@/hooks/theme.ts";-->
 <!--import {useSettingStore} from "@/stores/setting.ts";-->
-<!--import {$ref} from "vue/macros";-->
+<!---->
 <!--import SlideItem from "@/components/slide/SlideItem.vue";-->
 <!--import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";-->
 <!--import BaseIcon from "@/components/BaseIcon.vue";-->

src/pages/mobile/SetDictPlan.vue

@@ -11,7 +11,7 @@ import {dictionaryResources} from "@/assets/dictionary.ts";
 import {useBaseStore} from "@/stores/base.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
-import {$ref} from "vue/macros";
+
 
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()

src/pages/mobile/components/CollectList.vue

@@ -4,7 +4,6 @@ import BaseIcon from "@/components/BaseIcon.vue";
 import WordList from "@/pages/pc/components/list/WordList.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
-import {$computed, $ref} from "vue/macros";
 import {Dict, DictType} from "@/types.ts";
 import {useRouter} from "vue-router";
 import {useBaseStore} from "@/stores/base.ts";

src/pages/mobile/components/DictGroup.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import {$computed, $ref} from "vue/macros";
 import {watch} from "vue";
 import {DictResource} from "@/types.ts";
 import DictList from "./DictList.vue";

src/pages/mobile/components/DictItem.vue

@@ -2,7 +2,6 @@
 
 import {Dict, DictType} from "@/types.ts";
 import {Icon} from "@iconify/vue";
-import {$computed} from "vue/macros";
 
 const props = defineProps<{
   dict?: Dict,

src/pages/mobile/components/DictPlan.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {$ref} from "vue/macros";
+
 import {useBaseStore} from "@/stores/base.ts";
 import {Picker, showToast} from "vant";
 import 'vant/lib/index.css'

src/pages/mobile/components/MobilePanel.vue

@@ -1,26 +1,9 @@
 <script setup lang="ts">
 import {useBaseStore} from "@/stores/base.ts"
 
-import {$computed, $ref} from "vue/macros"
 import {computed, onMounted, onUnmounted, provide, watch} from "vue"
-import {Dict, DictType, ShortcutKey} from "@/types.ts"
-import PopConfirm from "@/pages/pc/components/PopConfirm.vue"
-import BaseButton from "@/components/BaseButton.vue";
 import {useSettingStore} from "@/stores/setting.ts";
-import Close from "@/components/icon/Close.vue";
-import Empty from "@/components/Empty.vue";
-import {useArticleOptions, useWordOptions} from "@/hooks/dict.ts";
-import {Icon} from "@iconify/vue";
-import Tooltip from "@/pages/pc/components/Tooltip.vue";
-import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
-import BaseIcon from "@/components/BaseIcon.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
-import {useRouter} from "vue-router";
-import {useRuntimeStore} from "@/stores/runtime.ts";
-import {cloneDeep} from "lodash-es";
-import WordList from "@/pages/pc/components/list/WordList.vue";
-import ArticleList from "@/pages/pc/components/list/ArticleList.vue";
-import Slide from "@/pages/pc/components/Slide.vue";
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import SlideItem from "@/components/slide/SlideItem.vue";
 import CollectList from "@/pages/mobile/components/CollectList.vue";

src/pages/mobile/components/SimpleList.vue

@@ -4,7 +4,7 @@ import BaseIcon from "@/components/BaseIcon.vue";
 import WordList from "@/pages/pc/components/list/WordList.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
-import {$ref} from "vue/macros";
+
 import {Dict, DictType} from "@/types.ts";
 import {useBaseStore} from "@/stores/base.ts";
 import {useWordOptions} from "@/hooks/dict.ts";

src/pages/mobile/components/WrongList.vue

@@ -4,7 +4,7 @@ import BaseIcon from "@/components/BaseIcon.vue";
 import WordList from "@/pages/pc/components/list/WordList.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
-import {$ref} from "vue/macros";
+
 import {Dict, DictType} from "@/types.ts";
 import {useBaseStore} from "@/stores/base.ts";
 import {useWordOptions} from "@/hooks/dict.ts";

src/pages/mobile/my/My.vue

@@ -4,7 +4,7 @@ import {Icon} from "@iconify/vue";
 import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import useTheme from "@/hooks/theme.ts";
 import {useSettingStore} from "@/stores/setting.ts";
-import {$ref} from "vue/macros";
+
 import SlideItem from "@/components/slide/SlideItem.vue";
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import BaseIcon from "@/components/BaseIcon.vue";

src/pages/mobile/practice/index-test.vue

@@ -3,14 +3,12 @@
 import {useBaseStore} from "@/stores/base.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
-import {$computed, $ref} from "vue/macros";
-import {DefaultDisplayStatistics, DictType, ShortcutKey, Sort, Word} from "@/types.ts";
+import {DefaultDisplayStatistics, DictType, Sort, Word} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {syncMyDictList, useWordOptions} from "@/hooks/dict.ts";
-import {nextTick, onMounted, onUnmounted, watch} from "vue";
+import {onMounted, onUnmounted, watch} from "vue";
 import BaseButton from "@/components/BaseButton.vue";
-import Options from "@/pages/pc/practice/Options.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import MobilePanel from "@/pages/mobile/components/MobilePanel.vue";
 import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";

src/pages/mobile/practice/index.vue

@@ -3,7 +3,7 @@
 import {onDeactivated, onMounted, onUnmounted, watch} from "vue";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useBaseStore} from "@/stores/base.ts";
-import {$ref} from "vue/macros";
+
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";

src/pages/mobile/practice/practice-word/Typing.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import {DefaultWord, ShortcutKey, Word} from "@/types.ts";
 import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import {$computed, $ref} from "vue/macros";
-import {useBaseStore} from "@/stores/base.ts";
-import {usePracticeStore} from "@/stores/practice.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio, useTTsPlayAudio} from "@/hooks/sound.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {cloneDeep} from "lodash-es";
-import {onUnmounted, watch, onMounted, nextTick} from "vue";
+import {nextTick, onMounted, onUnmounted, watch} from "vue";
 import Tooltip from "@/pages/pc/components/Tooltip.vue";
 
 interface IProps {

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {onMounted, onUnmounted, watch} from "vue"
-import {$computed, $ref} from "vue/macros"
 import {useBaseStore} from "@/stores/base.ts"
 import {DefaultDisplayStatistics, DefaultWord, DictType, ShortcutKey, Sort, Word} from "@/types.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts"
@@ -21,7 +20,6 @@ import SlideItem from "@/components/slide/SlideItem.vue";
 import MobilePanel from "@/pages/mobile/components/MobilePanel.vue";
 import router from "@/router.ts";
 import {Icon} from "@iconify/vue";
-import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import useTheme from "@/hooks/theme.ts";
 
 interface IProps {

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

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

src/pages/pc/components/CollectNotice.vue

@@ -5,7 +5,7 @@ import Close from "@/components/icon/Close.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import {watch} from "vue";
 import {useSettingStore} from "@/stores/setting.ts";
-import {$ref} from "vue/macros";
+
 import {isMobile} from "@/utils";
 
 let settingStore = useSettingStore()

src/pages/pc/components/DictListPanel.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 
 import {DictResource, languageCategoryOptions} from "@/types.ts";
-import {$computed, $ref} from "vue/macros";
 import {dictionaryResources} from "@/assets/dictionary.ts";
 import {groupBy} from "lodash-es";
 import {useBaseStore} from "@/stores/base.ts";

src/pages/pc/components/EditAbleText.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import BaseButton from "@/components/BaseButton.vue";
-import {$ref} from "vue/macros";
+
 import {watchEffect} from "vue";
 
 interface IProps {

src/pages/pc/components/Input.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {$ref} from "vue/macros";
+
 import {Icon} from "@iconify/vue";
 import Close from "@/components/icon/Close.vue";
 import {useDisableEventListener, useWindowClick} from "@/hooks/event.ts";

src/pages/pc/components/Logo.vue

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

src/pages/pc/components/PopConfirm.vue

@@ -53,31 +53,7 @@ export default {
       this.$emit('confirm')
     }
   },
-  render() {
-    let Vnode = this.$slots.default()[0]
-    return (
-        <div class="pop-confirm">
-          <Teleport to="body">
-            <Transition>
-              {
-                  this.show && (
-                      <div ref="tip" className="pop-confirm-content">
-                        <div className="text">
-                          {this.title}
-                        </div>
-                        <div className="options">
-                          <div onClick={() => this.show = false}>取消</div>
-                          <div className="main" onClick={() => this.confirm()}>确认</div>
-                        </div>
-                      </div>
-                  )
-              }
-            </Transition>
-          </Teleport>
-          <Vnode onClick={(e) => this.showPop(e)}/>
-        </div>
-    )
-  }
+
 }
 </script>
 <style lang="scss" scoped>

src/pages/pc/components/Setting.vue

@@ -4,7 +4,6 @@ import {ref, watch} from "vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {getAudioFileUrl, useChangeAllSound, usePlayAudio, useWatchAllSound} from "@/hooks/sound.ts";
 import {getShortcutKey, useDisableEventListener, useEventListener} from "@/hooks/event.ts";
-import {$computed, $ref} from "vue/macros";
 import {cloneDeep} from "lodash-es";
 import {DefaultShortcutKeyMap, Dict, DictType, ShortcutKey} from "@/types.ts";
 import BaseButton from "@/components/BaseButton.vue";

src/pages/pc/components/Slide.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 
-import {$computed} from "vue/macros";
 
 const props = defineProps<{
   width?: string,

src/pages/pc/components/Tooltip.vue

@@ -1,4 +1,4 @@
-<script lang="jsx">
+<script lang="tsx">
 import {nextTick, Teleport, Transition} from "vue";
 
 export default {
@@ -45,25 +45,12 @@ export default {
     },
   },
   render() {
-    let Vnode = this.$slots.default()[0]
-    return <>
-      {
-          this.show && this.title && (
-              <Teleport to="body">
-                <Transition name="fade">
-                  <div ref="tip" className="tip">
-                    {this.title}
-                  </div>
-                </Transition>
-              </Teleport>
-          )
-      }
-      <Vnode
-          onClick={() => this.show = false}
-          onmouseenter={(e) => this.showPop(e)}
-          onmouseleave={() => this.show = false}
-      />
-    </>
+    return (
+        <div>
+          123
+
+        </div>
+    )
   }
 }
 </script>

src/pages/pc/components/article/EditArticle.vue

@@ -12,7 +12,7 @@ import {
   renewSectionTranslates
 } from "@/hooks/translate.ts";
 import * as copy from "copy-to-clipboard";
-import {$ref} from "vue/macros";
+
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import {getSplitTranslateText} from "@/hooks/article.ts";
 import {cloneDeep} from "lodash-es";

src/pages/pc/components/article/EditBatchArticleModal.vue

@@ -4,7 +4,7 @@ import {Article, DefaultArticle} from "@/types.ts";
 import BaseButton from "@/components/BaseButton.vue";
 import {cloneDeep} from "lodash-es";
 import {useBaseStore} from "@/stores/base.ts";
-import {$ref} from "vue/macros";
+
 import List from "@/pages/pc/components/list/List.vue";
 import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
 import EditArticle from "@/pages/pc/components/article/EditArticle.vue";

src/pages/pc/components/dialog/ArticleContentDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
-import {$ref} from "vue/macros";
+
 import {onMounted, onUnmounted, watch} from "vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";

src/pages/pc/components/dialog/Dialog.vue

@@ -3,7 +3,7 @@ import {onMounted, onUnmounted, watch} from "vue";
 import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {Icon} from '@iconify/vue';
 import {useEventListener} from "@/hooks/event.ts";
-import {$ref} from "vue/macros";
+
 import BaseButton from "@/components/BaseButton.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 

src/pages/pc/components/dialog/DictDiglog.vue

@@ -3,7 +3,6 @@ import {useBaseStore} from "@/stores/base.ts"
 import {onMounted} from "vue"
 import {DefaultDict, Dict, DictResource, DictType, Sort, Word} from "@/types.ts"
 import {chunk, cloneDeep, reverse, shuffle} from "lodash-es";
-import {$computed, $ref} from "vue/macros";
 import BaseButton from "@/components/BaseButton.vue";
 import {Icon} from '@iconify/vue';
 import "vue-activity-calendar/style.css";

src/pages/pc/components/dialog/SettingDialog.vue

@@ -1,16 +1,5 @@
 <script setup lang="ts">
 import Dialog from "@/pages/pc/components/dialog/Dialog.vue"
-import {Icon} from '@iconify/vue';
-import {ref} from "vue";
-import {useSettingStore} from "@/stores/setting.ts";
-import {getAudioFileUrl, useChangeAllSound, usePlayAudio, useWatchAllSound} from "@/hooks/sound.ts";
-import {getShortcutKey, useDisableEventListener, useEventListener} from "@/hooks/event.ts";
-import {$computed, $ref} from "vue/macros";
-import {cloneDeep} from "lodash-es";
-import {DefaultShortcutKeyMap, ShortcutKey} from "@/types.ts";
-import BaseButton from "@/components/BaseButton.vue";
-import {SoundFileOptions} from "@/utils/const.ts";
-import VolumeIcon from "@/components/icon/VolumeIcon.vue";
 import Setting from "@/pages/pc/components/Setting.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 

src/pages/pc/components/dialog/WordListDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
-import {$ref} from "vue/macros";
+
 import {onMounted, onUnmounted, watch} from "vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";

src/pages/pc/components/list/ArticleList.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 
 import Input from "@/pages/pc/components/Input.vue";
-import {$computed, $ref} from "vue/macros";
 import {Article} from "@/types.ts";
 import BaseList from "@/pages/pc/components/list/BaseList.vue";
 

src/pages/pc/components/list/BaseList.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {useSettingStore} from "@/stores/setting.ts";
 import {nextTick, watch} from 'vue'
-import {$computed} from "vue/macros";
 
 const props = withDefaults(defineProps<{
   list?: any[],

src/pages/pc/components/list/DictGroup.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import {$computed, $ref} from "vue/macros";
 import {watch} from "vue";
 import {DictResource} from "@/types.ts";
-import DictItem from "@/pages/pc/components/list/DictItem.vue";
 import DictList from "@/pages/pc/components/list/DictList.vue";
 
 const props = defineProps<{

src/pages/pc/components/list/DictItem.vue

@@ -2,8 +2,6 @@
 
 import {Dict, DictType} from "@/types.ts";
 import {Icon} from "@iconify/vue";
-import {$computed} from "vue/macros";
-import DeleteIcon from "@/components/icon/DeleteIcon.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 
 const props = defineProps<{

src/pages/pc/components/list/List.vue

@@ -2,7 +2,6 @@
 
 import BaseIcon from "@/components/BaseIcon.vue";
 import Input from "@/pages/pc/components/Input.vue";
-import {$computed, $ref} from "vue/macros";
 import {cloneDeep, throttle} from "lodash-es";
 import {Article} from "@/types.ts";
 

src/pages/pc/components/list/WordList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import {$ref} from "vue/macros";
+
 import {Word} from "@/types.ts";
 import VolumeIcon from "@/components/icon/VolumeIcon.vue";
 import BaseList from "@/pages/pc/components/list/BaseList.vue";

src/pages/pc/components/toolbar/Add.vue

@@ -3,7 +3,7 @@
 import {Icon} from "@iconify/vue";
 import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import Tooltip from "@/pages/pc/components/Tooltip.vue";
-import {$ref} from "vue/macros";
+
 
 let show = $ref(false)
 

src/pages/pc/components/toolbar/index.vue

@@ -13,7 +13,7 @@ import TranslateSetting from "@/pages/pc/components/toolbar/TranslateSetting.vue
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
-import {$ref} from "vue/macros";
+
 import {DictType, ShortcutKey} from "@/types.ts";
 import ChapterName from "@/pages/pc/components/toolbar/ChapterName.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
@@ -122,10 +122,6 @@ watch(() => store.load, n => {
         </div>
 
         <div class="with-bg anim">
-          <BaseIcon
-              @click="runtimeStore.showSettingModal = true"
-              :title="`设置(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
-              icon="uil:setting"/>
           <BaseIcon
               @click="settingStore.showPanel = !settingStore.showPanel"
               :title="`单词本(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`"

src/pages/pc/dict/DictManage.vue

@@ -2,7 +2,7 @@
 import {useBaseStore} from "@/stores/base.ts"
 import {nextTick, onMounted, watch} from "vue"
 import {Dict, DictResource, DictType} from "@/types.ts"
-import {$ref} from "vue/macros";
+
 import "vue-activity-calendar/style.css";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";

src/pages/pc/dict/components/ArticleDictDetail.vue

@@ -4,12 +4,10 @@ import BaseIcon from "@/components/BaseIcon.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import Empty from "@/components/Empty.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
-import {$computed, $ref} from "vue/macros";
 import {cloneDeep} from "lodash-es";
 import {Article, DefaultArticle, DefaultDict, Dict, DictResource, DictType, Sort, TranslateType} from "@/types.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import EditBatchArticleModal from "@/pages/pc/components/article/EditBatchArticleModal.vue";
-import {no} from "@/utils";
 import {Icon} from "@iconify/vue";
 import EditDict from "@/pages/pc/dict/components/EditDict.vue";
 import {nanoid} from "nanoid";

src/pages/pc/dict/components/ChapterWordList.vue

@@ -3,7 +3,6 @@
 import {Sort, Word} from "@/types.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import Empty from "@/components/Empty.vue";
-import {$computed, $ref} from "vue/macros";
 import {nextTick, watch} from "vue";
 import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import BaseButton from "@/components/BaseButton.vue";

src/pages/pc/dict/components/EditDict.vue

@@ -2,7 +2,7 @@
 
 import {DefaultDict, Dict, DictType} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
-import {$ref} from "vue/macros";
+
 import {FormInstance, FormRules} from "element-plus";
 import {onMounted, reactive, watch} from "vue";
 import {dictionaryResources} from "@/assets/dictionary.ts";

src/pages/pc/dict/components/WordDictDetail.vue

@@ -3,7 +3,6 @@
 import BaseIcon from "@/components/BaseIcon.vue";
 import ChapterWordList from "@/pages/pc/dict/components/ChapterWordList.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import {$computed, $ref} from "vue/macros";
 import {assign, chunk, cloneDeep, reverse, shuffle} from "lodash-es";
 import {DefaultDict, Dict, DictResource, DictType, Sort, Word} from "@/types.ts";
 import {nanoid} from "nanoid";

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/Footer.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 
-import {$computed, $ref} from "vue/macros"
 import {onMounted, onUnmounted} from "vue"
-import {useBaseStore} from "@/stores/base.ts"
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 

src/pages/pc/practice/Panel.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {useBaseStore} from "@/stores/base.ts"
 
-import {$computed, $ref} from "vue/macros"
 import {computed, onMounted, onUnmounted, provide, watch} from "vue"
 import {Dict, DictType, ShortcutKey} from "@/types.ts"
 import PopConfirm from "@/pages/pc/components/PopConfirm.vue"

src/pages/pc/practice/Statistics.vue

@@ -10,7 +10,6 @@ import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {onMounted, reactive} from "vue";
 import {cloneDeep} from "lodash-es";
 import {Icon} from '@iconify/vue';
-import {$computed, $ref} from "vue/macros";
 import {useSettingStore} from "@/stores/setting.ts";
 
 const store = useBaseStore()

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,12 @@
 <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 {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/practice/practice-article/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import {$computed, $ref} from "vue/macros";
 import TypingArticle from "./TypingArticle.vue";
 import {
   Article,

src/pages/pc/practice/practice-word/Typing.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import {DefaultWord, ShortcutKey, Word} from "@/types.ts";
 import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import {$computed, $ref} from "vue/macros";
-import {useBaseStore} from "@/stores/base.ts";
-import {usePracticeStore} from "@/stores/practice.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio, useTTsPlayAudio} from "@/hooks/sound.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {cloneDeep} from "lodash-es";
-import {onUnmounted, watch, onMounted} from "vue";
+import {onMounted, onUnmounted, watch} from "vue";
 import Tooltip from "@/pages/pc/components/Tooltip.vue";
 
 interface IProps {

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {onMounted, onUnmounted, watch} from "vue"
-import {$computed, $ref} from "vue/macros"
 import {useBaseStore} from "@/stores/base.ts"
 import {DefaultDisplayStatistics, DictType, ShortcutKey, Sort, Word} from "../../../../types.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts"

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

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

src/pages/pc/word/WordHome.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="word flex s  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},
 

src/vite-env.d.ts

@@ -1,3 +1,6 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-vue-macros/macros-global" />
+
 import {ElMessageBox} from "element-plus";
 
 

tsconfig.json

@@ -27,10 +27,9 @@
       "./node_modules"
     ],
     "types": [
-      "vue/ref-macros",
       "vite/client",
       "element-plus/global",
-      "unplugin-vue-define-options"
+      "unplugin-vue-macros/macros-global"
     ],
     "baseUrl": "src",
     //This is because TypeScript does not resolve webpack aliases automatically.

vite.config.ts

@@ -1,13 +1,13 @@
 import {defineConfig} from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from "@vitejs/plugin-vue-jsx";
+import Vue from '@vitejs/plugin-vue'
+import VueJsx from '@vitejs/plugin-vue-jsx'
 import {resolve} from 'path'
 import {visualizer} from "rollup-plugin-visualizer";
 import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import {getLastCommit} from "git-last-commit";
-import DefineOptions from 'unplugin-vue-define-options/vite' // 引入插件
+import VueMacros from 'unplugin-vue-macros/vite'
 
 function pathResolve(dir: string) {
   return resolve(__dirname, ".", dir)
@@ -23,8 +23,15 @@ export default defineConfig(async () => {
   })
   return {
     plugins: [
-      vue({
-        reactivityTransform: true
+      VueMacros({
+        plugins: {
+          vue: Vue(),
+          vueJsx: VueJsx() // if needed
+        }
+        // betterDefine: true,
+        // reactivityTransform: {
+        //   exclude: [/node_modules/, /jQuery\.js/]
+        // }
       }),
       AutoImport({
         resolvers: [ElementPlusResolver()],
@@ -33,8 +40,7 @@ export default defineConfig(async () => {
         resolvers: [ElementPlusResolver()],
       }),
       //用于给setup组件定义名字的，keep-alive需要name才能正常工作
-      DefineOptions(),
-      vueJsx(),
+      // DefineOptions(),
       lifecycle === 'report' ?
         visualizer({
           gzipSize: true,