diff --git a/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue b/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
index 42be470235..aecd0f2b80 100644
--- a/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
+++ b/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
@@ -18,12 +18,18 @@
           :content="$t('commons.import')"
           @click="importJSON"
         />
-        <ms-table-button
-          v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']"
-          icon="el-icon-box"
-          :content="$t('commons.export')"
-          @click="exportJSON"
-        />
+        <el-dropdown @command="handleExportCommand" class="scenario-ext-btn" trigger="hover"
+                     v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']">
+          <ms-table-button
+            style="margin-left: 10px"
+            icon="el-icon-box"
+            :content="$t('commons.export')"
+          />
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="exportApi">{{ $t('envrionment.export_variable_tip') }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+
         <el-link
           style="margin-left: 10px"
           @click="batchAdd"
@@ -58,6 +64,31 @@
       >
         <ms-table-column prop="num" sortable label="ID" min-width="60">
         </ms-table-column>
+
+        <ms-table-column
+          prop="scope"
+          sortable
+          :label="$t('commons.scope')"
+          :filters="scopeTypeFilters"
+          :filter-method="filterScope"
+          min-width="120">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.scope"
+              :placeholder="$t('commons.please_select')"
+              size="mini"
+              @change="changeType(scope.row)"
+            >
+              <el-option
+                v-for="item in scopeTypeFilters"
+                :key="item.value"
+                :label="item.text"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </ms-table-column>
+
         <ms-table-column
           prop="name"
           :label="$t('api_test.variable_name')"
@@ -84,9 +115,9 @@
           <template slot-scope="scope">
             <el-select
               v-model="scope.row.type"
+              v-if="!scope.row.scope || scope.row.scope == 'api'"
               :placeholder="$t('commons.please_select')"
               size="mini"
-              @change="changeType(scope.row)"
             >
               <el-option
                 v-for="item in typeSelectOptions"
@@ -95,6 +126,20 @@
                 :value="item.value"
               />
             </el-select>
+
+            <el-select
+              v-else
+              v-model="scope.row.type"
+              :placeholder="$t('commons.please_select')"
+              size="mini"
+            >
+              <el-option
+                v-for="item in uiTypeSelectOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
           </template>
         </ms-table-column>
 
@@ -128,14 +173,14 @@
           sortable
         >
           <template slot-scope="scope">
-            <el-input v-model="scope.row.description" size="mini" />
+            <el-input v-model="scope.row.description" size="mini"/>
           </template>
         </ms-table-column>
 
         <ms-table-column :label="$t('commons.operating')" width="150">
           <template v-slot:default="scope">
             <span>
-              <el-switch v-model="scope.row.enable" size="mini" />
+              <el-switch v-model="scope.row.enable" size="mini"/>
               <el-tooltip
                 effect="dark"
                 :content="$t('commons.remove')"
@@ -172,7 +217,7 @@
         </ms-table-column>
       </ms-table>
     </div>
-    <batch-add-parameter @batchSave="batchSave" ref="batchAdd" />
+    <batch-add-parameter @batchSave="batchSave" ref="batchAdd"/>
     <api-variable-setting ref="apiVariableSetting"></api-variable-setting>
     <variable-import
       ref="variableImport"
@@ -182,7 +227,7 @@
 </template>
 
 <script>
-import { KeyValue } from "../../../model/EnvTestModel";
+import {KeyValue} from "../../../model/EnvTestModel";
 import MsApiVariableInput from "./ApiVariableInput";
 import BatchAddParameter from "./BatchAddParameter";
 import MsTableButton from "../../MsTableButton";
@@ -190,8 +235,9 @@ import MsTable from "../../table/MsTable";
 import MsTableColumn from "../../table/MsTableColumn";
 import ApiVariableSetting from "./ApiVariableSetting";
 import CsvFileUpload from "./variable/CsvFileUpload";
-import { downloadFile, getUUID, operationConfirm } from "../../../utils";
+import {downloadFile, getUUID, operationConfirm} from "../../../utils";
 import VariableImport from "./variable/VariableImport";
+import _ from "lodash";
 
 export default {
   name: "MsApiScenarioVariables",
@@ -231,15 +277,25 @@ export default {
         },
       ],
       typeSelectOptions: [
-        { value: "CONSTANT", label: this.$t("api_test.automation.constant") },
-        { value: "LIST", label: this.$t("test_track.case.list") },
-        { value: "CSV", label: "CSV" },
-        { value: "COUNTER", label: this.$t("api_test.automation.counter") },
-        { value: "RANDOM", label: this.$t("api_test.automation.random") },
+        {value: "CONSTANT", label: this.$t("api_test.automation.constant")},
+        {value: "LIST", label: this.$t("test_track.case.list")},
+        {value: "CSV", label: "CSV"},
+        {value: "COUNTER", label: this.$t("api_test.automation.counter")},
+        {value: "RANDOM", label: this.$t("api_test.automation.random")},
+      ],
+      uiTypeSelectOptions: [
+        {value: "STRING", label: this.$t("api_test.automation.string")},
+        {value: "ARRAY", label: this.$t("api_test.automation.array")},
+        {value: "JSON", label: this.$t("api_test.automation.json")},
+        {value: "NUMBER", label: this.$t("api_test.automation.number")},
       ],
       variables: {},
       selectVariable: "",
       editData: {},
+      scopeTypeFilters: [
+        {text: this.$t("commons.api"), value: "api"},
+        {text: this.$t("commons.ui_test"), value: "ui"},
+      ]
     };
   },
   watch: {
@@ -280,15 +336,15 @@ export default {
       if (repeatKey !== "") {
         this.$warning(
           this.$t("api_test.environment.common_config") +
-            "【" +
-            repeatKey +
-            "】" +
-            this.$t("load_test.param_is_duplicate")
+          "【" +
+          repeatKey +
+          "】" +
+          this.$t("load_test.param_is_duplicate")
         );
       }
       if (isNeedCreate) {
         this.variables.push(
-          new KeyValue({ enable: true, id: getUUID(), type: "CONSTANT" })
+          new KeyValue({enable: true, id: getUUID(), type: "CONSTANT", scope: "api"})
         );
       }
       this.$emit("change", this.variables);
@@ -305,6 +361,10 @@ export default {
         data.files = [];
         data.quotedData = "false";
       }
+
+      if (!data.scope || data.scope == "ui") {
+        data.type = 'STRING';
+      }
     },
     valueText(data) {
       switch (data.type) {
@@ -321,11 +381,11 @@ export default {
     },
     querySearch(queryString, cb) {
       let restaurants = [
-        { value: "UTF-8" },
-        { value: "UTF-16" },
-        { value: "GB2312" },
-        { value: "ISO-8859-15" },
-        { value: "US-ASCll" },
+        {value: "UTF-8"},
+        {value: "UTF-16"},
+        {value: "GB2312"},
+        {value: "ISO-8859-15"},
+        {value: "US-ASCll"},
       ];
       let results = queryString
         ? restaurants.filter(this.createFilter(queryString))
@@ -347,6 +407,9 @@ export default {
           this.$set(item, "description", item.remark);
           item.remark = undefined;
         }
+        if (!item.scope) {
+          this.$set(item, "scope", "api");
+        }
         index++;
       });
     },
@@ -373,7 +436,7 @@ export default {
         }
       );
     },
