Optimize UI interface

src/assets/css/style.scss

@@ -129,9 +129,37 @@ footer {
   justify-content: space-between;
 }
 
-
 .flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.current-practice-dict {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-bottom: $space;
+  box-sizing: border-box;
+
+  header {
+    padding: 8rem $space;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14rem;
+    color: black;
+
+    .left {
+      display: flex;
+      align-items: center;
+      gap: 10rem;
+    }
+  }
+
+  .scroll {
+    padding: 0 $space;
+    flex: 1;
+    overflow: auto;
+  }
 }

src/components/Practice/Panel.vue

@@ -2,9 +2,9 @@
 import {useBaseStore} from "@/stores/base.ts"
 import WordList from "@/components/WordList.vue"
 
-import {$computed, $ref} from "vue/macros"
+import {$ref} from "vue/macros"
 import {computed, provide, watch} from "vue"
-import {Dict, DictType, Word} from "@/types.ts"
+import {Dict, DictType} from "@/types.ts"
 import PopConfirm from "@/components/PopConfirm.vue"
 import BaseButton from "@/components/BaseButton.vue";
 import {useSettingStore} from "@/stores/setting.ts";
@@ -46,7 +46,7 @@ function changeIndex(i: number, dict: Dict) {
               v-if="!settingStore.showToolbar"/>
         </Transition>
         <div class="tabs">
-          <div class="tab current" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">当前</div>
+          <div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">当前</div>
           <div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">{{ store.collect.name }}</div>
           <div class="tab" :class="tabIndex === 2 && 'active'" @click="tabIndex = 2">{{ store.wrong.name }}</div>
           <div class="tab" :class="tabIndex === 3 && 'active'" @click="tabIndex = 3">{{ store.skip.name }}</div>
@@ -232,10 +232,6 @@ $header-height: 50rem;
           font-weight: bold;
         }
       }
-
-      .current {
-        word-break: break-word;
-      }
     }
 
   }

src/components/Practice/PracticeArticle/PracticeArticle.vue

@@ -4,7 +4,7 @@ import TypingArticle from "./TypingArticle.vue";
 import {Article, ArticleWord, DefaultArticle, DefaultWord, DisplayStatistics, TranslateType, Word} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
 import TypingWord from "@/components/Practice/PracticeWord/TypingWord.vue";
-import ArticlePanel from "./ArticlePanel.vue";
+import Panel from "../Panel.vue";
 import {onMounted, watch} from "vue";
 import {renewSectionTexts, renewSectionTranslates} from "@/hooks/translate.ts";
 import {MessageBox} from "@/utils/MessageBox.tsx";
@@ -233,9 +233,9 @@ function nextWord(word: ArticleWord) {
     </div>
 
     <div class="panel-wrapper">
-      <ArticlePanel
+      <Panel
           v-if="tabIndex === 0">
-        <div class="current-practice-article-list">
+        <div class="current-practice-dict">
           <header>
             <div class="left">
               <Tooltip title="切换词典">
@@ -254,7 +254,7 @@ function nextWord(word: ArticleWord) {
           <ArticleList :select-item="articleData.article"
                        v-model:list="store.currentDict.articles"/>
         </div>
-      </ArticlePanel>
+      </Panel>
     </div>
 
     <EditSingleArticleModal
@@ -305,24 +305,4 @@ $article-width: 50vw;
   height: calc(100% - 20rem);
 }
 
-.current-practice-article-list {
-  padding: 20rem;
-  overflow: auto;
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14rem;
-    color: black;
-
-    .left {
-      display: flex;
-      align-items: center;
-      gap: 10rem;
-    }
-  }
-
-
-}
 </style>

src/components/Practice/PracticeWord/TypingWord.vue

@@ -13,6 +13,10 @@ import Tooltip from "@/components/Tooltip.vue";
 import Options from "@/components/Practice/Options.vue";
 import Typing from "@/components/Practice/PracticeWord/Typing.vue";
 import WordPanel from "@/components/Practice/PracticeWord/WordPanel.vue";
+import ArticleList from "@/components/Article/ArticleList.vue";
+import Panel from "@/components/Practice/Panel.vue";
+import IconWrapper from "@/components/IconWrapper.vue";
+import WordList from "@/components/WordList.vue";
 
 interface IProps {
   words: Word[],
@@ -196,6 +200,7 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
       </Tooltip>
     </div>
     <Typing
+        v-if="false"
         ref="typingRef"
         :word="word"
         @wrong="wordWrong"
@@ -206,7 +211,32 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
         @skip="skip"
         @collect="collect"
     />
-    <WordPanel :list="data.words" v-model:index="data.index"/>
+    <div class="word-panel-wrapper">
+      <Panel>
+        <div class="current-practice-dict">
+          <header>
+            <div class="left">
+              <Tooltip title="切换词典">
+                <IconWrapper>
+                  <Icon icon="basil:exchange-outline"/>
+                </IconWrapper>
+              </Tooltip>
+              <div class="title">
+                {{ store.currentDict.name + `  第${store.currentDict.chapterIndex + 1}章` }}
+              </div>
+            </div>
+            <div class="right">
+              共{{ data.words.length }}词
+            </div>
+          </header>
+          <WordList
+              class="word-list"
+              :is-active="true"
+              :list="data.words"
+              :activeIndex="data.index"/>
+        </div>
+      </Panel>
+    </div>
   </div>
 </template>
 
@@ -270,6 +300,17 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
     }
   }
 
-
 }
+
+$article-width: 50vw;
+
+.word-panel-wrapper {
+  position: fixed;
+  left: 0;
+  top: 10rem;
+  z-index: 1;
+  margin-left: calc(50% + ($article-width / 2) + $space);
+  height: calc(100% - 20rem);
+}
+
 </style>

src/components/WordList.vue

@@ -64,10 +64,9 @@ watch(() => props.list, () => {
   gap: 12rem;
   width: 100%;
   height: 100%;
-  padding: 0 $space;
-  overflow-y: auto;
-  overflow-x: hidden;
   box-sizing: border-box;
+  padding: 0 $space;
+  overflow: auto;
 
   .item {
     background: var(--color-header-bg);

src/stores/base.ts

@@ -63,10 +63,10 @@ export const useBaseStore = defineStore('base', {
         }
       ],
       current: {
-        // dictType: DictType.word,
-        // index: 1,
-        dictType: DictType.article,
-        index: 0,
+        dictType: DictType.word,
+        index: 1,
+        // dictType: DictType.article,
+        // index: 0,
         editIndex: 0,
         repeatNumber: 0,
       },