diff --git a/frontend/package.json b/frontend/package.json
index aa71a7ebd8..cba23d34a8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,7 +52,7 @@
     "vue-float-action-button": "^0.6.6",
     "vue-i18n": "^8.15.3",
     "vue-jsonpath-picker": "^1.1.5",
-    "vue-minder-editor-plus": "^1.0.25",
+    "vue-minder-editor-plus": "^1.0.26",
     "vue-papa-parse": "^2.0.0",
     "vue-pdf": "^4.2.0",
     "vue-router": "^3.1.3",
diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
index e53456519a..79ac23a62c 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
@@ -8,6 +8,9 @@
       :tree-nodes="data"
       :allLabel="$t('commons.all_module_title')"
       :type="isReadOnly ? 'view' : 'edit'"
+      :delete-permission="['PROJECT_API_SCENARIO:READ+DELETE']"
+      :add-permission="['PROJECT_API_SCENARIO:READ+CREATE']"
+      :update-permission="['PROJECT_API_SCENARIO:READ+EDIT']"
       @add="add"
       @edit="edit"
       @drag="drag"
diff --git a/frontend/src/business/components/api/definition/components/module/ApiModule.vue b/frontend/src/business/components/api/definition/components/module/ApiModule.vue
index a8865165af..56d2c47180 100644
--- a/frontend/src/business/components/api/definition/components/module/ApiModule.vue
+++ b/frontend/src/business/components/api/definition/components/module/ApiModule.vue
@@ -13,6 +13,9 @@
       @drag="drag"
       @remove="remove"
       @refresh="list"
+      :delete-permission="['PROJECT_API_DEFINITION:READ+DELETE_API']"
+      :add-permission="['PROJECT_API_DEFINITION:READ+CREATE_API']"
+      :update-permission="['PROJECT_API_DEFINITION:READ+EDIT_API']"
       @nodeSelectEvent="nodeChange"
       ref="nodeTree">
 
diff --git a/frontend/src/business/components/common/components/MsModuleMinder.vue b/frontend/src/business/components/common/components/MsModuleMinder.vue
index 79b7c63264..70190beb1a 100644
--- a/frontend/src/business/components/common/components/MsModuleMinder.vue
+++ b/frontend/src/business/components/common/components/MsModuleMinder.vue
@@ -14,6 +14,7 @@
       :default-mold="defaultMode"
       @afterMount="$emit('afterMount')"
       @moldChange="handleMoldChange"
+      :disabled="disabled"
       @save="save"
     />
   </div>
@@ -63,7 +64,8 @@ export default {
     },
     tagDisableCheck: Function,
     tagEditCheck: Function,
