From 3c86b14de306aa044515c3f2f4b842082c6e0da7 Mon Sep 17 00:00:00 2001
From: "nathan.liu" <yao.liu@fit2cloud.com>
Date: Tue, 26 Jul 2022 14:32:08 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92):=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=89=A7=E8=A1=8C=E6=B5=8B=E8=AF=95=E8=AE=A1?=
 =?UTF-8?q?=E5=88=92=E4=B8=AD=E8=BF=90=E8=A1=8C=E9=85=8D=E7=BD=AE=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1015041 --user=刘瑶 【测试计划】执行测试计划页面样式优化 https://www.tapd.cn/55049933/s/1211843
---
 .../api/automation/scenario/EnvGroup.vue      |   8 +-
 .../api/automation/scenario/EnvPopover.vue    |  15 +-
 .../api/automation/scenario/EnvSelect.vue     |   8 +-
 .../track/plan/common/PlanRunModeWithEnv.vue  | 595 ++++++++++--------
 frontend/src/business/components/xpack        |   2 +-
 frontend/src/i18n/en-US.js                    |   1 +
 frontend/src/i18n/zh-CN.js                    |   1 +
 frontend/src/i18n/zh-TW.js                    |   1 +
 8 files changed, 359 insertions(+), 272 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/EnvGroup.vue b/frontend/src/business/components/api/automation/scenario/EnvGroup.vue
index ef738ff739..f4c47d822b 100644
--- a/frontend/src/business/components/api/automation/scenario/EnvGroup.vue
+++ b/frontend/src/business/components/api/automation/scenario/EnvGroup.vue
@@ -9,7 +9,7 @@
       <span style="margin-left: 8px;">{{$t('workspace.env_group.name')}}</span>
       <i class="el-icon-view icon-view-btn" @click="viewGroup"></i>
     </div>
-    <el-button type="primary" @click="handleConfirm" size="small" class="env-confirm">{{$t('workspace.env_group.confirm')}}</el-button>
+    <el-button type="primary" @click="handleConfirm" size="small" :style="btnStyle" class="env-confirm">{{$t('workspace.env_group.confirm')}}</el-button>
     <el-dialog :visible="visble" append-to-body :title="$t('workspace.env_group.name')" @close="visble = false" style="height: 800px;">
       <template>
         <environment-group style="overflow-y: auto;"
@@ -42,6 +42,12 @@ export default {
       }
     },
     projectIds: Set,
