refactor(环境组件): 环境组件重构&全局调整

frontend/src/components/business/ms-assertion/comp/ScriptTab.vue

@@ -7,10 +7,6 @@
 
   import conditionContent from '@/views/api-test/components/condition/content.vue';
 
-  import { getEnvironment } from '@/api/modules/api-test/common';
-  import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore';
-
-  const store = useProjectEnvStore();
   interface ScriptItem {
     [key: string]: any;
   }
@@ -31,26 +27,12 @@
 
   const condition = useVModel(props, 'data', emit);
 
-  const currentEnvConfig = ref({});
-
-  async function initEnvironment() {
-    if (store.currentId) {
-      currentEnvConfig.value = await getEnvironment(store.currentId);
-    }
-  }
-  /** 向孙组件提供属性 */
-  provide('currentEnvConfig', readonly(currentEnvConfig));
-
   /**
    * 删除列表项
    */
   function deleteItem(id: string | number) {
     emit('deleteScriptItem', id);
   }
-
-  onBeforeMount(() => {
-    initEnvironment();
-  });
 </script>
 
 <style lang="less" scoped></style>

frontend/src/components/business/ms-environment-select/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <a-select
+      v-model:model-value="currentEnv"
+      :options="envOptions"
+      class="!w-[200px] pl-0 pr-[8px]"
+      :loading="envLoading"
+      allow-search
+      @popup-visible-change="popupVisibleChange"
+    >
+      <template #prefix>
+        <div class="flex cursor-pointer p-[8px]" @click.stop="goEnv">
+          <svg-icon width="14px" height="14px" :name="'icon_env'" class="text-[var(--color-text-4)]" />
+        </div>
+      </template>
+    </a-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { SelectOptionData } from '@arco-design/web-vue';
+
+  import useOpenNewPage from '@/hooks/useOpenNewPage';
+  import useAppStore from '@/store/modules/app';
+
+  import { ProjectManagementRouteEnum } from '@/enums/routeEnum';
+
+  const props = defineProps<{
+    env?: string;
+  }>();
+
+  const appStore = useAppStore();
+  const { openNewPage } = useOpenNewPage();
+
+  const envLoading = ref(false);
+  const envOptions = ref<SelectOptionData[]>([]);
+  const currentEnv = computed({
+    get: () => appStore.currentEnvConfig?.id || '',
+    set: (val: string) => {
+      appStore.setEnvConfig(val);
+    },
+  });
+
+  watch(
+    () => props.env,
+    (val) => {
+      if (val) {
+        appStore.setEnvConfig(val);
+      }
+    }
+  );
+
+  async function initEnvList() {
+    try {
+      envLoading.value = true;
+      await appStore.initEnvList(props.env);
+      envOptions.value = appStore.envList.map((item) => ({
+        label: item.name,
+        value: item.id,
+      }));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      envLoading.value = false;
+    }
+  }
+
+  async function popupVisibleChange(visible: boolean) {
+    if (visible) {
+      await initEnvList();
+    }
+  }
+
+  function goEnv() {
+    openNewPage(ProjectManagementRouteEnum.PROJECT_MANAGEMENT_ENVIRONMENT_MANAGEMENT);
+  }
+
+  onBeforeMount(() => {
+    initEnvList();
+  });
+</script>
+
+<style lang="less" scoped>
+  .ms-input-group--prepend();
+  :deep(.arco-select-view-prefix) {
+    margin-right: 8px;
+    padding-right: 0;
+    border-right: 1px solid var(--color-text-input-border);
+  }
+</style>

frontend/src/components/pure/ms-jsonpath-picker/index.vue

@@ -75,9 +75,7 @@
             'pick',
             jsonPath.value,
             json.value,
-            JSONPath({ json: json.value, path: jsonPath.value }).map((e) =>
+            JSONPath({ json: json.value, path: jsonPath.value }).map((e) => `${e}`.replace(/Number\(([^)]+)\)/g, '$1'))
-              e.toString().replace(/Number\(([^)]+)\)/g, '$1')
-            )
           );
         }
       }, 0);

frontend/src/components/pure/ms-table/base-table.vue

