From faa2b94bc88b7f7095274ac981f3386bebcb1407 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Fri, 23 Aug 2024 15:34:50 +0800
Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E5=8F=AA=E8=AF=BB=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8B=E9=9A=90=E8=97=8F=E7=9B=B8=E5=85=B3=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/Edit/components/SidebarTrigger.vue  | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/Edit/components/SidebarTrigger.vue b/web/src/pages/Edit/components/SidebarTrigger.vue
index d5f5711c..bbadb8c6 100644
--- a/web/src/pages/Edit/components/SidebarTrigger.vue
+++ b/web/src/pages/Edit/components/SidebarTrigger.vue
@@ -4,7 +4,7 @@
     @click.stop
     :class="{ hasActive: show && activeSidebar, show: show, isDark: isDark }"
   >
-    <div class="toggleShowBtn" :class="{hide: !show}" @click="show = !show">
+    <div class="toggleShowBtn" :class="{ hide: !show }" @click="show = !show">
       <span class="iconfont iconjiantouyou"></span>
     </div>
     <div class="trigger">
@@ -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;