Optimize UI interface

components.d.ts

@@ -23,6 +23,9 @@ declare module 'vue' {
     EditArticle: typeof import('./src/components/Article/EditArticle.vue')['default']
     EditBatchArticleModal: typeof import('./src/components/Article/EditBatchArticleModal.vue')['default']
     EditSingleArticleModal: typeof import('./src/components/Article/EditSingleArticleModal.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']

src/components/Toolbar/Toolbar.vue

@@ -65,9 +65,12 @@ watch(() => store.load, n => {
 <template>
   <header ref="headerRef">
     <div class="content">
-      <div class="info hvr-grow" @click="runtimeStore.showDictModal = true">
-        {{ store.dictTitle }} {{ practiceStore.repeatNumber ? '  复习错词' : '' }}
-      </div>
+      <Tooltip title="词典详情">
+        <div class="info hvr-grow" @click="runtimeStore.showDictModal = true">
+          {{ store.dictTitle }} {{ practiceStore.repeatNumber ? '  复习错词' : '' }}
+        </div>
+      </Tooltip>
+
       <div class="options" ref="moreOptionsRef">
         <div class="more" :class="settingStore.collapse && 'hide'">
           <Tooltip title="收起图标">

src/components/Toolbar/VolumeSetting.vue

@@ -20,7 +20,8 @@ useWindowClick(() => show = false)
 useWatchAllSound()
 
 let timer = 0
-function toggle(val) {
+
+function toggle(val: boolean) {
   clearTimeout(timer)
   if (val) {
     emitter.emit(EventKey.closeOther)
@@ -33,27 +34,32 @@ function toggle(val) {
 }
 
 
+function toggle2() {
+  if (!show){
+    emitter.emit(EventKey.closeOther)
+  }
+  show = !show
+}
+
+
 </script>
 
 <template>
   <div class="setting"
        @click.stop="null"
   >
-    <IconWrapper>
-      <Icon v-if="settingStore.allSound" icon="icon-park-outline:volume-notice"
-            @mouseenter="toggle(true)"
-            @mouseleave="toggle(false)"
-      />
-      <Icon v-else icon="icon-park-outline:volume-mute"
-            @mouseenter="toggle(true)"
-            @mouseleave="toggle(false)"
-
-      />
-    </IconWrapper>
+    <Tooltip title="音效设置">
+      <IconWrapper>
+        <Icon v-if="settingStore.allSound" icon="icon-park-outline:volume-notice"
+              @click="toggle2()"
+        />
+        <Icon v-else icon="icon-park-outline:volume-mute"
+              @click="toggle2()"
+        />
+      </IconWrapper>
+    </Tooltip>
     <MiniModal
         width="250rem"
-        @mouseenter="toggle(true)"
-        @mouseleave="toggle(false)"
         v-model="show">
       <div class="mini-row-title">
         音效设置