@@ -665,7 +665,6 @@
       }
     }
     .setting-icon {
-      margin-left: 16px;
       color: var(--color-text-4);
       background-color: var(--color-text-10);
       cursor: pointer;

frontend/src/store/modules/app/index.ts

@@ -5,10 +5,11 @@ import { cloneDeep } from 'lodash-es';
 
 import type { BreadcrumbItem } from '@/components/business/ms-breadcrumb/types';
 
+import { getEnvironment, getEnvList } from '@/api/modules/api-test/common';
 import { getProjectInfo } from '@/api/modules/project-management/basicInfo';
 import { getProjectList } from '@/api/modules/project-management/project';
 import { getPageConfig } from '@/api/modules/setting/config';
-import { getPackageType, getSystemVersion, getUserHasProjectPermission } from '@/api/modules/system';
+import { getPackageType, getSystemVersion } from '@/api/modules/system';
 import { getMenuList } from '@/api/modules/user';
 import defaultSettings from '@/config/settings.json';
 import { useI18n } from '@/hooks/useI18n';
@@ -65,6 +66,8 @@ const useAppStore = defineStore('app', {
     packageType: '',
     projectList: [] as ProjectListItem[],
     ordList: [],
+    envList: [],
+    currentEnvConfig: undefined,
   }),
 
   getters: {
@@ -352,6 +355,30 @@ const useAppStore = defineStore('app', {
         console.log(error);
       }
     },
+    async setEnvConfig(env: string) {
+      try {
+        const res = await getEnvironment(env);
+        this.currentEnvConfig = {
+          ...res,
+          id: env,
+          name: this.envList.find((item) => item.id === env)?.name || '',
+        };
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
+    },
+    async initEnvList(env?: string) {
+      try {
+        this.envList = await getEnvList(this.currentProjectId);
+        if (this.envList.findIndex((item) => item.id === this.currentEnvConfig?.id) === -1) {
+          this.setEnvConfig(env || this.envList[0]?.id);
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
+    },
   },
   persist: {
     paths: ['currentOrgId', 'currentProjectId', 'pageConfig'],

frontend/src/store/modules/app/types.ts

@@ -1,6 +1,7 @@
 import type { MsFileItem } from '@/components/pure/ms-upload/types';
 import type { BreadcrumbItem } from '@/components/business/ms-breadcrumb/types';
 
+import { EnvConfig, EnvironmentItem } from '@/models/projectManagement/environmental';
 import type { LoginConfig, PageConfig, PlatformConfig, ThemeConfig } from '@/models/setting/config';
 import { ProjectListItem } from '@/models/setting/project';
 
@@ -40,6 +41,8 @@ export interface AppState {
   packageType: string;
   projectList: ProjectListItem[];
   ordList: { id: string; name: string }[];
+  envList: EnvironmentItem[];
+  currentEnvConfig?: EnvConfig; // 当前环境配置信息
 }
 
 export interface UploadFileTaskState {

frontend/src/store/modules/setting/useProjectEnvStore.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
 import { cloneDeep } from 'lodash-es';
-import localforage from 'localforage';
 
 import { getDetailEnv, getGlobalParamDetail } from '@/api/modules/project-management/envManagement';
 import useLocalForage from '@/hooks/useLocalForage';

frontend/src/views/api-test/components/condition/content.vue

@@ -549,7 +549,6 @@
 
   const { t } = useI18n();
 
-  const currentEnvConfig = inject<Ref<EnvConfig>>('currentEnvConfig');
   const condition = defineModel<ExecuteConditionProcessor>('data', {
     required: true,
   });
@@ -557,10 +556,10 @@
   function filterDataSource() {
     if (condition.value.processorType === RequestConditionProcessor.SQL && condition.value.dataSourceId) {
       // 如果是SQL类型的条件且已选数据源，需要根据环境切换数据源
-      const dataSourceItem = currentEnvConfig?.value.dataSources.find(
+      const dataSourceItem = appStore.currentEnvConfig?.dataSources.find(
         (item) => item.dataSource === condition.value.dataSourceName
       );
-      if (currentEnvConfig?.value.dataSources.length === 0) {
+      if (appStore.currentEnvConfig?.dataSources.length === 0) {
         // 如果没有数据源，就清除已选的数据源
         condition.value.dataSourceName = '';
         condition.value.dataSourceId = '';
@@ -568,16 +567,16 @@
         // 每次初始化都去查找一下最新的数据源，因为切换环境的时候数据源也需要切换
         condition.value.dataSourceName = dataSourceItem.dataSource;
         condition.value.dataSourceId = dataSourceItem.id;
-      } else if (currentEnvConfig && currentEnvConfig.value.dataSources.length > 0) {
+      } else if (appStore.currentEnvConfig && appStore.currentEnvConfig?.dataSources.length > 0) {
         // 如果没有找到，就默认取第一个数据源
-        condition.value.dataSourceName = currentEnvConfig.value.dataSources[0].dataSource;
+        condition.value.dataSourceName = appStore.currentEnvConfig?.dataSources[0].dataSource;
-        condition.value.dataSourceId = currentEnvConfig.value.dataSources[0].id;
+        condition.value.dataSourceId = appStore.currentEnvConfig?.dataSources[0].id;
       }
     }
   }
 
   watch(
-    () => currentEnvConfig?.value,
+    () => appStore.currentEnvConfig?.id,
     () => {
       filterDataSource();
     },

frontend/src/views/api-test/components/environmentSelect.vue

@@ -1,136 +0,0 @@
-<template>
-  <div>
-    <a-select
-      v-model:model-value="innerCurrentEnv"
-      :options="envOptions"
-      class="!w-[200px] pl-0 pr-[8px]"
-      :loading="envLoading"
-      allow-search
-      @change="(val) => initEnvironment(val as string)"
-      @popup-visible-change="popupVisibleChange"
-    >
-      <template #prefix>
-        <div class="flex cursor-pointer p-[8px]" @click.stop="goEnv">
-          <svg-icon width="14px" height="14px" :name="'icon_env'" class="text-[var(--color-text-4)]" />
-        </div>
-      </template>
-    </a-select>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { SelectOptionData } from '@arco-design/web-vue';
-
-  import { getEnvironment, getEnvList } from '@/api/modules/api-test/common';
-  import useOpenNewPage from '@/hooks/useOpenNewPage';
-  import useAppStore from '@/store/modules/app';
-
-  import { EnvConfig } from '@/models/projectManagement/environmental';
-  import { ProjectManagementRouteEnum } from '@/enums/routeEnum';
-
-  const props = withDefaults(
-    defineProps<{
-      currentEnv?: string;
-      setDefaultEnv?: boolean; // 是否设置默认选中环境，当传入的currentEnv为空时根据此属性判断是否需要将currentEnv设置为第一个环境
-    }>(),
-    {
-      setDefaultEnv: true,
-    }
-  );
-  const emit = defineEmits<{
-    (e: 'update:currentEnv', val: string): void;
-  }>();
-
-  const appStore = useAppStore();
-  const { openNewPage } = useOpenNewPage();
-
-  const innerCurrentEnv = ref(props.currentEnv || '');
-  const currentEnvConfig = defineModel<EnvConfig>('currentEnvConfig', {
-    default: {},
-  });
-  const envLoading = ref(false);
-  const envOptions = ref<SelectOptionData[]>([]);
-
-  async function initEnvironment(id: string) {
-    try {
-      const res = await getEnvironment(id);
-      currentEnvConfig.value = {
-        ...res,
-        id,
-        name: envOptions.value.find((item) => item.value === id)?.label || '',
-      };
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-    }
-  }
-
-  async function initEnvList() {
-    try {
-      envLoading.value = true;
-      const res = await getEnvList(appStore.currentProjectId);
-      envOptions.value = res.map((item) => ({
-        label: item.name,
-        value: item.id,
-      }));
-      if (!innerCurrentEnv.value) {
-        innerCurrentEnv.value = res[0]?.id;
-      }
-      initEnvironment(innerCurrentEnv.value || res[0]?.id);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-    } finally {
-      envLoading.value = false;
-    }
-  }
-
-  async function popupVisibleChange(visible: boolean) {
-    if (visible) {
-      await initEnvList();
-    }
-  }
-
-  function goEnv() {
-    openNewPage(ProjectManagementRouteEnum.PROJECT_MANAGEMENT_ENVIRONMENT_MANAGEMENT);
-  }
-
-  watch(
-    () => props.currentEnv,
-    (val) => {
-      if (!val) {
-        if (props.setDefaultEnv) {
-          innerCurrentEnv.value = (envOptions.value[0]?.value as string) || '';
-          initEnvironment((envOptions.value[0]?.value as string) || '');
-        }
-      } else {
-        innerCurrentEnv.value = val;
-        initEnvironment(val);
-      }
-    }
-  );
-
-  watch(
-    () => innerCurrentEnv.value,
-    (val) => {
-      emit('update:currentEnv', val);
-    }
-  );
-
-  onBeforeMount(() => {
-    initEnvList();
-  });
-
-  defineExpose({
-    currentEnvConfig,
-  });
-</script>
-
-<style lang="less" scoped>
-  .ms-input-group--prepend();
-  :deep(.arco-select-view-prefix) {
-    margin-right: 8px;
-    padding-right: 0;
-    border-right: 1px solid var(--color-text-input-border);
-  }
-</style>

frontend/src/views/api-test/components/fastExtraction/index.vue

@@ -248,7 +248,7 @@
             JSONPath({
               json: parseJson.value,
               path: expressionForm.value.expression,
-            })?.map((e) => e.toString().replace(/Number\(([^)]+)\)/g, '$1')) || [];
+            })?.map((e) => `${e}`.replace(/Number\(([^)]+)\)/g, '$1')) || [];
         } catch (error) {
           matchResult.value = JSONPath({ json: props.response || '', path: expressionForm.value.expression }) || [];
         }

frontend/src/views/api-test/components/quoteSqlSourceDrawer.vue

@@ -40,8 +40,7 @@
 
   import { getEnvironment } from '@/api/modules/api-test/common';
   import { useI18n } from '@/hooks/useI18n';
-
+  import useAppStore from '@/store/modules/app';
-  import { EnvConfig } from '@/models/projectManagement/environmental';
 
   const props = defineProps<{
     visible: boolean;
@@ -52,10 +51,10 @@
     (e: 'apply', value: any): void;
   }>();
 
+  const appStore = useAppStore();
   const { t } = useI18n();
 
   /** 接收祖先组件提供的属性 */
-  const currentEnvConfig = inject<Ref<EnvConfig>>('currentEnvConfig');
   const innerVisible = useVModel(props, 'visible', emit);
   const keyword = ref('');
   const selectedKey = ref(props.selectedKey || '');
@@ -112,12 +111,13 @@
       const res = await getEnvironment(envId);
       propsRes.value.data = cloneDeep(res.dataSources) as any[];
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }
 
   watch(
-    () => currentEnvConfig?.value,
+    () => appStore.currentEnvConfig,
     (config) => {
       if (config && config.id) {
         initEnvironment(config.id);
@@ -131,20 +131,20 @@
   watch(
     () => innerVisible.value,
     (val) => {
-      if (val && currentEnvConfig?.value.id) {
+      if (val && appStore.currentEnvConfig?.id) {
-        initEnvironment(currentEnvConfig.value.id);
+        initEnvironment(appStore.currentEnvConfig?.id);
       }
     }
   );
 
   function searchDataSource() {
-    propsRes.value.data = cloneDeep(currentEnvConfig?.value.dataSources) as any[];
+    propsRes.value.data = cloneDeep(appStore.currentEnvConfig?.dataSources) as any[];
     if (keyword.value.trim() !== '') {
-      propsRes.value.data = currentEnvConfig?.value.dataSources.filter((e) =>
+      propsRes.value.data = appStore.currentEnvConfig?.dataSources.filter((e) =>
         e.dataSource.includes(keyword.value)
       ) as any[];
     } else {
-      propsRes.value.data = cloneDeep(currentEnvConfig?.value.dataSources) as any[];
+      propsRes.value.data = cloneDeep(appStore.currentEnvConfig?.dataSources) as any[];
     }
   }
 

frontend/src/views/api-test/components/requestComposition/index.vue

@@ -530,7 +530,6 @@
     isDefinition?: boolean; // 是否是接口定义模式
     hideResponseLayoutSwitch?: boolean; // 是否隐藏响应体的布局切换
     otherParams?: Record<string, any>; // 保存请求时的其他参数
-    currentEnvConfig?: EnvConfig;
     executeApi?: (params: ExecuteRequestParams) => Promise<any>; // 执行接口
     localExecuteApi?: (url: string, params: ExecuteRequestParams) => Promise<any>; // 本地执行接口
     createApi?: (...args) => Promise<any>; // 创建接口
@@ -1147,7 +1146,7 @@
     return {
       id: requestVModel.value.id.toString(),
       reportId: reportId.value,
-      environmentId: props.currentEnvConfig?.id || '',
+      environmentId: appStore.currentEnvConfig?.id || '',
       name: requestName,
       moduleId: requestModuleId,
       ...apiDefinitionParams,
@@ -1517,7 +1516,7 @@
               ...definitionParams,
               ...saveCaseModalForm.value,
               projectId: appStore.currentProjectId,
-              environmentId: props.currentEnvConfig?.id || '',
+              environmentId: appStore.currentEnvConfig?.id || '',
               apiDefinitionId: requestVModel.value.id,
             };
             await addCase(params);

frontend/src/views/api-test/management/components/management/api/apiTable.vue

@@ -482,7 +482,7 @@
       slotName: 'action',
       dataIndex: 'operation',
       fixed: 'right',
-      width: hasOperationPermission.value ? 220 : 50,
+      width: hasOperationPermission.value ? 200 : 50,
     },
   ];
 

frontend/src/views/api-test/management/components/management/api/index.vue

@@ -92,7 +92,6 @@
             :file-save-as-source-id="activeApiTab.id"
             :file-module-options-api="getTransferOptions"
             :file-save-as-api="transferFile"
-            :current-env-config="currentEnvConfig"
             is-definition
             @add-done="handleAddDone"
           />
@@ -184,7 +183,6 @@
   const { openModal } = useModal();
 
   const refreshModuleTree: (() => Promise<any>) | undefined = inject('refreshModuleTree');
-  const currentEnvConfig = inject<Ref<EnvConfig>>('currentEnvConfig');
   const apiTabs = defineModel<RequestParam[]>('apiTabs', {
     required: true,
   });

frontend/src/views/api-test/management/components/management/case/caseDetail.vue

@@ -3,7 +3,7 @@
     <a-tabs v-model:active-key="activeKey" class="h-full px-[16px]" animation lazy-load @change="changeActiveKey">
       <template #extra>
         <div class="flex gap-[12px]">
-          <environmentSelect v-if="props.isDrawer" v-model:current-env="environmentIdByDrawer" />
+          <MsEnvironmentSelect v-if="props.isDrawer" :env="environmentIdByDrawer" />
           <executeButton
             ref="executeRef"
             v-permission="['PROJECT_API_DEFINITION_CASE:READ+EXECUTE']"
@@ -98,10 +98,10 @@
   import MsDetailCard from '@/components/pure/ms-detail-card/index.vue';
   import caseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import type { CaseLevel } from '@/components/business/ms-case-associate/types';
+  import MsEnvironmentSelect from '@/components/business/ms-environment-select/index.vue';
   import detailTab from '../api/preview/detail.vue';
   import createAndEditCaseDrawer from './createAndEditCaseDrawer.vue';
   import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
-  import environmentSelect from '@/views/api-test/components/environmentSelect.vue';
   import executeButton from '@/views/api-test/components/executeButton.vue';
   import { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
   import TabCaseChangeHistory from '@/views/api-test/management/components/management/case/tabContent/tabCaseChangeHistory.vue';
@@ -112,10 +112,10 @@
   import { debugCase, deleteCase, runCase, toggleFollowCase } from '@/api/modules/api-test/management';
   import { getSocket } from '@/api/modules/project-management/commonScript';
   import useModal from '@/hooks/useModal';
+  import useAppStore from '@/store/modules/app';
   import { getGenerateId } from '@/utils';
 
   import { ProtocolItem } from '@/models/apiTest/common';
-  import { EnvConfig } from '@/models/projectManagement/environmental';
   import { RequestMethods, ScenarioStepType } from '@/enums/apiEnum';
 
   import { defaultResponse } from '@/views/api-test/components/config';
@@ -129,6 +129,7 @@
     (e: 'deleteCase', id: string): void;
   }>();
 
+  const appStore = useAppStore();
   const { copy, isSupported } = useClipboard({ legacy: true });
   const { t } = useI18n();
   const { openModal } = useModal();
@@ -221,11 +222,6 @@
 
   const protocols = inject<Ref<ProtocolItem[]>>('protocols');
 
-  const currentEnvConfigByInject = inject<Ref<EnvConfig>>('currentEnvConfig');
-  const environmentId = computed(() =>
-    props.isDrawer ? environmentIdByDrawer.value : currentEnvConfigByInject?.value?.id
-  );
-
   const executeHistoryRef = ref<InstanceType<typeof TabCaseExecuteHistory>>();
   function changeActiveKey(val: string | number) {
     if (val === 'executeHistory') {
@@ -275,7 +271,7 @@
       let res;
       const params = {
         id: caseDetail.value.id as string,
-        environmentId: environmentId.value,
+        environmentId: appStore.currentEnvConfig?.id || '',
         frontendDebug: executeType === 'localExec',
         reportId: reportId.value,
         apiDefinitionId: caseDetail.value.apiDefinitionId,

frontend/src/views/api-test/management/components/management/case/caseTable.vue

@@ -585,7 +585,7 @@
       slotName: 'operation',
       dataIndex: 'operation',
       fixed: 'right',
-      width: hasOperationPermission.value ? 220 : 50,
+      width: hasOperationPermission.value ? 200 : 50,
     },
   ];
   const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(getCasePage, {

frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue

@@ -34,7 +34,7 @@
                 :max-length="255"
                 show-word-limit
               />
-              <environmentSelect ref="environmentSelectRef" v-model:current-env="environmentId" />
+              <MsEnvironmentSelect ref="environmentSelectRef" :env="environmentId" />
               <executeButton
                 ref="executeRef"
                 v-permission="['PROJECT_API_DEFINITION_CASE:READ+EXECUTE']"
@@ -82,7 +82,6 @@
           :file-save-as-source-id="detailForm.id"
           :file-module-options-api="getTransferOptionsCase"
           :file-save-as-api="transferFileCase"
-          :current-env-config="currentEnvConfig"
           is-definition
           @execute="handleExecute"
         />
@@ -100,9 +99,9 @@
   import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
   import caseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import type { CaseLevel } from '@/components/business/ms-case-associate/types';
+  import MsEnvironmentSelect from '@/components/business/ms-environment-select/index.vue';
   import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
   import apiStatus from '@/views/api-test/components/apiStatus.vue';
-  import environmentSelect from '@/views/api-test/components/environmentSelect.vue';
   import executeButton from '@/views/api-test/components/executeButton.vue';
   import requestComposition, { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
 
@@ -166,8 +165,7 @@
     },
   ]);
 
-  const currentEnvConfig = inject<Ref<EnvConfig>>('currentEnvConfig');
+  const environmentId = ref(appStore.currentEnvConfig?.id);
-  const environmentId = ref(currentEnvConfig?.value?.id);
 
   const formRef = ref<FormInstance>();
   const requestCompositionRef = ref<InstanceType<typeof requestComposition>>();
@@ -214,7 +212,7 @@
         detailForm.value.name = detailForm.value.name.slice(0, 255);
       }
     }
-    environmentId.value = currentEnvConfig?.value?.id;
+    environmentId.value = appStore.currentEnvConfig?.id;
     // 编辑
     if (!isCopy && record?.id) {
       isEdit.value = true;
@@ -361,10 +359,6 @@
     detailForm.value.executeLoading = false;
   }
 
-  const environmentSelectRef = ref<InstanceType<typeof environmentSelect>>();
-  const currentEnvConfigByDrawer = computed<EnvConfig | undefined>(() => environmentSelectRef.value?.currentEnvConfig);
-  provide('currentEnvConfig', readonly(currentEnvConfigByDrawer));
-
   defineExpose({
     open,
   });

frontend/src/views/api-test/management/components/management/index.vue

@@ -28,11 +28,10 @@
         </a-tooltip>
       </template>
     </MsEditableTab>
-    <environmentSelect
+    <MsEnvironmentSelect
       v-show="activeApiTab.id !== 'all'"
       ref="environmentSelectRef"
-      v-model:current-env="activeApiTab.environmentId"
+      :env="activeApiTab.environmentId"
-      :set-default-env="false"
     />
   </div>
   <api
@@ -66,10 +65,10 @@
   import { cloneDeep } from 'lodash-es';
 
   import MsEditableTab from '@/components/pure/ms-editable-tab/index.vue';
+  import MsEnvironmentSelect from '@/components/business/ms-environment-select/index.vue';
   import api from './api/index.vue';
   import apiCase from './case/index.vue';
   import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
-  import environmentSelect from '@/views/api-test/components/environmentSelect.vue';
   import { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
 
   // import MockTable from '@/views/api-test/management/components/management/mock/mockTable.vue';
@@ -82,7 +81,6 @@
 
   import { ProtocolItem } from '@/models/apiTest/common';
   import { ModuleTreeNode } from '@/models/common';
-  import { EnvConfig } from '@/models/projectManagement/environmental';
   import {
     RequestAuthType,
     RequestComposition,
@@ -306,9 +304,6 @@
     }
   }
 
-  const environmentSelectRef = ref<InstanceType<typeof environmentSelect>>();
-  const currentEnvConfig = computed<EnvConfig | undefined>(() => environmentSelectRef.value?.currentEnvConfig);
-
   onBeforeMount(() => {
     initMemberOptions();
     initProtocolList();
@@ -322,7 +317,6 @@
   ]);
 
   /** 向孙组件提供属性 */
-  provide('currentEnvConfig', readonly(currentEnvConfig));
   provide('defaultCaseParams', readonly(defaultCaseParams));
   provide('protocols', readonly(protocols));
 

frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue

@@ -53,9 +53,9 @@
           v-if="!props.step || props.step?.stepType === ScenarioStepType.CUSTOM_REQUEST"
           class="customApiDrawer-title-right flex items-center gap-[16px]"
         >
-          <a-tooltip :content="currentEnvConfig?.name" :disabled="!currentEnvConfig?.name">
+          <a-tooltip :content="appStore.currentEnvConfig?.name" :disabled="!appStore.currentEnvConfig?.name">
             <div class="one-line-text max-w-[250px] text-[14px] font-normal text-[var(--color-text-4)]">
-              {{ t('apiScenario.env', { name: currentEnvConfig?.name }) }}
+              {{ t('apiScenario.env', { name: appStore.currentEnvConfig?.name }) }}
             </div>
           </a-tooltip>
           <a-select
@@ -143,7 +143,7 @@
                 @change="handleUrlChange"
               >
                 <template v-if="showEnvPrefix" #prefix>
-                  {{ currentEnvConfig?.httpConfig.find((e) => e.type === 'NONE')?.url }}
+                  {{ appStore.currentEnvConfig?.httpConfig.find((e) => e.type === 'NONE')?.url }}
                 </template>
               </a-input>
             </a-input-group>
@@ -397,7 +397,6 @@
     RequestTaskResult,
   } from '@/models/apiTest/common';
   import { ScenarioStepFileParams, ScenarioStepItem } from '@/models/apiTest/scenario';
-  import { EnvConfig } from '@/models/projectManagement/environmental';
   import {
     RequestAuthType,
     RequestBodyFormat,
@@ -483,7 +482,6 @@
 
   // 注入祖先组件提供的属性
   const scenarioId = inject<string | number>('scenarioId');
-  const currentEnvConfig = inject<Ref<EnvConfig>>('currentEnvConfig');
   const hasLocalExec = inject<Ref<boolean>>('hasLocalExec');
   const isPriorityLocalExec = inject<Ref<boolean>>('isPriorityLocalExec');
 
@@ -578,7 +576,7 @@
   const showEnvPrefix = computed(
     () =>
       requestVModel.value.customizeRequestEnvEnable &&
-      currentEnvConfig?.value.httpConfig.find((e) => e.type === 'NONE')?.url
+      appStore.currentEnvConfig?.httpConfig.find((e) => e.type === 'NONE')?.url
   );
   const currentLoop = ref(1);
   const currentResponse = computed(() => {

frontend/src/views/api-test/scenario/components/scenarioTable.vue

@@ -876,7 +876,7 @@
       slotName: 'operation',
       dataIndex: 'operation',
       fixed: 'right',
-      width: 220,
+      width: 200,
     },
   ];
   const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(

frontend/src/views/api-test/scenario/components/step/stepTree.vue

@@ -615,7 +615,6 @@
   }); // 没啥用，目前用来展示选中样式
   const isPriorityLocalExec = inject<Ref<boolean>>('isPriorityLocalExec');
   const localExecuteUrl = inject<Ref<string>>('localExecuteUrl');
-  const currentEnvConfig = inject<Ref<EnvConfig>>('currentEnvConfig');
 
   const permissionMap = {
     execute: 'PROJECT_API_SCENARIO:READ+EXECUTE',
@@ -947,7 +946,7 @@
       const params: AddApiCaseParams = {
         name: saveModalForm.value.name,
         projectId: appStore.currentProjectId,
-        environmentId: currentEnvConfig?.value.id || '',
+        environmentId: appStore.currentEnvConfig?.id || '',
         apiDefinitionId: id,
         request: {
           ...detail,
@@ -992,7 +991,7 @@
           status: RequestDefinitionStatus.PROCESSING,
           customFields: [],
           versionId: '',
-          environmentId: currentEnvConfig?.value.id || '',
+          environmentId: appStore.currentEnvConfig?.id || '',
           request: {
             ...detail,
             url: path,
@@ -1085,7 +1084,7 @@
             const fileParams = scenario.value.stepFileParam[activeStep.value.id];
             const params: AddApiCaseParams = {
               projectId: appStore.currentProjectId,
-              environmentId: currentEnvConfig?.value.id || '',
+              environmentId: appStore.currentEnvConfig?.id || '',
               apiDefinitionId: activeStep.value.resourceId || '',
               request: detail,
               ...saveCaseModalForm.value,
@@ -1432,7 +1431,7 @@
       const res = await debugScenario({
         id: scenario.value.id || '',
         grouped: false,
-        environmentId: currentEnvConfig?.value?.id || '',
+        environmentId: appStore.currentEnvConfig?.id || '',
         projectId: appStore.currentProjectId,
         scenarioConfig: scenario.value.scenarioConfig,
         frontendDebug: scenario.value.executeType === 'localExec',

frontend/src/views/api-test/scenario/index.vue

@@ -17,10 +17,7 @@
         </template>
       </MsEditableTab>
       <div v-show="activeScenarioTab.id !== 'all'" class="flex items-center gap-[8px]">
-        <environmentSelect
+        <MsEnvironmentSelect :env="activeScenarioTab.environmentId" />
-          v-model:currentEnv="activeScenarioTab.environmentId"
-          v-model:current-env-config="currentEnvConfig"
-        />
         <executeButton
           ref="executeButtonRef"
           v-permission="['PROJECT_API_SCENARIO:READ+EXECUTE']"
@@ -115,8 +112,8 @@
   import { TabItem } from '@/components/pure/ms-editable-tab/types';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
+  import MsEnvironmentSelect from '@/components/business/ms-environment-select/index.vue';
   import scenarioModuleTree from './components/scenarioModuleTree.vue';
-  import environmentSelect from '@/views/api-test/components/environmentSelect.vue';
   import executeButton from '@/views/api-test/components/executeButton.vue';
   import ScenarioTable from '@/views/api-test/scenario/components/scenarioTable.vue';
 
@@ -170,7 +167,6 @@
     } as ScenarioParams,
   ]);
   const activeScenarioTab = ref<ScenarioParams>(scenarioTabs.value[0] as ScenarioParams);
-  const currentEnvConfig = ref<EnvConfig>();
   const executeButtonRef = ref<InstanceType<typeof executeButton>>();
 
   const websocketMap: Record<string | number, WebSocket> = {};
@@ -441,7 +437,7 @@
       scenarioTabs.value.push({
         ...cloneDeep(defaultScenario),
         id: getGenerateId(),
-        environmentId: currentEnvConfig.value?.id || '',
+        environmentId: appStore.currentEnvConfig?.id || '',
         label: `${t('apiScenario.createScenario')}${scenarioTabs.value.length}`,
         moduleId: activeModule.value === 'all' ? 'root' : activeModule.value,
         projectId: appStore.currentProjectId,
@@ -616,7 +612,6 @@
   provide('isPriorityLocalExec', readonly(isPriorityLocalExec));
   provide('hasLocalExec', readonly(hasLocalExec));
   provide('localExecuteUrl', readonly(localExecuteUrl));
-  provide('currentEnvConfig', readonly(currentEnvConfig));
   provide('scenarioId', scenarioId);
   provide('scenarioExecuteLoading', scenarioExecuteLoading);
   provide('moduleTree', readonly(moduleTree));

frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue

@@ -699,7 +699,7 @@
       fixed: 'right',
       showInTable: true,
       showDrag: false,
-      width: hasOperationPermission.value ? 200 : 50,
+      width: hasOperationPermission.value ? 130 : 50,
     },
   ];
   const platformInfo = ref<Record<string, any>>({});

frontend/src/views/project-management/environmental/components/envParams/preAndPost.vue

@@ -65,12 +65,9 @@
   import PreTab from './PreTab.vue';
 
   import { useI18n } from '@/hooks/useI18n';
-  import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore';
 
   import { EnvTabTypeEnum } from '@/enums/envEnum';
 
-  const store = useProjectEnvStore();
-
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -109,14 +106,6 @@
           };
     }
   });
-
-  const currentEnvConfig = ref({});
-  /** 向孙组件提供属性 */
-  provide('currentEnvConfig', readonly(currentEnvConfig));
-
-  onBeforeMount(() => {
-    currentEnvConfig.value = store.currentEnvDetailInfo;
-  });
 </script>
 
 <style scoped lang="less">