Demo：只读模式下隐藏相关侧边栏

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

@@ -41,11 +41,25 @@ export default {
   computed: {
     ...mapState({
       isDark: state => state.localConfig.isDark,
-      activeSidebar: state => state.activeSidebar
+      activeSidebar: state => state.activeSidebar,
+      isReadonly: state => state.isReadonly
     }),
 
     triggerList() {
-      return sidebarTriggerList[this.$i18n.locale] || sidebarTriggerList.zh
+      let list = sidebarTriggerList[this.$i18n.locale] || sidebarTriggerList.zh
+      if (this.isReadonly) {
+        list = list.filter(item => {
+          return ['outline', 'shortcutKey'].includes(item.value)
+        })
+      }
+      return list
+    }
+  },
+  watch: {
+    isReadonly(val) {
+      if (val) {
+        this.setActiveSidebar(null)
+      }
     }
   },
   methods: {
@@ -72,10 +86,10 @@ export default {
       background-color: #262a2e;
 
       .triggerItem {
-        color: hsla(0,0%,100%,.6);
+        color: hsla(0, 0%, 100%, 0.6);
 
         &:hover {
-          background-color: hsla(0,0%,100%,.05);
+          background-color: hsla(0, 0%, 100%, 0.05);
         }
       }
     }
@@ -98,7 +112,7 @@ export default {
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
-    transition: left .1s linear;
+    transition: left 0.1s linear;
     z-index: 0;
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;