Optimize UI interface

src/components/MiniModal.vue

@@ -22,6 +22,14 @@ withDefaults(defineProps<IProps>(), {
 <style lang="scss">
 @import "@/assets/css/style.scss";
 
+.mini-row-title {
+  min-height: 35rem;
+  text-align: center;
+  font-size: 16rem;
+  font-weight: bold;
+  color: var(--color-font-1);
+}
+
 .mini-row {
   min-height: 35rem;
   display: flex;
@@ -40,8 +48,9 @@ withDefaults(defineProps<IProps>(), {
   border-radius: 8rem;
   box-shadow: 0 0 8px 2px var(--color-item-border);
   padding: 10rem $space;
+  top: 40rem;
   left: 50%;
-  transform: translateX(-50%);
-  margin-top: 10rem;
+  transform: translate3d(-50%, 0, 0);
+  //margin-top: 10rem;
 }
 </style>

src/components/Practice/Practice.vue

@@ -14,6 +14,7 @@ import {useRuntimeStore} from "@/stores/runtime.ts";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import PracticeArticle from "@/components/Practice/PracticeArticle/PracticeArticle.vue";
 import PracticeWord from "@/components/Practice/PracticeWord/PracticeWord.vue";
+import VolumeSetting from "@/components/Toolbar/VolumeSetting.vue";
 
 const practiceStore = usePracticeStore()
 const store = useBaseStore()
@@ -70,8 +71,8 @@ function test() {
   <div class="practice">
     <Toolbar/>
     <!--    <BaseButton @click="test">test</BaseButton>-->
-<!--    <PracticeArticle v-if="store.isArticle"/>-->
-<!--    <PracticeWord v-else/>-->
+    <PracticeArticle v-if="store.isArticle"/>
+    <PracticeWord v-else/>
     <Footer/>
   </div>
   <Statistics

src/components/Toolbar/RepeatSetting.vue

@@ -17,9 +17,17 @@ let show = $ref(false)
 let radio1 = $ref('1')
 useWindowClick(() => show = false)
 
-function toggle() {
-  if (!show) emitter.emit(EventKey.closeOther)
-  show = !show
+let timer = 0
+function toggle(val) {
+  clearTimeout(timer)
+  if (val) {
+    emitter.emit(EventKey.closeOther)
+    show = val
+  } else {
+    timer = setTimeout(() => {
+      show = val
+    }, 100)
+  }
 }
 
 onMounted(() => {
@@ -31,11 +39,15 @@ onMounted(() => {
     <Tooltip title="单词循环设置">
       <IconWrapper>
         <Icon icon="tabler:repeat"
-              @click="toggle"/>
+              @mouseenter="toggle(true)"
+              @mouseleave="toggle(false)"
+        />
       </IconWrapper>
     </Tooltip>
     <MiniModal
         v-model="show"
+        @mouseenter="toggle(true)"
+        @mouseleave="toggle(false)"
         style="width: 230rem;"
     >
       <div class="title">选择单词的循环次数</div>

src/components/Toolbar/Toolbar.vue

@@ -10,7 +10,7 @@ import {Icon} from '@iconify/vue';
 
 import IconWrapper from "@/components/IconWrapper.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts"
-import {watch} from "vue"
+import {onMounted, watch} from "vue"
 import VolumeSetting from "@/components/Toolbar/VolumeSetting.vue";
 import RepeatSetting from "@/components/Toolbar/RepeatSetting.vue";
 import TranslateSetting from "@/components/Toolbar/TranslateSetting.vue";
@@ -51,8 +51,15 @@ function toggle() {
     moreOptionsRef.style.overflow = 'hidden'
   }
   settingStore.collapse = !settingStore.collapse
-
 }
+
+watch(() => store.load, n => {
+  if (!settingStore.collapse) {
+    moreOptionsRef.style.overflow = 'unset'
+  }
+})
+
+
 </script>
 
 <template>
@@ -185,12 +192,13 @@ header {
     }
 
     .hide {
-      transform: translateX(calc(100% - 36rem))
+      transform: translateX(calc(100% - 36rem));
     }
 
     .options {
       display: flex;
       align-items: center;
+      overflow: hidden;
 
       .icon-wrapper {
         margin-left: 10rem;

src/components/Toolbar/VolumeSetting.vue

@@ -10,6 +10,7 @@ import {useSettingStore} from "@/stores/setting.ts";
 import VolumeIcon from "@/components/VolumeIcon.vue";
 import {getAudioFileUrl, useChangeAllSound, usePlayAudio, useWatchAllSound} from "@/hooks/sound.ts";
 import {SoundFileOptions} from "@/utils/const.ts";
+import {throttle} from "lodash-es";
 
 const settingStore = useSettingStore()
 
@@ -18,30 +19,45 @@ let show = $ref(false)
 useWindowClick(() => show = false)
 useWatchAllSound()
 
-function toggle() {
-  console.log('e')
-  if (!show) emitter.emit(EventKey.closeOther)
-  show = !show
+let timer = 0
+function toggle(val) {
+  clearTimeout(timer)
+  if (val) {
+    emitter.emit(EventKey.closeOther)
+    show = val
+  } else {
+    timer = setTimeout(() => {
+      show = val
+    }, 100)
+  }
 }
 
+
 </script>
 
 <template>
   <div class="setting"
-       @click.stop="null">
-    <Tooltip title="音效设置">
-      <IconWrapper>
-        <Icon v-if="settingStore.allSound" icon="icon-park-outline:volume-notice"
-              @click="toggle"
-        />
-        <Icon v-else icon="icon-park-outline:volume-mute"
-              @click="toggle"
-        />
-      </IconWrapper>
-    </Tooltip>
+       @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>
     <MiniModal
         width="250rem"
+        @mouseenter="toggle(true)"
+        @mouseleave="toggle(false)"
         v-model="show">
+      <div class="mini-row-title">
+        音效设置
+      </div>
       <div class="mini-row">
         <label class="item-title">所有音效</label>
         <div class="wrapper">
@@ -74,16 +90,16 @@ function toggle() {
           </el-select>
         </div>
       </div>
-<!--      <div class="mini-row">-->
-<!--        <label class="item-title">释义发音</label>-->
-<!--        <div class="wrapper">-->
-<!--          <el-switch v-model="settingStore.translateSound"-->
-<!--                     inline-prompt-->
-<!--                     active-text="开"-->
-<!--                     inactive-text="关"-->
-<!--          />-->
-<!--        </div>-->
-<!--      </div>-->
+      <!--      <div class="mini-row">-->
+      <!--        <label class="item-title">释义发音</label>-->
+      <!--        <div class="wrapper">-->
+      <!--          <el-switch v-model="settingStore.translateSound"-->
+      <!--                     inline-prompt-->
+      <!--                     active-text="开"-->
+      <!--                     inactive-text="关"-->
+      <!--          />-->
+      <!--        </div>-->
+      <!--      </div>-->
       <div class="mini-row">
         <label class="item-title">按键音</label>
         <div class="wrapper">