开发设置页面

src/App.vue

@@ -20,9 +20,9 @@ import {usePlayWordAudio} from "@/hooks/usePlayWordAudio.ts"
 import DictModal from "@/components/DictModal.vue"
 import Backgorund from "@/components/Backgorund.vue"
 import Statistics from "@/components/Statistics.vue";
-import {ArrowLeft, ArrowRight, MenuFold} from '@icon-park/vue-next'
 import useThemeColor from "@/hooks/useThemeColor";
 import Tooltip from "@/components/Tooltip.vue";
+import Toolbar from "@/components/Toolbar.vue"
 
 let input = $ref('')
 let wrong = $ref('')
@@ -166,25 +166,10 @@ const {appearance, toggle} = useThemeColor()
 </script>
 
 <template>
-  <Backgorund/>
+<!--  <Backgorund/>-->
   <div class="main-page">
     <div class="center">
-      <header>
-        <div class="info">
-
-        </div>
-        <div class="options">
-          <div class="my-button" @click="toggle">切换</div>
-          <div class="my-button" @click="store.dictModalIsOpen = true">ok</div>
-          <div class="my-button" @click="store.dictModalIsOpen2 = true">ok</div>
-          <Tooltip title="单词本">
-            <menu-fold class="menu" @click="store.sideIsOpen = !store.sideIsOpen"
-                       theme="outline" size="20" fill="#929596"
-                       :strokeWidth="2"/>
-          </Tooltip>
-        </div>
-
-      </header>
+      <Toolbar/>
       <div class="content">
         <div class="type-word">
           <div class="translate">{{ store.word.trans.join('；') }}</div>
@@ -236,29 +221,9 @@ const {appearance, toggle} = useThemeColor()
     display: flex;
     flex-direction: column;
     align-items: center;
-    border: 1px solid gray;
+    //border: 1px solid gray;
     position: relative;
 
