Optimize UI interface

src/App.vue

@@ -9,19 +9,12 @@ import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {cloneDeep} from "lodash-es";
 import Backgorund from "@/components/Backgorund.vue";
+import useTheme from "@/hooks/useTheme.ts";
 
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()
 const settingStore = useSettingStore()
-
-// 查询当前系统主题颜色
-const match: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")
-// 监听系统主题变化
-match.addEventListener('change', followSystem)
-
-function followSystem() {
-  document.documentElement.className = match.matches ? 'dark' : 'light'
-}
+const {setTheme} = useTheme()
 
 watch(store.$state, (n) => {
   localStorage.setItem(SaveDict.key, JSON.stringify({val: n, version: SaveDict.version}))
@@ -50,9 +43,7 @@ useStartKeyboardEventListener()
 onMounted(() => {
   store.init()
   settingStore.init()
-  if (settingStore.theme !== 'auto') {
-    document.documentElement.className = settingStore.theme
-  }
+  setTheme(settingStore.theme)
 })
 
 useEventListener('keyup', (e: KeyboardEvent) => {

src/components/Practice/Practice.vue

@@ -70,8 +70,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/Toolbar.vue

@@ -18,8 +18,9 @@ import Add from "@/components/Toolbar/Add.vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
+import {$ref} from "vue/macros";
 
-const {toggle} = useTheme()
+const {toggleTheme} = useTheme()
 const store = useBaseStore()
 const settingStore = useSettingStore()
 const runtimeStore = useRuntimeStore()
@@ -28,9 +29,9 @@ const practiceStore = usePracticeStore()
 const showFeedbackModal = $ref(false)
 const showSettingModal = $ref(false)
 const headerRef = $ref<HTMLDivElement>(null)
+const moreOptionsRef = $ref<HTMLDivElement>(null)
 
 watch([() => settingStore.showToolbar, () => headerRef], n => {
-  console.log('n', n)
   if (n[1]) {
     if (n[0]) {
       n[1].style.marginTop = '10rem'
@@ -40,6 +41,18 @@ watch([() => settingStore.showToolbar, () => headerRef], n => {
     }
   }
 })
+
+function toggle() {
+  if (settingStore.collapse) {
+    setTimeout(() => {
+      moreOptionsRef.style.overflow = 'unset'
+    }, 300)
+  } else {
+    moreOptionsRef.style.overflow = 'hidden'
+  }
+  settingStore.collapse = !settingStore.collapse
+
+}
 </script>
 
 <template>
@@ -48,15 +61,15 @@ watch([() => settingStore.showToolbar, () => headerRef], n => {
       <div class="info hvr-grow" @click="runtimeStore.showDictModal = true">
         {{ store.dictTitle }} {{ practiceStore.repeatNumber ? '  复习错词' : '' }}
       </div>
-      <div class="options">
-        <Tooltip title="收起图标">
-          <IconWrapper>
-            <Icon :icon="`system-uicons:window-collapse-${settingStore.collapse?'left':'right'}`"
-                  @click="settingStore.collapse = !settingStore.collapse"/>
-          </IconWrapper>
-        </Tooltip>
+      <div class="options" ref="moreOptionsRef">
+        <div class="more" :class="settingStore.collapse && 'hide'">
+          <Tooltip title="收起图标">
+            <IconWrapper>
+              <Icon :icon="`system-uicons:window-collapse-${settingStore.collapse?'left':'right'}`"
+                    @click="toggle"/>
+            </IconWrapper>
+          </Tooltip>
 
-        <div class="more" v-if="!settingStore.collapse">
           <Tooltip title="开关默写模式">
             <IconWrapper>
               <Icon icon="majesticons:eye-off-line"
@@ -74,7 +87,7 @@ watch([() => settingStore.showToolbar, () => headerRef], n => {
 
           <RepeatSetting/>
 
-<!--          <Add/>-->
+          <!--          <Add/>-->
 
           <Tooltip title="反馈">
             <IconWrapper>
@@ -85,24 +98,26 @@ watch([() => settingStore.showToolbar, () => headerRef], n => {
           <Tooltip title="切换主题">
             <IconWrapper>
               <Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
-                    @click="toggle"/>
-              <Icon icon="tabler:sun" v-else @click="toggle"/>
+                    @click="toggleTheme"/>
+              <Icon icon="tabler:sun" v-else @click="toggleTheme"/>
             </IconWrapper>
           </Tooltip>
         </div>
 
-        <Tooltip title="设置">
-          <IconWrapper>
-            <Icon icon="uil:setting" @click="showSettingModal = true"/>
-          </IconWrapper>
-        </Tooltip>
-        <!--        <div class="base-button" @click="emitter.emit(EventKey.openStatModal)">ok</div>-->
+        <div class="with-bg">
+          <Tooltip title="设置">
+            <IconWrapper>
+              <Icon icon="uil:setting" @click="showSettingModal = true"/>
+            </IconWrapper>
+          </Tooltip>
+          <!--        <div class="base-button" @click="emitter.emit(EventKey.openStatModal)">ok</div>-->
 
-        <Tooltip title="单词本">
-          <IconWrapper>
-            <Icon icon="tdesign:menu-unfold" class="menu" @click="settingStore.showPanel = !settingStore.showPanel"/>
-          </IconWrapper>
-        </Tooltip>
+          <Tooltip title="单词本">
+            <IconWrapper>
+              <Icon icon="tdesign:menu-unfold" class="menu" @click="settingStore.showPanel = !settingStore.showPanel"/>
+            </IconWrapper>
+          </Tooltip>
+        </div>
       </div>
     </div>
     <Tooltip :title="settingStore.showToolbar?'收起':'展开'">
@@ -122,6 +137,16 @@ watch([() => settingStore.showToolbar, () => headerRef], n => {
 <style scoped lang="scss">
 @import "@/assets/css/variable";
 
+.test-enter-active,
+.test-leave-active {
+  transition: all 0.3s;
+}
+
+.test-enter-from,
+.test-leave-to {
+  width: 0;
+}
+
 header {
   width: var(--toolbar-width);
   margin-top: 10rem;
@@ -136,7 +161,6 @@ header {
   gap: 10rem;
   border: 1px solid var(--color-item-border);
 
-
   .content {
     min-height: 60rem;
     display: flex;
@@ -160,18 +184,32 @@ header {
       }
     }
 
+    .hide {
+      transform: translateX(calc(100% - 36rem))
+    }
+
     .options {
       display: flex;
       align-items: center;
-      gap: 10rem;
+
+      .icon-wrapper {
+        margin-left: 10rem;
+      }
+
+      :deep(.icon-wrapper) {
+        margin-left: 10rem;
+      }
 
       .more {
         display: flex;
-        gap: 10rem;
         align-items: center;
-        //overflow: hidden;
         transition: all .3s;
       }
+
+      .with-bg {
+        position: relative;
+        background: var(--color-second-bg);
+      }
     }
   }
 

src/components/Tooltip.vue

@@ -51,7 +51,6 @@ export default {
           this.show && this.title && (
               <Teleport to="body">
                 <Transition name="fade">
-
                   <div ref="tip" className="tip">
                     {this.title}
                   </div>

src/hooks/useTheme.ts

@@ -1,19 +1,33 @@
-import {useBaseStore} from "@/stores/base.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 
 export default function useTheme() {
   const settingStore = useSettingStore()
 
-  function toggle() {
+// // 查询当前系统主题颜色
+//   const match: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")
+// // 监听系统主题变化
+//   match.addEventListener('change', followSystem)
+//
+//   function followSystem() {
+//     document.documentElement.className = match.matches ? 'dark' : 'light'
+//   }
+
+
+  function toggleTheme() {
     if (settingStore.theme === 'auto') {
-      settingStore.theme = 'dark'
+      settingStore.theme = 'light'
     } else {
       settingStore.theme = settingStore.theme === 'light' ? 'dark' : 'light'
     }
-    document.documentElement.className = settingStore.theme
+    setTheme(settingStore.theme)
+  }
+
+  function setTheme(val) {
+    document.documentElement.className = val
   }
 
   return {
-    toggle
+    toggleTheme,
+    setTheme
   }
 }