From ee343330e9d46af66339b686ab3347a015abc825 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 23 Aug 2023 17:40:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/style.scss          |  8 +++---
 src/components/IconWrapper.vue     | 41 ++++++++++++++++++++++++++++++
 src/components/Toolbar/Toolbar.vue | 40 ++++++++++++++++++++++-------
 3 files changed, 76 insertions(+), 13 deletions(-)
 create mode 100644 src/components/IconWrapper.vue

diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 0b8debc3..257f04d0 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -17,8 +17,8 @@ html[data-theme='dark'] {
 }
 
 $anim-time: 0.3s;
-* {
-  transition: background-color $anim-time, color $anim-time;
+div {
+  transition: background $anim-time, color $anim-time;
 }
 
 html, body {
@@ -38,12 +38,12 @@ html, body {
   height: 100%;
 }
 
-
 a {
-  //color: white;
+  color: $main;
   text-decoration: none;
 }
 
+
 ::-webkit-scrollbar {
   width: 8rem;
   height: 10rem;
diff --git a/src/components/IconWrapper.vue b/src/components/IconWrapper.vue
new file mode 100644
index 00000000..5982bd40
--- /dev/null
+++ b/src/components/IconWrapper.vue
@@ -0,0 +1,41 @@
+<script lang="jsx">
+export default {
+  render() {
+    let Vnode = this.$slots.default()[0]
+    return (
+        <div class="icon-wrapper">
+          <Vnode
+          />
+        </div>
+    )
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/assets/css/colors";
+
+$w: 20rem;
+.icon-wrapper {
+  padding: 2rem;
+  //width: 24rem;
+  //height: 24rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3rem;
+  background: transparent;
+  transition: all .3s;
+  color: #0C8CE9;
+
+  &:hover {
+    background: $main;
+    color: white;
+  }
+
+  ::v-deep svg {
+    width: $w;
+    height: $w;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index 3af9f0b3..9fe0eb2b 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -17,6 +17,11 @@ import useThemeColor from "@/hooks/useThemeColor.ts"
 import {useBaseStore} from "@/stores/base.ts"
 import SettingModal from "@/components/Toolbar/SettingModal.vue"
 import FeedbackModal from "@/components/Toolbar/FeedbackModal.vue"
+import IconWrapper from "@/components/IconWrapper.vue";
+import IconCog6Tooth from '~icons/heroicons/cog-6-tooth-solid'
+
+import IconLanguage from '~icons/tabler/language'
+import IconLanguageOff from '~icons/tabler/language-off'
 
 const {appearance, toggle} = useThemeColor()
 const store = useBaseStore()
@@ -35,21 +40,38 @@ const showSettingModal = $ref(false)
               @click="toggle"/>
         <sun-one v-else theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2" @click="toggle"/>
       </Tooltip>
-      <Tooltip title="设置">
-        <setting-two @click="showSettingModal = true" theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
-      </Tooltip>
-      <Tooltip title="反馈">
-        <bug @click="showFeedbackModal = true" theme="outline" size="20" fill="#999" :strokeWidth="2"/>
-      </Tooltip>
+
       <Tooltip title="音效设置">
-        <volume-notice theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
+        <IconWrapper>
+          <volume-notice/>
+        </IconWrapper>
       </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"/>
+        <IconWrapper>
+          <IconLanguage></IconLanguage>
+<!--          <IconLanguageOff></IconLanguageOff>-->
+        </IconWrapper>
+      </Tooltip>
+      <Tooltip title="开关释义显示">
+        <IconWrapper>
+          <IconLanguage></IconLanguage>
+<!--          <IconLanguageOff></IconLanguageOff>-->
+        </IconWrapper>
+      </Tooltip>
+
+      <Tooltip title="反馈">
+        <IconWrapper>
+          <bug @click="showFeedbackModal = true"/>
+        </IconWrapper>
+      </Tooltip>
+      <Tooltip title="设置">
+        <IconWrapper>
+          <IconCog6Tooth @click="showSettingModal = true"></IconCog6Tooth>
+        </IconWrapper>
       </Tooltip>
       <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"