diff --git a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar.vue b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar.vue
index 39d6652516..5b14f5db00 100644
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
     <ms-drawer :class="{'hidden': asideHidden}" :visible="true" :size="10" direction="left" :show-full-screen="false" :is-show-close="false">
-      <div class="title-item" v-for="item in data" :key="item.title">
-        <i class="el-icon-paperclip"></i>
-        <a :href="'#' + item.link">{{ item.title }}</a>
-      </div>
-
-      <div class="hiddenBottom" @click.stop="asideHidden = !asideHidden">
-        <i v-if="!asideHidden" class="el-icon-arrow-left"/>
-        <i v-if="asideHidden" class="el-icon-arrow-right"/>
+      <div class="title-item" >
+         <span class="title-name">目录</span>
+        <el-tabs tab-position="right" v-model="activeName">
+          <el-tab-pane v-for="item in data" :key="item.title" :label="item.title" :name="item.link"></el-tab-pane>
+        </el-tabs>
       </div>
+        <div class="hiddenBottom" @click.stop="asideHidden = !asideHidden">
+          <span>目录</span>
+        </div>
     </ms-drawer>
   </div>
 </template>
@@ -22,6 +22,7 @@ export default {
   data() {
     return {
       asideHidden: true,
+      activeName: "1",
       data: [
         {
           link: 'overview',
@@ -45,6 +46,12 @@ export default {
         }
       ]
     }
+  },
+  watch: {
+    activeName() {
+      let url = new URL(window.location.href);
+      window.location.href = url.origin + '#' + this.activeName;
+    }
   }
 }
 </script>
@@ -52,20 +59,22 @@ export default {
 <style scoped>
 
 .hiddenBottom {
-  width: 8px;
-  height: 50px;
+  width: 20px;
+  height: 60px;
   /*top: calc((100vh - 80px)/3);*/
-  right: -10px;
+  right: -27px;
+  padding: 3px;
   /*top: 0;*/
   top: 40%;
-  line-height: 50px;
+  line-height: 30px;
   border-radius: 0 15px 15px 0;
   background-color: #acb7c1;
   display: inline-block;
   position: absolute;
   cursor: pointer;
-  opacity: 0.6;
-  font-size: 2px;
+  opacity: 0.5;
+  font-size: 10px;
+  font-weight: bold;
   margin-left: 1px;
 }
 
@@ -74,9 +83,9 @@ export default {
 }
 
 .hiddenBottom:hover {
-  background-color: #783887;
+  /*background-color: #777979;*/
   opacity: 0.8;
-  width: 12px;
+  /*width: 12px;*/
 }
 
 .hiddenBottom:hover i {
@@ -87,11 +96,10 @@ export default {
 
 .ms-drawer {
   padding: 15px;
-  height: 230px !important;
-  width: 200px !important;
+  height: 300px !important;
+  width: 230px !important;
   top: calc((100vh - 200px)/3) !important;
   border: 1px solid #E6E6E6;
-  padding: 10px;
   border-radius: 10px;
   box-sizing: border-box;
   background-color: #FFF;
@@ -104,11 +112,15 @@ export default {
 }
 
 .title-item {
-  margin: 15px;
+  padding: 5px
 }
 
 .el-icon-paperclip {
   margin-right: 5px;
 }
 
+.title-name {
+  font-size: 18px;
+  margin-left: 15px;
+}
 </style>
diff --git a/frontend/src/business/components/track/report/components/TestPlanDbReport.vue b/frontend/src/business/components/track/report/components/TestPlanDbReport.vue
index 5165725bcd..be077b4d47 100644
--- a/frontend/src/business/components/track/report/components/TestPlanDbReport.vue
+++ b/frontend/src/business/components/track/report/components/TestPlanDbReport.vue
@@ -7,21 +7,22 @@
       ref="drawer"
       v-loading="result.loading">
       <template v-slot:default="scope">
-        <el-row type="flex" class="head-bar">
-          <el-col :span="12">
-            <div class="name-edit">
-              <el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
-              </el-button>&nbsp;
-              <span class="title">{{report.name}}</span>
-            </div>
-          </el-col>
-          <el-col :span="12" class="head-right">
-<!--            <el-button v-permission="['PROJECT_TRACK_REPORT:READ+EXPORT']" :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">-->
-<!--              {{$t('test_track.plan_view.export_report')}}-->
-<!--            </el-button>-->
-          </el-col>
-        </el-row>
+
         <el-scrollbar>
+          <el-row type="flex" class="head-bar">
+            <el-col :span="12">
+              <div class="name-edit">
+                <el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
+                </el-button>&nbsp;
+                <span class="title">{{report.name}}</span>
+              </div>
+            </el-col>
+            <el-col :span="12" class="head-right">
+              <!--            <el-button v-permission="['PROJECT_TRACK_REPORT:READ+EXPORT']" :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">-->
+              <!--              {{$t('test_track.plan_view.export_report')}}-->
+              <!--            </el-button>-->
+            </el-col>
+          </el-row>
           <div class="container">
             <test-plan-report-content v-if="showReport" :is-db="true" :report-id="report.id" :plan-id="report.testPlanId"/>
           </div>
@@ -44,23 +45,32 @@ export default {
       showDialog: false,
       report: {},
       isTestManagerOrTestUser: false,
-      showReport: false
+      showReport: false,
+      originUlr: ''
     }
   },
   mounted() {
     this.isTestManagerOrTestUser = true;
   },
   methods: {
-    // listenGoBack() {
-    //   //监听浏览器返回操作，关闭该对话框
-    //   if (window.history && window.history.pushState) {
-    //     history.pushState(null, null, document.URL);
-    //     window.addEventListener('popstate', this.goBack, false);
-    //   }
-    // },
-    // goBack() {
-    //   this.handleClose();
-    // },
+    listenGoBack() {
+      //监听浏览器返回操作，关闭该对话框
+      if (window.history && window.history.pushState) {
+        this.originUlr = document.URL;
+        history.pushState(null, null, document.URL);
+        window.addEventListener('popstate', this.goBack, false);
+      }
+    },
+    goBack() {
+      let newUlr = document.URL;
+      // 将上一次url设置成列表的url，回退时关闭
+      history.pushState(null, null, this.originUlr);
+      history.pushState(null, null, newUlr);
+      if (document.URL.split("#").indexOf('/track/testPlan/reportList') > -1) {
+        history.pushState(null, null, this.originUlr);
+        this.handleClose();
+      }
+    },
     open(report) {
       this.showReport = false;
       // 每次都重新获取
@@ -69,10 +79,10 @@ export default {
         this.report = report;
       });
       this.showDialog = true;
-      // this.listenGoBack();
+      this.listenGoBack();
     },
     handleClose() {
-      // window.removeEventListener('popstate', this.goBack, false);
+      window.removeEventListener('popstate', this.goBack, false);
       this.$emit('refresh');
       this.showDialog = false;
     },
diff --git a/frontend/src/business/components/track/report/components/TestPlanReportReview.vue b/frontend/src/business/components/track/report/components/TestPlanReportReview.vue
index e19ca5d648..6fc065c5b0 100644
--- a/frontend/src/business/components/track/report/components/TestPlanReportReview.vue
+++ b/frontend/src/business/components/track/report/components/TestPlanReportReview.vue
@@ -7,21 +7,21 @@
       ref="drawer"
       v-loading="result.loading">
       <template v-slot:default="scope">
-        <el-row type="flex" class="head-bar">
-          <el-col :span="12">
-            <div class="name-edit">
-              <el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
-              </el-button>&nbsp;
-              <span class="title">{{plan.name}}</span>
-            </div>
-          </el-col>
-          <el-col :span="12" class="head-right">
-<!--            <el-button v-permission="['PROJECT_TRACK_REPORT:READ+EXPORT']" :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">-->
-<!--              {{$t('test_track.plan_view.export_report')}}-->
-<!--            </el-button>-->
-          </el-col>
-        </el-row>
         <el-scrollbar>
+          <el-row type="flex" class="head-bar">
+            <el-col :span="12">
+              <div class="name-edit">
+                <el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
+                </el-button>&nbsp;
+                <span class="title">{{plan.name}}</span>
+              </div>
+            </el-col>
+            <el-col :span="12" class="head-right">
+              <!--            <el-button v-permission="['PROJECT_TRACK_REPORT:READ+EXPORT']" :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">-->
+              <!--              {{$t('test_track.plan_view.export_report')}}-->
+              <!--            </el-button>-->
+            </el-col>
+          </el-row>
           <div class="container">
             <test-plan-report-content v-if="showReport" :plan-id="plan.id"/>
           </div>
@@ -44,23 +44,32 @@ export default {
       showDialog: false,
       plan: {},
       isTestManagerOrTestUser: false,
-      showReport: false
+      showReport: false,
+      originUlr: ''
     }
   },
   mounted() {
     this.isTestManagerOrTestUser = true;
   },
   methods: {
-    // listenGoBack() {
-    //   //监听浏览器返回操作，关闭该对话框
-    //   if (window.history && window.history.pushState) {
-    //     history.pushState(null, null, document.URL);
-    //     window.addEventListener('popstate', this.goBack, false);
-    //   }
-    // },
-    // goBack() {
-    //   this.handleClose();
-    // },
+    listenGoBack() {
+      //监听浏览器返回操作，关闭该对话框
+      if (window.history && window.history.pushState) {
+        this.originUlr = document.URL;
+        history.pushState(null, null, document.URL);
+        window.addEventListener('popstate', this.goBack, false);
+      }
+    },
+    goBack() {
+      let newUlr = document.URL;
+      // 将上一次url设置成列表的url，回退时关闭
+      history.pushState(null, null, this.originUlr);
+      history.pushState(null, null, newUlr);
+      if (document.URL.split("#").indexOf('/track/plan/all') > -1) {
+        history.pushState(null, null, this.originUlr);
+        this.handleClose();
+      }
+    },
     open(plan) {
       this.showReport = false;
       // 每次都重新获取
@@ -69,10 +78,10 @@ export default {
         this.plan = plan;
       });
       this.showDialog = true;
-      // this.listenGoBack();
+      this.listenGoBack();
     },
     handleClose() {
-      // window.removeEventListener('popstate', this.goBack, false);
+      window.removeEventListener('popstate', this.goBack, false);
       this.$emit('refresh');
       this.showDialog = false;
     },