From 4a2694e77eafb19d9964c67b228cc023427f321a Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Tue, 14 Nov 2023 18:25:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E6=A0=91=E6=8B=89=E5=AE=BD=E5=90=8E=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E6=A8=A1=E5=9D=97=E5=90=8D=E7=A7=B0=E5=8F=88=E6=81=A2?=
 =?UTF-8?q?=E5=A4=8D=E9=BB=98=E8=AE=A4=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/business/automation/ApiAutomation.vue |   6 +-
 .../automation/scenario/ImportApiScenario.vue |   2 +-
 .../automation/scenario/api/ApiRelevance.vue  | 136 +++---
 .../src/business/definition/ApiDefinition.vue |  74 +--
 .../components/ApiVariableAdvance.vue         |   2 +-
 .../src/components/MsAsideContainer.vue       | 139 ++++--
 .../src/business/menu/file/FileManage.vue     |   2 +-
 .../frontend/src/business/Setting.vue         |   2 +-
 .../common/CaseRelevanceSideDialog.vue        |  20 +-
 .../detail/component/ApiCaseFailureResult.vue |   1 +
 .../component/ApiScenarioFailureResult.vue    |   1 +
 .../report/detail/component/LoadAllResult.vue | 137 +++---
 .../detail/component/UiScenarioResult.vue     |  10 +-
 .../review/view/TestCaseReviewView.vue        | 130 ++---
 .../view/components/TestReviewRelevance.vue   | 447 ++++++++++--------
 .../src/business/detail/WorkstationDetail.vue | 395 +++++++++-------
 .../environment/EnvironmentGroupList.vue      | 151 ++++--
 17 files changed, 961 insertions(+), 694 deletions(-)

diff --git a/api-test/frontend/src/business/automation/ApiAutomation.vue b/api-test/frontend/src/business/automation/ApiAutomation.vue
index d319191d7f..0e6e35e272 100644
--- a/api-test/frontend/src/business/automation/ApiAutomation.vue
+++ b/api-test/frontend/src/business/automation/ApiAutomation.vue
@@ -1,7 +1,8 @@
 <template>
   <ms-container v-if="renderComponent" v-loading="loading">
-    <ms-aside-container v-show="isAsideHidden">
-      <ms-api-scenario-module
+    <ms-aside-container v-show="isAsideHidden" pageKey="API_AUTOMATION">
+      <template #default>
+        <ms-api-scenario-module
         :show-operator="true"
         @nodeSelectEvent="nodeChange"
         @refreshTable="refresh"
@@ -17,6 +18,7 @@
         :type="'edit'"
         :total="total"
         ref="nodeTree" />
+      </template>
     </ms-aside-container>
     <ms-main-container>
       <el-tabs v-model="activeName" @tab-click="addTab" @tab-remove="closeConfirm">
diff --git a/api-test/frontend/src/business/automation/scenario/ImportApiScenario.vue b/api-test/frontend/src/business/automation/scenario/ImportApiScenario.vue
index 346560d0a4..4f116cbaad 100644
--- a/api-test/frontend/src/business/automation/scenario/ImportApiScenario.vue
+++ b/api-test/frontend/src/business/automation/scenario/ImportApiScenario.vue
@@ -1,6 +1,6 @@
 <template>
   <ms-container>
-    <ms-aside-container>
+    <ms-aside-container pageKey="API_SCENARIO">
       <ms-api-scenario-module
         @selectModule="selectModule"
         @getApiModuleTree="initTree"
diff --git a/api-test/frontend/src/business/automation/scenario/api/ApiRelevance.vue b/api-test/frontend/src/business/automation/scenario/api/ApiRelevance.vue
index e6156ec228..90b4e2d306 100644
--- a/api-test/frontend/src/business/automation/scenario/api/ApiRelevance.vue
+++ b/api-test/frontend/src/business/automation/scenario/api/ApiRelevance.vue
@@ -1,9 +1,9 @@
 <template>
   <test-case-relevance-base
-      :is-across-space="isAcrossSpace"
-      @setProject="setProject"
-      :dialog-title="$t('api_test.definition.api_import')"
-      ref="baseRelevance">
+    :is-across-space="isAcrossSpace"
+    @setProject="setProject"
+    :dialog-title="$t('api_test.definition.api_import')"
+    ref="baseRelevance">
     <template v-slot:aside>
       <ms-api-module
         class="node-tree"
@@ -18,60 +18,60 @@
     </template>
 
     <scenario-relevance-api-list
-        v-if="isApiListEnable"
-        :project-id="projectId"
-        :version-filters="versionFilters"
-        :current-version="currentVersion"
-        :current-protocol="currentProtocol"
-        :select-node-ids="selectNodeIds"
-        :is-api-list-enable="isApiListEnable"
-        @isApiListEnableChange="isApiListEnableChange"
-        @selectCountChange="setSelectCounts"
-        ref="apiList">
+      v-if="isApiListEnable"
+      :project-id="projectId"
+      :version-filters="versionFilters"
+      :current-version="currentVersion"
+      :current-protocol="currentProtocol"
+      :select-node-ids="selectNodeIds"
+      :is-api-list-enable="isApiListEnable"
+      @isApiListEnableChange="isApiListEnableChange"
+      @selectCountChange="setSelectCounts"
+      ref="apiList">
       <template v-slot:version>
         <mx-version-select
-            v-xpack
-            :project-id="projectId"
-            :default-version="currentVersion"
-            @changeVersion="currentVersionChange"/>
+          v-xpack
+          :project-id="projectId"
+          :default-version="currentVersion"
+          @changeVersion="currentVersionChange" />
       </template>
     </scenario-relevance-api-list>
 
     <scenario-relevance-case-list
-        v-if="!isApiListEnable"
-        :project-id="projectId"
-        :version-filters="versionFilters"
-        :current-version="currentVersion"
-        :current-protocol="currentProtocol"
-        :select-node-ids="selectNodeIds"
-        :is-api-list-enable="isApiListEnable"
-        @isApiListEnableChange="isApiListEnableChange"
-        @selectCountChange="setSelectCounts"
-        ref="apiCaseList">
+      v-if="!isApiListEnable"
+      :project-id="projectId"
+      :version-filters="versionFilters"
+      :current-version="currentVersion"
+      :current-protocol="currentProtocol"
+      :select-node-ids="selectNodeIds"
+      :is-api-list-enable="isApiListEnable"
+      @isApiListEnableChange="isApiListEnableChange"
+      @selectCountChange="setSelectCounts"
+      ref="apiCaseList">
       <template v-slot:version>
         <mx-version-select
-            v-xpack
-            :project-id="projectId"
-            :default-version="currentVersion"
-            @changeVersion="currentVersionChange"/>
+          v-xpack
+          :project-id="projectId"
+          :default-version="currentVersion"
+          @changeVersion="currentVersionChange" />
       </template>
     </scenario-relevance-case-list>
 
     <template v-slot:headerBtn>
       <!--  显示数量    -->
-      <table-select-count-bar :count="selectCounts" style="float: left; margin: 5px"/>
+      <table-select-count-bar :count="selectCounts" style="float: left; margin: 5px" />
 
-      <el-button size="mini" icon="el-icon-refresh" @click="refreshData"/>
+      <el-button size="mini" icon="el-icon-refresh" @click="refreshData" />
       <el-button type="primary" @click="copy" :loading="buttonIsWorking" @keydown.enter.native.prevent size="mini">
         {{ $t('commons.copy') }}
       </el-button>
       <el-button
-          v-if="!isApiListEnable"
-          type="primary"
-          :loading="buttonIsWorking"
-          @click="reference"
-          size="mini"
-          @keydown.enter.native.prevent>
+        v-if="!isApiListEnable"
+        type="primary"
+        :loading="buttonIsWorking"
+        @click="reference"
+        size="mini"
+        @keydown.enter.native.prevent>
         {{ $t('api_test.scenario.reference') }}
       </el-button>
     </template>
@@ -79,9 +79,9 @@
 </template>
 
 <script>
-import {getApiCaseWithBLOBs} from '@/api/api-test-case';
-import {apiListBatch} from '@/api/definition';
-import {getProjectVersions} from '@/api/xpack';
+import { getApiCaseWithBLOBs } from '@/api/api-test-case';
+import { apiListBatch } from '@/api/definition';
+import { getProjectVersions } from '@/api/xpack';
 import ScenarioRelevanceCaseList from './RelevanceCaseList';
 import MsApiModule from '../../../definition/components/module/ApiModule';
 import MsContainer from 'metersphere-frontend/src/components/MsContainer';
@@ -90,9 +90,9 @@ import MsMainContainer from 'metersphere-frontend/src/components/MsMainContainer
 import ScenarioRelevanceApiList from './RelevanceApiList';
 import RelevanceDialog from '@/business/commons/RelevanceDialog';
 import TestCaseRelevanceBase from '@/business/commons/TestCaseRelevanceBase';
-import {hasLicense} from 'metersphere-frontend/src/utils/permission';
+import { hasLicense } from 'metersphere-frontend/src/utils/permission';
 import TableSelectCountBar from '@/business/automation/scenario/api/TableSelectCountBar';
