fix(接口测试): 修复断言&补充报告hover卡片交互

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

@@ -45,7 +45,7 @@
               @change="() => handleExpressionChange(rowIndex)"
             >
               <template #suffix>
-                <a-tooltip :disabled="!disabledExpressionSuffix">
+                <a-tooltip :disabled="props.disabled || !!props.response">
                   <template #content>
                     <div>{{ t('apiTestDebug.expressionTip1') }}</div>
                     <div>{{ t('apiTestDebug.expressionTip2') }}</div>
@@ -57,7 +57,7 @@
                     type="icon-icon_flashlamp"
                     :size="15"
                     :class="
-                      disabledExpressionSuffix || props.disabled
+                      props.disabled || !props.response
                         ? 'ms-params-input-suffix-icon--disabled'
                         : 'ms-params-input-suffix-icon'
                     "
@@ -141,7 +141,7 @@
               @change="() => handleExpressionChange(rowIndex)"
             >
               <template #suffix>
-                <a-tooltip :disabled="!disabledExpressionSuffix">
+                <a-tooltip :disabled="props.disabled || !!props.response">
                   <template #content>
                     <div>{{ t('apiTestDebug.expressionTip1') }}</div>
                     <div>{{ t('apiTestDebug.expressionTip2') }}</div>
@@ -150,10 +150,9 @@
                   <MsIcon
                     v-if="props.showExtraction"
                     type="icon-icon_flashlamp"
-                    :disabled="props.disabled"
                     :size="15"
                     :class="
-                      disabledExpressionSuffix || props.disabled
+                      props.disabled || !props.response
                         ? 'ms-params-input-suffix-icon--disabled'
                         : 'ms-params-input-suffix-icon'
                     "
@@ -290,7 +289,7 @@
               @change="() => handleExpressionChange(rowIndex)"
             >
               <template #suffix>
-                <a-tooltip :disabled="disabledExpressionSuffix || props.disabled">
+                <a-tooltip :disabled="props.disabled || !!props.response">
                   <template #content>
                     <div>{{ t('apiTestDebug.expressionTip1') }}</div>
                     <div>{{ t('apiTestDebug.expressionTip2') }}</div>
@@ -301,9 +300,9 @@
                     type="icon-icon_flashlamp"
                     :size="15"
                     :class="
-                      disabledExpressionSuffix || props.disabled
+                      props.disabled || !props.response
-                        ? 'ms-params-input-suffix-icon'
+                        ? 'ms-params-input-suffix-icon--disabled'
-                        : 'ms-params-input-suffix-icon--disabled'
+                        : 'ms-params-input-suffix-icon'
                     "
                     @click.stop="() => showFastExtraction(record, RequestExtractExpressionEnum.REGEX)"
                   />
@@ -430,7 +429,7 @@
 
   const extractParamsTableRef = ref<InstanceType<typeof paramsTable>>();
   const fastExtractionVisible = ref(false);
-  const disabledExpressionSuffix = ref(false);
+  // const disabledExpressionSuffix = ref(false);
   export type ExpressionConfig = (RegexExtract | JSONPathExtract | XPathExtract) & Record<string, any>;
 
   const defaultExtractParamItem: ExpressionConfig = {
@@ -780,7 +779,7 @@
   function deleteListItem(id: string | number) {}
 
   function showFastExtraction(record: ExpressionConfig, type: ExpressionType) {
-    if (!props.disabled) return;
+    if (props.disabled || !props.response) return;
     activeRecord.value = { ...record, extractType: type };
     fastExtractionVisible.value = true;
   }

frontend/src/components/business/ms-assertion/index.vue

@@ -126,6 +126,7 @@
           <ScriptTab
             v-if="getCurrentItemState.assertionType === ResponseAssertionType.SCRIPT"
             v-model:data="getCurrentItemState"
+            :disabled="props.disabled"
             @change="handleChange"
           />
         </a-scrollbar>
@@ -176,7 +177,7 @@
     isDefinition?: boolean; // 是否是定义页面
     assertionConfig?: ExecuteAssertionConfig; // 是否开启全局
     response?: string; // 响应内容
-    disabled?: boolean;
+    disabled?: boolean; // 是否禁用
     showExtraction?: boolean; // 是否显示提取
   }>();
 

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

@@ -107,11 +107,19 @@
     showPagination: false,
   });
 
