feat(项目管理): 环境管理环境静态页面

2024-01-11 21:11:09 +08:00 · 2024-01-11 21:11:09 +08:00 · ac0c2f0301
parent 535db91afa
commit ac0c2f0301
24 changed files with 845 additions and 98 deletions
--- a/frontend/src/components/pure/ms-advance-filter/type.ts
+++ b/frontend/src/components/pure/ms-advance-filter/type.ts
@ -30,6 +30,7 @@ export enum BackEndEnum {
  STRING = 'string',
  ARRAY = 'array',
  TIME = 'time',
+  NUMBER = 'number',
 }

 export enum FilterType {
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@ -205,6 +205,7 @@
      </div>
    </div>
    <ColumnSelector
+      v-if="props.showSetting"
      v-model:visible="columnSelectorVisible"
      :show-jump-method="(attrs.showJumpMethod as boolean)"
      :table-key="(attrs.tableKey as string)"
--- a/frontend/src/enums/tableEnum.ts
+++ b/frontend/src/enums/tableEnum.ts
@ -48,6 +48,8 @@ export enum TableKeyEnum {
  CASE_MANAGEMENT_TAB_CASE_TABLE = 'caseManagementTabCaseTable',
  CASE_MANAGEMENT_TAB_DEMAND_PLATFORM = 'caseManagementTabDemandPlatformTable',
  PROJECT_MANAGEMENT_ENV_ALL_PARAM = 'projectManagementEnvAllParam',
+  PROJECT_MANAGEMENT_ENV_ENV_PARAM = 'projectManagementEnvEnvParam',
+  PROJECT_MANAGEMENT_ENV_ENV_HTTP = 'projectManagementEnvEnvHttp',
 }

 // 具有特殊功能的列
--- a/frontend/src/store/modules/setting/useProjectEnvStore.ts
+++ b/frontend/src/store/modules/setting/useProjectEnvStore.ts
@ -2,13 +2,27 @@ import { defineStore } from 'pinia';

 export const ALL_PARAM = 'allParam';

-const useProjectEnvStore = defineStore('projectEnv', () => {
-  const currentId = ref<string | number>(ALL_PARAM);
+const useProjectEnvStore = defineStore(
+  'projectEnv',
+  () => {
+    const currentId = ref<string | number>(1);
+    const httpNoWarning = ref(true);
    const getCurrentId = computed(() => currentId.value);
+    const getHttpNoWarning = computed(() => httpNoWarning.value);
    function setCurrentId(id: string | number) {
      currentId.value = id;
    }
-  return { currentId, getCurrentId, setCurrentId };
-});
+    function setHttpNoWarning(noWarning: boolean) {
+      httpNoWarning.value = noWarning;
+    }
+    return { getCurrentId, currentId, httpNoWarning, setCurrentId, setHttpNoWarning, getHttpNoWarning };
+  },
+  {
+    persist: {
+      key: 'projectEnv',
+      paths: ['httpNoWarning'],
+    },
+  }
+);

 export default useProjectEnvStore;
--- a/frontend/src/views/bug-management/index.vue
+++ b/frontend/src/views/bug-management/index.vue
@ -123,7 +123,7 @@
  import { Message, TableData } from '@arco-design/web-vue';

  import { MsAdvanceFilter, timeSelectOptions } from '@/components/pure/ms-advance-filter';
-  import { FilterFormItem, FilterResult, FilterType } from '@/components/pure/ms-advance-filter/type';
+  import { BackEndEnum, FilterFormItem, FilterResult, FilterType } from '@/components/pure/ms-advance-filter/type';
  import MsButton from '@/components/pure/ms-button/index.vue';
  import MsCard from '@/components/pure/ms-card/index.vue';
  import MsExportDrawer from '@/components/pure/ms-export-drawer/index.vue';
@ -206,6 +206,7 @@
      title: 'bugManagement.ID',
      dataIndex: 'num',
      type: FilterType.INPUT,
+      backendType: BackEndEnum.NUMBER,
    },
    {
      title: 'bugManagement.bugName',
@ -213,6 +214,16 @@
      type: FilterType.SELECT,
      selectProps: {
        mode: 'static',
+        options: [
+          {
+            label: 'title',
+            value: 'title',
+          },
+          {
+            label: 'name',
+            value: 'name',
+          },
+        ],
      },
    },
    {
--- a/frontend/src/views/project-management/environmental/components/AllParamBox.vue
+++ b/frontend/src/views/project-management/environmental/components/AllParamBox.vue
@ -11,7 +11,7 @@

 <script lang="ts" setup>
  import AllPrams from './allParams/index.vue';
-  import RequestHeader from './RequestHeader.vue';
+  import RequestHeader from './requestHeader/index.vue';

  import { useI18n } from '@/hooks/useI18n';

--- a/frontend/src/views/project-management/environmental/components/EnvParamBox.vue
+++ b/frontend/src/views/project-management/environmental/components/EnvParamBox.vue
@ -1,13 +0,0 @@
-<template>
-  <div>
-    <h1>环境变量</h1>
-  </div>
-</template>
-
-<script lang="ts" setup></script>
-
-<style lang="less" scoped>
-  h1 {
-    color: blue;
-  }
-</style>
--- a/frontend/src/views/project-management/environmental/components/allParams/AllParamsTable.vue
+++ b/frontend/src/views/project-management/environmental/components/allParams/AllParamsTable.vue
@ -42,6 +42,7 @@
      />
    </template>
    <template #operation="{ record, rowIndex }">
+      <div class="flex flex-row items-center gap-[16px]">
        <a-switch v-if="rowIndex" v-model:model-value="record.enable" size="small" />
        <icon-minus-circle
          v-if="paramsLength > 1 && rowIndex !== paramsLength - 1"
@ -49,11 +50,12 @@
          size="20"
          @click="deleteParam(rowIndex)"
        />
+      </div>
    </template>
    <template #tag="{ record }">
      <ParamTagInput
        v-model:model-value="record.tag"
-        @input="addTableLine"
+        @input="(val) => addTableLine(val)"
        @dblclick="quickInputDesc(record)"
        @change="handleDescChange"
      />
@ -111,7 +113,7 @@
 <script async setup lang="ts">
  import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
-  import type { MsTableColumn } from '@/components/pure/ms-table/type';
+  import type { MsTableColumnData } from '@/components/pure/ms-table/type';
  import useTable from '@/components/pure/ms-table/useTable';
  import MsParamsInput from '@/components/business/ms-params-input/index.vue';
  import ParamDescInput from './ParamDescInput.vue';
@ -132,7 +134,8 @@
    enable: boolean;
  }

