diff --git a/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue b/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue
index c24395dfcc..35dd4b9dcc 100644
--- a/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue
+++ b/frontend/src/business/components/track/plan/common/TestPlanTestCaseStatusButton.vue
@@ -1,22 +1,22 @@
 <template>
   <el-row type="flex" justify="start" :gutter="20" class="status-button">
     <el-col>
-      <el-button type="success" round size="mini"
+      <el-button :disabled="isReadOnly" type="success" round size="mini"
                  :icon="status == 'Pass' ? 'el-icon-check' : ''"
                  @click="setStatus('Pass')"> {{$t('test_track.plan_view.pass')}}</el-button>
     </el-col>
     <el-col>
-      <el-button type="danger" round size="mini"
+      <el-button :disabled="isReadOnly" type="danger" round size="mini"
                  :icon="status == 'Failure' ? 'el-icon-check' : ''"
                  @click="setStatus('Failure')"> {{$t('test_track.plan_view.failure')}}</el-button>
     </el-col>
     <el-col>
-      <el-button type="warning" round size="mini"
+      <el-button :disabled="isReadOnly" type="warning" round size="mini"
                  :icon="status == 'Blocking' ? 'el-icon-check' : ''"
                  @click="setStatus('Blocking')"> {{$t('test_track.plan_view.blocking')}}</el-button>
     </el-col>
     <el-col>
-      <el-button type="info" round size="mini"
+      <el-button :disabled="isReadOnly" type="info" round size="mini"
                  :icon="status == 'Skip' ? 'el-icon-check' : ''"
                  @click="setStatus('Skip')"> {{$t('test_track.plan_view.skip')}}</el-button>
     </el-col>
@@ -29,6 +29,10 @@
       props: {
         status: {
           type: String
+        },
+        isReadOnly: {
+          type: Boolean,
+          default: false
         }
       },
       methods: {
diff --git a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
index 38d68dd647..056e111cf8 100644
--- a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
@@ -41,7 +41,7 @@
                              @click="handleNext()"/>
                   <el-divider direction="vertical"></el-divider>
 
-                  <el-button type="primary" size="mini" @click="saveCase()">{{$t('test_track.save')}}</el-button>
+                  <el-button type="primary" size="mini" :disabled="isReadOnly" @click="saveCase()">{{$t('test_track.save')}}</el-button>
                 </el-col>
 
               </el-row>
@@ -69,6 +69,7 @@
                 <el-col :span="13">
                   <test-plan-test-case-status-button class="status-button"
                                                      @statusChange="statusChange"
+                                                     :is-read-only="isReadOnly"
                                                      :status="testCase.status"/>
                 </el-col>
               </el-row>
@@ -130,6 +131,7 @@
                           type="textarea"
                           :autosize="{ minRows: 2, maxRows: 4}"
                           :rows="2"
+                          :disabled="isReadOnly"
                           v-model="scope.row.actualResult"
                           :placeholder="$t('commons.input_content')"
                           clearable></el-input>
@@ -139,6 +141,7 @@
                     <el-table-column :label="$t('test_track.plan_view.step_result')" min-width="9%">
                       <template v-slot:default="scope">
                         <el-select
+                          :disabled="isReadOnly"
                           v-model="scope.row.executeResult"
                           size="mini">
                           <el-option :label="$t('test_track.plan_view.pass')" value="Pass" style="color: #7ebf50;"></el-option>
@@ -155,6 +158,7 @@
               <el-row v-if="testCase.issues">
                 <el-col :span="5" :offset="1">
                   <el-switch
+                    :disabled="isReadOnly"
                     v-model="testCase.issues.hasIssues"
                     @change="issuesChange"
                     :active-text="$t('test_track.plan_view.submit_issues')">
@@ -164,7 +168,7 @@
 
               <el-row v-if="testCase.issues && testCase.issues.hasIssues">
                 <el-col :span="20" :offset="1" class="step-edit">
-                  <ckeditor :editor="editor" v-model="testCase.issues.content"/>
+                  <ckeditor :editor="editor" :disabled="isReadOnly" :config="editorConfig" v-model="testCase.issues.content"/>
                 </el-col>
               </el-row>
 
@@ -220,6 +224,10 @@
         index: 0,
         testCases: [],
         editor: ClassicEditor,
+        editorConfig: {
+          // 'increaseIndent','decreaseIndent'
+          toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ,'insertTable', '|','undo', 'redo'],
+        },
         test: {},
         activeTab: 'detail'
       };
@@ -230,6 +238,10 @@
       },
       searchParam: {
         type: Object
+      },
+      isReadOnly: {
+        type: Boolean,
+        default: false
       }
     },
     methods: {
@@ -334,10 +346,8 @@
       },
       testTabChange(data) {
         if (this.testCase.type == 'performance' && data.paneName == 'result') {
-          console.log(data);
           this.$refs.performanceTestResult.checkReportStatus();
         }
-        // console.log(data);
       },
       saveReport(reportId) {
         this.$post('/test/plan/case/edit', {id: this.testCase.id, reportId: reportId});
diff --git a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseList.vue
index b44d4bc54f..ea7cf610f5 100644
--- a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseList.vue
@@ -28,6 +28,7 @@
         @sort-change="sort"
         @select="handleSelectionChange"
         row-key="id"
+        @row-click="showDetail"
         :data="tableData">
 
         <el-table-column
@@ -134,6 +135,7 @@
         ref="testPlanTestCaseEdit"
         :search-param="condition"
         @refresh="initTableData"
+        :is-read-only="isReadOnly"
         @refreshTable="search"/>
 
       <test-report-template-list @openReport="openReport" :plan-id="planId" ref="testReporTtemplateList"/>
@@ -188,6 +190,7 @@
           total: 0,
           selectIds: new Set(),
           testPlan: {},
+          isReadOnly: false,
           priorityFilters: [
             {text: 'P0', value: 'P0'},
             {text: 'P1', value: 'P1'},
@@ -247,6 +250,10 @@
             });
           }
         },
+        showDetail(row, event, column) {
+          this.isReadOnly = true;
+          this.$refs.testPlanTestCaseEdit.openTestCaseEdit(row);
+        },
         refresh() {
           this.condition = {};
           this.selectIds.clear();
@@ -271,6 +278,7 @@
           return path + "/" + this.currentPage + "/" + this.pageSize;
         },
         handleEdit(testCase, index) {
+          this.isReadOnly = false;
           this.$refs.testPlanTestCaseEdit.openTestCaseEdit(testCase);
         },
         handleDelete(testCase) {
@@ -390,7 +398,7 @@
     width: 240px;
   }
 
-  .test-case-status {
+  .test-case-status,.el-table {
     cursor:pointer;
   }
 
diff --git a/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/RichTextComponent.vue b/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/RichTextComponent.vue
index 39f0e05391..39477cb49f 100644
--- a/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/RichTextComponent.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/RichTextComponent.vue
@@ -28,7 +28,7 @@
           editor: ClassicEditor,
           // editorData: '<p>Content of the editor.</p>',
           editorConfig: {
-            // The configuration of the editor.
+            toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ,'insertTable', '|','undo', 'redo']
           }
         }
       },