-    priorityDisableCheck: Function
+    priorityDisableCheck: Function,
+    disabled: Boolean
   },
   data() {
     return {
diff --git a/frontend/src/business/components/common/components/MsTableButton.vue b/frontend/src/business/components/common/components/MsTableButton.vue
index a4129e7422..624e423d2b 100644
--- a/frontend/src/business/components/common/components/MsTableButton.vue
+++ b/frontend/src/business/components/common/components/MsTableButton.vue
@@ -7,11 +7,6 @@
 <script>
     export default {
       name: "MsTableButton",
-      data() {
-        return {
-          disabled: false
-        }
-      },
       props: {
         content: String,
         icon: {
@@ -33,7 +28,8 @@
         isTesterPermission: {
           type: Boolean,
           default: false
-        }
+        },
+        disabled: Boolean
       },
       methods: {
         exec() {
diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index 75f8cd752f..35c2ea1191 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -74,8 +74,8 @@
         </el-tab-pane>
         <el-tab-pane name="add">
           <template v-slot:label>
-            <el-dropdown @command="handleCommand">
-              <el-button type="primary" plain icon="el-icon-plus" size="mini"/>
+            <el-dropdown @command="handleCommand" v-permission="['PROJECT_TRACK_CASE:READ+CREATE']">
+              <el-button type="primary" plain icon="el-icon-plus" size="mini" />
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="ADD" v-permission="['PROJECT_TRACK_CASE:READ+CREATE']">
                   {{ $t('test_track.case.create') }}
diff --git a/frontend/src/business/components/track/case/components/ShowMoreBtn.vue b/frontend/src/business/components/track/case/components/ShowMoreBtn.vue
index 67db28a734..8f22714816 100644
--- a/frontend/src/business/components/track/case/components/ShowMoreBtn.vue
+++ b/frontend/src/business/components/track/case/components/ShowMoreBtn.vue
@@ -6,7 +6,7 @@
       </div>
       <el-dropdown-menu slot="dropdown" class="dropdown-menu-class">
         <div class="show-more-btn-title">{{$t('test_track.case.batch_handle', [size])}}</div>
-        <el-dropdown-item v-for="(btn,index) in buttons" v-permission="btn.permission ? btn.permission: []" :key="index" @click.native.stop="click(btn)">
+        <el-dropdown-item v-for="(btn,index) in buttons" :disabled="isDisable(btn)" :key="index" @click.native.stop="click(btn)">
           {{btn.name}}
         </el-dropdown-item>
       </el-dropdown-menu>
@@ -15,6 +15,8 @@
 </template>
 
 <script>
+  import {hasPermissions} from "@/common/js/utils";
+
   export default {
     name: "ShowMoreBtn",
     props: {
@@ -36,6 +38,12 @@
         if (btn.handleClick instanceof Function) {
           btn.handleClick();
         }
+      },
+      isDisable(item) {
+        if (item.permission && item.permission.length > 0) {
+          return !hasPermissions(item.permission);
+        }
+        return true;
       }
     }
   }
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index 4cc417a5a2..b1535ec4c0 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -12,6 +12,7 @@
                            :content="$t('commons.save')"
                            size="small" @click="saveCase"
                            icon=""
+                           :disabled="readOnly"
                            title="ctrl + s"/>
           <el-dropdown v-else split-button type="primary" class="ms-api-buttion" @click="handleCommand"
                        @command="handleCommand" size="small" style="float: right;margin-right: 20px">
@@ -123,7 +124,7 @@
   import {
     getCurrentUser,
     getNodePath,
-    handleCtrlSEvent,
+    handleCtrlSEvent, hasPermission,
     listenGoBack,
     removeGoBackListener
   } from "@/common/js/utils";
@@ -208,7 +209,6 @@
           stepModel: 'STEP',
           customNum: ''
         },
-        readOnly: false,
         maintainerOptions: [],
         testOptions: [],
         workspaceId: '',
@@ -277,6 +277,9 @@
       },
       systemNameMap() {
         return SYSTEM_FIELD_NAME_MAP;
+      },
+      readOnly() {
+        return !hasPermission('PROJECT_TRACK_CASE:READ+EDIT');
       }
     },
     mounted() {
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 4ff2f4c2b7..40b37bb6a7 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -275,7 +275,8 @@ export default {
           handleClick: this.handleBatchEdit,
           permissions: ['PROJECT_TRACK_CASE:READ+EDIT']
         }, {
-          name: this.$t('test_track.case.batch_move_case'), handleClick: this.handleBatchMove
+          name: this.$t('test_track.case.batch_move_case'),
+          handleClick: this.handleBatchMove
         }, {
           name: this.$t('test_track.case.batch_delete_case'),
           handleClick: this.handleDeleteBatch,
diff --git a/frontend/src/business/components/track/common/NodeTree.vue b/frontend/src/business/components/track/common/NodeTree.vue
index 16feecb5c5..a38fbcae5a 100644
--- a/frontend/src/business/components/track/common/NodeTree.vue
+++ b/frontend/src/business/components/track/common/NodeTree.vue
@@ -38,6 +38,7 @@
             v-if="data.id !== 'root' && data.name !=='默认模块'"
             class="item"
             effect="dark"
+            v-permission="updatePermission"
             :open-delay="200"
             :content="$t('test_track.module.rename')"
             placement="top">
@@ -45,6 +46,7 @@
           </el-tooltip>
           <el-tooltip
             v-if="data.name ==='默认模块' && data.level !==1"
+            v-permission="updatePermission"
             class="item"
             effect="dark"
             :open-delay="200"
@@ -56,6 +58,7 @@
             class="item"
             effect="dark"
             :open-delay="200"
+            v-permission="addPermission"
             :content="$t('test_track.module.add_submodule')"
             placement="top">
             <i @click.stop="append(node, data)" class="el-icon-circle-plus-outline"></i>
@@ -65,6 +68,7 @@
             v-if="data.name ==='默认模块' && data.level !==1"
             class="item" effect="dark"
             :open-delay="200"
+            v-permission="deletePermission"
             :content="$t('commons.delete')"
             placement="top">
             <i @click.stop="remove(node, data)" class="el-icon-delete"></i>
@@ -75,6 +79,7 @@
             class="item" effect="dark"
             :open-delay="200"
             :content="$t('commons.delete')"
+            v-permission="deletePermission"
             placement="top">
             <i @click.stop="remove(node, data)" class="el-icon-delete"></i>
           </el-tooltip>
@@ -99,7 +104,7 @@ export default {
         children: "children",
         label: "label"
       },
-      extendTreeNodes: []
+      extendTreeNodes: [],
     };
   },
   props: {
@@ -122,6 +127,9 @@ export default {
         return 50;
       }
     },
+    updatePermission: Array,
+    addPermission: Array,
+    deletePermission: Array
   },
   watch: {
     treeNodes() {
diff --git a/frontend/src/business/components/track/common/TestCaseNodeTree.vue b/frontend/src/business/components/track/common/TestCaseNodeTree.vue
index 6accdac034..d5144d50ef 100644
--- a/frontend/src/business/components/track/common/TestCaseNodeTree.vue
+++ b/frontend/src/business/components/track/common/TestCaseNodeTree.vue
@@ -6,6 +6,9 @@
       :tree-nodes="treeNodes"
       :type="'edit'"
       :name-limit="100"
+      :delete-permission="['PROJECT_TRACK_CASE:READ+DELETE']"
+      :add-permission="['PROJECT_TRACK_CASE:READ+CREATE']"
+      :update-permission="['PROJECT_TRACK_CASE:READ+EDIT']"
       @add="add"
       @edit="edit"
       @drag="drag"
diff --git a/frontend/src/business/components/track/common/minder/TestCaseMinder.vue b/frontend/src/business/components/track/common/minder/TestCaseMinder.vue
index 0e52625e35..cc27b16339 100644
--- a/frontend/src/business/components/track/common/minder/TestCaseMinder.vue
+++ b/frontend/src/business/components/track/common/minder/TestCaseMinder.vue
@@ -9,6 +9,7 @@
     :distinct-tags="tags"
     :tag-edit-check="tagEditCheck()"
     :priority-disable-check="priorityDisableCheck()"
+    :disabled="disabled"
     @save="save"
     ref="minder"
   />
@@ -21,7 +22,7 @@ import {
   getTestCaseDataMap,
   parseCase, priorityDisableCheck, tagEditCheck, updateNode
 } from "@/business/components/track/common/minder/minderUtils";
-import {getNodePath} from "@/common/js/utils";
+import {getNodePath, hasPermission} from "@/common/js/utils";
 export default {
 name: "TestCaseMinder",
   components: {MsModuleMinder},
@@ -52,6 +53,9 @@ name: "TestCaseMinder",
     },
     moduleOptions() {
       return this.$store.state.testCaseModuleOptions;
+    },
+    disabled() {
+      return !hasPermission('PROJECT_TRACK_CASE:READ+EDIT');
     }
   },
   watch: {
diff --git a/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue b/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue
index bfd27d8d51..c7be511f0b 100644
--- a/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue
+++ b/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue
@@ -41,6 +41,9 @@
     },
     methods: {
       setStatus(status) {
+        if (this.isReadOnly) {
+          return;
+        }
         this.$emit('statusChange', status);
       }
     }
diff --git a/frontend/src/business/components/track/plan/components/TestPlanList.vue b/frontend/src/business/components/track/plan/components/TestPlanList.vue
index cd703cb789..f4a91e2075 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanList.vue
@@ -249,6 +249,7 @@ import HeaderCustom from "@/business/components/common/head/HeaderCustom";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
 import MsTag from "@/business/components/common/components/MsTag";
 import MsTestPlanScheduleMaintain from "@/business/components/track/plan/components/ScheduleMaintain";
+import {hasPermission} from "@/common/js/utils";
 
 export default {
   name: "TestPlanList",
@@ -366,6 +367,9 @@ export default {
       this.$emit('testPlanEdit', testPlan);
     },
     statusChange(data) {
+      if (!hasPermission('PROJECT_TRACK_PLAN:READ+EDIT')) {
+        return;
+      }
       let oldStatus = data.item.status;
       let newStatus = data.status;
       let param = {};
diff --git a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
index 5de93e879d..91bfb8f36c 100644
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
@@ -122,7 +122,7 @@ import ApiTestDetail from "../test/ApiTestDetail";
 import ApiTestResult from "../test/ApiTestResult";
 import PerformanceTestDetail from "../test/PerformanceTestDetail";
 import PerformanceTestResult from "../test/PerformanceTestResult";
-import {getUUID, listenGoBack, removeGoBackListener} from "@/common/js/utils";
+import {getUUID, hasPermission, listenGoBack, removeGoBackListener} from "@/common/js/utils";
 import TestCaseAttachment from "@/business/components/track/case/components/TestCaseAttachment";
 import CaseComment from "@/business/components/track/case/components/CaseComment";
 import MsPreviousNextButton from "../../../../../common/components/MsPreviousNextButton";
@@ -185,7 +185,8 @@ export default {
       testCaseTemplate: {},
       formLabelWidth: "100px",
       isCustomFiledActive: false,
-      otherInfoActive: true
+      otherInfoActive: true,
+      isReadOnly: false
     };
   },
   props: {
@@ -194,10 +195,6 @@ export default {
     },
     searchParam: {
       type: Object
-    },
-    isReadOnly: {
-      type: Boolean,
-      default: false
     }
   },
   computed: {
@@ -383,6 +380,8 @@ export default {
       this.activeTab = 'detail';
       this.hasTapdId = false;
       this.hasZentaoId = false;
+      this.isReadOnly = !hasPermission('PROJECT_TRACK_PLAN:READ+RELEVANCE_OR_CANCEL');
+
       listenGoBack(this.handleClose);
       let initFuc = this.initData;
       getTemplate('field/template/case/get/relate/', this)