diff --git a/backend/src/main/java/io/metersphere/controller/ReportController.java b/backend/src/main/java/io/metersphere/controller/PerformanceReportController.java
similarity index 97%
rename from backend/src/main/java/io/metersphere/controller/ReportController.java
rename to backend/src/main/java/io/metersphere/controller/PerformanceReportController.java
index 4332b4f4c8..8ac311802d 100644
--- a/backend/src/main/java/io/metersphere/controller/ReportController.java
+++ b/backend/src/main/java/io/metersphere/controller/PerformanceReportController.java
@@ -23,8 +23,8 @@ import javax.annotation.Resource;
 import java.util.List;
 
 @RestController
-@RequestMapping(value = "report")
-public class ReportController {
+@RequestMapping(value = "performance/report")
+public class PerformanceReportController {
 
     @Resource
     private ReportService reportService;
diff --git a/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue b/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue
index ee6456c3d2..71cea2e281 100644
--- a/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue
+++ b/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue
@@ -3,8 +3,7 @@
   <div id="menu-bar" v-if="isRouterAlive">
     <el-row type="flex">
       <el-col :span="8">
-        <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router
-                 :default-active='$route.path'>
+        <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router :default-active='$route.path'>
           <el-menu-item :index="'/performance/home'">
             {{ $t("i18n.home") }}
           </el-menu-item>
@@ -12,29 +11,19 @@
           <el-submenu v-if="isCurrentWorkspaceUser"
                       index="3" popper-class="submenu" v-permission="['test_manager']">
             <template v-slot:title>{{$t('commons.project')}}</template>
-            <performance-recent-project/>
+            <ms-recent-list :options="projectRecent"/>
             <el-divider/>
-            <el-menu-item :index="'/performance/project/all'">
-              <font-awesome-icon :icon="['fa', 'list-ul']"/>
-              <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
-            </el-menu-item>
-            <el-menu-item :index="'/performance/project/create'">
-              <el-button type="text">{{$t('project.create')}}</el-button>
-            </el-menu-item>
+            <ms-show-all :index="'/performance/project/all'"/>
+            <ms-create-button :index="'/performance/project/create'" :title="$t('project.create')"/>
           </el-submenu>
 
           <el-submenu v-if="isCurrentWorkspaceUser"
                       index="4" popper-class="submenu" v-permission="['test_manager', 'test_user']">
             <template v-slot:title>{{$t('commons.test')}}</template>
-            <performance-recent-test-plan/>
+            <ms-recent-list :options="testRecent"/>
             <el-divider/>
-            <el-menu-item :index="'/performance/test/all'">
-              <font-awesome-icon :icon="['fa', 'list-ul']"/>
-              <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
-            </el-menu-item>
-            <el-menu-item :index="'/performance/test/create'">
-              <el-button type="text">{{$t('load_test.create')}}</el-button>
-            </el-menu-item>
+            <ms-show-all :index="'/performance/test/all'"/>
+            <ms-create-button :index="'/performance/test/create'" :title="$t('load_test.create')"/>
             <el-menu-item :index="testCaseProjectPath" class="blank_item"></el-menu-item>
             <el-menu-item :index="testEditPath" class="blank_item"></el-menu-item>
           </el-submenu>
@@ -42,13 +31,9 @@
           <el-submenu v-if="isCurrentWorkspaceUser"
                       index="5" popper-class="submenu" v-permission="['test_manager', 'test_user', 'test_viewer']">
             <template v-slot:title>{{$t('commons.report')}}</template>
-            <performance-recent-report/>
+            <ms-recent-list :options="reportRecent"/>
             <el-divider/>
-            <el-menu-item :index="'/performance/report/all'">
-              <font-awesome-icon :icon="['fa', 'list-ul']"/>
-              <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
-            </el-menu-item>
-            <el-menu-item :index="reportViewPath" class="blank_item"></el-menu-item>
+            <ms-show-all :index="'/performance/report/all'"/>
           </el-submenu>
         </el-menu>
       </el-col>
@@ -65,22 +50,55 @@
 
 <script>
 
-  import PerformanceRecentTestPlan from "../../performance/test/PerformanceRecentTestPlan";
-  import PerformanceRecentProject from "../../performance/project/PerformanceRecentProject";
-  import PerformanceRecentReport from "../../performance/report/PerformanceRecentReport";
   import {checkoutCurrentWorkspace} from "../../../../common/js/utils";
   import MsCreateTest from "../../common/head/CreateTest";
+  import MsRecentList from "../../common/head/RecentList";
+  import MsCreateButton from "../../common/head/CreateButton";
+  import MsShowAll from "../../common/head/ShowAll";
 
   export default {
     name: "PerformanceHeaderMenus",
-    components: {PerformanceRecentReport, PerformanceRecentTestPlan, PerformanceRecentProject, MsCreateTest},
+    components: {
+      MsCreateButton,
+      MsShowAll,
+      MsRecentList,
+      MsCreateTest
+    },
     data() {
       return {
         isCurrentWorkspaceUser: false,
         testCaseProjectPath: '',
         testEditPath: '',
         reportViewPath: '',
-        isRouterAlive: true
+        isRouterAlive: true,
+        projectRecent: {
+          title: this.$t('project.recent'),
+          url: "/project/recent/5",
+          index(item) {
+            return '/performance/test/' + item.id;
+          },
+          router(item) {
+            return {name: 'perPlan', params: {projectId: item.id, projectName: item.name}}
+          }
+        },
+        testRecent: {
+          title: this.$t('load_test.recent'),
+          url: "/performance/recent/5",
+          index(item) {
+            return '/performance/test/edit/' + item.id;
+          },
+          router(item) {
+          }
+        },
+        reportRecent: {
+          title: this.$t('report.recent'),
+          url: "/performance/report/recent/5",
+          index(item) {
+            return '/performance/report/view/' + item.id;
+          },
+          router(item) {
+          }
+        }
       }
     },
     mounted() {
diff --git a/frontend/src/business/components/performance/project/PerformanceRecentProject.vue b/frontend/src/business/components/performance/project/PerformanceRecentProject.vue
deleted file mode 100644
index c43ea0775d..0000000000
--- a/frontend/src/business/components/performance/project/PerformanceRecentProject.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <el-menu router menu-trigger="click" :default-active="$route.path">
-    <div class="recent-text">
-      <i class="el-icon-time"/>
-      {{$t('project.recent')}}
-    </div>
-
-    <el-menu-item :key="p.id" v-for="p in recentProjects"
-                  :index="'/performance/test/' + p.id" :route="{name:'perPlan', params:{projectId:p.id, projectName:p.name}}">
-      {{ p.name }}
-    </el-menu-item>
-  </el-menu>
-</template>
-
-<script>
-
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
-  import {hasRoles} from "../../../../common/js/utils";
-
-  export default {
-    name: "PerformanceRecentProject",
-    mounted() {
-
-      if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
-        this.$get('/project/recent/5', (response) => {
-          this.recentProjects = response.data;
-        });
-      }
-    },
-    methods: {},
-    data() {
-      return {
-        recentProjects: [],
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .recent-text {
-    padding-left: 10%;
-    color: #777777;
-  }
-</style>
diff --git a/frontend/src/business/components/performance/report/PerformanceRecentReport.vue b/frontend/src/business/components/performance/report/PerformanceRecentReport.vue
deleted file mode 100644
index fa3661d02f..0000000000
--- a/frontend/src/business/components/performance/report/PerformanceRecentReport.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <el-menu router menu-trigger="click" :default-active="$route.path">
-    <div class="recent-text">
-      <i class="el-icon-time"/>
-      {{$t('load_test.recent')}}
-    </div>
-    <el-menu-item :key="p.id" v-for="p in recentReports"
-                  :index="'/performance/report/view/' + p.id" :route="{path: '/performance/report/view/' + p.id}">
-      {{ p.name }}
-    </el-menu-item>
-  </el-menu>
-</template>
-
-<script>
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
-  import {hasRoles} from "../../../../common/js/utils";
-
-  export default {
-    name: "PerformanceRecentReport",
-    mounted() {
-
-      if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
-        this.$get('/report/recent/5', (response) => {
-          this.recentReports = response.data;
-        });
-      }
-    },
-    methods: {},
-    data() {
-      return {
-        recentReports: [],
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .recent-text {
-    padding-left: 10%;
-    color: #777777;
-  }
-</style>
diff --git a/frontend/src/business/components/performance/report/PerformanceReportView.vue b/frontend/src/business/components/performance/report/PerformanceReportView.vue
index 3945084896..646be871b9 100644
--- a/frontend/src/business/components/performance/report/PerformanceReportView.vue
+++ b/frontend/src/business/components/performance/report/PerformanceReportView.vue
@@ -81,7 +81,7 @@
     methods: {
       initBreadcrumb() {
         if(this.reportId){
-          this.result = this.$get("report/test/pro/info/" + this.reportId, res => {
+          this.result = this.$get("/performance/report/test/pro/info/" + this.reportId, res => {
             let data = res.data;
             if(data){
               this.reportName = data.name;
@@ -94,7 +94,7 @@
     },
     mounted() {
       this.reportId = this.$route.path.split('/')[4];
-      this.$get("report/" + this.reportId, res => {
+      this.$get("/performance/report/" + this.reportId, res => {
         let data = res.data;
         this.status = data.status;
         if (data.status === "Error") {
@@ -115,7 +115,7 @@
       '$route'(to) {
         let reportId = to.path.split('/')[4];
         if(reportId){
-          this.$get("report/test/pro/info/" + reportId, response => {
+          this.$get("/performance/report/test/pro/info/" + reportId, response => {
             let data = response.data;
             if(data){
               this.reportName = data.name;
diff --git a/frontend/src/business/components/performance/report/PerformanceTestReport.vue b/frontend/src/business/components/performance/report/PerformanceTestReport.vue
index 70d5ec40c7..c4ef19c58e 100644
--- a/frontend/src/business/components/performance/report/PerformanceTestReport.vue
+++ b/frontend/src/business/components/performance/report/PerformanceTestReport.vue
@@ -107,8 +107,8 @@
     data() {
       return {
         result: {},
-        queryPath: "/report/list/all",
-        deletePath: "/report/delete/",
+        queryPath: "/performance/report/list/all",
+        deletePath: "/performance/report/delete/",
         condition: "",
         projectId: null,
         tableData: [],
diff --git a/frontend/src/business/components/performance/report/components/ErrorLog.vue b/frontend/src/business/components/performance/report/components/ErrorLog.vue
index 8d494246ba..ffdc444f4f 100644
--- a/frontend/src/business/components/performance/report/components/ErrorLog.vue
+++ b/frontend/src/business/components/performance/report/components/ErrorLog.vue
@@ -149,10 +149,10 @@
     },
     methods: {
       initTableData() {
-        this.$get("/report/content/errors/" + this.id, res => {
+        this.$get("/performance/report/content/errors/" + this.id, res => {
           this.tableData = res.data;
         })
-        this.$get("/report/content/errors_top5/" + this.id, res => {
+        this.$get("/performance/report/content/errors_top5/" + this.id, res => {
           this.errorTotal = res.data
           this.errorTop5 = res.data.errorsTop5List;
         })
diff --git a/frontend/src/business/components/performance/report/components/RequestStatistics.vue b/frontend/src/business/components/performance/report/components/RequestStatistics.vue
index 1b0f81ab51..6b96b27379 100644
--- a/frontend/src/business/components/performance/report/components/RequestStatistics.vue
+++ b/frontend/src/business/components/performance/report/components/RequestStatistics.vue
@@ -97,7 +97,7 @@
     },
     methods: {
       initTableData() {
-        this.$get("/report/content/" + this.id, res => {
+        this.$get("/performance/report/content/" + this.id, res => {
           this.tableData = res.data.requestStatisticsList;
           this.totalInfo = res.data;
         })
diff --git a/frontend/src/business/components/performance/report/components/TestOverview.vue b/frontend/src/business/components/performance/report/components/TestOverview.vue
index a4547846c6..44d1716f8f 100644
--- a/frontend/src/business/components/performance/report/components/TestOverview.vue
+++ b/frontend/src/business/components/performance/report/components/TestOverview.vue
@@ -85,7 +85,7 @@
     },
     methods: {
       initTableData() {
-        this.$get("/report/content/testoverview/" + this.id, res => {
+        this.$get("/performance/report/content/testoverview/" + this.id, res => {
           let data = res.data;
           this.maxUsers = data.maxUsers;
           this.avgThroughput = data.avgThroughput;
@@ -94,7 +94,7 @@
           this.responseTime90 = data.responseTime90;
           this.avgBandwidth = data.avgBandwidth;
         })
-        this.$get("/report/content/load_chart/" + this.id, res => {
+        this.$get("/performance/report/content/load_chart/" + this.id, res => {
           let data = res.data;
           let loadOption = {
             title: {
@@ -127,7 +127,7 @@
           }
           this.loadOption = this.generateOption(loadOption, data);
         })
-        this.$get("/report/content/res_chart/" + this.id, res => {
+        this.$get("/performance/report/content/res_chart/" + this.id, res => {
           let data = res.data;
           let resOption = {
             title: {
diff --git a/frontend/src/business/components/performance/test/PerformanceRecentTestPlan.vue b/frontend/src/business/components/performance/test/PerformanceRecentTestPlan.vue
deleted file mode 100644
index b40773c56d..0000000000
--- a/frontend/src/business/components/performance/test/PerformanceRecentTestPlan.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <el-menu router menu-trigger="click" :default-active="$route.path">
-    <div class="recent-text">
-      <i class="el-icon-time"/>
-      {{$t('load_test.recent')}}
-    </div>
-    <el-menu-item :key="t.id" v-for="t in recentTestPlans" :index="'/performance/test/edit/' + t.id">
-      {{ t.name }}
-    </el-menu-item>
-  </el-menu>
-</template>
-
-<script>
-  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../../common/js/constants";
-
-  export default {
-    name: "PerformanceRecentTestPlan",
-    mounted() {
-      const rolesString = localStorage.getItem("roles");
-      const roles = rolesString.split(',');
-
-      if (roles.indexOf(ROLE_TEST_MANAGER) > -1 || roles.indexOf(ROLE_TEST_USER) > -1 || roles.indexOf(ROLE_TEST_VIEWER) > -1) {
-        this.$get('/performance/recent/5', (response) => {
-          this.recentTestPlans = response.data;
-        });
-      }
-
-    },
-    data() {
-      return {
-        recentTestPlans: []
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .recent-text {
-    padding-left: 10%;
-    color: #777777;
-  }
-</style>