diff --git a/frontend/package.json b/frontend/package.json
index e89a493951adf938824b10b4f5c4cf2f12ef32e4..8f5054cf9d17f551ebc14dbc85afb6c60301d607 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,7 +40,9 @@
       "plugin:vue/essential",
       "eslint:recommended"
     ],
-    "rules": {},
+    "rules": {
+      "vue/no-unused-components": "off"
+    },
     "parserOptions": {
       "parser": "babel-eslint"
     }
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 8867515e7db6157597bc290757a150e93ab2a212..dd9cf451e1e1209119673be1251bd71f4a2cfb4d 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -117,6 +117,7 @@ export default {
     'basic_config': 'Scene Configuration',
     'pressure_config': 'Pressure configuration',
     'advanced_config': 'Advanced Configuration',
+    'runtime_config': 'Runtime Configuration',
     'is_running': 'Test is running! ',
     'test_name_is_null': 'Test name cannot be empty! ',
     'project_is_null': 'Project cannot be empty! ',
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index e681e879d40c86f51415c844660fe8ac48c4c4c6..7c09633911b025fb10b9454ca708fd2905647e25 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -117,6 +117,7 @@ export default {
     'basic_config': '场景配置',
     'pressure_config': '压力配置',
     'advanced_config': '高级配置',
+    'runtime_config': '运行配置',
     'is_running': '正在运行！',
     'test_name_is_null': '测试名称不能为空！',
     'project_is_null': '项目不能为空！',
diff --git a/frontend/src/performance/App.vue b/frontend/src/performance/App.vue
index 4572e3895f514f1fd070561d49011438a0e083e2..10e4c613ff668cd67b4fc1d96058d5c1ebb7e1b5 100644
--- a/frontend/src/performance/App.vue
+++ b/frontend/src/performance/App.vue
@@ -11,39 +11,23 @@
         <ms-user/>
       </el-col>
     </el-row>
-    <el-row id="header-bottom" type="flex" justify="space-between" align="middle">
-      <el-col :span="10">
-        <ms-menus/>
-      </el-col>
-      <el-col :span="4">
-        <el-row type="flex" justify="center" align="middle">
-          <router-link to="/createTest" v-permission="['test_user','test_manager']" v-if="isCurrentWorkspaceUser">
-            <el-button type="primary" size="small">{{$t('load_test.create')}}</el-button>
-          </router-link>
-        </el-row>
-      </el-col>
-      <el-col :span="10">
-      </el-col>
-    </el-row>
+
     <ms-view/>
     <ms-web-socket/>
   </el-col>
 </template>
 
 <script>
-  import MsMenus from "./components/HeaderMenus";
   import MsTopMenus from "./components/HeaderTopMenus";
   import MsView from "./components/router/View";
   import MsUser from "./components/HeaderUser";
   import MsWebSocket from "./components/websocket/WebSocket";
-  import {checkoutCurrentWorkspace} from "../common/utils";
 
   export default {
     name: 'app',
     data() {
       return {
-        auth: false,
-        isCurrentWorkspaceUser: false,
+        auth: false
       }
     },
     beforeCreate() {
@@ -59,11 +43,8 @@
         window.location.href = "/login"
       });
     },
-    components: {MsWebSocket, MsUser, MsMenus, MsView, MsTopMenus},
-    methods: {},
-    mounted() {
-      this.isCurrentWorkspaceUser = checkoutCurrentWorkspace();
-    }
+    components: {MsWebSocket, MsUser, MsView, MsTopMenus},
+    methods: {}
   }
 </script>
 
@@ -96,14 +77,6 @@
     background-image: url("../assets/MeterSphere-反白.png");
   }
 
-  #header-bottom {
-    height: 40px;
-    padding: 0 15px;
-    border-bottom: 1px solid #E6E6E6;
-    cursor: default;
-    color: #404040;
-  }
-
   .menus > * {
     color: inherit;
     padding: 0;
diff --git a/frontend/src/performance/components/HeaderMenus.vue b/frontend/src/performance/components/HeaderMenus.vue
index 4f6abf367cd7ca79ceee84d527ced8af5264916c..c2433e3f652cc1de36bdfd725801a6aa1d11dc13 100644
--- a/frontend/src/performance/components/HeaderMenus.vue
+++ b/frontend/src/performance/components/HeaderMenus.vue
@@ -1,87 +1,120 @@
 <template>
-  <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router
-           :default-active='$route.path'>
-    <el-menu-item index="/setting/personsetting">
-      {{ $t("i18n.home") }}
-    </el-menu-item>
-    <el-submenu index="3" popper-class="submenu" v-permission="['test_manager']" v-if="isCurrentWorkspaceUser">
-      <template slot="title">{{$t('commons.project')}}</template>
-      <ms-recent-project/>
-      <el-divider/>
-      <el-menu-item index="/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="/project/create">
-        <el-button type="text">{{$t('project.create')}}</el-button>
-      </el-menu-item>
-    </el-submenu>
-    <el-submenu index="4" popper-class="submenu" v-permission="['test_manager', 'test_user']"
-                v-if="isCurrentWorkspaceUser">
-      <template slot="title">{{$t('commons.test')}}</template>
-      <ms-recent-test-plan/>
-      <el-divider/>
-      <el-menu-item index="/loadtest/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="/createTest">
-        <el-button type="text">{{$t('load_test.create')}}</el-button>
-      </el-menu-item>
-    </el-submenu>
-    <el-submenu index="5" popper-class="submenu" v-permission="['test_manager', 'test_user', 'test_viewer']"
-                v-if="isCurrentWorkspaceUser">
-      <template slot="title">{{$t('commons.report')}}</template>
-      <ms-recent-report/>
-      <el-divider/>
-      <el-menu-item index="/report/all">
-        <font-awesome-icon :icon="['fa', 'list-ul']"/>
-        <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
+
+  <div id="menu-bar">
+    <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router
+             :default-active='$route.path'>
+      <el-menu-item :index="'/' + beaseUrl + '/home'">
+        {{ $t("i18n.home") }}
       </el-menu-item>
-    </el-submenu>
-  </el-menu>
+
+      <el-submenu index="3" popper-class="submenu" v-permission="['test_manager']" v-if="isCurrentWorkspaceUser">
+        <template slot="title">{{$t('commons.project')}}</template>
+        <performance-recent-project v-if="beaseUrl == 'performance'"/>
+        <functional-recent-project v-if="beaseUrl == 'functional'"/>
+        <el-divider/>
+        <el-menu-item :index="'/' + beaseUrl + '/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="'/' + beaseUrl + '/project/create'">
+          <el-button type="text">{{$t('project.create')}}</el-button>
+        </el-menu-item>
+      </el-submenu>
+
+      <el-submenu index="4" popper-class="submenu" v-permission="['test_manager', 'test_user']"
+                  v-if="isCurrentWorkspaceUser">
+        <template slot="title">{{$t('commons.test')}}</template>
+        <performance-recent-test-plan v-if="beaseUrl == 'performance'"/>
+        <functional-recent-test-plan v-if="beaseUrl == 'functional'"/>
+        <el-divider/>
+        <el-menu-item :index="'/' + beaseUrl + '/plan/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="'/' + beaseUrl + '/plan/create'">
+          <el-button type="text">{{$t('load_test.create')}}</el-button>
+        </el-menu-item>
+      </el-submenu>
+
+      <el-submenu index="5" popper-class="submenu" v-permission="['test_manager', 'test_user', 'test_viewer']"
+                  v-if="isCurrentWorkspaceUser">
+        <template slot="title">{{$t('commons.report')}}</template>
+        <performance-recent-report v-if="beaseUrl == 'performance'"/>
+        <functional-recent-report v-if="beaseUrl == 'functional'"/>
+        <el-divider/>
+        <el-menu-item :index="'/' + beaseUrl + '/report/all'">
+          <font-awesome-icon :icon="['fa', 'list-ul']"/>
+          <span style="padding-left: 5px;">{{$t('commons.show_all')}}</span>
+        </el-menu-item>
+      </el-submenu>
+
+      <router-link class="header-bottom" :to="'/' + beaseUrl + '/plan/create'" v-permission="['test_user','test_manager']"
+                   v-if="isCurrentWorkspaceUser">
+        <el-button type="primary" size="small">{{$t('load_test.create')}}</el-button>
+      </router-link>
+
+    </el-menu>
+  </div>
+
 </template>
 
 <script>
-  import MsRecentTestPlan from "./testPlan/RecentTestPlan";
-  import MsRecentProject from "./project/RecentProject";
-  import MsRecentReport from "./report/RecentReport";
+
+  import PerformanceRecentTestPlan from "./testPlan/PerformanceRecentTestPlan";
+  import FunctionalRecentTestPlan from "./testPlan/FunctionalRecentTestPlan";
+  import PerformanceRecentProject from "./project/PerformanceRecentProject";
+  import FunctionalRecentProject from "./project/FunctionalRecentProject";
+  import PerformanceRecentReport from "./report/PerformanceRecentReport";
+  import FunctionalRecentReport from "./report/FunctionalRecentReport";
   import {checkoutCurrentWorkspace} from "../../common/utils";
 
   export default {
     name: "MsMenus",
-    components: {MsRecentReport, MsRecentTestPlan, MsRecentProject},
+    components: {PerformanceRecentReport, PerformanceRecentTestPlan, FunctionalRecentTestPlan, FunctionalRecentReport,
+      PerformanceRecentProject,FunctionalRecentProject},
     data() {
       return {
         isCurrentWorkspaceUser: false,
       }
     },
+    props: {
+        beaseUrl: {
+          type: String
+        }
+    },
     mounted() {
       this.isCurrentWorkspaceUser = checkoutCurrentWorkspace();
     }
   }
+
 </script>
 
 <style>
-  .header-menu.el-menu--horizontal > li.el-menu-item {
-    padding-left: 0;
-  }
 
   .header-menu.el-menu--horizontal > li {
     height: 39px;
     line-height: 40px;
-    color: inherit;
+    color: dimgray;
   }
 
   .header-menu.el-menu--horizontal > li.el-submenu > * {
     height: 39px;
     line-height: 40px;
-    color: inherit;
+    color: dimgray;
   }
+
+  .header-bottom {
+    line-height: 40px;
+    margin-left: 20%;
+  }
+
 </style>
 
 <style scoped>
   .el-divider--horizontal {
     margin: 0;
   }
+  #menu-bar {
+    border-bottom: 1px solid #E6E6E6;
+  }
 </style>
