diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.java
index 0d5932d035..a095f81620 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.java
@@ -40,11 +40,4 @@ public interface ExtTestPlanTestCaseMapper {
 
     TestPlanCaseDTO get(String testPlanTestCaseId);
 
-    /**
-     * 获取测试计划下的 TestPlanTestCaseID 和 TestCaseName
-     * @param request planId 不能为空
-     * @return List<TestPlanCaseDTO>
-     */
-    List<TestPlanCaseDTO> getTestPlanTestCaseList(@Param("request") QueryTestPlanCaseRequest request);
-
 }
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.xml
index aaf36a69b8..6bfdd21c04 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.xml
@@ -214,13 +214,6 @@
         </if>
     </select>
 
-    <select id="getTestPlanTestCaseList" resultType="io.metersphere.track.dto.TestPlanCaseDTO">
-        select test_plan_test_case.id as id, test_case.name
-        from test_plan_test_case
-        inner join test_case on test_plan_test_case.case_id = test_case.id
-        where test_plan_test_case.plan_id = #{request.planId}
-    </select>
-
     <select id="listTestCaseByProjectIds" resultType="io.metersphere.track.dto.TestPlanCaseDTO">
         select distinct * from test_plan_test_case, test_case
         where test_plan_test_case.case_id = test_case.id
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestReviewCaseMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestReviewCaseMapper.java
index 1cfd376151..aee48a0b92 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestReviewCaseMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestReviewCaseMapper.java
@@ -19,4 +19,11 @@ public interface ExtTestReviewCaseMapper {
      * @return List<TestReviewCaseDTO>
      */
     List<TestReviewCaseDTO> listTestCaseByProjectIds(@Param("ids") List<String> ids);
+
+    /**
+     * 获取 TestReviewTestCase 详细信息
+     * @param id TestReviewTestCase id
+     * @return TestReviewTestCase 详细信息
+     */
+    TestReviewCaseDTO get(@Param("id") String id);
 }
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestReviewCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestReviewCaseMapper.xml
index ed50f42be8..f680343e9e 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestReviewCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestReviewCaseMapper.xml
@@ -97,7 +97,10 @@
     </sql>
 
     <select id="list" resultType="io.metersphere.track.dto.TestReviewCaseDTO">
-        select test_case.remark, test_case_review_test_case.*, test_case.*, test_case_node.name as model, project.name as projectName
+        select test_case_review_test_case.id as id, test_case.id as caseId, test_case.name, test_case.priority,
+        test_case.type, test_case.node_path, test_case.method, test_case.num, test_case_review_test_case.reviewer,
+        test_case.review_status, test_case_review_test_case.update_time, test_case_node.name as model,
+        project.name as projectName, test_case_review_test_case.review_id as reviewId
         from test_case_review_test_case
         inner join test_case on test_case_review_test_case.case_id = test_case.id
         left join test_case_node on test_case_node.id=test_case.node_id
@@ -181,6 +184,15 @@
         </if>
     </select>
 
+    <select id="get" resultType="io.metersphere.track.dto.TestReviewCaseDTO">
+        select test_case.remark, test_case_review_test_case.*, test_case.*, test_case_node.name as model, project.name as projectName
+        from test_case_review_test_case
+        inner join test_case on test_case_review_test_case.case_id = test_case.id
+        left join test_case_node on test_case_node.id=test_case.node_id
+        inner join project on project.id = test_case.project_id
+        where test_case_review_test_case.id = #{id}
+    </select>
+
     <select id="getStatusByReviewId" resultType="java.lang.String">
         select review_status
         from test_case