-  const props = defineProps<{
+  const props = withDefaults(
+    defineProps<{
      params: Param[];
      scroll?: {
        x?: number | string;
@ -140,8 +143,21 @@
        maxHeight?: number | string;
        minWidth?: number | string;
      };
+      disabled?: boolean; // 是否禁用
+      showSetting?: boolean; // 是否显示列设置
+      tableKey?: TableKeyEnum; // 表格key showSetting为true时必传
+      columns: MsTableColumnData[]; // 表格列配置 showSetting为false时必传
+      showSelectorAll?: boolean; // 是否显示全选
      heightUsed?: number;
-  }>();
+    }>(),
+    {
+      disabled: false,
+      showSetting: false,
+      tableKey: undefined,
+      showSelectorAll: false,
+      heightUsed: 0,
+    }
+  );
  const emit = defineEmits<{
    (e: 'update:params', value: Param[]): void;
    (e: 'change', data: Param[], isInit?: boolean): void;
@ -149,53 +165,6 @@

  const { t } = useI18n();

-  const columns: MsTableColumn = [
-    {
-      title: 'project.environmental.paramName',
-      dataIndex: 'name',
-      slotName: 'name',
-      showInTable: true,
-      showDrag: true,
-    },
-    {
-      title: 'project.environmental.paramType',
-      dataIndex: 'type',
-      slotName: 'type',
-      showInTable: true,
-      showDrag: true,
-    },
-    {
-      title: 'project.environmental.paramValue',
-      dataIndex: 'value',
-      slotName: 'value',
-      showInTable: true,
-      showDrag: true,
-    },
-    {
-      title: 'project.environmental.tag',
-      dataIndex: 'tag',
-      slotName: 'tag',
-      width: 200,
-      showInTable: true,
-      showDrag: true,
-    },
-    {
-      title: 'project.environmental.desc',
-      dataIndex: 'desc',
-      slotName: 'desc',
-      showInTable: true,
-      showDrag: true,
-    },
-    {
-      title: '',
-      columnTitle: 'common.operation',
-      slotName: 'operation',
-      width: 50,
-      showInTable: true,
-      showDrag: true,
-    },
-  ];
-
  const defaultParams: Omit<Param, 'id'> = {
    name: '',
    type: 'string',
@ -237,15 +206,20 @@
    return allType;
  });

