From 033157169df237906175ab95ad70db8fee8953d1 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Wed, 3 Apr 2024 13:12:01 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=96=AD=E8=A8=80&=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E6=8A=A5=E5=91=8Ahover=E5=8D=A1=E7=89=87=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ms-assertion/comp/ResponseBodyTab.vue     |  21 ++--
 .../business/ms-assertion/index.vue           |   3 +-
 .../components/quoteSqlSourceDrawer.vue       |  26 +++--
 .../components/management/api/apiTable.vue    |   1 +
 .../report/component/caseReportCom.vue        | 107 ++++++++++++++----
 .../api-test/report/component/scenarioCom.vue |  21 ++--
 .../components/envParams/AssertTab.vue        |   2 +-
 7 files changed, 126 insertions(+), 55 deletions(-)

diff --git a/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue b/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
index b9b4afbf7d..3d24a3c746 100644
--- a/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
+++ b/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
-                        ? 'ms-params-input-suffix-icon'
-                        : 'ms-params-input-suffix-icon--disabled'
+                      props.disabled || !props.response
+                        ? '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;
   }
diff --git a/frontend/src/components/business/ms-assertion/index.vue b/frontend/src/components/business/ms-assertion/index.vue
index 07e7438295..7d7a0d5192 100644
--- a/frontend/src/components/business/ms-assertion/index.vue
+++ b/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; // 是否显示提取
   }>();
 
diff --git a/frontend/src/views/api-test/components/quoteSqlSourceDrawer.vue b/frontend/src/views/api-test/components/quoteSqlSourceDrawer.vue
index 93d7d2c0fe..0212daf666 100644
--- a/frontend/src/views/api-test/components/quoteSqlSourceDrawer.vue
+++ b/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 {
-      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(
+    () => innerVisible.value,
+    (val) => {
+      if (val && currentEnvConfig?.value.id) {
+        initEnvironment(currentEnvConfig.value.id);
+      }
     }
-  }
+  );
 
   function searchDataSource() {
     propsRes.value.data = cloneDeep(currentEnvConfig?.value.dataSources) as any[];
diff --git a/frontend/src/views/api-test/management/components/management/api/apiTable.vue b/frontend/src/views/api-test/management/components/management/api/apiTable.vue
index cf60baa08a..0badd4d7a5 100644
--- a/frontend/src/views/api-test/management/components/management/api/apiTable.vue
+++ b/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' : '',
diff --git a/frontend/src/views/api-test/report/component/caseReportCom.vue b/frontend/src/views/api-test/report/component/caseReportCom.vue
index 9a8398a7b9..e21108d57c 100644
--- a/frontend/src/views/api-test/report/component/caseReportCom.vue
+++ b/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
-            ><span class="time-card-item-title">{{ getTotalTime.split('-')[1] || 'ms' }}</span>
+            <a-popover position="bottom" content-class="response-popover-content">
+              <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">{{
-              detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[0] : '-'
-            }}</span
-            ><span class="time-card-item-title">{{
-              detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[1] : 'ms'
-            }}</span>
+            <a-popover position="bottom" content-class="response-popover-content">
+              <div class="flex items-center">
+                <div class="count">{{
+                  detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[0] : '-'
+                }}</div
+                ><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"
-                >{{ detail.assertionPassRate === 'Calculating' ? '-' : detail.assertionPassRate || '0.00' }}%</span
-              >
-              <a-divider direction="vertical" class="!h-[16px]" :margin="8"></a-divider>
-              <span>{{
-                getIndicators(detail.assertionSuccessCount) === '-'
-                  ? '-'
-                  : addCommasToNumber(detail.assertionSuccessCount || 0)
-              }}</span>
-              <span class="mx-1 text-[var(--color-text-4)]"
-                >/
-                {{
-                  getIndicators(detail.assertionCount) === '-' ? '-' : addCommasToNumber(detail.assertionCount) || 0
-                }}</span
-              >
+              <a-popover position="bottom" content-class="response-popover-content">
+                <div class="flex items-center">
+                  <div class="count one-line-text max-w-[80px]">{{
+                    detail.assertionPassRate === 'Calculating' ? '-' : detail.assertionPassRate || '0.00'
+                  }}</div
+                  >%
+                  <a-divider direction="vertical" class="!h-[16px]" :margin="8"></a-divider>
+                  <div class="one-line-text max-w-[80px]">{{
+                    getIndicators(detail.assertionSuccessCount) === '-'
+                      ? '-'
+                      : addCommasToNumber(detail.assertionSuccessCount || 0)
+                  }}</div>
+                  <span class="mx-1 text-[var(--color-text-4)]">/</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>
diff --git a/frontend/src/views/api-test/report/component/scenarioCom.vue b/frontend/src/views/api-test/report/component/scenarioCom.vue
index 326ee1d71e..adbbf753e2 100644
--- a/frontend/src/views/api-test/report/component/scenarioCom.vue
+++ b/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">
-                <span class="text-[18px] font-medium text-[var(--color-text-1)]"
-                  >{{ getIndicators(detail.assertionPassRate) }} <span>%</span></span
-                >
+              <div class="flex flex-nowrap items-center">
+                <div class="one-line-text max-w-[80px] text-[18px] font-medium text-[var(--color-text-1)]"
+                  >{{ 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>
-                <span class="text-[var(--color-text-4)]"
-                  ><span class="mx-1">/</span>
+                }}</div>
+                <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>
diff --git a/frontend/src/views/project-management/environmental/components/envParams/AssertTab.vue b/frontend/src/views/project-management/environmental/components/envParams/AssertTab.vue
index 15075dd850..a1cda2a666 100644
--- a/frontend/src/views/project-management/environmental/components/envParams/AssertTab.vue
+++ b/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>