refactor(测试计划): 优化报告状态表头

frontend/src/enums/apiEnum.ts

@@ -335,3 +335,10 @@ export enum FullResponseAssertionType {
   XPATH = 'XPATH',
   REGEX = 'REGEX',
 }
+
+export enum TestPlanExecStatus {
+  PENDING = 'PENDING',
+  RUNNING = 'RUNNING',
+  STOPPED = 'STOPPED',
+  COMPLETED = 'COMPLETED',
+}

frontend/src/views/test-plan/report/component/conditionStatus.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="condition-status" :style="getClass"> {{ t(scenarioStepMap[props.status].label) }} </div>
-</template>
-
-<script setup lang="ts">
-  import { useI18n } from '@/hooks/useI18n';
-
-  import { ScenarioStepType } from '@/enums/apiEnum';
-
-  const { t } = useI18n();
-  const props = defineProps<{
-    status: string;
-  }>();
-  // 场景步骤类型映射
-  const scenarioStepMap: Record<string, any> = {
-    [ScenarioStepType.LOOP_CONTROLLER]: { label: 'apiScenario.loopControl', color: 'rgba(167, 98, 191, 1)' },
-    [ScenarioStepType.IF_CONTROLLER]: { label: 'apiScenario.conditionControl', color: 'rgba(238, 80, 163, 1)' },
-    [ScenarioStepType.ONCE_ONLY_CONTROLLER]: { label: 'apiScenario.onlyOnceControl', color: 'rgba(211, 68, 0, 1)' },
-    [ScenarioStepType.SCRIPT]: { label: 'apiScenario.scriptOperation', color: 'rgba(20, 225, 198, 1)' },
-    [ScenarioStepType.API_CASE]: { label: 'report.detail.api.apiCase', color: 'rgb(var(--link-4))' },
-    [ScenarioStepType.CUSTOM_REQUEST]: { label: 'report.detail.api.customRequest', color: 'rgb(var(--link-4))' },
-    [ScenarioStepType.API]: { label: 'report.detail.api', color: 'rgb(var(--link-4))' },
-  };
-
-  const getClass = computed(() => {
-    if (props.status) {
-      return {
-        color: scenarioStepMap[props.status]?.color,
-        border: `1px solid ${scenarioStepMap[props.status]?.color}`,
-      };
-    }
-  });
-</script>
-
-<style scoped lang="less">
-  .condition-status {
-    padding: 0 2px;
-    font-size: 12px;
-    line-height: 16px;
-    border-radius: 0 12px 12px 0; /* 设置左半边为正常边框 */
-  }
-</style>

frontend/src/views/test-plan/report/component/execStatus.vue

@@ -0,0 +1,42 @@
+<template>
+  <a-tag :color="statusMap[props.status]?.color" :class="statusMap[props.status]?.class" :size="props.size">
+    {{ t(statusMap[props.status]?.label) }}
+  </a-tag>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from '@/hooks/useI18n';
+
+  import { TestPlanExecStatus } from '@/enums/apiEnum';
+
+  const props = defineProps<{
+    status: TestPlanExecStatus;
+    size?: 'small' | 'medium' | 'large';
+  }>();
+  const { t } = useI18n();
+
+  const statusMap = {
+    PENDING: {
+      label: 'report.status.pending',
+      color: 'var(--color-text-n8)',
+      class: '!text-[var(--color-text-1)]',
+    },
+    RUNNING: {
+      label: 'report.status.running',
+      color: 'rgb(var(--link-2))',
+      class: '!text-[rgb(var(--link-6))]',
+    },
+    STOPPED: {
+      label: 'report.stopped',
+      color: 'rgb(var(--warning-2))',
+      class: '!text-[rgb(var(--warning-6))]',
+    },
+    COMPLETED: {
+      label: 'report.completed',
+      color: 'rgb(var(--success-2))',
+      class: '!text-[rgb(var(--success-6))]',
+    },
+  } as const;
+</script>
+
+<style lang="less" scoped></style>

frontend/src/views/test-plan/report/component/reportList.vue

@@ -55,10 +55,10 @@
         <ExecutionStatus :module-type="ReportStatusEnum.REPORT_STATUS" :status="record.resultStatus" />
       </template>
       <template #execStatus="{ record }">
-        <ExecutionStatus :module-type="ReportStatusEnum.EXEC_STATUS" :status="record.execStatus" />
+        <ExecStatus :status="record.execStatus" />
       </template>
       <template #[FilterSlotNameEnum.TEST_PLAN_REPORT_EXEC_STATUS]="{ filterContent }">
-        <ExecutionStatus :module-type="ReportStatusEnum.EXEC_STATUS" :status="filterContent.value" />
+        <ExecStatus :status="filterContent.value" />
       </template>
       <template #[FilterSlotNameEnum.TEST_PLAN_STATUS_FILTER]="{ filterContent }">
         <ExecutionStatus :module-type="ReportStatusEnum.REPORT_STATUS" :status="filterContent.value" />
@@ -91,6 +91,7 @@
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import type { BatchActionParams, BatchActionQueryParams, MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
+  import ExecStatus from '@/views/test-plan/report/component/execStatus.vue';
   import ExecutionStatus from '@/views/test-plan/report/component/reportStatus.vue';
 
   import { reportBathDelete, reportDelete, reportList, reportRename } from '@/api/modules/test-plan/report';
@@ -102,6 +103,7 @@
   import { hasAnyPermission } from '@/utils/permission';
 
   import { BatchApiParams } from '@/models/common';
+  import { TestPlanExecStatus } from '@/enums/apiEnum';
   import { PlanReportStatus, ReportStatusEnum, TriggerModeLabel } from '@/enums/reportEnum';
   import { TestPlanRouteEnum } from '@/enums/routeEnum';
   import { ColumnEditTypeEnum, TableKeyEnum } from '@/enums/tableEnum';
@@ -119,10 +121,10 @@
   const showType = ref<ReportShowType>('All');
 
   const executeResultOptions = computed(() => {
-    return Object.keys(PlanReportStatus[ReportStatusEnum.EXEC_STATUS]).map((key) => {
+    return Object.values(TestPlanExecStatus).map((e) => {
       return {
-        value: key,
-        label: PlanReportStatus[ReportStatusEnum.EXEC_STATUS][key].statusText,
+        value: e,
+        key: e,
       };
     });
   });
@@ -390,6 +392,7 @@
   function changeShowType(val: string | number | boolean) {
     showType.value = val as ReportShowType;
     resetSelector();
+    console.log(propsRes.value);
     propsRes.value.filter = {
       integrated: integratedFilters.value,
     };