diff --git a/frontend/src/performance/components/HeaderTopMenus.vue b/frontend/src/performance/components/HeaderTopMenus.vue
index ba9af2b3cc30bef6a0f153d2afc0de62219028c4..400b55f4f554fcfe671171011cfb67c4d571f315 100644
--- a/frontend/src/performance/components/HeaderTopMenus.vue
+++ b/frontend/src/performance/components/HeaderTopMenus.vue
@@ -7,10 +7,11 @@
            :default-active="activeIndex"
            @select="handleSelect"
            router>
-    <el-menu-item index="1" v-permission="['test_manager','test_user','test_viewer']">
+
+    <el-menu-item index="/functional" v-permission="['test_manager','test_user','test_viewer']">
       {{$t('commons.functional')}}
     </el-menu-item>
-    <el-menu-item index="/loadtest" onselectstart="return false"
+    <el-menu-item index="/performance" onselectstart="return false"
                   v-permission="['test_manager','test_user','test_viewer']">
       {{$t('commons.performance')}}
     </el-menu-item>
diff --git a/frontend/src/performance/components/project/RecentProject.vue b/frontend/src/performance/components/project/FunctionalRecentProject.vue
similarity index 85%
rename from frontend/src/performance/components/project/RecentProject.vue
rename to frontend/src/performance/components/project/FunctionalRecentProject.vue
index d9a476e9f3db55fa5622fc4c8f232d7a69fdee27..770fa6e797751669ddbc65b466ff07e1b84b540e 100644
--- a/frontend/src/performance/components/project/RecentProject.vue
+++ b/frontend/src/performance/components/project/FunctionalRecentProject.vue
@@ -6,7 +6,7 @@
     </div>
 
     <el-menu-item :key="p.id" v-for="p in recentProjects"
-                  :index="'/loadtest/' + p.id" :route="{name:'loadtest', params:{projectId:p.id, projectName:p.name}}">
+                  :index="'/functional/' + p.id" :route="{name:'fucPlan', params:{projectId:p.id, projectName:p.name}}">
       {{ p.name }}
     </el-menu-item>
   </el-menu>
@@ -18,7 +18,7 @@
   import {hasRoles} from "../../../common/utils";
 
   export default {
-    name: "MsRecentProject",
+    name: "FunctionalRecentProject",
     mounted() {
 
       if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
diff --git a/frontend/src/performance/components/project/MsProject.vue b/frontend/src/performance/components/project/MsProject.vue
index 7a74ab6e0994ff1de3dea89566a81b7a12ecdba4..dc0f5ce05fdc19b5033e92b3363b9355a7ae2316 100644
--- a/frontend/src/performance/components/project/MsProject.vue
+++ b/frontend/src/performance/components/project/MsProject.vue
@@ -90,18 +90,23 @@
         },
       }
     },
