From acee5fa6b881a6719c1bec1c4f2c17c235875519 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 20 Aug 2023 01:33:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |  4 ++--
 src/components/Modal/Modal.vue | 13 ++++++++---
 src/components/Toolbar.vue     | 40 ++++++++++++++++++++++++++--------
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index baeeabf1..854cd358 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -166,7 +166,7 @@ const {appearance, toggle} = useThemeColor()
 </script>
 
 <template>
-<!--  <Backgorund/>-->
+  <Backgorund/>
   <div class="main-page">
     <div class="center">
       <Toolbar/>
@@ -233,7 +233,7 @@ const {appearance, toggle} = useThemeColor()
 
       .type-word {
         display: flex;
-        display: none;
+        //display: none;
 
         align-items: center;
         justify-content: center;
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 1cc95121..1a077431 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {Close} from "@icon-park/vue-next"
 
-const props = defineProps(['modelValue', 'title'])
+const props = defineProps(['modelValue', 'title', 'subTitle'])
 const emit = defineEmits(['update:modelValue'])
 
 function close() {
@@ -21,6 +21,7 @@ function close() {
                  :strokeWidth="2"/>
           <div class="modal-header" v-if="props.title">
             <div class="title">{{ props.title }}</div>
+            <div class="sub-title" v-if="props.subTitle">{{ props.subTitle }}</div>
           </div>
           <div class="modal-body">
             <slot></slot>
@@ -123,10 +124,10 @@ $header-height: 60rem;
 
     .modal-header {
       display: flex;
+      flex-direction: column;
       justify-content: center;
       align-items: center;
-      height: $header-height;
-      padding: 0 $space;
+      padding: 15rem $space;
       border-radius: $radius $radius 0 0;
 
       .title {
@@ -135,6 +136,12 @@ $header-height: 60rem;
         font-size: 28rem;
         line-height: 33rem;
       }
+
+      .sub-title {
+        color: var(--color-font);
+        font-weight: 500;
+        font-size: 14rem;
+      }
     }
 
     .modal-body {
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index ecbe3eed..f6337c3d 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -19,8 +19,10 @@ import Modal from "@/components/Modal/Modal.vue"
 
 const {appearance, toggle} = useThemeColor()
 const store = useBaseStore()
+const tabIndex = $ref(0)
 const setting = reactive({
-  show: true,
+  showToolbar: true,
+  show: false,
   value1: false,
   value2: 50,
   value3: 1,
@@ -29,7 +31,7 @@ const setting = reactive({
 </script>
 
 <template>
-  <header>
+  <header :class="!setting.showToolbar && 'hide'">
     <div class="info">
 
     </div>
@@ -60,21 +62,24 @@ const setting = reactive({
                    :strokeWidth="2"/>
       </Tooltip>
     </div>
+    <div class="arrow" @click="setting.showToolbar = !setting.showToolbar">
+      收起
+    </div>
   </header>
-  <Modal v-model="setting.show" title="title">
+  <Modal v-model="setting.show" title="设置" subTitle="修改立即生效，实时保存">
     <div class="setting-modal">
       <div class="tabs">
-        <div class="tab">
+        <div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">
           <headphone-sound theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
           <span>音效设置</span>
         </div>
-        <div class="tab">
+        <div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">
           <setting-config theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
           <span>其他设置</span>
         </div>
       </div>
       <div class="content">
-        <div v-if="false">
+        <div v-if="tabIndex === 0">
           <div class="row">
             <label class="main-title">所有音效</label>
             <div class="wrapper">
@@ -165,7 +170,7 @@ const setting = reactive({
             </div>
           </div>
         </div>
-        <div>
+        <div v-if="tabIndex === 1">
           <div class="row">
             <label class="item-title">章节乱序</label>
             <div class="wrapper">
@@ -260,12 +265,25 @@ header {
   z-index: 2;
   padding: 10rem $space;
   box-sizing: border-box;
+  transition: all .3s;
 
   .options {
     display: flex;
     align-items: center;
     gap: 10rem;
   }
+
+  &.hide {
+    transform: translateY(calc(-100% - 10rem));
+  }
+
+  .arrow {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    cursor: pointer;
+    transform: translate3d(-50%, 120%, 0);
+  }
 }
 
 .setting-modal {
@@ -283,9 +301,13 @@ header {
     gap: 10rem;
 
     .tab {
+      cursor: pointer;
       padding: 10rem 15rem;
-      background: whitesmoke;
       border-radius: 8rem;
+
+      &.active {
+        background: whitesmoke;
+      }
     }
   }
 
@@ -301,7 +323,7 @@ header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      gap: $space * 8;
+      gap: $space * 5;
 
       label {