-    header {
-      margin-top: 10rem;
-      height: 60rem;
-      width: 50%;
-      background: var(--color-header-bg);
-      display: flex;
-      justify-content: space-between;
-      border-radius: 8rem;
-      position: relative;
-      z-index: 2;
-      padding: 10rem $space;
-      box-sizing: border-box;
-
-      .options {
-        display: flex;
-        align-items: center;
-        gap: 10rem;
-      }
-    }
-
     .content {
       position: relative;
       flex: 1;
@@ -268,6 +233,8 @@ const {appearance, toggle} = useThemeColor()
 
       .type-word {
         display: flex;
+        display: none;
+
         align-items: center;
         justify-content: center;
         flex-direction: column;

src/components/Modal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {Close} from "@icon-park/vue-next"
 
-const props = defineProps(['modelValue'])
+const props = defineProps(['modelValue', 'title'])
 const emit = defineEmits(['update:modelValue'])
 
 function close() {
@@ -19,6 +19,9 @@ function close() {
                  class="close"
                  theme="outline" size="20" fill="#929596"
                  :strokeWidth="2"/>
+          <div class="modal-header" v-if="props.title">
+            <div class="title">{{ props.title }}</div>
+          </div>
           <div class="modal-body">
             <slot></slot>
           </div>
@@ -109,24 +112,25 @@ $header-height: 60rem;
 
   .modal {
     position: relative;
-    background: $dark-second-bg;
-    box-shadow: $dark-second-bg 0 0 10rem 1rem;
+    background: var(--color-main-bg);
+    box-shadow: var(--color-main-bg) 0 0 10rem 1rem;
     //width: 75vw;
     //height: 70vh;
     border-radius: $radius;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
 
     .modal-header {
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
       align-items: center;
       height: $header-height;
       padding: 0 $space;
       border-radius: $radius $radius 0 0;
 
       .title {
-        color: #ffffff;
+        color: var(--color-font);
         font-weight: 500;
         font-size: 28rem;
         line-height: 33rem;

src/components/Side.vue

@@ -38,7 +38,8 @@ function changeDict(dict: Dict, i: number) {
       <div class="tabs">
         <div class="tab" :class="tabIndex===0&&'active'" @click="slideTo(0)">单词表</div>
         <div class="tab" :class="tabIndex===1&&'active'" @click="slideTo(1)">生词本</div>
-        <div class="tab" :class="tabIndex===2&&'active'" @click="slideTo(2)">已忽略</div>
+        <div class="tab" :class="tabIndex===2&&'active'" @click="slideTo(2)">纠错本</div>
+        <div class="tab" :class="tabIndex===3&&'active'" @click="slideTo(3)">已忽略</div>
       </div>
     </header>
     <div class="side-content">
@@ -136,7 +137,7 @@ function changeDict(dict: Dict, i: number) {
   flex-direction: column;
   transition: all .3s;
   transform: rotate(-90deg);
-  transform-origin: 0 0 ;
+  transform-origin: 0 0;
   z-index: 1;
 
   &.open {

src/components/Toolbar.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import Tooltip from "@/components/Tooltip.vue"
+import {
+  MenuFold,
+  Moon,
+  PreviewCloseOne,
+  PreviewOpen,
+  SettingTwo,
+  SunOne,
+  VolumeNotice,
+  HeadphoneSound,
+  SettingConfig
+} from "@icon-park/vue-next"
+import IconRepeat from '~icons/tabler/repeat'
+import useThemeColor from "@/hooks/useThemeColor.ts"
+import {useBaseStore} from "@/stores/base.ts"
+import {reactive} from "vue"
+import Modal from "@/components/Modal.vue"
+
+const {appearance, toggle} = useThemeColor()
+const store = useBaseStore()
+const setting = reactive({
+  show: true
+})
+</script>
+
+<template>
+  <header>
+    <div class="info">
+
+    </div>
+    <div class="options">
+      <Tooltip title="切换主题">
+        <moon v-if="appearance === 'dark'" theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"
+              @click="toggle"/>
+        <sun-one v-else theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2" @click="toggle"/>
+      </Tooltip>
+      <Tooltip title="设置">
+        <setting-two @click="setting.show = true" theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
+      </Tooltip>
+      <Tooltip title="音效设置">
+        <volume-notice theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
+      </Tooltip>
+
+      <IconRepeat></IconRepeat>
+
+      <Tooltip title="单词本">
+        <preview-open theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
+        <preview-close-one theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
+      </Tooltip>
+      <div class="my-button" @click="store.dictModalIsOpen = true">ok</div>
+      <div class="my-button" @click="store.dictModalIsOpen2 = true">ok</div>
+      <Tooltip title="单词本">
+        <menu-fold class="menu" @click="store.sideIsOpen = !store.sideIsOpen"
+                   theme="outline" size="20" fill="#929596"
+                   :strokeWidth="2"/>
+      </Tooltip>
+    </div>
+  </header>
+  <Modal v-model="setting.show" title="title">
+    <div class="setting-modal">
+      <div class="tabs">
+        <div class="tab">
+          <headphone-sound theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
+          <span>音效设置</span>
+        </div>
+        <div class="tab">
+          <setting-config theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
+          <span>其他设置</span>
+        </div>
+      </div>
+      <div class="content">
+
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+@import "@/assets/css/colors.scss";
+
+header {
+  margin-top: 10rem;
+  height: 60rem;
+  width: 50%;
+  background: var(--color-header-bg);
+  display: flex;
+  justify-content: space-between;
+  border-radius: 8rem;
+  position: relative;
+  z-index: 2;
+  padding: 10rem $space;
+  box-sizing: border-box;
+
+  .options {
+    display: flex;
+    align-items: center;
+    gap: 10rem;
+  }
+}
+
+.setting-modal {
+  width: 40vw;
+  height: 50vh;
+  display: flex;
+  color: var(--color-font);
+
+  .tabs {
+    padding: 10rem 20rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    //justify-content: center;
+    gap: 10rem;
+
+    .tab {
+      padding: 10rem 15rem;
+      background: whitesmoke;
+      border-radius: 8rem;
+    }
+  }
+
+  .content {
+    background: white;
+    flex: 1;
+    height: 100%;
+  }
+}
+
+
+</style>