From b6d58d06f3c840d0e88bf4cb22ed0b6654b46283 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 20 Aug 2023 01:14:38 +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}/DictModal.vue  |   2 +-
 src/components/{ => Modal}/Modal.vue      |   2 +-
 src/components/{ => Modal}/Statistics.vue |   4 +-
 src/components/Toolbar.vue                | 209 +++++++++++++++++++---
 5 files changed, 188 insertions(+), 33 deletions(-)
 rename src/components/{ => Modal}/DictModal.vue (99%)
 rename src/components/{ => Modal}/Modal.vue (98%)
 rename src/components/{ => Modal}/Statistics.vue (98%)

diff --git a/src/App.vue b/src/App.vue
index 91d1f1ac..baeeabf1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,9 +17,9 @@ import {DictType, SaveKey, Word} from "./types";
 import WordList from "./components/WordList.vue";
 import Side from "@/components/Side.vue"
 import {usePlayWordAudio} from "@/hooks/usePlayWordAudio.ts"
-import DictModal from "@/components/DictModal.vue"
+import DictModal from "@/components/Modal/DictModal.vue"
 import Backgorund from "@/components/Backgorund.vue"
-import Statistics from "@/components/Statistics.vue";
+import Statistics from "@/components/Modal/Statistics.vue";
 import useThemeColor from "@/hooks/useThemeColor";
 import Tooltip from "@/components/Tooltip.vue";
 import Toolbar from "@/components/Toolbar.vue"
diff --git a/src/components/DictModal.vue b/src/components/Modal/DictModal.vue
similarity index 99%
rename from src/components/DictModal.vue
rename to src/components/Modal/DictModal.vue
index a26b9512..57c8b7e6 100644
--- a/src/components/DictModal.vue
+++ b/src/components/Modal/DictModal.vue
@@ -8,7 +8,7 @@ import {chunk} from "lodash";
 import {$computed, $ref} from "vue/macros";
 import WordList from "@/components/WordList.vue";
 import ChapterList from "@/components/ChapterList.vue"
