Demo：1.支持通过图标调出搜索；2.支持通过图标切换暗黑模式

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1690506335310') format('woff2'),
+  src: url('iconfont.woff2?t=1690537337895') format('woff2'),
-       url('iconfont.woff?t=1690506335310') format('woff'),
+       url('iconfont.woff?t=1690537337895') format('woff'),
-       url('iconfont.ttf?t=1690506335310') format('truetype');
+       url('iconfont.ttf?t=1690537337895') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconlieri:before {
+  content: "\e60b";
+}
+
+.iconmoon_line:before {
+  content: "\e745";
+}
+
 .iconsousuo:before {
   content: "\e693";
 }

web/src/pages/Edit/components/NavigatorToolbar.vue

@@ -15,6 +15,9 @@
         />
       </el-select>
     </div>
+    <div class="item">
+      <div class="btn iconfont iconsousuo" @click="showSearch"></div>
+    </div>
     <div class="item">
       <MouseAction :isDark="isDark" :mindMap="mindMap"></MouseAction>
     </div>
@@ -28,10 +31,7 @@
         "
         placement="top"
       >
-        <div
+        <div class="btn iconfont icondaohang1" @click="toggleMiniMap"></div>
-          class="btn iconfont icondaohang1"
-          @click="toggleMiniMap"
-        ></div>
       </el-tooltip>
     </div>
     <div class="item">
@@ -64,6 +64,13 @@
     <div class="item">
       <Scale :isDark="isDark" :mindMap="mindMap"></Scale>
     </div>
+    <div class="item">
+      <div
+        class="btn iconfont"
+        :class="[isDark ? 'iconmoon_line' : 'iconlieri']"
+        @click="toggleDark"
+      ></div>
+    </div>
     <div class="item">
       <a href="https://github.com/wanglin2/mind-map" target="_blank">
         <span class="iconfont icongithub"></span>
@@ -79,7 +86,7 @@ import MouseAction from './MouseAction.vue'
 import { langList } from '@/config'
 import i18n from '@/i18n'
 import { storeLang, getLang } from '@/api'
-import { mapState } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 
 /**
  * @Author: 王林
@@ -107,9 +114,11 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark']),
+    ...mapState(['isDark'])
   },
   methods: {
+    ...mapMutations(['setIsDark']),
+
     readonlyChange() {
       this.isReadonly = !this.isReadonly
       this.mindMap.setMode(this.isReadonly ? 'readonly' : 'edit')
@@ -123,6 +132,14 @@ export default {
     onLangChange(lang) {
       i18n.locale = lang
       storeLang(lang)
+    },
+
+    showSearch() {
+      this.$bus.$emit('show_search')
+    },
+
+    toggleDark() {
+      this.setIsDark(!this.isDark)
     }
   }
 }
@@ -147,11 +164,11 @@ export default {
 
     .item {
       a {
-        color: hsla(0,0%,100%,.6);
+        color: hsla(0, 0%, 100%, 0.6);
       }
 
       .btn {
-        color: hsla(0,0%,100%,.6);
+        color: hsla(0, 0%, 100%, 0.6);
       }
     }
   }

web/src/pages/Edit/components/Search.vue

@@ -83,20 +83,23 @@ export default {
     }
   },
   created() {
+    this.$bus.$on('show_search', this.showSearch)
     this.mindMap.on('search_info_change', data => {
       this.currentIndex = data.currentIndex + 1
       this.total = data.total
       this.showSearchInfo = true
     })
-    this.mindMap.keyCommand.addShortcut('Control+f', () => {
+    this.mindMap.keyCommand.addShortcut('Control+f', this.showSearch)
-      this.$bus.$emit('closeSideBar')
-      this.show = true
-      this.$refs.input.focus()
-    })
   },
   methods: {
     isUndef,
-    
+
+    showSearch() {
+      this.$bus.$emit('closeSideBar')
+      this.show = true
+      this.$refs.input.focus()
+    },
+
     hideReplaceInput() {
       this.showReplaceInput = false
       this.replaceText = ''