diff --git a/backend/src/main/java/io/metersphere/service/CheckOwnerService.java b/backend/src/main/java/io/metersphere/service/CheckOwnerService.java
index 0977f3dc21..1ef7cffbd6 100644
--- a/backend/src/main/java/io/metersphere/service/CheckOwnerService.java
+++ b/backend/src/main/java/io/metersphere/service/CheckOwnerService.java
@@ -61,6 +61,10 @@ public class CheckOwnerService {
     }
 
     public void checkPerformanceTestOwner(String testId) {
+        // 关联为其他时
+        if (StringUtils.equals("other", testId)) {
+            return;
+        }
         String workspaceId = SessionUtils.getCurrentWorkspaceId();
         QueryTestPlanRequest request = new QueryTestPlanRequest();
         request.setWorkspaceId(workspaceId);
diff --git a/backend/src/main/java/io/metersphere/service/FileService.java b/backend/src/main/java/io/metersphere/service/FileService.java
index e87980ed7d..37c10e7042 100644
--- a/backend/src/main/java/io/metersphere/service/FileService.java
+++ b/backend/src/main/java/io/metersphere/service/FileService.java
@@ -42,7 +42,7 @@ public class FileService {
         final List<LoadTestFile> loadTestFiles = loadTestFileMapper.selectByExample(loadTestFileExample);
 
         if (CollectionUtils.isEmpty(loadTestFiles)) {
-            return null;
+            return new ArrayList<>();
         }
         List<String> fileIds = loadTestFiles.stream().map(LoadTestFile::getFileId).collect(Collectors.toList());
         FileMetadataExample example = new FileMetadataExample();
diff --git a/backend/src/main/java/io/metersphere/track/controller/TestReviewTestCaseController.java b/backend/src/main/java/io/metersphere/track/controller/TestReviewTestCaseController.java
index 4a25b740a0..8d125d5523 100644
--- a/backend/src/main/java/io/metersphere/track/controller/TestReviewTestCaseController.java
+++ b/backend/src/main/java/io/metersphere/track/controller/TestReviewTestCaseController.java
@@ -44,7 +44,7 @@ public class TestReviewTestCaseController {
     }
 
     @PostMapping("/list/all")
-    public List<TestReviewCaseDTO> getTestPlanCases(@RequestBody QueryCaseReviewRequest request) {
+    public List<TestReviewCaseDTO> getTestReviewCases(@RequestBody QueryCaseReviewRequest request) {
         return testReviewTestCaseService.list(request);
     }
 
@@ -53,4 +53,17 @@ public class TestReviewTestCaseController {
     public void editTestCase(@RequestBody TestCaseReviewTestCase testCaseReviewTestCase) {
         testReviewTestCaseService.editTestCase(testCaseReviewTestCase);
     }
+
+    @GetMapping("/get/{reviewId}")
+    @RequiresRoles(value = {RoleConstants.TEST_USER, RoleConstants.TEST_MANAGER, RoleConstants.TEST_VIEWER}, logical = Logical.OR)
+    public TestReviewCaseDTO get(@PathVariable String reviewId) {
+        return testReviewTestCaseService.get(reviewId);
+    }
+
+    @PostMapping("/list/ids")
+    @RequiresRoles(value = {RoleConstants.TEST_USER, RoleConstants.TEST_MANAGER, RoleConstants.TEST_VIEWER}, logical = Logical.OR)
+    public List<TestReviewCaseDTO> getTestReviewCaseList(@RequestBody QueryCaseReviewRequest request) {
+        return testReviewTestCaseService.getTestCaseReviewDTOList(request);
+    }
+
 }
diff --git a/backend/src/main/java/io/metersphere/track/service/TestCaseNodeService.java b/backend/src/main/java/io/metersphere/track/service/TestCaseNodeService.java
index 6594536019..79d84fc311 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestCaseNodeService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestCaseNodeService.java
@@ -372,7 +372,7 @@ public class TestCaseNodeService {
     public Map<String, String> createNodes(List<String> nodePaths, String projectId) {
         List<TestCaseNodeDTO> nodeTrees = getNodeTreeByProjectId(projectId);
         Map<String, String> pathMap = new HashMap<>();
-        for(String item : nodePaths){
+        for (String item : nodePaths) {
             if (item == null) {
                 throw new ExcelException(Translator.get("test_case_module_not_null"));
             }
@@ -590,6 +590,7 @@ public class TestCaseNodeService {
 
     /**
      * 测试用例同级模块排序
+     *
      * @param ids 被拖拽模块相邻的前一个模块 id，
      *            被拖拽的模块 id，
      *            被拖拽模块相邻的后一个模块 id
@@ -635,10 +636,11 @@ public class TestCaseNodeService {
 
     /**
      * 按照指定排序方式获取同级模块的列表
+     *
      * @param projectId 所属项目 id
-     * @param level node level
-     * @param parentId node parent id
-     * @param order pos 排序方式
+     * @param level     node level
+     * @param parentId  node parent id
+     * @param order     pos 排序方式
      * @return 按照指定排序方式排序的同级模块列表
      */
     private List<TestCaseNode> getPos(String projectId, int level, String parentId, String order) {
@@ -654,9 +656,10 @@ public class TestCaseNodeService {
 
     /**
      * 刷新同级模块的 pos 值
+     *
      * @param projectId project id
-     * @param level node level
-     * @param parentId node parent id
+     * @param level     node level
+     * @param parentId  node parent id
      */
     private void refreshPos(String projectId, int level, String parentId) {
         List<TestCaseNode> nodes = getPos(projectId, level, parentId, "pos asc");
@@ -675,14 +678,15 @@ public class TestCaseNodeService {
 
     /**
      * 获得同级模块下一个 pos 值
+     *
      * @param projectId project id
-     * @param level node level
-     * @param parentId node parent id
+     * @param level     node level
+     * @param parentId  node parent id
      * @return 同级模块下一个 pos 值
      */
     private double getNextLevelPos(String projectId, int level, String parentId) {
         List<TestCaseNode> list = getPos(projectId, level, parentId, "pos desc");
-        if (!CollectionUtils.isEmpty(list)) {
+        if (!CollectionUtils.isEmpty(list) && list.get(0) != null && list.get(0).getPos() != null) {
             return list.get(0).getPos() + 65536;
         } else {
             return 65536;
diff --git a/backend/src/main/java/io/metersphere/track/service/TestReviewTestCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestReviewTestCaseService.java
index 9ba0d15bab..21f63600ff 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestReviewTestCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestReviewTestCaseService.java
@@ -128,4 +128,13 @@ public class TestReviewTestCaseService {
         testCase.setReviewStatus(testCaseReviewTestCase.getStatus());
         testCaseMapper.updateByPrimaryKeySelective(testCase);
     }
+
+    public List<TestReviewCaseDTO> getTestCaseReviewDTOList(QueryCaseReviewRequest request) {
+        request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders()));
+        return extTestReviewCaseMapper.list(request);
+    }
+
+    public TestReviewCaseDTO get(String reviewId) {
+        return extTestReviewCaseMapper.get(reviewId);
+    }
 }
diff --git a/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue b/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue
index 7d51c4f387..5d98032542 100644
--- a/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue
+++ b/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue
@@ -27,7 +27,6 @@
               <el-form-item :label="$t('load_test.thread_num')">
                 <el-input-number
                   :disabled="isReadOnly"
-                  :placeholder="$t('load_test.input_thread_num')"
                   v-model="threadGroup.threadNumber"
                   @change="calculateChart(threadGroup)"
                   :min="resourcePoolResourceLength"
@@ -37,7 +36,6 @@
               <el-form-item :label="$t('load_test.duration')">
                 <el-input-number
                   :disabled="isReadOnly"
-                  :placeholder="$t('load_test.duration')"
                   v-model="threadGroup.duration"
                   :min="1"
                   @change="calculateChart(threadGroup)"
@@ -49,7 +47,6 @@
                 &nbsp;
                 <el-input-number
                   :disabled="isReadOnly || !threadGroup.rpsLimitEnable"
-                  :placeholder="$t('load_test.input_rps_limit')"
                   v-model="threadGroup.rpsLimit"
                   @change="calculateChart(threadGroup)"
                   :min="1"
@@ -59,7 +56,6 @@
               <el-form-item :label="$t('load_test.ramp_up_time_within')">
                 <el-input-number
                   :disabled="isReadOnly"
-                  placeholder=""
                   :min="1"
                   :max="threadGroup.duration"
                   v-model="threadGroup.rampUpTime"
@@ -69,7 +65,6 @@
               <el-form-item :label="$t('load_test.ramp_up_time_minutes')">
                 <el-input-number
                   :disabled="isReadOnly"
-                  placeholder=""
                   :min="1"
                   :max="Math.min(threadGroup.threadNumber, threadGroup.rampUpTime)"
                   v-model="threadGroup.step"
@@ -465,7 +460,13 @@ export default {
 
       for (let i = 0; i < this.threadGroups.length; i++) {
         if (!this.threadGroups[i].threadNumber || !this.threadGroups[i].duration
-          || !this.threadGroups[i].rampUpTime || !this.threadGroups[i].step || !this.threadGroups[i].rpsLimit) {
+          || !this.threadGroups[i].rampUpTime || !this.threadGroups[i].step) {
+          this.$warning(this.$t('load_test.pressure_config_params_is_empty'));
+          this.$emit('changeActive', '1');
+          return false;
+        }
+
+        if (this.threadGroups[i].rpsLimitEnable && !this.threadGroups[i].rpsLimit) {
           this.$warning(this.$t('load_test.pressure_config_params_is_empty'));
           this.$emit('changeActive', '1');
           return false;
diff --git a/frontend/src/business/components/settings/organization/BugManagement.vue b/frontend/src/business/components/settings/organization/BugManagement.vue
index 670a4ff8cf..0c5a2c3bb7 100644
--- a/frontend/src/business/components/settings/organization/BugManagement.vue
+++ b/frontend/src/business/components/settings/organization/BugManagement.vue
@@ -10,7 +10,7 @@
           <img class="platform" src="../../../../assets/jira.png" alt="Jira"/>
         </el-radio>
         <el-radio label="Zentao">
-          <img class="platform" src="../../../../assets/zentao.jpg" alt="Zentao"/>
+          <img class="zentao_platform" src="../../../../assets/zentao.jpg" alt="Zentao"/>
         </el-radio>
       </el-radio-group>
     </div>
@@ -66,7 +66,12 @@ export default {
 }
 
 .platform {
-  height: 90px;
+  height: 80px;
+  vertical-align: middle
+}
+
+.zentao_platform {
+  height: 100px;
   vertical-align: middle
 }
 </style>
diff --git a/frontend/src/business/components/settings/organization/TaskNotification.vue b/frontend/src/business/components/settings/organization/TaskNotification.vue
index 7b6838795e..8b2061db4d 100644
--- a/frontend/src/business/components/settings/organization/TaskNotification.vue
+++ b/frontend/src/business/components/settings/organization/TaskNotification.vue
@@ -2,8 +2,12 @@
   <ms-container>
     <ms-main-container>
       <el-alert
-        :title="$t('organization.message.notes')"
-        type="info">
+        title="Notice:"
+        type="info"
+        show-icon>
+        <template v-slot:default>
+          {{ $t('organization.message.notes') }}
+        </template>
       </el-alert>
       <jenkins-notification :jenkins-receiver-options="jenkinsReceiverOptions"/>
       <test-plan-task-notification :test-plan-receiver-options="testPlanReceiverOptions"/>
diff --git a/frontend/src/business/components/settings/router.js b/frontend/src/business/components/settings/router.js
index c050dd0009..0d984cd152 100644
--- a/frontend/src/business/components/settings/router.js
+++ b/frontend/src/business/components/settings/router.js
@@ -34,7 +34,6 @@ export default {
     },
     ...requireContext.keys().map(key => requireContext(key).system),
     ...requireContext.keys().map(key => requireContext(key).license),
-    ...requireContext.keys().map(key => requireContext(key).display),
     {
       path: 'organizationpmnmember',
       component: () => import('@/business/components/settings/organization/OrganizationMember'),
diff --git a/frontend/src/business/components/settings/system/SystemParameterSetting.vue b/frontend/src/business/components/settings/system/SystemParameterSetting.vue
index 20b51fc9c9..39f9fbdfa1 100644
--- a/frontend/src/business/components/settings/system/SystemParameterSetting.vue
+++ b/frontend/src/business/components/settings/system/SystemParameterSetting.vue
@@ -11,6 +11,9 @@
       <el-tab-pane :label="$t('system_parameter_setting.ldap_setting')" name="ldap">
         <ldap-setting/>
       </el-tab-pane>
+      <el-tab-pane v-if="hasLicense()" :label="$t('display.title')" name="display">
+        <ms-display/>
+      </el-tab-pane>
     </el-tabs>
   </el-card>
 </template>
@@ -19,17 +22,26 @@
 import EmailSetting from "./EmailSetting";
 import LdapSetting from "./LdapSetting";
 import BaseSetting from "./BaseSetting";
+import {hasLicense} from '@/common/js/utils';
+
+const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
+const display = requireComponent.keys().length > 0 ? requireComponent("./display/Display.vue") : {};
 
 export default {
   name: "SystemParameterSetting",
   components: {
     BaseSetting,
-    EmailSetting, LdapSetting
+    EmailSetting,
+    LdapSetting,
+    "MsDisplay": display.default
   },
   data() {
     return {
-      activeName: 'base'
+      activeName: 'base',
     }
+  },
+  methods: {
+    hasLicense,
   }
 }
 </script>
diff --git a/frontend/src/business/components/track/plan/view/TestPlanView.vue b/frontend/src/business/components/track/plan/view/TestPlanView.vue
index 8f8aaa439a..0928018ee2 100644
--- a/frontend/src/business/components/track/plan/view/TestPlanView.vue
+++ b/frontend/src/business/components/track/plan/view/TestPlanView.vue
@@ -1,39 +1,25 @@
 <template>
 
-  <ms-container>
-
-    <ms-aside-container>
-      <select-menu
-        :data="testPlans"
-        :current-data="currentPlan"
-        :title="$t('test_track.plan_view.plan')"
-        @dataChange="changePlan"/>
-      <node-tree class="node-tree"
-                 v-loading="result.loading"
-                 @nodeSelectEvent="nodeChange"
-                 @refresh="refresh"
-                 :tree-nodes="treeNodes"
-                 :draggable="false"
-                 ref="nodeTree"/>
-    </ms-aside-container>
-
-    <ms-main-container>
-        <test-plan-test-case-list
-          class="table-list"
-          @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
-          @refresh="refresh"
-          :plan-id="planId"
-          :select-node-ids="selectNodeIds"
-          :select-parent-nodes="selectParentNodes"
-          ref="testPlanTestCaseList"/>
-    </ms-main-container>
-
-    <test-case-relevance
-      @refresh="refresh"
-      :plan-id="planId"
-      ref="testCaseRelevance"/>
-
-  </ms-container>
+  <div>
+    <ms-test-plan-header-bar>
+      <template v-slot:info>
+        <select-menu
+          :data="testPlans"
+          :current-data="currentPlan"
+          :title="$t('test_track.plan_view.plan')"
+          @dataChange="changePlan"/>
+      </template>
+      <template v-slot:menu>
+        <el-menu active-text-color="#6d317c" :default-active="activeIndex"
+                 class="el-menu-demo header-menu" mode="horizontal" @select="handleSelect">
+          <el-menu-item index="functional">功能测试用例</el-menu-item>
+          <el-menu-item index="api">接口测试用例</el-menu-item>
+        </el-menu>
+      </template>
+    </ms-test-plan-header-bar>
+    <test-plan-functional v-if="activeIndex === 'functional'" :plan-id="planId"/>
+    <test-plan-api v-if="activeIndex === 'api'" :plan-id="planId"/>
+  </div>
 
 </template>
 
@@ -46,20 +32,23 @@
     import MsContainer from "../../../common/components/MsContainer";
     import MsAsideContainer from "../../../common/components/MsAsideContainer";
     import MsMainContainer from "../../../common/components/MsMainContainer";
+    import MsTestPlanHeaderBar from "./comonents/head/TestPlanHeaderBar";
+    import TestPlanFunctional from "./comonents/functional/TestPlanFunctional";
+    import TestPlanApi from "./comonents/api/TestPlanApi";
 
     export default {
       name: "TestPlanView",
       components: {
+        TestPlanApi,
+        TestPlanFunctional,
+        MsTestPlanHeaderBar,
         MsMainContainer,
         MsAsideContainer, MsContainer, NodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu},
       data() {
         return {
-          result: {},
           testPlans: [],
           currentPlan: {},
-          selectNodeIds: [],
-          selectParentNodes: [],
-          treeNodes: []
+          activeIndex: "functional"
         }
       },
       computed: {
@@ -68,33 +57,11 @@
         }
       },
       mounted() {
-        this.initData();
-        this.openTestCaseEdit(this.$route.path);
-      },
-      watch: {
-        '$route'(to, from) {
-          this.openTestCaseEdit(to.path);
-        },
-        planId() {
-          this.initData();
-        }
+        this.getTestPlans();
       },
       methods: {
-        refresh() {
-          this.selectNodeIds = [];
-          this.selectParentNodes = [];
-          this.$refs.testCaseRelevance.search();
-          this.getNodeTreeByPlanId();
-        },
-        initData() {
-          this.getTestPlans();
-          this.getNodeTreeByPlanId();
-        },
-        openTestCaseRelevanceDialog() {
-          this.$refs.testCaseRelevance.openTestCaseRelevanceDialog();
-        },
         getTestPlans() {
-          this.result = this.$post('/test/plan/list/all', {}, response => {
+          this.$post('/test/plan/list/all', {}, response => {
             this.testPlans = response.data;
             this.testPlans.forEach(plan => {
               if (this.planId && plan.id === this.planId) {
@@ -103,39 +70,36 @@
             });
           });
         },
-        nodeChange(nodeIds, pNodes) {
-          this.selectNodeIds = nodeIds;
-          this.selectParentNodes = pNodes;
-          // 切换node后，重置分页数
-          this.$refs.testPlanTestCaseList.currentPage = 1;
-          this.$refs.testPlanTestCaseList.pageSize = 10;
-        },
         changePlan(plan) {
           this.currentPlan = plan;
           this.$router.push('/track/plan/view/' + plan.id);
         },
-        getNodeTreeByPlanId() {
-          if(this.planId){
-            this.result = this.$get("/case/node/list/plan/" + this.planId, response => {
-              this.treeNodes = response.data;
-            });
-          }
-        },
-        openTestCaseEdit(path) {
-          if (path.indexOf("/plan/view/edit") >= 0){
-            let caseId = this.$route.params.caseId;
-            this.$get('/test/plan/case/get/' + caseId, response => {
-              let testCase = response.data;
-              if (testCase) {
-                this.$refs.testPlanTestCaseList.handleEdit(testCase);
-                this.$router.push('/track/plan/view/' + testCase.planId);
-              }
-            });
-          }
+        handleSelect(key) {
+          this.activeIndex = key;
         }
       }
     }
 </script>
 
 <style scoped>
+
+  .select-menu {
+    display: inline-block;
+  }
+
+  .ms-main-container {
+    height: calc(100vh - 80px - 50px);
+  }
+
+  .ms-aside-container {
+    height: calc(100vh - 80px - 51px);
+    margin-top: 1px;
+  }
+
+  .header-menu.el-menu--horizontal > li {
+    height: 49px;
+    line-height: 50px;
+    color: dimgray;
+  }
+
 </style>
diff --git a/frontend/src/business/components/track/plan/view/comonents/TestPlanCommonComponent.vue b/frontend/src/business/components/track/plan/view/comonents/TestPlanCommonComponent.vue
new file mode 100644
index 0000000000..4ca9b25873
--- /dev/null
+++ b/frontend/src/business/components/track/plan/view/comonents/TestPlanCommonComponent.vue
@@ -0,0 +1,29 @@
+<template>
+  <ms-container>
+
+    <ms-aside-container>
+      <slot name="aside"></slot>
+    </ms-aside-container>
+
+    <ms-main-container>
+      <slot name="main"></slot>
+    </ms-main-container>
+
+    <slot></slot>
+
+  </ms-container>
+</template>
+
+<script>
+    import MsMainContainer from "../../../../common/components/MsMainContainer";
+    import MsAsideContainer from "../../../../common/components/MsAsideContainer";
+    import MsContainer from "../../../../common/components/MsContainer";
+    export default {
+        name: "MsTestPlanCommonComponent",
+      components: {MsContainer, MsAsideContainer, MsMainContainer}
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
index 70f36abe3f..b102893610 100644
--- a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
@@ -472,6 +472,7 @@ export default {
       this.getTestCase(this.index);
     },
     getTestCase(index) {
+      this.testCase = {};
       let testCase = this.testCases[index];
       // id 为 TestPlanTestCase 的 id
       this.result = this.$get('/test/plan/case/get/' + testCase.id, response => {
@@ -495,11 +496,10 @@ export default {
         this.testCase = item;
         this.getRelatedTest();
         this.initTest();
+        this.getIssues(item.caseId);
+        this.stepResultChange();
+        this.getFileMetaData(item);
       })
-
-      this.getIssues(testCase.caseId);
-      this.stepResultChange();
-      this.getFileMetaData(testCase);
     },
     getFileMetaData(testCase) {
       this.tableData = [];
diff --git a/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApi.vue b/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApi.vue
new file mode 100644
index 0000000000..3a40507adc
--- /dev/null
+++ b/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApi.vue
@@ -0,0 +1,115 @@
+<template>
+
+  <ms-test-plan-common-component>
+    <template v-slot:aside>
+      <node-tree class="node-tree"
+                 v-loading="result.loading"
+                 @nodeSelectEvent="nodeChange"
+                 @refresh="refresh"
+                 :tree-nodes="treeNodes"
+                 :draggable="false"
+                 ref="nodeTree"/>
+    </template>
+    <template v-slot:main>
+      <test-plan-test-case-list
+        class="table-list"
+        @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
+        @refresh="refresh"
+        :plan-id="planId"
+        :select-node-ids="selectNodeIds"
+        :select-parent-nodes="selectParentNodes"
+        ref="testPlanTestCaseList"/>
+    </template>
+
+    <test-case-relevance
+      @refresh="refresh"
+      :plan-id="planId"
+      ref="testCaseRelevance"/>
+  </ms-test-plan-common-component>
+
+</template>
+
+<script>
+    import NodeTree from "../../../../common/NodeTree";
+    import TestPlanTestCaseList from "../TestPlanTestCaseList";
+    import TestCaseRelevance from "../TestCaseRelevance";
+    import MsTestPlanCommonComponent from "../TestPlanCommonComponent";
+
+    export default {
+      name: "TestPlanApi",
+      components: {
+        MsTestPlanCommonComponent,
+        TestCaseRelevance,
+        TestPlanTestCaseList,
+        NodeTree,
+      },
+      data() {
+        return {
+          result: {},
+          selectNodeIds: [],
+          selectParentNodes: [],
+          treeNodes: [],
+        }
+      },
+      props: [
+        'planId'
+      ],
+      mounted() {
+        this.initData();
+        this.openTestCaseEdit(this.$route.path);
+      },
+      watch: {
+        '$route'(to, from) {
+          this.openTestCaseEdit(to.path);
+        },
+        planId() {
+          this.initData();
+        }
+      },
+      methods: {
+        refresh() {
+          this.selectNodeIds = [];
+          this.selectParentNodes = [];
+          this.$refs.testCaseRelevance.search();
+          this.getNodeTreeByPlanId();
+        },
+        initData() {
+          this.getNodeTreeByPlanId();
+        },
+        openTestCaseRelevanceDialog() {
+          this.$refs.testCaseRelevance.openTestCaseRelevanceDialog();
+        },
+        nodeChange(nodeIds, pNodes) {
+          this.selectNodeIds = nodeIds;
+          this.selectParentNodes = pNodes;
+          // 切换node后，重置分页数
+          this.$refs.testPlanTestCaseList.currentPage = 1;
+          this.$refs.testPlanTestCaseList.pageSize = 10;
+        },
+        getNodeTreeByPlanId() {
+          if (this.planId) {
+            this.result = this.$get("/case/node/list/plan/" + this.planId, response => {
+              this.treeNodes = response.data;
+            });
+          }
+        },
+        openTestCaseEdit(path) {
+          if (path.indexOf("/plan/view/edit") >= 0) {
+            let caseId = this.$route.params.caseId;
+            this.$get('/test/plan/case/get/' + caseId, response => {
+              let testCase = response.data;
+              if (testCase) {
+                this.$refs.testPlanTestCaseList.handleEdit(testCase);
+                this.$router.push('/track/plan/view/' + testCase.planId);
+              }
+            });
+          }
+        },
+      }
+    }
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/track/plan/view/comonents/functional/TestPlanFunctional.vue b/frontend/src/business/components/track/plan/view/comonents/functional/TestPlanFunctional.vue
new file mode 100644
index 0000000000..ad3244fff9
--- /dev/null
+++ b/frontend/src/business/components/track/plan/view/comonents/functional/TestPlanFunctional.vue
@@ -0,0 +1,115 @@
+<template>
+
+  <ms-test-plan-common-component>
+    <template v-slot:aside>
+      <node-tree class="node-tree"
+                 v-loading="result.loading"
+                 @nodeSelectEvent="nodeChange"
+                 @refresh="refresh"
+                 :tree-nodes="treeNodes"
+                 :draggable="false"
+                 ref="nodeTree"/>
+    </template>
+    <template v-slot:main>
+      <test-plan-test-case-list
+        class="table-list"
+        @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
+        @refresh="refresh"
+        :plan-id="planId"
+        :select-node-ids="selectNodeIds"
+        :select-parent-nodes="selectParentNodes"
+        ref="testPlanTestCaseList"/>
+    </template>
+
+    <test-case-relevance
+      @refresh="refresh"
+      :plan-id="planId"
+      ref="testCaseRelevance"/>
+  </ms-test-plan-common-component>
+
+</template>
+
+<script>
+    import NodeTree from "../../../../common/NodeTree";
+    import TestPlanTestCaseList from "../TestPlanTestCaseList";
+    import TestCaseRelevance from "../TestCaseRelevance";
+    import MsTestPlanCommonComponent from "../TestPlanCommonComponent";
+
+    export default {
+      name: "TestPlanFunctional",
+      components: {
+        MsTestPlanCommonComponent,
+        TestCaseRelevance,
+        TestPlanTestCaseList,
+        NodeTree,
+      },
+      data() {
+        return {
+          result: {},
+          selectNodeIds: [],
+          selectParentNodes: [],
+          treeNodes: [],
+        }
+      },
+      props: [
+        'planId'
+      ],
+      mounted() {
+        this.initData();
+        this.openTestCaseEdit(this.$route.path);
+      },
+      watch: {
+        '$route'(to, from) {
+          this.openTestCaseEdit(to.path);
+        },
+        planId() {
+          this.initData();
+        }
+      },
+      methods: {
+        refresh() {
+          this.selectNodeIds = [];
+          this.selectParentNodes = [];
+          this.$refs.testCaseRelevance.search();
+          this.getNodeTreeByPlanId();
+        },
+        initData() {
+          this.getNodeTreeByPlanId();
+        },
+        openTestCaseRelevanceDialog() {
+          this.$refs.testCaseRelevance.openTestCaseRelevanceDialog();
+        },
+        nodeChange(nodeIds, pNodes) {
+          this.selectNodeIds = nodeIds;
+          this.selectParentNodes = pNodes;
+          // 切换node后，重置分页数
+          this.$refs.testPlanTestCaseList.currentPage = 1;
+          this.$refs.testPlanTestCaseList.pageSize = 10;
+        },
+        getNodeTreeByPlanId() {
+          if (this.planId) {
+            this.result = this.$get("/case/node/list/plan/" + this.planId, response => {
+              this.treeNodes = response.data;
+            });
+          }
+        },
+        openTestCaseEdit(path) {
+          if (path.indexOf("/plan/view/edit") >= 0) {
+            let caseId = this.$route.params.caseId;
+            this.$get('/test/plan/case/get/' + caseId, response => {
+              let testCase = response.data;
+              if (testCase) {
+                this.$refs.testPlanTestCaseList.handleEdit(testCase);
+                this.$router.push('/track/plan/view/' + testCase.planId);
+              }
+            });
+          }
+        },
+      }
+    }
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/track/plan/view/comonents/head/TestPlanHeaderBar.vue b/frontend/src/business/components/track/plan/view/comonents/head/TestPlanHeaderBar.vue
new file mode 100644
index 0000000000..fa6a6249b1
--- /dev/null
+++ b/frontend/src/business/components/track/plan/view/comonents/head/TestPlanHeaderBar.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="test-plan-header-bar">
+      <div class="header-info">
+        <slot name="info"></slot>
+      </div>
+      <div class="menu-ul">
+       <slot name="menu"></slot>
+      </div>
+  </div>
+</template>
+
+<script>
+
+
+import SelectMenu from "../../../../common/SelectMenu";
+export default {
+  name: "MsTestPlanHeaderBar",
+  components: {SelectMenu},
+  data() {
+    return {
+    }
+  },
+  props: {
+  },
+  methods: {
+  }
+}
+
+</script>
+
+<style scoped>
+
+  .test-plan-header-bar {
+    height: 50px;
+    background-color: white;
+  }
+
+  .header-info {
+    height: 50px;
+    width: 300px;
+    line-height: 50px;
+    vertical-align: top;
+    display: inline-block;
+  }
+
+  .menu-ul {
+    width: 500px;
+    display: inline-block;
+  }
+
+</style>
diff --git a/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue b/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
index 3a55a66aaa..2760c085f3 100644
--- a/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
+++ b/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
@@ -102,10 +102,11 @@
                     <el-col class="test-detail" :span="20" :offset="1">
                       <el-tabs v-model="activeTab" type="border-card">
                         <el-tab-pane name="detail" :label="$t('test_track.plan_view.test_detail')">
-                          <api-test-detail :is-read-only="true" v-if="testCase.type === 'api'" @runTest="testRun"
+                          <api-test-detail :is-read-only="true" v-if="testCase.type === 'api'"
                                            :id="testCase.testId" ref="apiTestDetail"/>
-                          <performance-test-detail :is-read-only="true" v-if="testCase.type === 'performance'"
-                                                   @runTest="testRun" :id="testCase.testId"
+                          <performance-test-detail v-if="testCase.type === 'performance'"
+                                                   :is-read-only="true"
+                                                   :id="testCase.testId"
                                                    ref="performanceTestDetail"/>
                         </el-tab-pane>
                       </el-tabs>
@@ -211,7 +212,6 @@
                         <test-case-attachment :table-data="tableData"
                                               :read-only="false"
                                               :is-delete="false"
-                                              @handleDelete="handleDelete"
                         />
                       </div>
                     </el-col>
@@ -338,20 +338,26 @@ export default {
       this.getTestCase(this.index);
     },
     getTestCase(index) {
+      this.testCase = {};
       let testCase = this.testCases[index];
-      let item = {};
-      Object.assign(item, testCase);
-      item.steps = JSON.parse(item.steps);
-      item.steptResults = [];
-      for (let i = 0; i < item.steps.length; i++) {
-        item.steps[i].actualResult = '';
-        item.steps[i].executeResult = '';
-        item.steptResults.push(item.steps[i]);
-      }
-      this.testCase = item;
-      this.getComments(item);
-      this.initTest();
-      this.getFileMetaData(testCase);
+      this.result = this.$get("/test/review/case/get/" + testCase.id, response => {
+        let item = {};
+        let data = response.data;
+        Object.assign(item, data);
+        item.steps = JSON.parse(item.steps);
+        item.steptResults = [];
+        for (let i = 0; i < item.steps.length; i++) {
+          item.steps[i].actualResult = '';
+          item.steps[i].executeResult = '';
+          item.steptResults.push(item.steps[i]);
+        }
+        this.testCase = item;
+        this.getRelatedTest();
+        this.getComments(item);
+        this.initTest();
+        this.getFileMetaData(data);
+      })
+
     },
     getFileMetaData(testCase) {
       this.tableData = [];
@@ -375,21 +381,16 @@ export default {
     },
     initTest() {
       this.$nextTick(() => {
-        if (this.testCase.method === 'auto') {
-          if (this.$refs.apiTestDetail && this.testCase.type === 'api') {
-            this.$refs.apiTestDetail.init();
-          } else if (this.testCase.type === 'performance') {
-            this.$refs.performanceTestDetail.init();
+        if (this.testCase.testId && this.testCase.testId !== 'other') {
+          if (this.testCase.method === 'auto') {
+            if (this.$refs.apiTestDetail && this.testCase.type === 'api') {
+              this.$refs.apiTestDetail.init();
+            } else if (this.testCase.type === 'performance') {
+              this.$refs.performanceTestDetail.init();
+            }
           }
         }
       });
-    },
-    testRun(reportId) {
-      this.testCase.reportId = reportId;
-      this.saveReport(reportId);
-    },
-    saveReport(reportId) {
-
     },
     getComments(testCase) {
       let id = '';
@@ -403,13 +404,12 @@ export default {
       })
     },
     initData(testCase) {
-      this.result = this.$post('/test/review/case/list/all', this.searchParam, response => {
+      this.result = this.$post('/test/review/case/list/ids', this.searchParam, response => {
         this.testCases = response.data;
         for (let i = 0; i < this.testCases.length; i++) {
           if (this.testCases[i].id === testCase.id) {
             this.index = i;
             this.getTestCase(i);
-            this.getRelatedTest();
           }
         }
       });
@@ -439,9 +439,6 @@ export default {
         }).length > 0;
       }
     },
-    handleDelete() {
-
-    }
   }
 }
 </script>
diff --git a/frontend/src/business/main.js b/frontend/src/business/main.js
index af8546ab0e..cf25f4cf37 100644
--- a/frontend/src/business/main.js
+++ b/frontend/src/business/main.js
@@ -11,7 +11,7 @@ import YanProgress from 'yan-progress';
 import './permission' // permission control
 import i18n from "../i18n/i18n";
 import store from "./store";
-import {permission, roles} from './permission'
+import {permission, roles, xpack} from './permission'
 import chart from "../common/js/chart";
 import CalendarHeatmap from "../common/js/calendar-heatmap";
 import '../common/css/menu-header.css';
@@ -37,6 +37,8 @@ Vue.directive('permission', permission);
 // v-roles
 Vue.directive('roles', roles);
 
+Vue.directive('xpack', xpack);
+
 new Vue({
   el: '#app',
   router,
diff --git a/frontend/src/business/permission.js b/frontend/src/business/permission.js
index 3583af3baf..8229c0e2f9 100644
--- a/frontend/src/business/permission.js
+++ b/frontend/src/business/permission.js
@@ -1,6 +1,6 @@
 import router from './components/common/router/router'
 import {TokenKey} from '@/common/js/constants';
-import {hasRolePermissions, hasRoles} from "@/common/js/utils";
+import {hasLicense, hasRolePermissions, hasRoles} from "@/common/js/utils";
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 const whiteList = ['/login']; // no redirect whitelist
@@ -19,6 +19,20 @@ export const roles = {
   }
 };
 
+export const xpack = {
+  inserted(el, binding) {
+    checkLicense(el, binding);
+  }
+};
+
+function checkLicense(el, binding, type) {
+  let v = hasLicense()
+
+  if (v) {
+    el.parentNode && el.parentNode.removeChild(el)
+  }
+}
+
 function checkRolePermission(el, binding, type) {
   const {value} = binding;
   if (value && value instanceof Array && value.length > 0) {
diff --git a/frontend/src/common/js/utils.js b/frontend/src/common/js/utils.js
index 558f91711e..21c400e748 100644
--- a/frontend/src/common/js/utils.js
+++ b/frontend/src/common/js/utils.js
@@ -1,12 +1,12 @@
 import {
+  LicenseKey,
   REFRESH_SESSION_USER_URL,
-  ROLE_ORG_ADMIN,
   ROLE_ADMIN,
+  ROLE_ORG_ADMIN,
   ROLE_TEST_MANAGER,
   ROLE_TEST_USER,
   ROLE_TEST_VIEWER,
-  TokenKey,
-  LicenseKey
+  TokenKey
 } from "./constants";
 import axios from "axios";
 import {jsPDF} from "jspdf";
@@ -45,6 +45,11 @@ export function hasRolePermission(role) {
   return false
 }
 
+export function hasLicense() {
+  let v = localStorage.getItem(LicenseKey);
+  return v === 'valid';
+}
+
 //是否含有对应组织或工作空间的角色
 export function hasRolePermissions(...roles) {
   for (let role of roles) {
@@ -238,7 +243,7 @@ export function exportPdf(name, canvasList) {
 
       // html页面生成的canvas在pdf中图片的宽高
       let imgWidth = a4Width;
-      let imgHeight = a4Width/contentWidth * contentHeight;
+      let imgHeight = a4Width / contentWidth * contentHeight;
 
       let pageData = canvas.toDataURL('image/jpeg', 1.0);
 
@@ -251,7 +256,7 @@ export function exportPdf(name, canvasList) {
       if (leftHeight > blankHeight) {
         //页面偏移
         let position = 0;
-        while(leftHeight > 0) {
+        while (leftHeight > 0) {
           // 本次添加占用的高度
           let occupation = a4Height - currentHeight;
           pdf.addImage(pageData, 'JPEG', 0, position + currentHeight, imgWidth, imgHeight);
@@ -259,7 +264,7 @@ export function exportPdf(name, canvasList) {
           leftHeight -= occupation;
           position -= occupation;
           //避免添加空白页
-          if(leftHeight > 0) {
+          if (leftHeight > 0) {
             pdf.addPage();
             currentHeight = 0;
           }
@@ -277,15 +282,15 @@ export function exportPdf(name, canvasList) {
 
 export function windowPrint(id, zoom) {
   //根据div标签ID拿到div中的局部内容
-  let bdhtml=window.document.body.innerHTML;
+  let bdhtml = window.document.body.innerHTML;
   let el = document.getElementById(id);
   var jubuData = el.innerHTML;
-  document.getElementsByTagName('body')[0].style.zoom=zoom;
+  document.getElementsByTagName('body')[0].style.zoom = zoom;
   //把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容
-  window.document.body.innerHTML= jubuData;
+  window.document.body.innerHTML = jubuData;
   //调用打印功能
   window.print();
-  window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；
+  window.document.body.innerHTML = bdhtml;//重新给页面内容赋值；
   return false;
 }
 
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 4106b055b7..349a3fb058 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -236,7 +236,7 @@ export default {
       mail: 'mail',
       nail_robot: 'Nail robot',
       enterprise_wechat_robot: 'Enterprise wechat robot',
-      notes: 'Note: 1. Nail and create a custom robot in the enterprise group, and then copy the webhook address on our platform;\n' +
+      notes: '1. Nail and create a custom robot in the enterprise group, and then copy the webhook address on our platform;\n' +
         '\n' +
         '2. Robots are selected as swarm robots, and "custom keyword" is selected for security verification: "task notification";\n' +
         '\n' +
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 4aeddc81c5..d9108754b2 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -237,7 +237,7 @@ export default {
       mail: '邮件',
       nail_robot: '钉钉机器人',
       enterprise_wechat_robot: '企业微信机器人',
-      notes: '注意:1.钉钉和企业群里新建一个自定义机器人，然后复制 webhook 地址在我们平台上;\n' +
+      notes: '1.钉钉和企业群里新建一个自定义机器人，然后复制 webhook 地址在我们平台上;\n' +
         '       2.机器人选择为群机器人，安全验证选择“自定义关键词” ："任务通知";\n' +
         '       3.选择接收人时必须是你所建的群里包含的人,接收人手机号为必填项且为钉钉企业所使用的手机号,',
       message: '事件，接收人，接收方式为必填项',
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index b2881be604..92aa5e92fe 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -237,7 +237,7 @@ export default {
       mail: '郵件',
       nail_robot: '釘釘機器人',
       enterprise_wechat_robot: '企業微信機器人',
-      notes: '註意: 1.事件，接收方式，接收人為必填項；\n' +
+      notes: '1.事件，接收方式，接收人為必填項；\n' +
         '         2.接收方式除郵件外webhook為必填；\n' +
         '         3.機器人選擇為群機器人，安全驗證選擇“自定義關鍵詞” ："任務通知"',
       message: '事件，接收人，接收方式為必填項',