Demo:优化页面:侧边栏按钮支持收起;优化小屏适配

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

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1689210173189') format('woff2'),
+  src: url('iconfont.woff2?t=1689407546912') format('woff2'),
-       url('iconfont.woff?t=1689210173189') format('woff'),
+       url('iconfont.woff?t=1689407546912') format('woff'),
-       url('iconfont.ttf?t=1689210173189') format('truetype');
+       url('iconfont.ttf?t=1689407546912') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconjiantouyou:before {
+  content: "\e62d";
+}
+
+.iconbianji1:before {
+  content: "\e60a";
+}
+
+.icondaohang1:before {
+  content: "\e632";
+}
+
+.iconyanjing:before {
+  content: "\e8bf";
+}
+
 .iconwangzhan:before {
   content: "\e628";
 }

web/src/lang/en_us.js

@@ -114,8 +114,9 @@ export default {
   },
   navigatorToolbar: {
     openMiniMap: 'Open mini map',
-    readonly: 'Readonly',
+    closeMiniMap: 'Close mini map',
-    edit: 'Edit'
+    readonly: 'Change to eadonly',
+    edit: 'Change to edit'
   },
   nodeHyperlink: {
     title: 'Link',

web/src/lang/zh_cn.js

@@ -114,8 +114,9 @@ export default {
   },
   navigatorToolbar: {
     openMiniMap: '开启小地图',
-    readonly: '只读模式',
+    closeMiniMap: '关闭小地图',
-    edit: '编辑模式'
+    readonly: '切换为只读模式',
+    edit: '切换为编辑模式'
   },
   nodeHyperlink: {
     title: '超链接',

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

@@ -95,4 +95,10 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 635px) {
+  .countContainer {
+    display: none;
+  }
+}
 </style>

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

@@ -74,6 +74,7 @@ export default {
 
   .btn {
     cursor: pointer;
+    font-size: 18px;
   }
 }
 </style>

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

@@ -19,25 +19,51 @@
       <MouseAction :mindMap="mindMap"></MouseAction>
     </div>
     <div class="item">
-      <el-checkbox v-model="openMiniMap" @change="toggleMiniMap">{{
+      <el-tooltip
-        $t('navigatorToolbar.openMiniMap')
+        effect="dark"
-      }}</el-checkbox>
+        :content="
+          openMiniMap
+            ? $t('navigatorToolbar.closeMiniMap')
+            : $t('navigatorToolbar.openMiniMap')
+        "
+        placement="top"
+      >
+        <div
+          class="btn iconfont icondaohang1"
+          @click="toggleMiniMap"
+        ></div>
+      </el-tooltip>
     </div>
     <div class="item">
-      <el-switch
+      <!-- <el-switch
         v-model="isReadonly"
         :active-text="$t('navigatorToolbar.readonly')"
         :inactive-text="$t('navigatorToolbar.edit')"
         @change="readonlyChange"
       >
-      </el-switch>
+      </el-switch> -->
-    </div>
+      <el-tooltip
-    <div class="item">
+        effect="dark"
-      <Scale :mindMap="mindMap"></Scale>
+        :content="
+          isReadonly
+            ? $t('navigatorToolbar.edit')
+            : $t('navigatorToolbar.readonly')
+        "
+        placement="top"
+      >
+        <div
+          class="btn iconfont"
+          :class="[isReadonly ? 'iconyanjing' : 'iconbianji1']"
+          @click="readonlyChange"
+        ></div>
+      </el-tooltip>
     </div>
     <div class="item">
       <Fullscreen :mindMap="mindMap"></Fullscreen>
     </div>
+    <div class="item">
+      <Scale :mindMap="mindMap"></Scale>
+    </div>
     <div class="item">
       <a href="https://github.com/wanglin2/mind-map" target="_blank">
         <span class="iconfont icongithub"></span>
@@ -79,16 +105,15 @@ export default {
       openMiniMap: false
     }
   },
-  mounted() {
-    this.toggleMiniMap(this.openMiniMap)
-  },
   methods: {
-    readonlyChange(value) {
+    readonlyChange() {
-      this.mindMap.setMode(value ? 'readonly' : 'edit')
+      this.isReadonly = !this.isReadonly
+      this.mindMap.setMode(this.isReadonly ? 'readonly' : 'edit')
     },
 
-    toggleMiniMap(show) {
+    toggleMiniMap() {
-      this.$bus.$emit('toggle_mini_map', show)
+      this.openMiniMap = !this.openMiniMap
+      this.$bus.$emit('toggle_mini_map', this.openMiniMap)
     },
 
     onLangChange(lang) {
@@ -124,6 +149,18 @@ export default {
       color: #303133;
       text-decoration: none;
     }
+
+    .btn {
+      cursor: pointer;
+      font-size: 18px;
+    }
+  }
+}
+
+@media screen and (max-width: 502px) {
+  .navigatorContainer {
+    left: 20px;
+    overflow-x: auto;
   }
 }
 </style>

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

@@ -2,8 +2,11 @@
   <div
     class="sidebarTriggerContainer"
     @click.stop
-    :class="{ show: activeSidebar }"
+    :class="{ hasActive: show && activeSidebar, show: show }"
   >
+    <div class="toggleShowBtn" :class="{hide: !show}" @click="show = !show">
+      <span class="iconfont iconjiantouyou"></span>
+    </div>
     <div class="trigger">
       <div
         class="triggerItem"
@@ -32,7 +35,7 @@ export default {
   name: 'SidebarTrigger',
   data() {
     return {
-      show: false
+      show: true
     }
   },
   computed: {
@@ -55,17 +58,57 @@ export default {
 <style lang="less" scoped>
 .sidebarTriggerContainer {
   position: fixed;
-  right: 0px;
+  right: -60px;
   margin-top: 110px;
   transition: all 0.3s;
   top: 50%;
   transform: translateY(-50%);
 
   &.show {
+    right: 0;
+  }
+
+  &.hasActive {
     right: 305px;
   }
 
+  .toggleShowBtn {
+    position: absolute;
+    left: -6px;
+    width: 35px;
+    height: 60px;
+    background: #409eff;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    transition: left .1s linear;
+    z-index: 0;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    display: flex;
+    align-items: center;
+    padding-left: 4px;
+
+    &.hide {
+      left: -8px;
+
+      span {
+        transform: rotateZ(180deg);
+      }
+    }
+
+    &:hover {
+      left: -18px;
+    }
+
+    span {
+      color: #fff;
+      transition: all 0.1s;
+    }
+  }
+
   .trigger {
+    position: relative;
     width: 60px;
     border-color: #eee;
     background-color: #fff;

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

@@ -520,4 +520,17 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 1040px) {
+  
+  .toolbarContainer {
+    .toolbar {
+      left: 20px;
+      right: 20px;
+      transform: translateX(0);
+      width: auto;
+      max-width: none;
+    }
+  }
+}
 </style>