-    filter() {
+    filter(scope) {
       let datas = [];
       this.variables.forEach((item) => {
         if (this.selectVariable && this.selectVariable != "" && item.name) {
@@ -393,6 +456,12 @@ export default {
       });
       this.variables = datas;
     },
+    filterScope(value, row) {
+      if (value == "ui") {
+        return row.scope == "ui";
+      }
+      return !row.scope || row.scope == "api";
+    },
     openSetting(data) {
       this.$refs.apiVariableSetting.open(data);
     },
@@ -453,8 +522,15 @@ export default {
       this.sortParameters();
     },
     exportJSON() {
-      if (this.$refs.variableTable.selectIds.length < 1) {
-        this.$warning(this.$t("api_test.environment.select_variable"));
+      let apiVariable = [];
+      this.$refs.variableTable.selectRows.forEach((r) => {
+        if (!r.scope || r.scope != "ui") {
+          apiVariable.push(r);
+        }
+      });
+
+      if (apiVariable.length < 1) {
+        this.$warning(this.$t("api_test.environment.select_api_variable"));
         return;
       }
       let variablesJson = [];
@@ -464,7 +540,7 @@ export default {
         if (row.type === "CSV") {
           messages = this.$t("variables.csv_download");
         }
-        if (row.name) {
+        if (row.name && (!row.scope || row.scope == "api")) {
           variablesJson.push(row);
         }
       });
@@ -497,10 +573,21 @@ export default {
         }
       });
     },
+    handleExportCommand(command){
+      this.exportJSON();
+    }
   },
   created() {
     if (this.items.length === 0) {
-      this.items.push(new KeyValue({ enable: true }));
+      this.items.push(new KeyValue({enable: true, scope: "api"}));
+    } else {
+      //历史数据默认是 api 应用场景
+      _.forEach(this.items, item => {
+        if (!item.scope) {
+          this.$set(item, "scope", "api");
+        }
+      })
+      this.variables = this.items;
     }
   },
 };