+  async function initEnvironment(envId: string) {
+    try {
+      const res = await getEnvironment(envId);
+      propsRes.value.data = cloneDeep(res.dataSources) as any[];
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   watch(
     () => currentEnvConfig?.value,
     (config) => {
       if (config && config.id) {
-        // eslint-disable-next-line no-use-before-define
         initEnvironment(config.id);
       }
     },
@@ -119,15 +127,15 @@
       immediate: true,
     }
   );
-  async function initEnvironment(envId: string) {
+
-    try {
+  watch(
-      const res = await getEnvironment(envId);
+    () => innerVisible.value,
-      propsRes.value.data = cloneDeep(res.dataSources) as any[];
+    (val) => {
-    } catch (error) {
+      if (val && currentEnvConfig?.value.id) {
-      // eslint-disable-next-line no-console
+        initEnvironment(currentEnvConfig.value.id);
-      console.log(error);
+      }
     }
-  }
+  );
 
   function searchDataSource() {
     propsRes.value.data = cloneDeep(currentEnvConfig?.value.dataSources) as any[];

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

@@ -452,6 +452,7 @@
       dataIndex: 'createUserName',
       width: 180,
       showDrag: true,
+      showTooltip: true,
     },
     {
       title: hasOperationPermission.value ? 'common.operation' : '',

frontend/src/views/api-test/report/component/caseReportCom.vue

@@ -16,18 +16,47 @@
           <div class="time-card-item flex h-full">
             <MsIcon type="icon-icon_time_outlined" class="mr-[4px] text-[var(--color-text-4)]" size="16" />
             <span class="time-card-item-title">{{ t('report.detail.api.totalTime') }}</span>
-            <span class="count">{{ getTotalTime.split('-')[0] || 0 }}</span
+            <a-popover position="bottom" content-class="response-popover-content">
-            ><span class="time-card-item-title">{{ getTotalTime.split('-')[1] || 'ms' }}</span>
+              <span class="count">{{ getTotalTime.split('-')[0] || 0 }}</span
+              ><span class="time-card-item-title">{{ getTotalTime.split('-')[1] || 'ms' }}</span>
+              <template #content>
+                <div class="min-w-[140px] max-w-[400px] p-4 text-[14px]">
+                  <div class="text-[var(--color-text-4)]">{{ t('report.detail.api.totalTime') }}</div>
+                  <div class="mt-2 text-[var(--color-text-1)]">
+                    <span class="text-[18px] font-medium">{{ getTotalTime.split('-')[0] || '-' }}</span
+                    >{{ getTotalTime.split('-')[1] || 'ms' }}</div
+                  >
+                </div>
+              </template>
+            </a-popover>
           </div>
           <div class="time-card-item h-full">
             <MsIcon type="icon-icon_time_outlined" class="mr-[4px] text-[var(--color-text-4)]" size="16" />
             <span class="time-card-item-title"> {{ t('report.detail.api.requestTotalTime') }}</span>
-            <span class="count">{{
+            <a-popover position="bottom" content-class="response-popover-content">
-              detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[0] : '-'
+              <div class="flex items-center">
-            }}</span
+                <div class="count">{{
-            ><span class="time-card-item-title">{{
+                  detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[0] : '-'
-              detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[1] : 'ms'
+                }}</div
-            }}</span>
+                ><div class="time-card-item-title">{{
+                  detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[1] : 'ms'
+                }}</div>
+              </div>
+
+              <template #content>
+                <div class="min-w-[140px] max-w-[400px] p-4 text-[14px]">
+                  <div class="text-[var(--color-text-4)]">{{ t('report.detail.api.requestTotalTime') }}</div>
+                  <div class="mt-2 text-[var(--color-text-1)]">
+                    <span class="text-[18px] font-medium">{{
+                      detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[0] : '-'
+                    }}</span
+                    >{{
+                      detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[1] : 'ms'
+                    }}</div
+                  >
+                </div>
+              </template>
+            </a-popover>
           </div>
         </div>
 
@@ -50,22 +79,54 @@
               <MsIcon type="icon-icon_yes_outlined" class="mr-[4px] text-[var(--color-text-4)]" size="16" />
               {{ t('report.detail.api.assertPass') }}
             </div>
+
             <div class="flex items-center">
-              <span class="count"
+              <a-popover position="bottom" content-class="response-popover-content">
-                >{{ detail.assertionPassRate === 'Calculating' ? '-' : detail.assertionPassRate || '0.00' }}%</span
+                <div class="flex items-center">
-              >
+                  <div class="count one-line-text max-w-[80px]">{{
-              <a-divider direction="vertical" class="!h-[16px]" :margin="8"></a-divider>
+                    detail.assertionPassRate === 'Calculating' ? '-' : detail.assertionPassRate || '0.00'
-              <span>{{
+                  }}</div
-                getIndicators(detail.assertionSuccessCount) === '-'
+                  >%
-                  ? '-'
+                  <a-divider direction="vertical" class="!h-[16px]" :margin="8"></a-divider>
-                  : addCommasToNumber(detail.assertionSuccessCount || 0)
+                  <div class="one-line-text max-w-[80px]">{{
-              }}</span>
+                    getIndicators(detail.assertionSuccessCount) === '-'
-              <span class="mx-1 text-[var(--color-text-4)]"
+                      ? '-'
-                >/
+                      : addCommasToNumber(detail.assertionSuccessCount || 0)
-                {{
+                  }}</div>
-                  getIndicators(detail.assertionCount) === '-' ? '-' : addCommasToNumber(detail.assertionCount) || 0
+                  <span class="mx-1 text-[var(--color-text-4)]">/</span>
-                }}</span
+                  <div class="one-line-text max-w-[80px]">
-              >
+                    {{
+                      getIndicators(detail.assertionCount) === '-' ? '-' : addCommasToNumber(detail.assertionCount) || 0
+                    }}</div
+                  >
+                </div>
+
+                <template #content>
+                  <div class="min-w-[190px] max-w-[400px] p-4 text-[14px]">
+                    <div class="text-[var(--color-text-4)]">{{ t('report.detail.api.assertPass') }}</div>
+                    <div class="mt-2 flex items-center justify-between">
+                      <div class="text-[18px] font-medium text-[var(--color-text-1)]"
+                        >{{ getIndicators(detail.assertionPassRate) }} <span>%</span></div
+                      >
+                      <div>
+                        <span class="text-[var(--color-text-1)]">{{
+                          getIndicators(detail.assertionSuccessCount) === '-'
+                            ? '-'
+                            : addCommasToNumber(detail.assertionSuccessCount || 0)
+                        }}</span>
+                        <span class="text-[var(--color-text-4)]"
+                          ><span class="mx-1">/</span>
+                          {{
+                            getIndicators(detail.assertionCount) === '-'
+                              ? '-'
+                              : addCommasToNumber(detail.assertionCount) || 0
+                          }}</span
+                        >
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </a-popover>
             </div>
           </div>
         </div>

frontend/src/views/api-test/report/component/scenarioCom.vue

@@ -91,27 +91,28 @@
               </a-popover>
             </div>
           </div>
-          <div class="timer-card min-w-[200px]">
+          <div class="timer-card min-w-[40%]">
             <div class="text-[var(--color-text-4)]">
               <MsIcon type="icon-icon_yes_outlined" class="mr-[4px] text-[var(--color-text-4)]" size="16" />
               {{ t('report.detail.api.assertPass') }}
             </div>
             <a-popover position="bottom" content-class="response-popover-content">
-              <div class="flex items-center">
+              <div class="flex flex-nowrap items-center">
-                <span class="text-[18px] font-medium text-[var(--color-text-1)]"
+                <div class="one-line-text max-w-[80px] text-[18px] font-medium text-[var(--color-text-1)]"
-                  >{{ getIndicators(detail.assertionPassRate) }} <span>%</span></span
+                  >{{ getIndicators(detail.assertionPassRate) }}
-                >
+                </div>
+                <span>%</span>
                 <a-divider direction="vertical" :margin="0" class="!mx-2 h-[16px]"></a-divider>
-                <span class="text-[var(--color-text-1)]">{{
+                <div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{
                   getIndicators(detail.assertionSuccessCount) === '-'
                     ? '-'
                     : addCommasToNumber(detail.assertionSuccessCount || 0)
-                }}</span>
+                }}</div>
-                <span class="text-[var(--color-text-4)]"
+                <span class="mx-1">/</span>
-                  ><span class="mx-1">/</span>
+                <div class="one-line-text max-w-[80px] text-[var(--color-text-4)]">
                   {{
                     getIndicators(detail.assertionCount) === '-' ? '-' : addCommasToNumber(detail.assertionCount) || 0
-                  }}</span
+                  }}</div
                 >
               </div>
               <template #content>

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

@@ -1,5 +1,5 @@
 <template>
-  <MsAssertion v-model:params="params" :show-extraction="false" />
+  <MsAssertion v-model:params="params" :show-extraction="false" :disabled="false" />
 </template>
 
 <script lang="ts" setup>