feat(settingmodal): perfect setting

src/components/BaseButton.vue

@@ -5,6 +5,7 @@ import {Icon} from "@iconify/vue";
 defineProps<{
   keyboard?: string,
   active?: boolean
+  size?: string
 }>()
 
 defineEmits(['click'])
@@ -15,7 +16,10 @@ defineEmits(['click'])
   <Tooltip :disabled="!keyboard" :title="`快捷键: ${keyboard}`">
     <div class="my-button hvr-grow"
          @click="$emit('click')"
-         :class="active && 'active'">
+         :class="[
+             active && 'active',
+             size,
+         ]">
       <span><slot></slot></span>
       <div class="key-notice" v-if="keyboard">
         <Icon icon="bi:keyboard" width="14" color="#ffffff"/>
@@ -43,6 +47,14 @@ defineEmits(['click'])
   height: 40rem;
   line-height: 1;
 
+  &.small {
+    height: 30rem;
+
+    & > span {
+      font-size: 13rem;
+    }
+  }
+
   & > span {
     font-size: 16rem;
     color: white;

src/components/Practice/TypeArticle.vue

@@ -240,7 +240,14 @@ function onKeyDown(e: KeyboardEvent) {
 
       let key = currentWord.name[stringIndex]
       console.log('key', key,)
-      if (key === letter) {
+
+      let isWrong = false
+      if (store.setting.ignoreCase) {
+        isWrong = key.toLowerCase() === letter.toLowerCase()
+      } else {
+        isWrong = key === letter
+      }
+      if (isWrong) {
         input += letter
         wrong = ''
         // console.log('匹配上了')
@@ -299,9 +306,11 @@ function onKeyDown(e: KeyboardEvent) {
 
         break
       case ShortKeyMap.Show:
-        hoverIndex = {
-          sectionIndex: sectionIndex,
-          sentenceIndex: sentenceIndex,
+        if (store.setting.allowWordTip) {
+          hoverIndex = {
+            sectionIndex: sectionIndex,
+            sentenceIndex: sentenceIndex,
+          }
         }
         break
     }
@@ -396,7 +405,7 @@ function otherWord(word: ArticleWord, i: number, i2: number, i3: number) {
                           sectionIndex === indexI && sentenceIndex === indexJ && store.setting.dictation
                           ?'dictation':''
                       ]"
-                      @mouseenter="hoverIndex = {sectionIndex : indexI,sentenceIndex :indexJ}"
+                      @mouseenter="store.setting.allowWordTip && (hoverIndex = {sectionIndex : indexI,sentenceIndex :indexJ})"
                       @mouseleave="hoverIndex = {sectionIndex : -1,sentenceIndex :-1}"
                       @click="playAudio(sentence.sentence)"
                       v-for="(sentence,indexJ) in section">
@@ -494,13 +503,13 @@ function otherWord(word: ArticleWord, i: number, i2: number, i3: number) {
         font-size: 36rem;
         font-weight: 500;
         word-spacing: 3rem;
-        //opacity: 0;
+        opacity: 0;
       }
     }
 
     .article-content {
       position: relative;
-      //opacity: 0;
+      opacity: 0;
     }
 
     article {

src/components/Practice/TypeWord.vue

@@ -129,7 +129,13 @@ async function onKeyDown(e: KeyboardEvent) {
   //TODO 还有横杠
   if ((e.keyCode >= 65 && e.keyCode <= 90) || e.code === 'Space') {
     let letter = e.key
-    if ((input + letter).toLowerCase() === word.name.toLowerCase().slice(0, input.length + 1)) {
+    let isWrong = false
+    if (store.setting.ignoreCase) {
+      isWrong = (input + letter).toLowerCase() === word.name.toLowerCase().slice(0, input.length + 1)
+    } else {
+      isWrong = (input + letter) === word.name.slice(0, input.length + 1)
+    }
+    if (isWrong) {
       input += letter
       wrong = ''
       playKeySound()
@@ -152,7 +158,7 @@ async function onKeyDown(e: KeyboardEvent) {
     }
     if (input.toLowerCase() === word.name.toLowerCase()) {
       playCorrect()
-      setTimeout(next, 300)
+      setTimeout(next, store.setting.waitTimeForChangeWord)
     }
   } else {
     // console.log('e', e)
@@ -187,7 +193,9 @@ async function onKeyDown(e: KeyboardEvent) {
         next()
         break
       case ShortKeyMap.Show:
-        showFullWord = true
+        if (store.setting.allowWordTip) {
+          showFullWord = true
+        }
         break
     }
     setTimeout(() => {
@@ -199,14 +207,22 @@ async function onKeyDown(e: KeyboardEvent) {
 
 <template>
   <div class="type-word">
-    <div class="translate">{{ word.trans.join('；') }}</div>
+    <div class="translate"
+         :style="{fontSize: store.setting.foreignLanguageFontSize +'rem'}"
+    >{{ word.trans.join('；') }}
+    </div>
     <div class="word-wrapper">
-      <div class="word" :class="wrong && 'is-wrong'">
+      <div class="word"
+           :class="wrong && 'is-wrong'"
+           :style="{fontSize: store.setting.translateLanguageFontSize +'rem'}"
+      >
         <span class="input" v-if="input">{{ input }}</span>
         <span class="wrong" v-if="wrong">{{ wrong }}</span>
         <template v-if="store.setting.dictation">
           <span class="letter" v-if="!showFullWord"
-                @mouseenter="showFullWord = true">{{ resetWord.split('').map(v => '_').join('') }}</span>
+                @mouseenter="store.setting.allowWordTip && (showFullWord = true)">{{
+              resetWord.split('').map(v => '_').join('')
+            }}</span>
           <span class="letter" v-else @mouseleave="showFullWord = false">{{ resetWord }}</span>
         </template>
         <span class="letter" v-else>{{ resetWord }}</span>

src/components/Toolbar/SettingModal.vue

@@ -2,6 +2,7 @@
 import Modal from "@/components/Modal/Modal.vue"
 import {useBaseStore} from "@/stores/base.ts"
 import {Icon} from '@iconify/vue';
+import {watch, ref} from "vue";
 
 const tabIndex = $ref(0)
 const store = useBaseStore()
@@ -17,6 +18,30 @@ const props = withDefaults(defineProps<IProps>(), {
 const emit = defineEmits([
   'update:modelValue',
 ])
+
+let allSound = $ref<boolean>(true)
+
+watch([
+  () => store.setting.wordSound,
+  () => store.setting.keyboardSound,
+  () => store.setting.translateSound,
+  () => store.setting.effectSound,
+], (n) => {
+  if (n.some(v => v)) {
+    allSound = true
+  } else {
+    allSound = false
+  }
+})
+
+function changAllSound(e: boolean) {
+  allSound = e
+  store.setting.wordSound = e
+  store.setting.keyboardSound = e
+  store.setting.translateSound = e
+  store.setting.effectSound = e
+}
+
 </script>
 
 <template>
@@ -40,7 +65,8 @@ const emit = defineEmits([
           <div class="row">
             <label class="main-title">所有音效</label>
             <div class="wrapper">
-              <el-switch v-model="store.setting.value1"
+              <el-switch v-model="allSound"
+                         @change="changAllSound"
                          inline-prompt
                          active-text="开"
                          inactive-text="关"
@@ -51,7 +77,7 @@ const emit = defineEmits([
           <div class="row">
             <label class="item-title">单词发音</label>
             <div class="wrapper">
-              <el-switch v-model="store.setting.value1"
+              <el-switch v-model="store.setting.wordSound"
                          inline-prompt
                          active-text="开"
                          inactive-text="关"
@@ -61,22 +87,22 @@ const emit = defineEmits([
           <div class="row">
             <label class="sub-title">音量</label>
             <div class="wrapper">
-              <el-slider v-model="store.setting.value2"/>
-              <span>{{ store.setting.value2 }}%</span>
+              <el-slider v-model="store.setting.wordSoundVolume"/>
+              <span>{{ store.setting.wordSoundVolume }}%</span>
             </div>
           </div>
           <div class="row">
-            <label class="sub-title">音量</label>
+            <label class="sub-title">倍速</label>
             <div class="wrapper">
-              <el-slider v-model="store.setting.value3" :step="0.1" :max="4"/>
-              <span>{{ store.setting.value3 }}</span>
+              <el-slider v-model="store.setting.wordSoundSpeed" :step="0.1" :min="1" :max="4"/>
+              <span>{{ store.setting.wordSoundSpeed }}</span>
             </div>
           </div>
           <div class="line"></div>
           <div class="row">
             <label class="item-title">按键音</label>
             <div class="wrapper">
-              <el-switch v-model="store.setting.value1"
+              <el-switch v-model="store.setting.keyboardSound"
                          inline-prompt
                          active-text="开"
                          inactive-text="关"
@@ -86,15 +112,15 @@ const emit = defineEmits([
           <div class="row">
             <label class="sub-title">音量</label>
             <div class="wrapper">
-              <el-slider v-model="store.setting.value2"/>
-              <span>{{ store.setting.value2 }}%</span>
+              <el-slider v-model="store.setting.keyboardSoundVolume"/>
+              <span>{{ store.setting.keyboardSoundVolume }}%</span>
             </div>
           </div>
           <div class="line"></div>
           <div class="row">
             <label class="item-title">释义发音</label>
             <div class="wrapper">
-              <el-switch v-model="store.setting.value1"
+              <el-switch v-model="store.setting.translateSound"
                          inline-prompt
                          active-text="开"
                          inactive-text="关"
@@ -104,15 +130,15 @@ const emit = defineEmits([
           <div class="row">
             <label class="sub-title">音量</label>
             <div class="wrapper">
-              <el-slider v-model="store.setting.value2"/>
-              <span>{{ store.setting.value2 }}%</span>
+              <el-slider v-model="store.setting.translateSoundVolume"/>
+              <span>{{ store.setting.translateSoundVolume }}%</span>
             </div>
           </div>
           <div class="line"></div>
           <div class="row">
             <label class="item-title">效果音（章节结算页烟花音效）</label>
             <div class="wrapper">
-              <el-switch v-model="store.setting.value1"
+              <el-switch v-model="store.setting.effectSound"
                          inline-prompt
                          active-text="开"
                          inactive-text="关"
@@ -122,8 +148,8 @@ const emit = defineEmits([
           <div class="row">
             <label class="sub-title">音量</label>
             <div class="wrapper">
-              <el-slider v-model="store.setting.value2"/>
-              <span>{{ store.setting.value2 }}%</span>
+              <el-slider v-model="store.setting.effectSoundVolume"/>
+              <span>{{ store.setting.effectSoundVolume }}%</span>
             </div>
           </div>
         </div>
@@ -145,7 +171,7 @@ const emit = defineEmits([
           <div class="row">
             <label class="item-title">练习时展示上一个/下一个单词</label>
             <div class="wrapper">
-              <el-switch v-model="store.setting.value1"
+              <el-switch v-model="store.setting.showNearWord"
                          inline-prompt
                          active-text="开"
                          inactive-text="关"
@@ -159,7 +185,7 @@ const emit = defineEmits([
           <div class="row">
             <label class="item-title">是否忽略大小写</label>
             <div class="wrapper">
-              <el-switch v-model="store.setting.value1"
+              <el-switch v-model="store.setting.ignoreCase"
                          inline-prompt
                          active-text="开"
                          inactive-text="关"
@@ -173,7 +199,7 @@ const emit = defineEmits([
           <div class="row">
             <label class="item-title">是否允许默写模式下显示提示</label>
             <div class="wrapper">
-              <el-switch v-model="store.setting.value1"
+              <el-switch v-model="store.setting.allowWordTip"
                          inline-prompt
                          active-text="开"
                          inactive-text="关"
@@ -181,7 +207,7 @@ const emit = defineEmits([
             </div>
           </div>
           <div class="desc">
-            开启后，可以通过鼠标 hover 单词显示正确答案
+            开启后，可以通过鼠标 hover 单词或者按 Esc键 显示正确答案
           </div>
           <div class="line"></div>
           <div class="row">
@@ -190,15 +216,21 @@ const emit = defineEmits([
           <div class="row">
             <label class="sut-title">外语字体</label>
             <div class="wrapper">
-              <el-slider v-model="store.setting.value2"/>
-              <span>{{ store.setting.value2 }}px</span>
+              <el-slider
+                  :min="10"
+                  :max="100"
+                  v-model="store.setting.foreignLanguageFontSize"/>
+              <span>{{ store.setting.foreignLanguageFontSize }}</span>
             </div>
           </div>
           <div class="row">
             <label class="sut-title">中文字体</label>
             <div class="wrapper">
-              <el-slider v-model="store.setting.value2"/>
-              <span>{{ store.setting.value2 }}px</span>
+              <el-slider
+                  :min="10"
+                  :max="100"
+                  v-model="store.setting.translateLanguageFontSize"/>
+              <span>{{ store.setting.translateLanguageFontSize }}</span>
             </div>
           </div>
 
@@ -209,7 +241,12 @@ const emit = defineEmits([
           <div class="row">
             <label class="sut-title">切换下一个单词时间</label>
             <div class="wrapper">
-              <span>{{ store.setting.value2 }}毫秒</span>
+              <el-input-number v-model="store.setting.waitTimeForChangeWord"
+                               :min="6"
+                               :max="100"
+                               type="number"
+              />
+              <span>毫秒</span>
             </div>
           </div>
         </div>

src/components/Toolbar/TrabslateSetting.vue

@@ -25,6 +25,10 @@ const TranslateEngine = [
   {value: 'baidu', label: '百度'},
   {value: 'youdao', label: '有道'},
 ]
+
+function save(){
+
+}
 </script>
 
 <template>
@@ -55,11 +59,11 @@ const TranslateEngine = [
       <div class="mini-row">
         <label class="item-title">翻译类型</label>
         <el-radio-group v-model="translateType" size="small">
-          <el-radio-button :label="0">本地翻译</el-radio-button>
-          <el-radio-button :label="1">网络翻译</el-radio-button>
+          <el-radio-button :label="1">本地翻译</el-radio-button>
+          <el-radio-button :label="0">网络翻译</el-radio-button>
         </el-radio-group>
       </div>
-      <div class="mini-row">
+      <div class="mini-row" v-if="translateType">
         <label class="item-title">本地翻译</label>
         <div class="wrapper">
           <Icon icon="mingcute:edit-line"
@@ -67,7 +71,7 @@ const TranslateEngine = [
           />
         </div>
       </div>
-      <div class="mini-row">
+      <div class="mini-row" v-else>
         <label class="item-title">网络翻译</label>
         <div class="wrapper">
           <el-select v-model="networkTranslateEngine" class="m-2" placeholder="Select" size="small">
@@ -81,8 +85,8 @@ const TranslateEngine = [
         </div>
       </div>
       <div class="footer">
-        <BaseButton>取消</BaseButton>
-        <BaseButton>确定</BaseButton>
+        <BaseButton size="small" @click="show = false">取消</BaseButton>
+        <BaseButton size="small" @click="save">确定</BaseButton>
       </div>
     </MiniModal>
   </div>
@@ -99,5 +103,6 @@ const TranslateEngine = [
   margin-top: 10rem;
   display: flex;
   justify-content: flex-end;
+  gap: 10rem;
 }
 </style>

src/components/Toolbar/VolumeSetting.vue

@@ -30,9 +30,9 @@ function toggle() {
     </Tooltip>
     <MiniModal v-model="show">
       <div class="mini-row">
-        <label class="item-title">按键音</label>
+        <label class="item-title">单词发音</label>
         <div class="wrapper">
-          <el-switch v-model="store.setting.keybroadVolume"
+          <el-switch v-model="store.setting.wordSound"
                      inline-prompt
                      active-text="开"
                      inactive-text="关"
@@ -42,7 +42,17 @@ function toggle() {
       <div class="mini-row">
         <label class="item-title">按键音</label>
         <div class="wrapper">
-          <el-switch v-model="store.setting.effectVolume"
+          <el-switch v-model="store.setting.keyboardSound"
+                     inline-prompt
+                     active-text="开"
+                     inactive-text="关"
+          />
+        </div>
+      </div>
+      <div class="mini-row">
+        <label class="item-title">效果音</label>
+        <div class="wrapper">
+          <el-switch v-model="store.setting.effectSound"
                      inline-prompt
                      active-text="开"
                      inactive-text="关"