+    props: {
+      beaseUrl: {
+        type: String
+      }
+    },
     mounted() {
-      if (this.$route.path.split('/')[2] === 'create') {
+      if (this.$route.path.split('/')[3] === 'create') {
         this.create();
-        this.$router.push('/project/all');
+        this.$router.push( '/' + this.beaseUrl + '/project/all');
       }
       this.list();
     },
     watch: {
       '$route'(to) {
-        if (to.path.split('/')[2] === 'create') {
+        if (to.path.split('/')[3] === 'create') {
           this.create();
-          this.$router.push('/project/all');
+          this.$router.push('/' + this.beaseUrl + '/project/all');
         }
       }
     },
diff --git a/frontend/src/performance/components/project/MsChart.vue b/frontend/src/performance/components/project/PerformanceChart.vue
similarity index 99%
rename from frontend/src/performance/components/project/MsChart.vue
rename to frontend/src/performance/components/project/PerformanceChart.vue
index 1640543d0b6741f890361ee5880c403f3c5297c0..3e910611ad670bed3d5cbc3baea64fd0404cf9ca 100644
--- a/frontend/src/performance/components/project/MsChart.vue
+++ b/frontend/src/performance/components/project/PerformanceChart.vue
@@ -6,7 +6,7 @@
   import echarts from 'echarts'
 
   export default {
-    name: "MsChart",
+    name: "PerformanceChart",
     data() {
       return {
         bar: {
diff --git a/frontend/src/performance/components/project/PerformanceRecentProject.vue b/frontend/src/performance/components/project/PerformanceRecentProject.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b6489c3ee8176ed8715545800005fe63efcc5ac
--- /dev/null
+++ b/frontend/src/performance/components/project/PerformanceRecentProject.vue
@@ -0,0 +1,44 @@
+<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/plan/' + 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/constants";
+  import {hasRoles} from "../../../common/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/performance/components/report/FunctionalRecentReport.vue b/frontend/src/performance/components/report/FunctionalRecentReport.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6a9656d537b07b8760313552363994e4c909f467
--- /dev/null
+++ b/frontend/src/performance/components/report/FunctionalRecentReport.vue
@@ -0,0 +1,43 @@
+<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="'/functional/report/view/' + p.id" :route="{path: '/functional/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/constants";
+
+  export default {
+    name: "PerformanceRecentReport",
+    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('/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/performance/components/report/FunctionalTestReport.vue b/frontend/src/performance/components/report/FunctionalTestReport.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d3b960d59f516cbd693bcccfe0fe7a032400e499
--- /dev/null
+++ b/frontend/src/performance/components/report/FunctionalTestReport.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="testreport-container" v-loading="result.loading">
+
+    <div class="main-content">
+      <el-card>
+        <div slot="header">
+          <el-row type="flex" justify="space-between" align="middle">
+            <span class="title">{{$t('commons.report')}}</span>
+            <span class="search">
+              <el-input type="text" size="small" :placeholder="$t('report.search_by_name')"
+                        prefix-icon="el-icon-search"
+                        maxlength="60"
+                        v-model="condition" @change="search" clearable/>
+            </span>
+          </el-row>
+        </div>
+
+        <el-table :data="tableData" class="test-content">
+          <el-table-column
+            prop="name"
+            :label="$t('commons.name')"
+            width="150"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            prop="description"
+            :label="$t('commons.description')"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            prop="testName"
+            :label="$t('report.test_name')"
+            width="150"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            width="250"
+            :label="$t('commons.create_time')">
+            <template slot-scope="scope">
+              <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            width="250"
+            :label="$t('commons.update_time')">
+            <template slot-scope="scope">
+              <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            width="150"
+            :label="$t('commons.operating')">
+            <template slot-scope="scope">
+              <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+              <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div>
+          <el-row>
+            <el-col :span="22" :offset="1">
+              <div class="table-page">
+                <el-pagination
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                  :current-page.sync="currentPage"
+                  :page-sizes="[5, 10, 20, 50, 100]"
+                  :page-size="pageSize"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="total">
+                </el-pagination>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-card>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "FunctionalTestReport",
+    created: function () {
+      this.initTableData();
+    },
+    data() {
+      return {
+        result: {},
+        queryPath: "/report/list/all",
+        deletePath: "/report/delete/",
+        condition: "",
+        projectId: null,
+        tableData: [],
+        multipleSelection: [],
+        currentPage: 1,
+        pageSize: 5,
+        total: 0,
+        loading: false,
+        testId: null,
+      }
+    },
+    methods: {
+      initTableData() {
+        let param = {
+          name: this.condition,
+        };
+        this.result = this.$post(this.buildPagePath(this.queryPath), param, response => {
+          let data = response.data;
+          this.total = data.itemCount;
+          this.tableData = data.listObject;
+        });
+      },
+      search() {
+        this.initTableData();
+      },
+      buildPagePath(path) {
+        return path + "/" + this.currentPage + "/" + this.pageSize;
+      },
+      handleSizeChange(size) {
+        this.pageSize = size;
+        this.initTableData();
+      },
+      handleCurrentChange(current) {
+        this.currentPage = current;
+        this.initTableData();
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      handleEdit(report) {
+        this.$router.push({
+          path: '/functional/reportView/' + report.id
+        })
+      },
+      handleDelete(report) {
+        this.$alert(this.$t('load_test.delete_confirm') + report.name + "？", '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          callback: (action) => {
+            if (action === 'confirm') {
+              this._handleDelete(report);
+            }
+          }
+        });
+      },
+      _handleDelete(report) {
+        this.result = this.$post(this.deletePath + report.id, {},() => {
+          this.$message({
+            message: this.$t('commons.delete_success'),
+            type: 'success'
+          });
+          this.initTableData();
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+  .testreport-container {
+    padding: 15px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .main-content {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1200px;
+  }
+
+  .test-content {
+    width: 100%;
+  }
+
+  .table-page {
+    padding-top: 20px;
+    margin-right: -9px;
+    float: right;
+  }
+
+</style>
diff --git a/frontend/src/performance/components/report/RecentReport.vue b/frontend/src/performance/components/report/PerformanceRecentReport.vue
similarity index 85%
rename from frontend/src/performance/components/report/RecentReport.vue
rename to frontend/src/performance/components/report/PerformanceRecentReport.vue
index a099a697802a05a933ad101588a3036cc097e5be..c614b060cd3f361ac6318de6fa6f56ee49beb35a 100644
--- a/frontend/src/performance/components/report/RecentReport.vue
+++ b/frontend/src/performance/components/report/PerformanceRecentReport.vue
@@ -5,7 +5,7 @@
       {{$t('load_test.recent')}}
     </div>
     <el-menu-item :key="p.id" v-for="p in recentReports"
-                  :index="'/reportView/' + p.id" :route="{path: '/reportView/' + p.id}">
+                  :index="'/performance/report/view/' + p.id" :route="{path: '/performance/report/view/' + p.id}">
       {{ p.name }}
     </el-menu-item>
   </el-menu>
@@ -16,7 +16,7 @@
   import {hasRoles} from "../../../common/utils";
 
   export default {
-    name: "MsRecentReport",
+    name: "PerformanceRecentReport",
     mounted() {
 
       if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
diff --git a/frontend/src/performance/components/report/ReportView.vue b/frontend/src/performance/components/report/PerformanceReportView.vue
similarity index 80%
rename from frontend/src/performance/components/report/ReportView.vue
rename to frontend/src/performance/components/report/PerformanceReportView.vue
index 502fe5d72aadd72991188bd4b5c67969a32c84c4..72c4c7b6b80d39173965d1783c82ca078211eb61 100644
--- a/frontend/src/performance/components/report/ReportView.vue
+++ b/frontend/src/performance/components/report/PerformanceReportView.vue
@@ -60,7 +60,7 @@
   import MsReportTestOverview from './components/TestOverview';
 
   export default {
-    name: "ReportView",
+    name: "PerformanceReportView",
     components: {
       MsReportErrorLog,
       MsReportLogDetails,
@@ -79,27 +79,35 @@
     },
     methods: {
       initBreadcrumb() {
-        this.result = this.$get("report/test/pro/info/" + this.reportId, res => {
-          let data = res.data;
-          this.reportName = data.name;
-          this.testName = data.testName;
-          this.projectName = data.projectName;
-        })
+        if(this.reportId){
+          this.result = this.$get("report/test/pro/info/" + this.reportId, res => {
+            let data = res.data;
+            if(data){
+              this.reportName = data.name;
+              this.testName = data.testName;
+              this.projectName = data.projectName;
+            }
+          })
+        }
       }
     },
     created() {
-      this.reportId = this.$route.path.split('/')[2];
+      this.reportId = this.$route.path.split('/')[4];
       this.initBreadcrumb();
     },
     watch: {
       '$route'(to) {
-        let reportId = to.path.split('/')[2]; // find testId
-        this.$get("report/test/pro/info/" + reportId, response => {
-          let data = response.data;
-          this.reportName = data.name;
-          this.testName = data.testName;
-          this.projectName = data.projectName;
-        });
+        let reportId = to.path.split('/')[4];
+        if(reportId){
+          this.$get("report/test/pro/info/" + reportId, response => {
+            let data = response.data;
+            if(data){
+              this.reportName = data.name;
+              this.testName = data.testName;
+              this.projectName = data.projectName;
+            }
+          });
+        }
       }
     }
   }
diff --git a/frontend/src/performance/components/report/AllTestReport.vue b/frontend/src/performance/components/report/PerformanceTestReport.vue
similarity index 95%
rename from frontend/src/performance/components/report/AllTestReport.vue
rename to frontend/src/performance/components/report/PerformanceTestReport.vue
index f1f028d8deb7322e2ebdaaba5728da55c3125c34..75c54461da4ecba8a1c891a4ef13e3740db430ca 100644
--- a/frontend/src/performance/components/report/AllTestReport.vue
+++ b/frontend/src/performance/components/report/PerformanceTestReport.vue
@@ -48,11 +48,11 @@
             </template>
           </el-table-column>
           <el-table-column
-            width="200"
+            width="150"
             :label="$t('commons.operating')">
             <template slot-scope="scope">
-              <el-button @click="handleEdit(scope.row)" type="primary" size="mini">查看</el-button>
-              <el-button @click="handleDelete(scope.row)" type="danger" size="mini">删除</el-button>
+              <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+              <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
             </template>
           </el-table-column>
         </el-table>
@@ -81,7 +81,7 @@
 
 <script>
   export default {
-    name: "MsAllTestReport",
+    name: "PerformanceTestReport",
     created: function () {
       this.initTableData();
     },
@@ -131,7 +131,7 @@
       },
       handleEdit(report) {
         this.$router.push({
-          path: '/reportView/' + report.id
+          path: '/performance/report/view/' + report.id
         })
       },
       handleDelete(report) {
diff --git a/frontend/src/performance/components/router/View.vue b/frontend/src/performance/components/router/View.vue
index c96d35a780acec4bb3bf4a0990844ee931b94f56..1bc5c815207b43d27b75481cb09d890671b46916 100644
--- a/frontend/src/performance/components/router/View.vue
+++ b/frontend/src/performance/components/router/View.vue
@@ -14,7 +14,7 @@
 <style scoped>
   #body {
     width: 100%;
-    height: calc(100vh - 80px);
+    height: calc(100vh - 40px);
     background-color: #F5F5F5;
   }
 
diff --git a/frontend/src/performance/components/router/router.js b/frontend/src/performance/components/router/router.js
index 6b6524071f80ab6440b7480fb7460d1fd2a64b87..02d9f30f64daa73c2cce9db109964c2cf1e0898c 100644
--- a/frontend/src/performance/components/router/router.js
+++ b/frontend/src/performance/components/router/router.js
@@ -3,8 +3,8 @@ import VueRouter from 'vue-router'
 import RouterSidebar from "./RouterSidebar";
 import Setting from "../settings/Setting";
 import User from "../settings/system/User";
-import EditTestPlan from "../testPlan/EditTestPlan";
-import AllTestPlan from "../testPlan/AllTestPlan";
+import EditPerformanceTestPlan from "../testPlan/EditPerformanceTestPlan";
+import PerformanceTestPlan from "../testPlan/PerformanceTestPlan";
 import Organization from "../settings/system/Organization";
 import OrganizationMember from "../settings/organization/OrganizationMember";
 import Member from "../settings/workspace/WorkspaceMember";
@@ -13,9 +13,16 @@ import MsProject from "../project/MsProject";
 import OrganizationWorkspace from "../settings/organization/OrganizationWorkspace";
 import PersonSetting from "../settings/personal/PersonSetting";
 import SystemWorkspace from "../settings/system/SystemWorkspace";
-import MsChart from "../project/MsChart";
-import AllTestReport from "../report/AllTestReport";
-import ReportView from "../report/ReportView";
+import PerformanceChart from "../project/PerformanceChart";
+import PerformanceTestReport from "../report/PerformanceTestReport";
+import FunctionalTestReport from "../report/FunctionalTestReport";
+import FunctionalTest from "../testPlan/FunctionalTest";
+import PerformanceTest from "../testPlan/PerformanceTest";
+import EditFunctionalTestPlan from "../testPlan/EditFunctionalTestPlan";
+import PerformanceTestHome from "../testPlan/PerformanceTestHome";
+import FunctionalTestPlan from "../testPlan/FunctionalTestPlan";
+import FunctionalTestHome from "../testPlan/FunctionalTestHome";
+import PerformanceReportView from "../report/PerformanceReportView";
 
 Vue.use(VueRouter);
 
@@ -69,61 +76,109 @@ const router = new VueRouter({
       ]
     },
     {
-      path: "/createTest",
-      name: "createTest",
+      path: "/functional",
+      name: "functional",
+      redirect: "/functional/home",
       components: {
-        content: EditTestPlan
-      }
-    },
-    {
-      path: "/editTest/:testId",
-      name: "editTest",
-      components: {
-        content: EditTestPlan
+        content: FunctionalTest
       },
-      props: {
-        content: (route) => {
-          return {
-            ...route.params
+      children: [
+        {
+          path: 'home',
+          name: 'fucHome',
+          component: FunctionalTestHome,
+        },
+        {
+          path: 'plan/create',
+          name: "createFucTest",
+          component: EditFunctionalTestPlan,
+        },
+        {
+          path: "plan/edit/:testId",
+          name: "editFucTest",
+          component: EditFunctionalTestPlan,
+          props: {
+            content: (route) => {
+              return {
+                ...route.params
+              }
+            }
           }
+        },
+        {
+          path: "plan/:projectId",
+          name: "fucPlan",
+          component: FunctionalTestPlan
+        },
+        {
+          path: "project/:type",
+          name: "fucProject",
+          component: MsProject
+        },
+        {
+          path: "report/:type",
+          name: "fucReport",
+          component: FunctionalTestReport
         }
-      }
+      ]
     },
     {
-      path: "/loadtest/:projectId",
-      name: "loadtest",
+      path: "/performance",
+      name: "performance",
+      redirect: "/performance/home",
       components: {
-        content: AllTestPlan
+        content: PerformanceTest
       },
-    },
-    {
-      path: "/project/:type",
-      name: 'project',
-      components: {
-        content: MsProject
-      }
-    },
-    {
-      path: "/report/:type",
-      name: 'report',
-      components: {
-        content: AllTestReport
-      }
-    },
-    {
-      path: "/chart",
-      name: 'chart',
-      components: {
-        content: MsChart
-      }
-    },
-    {
-      path: "/reportView/:reportId",
-      name: "reportView",
-      components: {
-        content: ReportView
-      }
-    },
+      children: [
+        {
+          path: 'home',
+          name: 'perHome',
+          component: PerformanceTestHome,
+        },
+        {
+          path: 'plan/create',
+          name: "createPerTest",
+          component: EditPerformanceTestPlan,
+        },
+        {
+          path: "plan/edit/:testId",
+          name: "editPerTest",
+          component: EditPerformanceTestPlan,
+          props: {
+            content: (route) => {
+              return {
+                ...route.params
+              }
+            }
+          }
+        },
+        {
+          path: "plan/:projectId",
+          name: "perPlan",
+          component: PerformanceTestPlan
+        },
+        {
+          path: "project/:type",
+          name: "perProject",
+          component: MsProject
+        },
+        {
+          path: "report/:type",
+          name: "perReport",
+          component: PerformanceTestReport
+        },
+        {
+          path: "chart",
+          name: "perChart",
+          component: PerformanceChart
+        },
+        {
+          path: "report/view/:reportId",
+          name: "perReportView",
+          component: PerformanceReportView
+        }
+      ]
+    }
   ]
 });
 
diff --git a/frontend/src/performance/components/testPlan/EditTestPlan.vue b/frontend/src/performance/components/testPlan/EditFunctionalTestPlan.vue
similarity index 84%
rename from frontend/src/performance/components/testPlan/EditTestPlan.vue
rename to frontend/src/performance/components/testPlan/EditFunctionalTestPlan.vue
index 68b93d36cc37bbe46a432232576b9065f33005f6..cf919fd52e419b737e0fe749a25482f690f5c770 100644
--- a/frontend/src/performance/components/testPlan/EditTestPlan.vue
+++ b/frontend/src/performance/components/testPlan/EditFunctionalTestPlan.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="edit-testplan-container" v-loading="result.loading">
+  <div class="edit-testplan-container" >
     <div class="main-content">
       <el-card>
         <el-row>
@@ -20,16 +20,12 @@
           <el-button type="warning" plain @click="cancel">{{$t('commons.cancel')}}</el-button>
         </el-row>
 
-
         <el-tabs class="testplan-config" v-model="active" type="border-card" :stretch="true">
           <el-tab-pane :label="$t('load_test.basic_config')">
-            <ms-test-plan-basic-config :test-plan="testPlan" ref="basicConfig"/>
-          </el-tab-pane>
-          <el-tab-pane :label="$t('load_test.pressure_config')">
-            <ms-test-plan-pressure-config :test-plan="testPlan" ref="pressureConfig"/>
+            <functional-test-scene-config :test-plan="testPlan" />
           </el-tab-pane>
-          <el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
-            <ms-test-plan-advanced-config ref="advancedConfig"/>
+          <el-tab-pane :label="$t('load_test.runtime_config')">
+            <functional-test-runtime-config :test-plan="testPlan" />
           </el-tab-pane>
         </el-tabs>
       </el-card>
@@ -38,16 +34,14 @@
 </template>
 
 <script>
-  import MsTestPlanBasicConfig from './components/BasicConfig';
-  import MsTestPlanPressureConfig from './components/PressureConfig';
-  import MsTestPlanAdvancedConfig from './components/AdvancedConfig';
+  import FunctionalTestSceneConfig from './components/FunctionalTestSceneConfig';
+  import FunctionalTestRuntimeConfig from './components/FunctionalTestRuntimeConfig';
 
   export default {
-    name: "MsEditTestPlan",
+    name: "EditFunctionalTestPlan",
     components: {
-      MsTestPlanBasicConfig,
-      MsTestPlanPressureConfig,
-      MsTestPlanAdvancedConfig,
+      FunctionalTestSceneConfig,
+      FunctionalTestRuntimeConfig,
     },
     data() {
       return {
@@ -77,19 +71,21 @@
     watch: {
       '$route'(to) {
         // 如果是创建测试
-        if (to.name === 'createTest') {
+        if (to.name === 'createFucTest') {
           window.location.reload();
           return;
         }
-        let testId = to.path.split('/')[2]; // find testId
-        this.$get('/testplan/get/' + testId, response => {
-          this.testPlan = response.data;
-        });
+        let testId = to.path.split('/')[4]; // find testId
+        if (testId) {
+          this.$get('/testplan/get/' + testId, response => {
+            this.testPlan = response.data;
+          });
+        }
       }
 
     },
     created() {
-      let testId = this.$route.path.split('/')[2];
+      let testId = this.$route.path.split('/')[4];
       if (testId) {
         this.$get('/testplan/get/' + testId, response => {
           this.testPlan = response.data;
diff --git a/frontend/src/performance/components/testPlan/EditPerformanceTestPlan.vue b/frontend/src/performance/components/testPlan/EditPerformanceTestPlan.vue
new file mode 100644
index 0000000000000000000000000000000000000000..732e17c91a3cde5b87ac867c56203e025086b8b8
--- /dev/null
+++ b/frontend/src/performance/components/testPlan/EditPerformanceTestPlan.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="edit-testplan-container" v-loading="result.loading">
+    <div class="main-content">
+      <el-card>
+        <el-row>
+          <el-col :span="10">
+            <el-input :placeholder="$t('load_test.input_name')" v-model="testPlan.name" class="input-with-select">
+              <el-select v-model="testPlan.projectId" slot="prepend" :placeholder="$t('load_test.select_project')">
+                <el-option
+                  v-for="item in projects"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </el-input>
+          </el-col>
+          <el-button type="primary" plain @click="save">{{$t('commons.save')}}</el-button>
+          <el-button type="primary" plain @click="saveAndRun">{{$t('load_test.save_and_run')}}</el-button>
+          <el-button type="warning" plain @click="cancel">{{$t('commons.cancel')}}</el-button>
+        </el-row>
+
+
+        <el-tabs class="testplan-config" v-model="active" type="border-card" :stretch="true">
+          <el-tab-pane :label="$t('load_test.basic_config')">
+            <performance-basic-config :test-plan="testPlan" ref="basicConfig"/>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('load_test.pressure_config')">
+            <performance-pressure-config :test-plan="testPlan" ref="pressureConfig"/>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
+            <performance-advanced-config ref="advancedConfig"/>
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+  import PerformanceBasicConfig from "./components/PerformanceBasicConfig";
+  import PerformancePressureConfig from "./components/PerformancePressureConfig";
+  import PerformanceAdvancedConfig from "./components/PerformanceAdvancedConfig";
+
+  export default {
+    name: "EditPerformanceTestPlan",
+    components: {
+      PerformancePressureConfig,
+      PerformanceBasicConfig,
+      PerformanceAdvancedConfig
+    },
+    data() {
+      return {
+        result: {},
+        testPlan: {},
+        listProjectPath: "/project/listAll",
+        savePath: "/testplan/save",
+        editPath: "/testplan/edit",
+        runPath: "/testplan/run",
+        projects: [],
+        active: '0',
+        tabs: [{
+          title: this.$t('load_test.basic_config'),
+          id: '0',
+          component: 'PerformanceBasicConfig'
+        }, {
+          title: this.$t('load_test.pressure_config'),
+          id: '1',
+          component: 'PerformancePressureConfig'
+        }, {
+          title: this.$t('load_test.advanced_config'),
+          id: '2',
+          component: 'PerformanceAdvancedConfig'
+        }]
+      }
+    },
+    watch: {
+      '$route'(to) {
+        // 如果是创建测试
+        if (to.name === 'createPerTest') {
+          window.location.reload();
+          return;
+        }
+
+        let testId = to.path.split('/')[4]; // find testId
+        if (testId) {
+          this.$get('/testplan/get/' + testId, response => {
+            if(response.data){
+              this.testPlan = response.data;
+            }
+          });
+        }
+      }
+
+    },
+    created() {
+      let testId = this.$route.path.split('/')[4];
+      if (testId) {
+        this.$get('/testplan/get/' + testId, response => {
+          this.testPlan = response.data;
+        });
+      }
+
+      this.listProjects();
+    },
+    methods: {
+      listProjects() {
+        this.result = this.$get(this.listProjectPath, response => {
+          this.projects = response.data;
+        })
+      },
+      save() {
+        if (!this.validTestPlan()) {
+          return;
+        }
+
+        let options = this.getSaveOption();
+
+        this.result = this.$request(options, () => {
+          this.$message({
+            message: this.$t('commons.save_success'),
+            type: 'success'
+          });
+          this.$refs.advancedConfig.cancelAllEdit();
+          this.$router.push({path: '/performance/plan/all'})
+        });
+      },
+      saveAndRun() {
+        if (!this.validTestPlan()) {
+          return;
+        }
+
+        let options = this.getSaveOption();
+
+        this.result = this.$request(options, (response) => {
+          this.testPlan.id = response.data;
+          this.$message({
+            message: this.$t('commons.save_success'),
+            type: 'success'
+          });
+
+          this.result = this.$post(this.runPath, {id: this.testPlan.id}, () => {
+            this.$message({
+              message: this.$t('load_test.is_running'),
+              type: 'success'
+            });
+          })
+        });
+      },
+      getSaveOption() {
+        let formData = new FormData();
+        let url = this.testPlan.id ? this.editPath : this.savePath;
+
+        if (!this.testPlan.file.id) {
+          formData.append("file", this.testPlan.file);
+        }
+        // 压力配置
+        this.testPlan.loadConfiguration = JSON.stringify(this.$refs.pressureConfig.convertProperty());
+        // 高级配置
+        this.testPlan.advancedConfiguration = JSON.stringify(this.$refs.advancedConfig.configurations());
+
+        // file属性不需要json化
+        let requestJson = JSON.stringify(this.testPlan, function (key, value) {
+          return key === "file" ? undefined : value
+        });
+
+        formData.append('request', new Blob([requestJson], {
+          type: "application/json"
+        }));
+
+        return {
+          method: 'POST',
+          url: url,
+          data: formData,
+          headers: {
+            'Content-Type': undefined
+          }
+        };
+      },
+      cancel() {
+        this.$router.push({path: '/performance/plan/all'})
+      },
+      validTestPlan() {
+        if (!this.testPlan.name) {
+          this.$message({
+            message: this.$t('load_test.test_name_is_null'),
+            type: 'error'
+          });
+
+          return false;
+        }
+
+        if (!this.testPlan.projectId) {
+          this.$message({
+            message: this.$t('load_test.project_is_null'),
+            type: 'error'
+          });
+
+          return false;
+        }
+
+        if (!this.testPlan.file) {
+          this.$message({
+            message: this.$t('load_test.jmx_is_null'),
+            type: 'error'
+          });
+
+          return false;
+        }
+
+        if (!this.$refs.advancedConfig.validConfig()) {
+          return false;
+        }
+
+        /// todo: 其他校验
+
+        return true;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .edit-testplan-container {
+    float: none;
+    text-align: center;
+    padding: 15px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .edit-testplan-container .main-content {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1200px;
+  }
+
+  .edit-testplan-container .testplan-config {
+    margin-top: 15px;
+  }
+
+  .el-select {
+    min-width: 130px;
+  }
+
+  .edit-testplan-container .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
+
+  .advanced-config {
+    height: calc(100vh - 280px);
+    overflow: auto;
+  }
+</style>
diff --git a/frontend/src/performance/components/testPlan/RecentTestPlan.vue b/frontend/src/performance/components/testPlan/FunctionalRecentTestPlan.vue
similarity index 92%
rename from frontend/src/performance/components/testPlan/RecentTestPlan.vue
rename to frontend/src/performance/components/testPlan/FunctionalRecentTestPlan.vue
index 192ab6acd970b7a7b23e482d86080faf8669bfeb..4101bbbc0a9f6a48b57cf58a4daf9fe3309b8551 100644
--- a/frontend/src/performance/components/testPlan/RecentTestPlan.vue
+++ b/frontend/src/performance/components/testPlan/FunctionalRecentTestPlan.vue
@@ -4,7 +4,7 @@
       <i class="el-icon-time"/>
       {{$t('load_test.recent')}}
     </div>
-    <el-menu-item :key="t.id" v-for="t in recentTestPlans" :index="'/editTest/' + t.id">
+    <el-menu-item :key="t.id" v-for="t in recentTestPlans" :index="'/functional/plan/edit/' + t.id">
       {{ t.name }}
     </el-menu-item>
   </el-menu>
@@ -15,7 +15,7 @@
   import {hasRoles} from "../../../common/utils";
 
   export default {
-    name: "MsRecentTestPlan",
+    name: "PerformanceRecentTestPlan",
     mounted() {
 
       if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
diff --git a/frontend/src/performance/components/testPlan/FunctionalTest.vue b/frontend/src/performance/components/testPlan/FunctionalTest.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe388aa50dcd0283cb3d1a2f6ae3eccc8c9de4b5
--- /dev/null
+++ b/frontend/src/performance/components/testPlan/FunctionalTest.vue
@@ -0,0 +1,31 @@
+<template>
+  <el-col>
+    <header-menus :beaseUrl="beaseUrl"/>
+    <div>
+      <transition>
+        <keep-alive>
+          <router-view :beaseUrl="beaseUrl"/>
+        </keep-alive>
+      </transition>
+    </div>
+  </el-col>
+</template>
+<script>
+
+  import HeaderMenus from "../HeaderMenus";
+
+  export default {
+    name: "FunctionalTest",
+    components: {HeaderMenus},
+    data() {
+      return {
+        beaseUrl: "functional"
+      }
+    }
+  }
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/performance/components/testPlan/FunctionalTestHome.vue b/frontend/src/performance/components/testPlan/FunctionalTestHome.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9f319eaf5e83e288fd25292b34bcdb4920321f89
--- /dev/null
+++ b/frontend/src/performance/components/testPlan/FunctionalTestHome.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>功能测试首页</h1>
+  </div>
+
+</template>
+
+<script>
+    export default {
+        name: "PerformanceTestHome"
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/performance/components/testPlan/AllTestPlan.vue b/frontend/src/performance/components/testPlan/FunctionalTestPlan.vue
similarity index 98%
rename from frontend/src/performance/components/testPlan/AllTestPlan.vue
rename to frontend/src/performance/components/testPlan/FunctionalTestPlan.vue
index 39c358508b4d8d914016a4e20c857c8d99ec9126..b4e6778bf590cfe0a20e1f5e080f2dda5ea14bd5 100644
--- a/frontend/src/performance/components/testPlan/AllTestPlan.vue
+++ b/frontend/src/performance/components/testPlan/FunctionalTestPlan.vue
@@ -139,7 +139,7 @@
       },
       handleEdit(testPlan) {
         this.$router.push({
-          path: '/editTest/' + testPlan.id,
+          path: '/performance/plan/edit/' + testPlan.id,
         })
       },
       handleDelete(testPlan) {
diff --git a/frontend/src/performance/components/testPlan/PerformanceRecentTestPlan.vue b/frontend/src/performance/components/testPlan/PerformanceRecentTestPlan.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0ae370e5dd722ca3cab275e0ab4327ed49410ab9
--- /dev/null
+++ b/frontend/src/performance/components/testPlan/PerformanceRecentTestPlan.vue
@@ -0,0 +1,42 @@
+<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/plan/edit/' + t.id">
+      {{ t.name }}
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+  import {ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "../../../common/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('/testplan/recent/5', (response) => {
+          this.recentTestPlans = response.data;
+        });
+      }
+
+    },
+    data() {
+      return {
+        recentTestPlans: []
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .recent-text {
+    padding-left: 10%;
+    color: #777777;
+  }
+</style>
diff --git a/frontend/src/performance/components/testPlan/PerformanceTest.vue b/frontend/src/performance/components/testPlan/PerformanceTest.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7dfee543b887f33d55ce63b96a51fb5b26b6e40d
--- /dev/null
+++ b/frontend/src/performance/components/testPlan/PerformanceTest.vue
@@ -0,0 +1,32 @@
+<template>
+  <el-col>
+    <header-menus :beaseUrl="beaseUrl"/>
+    <div>
+      <transition>
+        <keep-alive>
+          <router-view :beaseUrl="beaseUrl"/>
+        </keep-alive>
+      </transition>
+    </div>
+  </el-col>
+</template>
+
+<script>
+
+  import HeaderMenus from "../HeaderMenus";
+
+  export default {
+    name: "PerformanceTest",
+    components: {HeaderMenus},
+    data() {
+      return {
+        beaseUrl: "performance"
+      }
+    }
+  }
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/performance/components/testPlan/PerformanceTestHome.vue b/frontend/src/performance/components/testPlan/PerformanceTestHome.vue
new file mode 100644
index 0000000000000000000000000000000000000000..df55161597c62ca24e35eb7b166df913e3f974f5
--- /dev/null
+++ b/frontend/src/performance/components/testPlan/PerformanceTestHome.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>性能测试首页</h1>
+  </div>
+
+</template>
+
+<script>
+    export default {
+      name: "PerformanceTestHome"
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/performance/components/testPlan/PerformanceTestPlan.vue b/frontend/src/performance/components/testPlan/PerformanceTestPlan.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b4e6778bf590cfe0a20e1f5e080f2dda5ea14bd5
--- /dev/null
+++ b/frontend/src/performance/components/testPlan/PerformanceTestPlan.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="testplan-container" v-loading="result.loading">
+    <div class="main-content">
+      <el-card>
+        <div slot="header">
+          <el-row type="flex" justify="space-between" align="middle">
+            <span class="title">{{$t('commons.test')}}</span>
+            <span class="search">
+            <el-input type="text" size="small" :placeholder="$t('load_test.search_by_name')"
+                      prefix-icon="el-icon-search"
+                      maxlength="60"
+                      v-model="condition" @change="search" clearable/>
+          </span>
+          </el-row>
+        </div>
+        <el-table :data="tableData" class="test-content">
+          <el-table-column
+            prop="name"
+            :label="$t('commons.name')"
+            width="150"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            prop="description"
+            :label="$t('commons.description')"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            prop="projectName"
+            :label="$t('load_test.project_name')"
+            width="150"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            width="250"
+            :label="$t('commons.create_time')">
+            <template slot-scope="scope">
+              <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            width="250"
+            :label="$t('commons.update_time')">
+            <template slot-scope="scope">
+              <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            width="150"
+            :label="$t('commons.operating')">
+            <template slot-scope="scope">
+              <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+              <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div>
+          <el-row>
+            <el-col :span="22" :offset="1">
+              <div class="table-page">
+                <el-pagination
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                  :current-page.sync="currentPage"
+                  :page-sizes="[5, 10, 20, 50, 100]"
+                  :page-size="pageSize"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="total">
+                </el-pagination>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        result: {},
+        queryPath: "/testplan/list",
+        deletePath: "/testplan/delete",
+        condition: "",
+        projectId: null,
+        tableData: [],
+        multipleSelection: [],
+        currentPage: 1,
+        pageSize: 5,
+        total: 0,
+        loading: false,
+        testId: null,
+      }
+    },
+    watch: {
+      '$route'(to) {
+        this.projectId = to.params.projectId;
+        this.initTableData();
+      }
+    },
+    created: function () {
+      this.projectId = this.$route.params.projectId;
+      this.initTableData();
+    },
+    methods: {
+      initTableData() {
+        let param = {
+          name: this.condition,
+        };
+
+        if (this.projectId !== 'all') {
+          param.projectId = this.projectId;
+        }
+
+        this.result = this.$post(this.buildPagePath(this.queryPath), param, response => {
+          let data = response.data;
+          this.total = data.itemCount;
+          this.tableData = data.listObject;
+        });
+      },
+      search() {
+        this.initTableData();
+      },
+      buildPagePath(path) {
+        return path + "/" + this.currentPage + "/" + this.pageSize;
+      },
+      handleSizeChange(size) {
+        this.pageSize = size;
+        this.initTableData();
+      },
+      handleCurrentChange(current) {
+        this.currentPage = current;
+        this.initTableData();
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      handleEdit(testPlan) {
+        this.$router.push({
+          path: '/performance/plan/edit/' + testPlan.id,
+        })
+      },
+      handleDelete(testPlan) {
+        this.$alert(this.$t('load_test.delete_confirm') + testPlan.name + "？", '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          callback: (action) => {
+            if (action === 'confirm') {
+              this._handleDelete(testPlan);
+            }
+          }
+        });
+      },
+      _handleDelete(testPlan) {
+        let data = {
+          id: testPlan.id
+        };
+
+        this.result = this.$post(this.deletePath, data, () => {
+          this.$message({
+            message: this.$t('commons.delete_success'),
+            type: 'success'
+          });
+          this.initTableData();
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .testplan-container {
+    padding: 15px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .main-content {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1200px;
+  }
+
+  .test-content {
+    width: 100%;
+  }
+
+  .table-page {
+    padding-top: 20px;
+    margin-right: -9px;
+    float: right;
+  }
+</style>
diff --git a/frontend/src/performance/components/testPlan/components/FunctionalTestRuntimeConfig.vue b/frontend/src/performance/components/testPlan/components/FunctionalTestRuntimeConfig.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be27ef6a693f91ce5520c61a9da4d17677f43508
--- /dev/null
+++ b/frontend/src/performance/components/testPlan/components/FunctionalTestRuntimeConfig.vue
@@ -0,0 +1,16 @@
+<template>
+
+  <div>
+
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "FunctionalTestRuntimeConfig"
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/performance/components/testPlan/components/FunctionalTestSceneConfig.vue b/frontend/src/performance/components/testPlan/components/FunctionalTestSceneConfig.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5299744781b40d957443d7e7566189cd54ec5723
--- /dev/null
+++ b/frontend/src/performance/components/testPlan/components/FunctionalTestSceneConfig.vue
@@ -0,0 +1,16 @@
+<template>
+
+  <div>
+
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "FunctionalTestSceneConfig"
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/performance/components/testPlan/components/AdvancedConfig.vue b/frontend/src/performance/components/testPlan/components/PerformanceAdvancedConfig.vue
similarity index 97%
rename from frontend/src/performance/components/testPlan/components/AdvancedConfig.vue
rename to frontend/src/performance/components/testPlan/components/PerformanceAdvancedConfig.vue
index 4ccc8589ad8ad1a531f082e787eb6ddf11d70915..d0264a9054704eac39fdf5ee589193f57eceee3b 100644
--- a/frontend/src/performance/components/testPlan/components/AdvancedConfig.vue
+++ b/frontend/src/performance/components/testPlan/components/PerformanceAdvancedConfig.vue
@@ -200,7 +200,7 @@
 
 <script>
   export default {
-    name: "MsTestPlanAdvancedConfig",
+    name: "PerformanceAdvancedConfig",
     data() {
       return {
         timeout: 10,
@@ -211,14 +211,17 @@
       }
     },
     mounted() {
-      let testId = this.$route.path.split('/')[2];
+      let testId = this.$route.path.split('/')[4];
       if (testId) {
         this.getAdvancedConfig(testId);
       }
     },
     watch: {
-      '$route'(to) {
-        let testId = to.path.split('/')[2];
+      '$route'(to, from) {
+        if(from.name != 'createPerTest' || from.name != 'editPerTest'){
+          return;
+        }
+        let testId = to.path.split('/')[4];
         if (testId) {
           this.getAdvancedConfig(testId);
         }
diff --git a/frontend/src/performance/components/testPlan/components/BasicConfig.vue b/frontend/src/performance/components/testPlan/components/PerformanceBasicConfig.vue
similarity index 99%
rename from frontend/src/performance/components/testPlan/components/BasicConfig.vue
rename to frontend/src/performance/components/testPlan/components/PerformanceBasicConfig.vue
index a5cb1007d783814f4f36dd556396dc3759d38a60..02019d26548de2737478d1c8457b19b59226823b 100644
--- a/frontend/src/performance/components/testPlan/components/BasicConfig.vue
+++ b/frontend/src/performance/components/testPlan/components/PerformanceBasicConfig.vue
@@ -56,7 +56,7 @@
   import {Message} from "element-ui";
 
   export default {
-    name: "MsTestPlanBasicConfig",
+    name: "PerformanceBasicConfig",
     props: ["testPlan"],
     data() {
       return {
diff --git a/frontend/src/performance/components/testPlan/components/PressureConfig.vue b/frontend/src/performance/components/testPlan/components/PerformancePressureConfig.vue
similarity index 82%
rename from frontend/src/performance/components/testPlan/components/PressureConfig.vue
rename to frontend/src/performance/components/testPlan/components/PerformancePressureConfig.vue
index 60d21eef57ae151c0ee1e8139fdcd9a8d2265210..0e37d84e95fcbe01c73f59e54b3af86454abd938 100644
--- a/frontend/src/performance/components/testPlan/components/PressureConfig.vue
+++ b/frontend/src/performance/components/testPlan/components/PerformancePressureConfig.vue
@@ -91,7 +91,7 @@
   const RPS_LIMIT = "rpsLimit";
 
   export default {
-    name: "MsTestPlanPressureConfig",
+    name: "PerformancePressureConfig",
     data() {
       return {
         testPlan: {},
@@ -104,7 +104,7 @@
       }
     },
     mounted() {
-      let testId = this.$route.path.split('/')[2];
+      let testId = this.$route.path.split('/')[4];
       if (testId) {
         this.getLoadConfig(testId);
       } else {
@@ -112,8 +112,11 @@
       }
     },
     watch: {
-      '$route'(to) {
-        let testId = to.path.split('/')[2];
+      '$route'(to, from) {
+        if(from.name != 'createPerTest' || from.name != 'editPerTest'){
+          return;
+        }
+        let testId = to.path.split('/')[4];
         if (testId) {
           this.getLoadConfig(testId);
         } else {
@@ -123,41 +126,44 @@
     },
     methods: {
       getLoadConfig(testId) {
-        this.$get('/testplan/get-load-config/' + testId, (response) => {
-          if (response.data) {
-            let data = JSON.parse(response.data);
+        if(testId) {
 
-            data.forEach(d => {
-              switch (d.key) {
-                case TARGET_LEVEL:
-                  this.threadNumber = d.value;
-                  break;
-                case RAMP_UP:
-                  this.rampUpTime = d.value;
-                  break;
-                case DURATION:
-                  this.duration = d.value;
-                  break;
-                case STEPS:
-                  this.step = d.value;
-                  break;
-                case RPS_LIMIT:
-                  this.rpsLimit = d.value;
-                  break;
-                default:
-                  break;
-              }
-            });
+          this.$get('/testplan/get-load-config/' + testId, (response) => {
+            if (response.data && response.data != "") {
+              let data = JSON.parse(response.data);
 
-            this.threadNumber = this.threadNumber || 10;
-            this.duration = this.duration || 30;
-            this.rampUpTime = this.rampUpTime || 12;
-            this.step = this.step || 3;
-            this.rpsLimit = this.rpsLimit || 10;
+              data.forEach(d => {
+                switch (d.key) {
+                  case TARGET_LEVEL:
+                    this.threadNumber = d.value;
+                    break;
+                  case RAMP_UP:
+                    this.rampUpTime = d.value;
+                    break;
+                  case DURATION:
+                    this.duration = d.value;
+                    break;
+                  case STEPS:
+                    this.step = d.value;
+                    break;
+                  case RPS_LIMIT:
+                    this.rpsLimit = d.value;
+                    break;
+                  default:
+                    break;
+                }
+              });
 
-            this.calculateChart();
-          }
-        });
+              this.threadNumber = this.threadNumber || 10;
+              this.duration = this.duration || 30;
+              this.rampUpTime = this.rampUpTime || 12;
+              this.step = this.step || 3;
+              this.rpsLimit = this.rpsLimit || 10;
+
+              this.calculateChart();
+            }
+          });
+        }
       },
       calculateChart() {
         if (this.duration < this.rampUpTime) {