Optimize UI interface

src/components/Article/ArticleList.vue

@@ -13,7 +13,7 @@ interface IProps {
 
 const props = defineProps<IProps>()
 const emit = defineEmits<{
-  selectItem: [index: Article],
+  selectItem: [val: Article],
   delSelectItem: [],
   'update:searchKey': [val: string],
   'update:list': [list: Article[]],

src/components/Practice/Panel.vue

@@ -36,7 +36,10 @@ watch(() => settingStore.showPanel, n => {
 let practiceType = $ref(DictType.word)
 
 function changeIndex(i: number, dict: Dict) {
-  store.changeDict(dict, dict.chapterIndex, i,practiceType)
+  store.changeDict(dict, dict.chapterIndex, i, practiceType)
+  setTimeout(() => {
+    tabIndex = 0
+  })
 }
 
 
@@ -70,7 +73,10 @@ function changeIndex(i: number, dict: Dict) {
                     <el-radio-button border :label="DictType.word">单词</el-radio-button>
                     <el-radio-button border :label="DictType.article">文章</el-radio-button>
                   </el-radio-group>
-                  <div class="dict-name" v-if="practiceType === DictType.word">{{ store.collect.words.length }}个单词</div>
+                  <div class="dict-name" v-if="practiceType === DictType.word">{{
+                      store.collect.words.length
+                    }}个单词
+                  </div>
                   <div class="dict-name" v-else> {{ store.collect.articles.length }}篇文章</div>
                 </div>
                 <template v-if="store.current.dictType !== DictType.collect &&

src/components/Practice/PracticeArticle/PracticeArticle.vue

@@ -207,6 +207,12 @@ function nextWord(word: ArticleWord) {
   }
 }
 
+function changePracticeArticle(val: Article) {
+  let rIndex = store.currentDict.articles.findIndex(v => v.id === val.id)
+  if (rIndex > -1) {
+    store.currentDict.chapterIndex = rIndex
+  }
+}
 </script>
 
 <template>
@@ -224,11 +230,13 @@ function nextWord(word: ArticleWord) {
           />
         </div>
         <div class="swiper-item">
-          <TypingWord
-              :words="wordData.words"
-              :index="wordData.index"
-              v-if="tabIndex === 1"
-          />
+          <div class="typing-word-wrapper">
+            <TypingWord
+                :words="wordData.words"
+                :index="wordData.index"
+                v-if="tabIndex === 1"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -252,8 +260,11 @@ function nextWord(word: ArticleWord) {
               {{ store.currentDict.articles.length }}篇文章
             </div>
           </header>
-          <ArticleList :select-item="articleData.article"
-                       v-model:list="store.currentDict.articles"/>
+          <ArticleList
+              style="padding: 0 20rem;"
+              @select-item="changePracticeArticle"
+              :select-item="articleData.article"
+              v-model:list="store.currentDict.articles"/>
         </div>
       </Panel>
     </div>
@@ -283,6 +294,7 @@ $article-width: 50vw;
       height: 50%;
       overflow: auto;
       display: flex;
+      justify-content: center;
     }
   }
 
@@ -297,6 +309,10 @@ $article-width: 50vw;
   width: $article-width;
 }
 
+.typing-word-wrapper {
+  width: var(--toolbar-width);
+}
+
 .panel-wrapper {
   position: fixed;
   left: 0;

src/components/Practice/PracticeWord/TypingWord.vue

@@ -210,33 +210,35 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
         @skip="skip"
         @collect="collect"
     />
-    <div class="word-panel-wrapper">
-      <Panel>
-        <div class="panel-page-item">
-          <header>
-            <div class="left">
-              <Tooltip title="切换词典">
-                <IconWrapper>
-                  <Icon @click="runtimeStore.showDictModal = true" icon="basil:exchange-outline"/>
-                </IconWrapper>
-              </Tooltip>
-              <div class="title">
-                {{ store.dictTitle }}
+    <Teleport to="body">
+      <div class="word-panel-wrapper">
+        <Panel>
+          <div class="panel-page-item">
+            <header>
+              <div class="left">
+                <Tooltip title="切换词典">
+                  <IconWrapper>
+                    <Icon @click="runtimeStore.showDictModal = true" icon="basil:exchange-outline"/>
+                  </IconWrapper>
+                </Tooltip>
+                <div class="title">
+                  {{ store.dictTitle }}
+                </div>
               </div>
-            </div>
-            <div class="right">
-              {{ data.words.length }}个单词
-            </div>
-          </header>
-          <WordList
-              class="word-list"
-              :is-active="true"
-              @change="(i:number) => data.index = i"
-              :list="data.words"
-              :activeIndex="data.index"/>
-        </div>
-      </Panel>
-    </div>
+              <div class="right">
+                {{ data.words.length }}个单词
+              </div>
+            </header>
+            <WordList
+                class="word-list"
+                :is-active="true"
+                @change="(i:number) => data.index = i"
+                :list="data.words"
+                :activeIndex="data.index"/>
+          </div>
+        </Panel>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -309,7 +311,7 @@ $article-width: 50vw;
   left: 0;
   top: 10rem;
   z-index: 1;
-  margin-left: calc(50% + ($article-width / 2) + $space);
+  margin-left: calc(50% + (var(--toolbar-width) / 2) + $space);
   height: calc(100% - 20rem);
 }
 

src/stores/base.ts

@@ -194,10 +194,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,
         practiceType: DictType.word,
       },
       simpleWords: [