diff --git a/project-management/frontend/src/business/menu/environment/EnvironmentList.vue b/project-management/frontend/src/business/menu/environment/EnvironmentList.vue
index 91eba967d2..00a6e06d42 100644
--- a/project-management/frontend/src/business/menu/environment/EnvironmentList.vue
+++ b/project-management/frontend/src/business/menu/environment/EnvironmentList.vue
@@ -136,8 +136,8 @@ import MsTableOperator from "metersphere-frontend/src/components/MsTableOperator
 import MsTableOperatorButton from "metersphere-frontend/src/components/MsTableOperatorButton";
 import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
 import ApiEnvironmentConfig from "metersphere-frontend/src/components/environment/ApiEnvironmentConfig";
-import {Environment, parseEnvironment} from "metersphere-frontend/src/model/EnvironmentModel";
-import EnvironmentEdit from "metersphere-frontend/src/components/environment/EnvironmentEdit";
+import {Environment, parseEnvironment, HttpConfig} from "metersphere-frontend/src/model/EnvironmentModel";
+import EnvironmentEdit from "./components/EnvironmentEdit";
 import MsAsideItem from "metersphere-frontend/src/components/MsAsideItem";
 import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
 import ProjectSwitch from "metersphere-frontend/src/components/head/ProjectSwitch";
