fix(UI自动化): 筛选变量应用场景卡死

--bug=1020926 --user=张大海 【UI测试】环境-通用配置，筛选应用场景，页面会卡住 https://www.tapd.cn/55049933/s/1316879

framework/sdk-parent/frontend/src/components/environment/EnvironmentHttpConfig.vue

@@ -45,11 +45,57 @@
           </el-input>
         </div>
 
-        <p>{{ $t('api_test.request.headers') }}</p>
-        <el-row>
-          <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
-        </el-row>
-        <ms-api-key-value :items="condition.headers" :isShowEnable="true" :suggestions="headerSuggestions"/>
+        <!-- 接口测试配置       -->
+        <form-section :title="$t('commons.api')" :init-active=true>
+          <p>{{ $t('api_test.request.headers') }}</p>
+          <el-row>
+            <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{
+                $t("commons.batch_add")
+              }}
+            </el-link>
+          </el-row>
+          <ms-api-key-value :items="condition.headers" :isShowEnable="true" :suggestions="headerSuggestions"/>
+        </form-section>
+
+        <!--    UI 配置    -->
+        <form-section :title="$t('commons.ui_test')" :init-active=false v-if="condition.type !== 'MODULE'">
+          <el-row :gutter="10" style="padding-top: 10px;">
+            <el-col :span="6">
+              <!-- 浏览器驱动 -->
+              <span style="margin-right: 10px;">{{ $t("ui.browser") }}</span>
+              <el-select
+                size="mini"
+                v-model="httpConfig.browser"
+                style="width: 100px"
+              >
+                <el-option
+                  v-for="b in browsers"
+                  :key="b.value"
+                  :value="b.value"
+                  :label="b.label"
+                ></el-option>
+              </el-select>
+
+            </el-col>
+            <el-col :span="6">
+              <!-- 性能模式 -->
+              <el-checkbox
+                v-model="httpConfig.headlessEnabled"
+              >
+                <span> {{ $t("ui.performance_mode") }}</span>
+              </el-checkbox>
+              <ms-instructions-icon size="10" :content="$t('ui.per_tip')"/>
+            </el-col>
+          </el-row>
+
+          <!--          当前版本实现免登录是基于 cookie 的但是现在由于安全性问题绝大多数网站都不支持 cookie登录所以先屏蔽了-->
+          <!--          <el-row :gutter="10">-->
+          <!--            <el-col :span="24">-->
+          <!--              <ms-ui-scenario-cookie-table :items="httpConfig.cookie" ref="cookieTable"/>-->
+          <!--            </el-col>-->
+          <!--          </el-row>-->
+        </form-section>
+
         <div style="margin-top: 20px">
           <el-button v-if="!condition.id" type="primary" style="float: right" size="mini" @click="add">
             {{ $t('commons.add') }}
@@ -121,10 +167,12 @@ import {getUUID} from "../../utils";
 import {KeyValue} from "../../model/EnvTestModel";
 import Vue from "vue";
 import BatchAddParameter from "./commons/BatchAddParameter";
+import FormSection from "metersphere-frontend/src/components/form/FormSection";
+import MsInstructionsIcon from 'metersphere-frontend/src/components/MsInstructionsIcon';
 
 export default {
   name: "MsEnvironmentHttpConfig",
-  components: {MsApiKeyValue, MsSelectTree, MsTableOperatorButton, BatchAddParameter},
+  components: {MsApiKeyValue, MsSelectTree, MsTableOperatorButton, BatchAddParameter, FormSection, MsInstructionsIcon},
   props: {
     httpConfig: new HttpConfig(),
     projectId: String,
@@ -165,9 +213,21 @@ export default {
         socket: "",
         domain: "",
         port: 0,
-        headers: [new KeyValue()]
+        headers: [new KeyValue()],
+        headlessEnabled: true,
+        browser: 'CHROME'
       },
-      beforeCondition: {}
+      beforeCondition: {},
+      browsers: [
+        {
+          label: this.$t("chrome"),
+          value: "CHROME",
+        },
+        {
+          label: this.$t("firefox"),
+          value: "FIREFOX",
+        },
+      ],
     };
   },
   watch: {
@@ -289,7 +349,7 @@ export default {
     list() {
       if (this.projectId) {
         this.result = getApiModuleByProjectIdAndProtocol(this.projectId, "HTTP").then((response) => {
-          if (response.data  && response.data !== null) {
+          if (response.data && response.data !== null) {
             this.moduleOptions = response.data;
           }
         });

framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue

@@ -455,28 +455,11 @@ export default {
       });
       this.variables = datas;
     },
-    filterScope(scope) {
-      let datas = [];
-      let variables = _.cloneDeep(this.variables);
-      variables.forEach((item) => {
-        if (scope == "api") {
-          if (
-            item.scope && item.scope != "api"
-          ) {
-            item.hidden = true;
-          } else {
-            item.hidden = undefined;
-          }
-        } else {
-          if (item.scope == scope) {
-            item.hidden = undefined;
-          } else {
-            item.hidden = true;
-          }
-        }
-        datas.push(item);
-      });
-      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);