-import {operationConfirm} from 'metersphere-frontend/src/utils';
+import { operationConfirm } from 'metersphere-frontend/src/utils';
 
 export default {
   name: 'ApiRelevance',
@@ -166,15 +166,15 @@ export default {
           } else {
             if (params.condition.selectAll) {
               operationConfirm(
-                  this,
-                  this.$t('automation.scenario_step_ref_message') + '？',
-                  () => {
-                    this.$emit('save', apis, 'API', reference);
-                    this.$refs.baseRelevance.close();
-                  },
-                  () => {
-                    this.buttonIsWorking = false;
-                  }
+                this,
+                this.$t('automation.scenario_step_ref_message') + '？',
+                () => {
+                  this.$emit('save', apis, 'API', reference);
+                  this.$refs.baseRelevance.close();
+                },
+                () => {
+                  this.buttonIsWorking = false;
+                }
               );
             } else {
               this.$emit('save', apis, 'API', reference);
@@ -192,15 +192,15 @@ export default {
           } else {
             if (this.$refs.apiCaseList.condition.selectAll) {
               operationConfirm(
-                  this,
-                  this.$t('automation.scenario_step_ref_message') + '？',
-                  () => {
-                    this.$emit('save', apiCases, 'CASE', reference);
-                    this.$refs.baseRelevance.close();
-                  },
-                  () => {
-                    this.buttonIsWorking = false;
-                  }
+                this,
+                this.$t('automation.scenario_step_ref_message') + '？',
+                () => {
+                  this.$emit('save', apiCases, 'CASE', reference);
+                  this.$refs.baseRelevance.close();
+                },
+                () => {
+                  this.buttonIsWorking = false;
+                }
               );
             } else {
               this.$emit('save', apiCases, 'CASE', reference);
@@ -258,13 +258,13 @@ export default {
         getProjectVersions(this.projectId).then((response) => {
           if (currentVersion) {
             this.versionFilters = response.data
-                .filter((u) => u.id === currentVersion)
-                .map((u) => {
-                  return {text: u.name, value: u.id};
-                });
+              .filter((u) => u.id === currentVersion)
+              .map((u) => {
+                return { text: u.name, value: u.id };
+              });
           } else {
             this.versionFilters = response.data.map((u) => {
-              return {text: u.name, value: u.id};
+              return { text: u.name, value: u.id };
             });
           }
         });
diff --git a/api-test/frontend/src/business/definition/ApiDefinition.vue b/api-test/frontend/src/business/definition/ApiDefinition.vue
index 58a3c3d86a..a45143542c 100644
--- a/api-test/frontend/src/business/definition/ApiDefinition.vue
+++ b/api-test/frontend/src/business/definition/ApiDefinition.vue
@@ -1,27 +1,29 @@
 <template>
   <div>
     <ms-container v-if="renderComponent">
-      <ms-aside-container v-show="isAsideHidden">
-        <ms-api-module
-          :show-operator="true"
-          :default-protocol="defaultProtocol"
-          :select-default-protocol="isSelectDefaultProtocol"
-          @nodeSelectEvent="nodeChange"
-          @protocolChange="handleProtocolChange"
-          @refreshTable="refresh"
-          @exportAPI="exportAPI"
-          @debug="debug"
-          @saveAsEdit="editApi"
-          @setModuleOptions="setModuleOptions"
-          @setNodeTree="setNodeTree"
-          @enableTrash="enableTrash"
-          @schedule="handleTabsEdit($t('api_test.api_import.timing_synchronization'), 'SCHEDULE')"
-          :type="'edit'"
-          page-source="definition"
-          :is-trash-data="trashEnable"
-          :total="total"
-          :current-version="currentVersion"
-          ref="nodeTree" />
+      <ms-aside-container v-show="isAsideHidden" pageKey="API_DEFINITION">
+        <template #default>
+          <ms-api-module
+            :show-operator="true"
+            :default-protocol="defaultProtocol"
+            :select-default-protocol="isSelectDefaultProtocol"
+            @nodeSelectEvent="nodeChange"
+            @protocolChange="handleProtocolChange"
+            @refreshTable="refresh"
+            @exportAPI="exportAPI"
+            @debug="debug"
+            @saveAsEdit="editApi"
+            @setModuleOptions="setModuleOptions"
+            @setNodeTree="setNodeTree"
+            @enableTrash="enableTrash"
+            @schedule="handleTabsEdit($t('api_test.api_import.timing_synchronization'), 'SCHEDULE')"
+            :type="'edit'"
+            page-source="definition"
+            :is-trash-data="trashEnable"
+            :total="total"
+            :current-version="currentVersion"
+            ref="nodeTree" />
+        </template>
       </ms-aside-container>
 
       <ms-main-container>
@@ -261,9 +263,9 @@
   </div>
 </template>
 <script>
-import {createDefinitionEnv, getDefinitionById, getDefinitionEnv} from '@/api/definition';
-import {getProjectConfig} from '@/api/project';
-import {getApiModuleByProjectIdAndProtocol, trashCount} from '@/api/definition-module';
+import { createDefinitionEnv, getDefinitionById, getDefinitionEnv } from '@/api/definition';
+import { getProjectConfig } from '@/api/project';
+import { getApiModuleByProjectIdAndProtocol, trashCount } from '@/api/definition-module';
 import MsApiList from './components/list/ApiList';
 import MsContainer from 'metersphere-frontend/src/components/MsContainer';
 import MsMainContainer from 'metersphere-frontend/src/components/MsMainContainer';
@@ -277,9 +279,9 @@ import MsRunTestHttpPage from './components/runtest/RunTestHTTPPage';
 import MsRunTestTcpPage from './components/runtest/RunTestTCPPage';
 import MsRunTestSqlPage from './components/runtest/RunTestSQLPage';
 import MsRunTestDubboPage from './components/runtest/RunTestDubboPage';
-import {getCurrentProjectID, getCurrentUser, getCurrentUserId} from 'metersphere-frontend/src/utils/token';
-import {hasPermission} from 'metersphere-frontend/src/utils/permission';
-import {getUUID} from 'metersphere-frontend/src/utils';
+import { getCurrentProjectID, getCurrentUser, getCurrentUserId } from 'metersphere-frontend/src/utils/token';
+import { hasPermission } from 'metersphere-frontend/src/utils/permission';
+import { getUUID } from 'metersphere-frontend/src/utils';
 import MsApiModule from './components/module/ApiModule';
 import ApiCaseSimpleList from './components/list/ApiCaseSimpleList';
 import ApiDocumentsPage from '@/business/definition/components/list/ApiDocumentsPage';
@@ -288,12 +290,12 @@ import MsTabButton from '@/business/commons/MsTabs';
 import ApiSchedule from '@/business/definition/components/import/ApiSchedule';
 import MsEditCompleteContainer from './components/EditCompleteContainer';
 import MsEnvironmentSelect from './components/case/MsEnvironmentSelect';
-import {PROJECT_ID, WORKSPACE_ID} from 'metersphere-frontend/src/utils/constants';
-import {useApiStore} from '@/store';
-import {buildTree} from 'metersphere-frontend/src/model/NodeTree';
-import {createMockConfig, getMockApiParams, mockExpectConfig} from '@/api/api-mock';
+import { PROJECT_ID, WORKSPACE_ID } from 'metersphere-frontend/src/utils/constants';
+import { useApiStore } from '@/store';
+import { buildTree } from 'metersphere-frontend/src/model/NodeTree';
+import { createMockConfig, getMockApiParams, mockExpectConfig } from '@/api/api-mock';
 import MockEditDrawer from '@/business/definition/components/mock/MockEditDrawer';
-import {getUserDefaultApiType} from "metersphere-frontend/src/api/environment";
+import { getUserDefaultApiType } from 'metersphere-frontend/src/api/environment';
 
 const store = useApiStore();
 export default {
@@ -482,11 +484,11 @@ export default {
     },
   },
   beforeCreate() {
-    getUserDefaultApiType().then(response => {
+    getUserDefaultApiType().then((response) => {
       if (!this.currentProtocol) {
         this.currentProtocol = response.data;
       }
-    })
+    });
   },
   created() {
     let routeParamObj = this.$route.params;
@@ -690,10 +692,10 @@ export default {
       this.handleTabsEdit(this.$t('api_test.definition.request.title'), e, api);
     },
     _getCurrentUserId() {
-      const {id, userGroups} = getCurrentUser();
+      const { id, userGroups } = getCurrentUser();
       if (userGroups) {
         // 是否是当前项目下的成员
-        let index = userGroups.findIndex(ug => ug.sourceId === getCurrentProjectID());
+        let index = userGroups.findIndex((ug) => ug.sourceId === getCurrentProjectID());
         if (index !== -1) {
           return id;
         }
diff --git a/api-test/frontend/src/business/definition/components/ApiVariableAdvance.vue b/api-test/frontend/src/business/definition/components/ApiVariableAdvance.vue
index 5fefedde97..b884bd37d8 100644
--- a/api-test/frontend/src/business/definition/components/ApiVariableAdvance.vue
+++ b/api-test/frontend/src/business/definition/components/ApiVariableAdvance.vue
@@ -109,7 +109,7 @@
       <!--前置返回-->
       <el-tab-pane :label="$t('api_test.definition.request.pre_return')" v-if="scenarioDefinition != undefined">
         <ms-container :class="{ 'maximize-container': !asideHidden }" v-outside-click="outsideClick">
-          <ms-aside-container @setAsideHidden="setAsideHidden" style="padding-top: 0px">
+          <ms-aside-container @setAsideHidden="setAsideHidden" style="padding-top: 0px" pageKey="API_VARIABLE_ADVANCE">
             <div v-loading="loading" v-show="!asideHidden">
               <el-tree
                 node-key="resourceId"
diff --git a/framework/sdk-parent/frontend/src/components/MsAsideContainer.vue b/framework/sdk-parent/frontend/src/components/MsAsideContainer.vue
index e57ca14baf..252b9d0264 100644
--- a/framework/sdk-parent/frontend/src/components/MsAsideContainer.vue
+++ b/framework/sdk-parent/frontend/src/components/MsAsideContainer.vue
@@ -1,76 +1,87 @@
 <template>
-  <el-aside :width="width" class="ms-aside-container"
-            :id="id"
-            :style="{
-              'margin-left': !asideHidden ? 0 : '-' + width,
-              'min-width': minWidth + 'px',
-              'max-width': maxWidth + 'px',
-              'height': calHeight,
-             }">
-    <div v-if="enableAsideHidden" class="hiddenBottom" :style="{'top': hiddenBottomTop ? hiddenBottomTop : 0}" @click="asideHidden = !asideHidden">
-      <i v-if="!asideHidden" class="el-icon-arrow-left"/>
-      <i v-if="asideHidden" class="el-icon-arrow-right"/>
+  <el-aside
+    :width="asideHidden ? '0' : defaultWidth"
+    class="ms-aside-container"
+    :id="id"
+    :style="{ 'min-width': minWidth, 'max-width': maxWidth }"
+  >
+    <div
+      v-if="enableAsideHidden"
+      class="hiddenBottom"
+      :style="{ top: hiddenBottomTop ? hiddenBottomTop : 0 }"
+      @click="asideHidden = !asideHidden"
+    >
+      <i v-if="!asideHidden" class="el-icon-arrow-left" />
+      <i v-if="asideHidden" class="el-icon-arrow-right" />
     </div>
-    <div style="overflow: scroll" class="ms-aside-node-tree" :style="{'height': containerCalHeight }">
+    <div
+      style="overflow: scroll"
+      class="ms-aside-node-tree"
+      :style="{ height: containerCalHeight }"
+    >
       <slot></slot>
     </div>
-    <ms-horizontal-drag-bar v-if="draggable"/>
+    <ms-horizontal-drag-bar v-if="draggable" />
   </el-aside>
 </template>
 
 <script>
 import MsHorizontalDragBar from "./dragbar/MsLeft2RightDragBar";
-import {getUUID} from "../utils";
-import {boolean} from "../../public/js/dev/mock";
+import { getUUID } from "../utils";
 
 export default {
   name: "MsAsideContainer",
-  components: {MsHorizontalDragBar},
+  components: { MsHorizontalDragBar },
   props: {
-    width: {
-      type: String,
-      default: '300px'
-    },
     enableAsideHidden: {
       type: Boolean,
-      default: true
+      default: true,
+    },
+    width: {
+      type: String,
+      default: "300px",
     },
     minWidth: {
       type: String,
-      default: null
+      default: null,
     },
     maxWidth: {
       type: String,
-      default: null
+      default: null,
     },
     height: {
       type: String,
-      default: null
+      default: null,
     },
     enableAutoHeight: {
       type: Boolean,
-      default: false
+      default: false,
     },
     defaultHiddenBottomTop: {
       type: Number,
-      default: null
+      default: null,
+    },
+    pageKey: {
+      type: String,
+      default: null,
     },
     draggable: {
       type: Boolean,
       default: true,
-    }
+    },
   },
   watch: {
     asideHidden() {
-      this.$emit('setAsideHidden', this.asideHidden);
-    }
+      this.$emit("setAsideHidden", this.asideHidden);
+    },
   },
   computed: {
-    calHeight() {
-      return this.height ? (this.height + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 50px)')
-    },
     containerCalHeight() {
-      return this.height ? (this.height - 30 + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 62px)')
+      return this.height
+        ? this.height - 30 + "px"
+        : this.enableAutoHeight
+        ? null
+        : "calc(100vh - 62px)";
     },
   },
   created() {
@@ -80,37 +91,76 @@ export default {
     this.$nextTick(() => {
       this.setHiddenBottomTop();
     });
+    if (this.pageKey) {
+      const rememberKey = "WIDTH_" + this.pageKey;
+      const rememberWidth = localStorage.getItem(rememberKey);
+
+      if (rememberWidth) {
+        // 获取上次记住的宽度
+        this.defaultWidth = rememberWidth;
+      } else {
+        this.defaultWidth = this.width;
+      }
+
+      const element = document.getElementById(this.id);
+      const MutationObserver =
+        window.MutationObserver ||
+        window.WebKitMutationObserver ||
+        window.MozMutationObserver;
+      this.observer = new MutationObserver(() => {
+        // 监听元素的宽度变化，保存在 localStorage 中
+        const width = getComputedStyle(element).getPropertyValue("width");
+        if (!this.asideHidden) {
+          localStorage.setItem(rememberKey, width);
+          // 这里宽度变化设置下默认宽度，否则页面有更新，会导致宽度变回到原来的默认宽度
+          this.defaultWidth = width;
+        }
+      });
+      this.observer.observe(element, {
+        attributes: true,
+        attributeFilter: ["style"],
+        attributeOldValue: true,
+      });
+    }
+  },
+  beforeDestroyed() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer.takeRecords();
+      this.observer = null;
+    }
   },
   data() {
     return {
       asideHidden: false,
       hiddenBottomTop: null,
-      id: null
-    }
+      id: null,
+      defaultWidth: this.width,
+      observer: null,
+    };
   },
   methods: {
     setHiddenBottomTop() {
       if (this.defaultHiddenBottomTop) {
-        this.hiddenBottomTop = this.defaultHiddenBottomTop + 'px';
+        this.hiddenBottomTop = this.defaultHiddenBottomTop + "px";
       } else {
-        let e = document.getElementById(this.id);
+        const e = document.getElementById(this.id);
         if (!e) return;
         // 默认在 3/1 的位置
-        this.hiddenBottomTop = e.clientHeight / 3 + 'px';
+        this.hiddenBottomTop = e.clientHeight / 3 + "px";
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 .ms-aside-container {
-  border: 1px solid #E6E6E6;
+  border: 1px solid #e6e6e6;
   padding: 10px;
   border-radius: 2px;
   box-sizing: border-box;
-  background-color: #FFF;
+  background-color: #fff;
   /*height: calc(100vh - 80px);*/
   border-right: 0px;
   position: relative;
@@ -148,5 +198,4 @@ export default {
   margin-left: 0;
   color: white;
 }
-
 </style>
diff --git a/project-management/frontend/src/business/menu/file/FileManage.vue b/project-management/frontend/src/business/menu/file/FileManage.vue
index 4d2d528cdf..1f606d01c9 100644
--- a/project-management/frontend/src/business/menu/file/FileManage.vue
+++ b/project-management/frontend/src/business/menu/file/FileManage.vue
@@ -1,6 +1,6 @@
 <template>
   <ms-container>
-    <ms-aside-container>
+    <ms-aside-container pageKey="FILE_MANAGE">
       <ms-file-module @nodeSelectEvent="change" @myFile="myFile" @setNodeTree="setNodeTree" ref="module"/>
     </ms-aside-container>
     <ms-main-container>
diff --git a/system-setting/frontend/src/business/Setting.vue b/system-setting/frontend/src/business/Setting.vue
index 1b877a335b..6721c69350 100644
--- a/system-setting/frontend/src/business/Setting.vue
+++ b/system-setting/frontend/src/business/Setting.vue
@@ -1,6 +1,6 @@
 <template>
   <ms-container :is-show-warning="isShowWarning && isSystemGroup">
-    <ms-aside-container :enable-aside-hidden="enableAsideHidden" :width="enableAsideHidden ? '300px' : '0px'">
+    <ms-aside-container pageKey="SETTING" :enable-aside-hidden="enableAsideHidden" :width="enableAsideHidden ? '300px' : '0px'">
       <ms-setting-menu/>
     </ms-aside-container>
     <ms-main-container>
diff --git a/test-track/frontend/src/business/case/components/common/CaseRelevanceSideDialog.vue b/test-track/frontend/src/business/case/components/common/CaseRelevanceSideDialog.vue
index 765d981a9f..802e2cd6f6 100644
--- a/test-track/frontend/src/business/case/components/common/CaseRelevanceSideDialog.vue
+++ b/test-track/frontend/src/business/case/components/common/CaseRelevanceSideDialog.vue
@@ -48,14 +48,17 @@
       <div class="content-box">
         <div class="body-wrap">
           <ms-aside-container
-            :min-width="'350'"
-            :max-width="'800'"
+            min-width="350px"
+            max-width="800px"
             :enable-aside-hidden="false"
             :default-hidden-bottom-top="200"
             :enable-auto-height="true"
+            pageKey="CASE_RELEVANCE"
           >
             <div class="aside-wrap">
-              <span v-if="isAcrossSpace" class="menu-title">{{ $t("commons.space") }}:</span>
+              <span v-if="isAcrossSpace" class="menu-title"
+                >{{ $t("commons.space") }}:</span
+              >
               <el-select
                 v-if="isAcrossSpace"
                 filterable
@@ -92,8 +95,13 @@
             <div class="options">
               <div class="options-btn">
                 <div class="check-row" v-if="selectCounts > 0">
-                  <div class="label">{{$t('case.selected')}} {{ selectCounts }} {{$t('case.strip')}}</div>
-                  <div class="clear" @click="clearSelect">{{$t('case.clear')}}</div>
+                  <div class="label">
+                    {{ $t("case.selected") }} {{ selectCounts }}
+                    {{ $t("case.strip") }}
+                  </div>
+                  <div class="clear" @click="clearSelect">
+                    {{ $t("case.clear") }}
+                  </div>
                 </div>
                 <div class="cancel">
                   <el-button size="small" @click="visible = false">{{
@@ -139,7 +147,7 @@ export default {
     SelectMenu,
     MsDialogHeader,
     TableSelectCountBar,
-    MsAsideContainer
+    MsAsideContainer,
   },
   data() {
     return {
diff --git a/test-track/frontend/src/business/plan/view/comonents/report/detail/component/ApiCaseFailureResult.vue b/test-track/frontend/src/business/plan/view/comonents/report/detail/component/ApiCaseFailureResult.vue
index f0c2bd747e..e12062c138 100644
--- a/test-track/frontend/src/business/plan/view/comonents/report/detail/component/ApiCaseFailureResult.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/report/detail/component/ApiCaseFailureResult.vue
@@ -4,6 +4,7 @@
         width="500px"
         :default-hidden-bottom-top="200"
         :enable-auto-height="true"
+        pageKey="API_CASE_FAILURE_RESULT"
     >
       <el-card>
         <el-scrollbar>
diff --git a/test-track/frontend/src/business/plan/view/comonents/report/detail/component/ApiScenarioFailureResult.vue b/test-track/frontend/src/business/plan/view/comonents/report/detail/component/ApiScenarioFailureResult.vue
index ac82eae30c..e0753a59eb 100644
--- a/test-track/frontend/src/business/plan/view/comonents/report/detail/component/ApiScenarioFailureResult.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/report/detail/component/ApiScenarioFailureResult.vue
@@ -4,6 +4,7 @@
       width="500px"
       :default-hidden-bottom-top="200"
       :enable-auto-height="true"
+      pageKey="API_SCENARIO_FAILURE_RESULT"
     >
       <el-card>
         <el-scrollbar>
diff --git a/test-track/frontend/src/business/plan/view/comonents/report/detail/component/LoadAllResult.vue b/test-track/frontend/src/business/plan/view/comonents/report/detail/component/LoadAllResult.vue
index d7d09d35bd..6fdab7d965 100644
--- a/test-track/frontend/src/business/plan/view/comonents/report/detail/component/LoadAllResult.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/report/detail/component/LoadAllResult.vue
@@ -1,49 +1,61 @@
 <template>
   <el-container>
-    <ms-aside-container width="500px" :default-hidden-bottom-top="200" :enable-auto-height="true">
-      <load-failure-result :class="{'init-height': !showResponse}"
-                           :is-db="isDb"
-                           :is-all="isAll"
-                           :share-id="shareId"
-                           :is-share="isShare"
-                           :is-template="isTemplate"
-                           :report="report"
-                           :plan-id="planId"
-                           @rowClick="getReport"
-                           @setSize="setAllSize"/>
+    <ms-aside-container
+      width="500px"
+      :default-hidden-bottom-top="200"
+      :enable-auto-height="true"
+      pageKey="LOAD_ALL_RESULT"
+    >
+      <load-failure-result
+        :class="{ 'init-height': !showResponse }"
+        :is-db="isDb"
+        :is-all="isAll"
+        :share-id="shareId"
+        :is-share="isShare"
+        :is-template="isTemplate"
+        :report="report"
+        :plan-id="planId"
+        @rowClick="getReport"
+        @setSize="setAllSize"
+      />
     </ms-aside-container>
     <ms-main-container>
-
       <div v-if="showResponse">
         <div v-if="!isTemplate && reportShow">
-          <micro-app v-if="isShare"
-                     route-name="sharePerReportView"
-                     service="performance"
-                     :route-params="{
-                       reportId,
-                       isShare,
-                       shareId,
-                       isPlanReport: true,
-                     }"/>
-          <micro-app v-else
-                     route-name="perReportView"
-                     service="performance"
-                     :route-params="{
-                        reportId,
-                      }"/>
+          <micro-app
+            v-if="isShare"
+            route-name="sharePerReportView"
+            service="performance"
+            :route-params="{
+              reportId,
+              isShare,
+              shareId,
+              isPlanReport: true,
+            }"
+          />
+          <micro-app
+            v-else
+            route-name="perReportView"
+            service="performance"
+            :route-params="{
+              reportId,
+            }"
+          />
         </div>
 
-
-        <load-case-report-view v-else
-                               :is-plan-report="true"
-                               :share-id="shareId"
-                               :is-share="isShare"
-                               :plan-report-template="response"
-                               :report-id="reportId"
-                               ref="loadCaseReportView"/>
-
+        <load-case-report-view
+          v-else
+          :is-plan-report="true"
+          :share-id="shareId"
+          :is-share="isShare"
+          :plan-report-template="response"
+          :report-id="reportId"
+          ref="loadCaseReportView"
+        />
+      </div>
+      <div class="empty" v-show="!showResponse">
+        {{ $t("test_track.plan.load_case.content_empty") }}
       </div>
-      <div class="empty" v-show="!showResponse">{{ $t('test_track.plan.load_case.content_empty') }}</div>
     </ms-main-container>
   </el-container>
 </template>
@@ -54,7 +66,10 @@ import LoadCaseReportView from "../load/LoadCaseReportView";
 import TypeTableItem from "../../../../../../common/tableItems/planview/TypeTableItem";
 import MethodTableItem from "../../../../../../common/tableItems/planview/MethodTableItem";
 import StatusTableItem from "../../../../../../common/tableItems/planview/StatusTableItem";
-import {checkoutLoadReport, shareCheckoutLoadReport} from "@/api/remote/plan/test-plan";
+import {
+  checkoutLoadReport,
+  shareCheckoutLoadReport,
+} from "@/api/remote/plan/test-plan";
 import LoadFailureResult from "@/business/plan/view/comonents/report/detail/component/LoadFailureResult";
 
 import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
@@ -66,9 +81,12 @@ export default {
   components: {
     MsMainContainer,
     MsAsideContainer,
-    LoadFailureResult, StatusTableItem, MethodTableItem, TypeTableItem,
+    LoadFailureResult,
+    StatusTableItem,
+    MethodTableItem,
+    TypeTableItem,
     LoadCaseReportView,
-    MicroApp
+    MicroApp,
   },
   props: {
     planId: String,
@@ -79,8 +97,8 @@ export default {
     isDb: Boolean,
     isAll: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -88,8 +106,8 @@ export default {
       showResponse: false,
       reportId: "",
       response: null,
-      reportShow: true
-    }
+      reportShow: true,
+    };
   },
   methods: {
     getReport(row) {
@@ -103,28 +121,25 @@ export default {
       } else {
         let param = {
           testPlanLoadCaseId: row.id,
-          reportId: row.loadReportId
-        }
+          reportId: row.loadReportId,
+        };
         if (!row.loadReportId) {
           this.showResponse = false;
           return;
         }
         if (this.isShare) {
-          shareCheckoutLoadReport(this.shareId, param)
-              .then(r => {
-                this.openReport(r.data, row.loadReportId);
-              });
+          shareCheckoutLoadReport(this.shareId, param).then((r) => {
+            this.openReport(r.data, row.loadReportId);
+          });
         } else {
-          checkoutLoadReport(param)
-              .then(r => {
-                this.openReport(r.data, row.loadReportId);
-              });
+          checkoutLoadReport(param).then((r) => {
+            this.openReport(r.data, row.loadReportId);
+          });
         }
       }
     },
     openReport(exist, loadReportId) {
       if (exist) {
-
         if (this.reportId === loadReportId) {
           return;
         }
@@ -137,14 +152,16 @@ export default {
         });
       } else {
         this.showResponse = false;
-        this.$message.warning(this.$t('test_track.plan.load_case.report_not_found'));
+        this.$message.warning(
+          this.$t("test_track.plan.load_case.report_not_found")
+        );
       }
     },
     setAllSize(size) {
-      this.$emit('setSize', size);
-    }
-  }
-}
+      this.$emit("setSize", size);
+    },
+  },
+};
 </script>
 
 <style scoped>
diff --git a/test-track/frontend/src/business/plan/view/comonents/report/detail/component/UiScenarioResult.vue b/test-track/frontend/src/business/plan/view/comonents/report/detail/component/UiScenarioResult.vue
index b9530f785a..49d2bf6255 100644
--- a/test-track/frontend/src/business/plan/view/comonents/report/detail/component/UiScenarioResult.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/report/detail/component/UiScenarioResult.vue
@@ -4,6 +4,7 @@
       width="500px"
       :default-hidden-bottom-top="200"
       :enable-auto-height="true"
+      pageKey="UI_SCENARIO_FAILURE_RESULT"
     >
       <el-card>
         <el-scrollbar>
@@ -45,7 +46,11 @@
               prop="lastResult"
             >
               <template v-slot:default="{ row }">
-                <ms-test-plan-api-status :status="row.lastResult === 'UnExecute' ? 'PENDING' : row.lastResult" />
+                <ms-test-plan-api-status
+                  :status="
+                    row.lastResult === 'UnExecute' ? 'PENDING' : row.lastResult
+                  "
+                />
               </template>
             </ms-table-column>
           </ms-table>
@@ -56,7 +61,7 @@
       <div v-if="showResponse">
         <micro-app
           v-show="!isTemplate"
-          v-if="reportId!==null"
+          v-if="reportId !== null"
           service="ui"
           route-name="ApiReportView"
           :route-params="getRouteParams()"
@@ -134,7 +139,6 @@ export default {
         Running: "Running",
         UnExecute: "Prepare",
       },
-
     };
   },
   mounted() {
diff --git a/test-track/frontend/src/business/review/view/TestCaseReviewView.vue b/test-track/frontend/src/business/review/view/TestCaseReviewView.vue
index 1ba203f157..602be2e830 100644
--- a/test-track/frontend/src/business/review/view/TestCaseReviewView.vue
+++ b/test-track/frontend/src/business/review/view/TestCaseReviewView.vue
@@ -6,26 +6,36 @@
           :data="testReviews"
           :current-data="currentReview"
           :title="$t('test_track.review_view.review')"
-          @dataChange="changeReview"/>
+          @dataChange="changeReview"
+        />
       </template>
       <template v-slot:menu>
-        <el-menu v-if="isMenuShow" :active-text-color="color"
-                 class="el-menu-demo header-menu" mode="horizontal" @select="handleSelect"
-                 :default-active="activeIndex">
-          <el-menu-item index="functional">{{ $t('test_track.functional_test_case') }}</el-menu-item>
+        <el-menu
+          v-if="isMenuShow"
+          :active-text-color="color"
+          class="el-menu-demo header-menu"
+          mode="horizontal"
+          @select="handleSelect"
+          :default-active="activeIndex"
+        >
+          <el-menu-item index="functional">{{
+            $t("test_track.functional_test_case")
+          }}</el-menu-item>
         </el-menu>
       </template>
     </ms-test-plan-header-bar>
-    <test-review-function v-if="activeIndex === 'functional'" :redirectCharType="redirectCharType"
-                          :clickType="clickType" :review-id="reviewId" :version-enable="versionEnable"
-                          ref="testReviewFunction"/>
+    <test-review-function
+      v-if="activeIndex === 'functional'"
+      :redirectCharType="redirectCharType"
+      :clickType="clickType"
+      :review-id="reviewId"
+      :version-enable="versionEnable"
+      ref="testReviewFunction"
+    />
   </div>
-
 </template>
 
 <script>
-
-
 import MsMainContainer from "metersphere-frontend/src/components/MsMainContainer";
 import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
 import MsContainer from "metersphere-frontend/src/components/MsContainer";
@@ -34,12 +44,12 @@ import SelectMenu from "../../common/SelectMenu";
 import TestReviewRelevance from "./components/TestReviewRelevance";
 import MsTestPlanHeaderBar from "./components/head/TestPlanHeaderBar";
 import TestReviewFunction from "@/business/review/view/components/TestReviewFunction";
-import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
-import {hasLicense} from "metersphere-frontend/src/utils/permission";
-import {PROJECT_ID} from "metersphere-frontend/src/utils/constants";
-import {getTestReviewTestCase, testReviewListAll} from "@/api/test-review";
-import {testCaseNodeListReview} from "@/api/test-case-node";
-import {versionEnableByProjectId} from "@/api/project";
+import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
+import { hasLicense } from "metersphere-frontend/src/utils/permission";
+import { PROJECT_ID } from "metersphere-frontend/src/utils/constants";
+import { getTestReviewTestCase, testReviewListAll } from "@/api/test-review";
+import { testCaseNodeListReview } from "@/api/test-case-node";
+import { versionEnableByProjectId } from "@/api/project";
 
 export default {
   name: "TestCaseReviewView",
@@ -51,7 +61,7 @@ export default {
     MsContainer,
     NodeTree,
     TestReviewRelevance,
-    SelectMenu
+    SelectMenu,
   },
   data() {
     return {
@@ -65,30 +75,30 @@ export default {
       activeIndex: "functional",
       isMenuShow: true,
       //报表跳转过来的参数-通过哪个图表跳转的
-      redirectCharType: '',
+      redirectCharType: "",
       //报表跳转过来的参数-通过哪种数据跳转的
-      clickType: '',
+      clickType: "",
       projectId: null,
       versionEnable: false,
-    }
+    };
   },
   computed: {
     reviewId: function () {
       return this.$route.params.reviewId;
     },
     color: function () {
-      return `var(--primary_color)`
-    }
+      return `var(--primary_color)`;
+    },
   },
   created() {
     let projectId = this.$route.query.projectId;
     if (projectId) {
       sessionStorage.setItem(PROJECT_ID, projectId);
     }
-    this.$EventBus.$on('projectChange', this.handleProjectChange);
+    this.$EventBus.$on("projectChange", this.handleProjectChange);
   },
   destroyed() {
-    this.$EventBus.$off('projectChange', this.handleProjectChange);
+    this.$EventBus.$off("projectChange", this.handleProjectChange);
   },
   mounted() {
     this.initData();
@@ -103,12 +113,12 @@ export default {
     }
   },
   watch: {
-    '$route'(to, from) {
+    $route(to, from) {
       this.openTestCaseEdit(to.path);
     },
     reviewId() {
       this.initData();
-    }
+    },
   },
   activated() {
     this.genRedirectParam();
@@ -117,7 +127,7 @@ export default {
     handleProjectChange() {
       if (this.$route.path.indexOf("track/review") > -1) {
         this.$nextTick(() => {
-          this.$router.push('/track/review/all');
+          this.$router.push("/track/review/all");
         });
       }
     },
@@ -128,9 +138,12 @@ export default {
       this.redirectCharType = this.$route.params.charType;
       this.clickType = this.$route.params.clickType;
       if (this.redirectCharType != "") {
-        if (this.redirectCharType == 'scenario') {
-          this.activeIndex = 'api';
-        } else if (this.redirectCharType != null && this.redirectCharType != '') {
+        if (this.redirectCharType == "scenario") {
+          this.activeIndex = "api";
+        } else if (
+          this.redirectCharType != null &&
+          this.redirectCharType != ""
+        ) {
           this.activeIndex = this.redirectCharType;
         }
       } else {
@@ -146,15 +159,14 @@ export default {
       this.$refs.testReviewRelevance.openTestReviewRelevanceDialog();
     },
     getTestReviews() {
-      testReviewListAll()
-        .then((response) => {
-          this.testReviews = response.data;
-          this.testReviews.forEach(review => {
-            if (this.reviewId && review.id === this.reviewId) {
-              this.currentReview = review;
-            }
-          });
-        })
+      testReviewListAll().then((response) => {
+        this.testReviews = response.data;
+        this.testReviews.forEach((review) => {
+          if (this.reviewId && review.id === this.reviewId) {
+            this.currentReview = review;
+          }
+        });
+      });
     },
     nodeChange(node, nodeIds, pNodes) {
       this.selectNodeIds = nodeIds;
@@ -162,27 +174,25 @@ export default {
     },
     changeReview(review) {
       this.currentReview = review;
-      this.$router.push('/track/review/view/' + review.id);
+      this.$router.push("/track/review/view/" + review.id);
     },
     getNodeTreeByReviewId() {
       if (this.reviewId) {
-        testCaseNodeListReview(this.reviewId)
-          .then((response) => {
-            this.treeNodes = response.data;
-          })
+        testCaseNodeListReview(this.reviewId).then((response) => {
+          this.treeNodes = response.data;
+        });
       }
     },
     openTestCaseEdit(path) {
       if (path.indexOf("/review/view/edit") >= 0) {
         let caseId = this.$route.params.caseId;
-        getTestReviewTestCase(caseId)
-          .then((response) => {
-            let testCase = response.data;
-            if (testCase) {
-              this.$refs.testPlanTestCaseList.handleEdit(testCase);
-              this.$router.push('/track/review/view/' + testCase.reviewId);
-            }
-          })
+        getTestReviewTestCase(caseId).then((response) => {
+          let testCase = response.data;
+          if (testCase) {
+            this.$refs.testPlanTestCaseList.handleEdit(testCase);
+            this.$router.push("/track/review/view/" + testCase.reviewId);
+          }
+        });
       }
     },
     reloadMenu() {
@@ -196,23 +206,21 @@ export default {
         return;
       }
       if (hasLicense()) {
-        versionEnableByProjectId(this.projectId)
-          .then((response) => {
-            this.versionEnable = response.data;
-          })
+        versionEnableByProjectId(this.projectId).then((response) => {
+          this.versionEnable = response.data;
+        });
       }
     },
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
-
 :deep(.ms-main-container) {
   height: calc(100vh - 93px);
 }
 
-:deep(.ms-aside-container ){
+:deep(.ms-aside-container) {
   height: calc(100vh - 93px) !important;
   margin-top: 1px;
 }
diff --git a/test-track/frontend/src/business/review/view/components/TestReviewRelevance.vue b/test-track/frontend/src/business/review/view/components/TestReviewRelevance.vue
index 2bae4596c2..e0e5cdbca4 100644
--- a/test-track/frontend/src/business/review/view/components/TestReviewRelevance.vue
+++ b/test-track/frontend/src/business/review/view/components/TestReviewRelevance.vue
@@ -1,150 +1,188 @@
 <template>
   <div>
-    <el-dialog :title="$t('test_track.review_view.relevance_case')" :visible.sync="dialogFormVisible" @close="close"
-               width="75%"
-               :close-on-click-modal="false"
-               :fullscreen="isFullScreen"
-               top="50px" :destroy-on-close="true"
-               append-to-body>
-
-      <template slot="title" :slot-scope="$t('test_track.review_view.relevance_case')" v-if="!$slots.headerBtn">
-        <ms-dialog-header :title="$t('test_track.review_view.relevance_case')" @cancel="dialogFormVisible = false"
-                          @confirm="saveReviewRelevance"
-                          @fullScreen="fullScreen"
-                          :enable-full-screen="false"
-                          :is-full-screen.sync="isFullScreen">
+    <el-dialog
+      :title="$t('test_track.review_view.relevance_case')"
+      :visible.sync="dialogFormVisible"
+      @close="close"
+      width="75%"
+      :close-on-click-modal="false"
+      :fullscreen="isFullScreen"
+      top="50px"
+      :destroy-on-close="true"
+      append-to-body
+    >
+      <template
+        slot="title"
+        :slot-scope="$t('test_track.review_view.relevance_case')"
+        v-if="!$slots.headerBtn"
+      >
+        <ms-dialog-header
+          :title="$t('test_track.review_view.relevance_case')"
+          @cancel="dialogFormVisible = false"
+          @confirm="saveReviewRelevance"
+          @fullScreen="fullScreen"
+          :enable-full-screen="false"
+          :is-full-screen.sync="isFullScreen"
+        >
           <template #other>
-            <table-select-count-bar :count="selectCounts" style="float: left; margin: 5px;"/>
+            <table-select-count-bar
+              :count="selectCounts"
+              style="float: left; margin: 5px"
+            />
           </template>
         </ms-dialog-header>
       </template>
 
       <el-container class="main-content">
         <ms-aside-container
-            :min-width="'350'"
-            :max-width="'600'"
-            :enable-aside-hidden="false"
-            :default-hidden-bottom-top="200"
-            :enable-auto-height="true"
+          min-width="350px"
+          max-width="600px"
+          :enable-aside-hidden="false"
+          :default-hidden-bottom-top="200"
+          :enable-auto-height="true"
+          pageKey="TEST_REVIEW_RELEVANCE_CASE"
         >
+          >
           <select-menu
-              :data="projects"
-              width="173px"
-              :current-data="currentProject"
-              :title="$t('test_track.switch_project')"
-              @dataChange="changeProject"/>
-          <node-tree class="node-tree"
-                     :all-label="$t('commons.all_label.review')"
-                     v-loading="result.loading"
-                     local-suffix="test_case"
-                     default-label="未规划用例"
-                     @nodeSelectEvent="nodeChange"
-                     :tree-nodes="treeNodes"
-                     ref="nodeTree"/>
+            :data="projects"
+            width="173px"
+            :current-data="currentProject"
+            :title="$t('test_track.switch_project')"
+            @dataChange="changeProject"
+          />
+          <node-tree
+            class="node-tree"
+            :all-label="$t('commons.all_label.review')"
+            v-loading="result.loading"
+            local-suffix="test_case"
+            default-label="未规划用例"
+            @nodeSelectEvent="nodeChange"
+            :tree-nodes="treeNodes"
+            ref="nodeTree"
+          />
         </ms-aside-container>
-        
+
         <el-container>
           <el-main class="case-content">
-            <ms-table-header :tip="$t('review.search_by_id_or_name_or_tag')" :condition.sync="condition" @search="search"
-                             title="" :show-create="false">
+            <ms-table-header
+              :tip="$t('review.search_by_id_or_name_or_tag')"
+              :condition.sync="condition"
+              @search="search"
+              title=""
+              :show-create="false"
+            >
               <template v-slot:searchBarBefore>
-                <version-select v-xpack :project-id="projectId" @changeVersion="changeVersion" margin-right="20"/>
+                <version-select
+                  v-xpack
+                  :project-id="projectId"
+                  @changeVersion="changeVersion"
+                  margin-right="20"
+                />
               </template>
             </ms-table-header>
-            <ms-table :data="testReviews"
-                      @filter-change="filter" row-key="id"
-                      v-loading="result.loading"
-                      :total="total"
-                      :page-size.sync="pageSize"
-                      :screen-height="screenHeight"
-                      @handlePageChange="getReviews"
-                      @refresh="getReviews"
-                      @selectCountChange="setSelectCounts"
-                      :condition="condition"
-                      ref="table">
-
+            <ms-table
+              :data="testReviews"
+              @filter-change="filter"
+              row-key="id"
+              v-loading="result.loading"
+              :total="total"
+              :page-size.sync="pageSize"
+              :screen-height="screenHeight"
+              @handlePageChange="getReviews"
+              @refresh="getReviews"
+              @selectCountChange="setSelectCounts"
+              :condition="condition"
+              ref="table"
+            >
               <el-table-column
-                  v-if="!customNum"
-                  prop="num"
-                  min-width="120"
-                  sortable
-                  :label="$t('commons.id')">
+                v-if="!customNum"
+                prop="num"
+                min-width="120"
+                sortable
+                :label="$t('commons.id')"
+              >
               </el-table-column>
 
               <el-table-column
-                  v-if="customNum"
-                  prop="customNum"
-                  min-width="120"
-                  sortable
-                  :label="$t('commons.id')">
+                v-if="customNum"
+                prop="customNum"
+                min-width="120"
+                sortable
+                :label="$t('commons.id')"
+              >
               </el-table-column>
 
               <el-table-column
-                  prop="name"
-                  :label="$t('test_track.case.name')"
-                  min-width="120"
-                  show-overflow-tooltip>
+                prop="name"
+                :label="$t('test_track.case.name')"
+                min-width="120"
+                show-overflow-tooltip
+              >
                 <template v-slot:default="scope">
                   {{ scope.row.name }}
                 </template>
               </el-table-column>
 
               <el-table-column
-                  v-if="versionEnable"
-                  prop="versionName"
-                  :label="$t('test_track.case.version')"
-                  column-key="versionId"
-                  :filters="versionFilters"
-                  style="width: 100%">
+                v-if="versionEnable"
+                prop="versionName"
+                :label="$t('test_track.case.version')"
+                column-key="versionId"
+                :filters="versionFilters"
+                style="width: 100%"
+              >
                 <template v-slot:default="scope">
                   {{ scope.row.versionName }}
                 </template>
               </el-table-column>
 
               <el-table-column
-                  prop="priority"
-                  :filters="priorityFilters"
-                  column-key="priority"
-                  :label="$t('test_track.case.priority')"
-                  min-width="120"
-                  show-overflow-tooltip>
+                prop="priority"
+                :filters="priorityFilters"
+                column-key="priority"
+                :label="$t('test_track.case.priority')"
+                min-width="120"
+                show-overflow-tooltip
+              >
                 <template v-slot:default="scope">
-                  <priority-table-item :value="scope.row.priority" :priority-options="priorityFilters"/>
+                  <priority-table-item
+                    :value="scope.row.priority"
+                    :priority-options="priorityFilters"
+                  />
                 </template>
               </el-table-column>
 
               <el-table-column
-                  :filters="statusFilters"
-                  column-key="reviewStatus"
-                  :label="$t('test_track.case.status')"
-                  min-width="120"
-                  show-overflow-tooltip>
+                :filters="statusFilters"
+                column-key="reviewStatus"
+                :label="$t('test_track.case.status')"
+                min-width="120"
+                show-overflow-tooltip
+              >
                 <template v-slot:default="scope">
-                  <review-status :value="scope.row.reviewStatus"/>
+                  <review-status :value="scope.row.reviewStatus" />
                 </template>
               </el-table-column>
 
-              <ms-update-time-column/>
-              <ms-create-time-column/>
-
+              <ms-update-time-column />
+              <ms-create-time-column />
             </ms-table>
-            <ms-table-pagination :change="getReviews" :current-page.sync="currentPage" :page-size.sync="pageSize"
-                                 :total="total"/>
-
+            <ms-table-pagination
+              :change="getReviews"
+              :current-page.sync="currentPage"
+              :page-size.sync="pageSize"
+              :total="total"
+            />
           </el-main>
         </el-container>
       </el-container>
-
-
     </el-dialog>
 
-    <switch-project ref="switchProject" @getProjectNode="getProjectNode"/>
+    <switch-project ref="switchProject" @getProjectNode="getProjectNode" />
   </div>
-
 </template>
 
 <script>
-
 import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
 import NodeTree from "metersphere-frontend/src/components/module/MsNodeTree";
 import MsDialogFooter from "metersphere-frontend/src/components/MsDialogFooter";
@@ -154,27 +192,37 @@ import MsTableSearchBar from "metersphere-frontend/src/components/MsTableSearchB
 import MsTableAdvSearchBar from "metersphere-frontend/src/components/search/MsTableAdvSearchBar";
 import MsTableHeader from "metersphere-frontend/src/components/MsTableHeader";
 import SwitchProject from "../../../case/components/SwitchProject";
-import {TEST_REVIEW_RELEVANCE_CASE_CONFIGS} from "metersphere-frontend/src/components/search/search-components";
+import { TEST_REVIEW_RELEVANCE_CASE_CONFIGS } from "metersphere-frontend/src/components/search/search-components";
 import ReviewStatus from "@/business/case/components/ReviewStatus";
-import elTableInfiniteScroll from 'el-table-infinite-scroll';
+import elTableInfiniteScroll from "el-table-infinite-scroll";
 import SelectMenu from "@/business/common/SelectMenu";
-import {hasLicense} from "metersphere-frontend/src/utils/permission";
-import {_filter, initCondition} from "metersphere-frontend/src/utils/tableUtils";
-import {getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId} from "metersphere-frontend/src/utils/token";
+import { hasLicense } from "metersphere-frontend/src/utils/permission";
+import {
+  _filter,
+  initCondition,
+} from "metersphere-frontend/src/utils/tableUtils";
+import {
+  getCurrentProjectID,
+  getCurrentUserId,
+  getCurrentWorkspaceId,
+} from "metersphere-frontend/src/utils/token";
 import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
 import MsDialogHeader from "metersphere-frontend/src/components/MsDialogHeader";
 import MsTable from "metersphere-frontend/src/components/table/MsTable";
 import TableSelectCountBar from "metersphere-frontend/src/components/table/TableSelectCountBar";
 import VersionSelect from "metersphere-frontend/src/components/version/MxVersionSelect";
-import {getTestCaseReviewRelevance, getTestCaseReviewsCasePage} from "@/api/test-review";
-import {testCaseNodeListReviewRelate} from "@/api/test-case-node";
-import {getVersionFilters} from "@/business/utils/sdk-utils";
-import {projectRelated} from "@/api/project";
-import {getTestTemplate} from "@/api/custom-field-template";
-import {initTestCaseConditionComponents} from "@/business/case/test-case";
+import {
+  getTestCaseReviewRelevance,
+  getTestCaseReviewsCasePage,
+} from "@/api/test-review";
+import { testCaseNodeListReviewRelate } from "@/api/test-case-node";
+import { getVersionFilters } from "@/business/utils/sdk-utils";
+import { projectRelated } from "@/api/project";
+import { getTestTemplate } from "@/api/custom-field-template";
+import { initTestCaseConditionComponents } from "@/business/case/test-case";
 import MsCreateTimeColumn from "metersphere-frontend/src/components/table/MsCreateTimeColumn";
 import MsUpdateTimeColumn from "metersphere-frontend/src/components/table/MsUpdateTimeColumn";
-import {getProjectApplicationConfig} from "@/api/project-application";
+import { getProjectApplicationConfig } from "@/api/project-application";
 
 export default {
   name: "TestReviewRelevance",
@@ -191,7 +239,7 @@ export default {
     MsTableHeader,
     SwitchProject,
     ReviewStatus,
-    'VersionSelect': VersionSelect,
+    VersionSelect: VersionSelect,
     MsTablePagination,
     MsDialogHeader,
     MsTable,
@@ -199,11 +247,11 @@ export default {
     MsCreateTimeColumn,
   },
   directives: {
-    'el-table-infinite-scroll': elTableInfiniteScroll
+    "el-table-infinite-scroll": elTableInfiniteScroll,
   },
   data() {
     return {
-      openType: 'relevance',
+      openType: "relevance",
       checked: true,
       result: {},
       currentProject: {},
@@ -215,8 +263,8 @@ export default {
       treeNodes: [],
       selectNodeIds: [],
       selectNodeNames: [],
-      projectId: '',
-      projectName: '',
+      projectId: "",
+      projectName: "",
       projects: [],
       pageSize: 10,
       currentPage: 1,
@@ -224,29 +272,29 @@ export default {
       lineStatus: true,
       customNum: false,
       condition: {
-        components: TEST_REVIEW_RELEVANCE_CASE_CONFIGS
+        components: TEST_REVIEW_RELEVANCE_CASE_CONFIGS,
       },
       priorityFilters: [],
       statusFilters: [
-        {text: this.$t('test_track.review.prepare'), value: 'Prepare'},
-        {text: this.$t('test_track.review.pass'), value: 'Pass'},
-        {text: this.$t('test_track.review.un_pass'), value: 'UnPass'},
-        {text: this.$t('test_track.review.again'), value: 'Again'},
-        {text: this.$t('test_track.review.underway'), value: 'Underway'},
+        { text: this.$t("test_track.review.prepare"), value: "Prepare" },
+        { text: this.$t("test_track.review.pass"), value: "Pass" },
+        { text: this.$t("test_track.review.un_pass"), value: "UnPass" },
+        { text: this.$t("test_track.review.again"), value: "Again" },
+        { text: this.$t("test_track.review.underway"), value: "Underway" },
       ],
       selectCounts: null,
       isFullScreen: false,
-      screenHeight: 'calc(100vh - 420px)'
+      screenHeight: "calc(100vh - 420px)",
     };
   },
   props: {
     reviewId: {
-      type: String
+      type: String,
     },
     versionEnable: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   watch: {
     reviewId() {
@@ -264,7 +312,7 @@ export default {
       this.getVersionOptions();
       this.getProjectNode();
       this.getCustomNum();
-    }
+    },
   },
   mounted() {
     if (hasLicense()) {
@@ -278,30 +326,36 @@ export default {
     loadConditionComponents() {
       getTestTemplate(this.projectId).then((template) => {
         this.initPriorityFilters(template);
-        this.condition.components = initTestCaseConditionComponents(this.condition, template.customFields, false);
+        this.condition.components = initTestCaseConditionComponents(
+          this.condition,
+          template.customFields,
+          false
+        );
       });
     },
     initPriorityFilters(template) {
-      template.customFields.forEach(field => {
-        if (field.name === '用例等级') {
+      template.customFields.forEach((field) => {
+        if (field.name === "用例等级") {
           this.priorityFilters = field.options;
         }
-      })
+      });
     },
     fullScreen() {
       this.isFullScreen = !this.isFullScreen;
-      this.screenHeight = this.isFullScreen ? 'calc(100vh - 180px)' : 'calc(100vh - 420px)'
+      this.screenHeight = this.isFullScreen
+        ? "calc(100vh - 180px)"
+        : "calc(100vh - 420px)";
     },
     setConditionModuleIdParam() {
-      this.condition.components.forEach(component => {
-        if (component.key === 'moduleIds') {
-          component.options.params = {"projectId": this.projectId};
+      this.condition.components.forEach((component) => {
+        if (component.key === "moduleIds") {
+          component.options.params = { projectId: this.projectId };
         }
       });
     },
     async openTestReviewRelevanceDialog() {
       // 高级搜索基础字段
-      this.condition = {components: TEST_REVIEW_RELEVANCE_CASE_CONFIGS};
+      this.condition = { components: TEST_REVIEW_RELEVANCE_CASE_CONFIGS };
       this.getProject();
       this.dialogFormVisible = true;
       await this.getProjectNode(this.projectId);
@@ -319,16 +373,15 @@ export default {
       */
       // 选择全选则全部加入到评审，无论是否加载完全部
       if (this.condition.selectAll) {
-        param.testCaseIds = ['all'];
+        param.testCaseIds = ["all"];
       }
-      getTestCaseReviewRelevance(param)
-          .then(() => {
-            this.selectIds.clear();
-            this.selectCounts = 0;
-            this.$success(this.$t('commons.save_success'));
-            this.dialogFormVisible = false;
-            this.$emit('refresh');
-          });
+      getTestCaseReviewRelevance(param).then(() => {
+        this.selectIds.clear();
+        this.selectCounts = 0;
+        this.$success(this.$t("commons.save_success"));
+        this.dialogFormVisible = false;
+        this.$emit("refresh");
+      });
     },
     buildPagePath(path) {
       return path + "/" + this.currentPage + "/" + this.pageSize;
@@ -345,13 +398,16 @@ export default {
       this.result.loading = true;
       initCondition(this.condition, this.condition.selectAll);
       this.condition.projectId = this.projectId || getCurrentProjectID();
-      getTestCaseReviewsCasePage(this.currentPage, this.pageSize, this.condition)
-          .then((response) => {
-            let data = response.data;
-            this.total = data.itemCount;
-            this.testReviews = data.listObject;
-            this.result.loading = false;
-          });
+      getTestCaseReviewsCasePage(
+        this.currentPage,
+        this.pageSize,
+        this.condition
+      ).then((response) => {
+        let data = response.data;
+        this.total = data.itemCount;
+        this.testReviews = data.listObject;
+        this.result.loading = false;
+      });
     },
     setSelectCounts(data) {
       this.selectCounts = data;
@@ -376,45 +432,51 @@ export default {
       if (this.condition.projectId) {
         delete this.condition.projectId;
       }
-      this.projectId = '';
+      this.projectId = "";
     },
     filter(filters) {
       _filter(filters, this.condition);
       this.search();
     },
     toggleSelection(rows) {
-      rows.forEach(row => {
-        this.selectIds.forEach(id => {
+      rows.forEach((row) => {
+        this.selectIds.forEach((id) => {
           if (row.id === id) {
             // true 是为选中
-            this.$refs.table.toggleRowSelection(row, true)
+            this.$refs.table.toggleRowSelection(row, true);
           }
-        })
-      })
+        });
+      });
     },
     getProject() {
       if (this.reviewId) {
-        projectRelated({userId: getCurrentUserId(), workspaceId: getCurrentWorkspaceId()})
-            .then((res) => {
-              let data = res.data;
-              if (data) {
-                this.projects = data;
-                const index = data.findIndex(d => d.id === getCurrentProjectID());
-                if (index !== -1) {
-                  this.projectId = data[index].id;
-                  this.projectName = data[index].name;
-                  this.currentProject = data[index];
-                } else {
-                  this.projectId = data[0].id;
-                  this.projectName = data[0].name;
-                  this.currentProject = data[0];
-                }
-              }
-            });
+        projectRelated({
+          userId: getCurrentUserId(),
+          workspaceId: getCurrentWorkspaceId(),
+        }).then((res) => {
+          let data = res.data;
+          if (data) {
+            this.projects = data;
+            const index = data.findIndex((d) => d.id === getCurrentProjectID());
+            if (index !== -1) {
+              this.projectId = data[index].id;
+              this.projectName = data[index].name;
+              this.currentProject = data[index];
+            } else {
+              this.projectId = data[0].id;
+              this.projectName = data[0].name;
+              this.currentProject = data[0];
+            }
+          }
+        });
       }
     },
     switchProject() {
-      this.$refs.switchProject.open({id: this.reviewId, url: '/test/case/review/project/', type: 'review'});
+      this.$refs.switchProject.open({
+        id: this.reviewId,
+        url: "/test/case/review/project/",
+        type: "review",
+      });
     },
     search() {
       this.currentPage = 1;
@@ -428,7 +490,9 @@ export default {
     },
     getProjectNode(projectId, condition) {
       return new Promise((resolve) => {
-        const index = this.projects.findIndex(project => project.id === projectId);
+        const index = this.projects.findIndex(
+          (project) => project.id === projectId
+        );
         if (index !== -1) {
           this.projectName = this.projects[index].name;
           this.currentProject = this.projects[index];
@@ -436,39 +500,41 @@ export default {
         if (projectId) {
           this.projectId = projectId;
         }
-        testCaseNodeListReviewRelate({reviewId: this.reviewId, projectId: this.projectId, ...condition})
-            .then((response) => {
-              this.treeNodes = response.data;
-              resolve();
-            });
+        testCaseNodeListReviewRelate({
+          reviewId: this.reviewId,
+          projectId: this.projectId,
+          ...condition,
+        }).then((response) => {
+          this.treeNodes = response.data;
+          resolve();
+        });
         this.selectNodeIds = [];
       });
     },
     getVersionOptions() {
-      getVersionFilters(this.projectId)
-          .then(r => this.versionFilters = r.data);
+      getVersionFilters(this.projectId).then(
+        (r) => (this.versionFilters = r.data)
+      );
     },
     changeVersion(version) {
       this.condition.versionId = version || null;
       this.search();
     },
     getCustomNum() {
-      getProjectApplicationConfig('CASE_CUSTOM_NUM')
-          .then(result => {
-            let data = result.data;
-            if (data && data.typeValue === 'true') {
-              this.customNum = true;
-            } else {
-              this.customNum = false;
-            }
-          });
+      getProjectApplicationConfig("CASE_CUSTOM_NUM").then((result) => {
+        let data = result.data;
+        if (data && data.typeValue === "true") {
+          this.customNum = true;
+        } else {
+          this.customNum = false;
+        }
+      });
     },
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
-
 .tb-edit .el-input {
   display: none;
   color: black;
@@ -476,12 +542,10 @@ export default {
 
 .tb-edit .current-row .el-input {
   display: block;
-
 }
 
 .tb-edit .current-row .el-input + span {
   display: none;
-
 }
 
 .node-tree {
@@ -519,5 +583,4 @@ export default {
   margin-right: 12px;
   margin-bottom: 10px;
 }
-
 </style>
diff --git a/workstation/frontend/src/business/detail/WorkstationDetail.vue b/workstation/frontend/src/business/detail/WorkstationDetail.vue
index a4a2a2ea83..d3bb0b88f5 100644
--- a/workstation/frontend/src/business/detail/WorkstationDetail.vue
+++ b/workstation/frontend/src/business/detail/WorkstationDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <ms-container>
-    <ms-aside-container>
+    <ms-aside-container pageKey="WORKSTATION_DETAIL">
       <project-menu
         ref="projectMenu"
         @setProject="setProject"
@@ -15,72 +15,99 @@
         <el-row>
           <table-header
             ref="tableHeader"
-            :select-show=!isFocus
+            :select-show="!isFocus"
             @rushTableNode="rushTableNode"
           >
           </table-header>
         </el-row>
 
-
         <el-row>
           <template
-            v-if="currentTodo === 'performance'||((currentTodo === 'api_automation'||currentTodo === 'track_case'||currentTodo === 'api_case')&& isUpcoming ===false)">
-            <mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion"/>
+            v-if="
+              currentTodo === 'performance' ||
+              ((currentTodo === 'api_automation' ||
+                currentTodo === 'track_case' ||
+                currentTodo === 'api_case') &&
+                isUpcoming === false)
+            "
+          >
+            <mx-version-select
+              v-xpack
+              :project-id="projectId"
+              @changeVersion="changeVersion"
+            />
           </template>
           <ms-tab-button
-            v-if="currentTodo ==='track_case' && isUpcoming ===true"
+            v-if="currentTodo === 'track_case' && isUpcoming === true"
             :active-dom="activeDom"
             @update:activeDom="updateActiveDom"
             :left-tip="$t('test_track.case.list')"
             :left-content="$t('test_track.case.list')"
             :right-tip="$t('commons.dash_board')"
             :right-content="$t('commons.dash_board')"
-            :middle-button-enable="false">
+            :middle-button-enable="false"
+          >
             <template v-slot:version>
-              <mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion"/>
+              <mx-version-select
+                v-xpack
+                :project-id="projectId"
+                @changeVersion="changeVersion"
+              />
             </template>
             <div v-if="activeDom === 'left'" style="padding-top: 20px">
               <case-table-list
-                v-if="currentTodo ==='track_case'"
+                v-if="currentTodo === 'track_case'"
                 @refresh="refresh"
                 @setCondition="setCondition"
-                :is-focus=isFocus
-                :is-creation=isCreation
+                :is-focus="isFocus"
+                :is-creation="isCreation"
                 :custom-num="custom_num"
                 :current-version="currentVersion"
-                ref="caseTableList">
+                ref="caseTableList"
+              >
               </case-table-list>
             </div>
           </ms-tab-button>
           <case-table-list
-            v-if="currentTodo ==='track_case'&& isUpcoming===false"
+            v-if="currentTodo === 'track_case' && isUpcoming === false"
             @refresh="refresh"
             @setCondition="setCondition"
-            :is-focus=isFocus
-            :is-creation=isCreation
+            :is-focus="isFocus"
+            :is-creation="isCreation"
             :current-version="currentVersion"
             :custom-num="custom_num"
-            ref="caseTableList">
+            ref="caseTableList"
+          >
           </case-table-list>
           <status-tap-button
-            v-if="(currentTodo ==='api_automation'||currentTodo ==='api_case'||currentTodo === 'api_definition') && isUpcoming===true"
+            v-if="
+              (currentTodo === 'api_automation' ||
+                currentTodo === 'api_case' ||
+                currentTodo === 'api_definition') &&
+              isUpcoming === true
+            "
             :active-status="activeStatus"
             @update:activeStatus="updateActiveStatus"
             :left-tip="$t('commons.to_be_completed')"
             :left-content="$t('commons.to_be_completed')"
             :right-tip="$t('commons.pending_upgrade')"
             :right-content="$t('commons.pending_upgrade')"
-            :middle-button-enable="false">
+            :middle-button-enable="false"
+          >
             <template v-slot:version>
-              <mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion"/>
+              <mx-version-select
+                v-xpack
+                :project-id="projectId"
+                @changeVersion="changeVersion"
+              />
             </template>
             <div style="padding-top: 20px">
               <api-case-table-list
                 v-if="currentTodo === 'api_case'"
-                :is-focus=isFocus
-                :is-creation=isCreation
-                :is-upcoming=isUpcoming
-                :relevanceProjectId=projectId
+                :is-focus="isFocus"
+                :is-creation="isCreation"
+                :is-upcoming="isUpcoming"
+                :relevanceProjectId="projectId"
                 :current-version="currentVersion"
                 :current-protocol="currentProtocol"
                 ref="apiCaseTableList"
@@ -88,10 +115,11 @@
               </api-case-table-list>
               <automation-table-list
                 v-if="currentTodo === 'api_automation'"
-                :is-focus=isFocus
-                :is-creation=isCreation
+                :is-focus="isFocus"
+                :is-creation="isCreation"
                 :current-version="currentVersion"
-                ref="automationTableList">
+                ref="automationTableList"
+              >
               </automation-table-list>
               <api-definition-table-list
                 v-if="currentTodo === 'api_definition'"
@@ -99,75 +127,77 @@
                 :current-protocol="currentProtocol"
                 :queryDataType="queryDataType"
                 :current-version="currentVersion"
-                :is-focus=isFocus
-                :is-creation=isCreation
-                :is-upcoming=isUpcoming
+                :is-focus="isFocus"
+                :is-creation="isCreation"
+                :is-upcoming="isUpcoming"
                 ref="apiDefinitionTableList"
               >
               </api-definition-table-list>
             </div>
           </status-tap-button>
           <api-case-table-list
-            v-if="currentTodo ==='api_case'&& isUpcoming===false"
-            :is-focus=isFocus
-            :is-creation=isCreation
-            :is-upcoming=isUpcoming
-            :relevanceProjectId=projectId
+            v-if="currentTodo === 'api_case' && isUpcoming === false"
+            :is-focus="isFocus"
+            :is-creation="isCreation"
+            :is-upcoming="isUpcoming"
+            :relevanceProjectId="projectId"
             :current-version="currentVersion"
             :current-protocol="currentProtocol"
             ref="apiCaseTableList"
           >
           </api-case-table-list>
           <automation-table-list
-            v-if="currentTodo ==='api_automation'&& isUpcoming===false"
-            :is-focus=isFocus
-            :is-creation=isCreation
+            v-if="currentTodo === 'api_automation' && isUpcoming === false"
+            :is-focus="isFocus"
+            :is-creation="isCreation"
             :current-version="currentVersion"
-            ref="automationTableList">
+            ref="automationTableList"
+          >
           </automation-table-list>
           <plan-table-list
             v-if="currentTodo === 'track_plan'"
-            :is-focus=isFocus
-            :is-creation=isCreation
-            ref="testPlanList">
+            :is-focus="isFocus"
+            :is-creation="isCreation"
+            ref="testPlanList"
+          >
           </plan-table-list>
           <review-table-list
             v-if="currentTodo === 'track_review'"
-            :is-focus=isFocus
-            :is-creation=isCreation
-            ref="testPlanList">
+            :is-focus="isFocus"
+            :is-creation="isCreation"
+            ref="testPlanList"
+          >
           </review-table-list>
           <issue-table-list
             v-if="currentTodo === 'track_issue'"
             @handlePageChange="getIssues"
-            :is-focus=isFocus
-            :is-creation=isCreation
+            :is-focus="isFocus"
+            :is-creation="isCreation"
             @refresh="getIssues"
             ref="issueTableList"
           >
           </issue-table-list>
           <api-definition-table-list
-            v-if="currentTodo === 'api_definition' && isUpcoming===false"
+            v-if="currentTodo === 'api_definition' && isUpcoming === false"
             @runTest="runTest"
             :current-protocol="currentProtocol"
             :queryDataType="queryDataType"
             :current-version="currentVersion"
             :is-read-only="false"
-            :is-focus=isFocus
-            :is-creation=isCreation
-            :is-upcoming=isUpcoming
+            :is-focus="isFocus"
+            :is-creation="isCreation"
+            :is-upcoming="isUpcoming"
             ref="apiDefinitionTableList"
           >
           </api-definition-table-list>
           <performance-table-list
             v-if="currentTodo === 'performance'"
-            :is-focus=isFocus
-            :is-creation=isCreation
+            :is-focus="isFocus"
+            :is-creation="isCreation"
             :current-version="currentVersion"
             ref="performanceTableList"
           >
           </performance-table-list>
-
         </el-row>
       </el-card>
     </ms-main-container>
@@ -187,32 +217,30 @@ import ApiDefinitionTableList from "@/business/component/ApiDefinitionTableList"
 import PerformanceTableList from "@/business/component/PerformanceTableList";
 import AutomationTableList from "@/business/component/AutomationTableList";
 import ApiCaseTableList from "@/business/component/ApiCaseTableList";
-import {getIssues} from "@/api/issue";
+import { getIssues } from "@/api/issue";
 import {
   fullScreenLoading,
   getUUID,
-  stopFullScreenLoading
+  stopFullScreenLoading,
 } from "metersphere-frontend/src/utils";
 import {
   getCurrentProjectID,
   getCurrentUser,
   getCurrentUserId,
-  getCurrentWorkspaceId
+  getCurrentWorkspaceId,
 } from "metersphere-frontend/src/utils/token";
-import {switchProject} from "metersphere-frontend/src/api/project";
+import { switchProject } from "metersphere-frontend/src/api/project";
 import MsTabButton from "metersphere-frontend/src/components/MsTabButton";
 import StatusTapButton from "@/business/component/StatusTapButton";
-import {useUserStore} from "@/store";
+import { useUserStore } from "@/store";
 import MxVersionSelect from "metersphere-frontend/src/components/version/MxVersionSelect";
-import {hasPermissions} from "metersphere-frontend/src/utils/permission";
-import {getDefaultSecondLevelMenu} from "metersphere-frontend/src/router";
-import {getUserProjectList} from "@/api/project";
-import {PROJECT_NAME} from "metersphere-frontend/src/utils/constants";
-
-
+import { hasPermissions } from "metersphere-frontend/src/utils/permission";
+import { getDefaultSecondLevelMenu } from "metersphere-frontend/src/router";
+import { getUserProjectList } from "@/api/project";
+import { PROJECT_NAME } from "metersphere-frontend/src/utils/constants";
 
 export default {
-  name: 'WorkstationDetail',
+  name: "WorkstationDetail",
   components: {
     MsMainContainer,
     MsContainer,
@@ -229,7 +257,7 @@ export default {
     ApiCaseTableList,
     MsTabButton,
     StatusTapButton,
-    MxVersionSelect
+    MxVersionSelect,
   },
   watch: {
     tableKey() {
@@ -239,44 +267,44 @@ export default {
       this.changeTableByState();
     },
     currentTodo() {
-      this.activeStatus = 'left'
+      this.activeStatus = "left";
     },
     currentTodoName() {
       this.$nextTick(function () {
         this.$refs.tableHeader.setActiveIndex(this.currentTodoName);
-        this.rushTableNode(this.currentTodoName)
-      })
-    }
+        this.rushTableNode(this.currentTodoName);
+      });
+    },
   },
   data() {
     return {
-      projectId: '',
-      tableKey: '',
-      currentTodo: 'track_case',
+      projectId: "",
+      tableKey: "",
+      currentTodo: "track_case",
       condition: {},
       custom_num: false,
-      currentProtocol: 'HTTP',
+      currentProtocol: "HTTP",
       activeTab: "api",
-      apiTabs: [{
-        title: this.$t('api_test.definition.api_title'),
-        name: 'default',
-        type: "list",
-        closable: false
-      }],
-      apiDefaultTab: 'default',
+      apiTabs: [
+        {
+          title: this.$t("api_test.definition.api_title"),
+          name: "default",
+          type: "list",
+          closable: false,
+        },
+      ],
+      apiDefaultTab: "default",
       selectCase: {},
       userId: getCurrentUser().id,
-      currentProjectId: '',
-      activeDom: 'left',
-      activeStatus: '',
+      currentProjectId: "",
+      activeDom: "left",
+      activeStatus: "",
       currentVersion: null,
-      searchArray:[],
-      userStore: {}
-    }
+      searchArray: [],
+      userStore: {},
+    };
   },
-  inject: [
-    'reloadTopMenus'
-  ],
+  inject: ["reloadTopMenus"],
   computed: {
     queryDataType: function () {
       let routeParam = this.$route.params.dataType;
@@ -288,18 +316,23 @@ export default {
   methods: {
     reloadPage: function () {
       // todo refactor permission check
-      let redirectUrl = sessionStorage.getItem('redirectUrl');
+      let redirectUrl = sessionStorage.getItem("redirectUrl");
       let copyRedirectUrl = redirectUrl;
       if (!copyRedirectUrl) {
         this.$router.push("/");
         this.reload();
         return;
       }
-      if (copyRedirectUrl.startsWith("/track") || copyRedirectUrl.startsWith("/performance")
-        || copyRedirectUrl.startsWith("/api") || copyRedirectUrl.startsWith("/ui") || copyRedirectUrl.startsWith("/workstation")) {
+      if (
+        copyRedirectUrl.startsWith("/track") ||
+        copyRedirectUrl.startsWith("/performance") ||
+        copyRedirectUrl.startsWith("/api") ||
+        copyRedirectUrl.startsWith("/ui") ||
+        copyRedirectUrl.startsWith("/workstation")
+      ) {
         // 获取有权限的跳转路径
         copyRedirectUrl = getDefaultSecondLevelMenu(copyRedirectUrl);
-        if (copyRedirectUrl !== '/') {
+        if (copyRedirectUrl !== "/") {
           this.$router.push(copyRedirectUrl);
           this.reloadTopMenus();
           this.reload();
@@ -307,13 +340,24 @@ export default {
         }
       }
       // 跳转至下一个有权限的菜单
-      let projectPermission = hasPermissions('PROJECT_USER:READ', 'PROJECT_ENVIRONMENT:READ', 'PROJECT_OPERATING_LOG:READ', 'PROJECT_FILE:READ+JAR', 'PROJECT_FILE:READ+FILE', 'PROJECT_CUSTOM_CODE:READ');
-      let uiPermission = hasPermissions('PROJECT_UI_ELEMENT:READ', 'PROJECT_UI_SCENARIO:READ', 'PROJECT_UI_REPORT:READ');
+      let projectPermission = hasPermissions(
+        "PROJECT_USER:READ",
+        "PROJECT_ENVIRONMENT:READ",
+        "PROJECT_OPERATING_LOG:READ",
+        "PROJECT_FILE:READ+JAR",
+        "PROJECT_FILE:READ+FILE",
+        "PROJECT_CUSTOM_CODE:READ"
+      );
+      let uiPermission = hasPermissions(
+        "PROJECT_UI_ELEMENT:READ",
+        "PROJECT_UI_SCENARIO:READ",
+        "PROJECT_UI_REPORT:READ"
+      );
       let redirectMap = {
         project: projectPermission,
         ui: uiPermission,
       };
-      let locations = redirectUrl.split('/');
+      let locations = redirectUrl.split("/");
       if (locations.length > 2 && !redirectMap[locations[1]]) {
         let v = true;
         for (const k in redirectMap) {
@@ -337,10 +381,10 @@ export default {
         return;
       }
       const loading = fullScreenLoading(this);
-      switchProject({id: this.userId, lastProjectId: projectId})
-        .then(response => {
+      switchProject({ id: this.userId, lastProjectId: projectId })
+        .then((response) => {
           this.userStore.switchProject(response);
-          this.$EventBus.$emit('projectChange');
+          this.$EventBus.$emit("projectChange");
           this.changeProjectName(projectId);
           // 刷新路由
           this.reloadPage();
@@ -352,7 +396,7 @@ export default {
     },
     changeProjectName(projectId) {
       if (projectId) {
-        let project = this.searchArray.filter(p => p.id === projectId);
+        let project = this.searchArray.filter((p) => p.id === projectId);
         if (project.length > 0) {
           sessionStorage.setItem(PROJECT_NAME, project[0].name);
         }
@@ -362,34 +406,38 @@ export default {
       this.tableKey = tableKey;
     },
     changeTableByState() {
-      if (this.currentTodo === 'api_automation' && this.$refs.automationTableList) {
-        if (this.activeStatus === 'left') {
-          this.$refs.automationTableList.changeTabState('finish')
+      if (
+        this.currentTodo === "api_automation" &&
+        this.$refs.automationTableList
+      ) {
+        if (this.activeStatus === "left") {
+          this.$refs.automationTableList.changeTabState("finish");
         } else {
-          this.$refs.automationTableList.changeTabState('update')
+          this.$refs.automationTableList.changeTabState("update");
         }
       }
-      if (this.currentTodo === 'api_case' && this.$refs.apiCaseTableList) {
-        if (this.activeStatus === 'left') {
-          this.$refs.apiCaseTableList.changeTabState('finish')
+      if (this.currentTodo === "api_case" && this.$refs.apiCaseTableList) {
+        if (this.activeStatus === "left") {
+          this.$refs.apiCaseTableList.changeTabState("finish");
         } else {
-          this.$refs.apiCaseTableList.changeTabState('update')
+          this.$refs.apiCaseTableList.changeTabState("update");
         }
       }
-      if (this.currentTodo === 'api_definition' && this.$refs.apiDefinitionTableList) {
-        if (this.activeStatus === 'left') {
-          this.$refs.apiDefinitionTableList.changeTabState("finish")
+      if (
+        this.currentTodo === "api_definition" &&
+        this.$refs.apiDefinitionTableList
+      ) {
+        if (this.activeStatus === "left") {
+          this.$refs.apiDefinitionTableList.changeTabState("finish");
         } else {
-          this.$refs.apiDefinitionTableList.changeTabState("update")
+          this.$refs.apiDefinitionTableList.changeTabState("update");
         }
       }
     },
     getTableData() {
-      this.currentTodo = this.tableKey
-    },
-    refresh() {
-
+      this.currentTodo = this.tableKey;
     },
+    refresh() {},
     setCondition(data) {
       this.condition = data;
     },
@@ -419,18 +467,19 @@ export default {
       for (let index in this.apiTabs) {
         let tab = this.apiTabs[index];
         if (tab.name === this.apiDefaultTab) {
-          tab.title = this.$t('api_test.definition.request.edit_api') + "-" + data.name;
+          tab.title =
+            this.$t("api_test.definition.request.edit_api") + "-" + data.name;
           break;
         }
       }
     },
     handleTabsEdit(targetName, action, api) {
       if (!this.projectId) {
-        this.$warning(this.$t('commons.check_project_tip'));
+        this.$warning(this.$t("commons.check_project_tip"));
         return;
       }
       if (targetName === undefined || targetName === null) {
-        targetName = this.$t('api_test.definition.request.title');
+        targetName = this.$t("api_test.definition.request.title");
       }
       let newTabName = getUUID();
       this.apiTabs.push({
@@ -446,16 +495,20 @@ export default {
       this.apiDefaultTab = newTabName;
     },
     updateActiveDom(activeDom) {
-      if (activeDom === 'right') {
-        this.$alert(this.$t('commons.function_planning'), this.$t('commons.dash_board'), {
-          confirmButtonText: '确定',
-          callback: action => {
-            /*this.$message({
+      if (activeDom === "right") {
+        this.$alert(
+          this.$t("commons.function_planning"),
+          this.$t("commons.dash_board"),
+          {
+            confirmButtonText: "确定",
+            callback: (action) => {
+              /*this.$message({
               type: 'info',
               message: `action: ${ action }`
             });*/
+            },
           }
-        });
+        );
       }
       this.activeDom = activeDom;
     },
@@ -463,7 +516,7 @@ export default {
       this.activeStatus = activeStatus;
     },
     setCurrentProtocol(protocol) {
-      this.currentProtocol = protocol
+      this.currentProtocol = protocol;
     },
     changeVersion(currentVersion) {
       this.currentVersion = currentVersion || null;
@@ -471,44 +524,46 @@ export default {
     init() {
       let data = {
         userId: getCurrentUserId(),
-        workspaceId: getCurrentWorkspaceId()
+        workspaceId: getCurrentWorkspaceId(),
       };
       this.loading = true;
-      getUserProjectList(data)
-        .then(response => {
-          this.searchArray = response.data;
-          let projectId = getCurrentProjectID();
-          if (projectId) {
-            // 保存的 projectId 在当前项目列表是否存在; 切换工作空间后
-            if (this.searchArray.length > 0 && this.searchArray.map(p => p.id).indexOf(projectId) === -1) {
-              this.change(this.items[0].id);
-            }
-          } else {
-            if (this.items.length > 0) {
-              this.change(this.items[0].id);
-            }
+      getUserProjectList(data).then((response) => {
+        this.searchArray = response.data;
+        let projectId = getCurrentProjectID();
+        if (projectId) {
+          // 保存的 projectId 在当前项目列表是否存在; 切换工作空间后
+          if (
+            this.searchArray.length > 0 &&
+            this.searchArray.map((p) => p.id).indexOf(projectId) === -1
+          ) {
+            this.change(this.items[0].id);
           }
-          this.changeProjectName(projectId);
-        });
+        } else {
+          if (this.items.length > 0) {
+            this.change(this.items[0].id);
+          }
+        }
+        this.changeProjectName(projectId);
+      });
     },
     setDefaultCurrentTodo() {
       // 设置当前默认TAB页为下一个有权限的菜单TAB
-      if (hasPermissions('PROJECT_TRACK_CASE:READ')) {
-        this.currentTodo = 'track_case';
-      } else if (hasPermissions('PROJECT_TRACK_PLAN:READ')) {
-        this.currentTodo = 'track_plan';
-      } else if (hasPermissions('PROJECT_TRACK_REVIEW:READ')) {
-        this.currentTodo = 'track_review';
-      } else if (hasPermissions('PROJECT_TRACK_ISSUE:READ')) {
-        this.currentTodo = 'track_issue';
-      } else if (hasPermissions('PROJECT_API_DEFINITION:READ')) {
-        this.currentTodo = 'api_definition';
-      } else if (hasPermissions('PROJECT_API_SCENARIO:READ')) {
-        this.currentTodo = 'api_automation';
-      } else if (hasPermissions('PROJECT_PERFORMANCE_TEST:READ')) {
-        this.currentTodo = 'performance';
+      if (hasPermissions("PROJECT_TRACK_CASE:READ")) {
+        this.currentTodo = "track_case";
+      } else if (hasPermissions("PROJECT_TRACK_PLAN:READ")) {
+        this.currentTodo = "track_plan";
+      } else if (hasPermissions("PROJECT_TRACK_REVIEW:READ")) {
+        this.currentTodo = "track_review";
+      } else if (hasPermissions("PROJECT_TRACK_ISSUE:READ")) {
+        this.currentTodo = "track_issue";
+      } else if (hasPermissions("PROJECT_API_DEFINITION:READ")) {
+        this.currentTodo = "api_definition";
+      } else if (hasPermissions("PROJECT_API_SCENARIO:READ")) {
+        this.currentTodo = "api_automation";
+      } else if (hasPermissions("PROJECT_PERFORMANCE_TEST:READ")) {
+        this.currentTodo = "performance";
       }
-    }
+    },
   },
   props: {
     isFocus: {
@@ -525,24 +580,24 @@ export default {
     },
     currentTodoName: {
       type: String,
-      default: 'track_case',
-    }
+      default: "track_case",
+    },
   },
   mounted() {
     this.$nextTick(function () {
       this.$refs.tableHeader.setActiveIndex(this.currentTodoName);
-      this.rushTableNode(this.currentTodoName)
-    })
-    this.activeStatus = 'left'
+      this.rushTableNode(this.currentTodoName);
+    });
+    this.activeStatus = "left";
     if (this.isUpcoming === true) {
-      if (this.currentTodo === 'api_automation') {
-        this.$refs.automationTableList.changeTabState('finish')
+      if (this.currentTodo === "api_automation") {
+        this.$refs.automationTableList.changeTabState("finish");
       }
-      if (this.currentTodo === 'api_case') {
-        this.$refs.apiCaseTableList.changeTabState('finish')
+      if (this.currentTodo === "api_case") {
+        this.$refs.apiCaseTableList.changeTabState("finish");
       }
-      if (this.currentTodo === 'api_definition') {
-        this.$refs.apiDefinitionTableList.changeTabState('finish')
+      if (this.currentTodo === "api_definition") {
+        this.$refs.apiDefinitionTableList.changeTabState("finish");
       }
     }
   },
@@ -551,7 +606,7 @@ export default {
     this.init();
     this.userStore = useUserStore();
   },
-}
+};
 </script>
 <style scoped>
 .workstation-card {
diff --git a/workstation/frontend/src/business/module/environment/EnvironmentGroupList.vue b/workstation/frontend/src/business/module/environment/EnvironmentGroupList.vue
index 13cea8e9a5..801544f541 100644
--- a/workstation/frontend/src/business/module/environment/EnvironmentGroupList.vue
+++ b/workstation/frontend/src/business/module/environment/EnvironmentGroupList.vue
@@ -2,35 +2,71 @@
   <div>
     <el-card class="table-card" v-loading="loading">
       <template v-slot:header>
-        <ms-table-header :create-tip="btnTips" :condition.sync="condition" :show-create="!readOnly"
-                         @search="search" @create="createEnvironment" :create-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE_GROUP']">
+        <ms-table-header
+          :create-tip="btnTips"
+          :condition.sync="condition"
+          :show-create="!readOnly"
+          @search="search"
+          @create="createEnvironment"
+          :create-permission="[
+            'WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE_GROUP',
+          ]"
+        >
         </ms-table-header>
       </template>
-      <el-table :data="environmentGroupList"
-                style="width: 100%" ref="table"
-                row-key="id"
-                @expand-change="expandChange"
-                :height="screenHeight">
+      <el-table
+        :data="environmentGroupList"
+        style="width: 100%"
+        ref="table"
+        row-key="id"
+        @expand-change="expandChange"
+        :height="screenHeight"
+      >
         <el-table-column type="expand" prop="id">
           <template v-slot:default="scope">
-            <environment-group-row :env-group-id="scope.row.id" ref="environmentGroupRow"
-                                   :read-only="!scope.row.readOnly"
-                                   style="overflow-x:hidden; overflow-y: auto; height: 180px;"/>
+            <environment-group-row
+              :env-group-id="scope.row.id"
+              ref="environmentGroupRow"
+              :read-only="!scope.row.readOnly"
+              style="overflow-x: hidden; overflow-y: auto; height: 180px"
+            />
           </template>
         </el-table-column>
-        <el-table-column :label="$t('commons.name')" prop="name" show-overflow-tooltip min-width="200">
+        <el-table-column
+          :label="$t('commons.name')"
+          prop="name"
+          show-overflow-tooltip
+          min-width="200"
+        >
           <template v-slot:default="scope">
             <span @click.stop v-if="scope.row.showNameInput">
-              <el-input size="mini" v-model="scope.row.name" class="name-input" @blur="updateGroupName(scope.row)" show-word-limit
-                        maxlength="50" :placeholder="$t('commons.input_name')" ref="nameEdit"/>
+              <el-input
+                size="mini"
+                v-model="scope.row.name"
+                class="name-input"
+                @blur="updateGroupName(scope.row)"
+                show-word-limit
+                maxlength="50"
+                :placeholder="$t('commons.input_name')"
+                ref="nameEdit"
+              />
             </span>
             <span v-else>
               <span>{{ scope.row.name }}</span>
-              <i class="el-icon-edit" style="cursor:pointer;margin-left: 4px;" @click="editName(scope.row)" v-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT_GROUP']"/>
+              <i
+                class="el-icon-edit"
+                style="cursor: pointer; margin-left: 4px"
+                @click="editName(scope.row)"
+                v-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT_GROUP']"
+              />
             </span>
           </template>
         </el-table-column>
-        <el-table-column prop="createTime" :label="$t('commons.create_time')" min-width="200">
+        <el-table-column
+          prop="createTime"
+          :label="$t('commons.create_time')"
+          min-width="200"
+        >
           <template v-slot:default="scope">
             <span>{{ scope.row.createTime | datetimeFormat }}</span>
           </template>
@@ -38,27 +74,46 @@
         <el-table-column :label="$t('commons.operating')" width="350">
           <template v-slot:default="scope">
             <div v-if="!readOnly">
-              <ms-table-operator @editClick="editEnvironment(scope.row)"
-                                 :edit-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT_GROUP']"
-                                 :delete-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+DELETE_GROUP']"
-                                 @deleteClick="deleteEnvironment(scope.row)">
+              <ms-table-operator
+                @editClick="editEnvironment(scope.row)"
+                :edit-permission="[
+                  'WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT_GROUP',
+                ]"
+                :delete-permission="[
+                  'WORKSPACE_PROJECT_ENVIRONMENT:READ+DELETE_GROUP',
+                ]"
+                @deleteClick="deleteEnvironment(scope.row)"
+              >
                 <template v-slot:middle>
-                  <ms-table-operator-button :tip="$t('commons.copy')" @exec="copyEnvironment(scope.row)"
-                                            v-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+COPY_GROUP']"
-                                            icon="el-icon-document-copy" type="info"/>
+                  <ms-table-operator-button
+                    :tip="$t('commons.copy')"
+                    @exec="copyEnvironment(scope.row)"
+                    v-permission="[
+                      'WORKSPACE_PROJECT_ENVIRONMENT:READ+COPY_GROUP',
+                    ]"
+                    icon="el-icon-document-copy"
+                    type="info"
+                  />
                 </template>
               </ms-table-operator>
             </div>
           </template>
         </el-table-column>
       </el-table>
-      <ms-table-pagination :change="init" :current-page.sync="currentPage" :page-size.sync="pageSize"
-                           :total="total"/>
+      <ms-table-pagination
+        :change="init"
+        :current-page.sync="currentPage"
+        :page-size.sync="pageSize"
+        :total="total"
+      />
     </el-card>
 
-    <edit-environment-group ref="editEnvironmentGroup" @refresh="init"/>
-    <ms-delete-confirm :title="$t('workspace.env_group.delete')" @delete="_handleDelete" ref="deleteConfirm"/>
-
+    <edit-environment-group ref="editEnvironmentGroup" @refresh="init" />
+    <ms-delete-confirm
+      :title="$t('workspace.env_group.delete')"
+      @delete="_handleDelete"
+      ref="deleteConfirm"
+    />
   </div>
 </template>
 
@@ -78,7 +133,7 @@ import {
   copyEnvironmentGroup,
   delEnvironmentById,
   getEnvironmentGroupPages,
-  modifyEnvironmentGroup
+  modifyEnvironmentGroup,
 } from "@/api/environment";
 
 export default {
@@ -94,34 +149,34 @@ export default {
     MsTableButton,
     MsTableHeader,
     EnvironmentGroupRow,
-    MsDeleteConfirm
+    MsDeleteConfirm,
   },
   data() {
     return {
-      btnTips: this.$t('workspace.env_group.create'),
-      envGroupId: '',
+      btnTips: this.$t("workspace.env_group.create"),
+      envGroupId: "",
       condition: {},
       environmentGroupList: [],
       loading: false,
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      showNameInput: false
-    }
+      showNameInput: false,
+    };
   },
   props: {
     screenHeight: {
       type: String,
       default() {
-        return 'calc(100vh - 170px)';
-      }
+        return "calc(100vh - 170px)";
+      },
     },
     readOnly: {
       type: Boolean,
       default() {
         return false;
-      }
-    }
+      },
+    },
   },
   created() {
     this.init();
@@ -131,9 +186,13 @@ export default {
   },
   methods: {
     init() {
-      this.loading = getEnvironmentGroupPages(this.currentPage, this.pageSize, this.condition).then(res => {
+      this.loading = getEnvironmentGroupPages(
+        this.currentPage,
+        this.pageSize,
+        this.condition
+      ).then((res) => {
         let data = res.data;
-        let {listObject, itemCount} = data;
+        let { listObject, itemCount } = data;
         this.environmentGroupList = listObject;
         this.total = itemCount;
       });
@@ -147,7 +206,7 @@ export default {
     },
     deleteEnvironment(row) {
       if (row.system) {
-        this.$warning(this.$t('group.admin_not_allow_delete'));
+        this.$warning(this.$t("group.admin_not_allow_delete"));
         return;
       }
       this.$refs.deleteConfirm.open(row);
@@ -165,7 +224,7 @@ export default {
     },
     _handleDelete(row) {
       delEnvironmentById(row.id).then(() => {
-        this.$success(this.$t('commons.delete_success'));
+        this.$success(this.$t("commons.delete_success"));
         this.init();
       });
     },
@@ -188,17 +247,15 @@ export default {
       let param = {
         id: row.id,
         name: row.name,
-        workspaceId: row.workspaceId
+        workspaceId: row.workspaceId,
       };
       modifyEnvironmentGroup(param).then(() => {
         this.$success(this.$t("commons.modify_success"));
         this.init();
       });
-    }
+    },
   },
-}
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>