save

Note.md

@@ -47,4 +47,8 @@ A cold welcome 有bug
 
 http://enpuz.com/ 语法分析工具
 
-键盘音效应该多放几遍
+键盘音效应该多放几遍
+
+加载单词列表时需要loading
+
+背单词页面div，位置应该恒定，不应该随翻译内容变动而跳动

src/components/ChapterList.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 
-import {Dict} from "@/types.ts"
+import {Dict, Word} from "@/types.ts"
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {$computed} from "vue/macros";
+import {useRuntimeStore} from "@/stores/runtime.ts";
 
 const props = defineProps<{
   dict: Dict,
@@ -14,12 +15,27 @@ const emit = defineEmits<{
   'update:activeIndex': [index: number]
 }>()
 
+const runtimeStore = useRuntimeStore()
 
 const list: any[] = $computed(() => {
   if (props.isArticle) return props.dict.articles
   return props.dict.chapterWords
 })
 
+
+function showWordListModal(index: number, item: Word[]) {
+  if (runtimeStore.editDict.translateLanguage === 'common') {
+    console.time()
+    item.map((w: Word) => {
+      if (!w.trans.length){
+        let res =  runtimeStore.translateWordList.find(a => a.name === w.name)
+        if (res) w = Object.assign(w, res)
+      }
+    })
+    console.timeEnd()
+  }
+  emitter.emit(EventKey.openWordListModal, {title: `第${index + 1}章`, list: item})
+}
 </script>
 
 <template>
@@ -37,7 +53,7 @@ const list: any[] = $computed(() => {
       </template>
       <template v-else>
         <div class="title"
-             @click.stop="emitter.emit(EventKey.openWordListModal,{title:`第${index + 1}章`,list:item})"
+             @click.stop="showWordListModal(index,item)"
         >第{{ index + 1 }}章&nbsp;&nbsp;&nbsp;{{ item.length }}词
         </div>
       </template>

src/components/Practice/Panel.vue

@@ -8,6 +8,7 @@ import {Dict, DictType, Word} from "@/types.ts"
 import PopConfirm from "@/components/PopConfirm.vue"
 import BaseButton from "@/components/BaseButton.vue";
 import {useSettingStore} from "@/stores/setting.ts";
+import Close from "@/components/Close.vue";
 
 const props = defineProps<{
   list?: Word[],
@@ -42,7 +43,10 @@ const currentDict: Dict = $computed(() => {
 })
 
 const currentData = $computed(() => {
-  if (store.current.dictType !== currentDict.type) return {list: currentDict.chapterWords[currentDict.chapterIndex] ?? [], index: -1}
+  if (store.current.dictType !== currentDict.type) return {
+    list: currentDict.chapterWords[currentDict.chapterIndex] ?? [],
+    index: -1
+  }
   else return props
 })
 
@@ -76,8 +80,13 @@ function changeIndex(i: number, dict: Dict) {
   <Transition name="fade">
     <div class="panel" v-if="settingStore.showPanel">
       <header>
+        <Transition name="fade">
+          <Close
+              @click="settingStore.showPanel = false"
+              v-if="!settingStore.showToolbar"/>
+        </Transition>
         <div class="tabs">
-          <div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">
+          <div class="tab current" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">
             {{ currentDict.name + `  第${currentDict.chapterIndex + 1}章` }}
           </div>
           <div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">{{ store.new.name }}</div>
@@ -188,7 +197,7 @@ $header-height: 50rem;
 
 .slide {
   width: 100%;
-  height: calc(100% - $header-height);
+  flex: 1;
   overflow: hidden;
 
   .slide-list {
@@ -257,38 +266,44 @@ $header-height: 50rem;
   z-index: 1;
 
   & > header {
-    height: $header-height;
+    min-height: 50rem;
+    box-sizing: border-box;
     position: relative;
     display: flex;
     align-items: center;
+    padding: 10rem 15rem;
+    border-bottom: 1px solid #e1e1e1;
+    gap: 15rem;
+
+    .close {
+      cursor: pointer;
+    }
 
     .tabs {
-      padding: 10rem 20rem;
       justify-content: flex-end;
       width: 100%;
       display: flex;
-      align-items: flex-end;
-      border-bottom: 1px solid #e1e1e1;
+      align-items: center;
       gap: 15rem;
       font-size: 14rem;
       color: gray;
 
       .tab {
         cursor: pointer;
+        word-break: keep-all;
+        font-size: 16rem;
 
         &.active {
-          font-size: 16rem;
           color: rgb(36, 127, 255);
           font-weight: bold;
         }
       }
+
+      .current {
+        word-break: break-word;
+      }
     }
 
-    .close {
-      cursor: pointer;
-      position: absolute;
-      right: 20rem;
-    }
   }
 }
 

src/components/Practice/TypeWord.vue

@@ -203,7 +203,22 @@ function repeat() {
 
 async function onKeyDown(e: KeyboardEvent) {
   //TODO 还有横杠
-  if ((e.keyCode >= 65 && e.keyCode <= 90) || e.code === 'Space') {
+  //非英文模式下，输入区域的 keyCode 均为 229时，
+  if ((e.keyCode >= 65 && e.keyCode <= 90)
+      || (e.keyCode >= 48 && e.keyCode <= 57)
+      || e.code === 'Space'
+      || e.code === 'Slash'
+      || e.code === 'Quote'
+      || e.code === 'Comma'
+      || e.code === 'BracketLeft'
+      || e.code === 'BracketRight'
+      || e.code === 'Period'
+      || e.code === 'Minus'
+      || e.code === 'Equal'
+      || e.code === 'Semicolon'
+      || e.code === 'Backquote'
+      || e.keyCode === 229
+  ) {
     if (inputLock) return
     inputLock = true
     let letter = e.key
@@ -422,7 +437,7 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
   .options {
     margin-top: 10rem;
     display: flex;
-    gap: 15rem;
+    gap: 25rem;
     font-size: 18rem;
   }
 

src/components/Toolbar/DictModal.vue

@@ -2,7 +2,7 @@
 import {dictionaryResources} from '@/assets/dictionary.ts'
 import {useBaseStore} from "@/stores/base.ts"
 import {watch} from "vue"
-import {DefaultDict, Dict, DictResource, DictType, languageCategoryOptions, Word} from "@/types.ts"
+import {DefaultDict, Dict, DictResource, DictType, languageCategoryOptions} from "@/types.ts"
 import {chunk, cloneDeep, groupBy} from "lodash-es";
 import {$computed, $ref} from "vue/macros";
 import Modal from "@/components/Modal/Modal.vue";
@@ -14,7 +14,6 @@ import {ActivityCalendar} from "vue-activity-calendar";
 import "vue-activity-calendar/style.css";
 import ChapterList from "@/components/ChapterList.vue";
 import WordListModal from "@/components/WordListModal.vue";
-import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {isArticle} from "@/hooks/article.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
@@ -49,12 +48,21 @@ watch(() => props.modelValue, (n: boolean) => {
 })
 
 async function selectDict(item: DictResource) {
-
   console.log('item', item)
   step = 1
-  let find = baseStore.myDicts.find((v: Dict) => v.name === item.name)
+  let find: Dict = baseStore.myDicts.find((v: Dict) => v.name === item.name)
   if (find) {
-    runtimeStore.editDict = cloneDeep(find)
+    if (find.type === DictType.article) {
+      if (!find.articles.length) {
+        let r = await fetch(`./dicts/${find.language}/${find.type}/${find.translateLanguage}/${find.url}`)
+        let v = await r.json()
+        find.articles = v.map(s => {
+          s.id = uuidv4()
+          return s
+        })
+      }
+      runtimeStore.editDict = cloneDeep(find)
+    }
   } else {
     let data: Dict = {
       ...DefaultDict,
@@ -71,15 +79,6 @@ async function selectDict(item: DictResource) {
         }))
         runtimeStore.editDict = cloneDeep(data)
       } else {
-        if (data.translateLanguage === 'common') {
-          console.time()
-          v.map((w: Word) => {
-            let res =  runtimeStore.translateWordList.find(a => a.name === w.name)
-            if (res) w = Object.assign(w, res)
-          })
-          console.timeEnd()
-        }
-
         data.originWords = v
         data.words = v
         data.chapterWords = chunk(v, data.chapterWordNumber)
@@ -216,10 +215,8 @@ const dictIsArticle = $computed(() => {
                    v-if="dictIsArticle"
               >总文章：{{ runtimeStore.editDict.articles.length }}篇
               </div>
-              <div class="num"
-                   v-else
-                   @click="emitter.emit(EventKey.openWordListModal,{title:'所有单词',list:runtimeStore.editDict.words})">
-                总词汇：<span class="count">{{ runtimeStore.editDict.length }}词</span>
+              <div class="num" v-else>
+                总词汇：<span>{{ runtimeStore.editDict.length }}词</span>
               </div>
               <div class="num">开始日期：-</div>
               <div class="num">花费时间：-</div>

src/components/Toolbar/Toolbar.vue

@@ -167,7 +167,7 @@ header {
         display: flex;
         gap: 10rem;
         align-items: center;
-        overflow: hidden;
+        //overflow: hidden;
         transition: all .3s;
       }
     }