diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index baa3f068..e3b096a7 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -365,8 +365,9 @@ footer {
     transition: all .3s;
   }
 
-  .volume, .collect, .easy {
+  svg {
     opacity: 0;
+    color: var(--color-icon-hightlight);
   }
 
   &.active {
@@ -376,15 +377,21 @@ footer {
       color: var(--color-sub-text);
     }
 
-    .volume, .collect, .easy, .fill {
+    svg {
       color: var(--color-icon-hightlight);
     }
   }
 
+  .fill {
+    svg {
+      opacity: 1 !important;
+    }
+  }
+
   &:hover {
     @extend .active;
 
-    .volume, .collect, .easy {
+    svg {
       opacity: 1;
     }
   }
diff --git a/src/components/BaseIcon.vue b/src/components/BaseIcon.vue
index 592294a0..6a562957 100644
--- a/src/components/BaseIcon.vue
+++ b/src/components/BaseIcon.vue
@@ -8,6 +8,7 @@ defineProps<{
   title?: string,
   icon: string,
   disabled?: boolean,
+  noBg?: boolean,
 }>()
 
 const emit = defineEmits(['click'])
@@ -20,7 +21,7 @@ const emit = defineEmits(['click'])
         v-bind="$attrs"
         @click="e => (!disabled) && emit('click',e)"
         class="icon-wrapper"
-        :class="{disabled}"
+        :class="{disabled,noBg}"
     >
       <Icon :icon="icon"/>
     </div>
@@ -42,9 +43,12 @@ $w: 1.4rem;
   background: transparent;
   transition: all .3s;
 
-  &:hover:not(.disabled) {
+  &:hover:not(.disabled,.noBg) {
     background: var(--color-icon-hightlight);
-    color: white;
+
+    svg {
+      color: white;
+    }
   }
 
   &.disabled {
diff --git a/src/components/icon/VolumeIcon.vue b/src/components/icon/VolumeIcon.vue
index 3ca135b7..d109ea4c 100644
--- a/src/components/icon/VolumeIcon.vue
+++ b/src/components/icon/VolumeIcon.vue
@@ -1,10 +1,5 @@
 <script setup lang="ts">
-import {Icon} from "@iconify/vue";
-
-import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
-import Tooltip from "@/pages/pc/components/Tooltip.vue";
-import {ShortcutKey} from "@/types.ts";
-import {useSettingStore} from "@/stores/setting.ts";
+import BaseIcon from "@/components/BaseIcon.vue";
 
 const props = withDefaults(defineProps<{
   time?: number,
@@ -15,7 +10,6 @@ const props = withDefaults(defineProps<{
   simple: false
 })
 const emit = defineEmits(['click'])
-const settingStore = useSettingStore()
 
 let step = $ref(2)
 let count = $ref(0)
@@ -49,37 +43,18 @@ function click() {
   play()
 }
 
+let iconList = ['bx:volume', 'bx:volume-low', 'bx:volume-full']
 defineExpose({play})
+
 </script>
 
 <template>
-  <div class="center"
-       v-if="props.simple"
-       @click.stop="click">
-    <Icon v-if="step === 0" icon="bx:volume"/>
-    <Icon v-if="step === 1" icon="bx:volume-low"/>
-    <Icon v-if="step === 2" icon="bx:volume-full"/>
-  </div>
-  <IconWrapper @click.stop="click" v-else>
-    <div class="center">
-      <Icon v-if="step === 0" icon="bx:volume"/>
-      <Icon v-if="step === 1" icon="bx:volume-low"/>
-      <Icon v-if="step === 2" icon="bx:volume-full"/>
-    </div>
-  </IconWrapper>
+  <BaseIcon @click.stop="click"
+            v-if="props.simple"
+            no-bg
+            :icon="iconList[step]"/>
+  <BaseIcon @click.stop="click" v-else :icon="iconList[step]"/>
 </template>
 
 <style scoped lang="scss">
-.center {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  $w: 1.6rem;
-
-  :deep(svg) {
-    width: $w;
-    height: $w;
-  }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/pc/Setting.vue b/src/pages/pc/Setting.vue
index f276bc44..6c51df00 100644
--- a/src/pages/pc/Setting.vue
+++ b/src/pages/pc/Setting.vue
@@ -375,7 +375,7 @@ function importData(e) {
           </div>
           <div class="scroll">
             <div class="row" v-for="item of Object.entries(settingStore.shortcutKeyMap)">
-              <label class="item-title">{{ $t(item[0]) }}</label>
+              <label class="item-title">{{ item[0] }}</label>
               <div class="wrapper" @click="editShortcutKey = item[0]">
                 <div class="set-key" v-if="editShortcutKey === item[0]">
                   <input :value="item[1]?item[1]:'未设置快捷键'" readonly type="text" @blur="editShortcutKey = ''">
diff --git a/src/pages/pc/article/practice-article/index.vue b/src/pages/pc/article/practice-article/index.vue
index e2163902..de3593e8 100644
--- a/src/pages/pc/article/practice-article/index.vue
+++ b/src/pages/pc/article/practice-article/index.vue
@@ -17,7 +17,6 @@ import BaseIcon from "@/components/BaseIcon.vue";
 import {useArticleOptions} from "@/hooks/dict.ts";
 import ArticleList from "@/pages/pc/components/list/ArticleList.vue";
 import {useOnKeyboardEventListener} from "@/hooks/event.ts";
-import TranslateSetting from "@/pages/pc/components/toolbar/TranslateSetting.vue";
 import {genArticleSectionData, usePlaySentenceAudio} from "@/hooks/article.ts";
 import {ElProgress} from 'element-plus';
 
@@ -296,13 +295,11 @@ const {playSentenceAudio} = usePlaySentenceAudio()
                   <div class="title">
                     {{ store.currentBook.name }}
                   </div>
-                  <Tooltip
+                  <BaseIcon
                       :title="`下一篇(${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
-                      v-if="store.currentBook.lastLearnIndex < articleData.articles.length - 1">
-                    <IconWrapper>
-                      <Icon @click="emitter.emit(EventKey.continueStudy)" icon="octicon:arrow-right-24"/>
-                    </IconWrapper>
-                  </Tooltip>
+                      v-if="store.currentBook.lastLearnIndex < articleData.articles.length - 1"
+                      @click="emitter.emit(EventKey.continueStudy)"
+                      icon="octicon:arrow-right-24"/>
                 </div>
                 <div class="right">
                   {{ articleData.articles.length }}篇文章
@@ -373,7 +370,7 @@ const {playSentenceAudio} = usePlaySentenceAudio()
           <div class="flex flex-col items-center justify-center gap-1">
             <audio ref="audioRef" v-if="articleData.article.audioSrc" :src="articleData.article.audioSrc"
                    controls></audio>
-            <div class="flex gap-3 center">
+            <div class="flex gap-2 center">
               <BaseIcon
                   :title="`下一句(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
                   icon="icon-park-outline:go-ahead"
@@ -383,20 +380,14 @@ const {playSentenceAudio} = usePlaySentenceAudio()
                   icon="fluent:replay-16-filled"
                   @click="play"/>
 
-              <Tooltip
+              <BaseIcon
+                  @click="settingStore.dictation = !settingStore.dictation"
                   :title="`开关默写模式(${settingStore.shortcutKeyMap[ShortcutKey.ToggleDictation]})`"
-              >
-                <IconWrapper>
-                  <Icon icon="majesticons:eye-off-line"
-                        v-if="settingStore.dictation"
-                        @click="settingStore.dictation = false"/>
-                  <Icon icon="mdi:eye-outline"
-                        v-else
-                        @click="settingStore.dictation = true"/>
-                </IconWrapper>
-              </Tooltip>
+                  :icon="['majesticons:eye-off-line','mdi:eye-outline'][settingStore.dictation?0:1]"/>
 
-              <TranslateSetting/>
+              <BaseIcon :icon="['mdi:translate','mdi:translate-off'][settingStore.translate?0:1]"
+                        :title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
+                        @click="settingStore.translate = !settingStore.translate"/>
 
               <BaseIcon
                   :title="`编辑(${settingStore.shortcutKeyMap[ShortcutKey.EditArticle]})`"
@@ -413,8 +404,8 @@ const {playSentenceAudio} = usePlaySentenceAudio()
       </div>
       <div class="progress">
         <ElProgress :percentage="progress"
-                     :stroke-width="8"
-                     :show-text="false"/>
+                    :stroke-width="8"
+                    :show-text="false"/>
       </div>
     </div>
   </div>
diff --git a/src/pages/pc/components/BasePage.vue b/src/pages/pc/components/BasePage.vue
index caf80e03..0c7f0acd 100644
--- a/src/pages/pc/components/BasePage.vue
+++ b/src/pages/pc/components/BasePage.vue
@@ -11,7 +11,7 @@
 </template>
 
 <style scoped lang="scss">
-.page{
+.page {
   min-height: calc(100vh - 1.2rem);
   margin-top: 1.2rem;
 }
diff --git a/src/pages/pc/components/Book.vue b/src/pages/pc/components/Book.vue
index 462eabee..51b76b4c 100644
--- a/src/pages/pc/components/Book.vue
+++ b/src/pages/pc/components/Book.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {Dict} from "@/types.ts";
 import {Icon} from "@iconify/vue";
-import {ElProgress,ElCheckbox} from 'element-plus';
+import {ElProgress, ElCheckbox} from 'element-plus';
 
 const props = defineProps<{
   item?: Dict
@@ -38,13 +38,13 @@ const studyProgress = $computed(() => {
       </div>
       <div class="absolute bottom-2 left-4 right-4">
         <ElProgress v-if="item?.lastLearnIndex || item.complete" class="mt-1"
-                     :percentage="progress"
-                     :show-text="false"></ElProgress>
+                    :percentage="progress"
+                    :show-text="false"></ElProgress>
       </div>
       <ElCheckbox v-if="showCheckbox"
-                   :model-value="checked"
-                   @click.stop="$emit('check')"
-                   class="absolute left-3 bottom-2"/>
+                  :model-value="checked"
+                  @click.stop="$emit('check')"
+                  class="absolute left-3 bottom-2"/>
       <div class="custom" v-if="item.custom">自定义</div>
     </template>
     <div v-else class="center h-full">
diff --git a/src/pages/pc/components/IconWrapper.vue b/src/pages/pc/components/IconWrapper.vue
deleted file mode 100644
index 7a1a5a37..00000000
--- a/src/pages/pc/components/IconWrapper.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="icon-wrapper">
-    <slot></slot>
-  </div>
-</template>
-
-<style scoped lang="scss">
-
-$w: 1.4rem;
-.icon-wrapper {
-  cursor: pointer;
-  //padding: 2rem;
-  width: 2rem;
-  height: 2rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: .3rem;
-  background: transparent;
-  transition: all .3s;
-
-  &:hover {
-    background: var(--color-icon-hightlight);
-    color: white;
-  }
-
-  :deep(svg) {
-    width: $w;
-    height: $w;
-  }
-}
-</style>
diff --git a/src/pages/pc/components/Logo.vue b/src/pages/pc/components/Logo.vue
index 82d8a17a..e47e6f4f 100644
--- a/src/pages/pc/components/Logo.vue
+++ b/src/pages/pc/components/Logo.vue
@@ -3,7 +3,8 @@ import {useSettingStore} from "@/stores/setting.ts";
 import router from "@/router.ts";
 
 const settingStore = useSettingStore()
-function goHome(){
+
+function goHome() {
   router.push('/')
 }
 </script>
@@ -27,4 +28,4 @@ function goHome(){
     height: 2rem;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/pc/components/list/ArticleList.vue b/src/pages/pc/components/list/ArticleList.vue
index 045080d0..bc73ab60 100644
--- a/src/pages/pc/components/list/ArticleList.vue
+++ b/src/pages/pc/components/list/ArticleList.vue
@@ -59,7 +59,7 @@ defineExpose({scrollToBottom, scrollToItem})
         <slot name="prefix" :item="item" :index="index"></slot>
       </template>
       <template v-slot="{ item, index }">
-        <div class="item-title"  >
+        <div class="item-title">
           <div class="name"> {{ `${searchKey ? '' : (index + 1) + '. '}${item.title}` }}</div>
         </div>
         <div class="item-sub-title" v-if="item.titleTranslate && showTranslate">
@@ -84,7 +84,7 @@ defineExpose({scrollToBottom, scrollToItem})
   .search {
     box-sizing: border-box;
     width: 100%;
-    padding-right:  var(--space);
+    padding-right: var(--space);
   }
 
   .translate {
diff --git a/src/pages/pc/components/toolbar/Add.vue b/src/pages/pc/components/toolbar/Add.vue
deleted file mode 100644
index 46afa659..00000000
--- a/src/pages/pc/components/toolbar/Add.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-
-import {Icon} from "@iconify/vue";
-import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
-import Tooltip from "@/pages/pc/components/Tooltip.vue";
-
-
-let show = $ref(false)
-
-function toggle() {
-  show = !show
-  // emitter.emit(EventKey.openArticleListModal)
-}
-</script>
-
-<template>
-  <div class="setting" @click.stop="null">
-    <Tooltip title="添加">
-      <IconWrapper>
-        <Icon icon="ic:outline-cloud-upload"
-              @click="toggle"
-        />
-      </IconWrapper>
-    </Tooltip>
-  </div>
-</template>
-
-<style scoped lang="scss">
-
-
-.wrapper {
-  position: relative;
-}
-
-.setting {
-  position: relative;
-
-}
-</style>
diff --git a/src/pages/pc/components/toolbar/TranslateSetting.vue b/src/pages/pc/components/toolbar/TranslateSetting.vue
deleted file mode 100644
index d05a364e..00000000
--- a/src/pages/pc/components/toolbar/TranslateSetting.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-
-import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
-import {Icon} from "@iconify/vue";
-import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
-import Tooltip from "@/pages/pc/components/Tooltip.vue";
-import {useBaseStore} from "@/stores/base.ts";
-import {useWindowClick} from "@/hooks/event.ts";
-import BaseButton from "@/components/BaseButton.vue";
-import {useSettingStore} from "@/stores/setting.ts";
-import {ShortcutKey} from "@/types.ts";
-import {ElSwitch, ElRadioGroup,ElRadioButton,ElSelect,ElOption} from 'element-plus'
-
-const store = useBaseStore()
-const settingStore = useSettingStore()
-
-let show = $ref(false)
-let showCustomTranslateModal = $ref(false)
-
-useWindowClick(() => show = false)
-
-function toggle() {
-  // if (!show) emitter.emit(EventKey.closeOther)
-  // show = !show
-  settingStore.translate = !settingStore.translate
-}
-
-let translateType = $ref(0)
-let networkTranslateEngine = $ref('baidu')
-const TranslateEngine = [
-  {value: 'baidu', label: '百度'},
-  {value: 'youdao', label: '有道'},
-]
-
-function save() {
-
-}
-
-</script>
-
-<template>
-  <div class="setting" @click.stop="null">
-    <Tooltip
-        :title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
-    >
-      <IconWrapper>
-        <Icon v-if="settingStore.translate" icon="mdi:translate"
-              @click="toggle"
-        />
-        <Icon v-else icon="mdi:translate-off"
-              @click="toggle"
-        />
-      </IconWrapper>
-    </Tooltip>
-    <MiniDialog v-model="show"
-                style="width: 230rem;"
-    >
-      <div class="mini-row">
-        <label class="item-title">显示翻译</label>
-        <div class="wrapper">
-          <ElSwitch v-model="settingStore.translate"
-                    inline-prompt
-                    active-text="开"
-                    inactive-text="关"
-          />
-        </div>
-      </div>
-      <div class="mini-row">
-        <label class="item-title">翻译类型</label>
-        <ElRadioGroup v-model="translateType" size="small">
-          <ElRadioButton :value="1">本地翻译</ElRadioButton>
-          <ElRadioButton :value="0">网络翻译</ElRadioButton>
-        </ElRadioGroup>
-      </div>
-      <div class="mini-row" v-if="translateType">
-        <label class="item-title">本地翻译</label>
-        <div class="wrapper">
-          <Tooltip title="开关释义显示">
-            <IconWrapper>
-              <Icon icon="mingcute:edit-line"
-                    @click="toggle"
-              />
-            </IconWrapper>
-          </Tooltip>
-        </div>
-      </div>
-      <div class="mini-row" v-else>
-        <label class="item-title">网络翻译</label>
-        <div class="wrapper">
-          <ElSelect v-model="networkTranslateEngine" class="m-2" placeholder="Select" size="small">
-            <ElOption
-                v-for="item in TranslateEngine"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </ElSelect>
-        </div>
-      </div>
-      <div class="footer">
-        <BaseButton size="small" @click="show = false">取消</BaseButton>
-        <BaseButton size="small" @click="save">确定</BaseButton>
-      </div>
-    </MiniDialog>
-  </div>
-</template>
-
-<style scoped lang="scss">
-
-
-.setting {
-  position: relative;
-}
-
-.footer {
-  margin-top: .6rem;
-  display: flex;
-  justify-content: flex-end;
-  gap: .6rem;
-}
-</style>
diff --git a/src/pages/pc/index.vue b/src/pages/pc/index.vue
index 26dea2e3..2538bfa6 100644
--- a/src/pages/pc/index.vue
+++ b/src/pages/pc/index.vue
@@ -5,8 +5,6 @@ import Logo from "@/pages/pc/components/Logo.vue";
 import {Icon} from "@iconify/vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {useRouter} from "vue-router";
-import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
-import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import useTheme from "@/hooks/theme.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 
@@ -55,16 +53,10 @@ const {toggleTheme} = useTheme()
         <BaseIcon
             @click="settingStore.sideExpand = !settingStore.sideExpand"
             :icon="settingStore.sideExpand?'formkit:left':'formkit:right'"/>
-        <Tooltip
+        <BaseIcon
             :title="`切换主题(${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
-            v-if="settingStore.sideExpand"
-        >
-          <IconWrapper>
-            <Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
-                  @click="toggleTheme"/>
-            <Icon icon="tabler:sun" v-else @click="toggleTheme"/>
-          </IconWrapper>
-        </Tooltip>
+            @click="toggleTheme"
+            :icon="settingStore.theme === 'light' ? 'ep:moon' : 'tabler:sun'"/>
       </div>
     </div>
     <div class="flex-1 z-1 relative">
diff --git a/src/pages/pc/word/StudyWord.vue b/src/pages/pc/word/StudyWord.vue
index e41a6198..59b34cf3 100644
--- a/src/pages/pc/word/StudyWord.vue
+++ b/src/pages/pc/word/StudyWord.vue
@@ -23,6 +23,7 @@ import Empty from "@/components/Empty.vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {dictionaryResources} from "@/assets/dictionary.ts";
+import {ElMessage} from "element-plus";
 
 interface IProps {
   new: Word[],
@@ -378,7 +379,6 @@ useEvents([
         </div>
       </div>
       <Type
-          v-loading="loading"
           ref="typingRef"
           :word="word"
           @wrong="onTypeWrong"
@@ -396,7 +396,6 @@ useEvents([
       <Panel>
         <template v-slot="{active}">
           <div class="panel-page-item pl-4"
-               v-loading="loading"
           >
             <WordList
                 v-if="data.words.length"
diff --git a/src/pages/pc/word/WordHomePage.vue b/src/pages/pc/word/WordHomePage.vue
index bfcde5ca..6e480baa 100644
--- a/src/pages/pc/word/WordHomePage.vue
+++ b/src/pages/pc/word/WordHomePage.vue
@@ -45,12 +45,6 @@ async function init() {
 }
 
 function startStudy() {
-  // return store.sdict.lastLearnIndex = store.sdict.length - 1
-  // store.sdict.complete = true
-  // store.sdict.lastLearnIndex = 20
-  // currentStudy = getCurrentStudyWord()
-// return
-  // return  store.sdict.lastLearnIndex = store.sdict.length - 1
   if (store.sdict.id) {
     if (!store.sdict.words.length) {
       return ElMessage.warning('没有单词可学习！')
@@ -220,7 +214,7 @@ const progressTextRight = $computed(() => {
           </div>
           个单词 <span class="color-blue cursor-pointer" @click="setPerDayStudyNumber">更改</span>
         </div>
-        <BaseButton :disabled="!store.sdict.name" @click="startStudy">
+        <BaseButton size="large" :disabled="!store.sdict.name" @click="startStudy">
           <div class="flex items-center gap-2">
             <span>开始学习</span>
             <Icon icon="icons8:right-round" class="text-2xl"/>
diff --git a/src/pages/pc/word/components/Footer.vue b/src/pages/pc/word/components/Footer.vue
index 54d4e61f..07671b35 100644
--- a/src/pages/pc/word/components/Footer.vue
+++ b/src/pages/pc/word/components/Footer.vue
@@ -6,9 +6,7 @@ import {useSettingStore} from "@/stores/setting.ts";
 import {ShortcutKey, StudyData} from "@/types.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {Icon} from "@iconify/vue";
-import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import Tooltip from "@/pages/pc/components/Tooltip.vue";
-import TranslateSetting from "@/pages/pc/components/toolbar/TranslateSetting.vue";
 import {ElProgress} from 'element-plus';
 
 const statisticsStore = usePracticeStore()
@@ -113,7 +111,7 @@ const progress = $computed(() => {
             <div class="name">总错误数</div>
           </div>
         </div>
-        <div class="flex justify-center items-center">
+        <div class="flex  gap-2  justify-center items-center">
           <BaseIcon
               v-if="!isSimple"
               class="collect"
@@ -135,34 +133,23 @@ const progress = $computed(() => {
               icon="ph:star"/>
           <BaseIcon
               v-else
-              class="fill"
               @click="$emit('toggleCollect')"
               :title="`取消收藏(${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`"
               icon="ph:star-fill"/>
 
-          <Tooltip
+          <BaseIcon
+              @click="emit('skip')"
               :title="`跳过(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
-          >
-            <IconWrapper>
-              <Icon icon="icon-park-outline:go-ahead" class="menu"
-                    @click="emit('skip')"/>
-            </IconWrapper>
-          </Tooltip>
+              icon="icon-park-outline:go-ahead"/>
 
-          <Tooltip
+          <BaseIcon
+              @click="settingStore.dictation = !settingStore.dictation"
               :title="`开关默写模式(${settingStore.shortcutKeyMap[ShortcutKey.ToggleDictation]})`"
-          >
-            <IconWrapper>
-              <Icon icon="majesticons:eye-off-line"
-                    v-if="settingStore.dictation"
-                    @click="settingStore.dictation = false"/>
-              <Icon icon="mdi:eye-outline"
-                    v-else
-                    @click="settingStore.dictation = true"/>
-            </IconWrapper>
-          </Tooltip>
+              :icon="['majesticons:eye-off-line','mdi:eye-outline'][settingStore.dictation?0:1]"/>
 
-          <TranslateSetting/>
+          <BaseIcon :icon="['mdi:translate','mdi:translate-off'][settingStore.translate?0:1]"
+                    :title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
+                    @click="settingStore.translate = !settingStore.translate"/>
 
           <BaseIcon
               @click="settingStore.showPanel = !settingStore.showPanel"
@@ -173,8 +160,8 @@ const progress = $computed(() => {
     </div>
     <div class="progress">
       <ElProgress :percentage="progress"
-                   :stroke-width="8"
-                   :show-text="false"/>
+                  :stroke-width="8"
+                  :show-text="false"/>
     </div>
   </div>
   <!--