From 092268fe7ffa70a2fc8e78cdd90af5d34f1c3ab0 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 3 Nov 2023 01:45:37 +0800
Subject: [PATCH] Optimize UI interface

---
 components.d.ts                          |  3 +++
 src/components/Toolbar/Toolbar.vue       |  9 ++++---
 src/components/Toolbar/VolumeSetting.vue | 34 ++++++++++++++----------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index c6b2e978..68992d6f 100644
--- a/components.d.ts
+++ b/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']
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index 5d46920e..69b89b2b 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/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="收起图标">
diff --git a/src/components/Toolbar/VolumeSetting.vue b/src/components/Toolbar/VolumeSetting.vue
index c399fd58..7a0b71a5 100644
--- a/src/components/Toolbar/VolumeSetting.vue
+++ b/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">
         音效设置