Demo：修复只读模式下仍旧可以替换和编辑大纲的问题

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

@@ -119,21 +119,20 @@ export default {
       version: pkg.version,
       langList,
       lang: '',
-      isReadonly: false,
       openMiniMap: false
     }
   },
   computed: {
-    ...mapState(['isDark'])
+    ...mapState(['isDark', 'isReadonly'])
   },
   created() {
     this.lang = getLang()
   },
   methods: {
-    ...mapMutations(['setIsDark']),
+    ...mapMutations(['setIsDark', 'setIsReadonly']),
 
     readonlyChange() {
-      this.isReadonly = !this.isReadonly
+      this.setIsReadonly(!this.isReadonly)
       this.mindMap.setMode(this.isReadonly ? 'readonly' : 'edit')
     },
 

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

@@ -24,7 +24,7 @@
     >
       <span
         class="nodeEdit"
-        contenteditable="true"
+        :contenteditable="!isReadonly"
         :key="getKey()"
         @keydown.stop="onNodeInputKeydown($event, node)"
         @keyup.stop
@@ -69,7 +69,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark'])
+    ...mapState(['isDark', 'isReadonly'])
   },
   created() {
     window.addEventListener('keydown', this.onKeyDown)

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

@@ -32,7 +32,7 @@
           >
             <span
               class="nodeEdit"
-              contenteditable="true"
+              :contenteditable="!isReadonly"
               :key="getKey()"
               @blur="onBlur($event, node)"
               @keydown.stop="onNodeInputKeydown($event, node)"
@@ -76,7 +76,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isOutlineEdit', 'isDark'])
+    ...mapState(['isOutlineEdit', 'isDark', 'isReadonly'])
   },
   watch: {
     isOutlineEdit(val) {

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

@@ -44,10 +44,10 @@
       }}</el-button>
     </el-input>
     <div class="btnList" v-if="showReplaceInput">
-      <el-button size="small" @click="replace">{{
+      <el-button size="small" :disabled="isReadonly" @click="replace">{{
         $t('search.replace')
       }}</el-button>
-      <el-button size="small" @click="replaceAll">{{
+      <el-button size="small" :disabled="isReadonly" @click="replaceAll">{{
         $t('search.replaceAll')
       }}</el-button>
     </div>
@@ -78,7 +78,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark'])
+    ...mapState(['isDark', 'isReadonly'])
   },
   watch: {
     searchText() {

web/src/store.js

@@ -21,7 +21,8 @@ const store = new Vuex.Store({
     },
     activeSidebar: '', // 当前显示的侧边栏
     isDark: false,// 是否是暗黑模式
-    isOutlineEdit: false// 是否是大纲编辑模式
+    isOutlineEdit: false,// 是否是大纲编辑模式
+    isReadonly: false// 是否只读
   },
   mutations: {
     /**
@@ -75,7 +76,12 @@ const store = new Vuex.Store({
     // 设置大纲编辑模式
     setIsOutlineEdit(state, data) {
       state.isOutlineEdit = data
-    }
+    },
+
+    // 设置是否只读
+    setIsReadonly(state, data) {
+      state.isReadonly = data
+    },
   },
   actions: {
     /**