impr

components.d.ts

@@ -99,7 +99,6 @@ declare module 'vue' {
     IconFluentSlideTextTitleEdit20Regular: typeof import('~icons/fluent/slide-text-title-edit20-regular')['default']
     IconFluentSparkle20Regular: typeof import('~icons/fluent/sparkle20-regular')['default']
     IconFluentSpeakerEdit20Regular: typeof import('~icons/fluent/speaker-edit20-regular')['default']
-    IconFluentSpeakerSettings20Regular: typeof import('~icons/fluent/speaker-settings20-regular')['default']
     IconFluentStar16Filled: typeof import('~icons/fluent/star16-filled')['default']
     IconFluentStar16Regular: typeof import('~icons/fluent/star16-regular')['default']
     IconFluentStar20Filled: typeof import('~icons/fluent/star20-filled')['default']
@@ -131,7 +130,6 @@ declare module 'vue' {
     Logo: typeof import('./src/components/Logo.vue')['default']
     MigrateDialog: typeof import('./src/components/MigrateDialog.vue')['default']
     MiniDialog: typeof import('./src/components/dialog/MiniDialog.vue')['default']
-    NewBook: typeof import('./src/components/NewBook.vue')['default']
     Option: typeof import('./src/components/base/select/Option.vue')['default']
     Pagination: typeof import('./src/components/base/Pagination.vue')['default']
     Panel: typeof import('./src/components/Panel.vue')['default']
@@ -143,6 +141,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Select: typeof import('./src/components/base/select/Select.vue')['default']
+    SettingDialog: typeof import('./src/components/SettingDialog.vue')['default']
     Slide: typeof import('./src/components/Slide.vue')['default']
     SlideHorizontal: typeof import('./src/components/slide/SlideHorizontal.vue')['default']
     SlideItem: typeof import('./src/components/slide/SlideItem.vue')['default']

src/assets/css/style.scss

@@ -146,7 +146,7 @@ html.dark {
 @media (max-width: 1720px) {
   :root {
     --toolbar-width: 50vw;
-    --panel-width: 20vw;
+    --panel-width: 20rem;
     --space: 0.5rem;
 
     --article-toolbar-width: 50rem;

src/components/SettingDialog.vue

@@ -42,7 +42,7 @@ const simpleWords = $computed({
 
 <template>
   <Dialog v-model="show" title="设置">
-    <div class="setting text-lg w-200 h-[50vh] text-md flex flex-col">
+    <div class="setting text-lg w-200 h-[60vh] text-md flex flex-col">
       <div class="flex flex-1 overflow-hidden">
         <div class="left">
           <div class="tabs">
@@ -312,7 +312,7 @@ const simpleWords = $computed({
         @apply cursor-pointer flex items-center relative;
         padding: .6rem .9rem;
         border-radius: .5rem;
-        width: 10rem;
+        width: 8rem;
         gap: .6rem;
         transition: all .5s;
 

src/pages/article/PracticeArticles.vue

@@ -36,7 +36,7 @@ import ArticleAudio from "@/pages/article/components/ArticleAudio.vue";
 import {AppEnv, DICT_LIST, LIB_JS_URL, PracticeSaveArticleKey, TourConfig} from "@/config/env.ts";
 import {addStat, setDictProp} from "@/apis";
 import {useRuntimeStore} from "@/stores/runtime.ts";
-import SettingDialog from "@/pages/word/components/SettingDialog.vue";
+import SettingDialog from "@/components/SettingDialog.vue";
 
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()

src/pages/word/WordsPage.vue

@@ -32,7 +32,6 @@ import { AppEnv, DICT_LIST, Host, LIB_JS_URL, PracticeSaveWordKey, TourConfig }
 import { myDictList } from "@/apis";
 import PracticeWordListDialog from "@/pages/word/components/PracticeWordListDialog.vue";
 import ShufflePracticeSettingDialog from "@/pages/word/components/ShufflePracticeSettingDialog.vue";
-import SettingDialog from "@/pages/word/components/SettingDialog.vue";
 
 
 const store = useBaseStore()

src/pages/word/components/Footer.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 
-import { inject, Ref, watch } from "vue"
+import { inject, Ref } from "vue"
 import { usePracticeStore } from "@/stores/practice.ts";
 import { useSettingStore } from "@/stores/setting.ts";
-import { PracticeData, WordPracticeType, ShortcutKey, TaskWords } from "@/types/types.ts";
+import { PracticeData, ShortcutKey } from "@/types/types.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import Tooltip from "@/components/base/Tooltip.vue";
 import Progress from '@/components/base/Progress.vue'
-import SettingDialog from "@/pages/word/components/SettingDialog.vue";
+import SettingDialog from "@/components/SettingDialog.vue";
 
 const statStore = usePracticeStore()
 const settingStore = useSettingStore()
@@ -96,10 +96,6 @@ const progress = $computed(() => {
     </Tooltip>
 
     <div class="bottom">
-      <Progress
-          :percentage="progress"
-          :stroke-width="8"
-          :show-text="false"/>
       <div class="flex justify-between items-center">
         <div class="stat">
           <div class="row">
@@ -177,10 +173,13 @@ const progress = $computed(() => {
         </div>
       </div>
     </div>
-    <div class="progress-wrap">
+    <div class="progress-wrap flex gap-3 items-center color-gray">
+      <span class="shrink-0">{{ status }}</span>
       <Progress :percentage="progress"
                 :stroke-width="8"
+                color="#69b1ff"
                 :show-text="false"/>
+      <div class="num">{{ `${practiceData.index + 1}/${practiceData.words.length}` }}</div>
     </div>
   </div>
 </template>
@@ -247,7 +246,7 @@ const progress = $computed(() => {
 
   .arrow {
     position: absolute;
-    top: -40%;
+    top: -60%;
     left: 50%;
     cursor: pointer;
     transition: all .5s;
@@ -256,7 +255,7 @@ const progress = $computed(() => {
     font-size: 1.2rem;
 
     &.down {
-      top: -90%;
+      top: -120%;
       transform: rotate(90deg);
     }
   }