+    btnStyle: {
+      type: Object,
+      default() {
+        return {width: "360px"}
+      }
+    }
   },
   watch: {
     groupId(val) {
diff --git a/frontend/src/business/components/api/automation/scenario/EnvPopover.vue b/frontend/src/business/components/api/automation/scenario/EnvPopover.vue
index e662740c8c..47975e9f04 100644
--- a/frontend/src/business/components/api/automation/scenario/EnvPopover.vue
+++ b/frontend/src/business/components/api/automation/scenario/EnvPopover.vue
@@ -2,7 +2,7 @@
   <el-popover
     v-model="visible"
     :placement="placement"
-    width="400"
+    :width="width"
     :disabled="isReadOnly"
     @show="showPopover"
     trigger="click">
@@ -18,10 +18,11 @@
                 @close="visible = false"
                 @setProjectEnvMap="setProjectEnvMap"
                 v-show="!radio || radio === ENV_TYPE.JSON"
+                :btnStyle="btnStyle"
                 ref="envSelect"/>
     <env-group ref="envGroup" v-show="radio === ENV_TYPE.GROUP && !hasOptionGroup" @close="visible = false"
                :project-ids="projectIds"
-               @setEnvGroup="setEnvGroup" :group-id="groupId"></env-group>
+               @setEnvGroup="setEnvGroup" :group-id="groupId" :btnStyle="btnStyle"></env-group>
     <!-- 对环境组选项进行分类 可用｜不可用 -->
     <env-group-with-option ref="envOptionGroup" v-show="radio === ENV_TYPE.GROUP && hasOptionGroup"
                            @close="visible = false"
@@ -44,6 +45,10 @@ export default {
   name: "EnvPopover",
   components: {EnvGroup, EnvSelect, EnvGroupWithOption},
   props: {
+    width:{
+      type: String,
+      default: "400"
+    },
     envMap: Map,
     projectIds: Set,
     projectList: Array,
@@ -95,6 +100,12 @@ export default {
       default() {
         return false;
       }
+    },
+    btnStyle: {
+      type: Object,
+      default() {
+        return {width: "360px"}
+      }
     }
   },
   data() {
diff --git a/frontend/src/business/components/api/automation/scenario/EnvSelect.vue b/frontend/src/business/components/api/automation/scenario/EnvSelect.vue
index 3703512138..55cfcce2e6 100644
--- a/frontend/src/business/components/api/automation/scenario/EnvSelect.vue
+++ b/frontend/src/business/components/api/automation/scenario/EnvSelect.vue
@@ -23,7 +23,7 @@
       </span>
     </div>
 
-    <el-button type="primary" @click="handleConfirm" size="small" class="env-confirm">{{$t('workspace.env_group.confirm')}}</el-button>
+    <el-button type="primary" @click="handleConfirm" size="small" :style="btnStyle" class="env-confirm">{{$t('workspace.env_group.confirm')}}</el-button>
 
     <!-- 环境配置 -->
     <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
@@ -52,6 +52,12 @@ export default {
       default() {
         return {loading: false}
       }
+    },
+    btnStyle: {
+      type: Object,
+      default() {
+        return {width: "360px"}
+      }
     }
   },
   data() {
diff --git a/frontend/src/business/components/track/plan/common/PlanRunModeWithEnv.vue b/frontend/src/business/components/track/plan/common/PlanRunModeWithEnv.vue
index 59fdc26a81..432560729e 100644
--- a/frontend/src/business/components/track/plan/common/PlanRunModeWithEnv.vue
+++ b/frontend/src/business/components/track/plan/common/PlanRunModeWithEnv.vue
@@ -6,326 +6,387 @@
     @close="close"
     :visible.sync="runModeVisible"
   >
-    <div style="margin-bottom: 10px;">
-      <span class="ms-mode-span">{{ $t("commons.environment") }}：</span>
-      <env-popover :project-ids="projectIds"
-                   :placement="'bottom-start'"
-                   :project-list="projectList"
-                   :project-env-map="projectEnvListMap"
-                   :environment-type.sync="runConfig.environmentType"
-                   :group-id="runConfig.environmentGroupId"
-                   @setEnvGroup="setEnvGroup"
-                   @setProjectEnvMap="setProjectEnvMap"
-                   @showPopover="showPopover"
-                   ref="envPopover" class="env-popover"/>
-    </div>
-
-    <div style="margin-bottom: 10px;" v-if="haveUICase">
-      <span class="ms-mode-span">{{ $t("浏览器") }}：</span>
-      <el-select
-        size="mini"
-        v-model="runConfig.browser"
-        style="margin-right: 30px; width: 100px"
-      >
-        <el-option
-          v-for="b in browsers"
-          :key="b.value"
-          :value="b.value"
-          :label="b.label"
-        ></el-option>
-      </el-select>
-    </div>
-
-    <div>
-      <span class="ms-mode-span">{{ $t("run_mode.title") }}：</span>
-      <el-radio-group v-model="runConfig.mode" @change="changeMode">
-        <el-radio label="serial">{{ $t("run_mode.serial") }}</el-radio>
-        <el-radio label="parallel">{{ $t("run_mode.parallel") }}</el-radio>
-      </el-radio-group>
-    </div>
-    <div class="ms-mode-div" v-if="runConfig.mode === 'serial'">
-      <el-row>
-        <el-col :span="6">
-          <span class="ms-mode-pan">{{ $t("run_mode.other_config") }}：</span>
-        </el-col>
-        <el-col :span="18">
-          <div v-if="testType === 'API'">
-            <el-checkbox v-model="runConfig.runWithinResourcePool" style="padding-right: 10px;">
-              {{ $t('run_mode.run_with_resource_pool') }}
+    <div class="env-container">
+      <div class="run-env-row wrap">
+        <div class="title">{{ $t("commons.environment") }}：</div>
+        <div class="content">
+          <env-popover
+            :project-ids="projectIds"
+            :placement="'bottom-start'"
+            :project-list="projectList"
+            :project-env-map="projectEnvListMap"
+            :environment-type.sync="runConfig.environmentType"
+            :group-id="runConfig.environmentGroupId"
+            @setEnvGroup="setEnvGroup"
+            @setProjectEnvMap="setProjectEnvMap"
+            @showPopover="showPopover"
+            width="300"
+            ref="envPopover"
+            :btnStyle="btnStyle"
+            class="env-popover"
+          />
+        </div>
+      </div>
+      <div class="browser-row wrap">
+        <div class="title">{{ $t("ui.browser") }}：</div>
+        <div class="content">
+          <el-select
+            size="mini"
+            v-model="runConfig.browser"
+            style="margin-right: 30px; width: 100%"
+          >
+            <el-option
+              v-for="b in browsers"
+              :key="b.value"
+              :value="b.value"
+              :label="b.label"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="mode-row wrap">
+        <div class="title">{{ $t("run_mode.title") }}：</div>
+        <div class="content">
+          <el-radio-group
+            v-model="runConfig.mode"
+            @change="changeMode"
+            style="width: 100%"
+          >
+            <el-radio label="serial">{{ $t("run_mode.serial") }}</el-radio>
+            <el-radio label="parallel">{{ $t("run_mode.parallel") }}</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="other-row wrap">
+        <div class="title other-title">{{ $t("run_mode.other_config") }}：</div>
+        <div class="other-content">
+          <!-- 串行 -->
+          <div
+            class="mode-row"
+            v-if="runConfig.mode === 'serial' && testType === 'API'"
+          >
+            <el-checkbox
+              v-model="runConfig.runWithinResourcePool"
+              style="padding-right: 10px"
+            >
+              {{ $t("run_mode.run_with_resource_pool") }}
             </el-checkbox>
-            <el-select :disabled="!runConfig.runWithinResourcePool" v-model="runConfig.resourcePoolId" size="mini">
+            <el-select
+              :disabled="!runConfig.runWithinResourcePool"
+              v-model="runConfig.resourcePoolId"
+              size="mini"
+              style="width: 135px; margin-left: 10px"
+            >
               <el-option
                 v-for="item in resourcePools"
                 :key="item.id"
                 :label="item.name"
-                :value="item.id">
+                :value="item.id"
+              >
               </el-option>
             </el-select>
           </div>
-        </el-col>
-      </el-row>
-    </div>
-    <div class="ms-mode-div" v-if="runConfig.mode === 'parallel'">
-      <el-row>
-        <el-col :span="6">
-          <span class="ms-mode-span">{{ $t("run_mode.other_config") }}：</span>
-        </el-col>
-        <el-col :span="18">
-          <div v-if="testType === 'API'">
-            <el-checkbox v-model="runConfig.runWithinResourcePool" style="padding-right: 10px;">
-              {{ $t('run_mode.run_with_resource_pool') }}
+          <!-- 并行 -->
+          <div
+            class="mode-row"
+            v-if="runConfig.mode === 'parallel' && testType === 'API'"
+          >
+            <el-checkbox
+              v-model="runConfig.runWithinResourcePool"
+              style="padding-right: 10px"
+            >
+              {{ $t("run_mode.run_with_resource_pool") }}
             </el-checkbox>
-            <el-select :disabled="!runConfig.runWithinResourcePool" v-model="runConfig.resourcePoolId" size="mini">
+            <el-select
+              :disabled="!runConfig.runWithinResourcePool"
+              v-model="runConfig.resourcePoolId"
+              size="mini"
+              style="width: 135px; margin-left: 10px"
+            >
               <el-option
                 v-for="item in resourcePools"
                 :key="item.id"
                 :label="item.name"
                 :disabled="!item.api"
-                :value="item.id">
+                :value="item.id"
+              >
               </el-option>
             </el-select>
           </div>
-        </el-col>
-      </el-row>
-    </div>
-    <!-- 失败重试 -->
-    <div class="ms-failure-div" v-if="isHasLicense">
-      <el-row>
-        <el-col :span="6">
-          <span class="ms-mode-span">&nbsp;</span>
-        </el-col>
-        <el-col :span="18">
-          <el-checkbox v-model="runConfig.retryEnable" class="ms-failure-div-right">
-            {{ $t('run_mode.retry_on_failure') }}
-          </el-checkbox>
-          <span v-if="runConfig.retryEnable">
-            <el-tooltip placement="top">
-              <div slot="content">{{ $t('run_mode.retry_message') }}</div>
-              <i class="el-icon-question" style="cursor: pointer"/>
-            </el-tooltip>
-            <span>
-              {{ $t('run_mode.retry') }}
-              <el-input-number :value="runConfig.retryNum" v-model="runConfig.retryNum" :min="1" :max="10000000"
-                               size="mini"/>
-              &nbsp;
-              {{ $t('run_mode.retry_frequency') }}
-            </span>
-          </span>
-        </el-col>
-      </el-row>
-    </div>
-    <div class="ms-failure-div" v-if="runConfig.mode === 'serial'">
-      <el-row>
-        <el-col :span="18" :offset="6">
-          <div>
-            <el-checkbox v-model="runConfig.onSampleError">{{ $t("api_test.fail_to_stop") }}</el-checkbox>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
 
-    <div>
-      <el-row>
-        <el-col :span="18" :offset="6">
-          <div style="margin-top: 10px" v-if="haveUICase">
+          <!-- 失败重试 -->
+          <div class="mode-row" v-if="isHasLicense">
+            <el-checkbox
+              v-model="runConfig.retryEnable"
+              class="ms-failure-div-right"
+            >
+              {{ $t("run_mode.retry_on_failure") }}
+            </el-checkbox>
+            <span v-if="runConfig.retryEnable">
+              <el-tooltip placement="top" style="margin: 0 4px 0 2px">
+                <div slot="content">{{ $t("run_mode.retry_message") }}</div>
+                <i class="el-icon-question" style="cursor: pointer" />
+              </el-tooltip>
+              <span style="margin-left: 10px">
+                {{ $t("run_mode.retry") }}
+                <el-input-number
+                  :value="runConfig.retryNum"
+                  v-model="runConfig.retryNum"
+                  :min="1"
+                  :max="10000000"
+                  size="mini"
+                  style="width: 103px"
+                />
+                &nbsp;
+                {{ $t("run_mode.retry_frequency") }}
+              </span>
+            </span>
+          </div>
+
+          <div class="mode-row" v-if="runConfig.mode === 'serial'">
+            <el-checkbox v-model="runConfig.onSampleError">{{
+              $t("api_test.fail_to_stop")
+            }}</el-checkbox>
+          </div>
+
+          <div class="mode-row" v-if="haveUICase">
             <el-checkbox v-model="runConfig.headlessEnabled">
-              {{ $t("性能模式") }}
+              {{ $t("ui.performance_mode") }}
             </el-checkbox>
           </div>
-        </el-col>
-      </el-row>
+        </div>
+      </div>
     </div>
 
     <template v-slot:footer>
       <div class="dialog-footer" v-if="showSave">
-        <el-button @click="close">{{ $t('commons.cancel') }}</el-button>
+        <el-button @click="close">{{ $t("commons.cancel") }}</el-button>
         <el-dropdown @command="handleCommand" style="margin-left: 5px">
           <el-button type="primary">
-            {{ $t('load_test.save_and_run') }}<i class="el-icon-arrow-down el-icon--right"></i>
+            {{ $t("load_test.save_and_run")
+            }}<i class="el-icon-arrow-down el-icon--right"></i>
           </el-button>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="run">{{ $t('load_test.save_and_run') }}</el-dropdown-item>
-            <el-dropdown-item command="save">{{$t('commons.save')}}</el-dropdown-item>
+            <el-dropdown-item command="run">{{
+              $t("load_test.save_and_run")
+            }}</el-dropdown-item>
+            <el-dropdown-item command="save">{{
+              $t("commons.save")
+            }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
-      <ms-dialog-footer v-else @cancel="close" @confirm="handleRunBatch"/>
+      <ms-dialog-footer v-else @cancel="close" @confirm="handleRunBatch" />
     </template>
   </el-dialog>
 </template>
 
 <script>
-  import MsDialogFooter from "@/business/components/common/components/MsDialogFooter";
-  import EnvPopover from "@/business/components/api/automation/scenario/EnvPopover";
-  import {strMapToObj} from "@/common/js/utils";
-  import {ENV_TYPE} from "@/common/js/constants";
-  import {hasLicense} from "@/common/js/utils";
+import MsDialogFooter from "@/business/components/common/components/MsDialogFooter";
+import EnvPopover from "@/business/components/api/automation/scenario/EnvPopover";
+import { strMapToObj } from "@/common/js/utils";
+import { ENV_TYPE } from "@/common/js/constants";
+import { hasLicense } from "@/common/js/utils";
 
-  export default {
-    name: "MsPlanRunModeWithEnv",
-    components: {EnvPopover, MsDialogFooter},
-    data() {
-      return {
-        runModeVisible: false,
-        testType: null,
-        resourcePools: [],
-        runConfig: {
-          mode: "serial",
-          reportType: "iddReport",
-          onSampleError: false,
-          runWithinResourcePool: false,
-          resourcePoolId: null,
-          envMap: new Map(),
-          environmentGroupId: "",
-          environmentType: ENV_TYPE.JSON,
-          retryEnable: false,
-          retryNum: 1,
-          browser: "CHROME"
+export default {
+  name: "MsPlanRunModeWithEnv",
+  components: { EnvPopover, MsDialogFooter },
+  data() {
+    return {
+      btnStyle: {
+        width: "260px",
+      },
+      runModeVisible: false,
+      testType: null,
+      resourcePools: [],
+      runConfig: {
+        mode: "serial",
+        reportType: "iddReport",
+        onSampleError: false,
+        runWithinResourcePool: false,
+        resourcePoolId: null,
+        envMap: new Map(),
+        environmentGroupId: "",
+        environmentType: ENV_TYPE.JSON,
+        retryEnable: false,
+        retryNum: 1,
+        browser: "CHROME",
+      },
+      isHasLicense: hasLicense(),
+      projectEnvListMap: {},
+      projectList: [],
+      projectIds: new Set(),
+      options: [
+        {
+          value: "confirmAndRun",
+          label: this.$t("load_test.save_and_run"),
         },
-        isHasLicense: hasLicense(),
-        projectEnvListMap: {},
-        projectList: [],
-        projectIds: new Set(),
-        options: [{
-          value: 'confirmAndRun',
-          label: this.$t('load_test.save_and_run')
-        }, {
-          value: 'save',
-          label: this.$t('commons.save')
-        }],
-        value: 'confirmAndRun',
-        browsers: [
-          {
-            label: this.$t("chrome"),
-            value: "CHROME",
-          },
-          {
-            label: this.$t("firefox"),
-            value: "FIREFOX",
-          }
-        ],
+        {
+          value: "save",
+          label: this.$t("commons.save"),
+        },
+      ],
+      value: "confirmAndRun",
+      browsers: [
+        {
+          label: this.$t("chrome"),
+          value: "CHROME",
+        },
+        {
+          label: this.$t("firefox"),
+          value: "FIREFOX",
+        },
+      ],
+    };
+  },
+  props: {
+    planCaseIds: {
+      type: Array,
+    },
+    type: String,
+    planId: String,
+    showSave: {
+      type: Boolean,
+      default: false,
+    },
+    //是否含有ui场景 有 ui 场景就要展示 浏览器选项，性能模式
+    haveUICase: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    open(testType) {
+      this.runModeVisible = true;
+      this.testType = testType;
+      this.getResourcePools();
+      this.getWsProjects();
+    },
+    changeMode() {
+      this.runConfig.onSampleError = false;
+      this.runConfig.runWithinResourcePool = false;
+      this.runConfig.resourcePoolId = null;
+    },
+    close() {
+      this.runConfig = {
+        mode: "serial",
+        reportType: "iddReport",
+        onSampleError: false,
+        runWithinResourcePool: false,
+        resourcePoolId: null,
+        envMap: new Map(),
+        environmentGroupId: "",
+        environmentType: ENV_TYPE.JSON,
+        browser: "CHROME",
       };
+      this.runModeVisible = false;
+      this.$emit("close");
     },
-    props: {
-      planCaseIds: {
-        type: Array,
-      },
-      type: String,
-      planId: String,
-      showSave: {
-        type: Boolean,
-        default: false
-      },
-      //是否含有ui场景 有 ui 场景就要展示 浏览器选项，性能模式
-      haveUICase: {
-        type: Boolean,
-        default: false
-      }
+    handleRunBatch() {
+      this.$emit("handleRunBatch", this.runConfig);
+      this.close();
     },
-    methods: {
-      open(testType) {
-        this.runModeVisible = true;
-        this.testType = testType;
-        this.getResourcePools();
-        this.getWsProjects();
-      },
-      changeMode() {
-        this.runConfig.onSampleError = false;
-        this.runConfig.runWithinResourcePool = false;
-        this.runConfig.resourcePoolId = null;
-      },
-      close() {
-        this.runConfig = {
-          mode: "serial",
-          reportType: "iddReport",
-          onSampleError: false,
-          runWithinResourcePool: false,
-          resourcePoolId: null,
-          envMap: new Map(),
-          environmentGroupId: "",
-          environmentType: ENV_TYPE.JSON,
-          browser: "CHROME"
-        };
-        this.runModeVisible = false;
-        this.$emit('close');
-      },
-      handleRunBatch() {
-        this.$emit("handleRunBatch", this.runConfig);
-        this.close();
-      },
-      getResourcePools() {
-        this.result = this.$get('/testresourcepool/list/quota/valid', response => {
+    getResourcePools() {
+      this.result = this.$get(
+        "/testresourcepool/list/quota/valid",
+        (response) => {
           this.resourcePools = response.data;
-        });
-      },
-      setProjectEnvMap(projectEnvMap) {
-        this.runConfig.envMap = strMapToObj(projectEnvMap);
-      },
-      setEnvGroup(id) {
-        this.runConfig.environmentGroupId = id;
-      },
-      getWsProjects() {
-        this.$get("/project/getOwnerProjects", res => {
-          this.projectList = res.data;
-        })
-      },
-      showPopover() {
-        this.projectIds.clear();
-        let param = undefined;
-        let url = "";
-        if (this.type === 'apiCase') {
-          url = '/test/plan/api/case/env';
-          param = this.planCaseIds;
-        } else if (this.type === 'apiScenario') {
-          url = '/test/plan/api/scenario/env';
-          param = this.planCaseIds;
-        } else if (this.type === 'plan') {
-          url = '/test/plan/case/env';
-          param = {id: this.planId};
         }
-        this.$post(url, param, res => {
-          let data = res.data;
-          if (data) {
-            this.projectEnvListMap = data;
-            for (let d in data) {
-              this.projectIds.add(d);
-            }
+      );
+    },
+    setProjectEnvMap(projectEnvMap) {
+      this.runConfig.envMap = strMapToObj(projectEnvMap);
+    },
+    setEnvGroup(id) {
+      this.runConfig.environmentGroupId = id;
+    },
+    getWsProjects() {
+      this.$get("/project/getOwnerProjects", (res) => {
+        this.projectList = res.data;
+      });
+    },
+    showPopover() {
+      this.projectIds.clear();
+      let param = undefined;
+      let url = "";
+      if (this.type === "apiCase") {
+        url = "/test/plan/api/case/env";
+        param = this.planCaseIds;
+      } else if (this.type === "apiScenario") {
+        url = "/test/plan/api/scenario/env";
+        param = this.planCaseIds;
+      } else if (this.type === "plan") {
+        url = "/test/plan/case/env";
+        param = { id: this.planId };
+      }
+      this.$post(url, param, (res) => {
+        let data = res.data;
+        if (data) {
+          this.projectEnvListMap = data;
+          for (let d in data) {
+            this.projectIds.add(d);
           }
-          this.$refs.envPopover.openEnvSelect();
-        });
-      },
-      handleCommand(command) {
-        if (this.runConfig.runWithinResourcePool && this.runConfig.resourcePoolId == null) {
-          this.$warning(this.$t('workspace.env_group.please_select_run_within_resource_pool'));
-          return;
-        }
-        if (command === 'run') {
-          this.runConfig.isRun = true
-          this.handleRunBatch();
-        } else {
-          this.runConfig.isRun = false
-          this.handleRunBatch();
         }
+        this.$refs.envPopover.openEnvSelect();
+      });
+    },
+    handleCommand(command) {
+      if (
+        this.runConfig.runWithinResourcePool &&
+        this.runConfig.resourcePoolId == null
+      ) {
+        this.$warning(
+          this.$t("workspace.env_group.please_select_run_within_resource_pool")
+        );
+        return;
+      }
+      if (command === "run") {
+        this.runConfig.isRun = true;
+        this.handleRunBatch();
+      } else {
+        this.runConfig.isRun = false;
+        this.handleRunBatch();
       }
     },
-  };
+  },
+};
 </script>
 
 <style scoped>
-  .ms-mode-span {
-    margin-right: 10px;
-  }
+.env-container .title {
+  width: 100px;
+  min-width: 100px;
+  text-align: right;
+  padding-right: 10px;
+}
+.env-container .content {
+  width: 163px;
+}
 
-  .ms-mode-div {
-    margin-top: 20px;
-  }
+.wrap {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px 5px 10px;
+}
 
-  .ms-failure-div {
-    margin-top: 10px;
-  }
+/deep/.content .el-popover__reference {
+  width: 100%;
+}
 
-  .ms-failure-div-right {
-    padding-right: 10px;
-  }
+.mode-row {
+  margin-top: 10px;
+}
 
+.other-title {
+  height: 100%;
+  margin-top: 25px;
+  align-items: flex-start;
+}
+.other-content {
+  height: 100%;
+}
+
+.other-row {
+  height: 125px;
+}
 </style>
diff --git a/frontend/src/business/components/xpack b/frontend/src/business/components/xpack
index 298d8ad3fa..2e055b3fa8 160000
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@@ -1 +1 @@
-Subproject commit 298d8ad3fa5f305cb8c70dd01bc26aea01d2f099
+Subproject commit 2e055b3fa8c7f24b2dfa7ec1e3ab39fd4f072007
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 6fc032b36c..3fcf5fd53a 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -3350,5 +3350,6 @@ export default {
     valiate_fail: "Validate fail",
     check_subitem: 'check subitem',
     pause: 'Pause',
+    browser: "Browser",
   }
 };
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index cccc8e26cf..1675b585eb 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -3359,5 +3359,6 @@ export default {
     check_element: "请勾选元素",
     check_subitem: '请选择子分类',
     pause: '等待时间',
+    browser: "浏览器",
   }
 };
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 723e44a45d..9364906630 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -3336,5 +3336,6 @@ export default {
     cmdExtractElement: "提取元素信息",
     valiate_fail: "校驗失敗，請檢查必填項",
     pause: '等待時間',
+    browser: "瀏覽器",
   }
 };