优化ui

src/components/BaseButton.vue

@@ -7,11 +7,15 @@ const props = defineProps<{
   active?: boolean
 }>()
 
+defineEmits(['click'])
+
 </script>
 
 <template>
   <Tooltip :disabled="!keyboard" :title="`快捷键: ${keyboard}`">
-    <div class="my-button hvr-grow" :class="active && 'active'">
+    <div class="my-button hvr-grow"
+         @click="$emit('click')"
+         :class="active && 'active'">
       <span><slot></slot></span>
       <div class="key-notice" v-if="keyboard">
         <keyboard-one theme="outline" size="14" fill="#ffffff" :strokeWidth="2"/>

src/components/ChapterList.vue

@@ -18,7 +18,7 @@ function next() {
   <div class="list">
     <div class="item" :class="activeIndex === index && 'active'"
          v-for="(item,index) in list" @click="$emit('update:activeIndex', index)">
-      <div class="title">第{{ index + 1 }}章</div>
+      <div class="title">第{{ index + 1 }}章 {{item.length}}词</div>
     </div>
   </div>
 </template>

src/components/Modal/DictModal.vue

@@ -3,20 +3,19 @@ import {childrenEnglish} from '@/assets/dictionary.ts'
 import {ArrowLeft, ArrowRight, Close} from '@icon-park/vue-next'
 import {useBaseStore} from "@/stores/base.ts"
 import {watch} from "vue"
-import {Dict, Word} from "@/types.ts"
+import {Dict, DictType, Sort, Word} from "@/types.ts"
 import {chunk} from "lodash";
 import {$computed, $ref} from "vue/macros";
 import WordList from "@/components/WordList.vue";
 import ChapterList from "@/components/ChapterList.vue"
 import Modal from "@/components/Modal/Modal.vue";
-import IconWrapper from "@/components/IconWrapper.vue";
 import BaseButton from "@/components/BaseButton.vue";
 
 const store = useBaseStore()
 let currentSelectDict: Dict = $ref({
   name: '新概念英语-2',
   chapterList: [],
-  chapterIndex: -1
+  chapterIndex: -1,
 } as any)
 let step = $ref(0)
 
@@ -30,18 +29,30 @@ watch(store.currentDict, (n: Dict) => {
 
 async function selectDict(item: Dict) {
   currentSelectDict = {
+    type: DictType.inner,
+    sort: Sort.normal,
     ...item,
     wordList: [],
     chapterList: [],
     chapterIndex: 0,
+    chapterWordNumber: 15,
     wordIndex: 0,
+    dictStatistics: []
   }
   let r = await fetch(`/public/${item.url}`)
   r.json().then(v => {
     currentSelectDict.wordList = v
-    currentSelectDict.chapterList = chunk(v, 15)
+    currentSelectDict.chapterList = chunk(v, currentSelectDict.chapterWordNumber)
   })
 }
+
+function changeDict() {
+  store.changeDict(currentSelectDict)
+}
+
+function resetChapterList() {
+  currentSelectDict.chapterList = chunk(currentSelectDict.wordList, currentSelectDict.chapterWordNumber)
+}
 </script>
 
 <template>
@@ -87,13 +98,23 @@ async function selectDict(item: Dict) {
               </div>
             </div>
             <div class="chapter-wrapper">
+              <div class="chapter-word-number">
+                <span>每章单词数:</span>
+                <el-slider :min="10"
+                           :step="10"
+                           :max="100"
+                           v-model="currentSelectDict.chapterWordNumber"
+                           @change="resetChapterList"
+                />
+                <span>{{ currentSelectDict.chapterWordNumber }}</span>
+              </div>
               <ChapterList
                   class="chapter-list"
                   :list="currentSelectDict.chapterList"
                   v-model:active-index="currentSelectDict.chapterIndex"
               />
               <div class="footer">
-                <BaseButton>确定</BaseButton>
+                <BaseButton @click="changeDict">确定</BaseButton>
               </div>
             </div>
           </div>
@@ -148,7 +169,7 @@ $time: 0.3s;
 $header-height: 60rem;
 
 .slide {
-  width: 60vw;
+  width: 1100rem;
   height: 70vh;
 
   .slide-list {
@@ -200,12 +221,21 @@ $header-height: 60rem;
   }
 }
 
-
 $footer-height: 40rem;
 
 .chapter-wrapper {
   min-width: 300rem;
 
+  .chapter-word-number {
+    padding-left: $space;
+    display: flex;
+    color: black;
+    gap: 10rem;
+    font-size: 14rem;
+    word-break: keep-all;
+    align-items: center;
+  }
+
   .chapter-list {
     height: calc(100% - $footer-height);
   }
@@ -239,6 +269,7 @@ $footer-height: 40rem;
       gap: 20rem;
 
       .tab {
+        color: var(--color-font-1);
         cursor: pointer;
         padding: 10rem;
         padding-bottom: 5rem;
@@ -263,13 +294,14 @@ $footer-height: 40rem;
         margin-bottom: 10rem;
 
         .tag {
+          color: var(--color-font-1);
           cursor: pointer;
           padding: 5rem 10rem;
           border-radius: 20rem;
 
           &.active {
+            color: var(--color-font-active-1);
             background: gray;
-            color: whitesmoke;
           }
         }
       }

src/components/Modal/Modal.vue

@@ -135,6 +135,7 @@ $header-height: 60rem;
 
   .modal {
     position: relative;
+    //background: white;
     background: var(--color-main-bg);
     //box-shadow: var(--color-main-bg) 0 0 10rem 1rem;
     //width: 75vw;

src/components/Side.vue

@@ -90,6 +90,7 @@ function changeDict(dict: Dict, i: number) {
         <swiper-slide>
           <div class="page0">
             <header>
+              <a href="" target="_blank"></a>
               <div class="dict-name">总词数：{{ store.wrongDict.wordList.length }}</div>
             </header>
             <WordList

src/components/Type.vue

@@ -30,7 +30,7 @@ import Type from "@/components/Type.vue";
 let input = $ref('')
 let wrong = $ref('')
 let showFullWord = $ref(false)
-let isDictation = $ref(false)
+let isDictation = $ref(true)
 let activeIndex = $ref(-1)
 const store = useBaseStore()
 

src/stores/base.ts

@@ -146,7 +146,7 @@ export const useBaseStore = defineStore('base', {
             this.dictModalIsOpen2 = false
         },
         async changeDict(dict: Dict, chapterIndex: number = -1, wordIndex: number = -1) {
-            console.log('changeDict')
+            console.log('changeDict',dict)
             if ([DictType.newWordDict,
                 DictType.skipWordDict,
                 DictType.wrongDict].includes(dict.type)) {
@@ -162,14 +162,13 @@ export const useBaseStore = defineStore('base', {
                 } else {
                     // let r = await fetch(`/public/${dict.url}`)
                     // r.json().then(v => {
-                    //     this.currentDictType.name === dict.type
-                    //     this.currentDictType.dictUrl = dict.url
-                    //
+                    //     this.currentDictType === dict.type
                     // })
                     this.dict = cloneDeep(dict)
-                    this.dict.chapterList = chunk(this.dict.wordList, 15)
-                    this.dict.chapterIndex = chapterIndex === -1 ? 0 : chapterIndex
-                    this.dict.wordIndex = wordIndex === -1 ? 0 : wordIndex
+                    // this.dict.chapterList = chunk(this.dict.wordList, 15)
+                    // this.dict.chapterIndex = chapterIndex === -1 ? 0 : chapterIndex
+                    // this.dict.wordIndex = wordIndex === -1 ? 0 : wordIndex
+                    this.currentDictType = dict.type
                 }
             }
         }

src/types.ts

@@ -106,6 +106,7 @@ export interface Dict extends DictJson {
     chapterList: Word[][],
     chapterIndex: number,
     wordIndex: number,
+    chapterWordNumber: number,
     dictStatistics: DictStatistics[]
 }