-  await tableStore.initColumn(TableKeyEnum.PROJECT_MANAGEMENT_ENV_ALL_PARAM, columns);
+  if (props.showSetting && props.tableKey) {
+    await tableStore.initColumn(props.tableKey, props.columns);
+  }

  const { propsRes, propsEvent } = useTable<Param>(undefined, {
-    tableKey: TableKeyEnum.PROJECT_MANAGEMENT_ENV_ALL_PARAM,
+    tableKey: props.showSetting ? props.tableKey : undefined,
+    columns: props.columns,
    scroll: props.scroll,
    heightUsed: props.heightUsed,
    selectable: true,
    draggable: { type: 'handle', width: 24 },
-    showSetting: true,
+    showSetting: props.showSetting,
+    disabled: props.disabled,
+    showSelectorAll: props.showSelectorAll,
  });

  watch(
--- a/frontend/src/views/project-management/environmental/components/allParams/index.vue
+++ b/frontend/src/views/project-management/environmental/components/allParams/index.vue
@ -16,20 +16,35 @@
    </a-input>
    <batchAddKeyVal :params="innerParams" @apply="handleBatchParamApply" />
  </div>
-  <AllParamsTable v-model:params="innerParams" @change="handleParamTableChange" />
+  <AllParamsTable
+    v-model:params="innerParams"
+    :table-key="props.tableKey"
+    :columns="columns"
+    show-setting
+    @change="handleParamTableChange"
+  />
 </template>

 <script setup lang="ts">
  import { useVModel } from '@vueuse/core';

+  import { MsTableColumn } from '@/components/pure/ms-table/type';
  import AllParamsTable from './AllParamsTable.vue';
  import batchAddKeyVal from '@/views/api-test/debug/components/debug/batchAddKeyVal.vue';

  import { useI18n } from '@/hooks/useI18n';

-  const props = defineProps<{
+  import { TableKeyEnum } from '@/enums/tableEnum';
+
+  const props = withDefaults(
+    defineProps<{
      params: any[];
-  }>();
+      tableKey: TableKeyEnum;
+    }>(),
+    {
+      tableKey: TableKeyEnum.PROJECT_MANAGEMENT_ENV_ALL_PARAM,
+    }
+  );
  const emit = defineEmits<{
    (e: 'update:params', value: any[]): void;
    (e: 'change'): void; //  数据发生变化
@ -41,6 +56,53 @@

  const innerParams = useVModel(props, 'params', emit);

+  const columns: MsTableColumn = [
+    {
+      title: 'project.environmental.paramName',
+      dataIndex: 'name',
+      slotName: 'name',
+      showInTable: true,
+      showDrag: true,
+    },
+    {
+      title: 'project.environmental.paramType',
+      dataIndex: 'type',
+      slotName: 'type',
+      showInTable: true,
+      showDrag: true,
+    },
+    {
+      title: 'project.environmental.paramValue',
+      dataIndex: 'value',
+      slotName: 'value',
+      showInTable: true,
+      showDrag: true,
+    },
+    {
+      title: 'project.environmental.tag',
+      dataIndex: 'tag',
+      slotName: 'tag',
+      width: 200,
+      showInTable: true,
+      showDrag: true,
+    },
+    {
+      title: 'project.environmental.desc',
+      dataIndex: 'desc',
+      slotName: 'desc',
+      showInTable: true,
+      showDrag: true,
+    },
+    {
+      title: '',
+      columnTitle: 'common.operation',
+      slotName: 'operation',
+      width: 50,
+      showInTable: true,
+      showDrag: true,
+    },
+  ];
+
  /**
   * 批量参数代码转换为参数表格数据
   */
--- a/frontend/src/views/project-management/environmental/components/common/AuthTypeSelect.vue
+++ b/frontend/src/views/project-management/environmental/components/common/AuthTypeSelect.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="p-[24px]">
+    <a-divider :margin="0" class="!mb-[16px]" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped></style>
--- a/frontend/src/views/project-management/environmental/components/envParams/AddHttpDrawer.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/AddHttpDrawer.vue
@ -0,0 +1,210 @@
+<template>
+  <MsDrawer :width="891" :visible="visible" unmount-on-close :mask="false" @cancel="emit('close')">
+    <template #title>
+      <div>{{ title }}</div>
+    </template>
+    <a-form ref="httpRef" layout="vertical" :model="form">
+      <a-form-item
+        class="mb-[16px]"
+        asterisk-position="end"
+        field="hostname"
+        :label="t('project.environmental.http.hostName')"
+        :rules="[{ required: true, message: t('project.environmental.http.hostNameRequired') }]"
+      >
+        <a-input
+          v-model="form.hostname"
+          class="w-[100%]"
+          :placeholder="t('project.environmental.http.hostNamePlaceholder')"
+        >
+          <template #prefix>
+            <div class="input-prefix"> http:// </div>
+          </template>
+        </a-input>
+      </a-form-item>
+      <a-form-item class="mb-[16px]" field="applyModule" :label="t('project.environmental.http.applyModule')">
+        <a-checkbox-group v-model="form.applyModule">
+          <a-checkbox value="apiTest">{{ t('menu.apiTest') }}</a-checkbox>
+          <a-checkbox value="uiTest">{{ t('menu.uiTest') }}</a-checkbox>
+        </a-checkbox-group>
+      </a-form-item>
+      <a-form-item class="mb-[16px]" field="enableCondition" :label="t('project.environmental.http.enableCondition')">
+        <a-select v-model:model-value="form.enableCondition">
+          <a-option value="none">{{ t('project.environmental.http.none') }}</a-option>
+          <a-option value="module">{{ t('project.environmental.http.module') }}</a-option>
+          <a-option value="path">{{ t('project.environmental.http.path') }}</a-option>
+        </a-select>
+      </a-form-item>
+      <!-- 接口模块选择 -->
+      <a-form-item
+        v-if="showApiModule"
+        class="mb-[16px]"
+        field="apiModule"
+        asterisk-position="end"
+        :label="t('project.environmental.http.apiModuleSelect')"
+        :rules="[{ required: true, message: t('project.environmental.http.hostNameRequired') }]"
+      >
+        <a-select v-model:model-value="form.apiModule" multiple :placeholder="t('common.pleaseSelect')">
+          <a-option value="none">{{ t('project.environmental.http.none') }}</a-option>
+        </a-select>
+      </a-form-item>
+      <!-- 选择UI测试模块 -->
+      <a-form-item
+        v-if="showUIModule"
+        class="mb-[16px]"
+        field="enableCondition"
+        asterisk-position="end"
+        :label="t('project.environmental.http.uiModuleSelect')"
+        :rules="[{ required: true, message: t('project.environmental.http.hostNameRequired') }]"
+      >
+        <a-select v-model:model-value="form.uiModule" multiple :placeholder="t('common.pleaseSelect')">
+          <a-option value="none">{{ t('project.environmental.http.none') }}</a-option>
+        </a-select>
+      </a-form-item>
+      <!-- 路径 -->
+      <a-form-item
+        v-if="showPathInput"
+        class="path-input mb-[16px]"
+        asterisk-position="end"
+        field="hostname"
+        :label="t('project.environmental.http.path')"
+        :rules="[{ required: true, message: t('project.environmental.http.pathRequired') }]"
+      >
+        <a-input
+          v-model="form.hostname"
+          class="w-[100%]"
+          :placeholder="t('project.environmental.http.pathPlaceholder')"
+        >
+          <template #prefix>
+            <div class="input-prefix">
+              <a-select>
+                <a-option v-for="item in OPERATOR_MAP.string" :key="item.value" :value="item.value">{{
+                  t(item.label)
+                }}</a-option>
+              </a-select>
+            </div>
+          </template>
+        </a-input>
+      </a-form-item>
+    </a-form>
+  </MsDrawer>
+</template>
+
+<script lang="ts" setup>
+  import { defineModel } from 'vue';
+
+  import { OPERATOR_MAP } from '@/components/pure/ms-advance-filter/index';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  const props = defineProps<{
+    currentId?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'close'): void;
+  }>();
+
+  const form = reactive<{
+    hostname: string;
+    applyModule: string[];
+    enableCondition: string;
+    apiModule: string[];
+    uiModule: string[];
+    path: string;
+    operator: string;
+  }>({
+    hostname: '',
+    applyModule: [],
+    enableCondition: 'none',
+    apiModule: [],
+    uiModule: [],
+    path: '',
+    operator: '',
+  });
+
+  const httpRef = ref();
+
+  const showApiModule = computed(() => form.enableCondition === 'module' && form.applyModule.includes('apiTest'));
+  const showUIModule = computed(() => form.enableCondition === 'module' && form.applyModule.includes('uiTest'));
+  const showPathInput = computed(() => form.enableCondition === 'path');
+
+  const visible = defineModel('visible', { required: true, type: Boolean, default: false });
+
+  const { t } = useI18n();
+
+  const isEdit = computed(() => !!props.currentId);
+
+  const title = computed(() => {
+    return isEdit.value ? t('project.environmental.http.edit') : t('project.environmental.http.add');
+  });
+  watchEffect(() => {
+    if (showApiModule.value) {
+      form.apiModule = [];
+    }
+    if (showUIModule.value) {
+      form.uiModule = [];
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+  .input-prefix {
+    position: relative;
+    right: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 8px;
+    border-top: 1px solid var(--color-text-7);
+    border-bottom: 1px solid var(--color-text-7);
+    border-left: 1px solid var(--color-text-7);
+    border-radius: 4px 0 0 4px;
+    background: var(--color-text-n8);
+    flex-direction: column;
+  }
+  :deep(.arco-input-wrapper) {
+    .arco-input-prefix {
+      padding-right: 0;
+    }
+  }
+  .path-input {
+    display: inline;
+    :deep(.arco-input-wrapper) {
+      padding-right: 0;
+      :focus-within {
+        border-color: rgb(var(--primary-7));
+        border-top: none;
+        border-bottom: none;
+        border-left: none;
+      }
+      .arco-input.arco-input-size-small {
+        padding: 0;
+      }
+    }
+    :deep(.arco-input-wrapper:not(:disabled):hover) {
+      border-color: rgb(var(--primary-7));
+      background-color: var(--color-text-n10);
+    }
+    :deep(.arco-select) {
+      border-top: 1px solid var(--color-text-n7);
+      border-right: 1px solid var(--color-text-n7);
+      border-bottom: 1px solid var(--color-text-n7);
+      border-radius: 0 4px 4px 0;
+      background: var(--color-text-n8);
+    }
+    :deep(.arco-select-focused) {
+      border-color: rgb(var(--primary-7));
+    }
+    :deep(.arco-select-view-single) {
+      padding: 5px 8px;
+      .arco-select-view-value {
+        padding-top: 0;
+        padding-bottom: 0;
+        height: 22px;
+        min-height: 22px;
+        line-height: 22px;
+      }
+    }
+  }
+</style>
--- a/frontend/src/views/project-management/environmental/components/envParams/AssertTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/AssertTab.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="p-[24px]">
+    <a-divider :margin="0" class="!mb-[16px]" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped></style>
--- a/frontend/src/views/project-management/environmental/components/envParams/DatabaseTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/DatabaseTab.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="p-[24px]">
+    <a-divider :margin="0" class="!mb-[16px]" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped></style>
--- a/frontend/src/views/project-management/environmental/components/envParams/DisplayTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/DisplayTab.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="p-[24px]">
+    <a-divider :margin="0" class="!mb-[16px]" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped></style>
--- a/frontend/src/views/project-management/environmental/components/envParams/EnvParamBox.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/EnvParamBox.vue
@ -0,0 +1,140 @@
+<template>
+  <div class="page">
+    <div class="header">
+      <a-form ref="envForm" layout="vertical" :model="form">
+        <a-form-item
+          class="mb-[16px]"
+          asterisk-position="end"
+          field="name"
+          :label="t('project.environmental.envName')"
+          :rules="[{ required: true, message: t('project.environmental.envNameRequired') }]"
+        >
+          <a-input
+            v-model="form.name"
+            show-word-limit
+            :max-length="255"
+            class="w-[732px]"
+            :placeholder="t('project.environmental.envNamePlaceholder')"
+          />
+        </a-form-item>
+      </a-form>
+      <a-tabs v-model:active-key="activeKey" class="no-content">
+        <a-tab-pane v-for="item of contentTabList" :key="item.value" :title="item.label" />
+      </a-tabs>
+    </div>
+    <a-divider :margin="0" class="!mb-[16px]" />
+    <div class="px-[24px]">
+      <EnvParamsTab v-if="activeKey === 'envParams'" />
+      <HttpTab v-else-if="activeKey === 'http'" />
+      <DataBaseTab v-else-if="activeKey === 'database'" />
+      <HostTab v-else-if="activeKey === 'host'" />
+      <TcpTab v-else-if="activeKey === 'tcp'" />
+      <PreTab v-else-if="activeKey === 'pre'" />
+      <PostTab v-else-if="activeKey === 'post'" />
+      <AssertTab v-else-if="activeKey === 'assert'" />
+      <DisplayTab v-else-if="activeKey === 'display'" />
+    </div>
+
+    <div class="footer" :style="{ width: '100%' }">
+      <a-button :disabled="!canSave" @click="handleReset">{{ t('common.cancel') }}</a-button>
+      <a-button :disabled="!canSave" type="primary" @click="handleSave">{{ t('common.save') }}</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import AssertTab from './AssertTab.vue';
+  import DataBaseTab from './DatabaseTab.vue';
+  import DisplayTab from './DisplayTab.vue';
+  import EnvParamsTab from './EnvParamsTab.vue';
+  import HostTab from './HostTab.vue';
+  import HttpTab from './HttpTab.vue';
+  import PostTab from './PostTab.vue';
+  import PreTab from './PreTab.vue';
+  import TcpTab from './TcpTab.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  const activeKey = ref('http');
+  const envForm = ref();
+  const canSave = ref(false);
+  const { t } = useI18n();
+
+  const form = reactive({
+    name: '',
+  });
+
+  const contentTabList = [
+    {
+      value: 'envParams',
+      label: t('project.environmental.envParams'),
+    },
+    {
+      value: 'http',
+      label: 'HTTP',
+    },
+    {
+      value: 'database',
+      label: t('project.environmental.database'),
+    },
+    {
+      value: 'host',
+      label: 'Host',
+    },
+    {
+      value: 'tcp',
+      label: 'TCP',
+    },
+    {
+      value: 'pre',
+      label: t('project.environmental.pre'),
+    },
+    {
+      value: 'post',
+      label: t('project.environmental.post'),
+    },
+    {
+      value: 'assert',
+      label: t('project.environmental.assert'),
+    },
+    {
+      value: 'display',
+      label: t('project.environmental.displaySetting'),
+    },
+  ];
+  const handleReset = () => {
+    envForm.value?.resetFields();
+  };
+  const handleSave = () => {
+    envForm.value?.validate(async (valid) => {
+      if (valid) {
+        console.log('form', form);
+      }
+    });
+  };
+</script>
+
+<style lang="less" scoped>
+  .page {
+    transform: scale3d(1, 1, 1);
+    .header {
+      padding: 24px 24px 0;
+    }
+    .no-content {
+      :deep(.arco-tabs-content) {
+        padding-top: 0;
+      }
+    }
+    .footer {
+      gap: 16px;
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      z-index: 999;
+      display: flex;
+      justify-content: flex-end;
+      padding: 24px;
+      box-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
+    }
+  }
+</style>
--- a/frontend/src/views/project-management/environmental/components/envParams/EnvParamsTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/EnvParamsTab.vue
@ -0,0 +1,13 @@
+<template>
+  <AllPrams v-model:params="AllParams" :table-key="TableKeyEnum.PROJECT_MANAGEMENT_ENV_ENV_PARAM" />
+</template>
+
+<script lang="ts" setup>
+  import AllPrams from '../allParams/index.vue';
+
+  import { TableKeyEnum } from '@/enums/tableEnum';
+
+  const AllParams = ref<[]>([]);
+</script>
+
+<style lang="less" scoped></style>
--- a/frontend/src/views/project-management/environmental/components/envParams/HostTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/HostTab.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="p-[24px]">
+    <a-divider :margin="0" class="!mb-[16px]" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped></style>
--- a/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue
@ -0,0 +1,190 @@
+<template>
+  <div v-if="showTitle" class="title">
+    <span class="text-[var(--color-text-1)]">{{ t('project.environmental.httpTitle') }}</span>
+    <span class="cursor-pointer text-[var(--color-text-2)]" @click="handleNoWarning">{{
+      t('project.environmental.httpNoWarning')
+    }}</span>
+  </div>
+  <div class="flex items-center justify-between">
+    <a-button type="outline" @click="handleAddHttp">{{ t('project.environmental.addHttp') }}</a-button>
+    <div class="flex flex-row gap-[8px]">
+      <a-input-number v-model:model-value="form.linkOutTime" class="w-[180px]">
+        <template #prefix>
+          <span class="text-[var(--color-text-3)]">{{ t('project.environmental.http.linkTimeOut') }}</span>
+        </template>
+      </a-input-number>
+      <a-input-number v-model:model-value="form.timeOutTime" class="w-[180px]">
+        <template #prefix>
+          <span class="text-[var(--color-text-3)]">{{ t('project.environmental.http.linkTimeOut') }}</span>
+        </template>
+      </a-input-number>
+      <a-select v-model:model-value="form.authType" class="w-[200px]">
+        <template #prefix>
+          <span class="text-[var(--color-text-3)]">{{ t('project.environmental.http.authType') }}</span>
+        </template>
+        <a-option>Basic Auth</a-option>
+        <a-option>Basic Auth2</a-option>
+        <a-option>Basic Auth3</a-option>
+      </a-select>
+    </div>
+  </div>
+  <MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
+    <template #operation="{ record }">
+      <div class="flex flex-row flex-nowrap">
+        <MsButton class="!mr-0" @click="handleCopy(record)">{{ t('common.copy') }}</MsButton>
+        <a-divider direction="vertical" />
+        <MsButton class="!mr-0" @click="handleEdit(record)">{{ t('common.edit') }}</MsButton>
+        <a-divider direction="vertical" />
+        <MsTableMoreAction :list="moreActionList" trigger="click" @select="handleMoreActionSelect($event, record)" />
+      </div>
+    </template>
+  </MsBaseTable>
+  <AddHttpDrawer v-model:visible="addVisible" :current-id="currentId" />
+</template>
+
+<script lang="ts" async setup>
+  import { TableData } from '@arco-design/web-vue';
+
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
+  import { MsTableColumn } from '@/components/pure/ms-table/type';
+  import useTable from '@/components/pure/ms-table/useTable';
+  import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
+  import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
+  import AddHttpDrawer from './AddHttpDrawer.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+  import { useTableStore } from '@/store';
+  import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore';
+
+  import { BugListItem } from '@/models/bug-management';
+  import { TableKeyEnum } from '@/enums/tableEnum';
+
+  const { t } = useI18n();
+
+  const store = useProjectEnvStore();
+
+  const showTitle = computed(() => store.httpNoWarning);
+  const tableStore = useTableStore();
+  const addVisible = ref(false);
+  const currentId = ref('');
+
+  const columns: MsTableColumn = [
+    {
+      title: 'project.environmental.http.host',
+      dataIndex: 'host',
+      showTooltip: true,
+      showDrag: true,
+      showInTable: true,
+    },
+    {
+      title: 'project.environmental.http.desc',
+      dataIndex: 'desc',
+      showDrag: true,
+      showInTable: true,
+    },
+    {
+      title: 'project.environmental.http.applyScope',
+      dataIndex: 'applyScope',
+      showDrag: true,
+      showInTable: true,
+    },
+    {
+      title: 'project.environmental.http.enableScope',
+      dataIndex: 'enableScope',
+      showDrag: true,
+      showInTable: true,
+    },
+    {
+      title: 'project.environmental.http.value',
+      dataIndex: 'value',
+      showTooltip: true,
+      showDrag: true,
+      showInTable: true,
+    },
+    {
+      title: 'common.operation',
+      slotName: 'operation',
+      dataIndex: 'operation',
+      fixed: 'right',
+      width: 170,
+    },
+  ];
+  await tableStore.initColumn(TableKeyEnum.PROJECT_MANAGEMENT_ENV_ENV_HTTP, columns);
+  const { propsRes, propsEvent } = useTable(undefined, {
+    tableKey: TableKeyEnum.PROJECT_MANAGEMENT_ENV_ENV_HTTP,
+    scroll: { x: '100%' },
+    selectable: false,
+    noDisable: true,
+    showSetting: true,
+    showPagination: false,
+    showMode: false,
+  });
+
+  const form = reactive({
+    linkOutTime: undefined,
+    timeOutTime: undefined,
+    authType: 'Basic Auth',
+  });
+
+  const moreActionList: ActionsItem[] = [
+    {
+      label: t('common.delete'),
+      danger: true,
+      eventTag: 'delete',
+    },
+  ];
+
+  const handleSingleDelete = (record?: TableData) => {
+    console.log('handleSingleDelete', record);
+  };
+
+  function handleMoreActionSelect(item: ActionsItem, record: BugListItem) {
+    if (item.eventTag === 'delete') {
+      handleSingleDelete(record);
+    }
+  }
+
+  const handleCopy = (record: any) => {
+    console.log('handleCopy', record);
+  };
+  const handleEdit = (record: any) => {
+    addVisible.value = true;
+    currentId.value = record.id;
+  };
+
+  const handleAddHttp = () => {
+    addVisible.value = true;
+  };
+  const handleNoWarning = () => {
+    store.setHttpNoWarning(false);
+  };
+  const initData = () => {
+    propsRes.value.data = [
+      {
+        host: 'http://www.baidu.com',
+        desc: '百度',
+        applyScope: '全部',
+        enableScope: '全部',
+        value: 'http://www.baidu.com',
+      },
+    ];
+  };
+  onMounted(() => {
+    initData();
+  });
+</script>
+
+<style lang="less" scoped>
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 0 16px;
+    height: 38px;
+    border: 1px solid rgb(var(--primary-5));
+    border-radius: 4px;
+    background-color: rgb(var(--primary-1));
+  }
+</style>
--- a/frontend/src/views/project-management/environmental/components/envParams/PostTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/PostTab.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="p-[24px]">
+    <a-divider :margin="0" class="!mb-[16px]" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped></style>
--- a/frontend/src/views/project-management/environmental/components/envParams/PreTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/PreTab.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="p-[24px]">
+    <a-divider :margin="0" class="!mb-[16px]" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped></style>
--- a/frontend/src/views/project-management/environmental/components/envParams/TcpTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/TcpTab.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="p-[24px]">
+    <a-divider :margin="0" class="!mb-[16px]" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped></style>
--- a/frontend/src/views/project-management/environmental/components/requestHeader/index.vue
+++ b/frontend/src/views/project-management/environmental/components/requestHeader/index.vue
@ -3,14 +3,19 @@
    <div class="font-medium">{{ t('ms.apiTestDebug.header') }}</div>
    <batchAddKeyVal :params="innerParams" @apply="handleBatchParamApply" />
  </div>
-  <paramTable v-model:params="innerParams" :columns="columns" @change="handleParamTableChange" />
+  <AllParamsTable
+    v-model:params="innerParams"
+    :show-setting="false"
+    :columns="columns"
+    @change="handleParamTableChange"
+  />
 </template>

 <script setup lang="ts">
  import { useVModel } from '@vueuse/core';

  import type { MsTableColumn } from '@/components/pure/ms-table/type';
-  import paramTable from '@/views/api-test/components/paramTable.vue';
+  import AllParamsTable from '../allParams/AllParamsTable.vue';
  import batchAddKeyVal from '@/views/api-test/debug/components/debug/batchAddKeyVal.vue';

  import { useI18n } from '@/hooks/useI18n';
--- a/frontend/src/views/project-management/environmental/index.vue
+++ b/frontend/src/views/project-management/environmental/index.vue
@ -119,7 +119,7 @@
  import MsMoreAction from '@/components/pure/ms-table-more-action/index.vue';
  import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
  import AllParamBox from './components/AllParamBox.vue';
-  import EnvParamBox from './components/EnvParamBox.vue';
+  import EnvParamBox from './components/envParams/EnvParamBox.vue';
  import RenamePop from './components/RenamePop.vue';

  import { useI18n } from '@/hooks/useI18n';
--- a/frontend/src/views/project-management/environmental/locale/zh-CN.ts
+++ b/frontend/src/views/project-management/environmental/locale/zh-CN.ts
@ -16,4 +16,37 @@ export default {
  'project.environmental.paramValue': '参数值',
  'project.environmental.tag': '标签',
  'project.environmental.desc': '描述',
+  'project.environmental.envName': '环境名称',
+  'project.environmental.envParams': '环境变量',
+  'project.environmental.envNamePlaceholder': '请输入环境名称',
+  'project.environmental.envNameRequired': '环境名称不能为空',
+  'project.environmental.database': '数据库',
+  'project.environmental.pre': '前置',
+  'project.environmental.post': '后置',
+  'project.environmental.host': '域名',
+  'project.environmental.assert': '断言',
+  'project.environmental.displaySetting': '显示设置',
+  'project.environmental.httpTitle': '当满足多个启用条件时，按从上到下的顺序匹配',
+  'project.environmental.httpNoWarning': '不在提醒',
+  'project.environmental.addHttp': '添加 HTTP',
+  'project.environmental.http.linkTimeOut': '链接超时(ms):',
+  'project.environmental.http.timeTimeOut': '超时时间(ms):',
+  'project.environmental.http.authType': '认证方式:',
+  'project.environmental.http.host': '域名',
+  'project.environmental.http.desc': '描述',
+  'project.environmental.http.applyScope': '应用范围',
+  'project.environmental.http.enableScope': '启用范围',
+  'project.environmental.http.value': '值',
+  'project.environmental.http.add': '添加HTTP',
+  'project.environmental.http.hostName': '域名',
+  'project.environmental.http.hostNameRequired': '域名必填',
+  'project.environmental.http.hostNamePlaceholder': '例如：http://127.0.0.1',
+  'project.environmental.http.applyModule': '应用模块',
+  'project.environmental.http.enableCondition': '启用条件',
+  'project.environmental.http.none': '无',
+  'project.environmental.http.module': '模块',
+  'project.environmental.http.path': '路径',
+  'project.environmental.http.apiModuleSelect': '接口模块选择',
+  'project.environmental.http.uiModuleSelect': '选择UI测试模块',
+  'project.environmental.http.pathRequired': '路径必填',
 };