-import Modal from "@/components/Modal.vue";
+import Modal from "@/components/Modal/Modal.vue";
 
 const store = useBaseStore()
 let currentSelectDict: Dict = $ref({
diff --git a/src/components/Modal.vue b/src/components/Modal/Modal.vue
similarity index 98%
rename from src/components/Modal.vue
rename to src/components/Modal/Modal.vue
index b49bda35..1cc95121 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -32,7 +32,7 @@ function close() {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors.scss";
+@import "@/assets/css/colors";
 
 .bounce-enter-active {
   animation: fade-in 0.3s;
diff --git a/src/components/Statistics.vue b/src/components/Modal/Statistics.vue
similarity index 98%
rename from src/components/Statistics.vue
rename to src/components/Modal/Statistics.vue
index 5994fa19..7346616c 100644
--- a/src/components/Statistics.vue
+++ b/src/components/Modal/Statistics.vue
@@ -1,5 +1,5 @@
 <script setup>
-import Modal from "@/components/Modal.vue";
+import Modal from "@/components/Modal/Modal.vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {KeyboardOne, Like, ShareThree, Tea} from '@icon-park/vue-next'
 import Ring from "@/components/Ring.vue";
@@ -79,7 +79,7 @@ const store = useBaseStore()
   <Fireworks v-if="store.dictModalIsOpen2"/>
 </template>
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .statistics {
   width: 50vw;
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index cedd0ffb..ecbe3eed 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -15,7 +15,7 @@ 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"
+import Modal from "@/components/Modal/Modal.vue"
 
 const {appearance, toggle} = useThemeColor()
 const store = useBaseStore()
@@ -74,34 +74,170 @@ const setting = reactive({
         </div>
       </div>
       <div class="content">
-        <div class="row">
-          <label class="main-title">所有音效</label>
-          <div class="wrapper">
-            <el-switch v-model="setting.value1"
-                       inline-prompt
-                       active-text="开"
-                       inactive-text="关"
-            />
+        <div v-if="false">
+          <div class="row">
+            <label class="main-title">所有音效</label>
+            <div class="wrapper">
+              <el-switch v-model="setting.value1"
+                         inline-prompt
+                         active-text="开"
+                         inactive-text="关"
+              />
+            </div>
+          </div>
+          <div class="line"></div>
+          <div class="row">
+            <label class="item-title">单词发音</label>
+            <div class="wrapper">
+              <el-switch v-model="setting.value1"
+                         inline-prompt
+                         active-text="开"
+                         inactive-text="关"
+              />
+            </div>
+          </div>
+          <div class="row">
+            <label class="sub-title">音量</label>
+            <div class="wrapper">
+              <el-slider v-model="setting.value2"/>
+              <span>{{ setting.value2 }}%</span>
+            </div>
+          </div>
+          <div class="row">
+            <label class="sub-title">音量</label>
+            <div class="wrapper">
+              <el-slider v-model="setting.value3" :step="0.1" :max="4"/>
+              <span>{{ setting.value3 }}</span>
+            </div>
+          </div>
+          <div class="line"></div>
+          <div class="row">
+            <label class="item-title">按键音</label>
+            <div class="wrapper">
+              <el-switch v-model="setting.value1"
+                         inline-prompt
+                         active-text="开"
+                         inactive-text="关"
+              />
+            </div>
+          </div>
+          <div class="row">
+            <label class="sub-title">音量</label>
+            <div class="wrapper">
+              <el-slider v-model="setting.value2"/>
+              <span>{{ setting.value2 }}%</span>
+            </div>
+          </div>
+          <div class="line"></div>
+          <div class="row">
+            <label class="item-title">释义发音</label>
+            <div class="wrapper">
+              <el-switch v-model="setting.value1"
+                         inline-prompt
+                         active-text="开"
+                         inactive-text="关"
+              />
+            </div>
+          </div>
+          <div class="row">
+            <label class="sub-title">音量</label>
+            <div class="wrapper">
+              <el-slider v-model="setting.value2"/>
+              <span>{{ setting.value2 }}%</span>
+            </div>
+          </div>
+          <div class="line"></div>
+          <div class="row">
+            <label class="item-title">效果音（章节结算页烟花音效）</label>
+            <div class="wrapper">
+              <el-switch v-model="setting.value1"
+                         inline-prompt
+                         active-text="开"
+                         inactive-text="关"
+              />
+            </div>
+          </div>
+          <div class="row">
+            <label class="sub-title">音量</label>
+            <div class="wrapper">
+              <el-slider v-model="setting.value2"/>
+              <span>{{ setting.value2 }}%</span>
+            </div>
           </div>
         </div>
-        <div class="row">
-          <label class="main-title">单词发音</label>
-          <div class="wrapper">
-            <el-switch v-model="setting.value1"/>
+        <div>
+          <div class="row">
+            <label class="item-title">章节乱序</label>
+            <div class="wrapper">
+              <el-switch v-model="setting.value1"
+                         inline-prompt
+                         active-text="开"
+                         inactive-text="关"
+              />
+            </div>
           </div>
-        </div>
-        <div class="row">
-          <label class="main-title">音量</label>
-          <div class="wrapper">
-            <el-slider v-model="setting.value2"/>
-            <span>{{ setting.value2 }}%</span>
+          <div class="desc">
+            开启后，每次练习章节中单词会随机排序。下一章节生效
           </div>
-        </div>
-        <div class="row">
-          <label class="main-title">倍速</label>
-          <div class="wrapper">
-            <el-slider v-model="setting.value3" :step="0.1" :max="4"/>
-            <span>{{ setting.value3 }}</span>
+          <div class="line"></div>
+          <div class="row">
+            <label class="item-title">练习时展示上一个/下一个单词</label>
+            <div class="wrapper">
+              <el-switch v-model="setting.value1"
+                         inline-prompt
+                         active-text="开"
+                         inactive-text="关"
+              />
+            </div>
+          </div>
+          <div class="desc">
+            开启后，练习中会在上方展示上一个/下一个单词
+          </div>
+          <div class="line"></div>
+          <div class="row">
+            <label class="item-title">是否忽略大小写</label>
+            <div class="wrapper">
+              <el-switch v-model="setting.value1"
+                         inline-prompt
+                         active-text="开"
+                         inactive-text="关"
+              />
+            </div>
+          </div>
+          <div class="desc">
+            开启后，输入时不区分大小写，如输入“hello”和“Hello”都会被认为是正确的
+          </div>
+          <div class="line"></div>
+          <div class="row">
+            <label class="item-title">是否允许默写模式下显示提示</label>
+            <div class="wrapper">
+              <el-switch v-model="setting.value1"
+                         inline-prompt
+                         active-text="开"
+                         inactive-text="关"
+              />
+            </div>
+          </div>
+          <div class="desc">
+            开启后，可以通过鼠标 hover 单词显示正确答案
+          </div>
+          <div class="line"></div>
+          <div class="row">
+            <label class="item-title">字体设置</label>
+          </div>
+          <div class="row">
+            <label class="sut-title">外语字体</label>
+            <div class="wrapper">
+              <el-slider v-model="setting.value2"/>
+              <span>{{ setting.value2 }}px</span>
+            </div>
+          </div>
+          <div class="row">
+            <label class="sut-title">中文字体</label>
+            <div class="wrapper">
+              <el-slider v-model="setting.value2"/>
+              <span>{{ setting.value2 }}px</span>
+            </div>
           </div>
         </div>
       </div>
@@ -134,7 +270,7 @@ header {
 
 .setting-modal {
   width: 40vw;
-  height: 50vh;
+  height: 80vh;
   display: flex;
   color: var(--color-font);
 
@@ -157,11 +293,12 @@ header {
     background: white;
     flex: 1;
     height: 100%;
+    padding: 0 $space;
+    overflow: auto;
 
     .row {
       height: 50rem;
       display: flex;
-      padding: 0 $space;
       justify-content: space-between;
       align-items: center;
       gap: $space * 8;
@@ -185,8 +322,26 @@ header {
       }
 
       .main-title {
+        font-size: 26rem;
+        font-weight: bold;
+      }
+
+      .item-title {
         font-size: 22rem;
       }
+
+      .sub-title {
+        font-size: 18rem;
+      }
+    }
+
+    .desc {
+      margin-bottom: 10rem;
+      font-size: 14rem;
+    }
+
+    .line {
+      border-bottom: 1px solid #c4c3c3;
     }
   }
 }