@@ -174,7 +174,7 @@ export default {
       projectList: [],
       condition: {},   //封装传递给后端的查询条件
       environments: [],
-      currentEnvironment: new Environment(),
+      currentEnvironment: new Environment({httpConfig: new HttpConfig()}),
       result: {},
       loading: false,
       dialogVisible: false,
@@ -288,7 +288,7 @@ export default {
     createEnv() {
       this.dialogTitle = this.$t('api_test.environment.create');
       this.dialogVisible = true;
-      this.currentEnvironment = new Environment();
+      this.currentEnvironment = new Environment({httpConfig: new HttpConfig()});
       this.currentEnvironment.projectId = this.currentProjectId;
       this.currentEnvironment.currentProjectId = this.currentProjectId;
       this.ifCreate = true;
diff --git a/project-management/frontend/src/business/menu/environment/components/EnvironmentEdit.vue b/project-management/frontend/src/business/menu/environment/components/EnvironmentEdit.vue
index d94de0077b..59a82d41a7 100644
--- a/project-management/frontend/src/business/menu/environment/components/EnvironmentEdit.vue
+++ b/project-management/frontend/src/business/menu/environment/components/EnvironmentEdit.vue
@@ -155,7 +155,7 @@ import {REQUEST_HEADERS} from "metersphere-frontend/src/utils/constants";
 import {CommonConfig, Environment} from "metersphere-frontend/src/model/EnvironmentModel";
 import MsApiHostTable from "metersphere-frontend/src/components/environment/commons/ApiHostTable";
 import MsDatabaseConfig from "metersphere-frontend/src/components/environment/database/DatabaseConfig";
-import MsEnvironmentHttpConfig from "metersphere-frontend/src/components/environment/EnvironmentHttpConfig";
+import MsEnvironmentHttpConfig from "./EnvironmentHttpConfig";
 import MsEnvironmentCommonConfig from "metersphere-frontend/src/components/environment/EnvironmentCommonConfig";
 import MsEnvironmentSSLConfig from "metersphere-frontend/src/components/environment/EnvironmentSSLConfig";
 import MsApiAuthConfig from "metersphere-frontend/src/components/environment/auth/ApiAuthConfig";
diff --git a/test-track/backend/src/main/java/io/metersphere/plan/service/TestPlanService.java b/test-track/backend/src/main/java/io/metersphere/plan/service/TestPlanService.java
index dac6db1a91..543a7035d4 100644
--- a/test-track/backend/src/main/java/io/metersphere/plan/service/TestPlanService.java
+++ b/test-track/backend/src/main/java/io/metersphere/plan/service/TestPlanService.java
@@ -65,8 +65,6 @@ import org.springframework.kafka.core.KafkaTemplate;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Propagation;
 import org.springframework.transaction.annotation.Transactional;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
 
 import javax.annotation.Resource;
 import javax.servlet.ServletOutputStream;
@@ -1554,6 +1552,10 @@ public class TestPlanService {
         envMap = planTestPlanApiCaseService.getApiCaseEnv(planId);
         Map<String, List<String>> scenarioEnv = planTestPlanScenarioCaseService.getApiScenarioEnv(planId);
 
+        if (DiscoveryUtil.hasService(MicroServiceName.UI_TEST)) {
+            scenarioEnv = mergeUiScenarioEnv(planId, scenarioEnv);
+        }
+
         Set<String> projectIds = scenarioEnv.keySet();
         for (String projectId : projectIds) {
             if (envMap.containsKey(projectId)) {
@@ -1576,6 +1578,32 @@ public class TestPlanService {
         return envMap;
     }
 
+    /**
+     * 合并ui场景的环境信息
+     * @param planId
+     * @param scenarioEnv
+     * @return
+     */
+    private Map<String, List<String>> mergeUiScenarioEnv(String planId, Map<String, List<String>> scenarioEnv) {
+        Map<String, List<String>> uiScenarioEnv = planTestPlanUiScenarioCaseService.getUiScenarioEnv(planId);
+        if (MapUtils.isEmpty(scenarioEnv)) {
+            return uiScenarioEnv;
+        }
+        if (MapUtils.isNotEmpty(uiScenarioEnv)) {
+            uiScenarioEnv.entrySet().forEach(entry -> {
+                if (scenarioEnv.containsKey(entry.getKey())) {
+                    List<String> environmentIds = scenarioEnv.get(entry.getKey());
+                    entry.getValue().forEach(eId -> {
+                        if (!environmentIds.contains(eId)) {
+                            environmentIds.add(eId);
+                        }
+                    });
+                }
+            });
+        }
+        return scenarioEnv;
+    }
+
     public String runPlan(TestPlanRunRequest testplanRunRequest) {
         //检查测试计划下有没有可以执行的用例；
         if (!haveExecCase(testplanRunRequest.getTestPlanId(), false)) {
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue b/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue
index 3ab3769385..0e6c09f61a 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue
@@ -1,5 +1,21 @@
 <template>
   <div v-loading="loading">
+    <env-group-popover
+      :env-map="projectEnvMap"
+      :project-ids="projectIds"
+      :show-env-group="false"
+      @setProjectEnvMap="setProjectEnvMap"
+      :environment-type.sync="environmentType"
+      :group-id="envGroupId"
+      :is-scenario="false"
+      @setEnvGroup="setEnvGroup"
+      :show-config-button-with-out-permission="
+        showConfigButtonWithOutPermission
+      "
+      :project-list="projectList"
+      ref="envPopover"
+      class="env-popover"
+    />
 
     <ms-table-adv-search-bar :condition.sync="condition" class="adv-search-bar"
                              v-if="condition.components !== undefined && condition.components.length > 0"
@@ -16,8 +32,6 @@
               :total="total"
               :remember-order="true"
               row-key="id"
-              :reserve-option="true"
-              :page-refresh="pageRefresh"
               :row-order-group-id="projectId"
               @order="search"
               @filter="filterSearch"
@@ -78,7 +92,7 @@
       <ms-table-column prop="passRate" :label="$t('api_test.automation.passing_rate')"
                        show-overflow-tooltip/>
     </ms-table>
-    <ms-table-pagination :change="pageChange" :current-page.sync="currentPage" :page-size.sync="pageSize"
+    <ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
                          :total="total"/>
   </div>
 </template>
@@ -101,6 +115,9 @@ import {
   getCustomTableWidth
 } from "metersphere-frontend/src/utils/tableUtils";
 import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
+import EnvGroupPopover from "@/business/plan/env/EnvGroupPopover";
+import {getApiScenarioEnvByProjectId} from "@/api/remote/api/api-automation";
+import {getUiScenarioEnvByProjectId} from "@/api/remote/ui/ui-automation";
 
 export default {
   name: "RelevanceUiScenarioList",
@@ -114,6 +131,7 @@ export default {
     MsTag,
     MsTableAdvSearchBar,
     MsTableColumn,
+    EnvGroupPopover,
   },
   props: {
     referenced: {
@@ -149,7 +167,7 @@ export default {
       envGroupId: "",
       versionFilters: [],
       fieldsWidth: getCustomTableWidth('TEST_PLAN_UI_SCENARIO_CASE'),
-      pageRefresh: false
+      projectIds: new Set()
     };
   },
   computed: {
@@ -179,11 +197,7 @@ export default {
       this.currentPage = 1;
       this.search();
     },
-    pageChange() {
-      this.search("page");
-    },
-    search(data) {
-      this.pageRefresh = data === "page";
+    search() {
       this.projectEnvMap.clear();
       if (!this.projectId) {
         return;
@@ -251,10 +265,22 @@ export default {
     selectCountChange(data) {
       this.selectRows = this.$refs.scenarioTable.selectRows;
       this.$emit("selectCountChange", data);
+      this.initProjectIds();
     },
     showReport() {
 
-    }
+    },
+    initProjectIds() {
+      this.projectIds.clear();
+      // this.map.clear();
+      this.selectRows.forEach((row) => {
+        getUiScenarioEnvByProjectId(row.id).then((res) => {
+          let data = res.data;
+          data.projectIds.forEach((d) => this.projectIds.add(d));
+          // this.map.set(row.id, data.projectIds);
+        });
+      });
+    },
   }
 };
 </script>
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue b/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue
index 71a0c24a73..603da17b79 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue
@@ -150,6 +150,10 @@ export default {
       let map = this.$refs.apiScenarioList.map;
       let envGroupId = this.$refs.apiScenarioList.envGroupId;
 
+      if (!envMap || envMap.size == 0) {
+        this.$warning(this.$t('api_test.environment.select_environment'));
+        return;
+      }
       selectRows.forEach(row => {
         selectIds.push(row.id);
       })
@@ -181,8 +185,6 @@ export default {
           this.autoCheckStatus();
           this.$refs.baseRelevance.close();
         });
-
-
     },
     autoCheckStatus() { //  检查执行结果，自动更新计划状态
       if (!this.planId) {
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue b/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue
index 706ae3fad2..a01391b7d1 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue
@@ -147,7 +147,8 @@
                            :filters="apiscenariofilters.RESULT_FILTERS"
                            :label="$t('api_test.automation.last_result')">
             <template v-slot:default="{row}">
-              <el-link @click="showReport(row)" :disabled="!row.lastResult || row.lastResult==='PENDING' || row.lastResult==='UnExecute'">
+              <el-link @click="showReport(row)"
+                       :disabled="!row.lastResult || row.lastResult==='PENDING' || row.lastResult==='UnExecute'">
                 <ms-test-plan-api-status :status="row.lastResult==='UnExecute' ? 'PENDING' : row.lastResult"/>
               </el-link>
             </template>
@@ -176,8 +177,8 @@
                 :select-row="this.$refs.table ? this.$refs.table.selectRows : new Set()" ref="batchEdit"
                 @batchEdit="batchEdit"/>
 
-        <ui-run-mode @handleRunBatch="handleRunBatch" ref="runMode" :custom-run-mode="true"
-                     :custom-serial-on-sample-error="true"/>
+    <ui-run-mode @handleRunBatch="handleRunBatch" ref="runMode" :custom-run-mode="true"
+                 :custom-serial-on-sample-error="true" :request="conditionRequest"/>
 
     <ms-task-center ref="taskCenter" :show-menu="false"/>
   </div>
@@ -327,6 +328,8 @@ export default {
         ]
       },
       versionFilters: [],
+      //
+      conditionRequest: {}
     }
   },
   computed: {
@@ -358,14 +361,14 @@ export default {
     },
     search() {
       initCondition(this.condition, this.condition.selectAll);
-      if(this.condition && this.condition.filters && this.condition.filters.last_result){
-        if(this.condition.filters.last_result.length > 0){
+      if (this.condition && this.condition.filters && this.condition.filters.last_result) {
+        if (this.condition.filters.last_result.length > 0) {
           //校验是否含有PENDING
-          if(this.condition.filters.last_result.includes("PENDING")){
+          if (this.condition.filters.last_result.includes("PENDING")) {
             this.condition.filters.last_result = [...this.condition.filters.last_result, "UnExecute"]
           }
           //校验是否含有ERROR
-          if(this.condition.filters.last_result.includes("ERROR")){
+          if (this.condition.filters.last_result.includes("ERROR")) {
             this.condition.filters.last_result = [...this.condition.filters.last_result, "FAIL"]
           }
         }
@@ -437,12 +440,19 @@ export default {
       let rows = this.orderBySelectRows(this.$refs.table.selectRows);
       this.planCaseIds = [];
       rows.forEach(row => {
-        this.planCaseIds.push(row.id);
+        this.planCaseIds.push(row.caseId);
       })
+      this.conditionRequest.id = getUUID();
+      this.conditionRequest.ids = this.planCaseIds;
+      this.conditionRequest.projectId = this.projectId;
+      this.conditionRequest.condition = this.condition;
       this.$refs.runMode.open();
     },
     orderBySelectRows(rows) {
-      let selectIds = Array.from(rows).map(row => row.id);
+      let selectIds = this.$refs.table.selectIds;
+      if (rows) {
+        selectIds = Array.from(rows).map(row => row.id);
+      }
       let array = [];
       for (let i in this.tableData) {
         if (selectIds.indexOf(this.tableData[i].id) !== -1) {
@@ -499,8 +509,8 @@ export default {
                       },
                     },
                   },
-                this.$t("ui.view_config")
-              ),
+                  this.$t("ui.view_config")
+                ),
               ])
             );
             validate = false;
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/UiRunMode.vue b/test-track/frontend/src/business/plan/view/comonents/ui/UiRunMode.vue
index b725451f40..9677599bc6 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/UiRunMode.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/ui/UiRunMode.vue
@@ -8,6 +8,21 @@
   >
     <div class="mode-container">
 
+      <div>
+        <div>{{ $t("commons.environment") }}：</div>
+        <env-select-popover :project-ids="projectIds"
+                            :project-list="projectList"
+                            :project-env-map="projectEnvListMap"
+                            :environment-type="'JSON'"
+                            :has-option-group="false"
+                            :show-env-group="false"
+                            :group-id="runConfig.environmentGroupId"
+                            @setProjectEnvMap="setProjectEnvMap"
+                            ref="envSelectPopover"
+                            class="mode-row"
+        ></env-select-popover>
+      </div>
+
       <!-- 浏览器 -->
       <div class="browser-row wrap">
         <div class="title">{{ $t("ui.browser") }}：</div>
@@ -267,6 +282,7 @@ export default {
       };
       this.runModeVisible = true;
       this.getWsProjects();
+      this.showPopover();
     },
     changeMode() {
       this.runConfig.runWithinResourcePool = false;
diff --git a/test-track/frontend/src/business/utils/track-table-header.js b/test-track/frontend/src/business/utils/track-table-header.js
index 7b33a4f927..85ed7af597 100644
--- a/test-track/frontend/src/business/utils/track-table-header.js
+++ b/test-track/frontend/src/business/utils/track-table-header.js
@@ -88,6 +88,7 @@ const TRACK_HEADER = {
     {id: 'name', key: '2', label: 'api_test.automation.scenario_name'},
     {id: 'versionId', key: 'd', label: 'commons.version'},
     {id: 'level', key: '3', label: 'api_test.automation.case_level'},
+    {id: 'envs', key: '8', label: 'commons.environment'},
     {id: 'tagNames', key: '4', label: 'api_test.automation.tag'},
     {id: 'stepTotal', key: '7', label: 'api_test.automation.step'},
     {id: 'passRate', key: '9', label: 'api_test.automation.passing_rate'},