diff --git a/frontend/src/assets/svg/service_01.svg b/frontend/src/assets/svg/service_01.svg
new file mode 100644
index 0000000000..1b78755588
--- /dev/null
+++ b/frontend/src/assets/svg/service_01.svg
@@ -0,0 +1,14 @@
+<svg width="568" height="85" viewBox="0 0 568 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_2108_249979" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="568" height="78">
+<path d="M1.5 6C1.5 3.51472 3.51472 1.5 6 1.5H562C564.485 1.5 566.5 3.51472 566.5 6V72C566.5 74.4853 564.485 76.5 562 76.5H6C3.51472 76.5 1.5 74.4853 1.5 72V6Z" fill="url(#paint0_linear_2108_249979)" stroke="white" stroke-width="3"/>
+</mask>
+<g mask="url(#mask0_2108_249979)">
+<path opacity="0.05" d="M482.28 103.12C473.267 103.12 466.307 100.56 461.4 95.44C456.547 90.32 454.12 82.1333 454.12 70.88C454.12 59.6267 456.547 51.44 461.4 46.32C466.307 41.2 473.267 38.64 482.28 38.64C491.293 38.64 498.227 41.2 503.08 46.32C507.987 51.44 510.44 59.6267 510.44 70.88C510.44 81.28 508.173 89.2533 503.64 94.8C499.16 100.347 492.04 103.12 482.28 103.12ZM482.28 88.88C485.907 88.88 487.72 86.9067 487.72 82.96V58.8C487.72 54.8533 485.907 52.88 482.28 52.88C478.653 52.88 476.84 54.8533 476.84 58.8V82.96C476.84 86.9067 478.653 88.88 482.28 88.88ZM515.114 102V88.88H522.794V52.88H512.714V43.84L530.474 39.76H543.914V88.88H550.634V102H515.114Z" fill="#783887"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_2108_249979" x1="-830.5" y1="39" x2="592" y2="39" gradientUnits="userSpaceOnUse">
+<stop offset="0.0336452" stop-color="#F2E9F6"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/src/assets/svg/service_02.svg b/frontend/src/assets/svg/service_02.svg
new file mode 100644
index 0000000000..3ee9b0e42f
--- /dev/null
+++ b/frontend/src/assets/svg/service_02.svg
@@ -0,0 +1,14 @@
+<svg width="568" height="85" viewBox="0 0 568 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_2108_249992" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="568" height="78">
+<path d="M1.5 6C1.5 3.51472 3.51472 1.5 6 1.5H562C564.485 1.5 566.5 3.51472 566.5 6V72C566.5 74.4853 564.485 76.5 562 76.5H6C3.51472 76.5 1.5 74.4853 1.5 72V6Z" fill="url(#paint0_linear_2108_249992)" stroke="white" stroke-width="3"/>
+</mask>
+<g mask="url(#mask0_2108_249992)">
+<path opacity="0.05" d="M482.28 103.12C473.267 103.12 466.307 100.56 461.4 95.44C456.547 90.32 454.12 82.1333 454.12 70.88C454.12 59.6267 456.547 51.44 461.4 46.32C466.307 41.2 473.267 38.64 482.28 38.64C491.293 38.64 498.227 41.2 503.08 46.32C507.987 51.44 510.44 59.6267 510.44 70.88C510.44 81.28 508.173 89.2533 503.64 94.8C499.16 100.347 492.04 103.12 482.28 103.12ZM482.28 88.88C485.907 88.88 487.72 86.9067 487.72 82.96V58.8C487.72 54.8533 485.907 52.88 482.28 52.88C478.653 52.88 476.84 54.8533 476.84 58.8V82.96C476.84 86.9067 478.653 88.88 482.28 88.88ZM512.554 95.12C512.554 90.5333 513.22 86.48 514.554 82.96C515.94 79.44 518.18 76.1333 521.274 73.04C524.367 69.8933 528.634 66.64 534.074 63.28C535.674 62.2667 536.794 61.4133 537.434 60.72C538.127 59.9733 538.474 59.0933 538.474 58.08C538.474 55.8933 536.9 54.8 533.754 54.8C531.407 54.8 528.714 55.4133 525.674 56.64C522.634 57.8667 519.887 59.4133 517.434 61.28L512.714 44.24C516.127 42.5333 520.047 41.0933 524.474 39.92C528.9 38.6933 533.354 38.08 537.834 38.08C545.194 38.08 550.9 39.7067 554.954 42.96C559.007 46.2133 561.034 50.8267 561.034 56.8C561.034 60 560.314 62.8267 558.874 65.28C557.487 67.68 555.78 69.7067 553.754 71.36C551.78 73.0133 549.194 74.9067 545.994 77.04C542.42 79.3867 539.78 81.4133 538.074 83.12C536.42 84.7733 535.594 86.6933 535.594 88.88H545.274V84.32H561.674V102H512.554V95.12Z" fill="#783887"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_2108_249992" x1="-830.5" y1="39" x2="592" y2="39" gradientUnits="userSpaceOnUse">
+<stop offset="0.0336452" stop-color="#F2E9F6"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue b/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
index 59d2e18481..b8b757a8aa 100644
--- a/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
+++ b/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
@@ -39,6 +39,7 @@
               class="ms-params-input"
               :max-length="255"
               :disabled="props.disabled"
+              :placeholder="t('apiTestDebug.commonPlaceholder')"
               @input="() => handleExpressionChange(rowIndex)"
               @change="() => handleExpressionChange(rowIndex)"
             >
@@ -132,6 +133,7 @@
               :disabled="props.disabled"
               class="ms-params-input"
               :max-length="255"
+              :placeholder="t('apiTestDebug.commonPlaceholder')"
               @input="() => handleExpressionChange(rowIndex)"
               @change="() => handleExpressionChange(rowIndex)"
             >
diff --git a/frontend/src/components/business/ms-assertion/comp/VariableTab.vue b/frontend/src/components/business/ms-assertion/comp/VariableTab.vue
index be210b18e9..f334e68629 100644
--- a/frontend/src/components/business/ms-assertion/comp/VariableTab.vue
+++ b/frontend/src/components/business/ms-assertion/comp/VariableTab.vue
@@ -13,7 +13,7 @@
 <script setup lang="ts">
   import { useVModel } from '@vueuse/core';
 
-  import { statusCodeOptions } from '@/components/pure/ms-advance-filter/index';
+  import { EQUAL, statusCodeOptions } from '@/components/pure/ms-advance-filter/index';
   import paramsTable, { type ParamTableColumn } from '@/views/api-test/components/paramTable.vue';
 
   import { responseHeaderOption } from '@/config/apiTest';
@@ -36,7 +36,7 @@
 
   const defaultParamItem = {
     variableName: '',
-    condition: '',
+    condition: EQUAL.value,
     expectedValue: '',
     enable: true,
   };
diff --git a/frontend/src/components/business/ms-assertion/index.vue b/frontend/src/components/business/ms-assertion/index.vue
index 3f21d4440e..eb43497f77 100644
--- a/frontend/src/components/business/ms-assertion/index.vue
+++ b/frontend/src/components/business/ms-assertion/index.vue
@@ -132,6 +132,7 @@
   import { cloneDeep } from 'lodash-es';
   import { VueDraggable } from 'vue-draggable-plus';
 
+  import { EQUAL } from '@/components/pure/ms-advance-filter/index';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
@@ -321,7 +322,7 @@
               id: '',
               name: '',
               script: '',
-              params: [{}],
+              params: [],
               scriptLanguage: LanguageEnum.BEANSHELL_JSR233,
             },
           });
diff --git a/frontend/src/components/business/ms-remove-button/MsRemoveButton.vue b/frontend/src/components/business/ms-remove-button/MsRemoveButton.vue
index aed2aedcc0..dd88036f62 100644
--- a/frontend/src/components/business/ms-remove-button/MsRemoveButton.vue
+++ b/frontend/src/components/business/ms-remove-button/MsRemoveButton.vue
@@ -10,7 +10,9 @@
       @confirm="handleOk"
       @cancel="handleCancel"
     >
-      <MsButton :disabled="props.disabled" @click="showPopover">{{ t(props.removeText) }}</MsButton>
+      <slot>
+        <MsButton :disabled="props.disabled" @click="showPopover">{{ t(props.removeText) }}</MsButton>
+      </slot>
     </MsPopconfirm>
   </span>
 </template>
diff --git a/frontend/src/components/pure/ms-form-create/formcreate-password.vue b/frontend/src/components/pure/ms-form-create/formcreate-password.vue
index 77c3cf333a..c9e46c50b7 100644
--- a/frontend/src/components/pure/ms-form-create/formcreate-password.vue
+++ b/frontend/src/components/pure/ms-form-create/formcreate-password.vue
@@ -6,6 +6,8 @@
     :placeholder="placeholder"
     style="width: 100%"
     autocomplete="username"
+    allow-clear
+    @clear="clearHandler"
   >
     <template #suffix>
       <span v-if="!isShowPassword" @click="togglePasswordVisibility">
@@ -37,6 +39,11 @@
     }
   );
 
+  function clearHandler() {
+    inputValue.value = '';
+    emits('update:modelValue', inputValue.value);
+  }
+
   const isShowPassword = ref<boolean>(true);
   const togglePasswordVisibility = () => {
     isShowPassword.value = !isShowPassword.value;
diff --git a/frontend/src/components/pure/ms-pagination/page-item-step.vue b/frontend/src/components/pure/ms-pagination/page-item-step.vue
index e4e385b0b7..3ad5e94d1b 100644
--- a/frontend/src/components/pure/ms-pagination/page-item-step.vue
+++ b/frontend/src/components/pure/ms-pagination/page-item-step.vue
@@ -1,8 +1,18 @@
 <template>
   <component :is="simple ? 'span' : 'li'" :class="cls" @click="handleClick">
     <slot :type="isNext ? 'next' : 'previous'">
-      <MsIcon v-if="isNext" size="12px" type="icon-icon_right_outlined" />
-      <MsIcon v-else size="12px" type="icon-icon_left_outlined" />
+      <MsIcon
+        v-if="isNext"
+        size="12px"
+        :class="{ 'text-[var(--color-text-4)]': props.current === props.pages }"
+        type="icon-icon_right_outlined"
+      />
+      <MsIcon
+        v-else
+        size="12px"
+        :class="{ 'text-[var(--color-text-4)]': props.current === 1 }"
+        type="icon-icon_left_outlined"
+      />
     </slot>
   </component>
 </template>
diff --git a/frontend/src/models/setting/serviceIntegration.ts b/frontend/src/models/setting/serviceIntegration.ts
index e465e9332e..7a3b586311 100644
--- a/frontend/src/models/setting/serviceIntegration.ts
+++ b/frontend/src/models/setting/serviceIntegration.ts
@@ -36,4 +36,5 @@ export interface StepListType {
   skipTitle: SkipTitle[];
   step: string;
   description: string;
+  bg?: string;
 }
diff --git a/frontend/src/views/api-test/components/paramTable.vue b/frontend/src/views/api-test/components/paramTable.vue
index 7ebe02e7d5..2da2e3d611 100644
--- a/frontend/src/views/api-test/components/paramTable.vue
+++ b/frontend/src/views/api-test/components/paramTable.vue
@@ -100,7 +100,7 @@
           v-else
           v-model:model-value="record[columnConfig.dataIndex as string]"
           :disabled="props.disabledExceptParam"
-          :placeholder="t('apiTestDebug.paramNamePlaceholder')"
+          :placeholder="t('apiTestDebug.commonPlaceholder')"
           class="ms-form-table-input"
           :max-length="255"
           size="mini"
@@ -319,14 +319,8 @@
       />
     </template>
     <!-- 响应头 -->
-    <template #header="{ record, columnConfig, rowIndex }">
-      <a-select
-        v-model="record.header"
-        :disabled="props.disabledExceptParam"
-        class="ms-form-table-input"
-        size="mini"
-        @change="() => addTableLine(rowIndex)"
-      >
+    <template #header="{ record, columnConfig }">
+      <a-select v-model="record.header" :disabled="props.disabledExceptParam" class="ms-form-table-input" size="mini">
         <a-option v-for="item in columnConfig.options" :key="item.value">{{ t(item.label) }}</a-option>
       </a-select>
     </template>
@@ -368,7 +362,8 @@
         :disabled="props.disabledExceptParam"
         size="mini"
         class="ms-form-table-input"
-        @change="() => addTableLine(rowIndex)"
+        :placeholder="t('apiTestDebug.commonPlaceholder')"
+        @change="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
       />
     </template>
     <!-- 项目选择 -->
@@ -551,7 +546,7 @@
   import { groupCategoryEnvList, groupProjectEnv } from '@/api/modules/project-management/envManagement';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
-  import { isArray, isEmptyObject, isNumber, isObject, isRegExp, isString, isUndefined } from '@/utils/is';
+  import { isArray, isEmptyObject, isObject, isString } from '@/utils/is';
 
   import { ModuleTreeNode, TransferFileParams } from '@/models/common';
   import { HttpForm, ProjectOptionItem } from '@/models/projectManagement/environmental';
@@ -770,32 +765,6 @@
       initProjectOptions();
     }
   });
-  /**
-   * 当表格输入框变化时，表格的每一个值存在的情况下才添加行
-   * @param 注意: 目前只做了数组&布尔&字符串类型的校验
-   * @param dataItem 当前编辑项
-   * @param
-   */
-  function validateAddLine(dataItem: Record<string, any>) {
-    return Object.keys(dataItem).every((key: any) => {
-      if (typeof dataItem[key] === 'boolean') {
-        return true;
-      }
-      if (dataItem[key] && typeof dataItem[key] !== 'boolean') {
-        if (isArray(dataItem[key])) {
-          return dataItem[key].length > 0;
-        }
-        if (isObject(dataItem[key]) && isEmptyObject(dataItem[key])) {
-          return true;
-        }
-        if (isString(dataItem[key])) {
-          return dataItem[key].trim().length > 0;
-        }
-        return true;
-      }
-      return false;
-    });
-  }
 
   /** 环境管理-环境组 end */
 
@@ -810,11 +779,15 @@
       emitChange('addTableLine addLineDisabled', isInit);
       return;
     }
-    // 判断每一个值是否存在才会加行
     if (
-      (rowIndex === paramsData.value.length - 1 && validateAddLine(paramsData.value[rowIndex])) ||
-      paramsData.value[rowIndex].projectId
+      rowIndex === paramsData.value.length - 1 &&
+      (paramsData.value[rowIndex].key ||
+        paramsData.value[rowIndex].projectId ||
+        paramsData.value[rowIndex].header ||
+        paramsData.value[rowIndex].header ||
+        paramsData.value[rowIndex].expression)
     ) {
+      // 最后一行的更改才会触发添加新一行
       const id = new Date().getTime().toString();
       paramsData.value.push({
         id,
diff --git a/frontend/src/views/api-test/components/requestComposition/response/result/index.vue b/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
index 470361cfde..eab4344379 100644
--- a/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
@@ -1,4 +1,13 @@
 <template>
+  <div v-if="isShowLoopControl?.stepType === ScenarioStepType.LOOP_CONTROLLER" class="my-4 flex justify-start">
+    <MsPagination
+      v-model:page-size="pageSize"
+      v-model:current="controlCurrent"
+      :total="controlTotal"
+      size="mini"
+      @change="loadControlLoop"
+    />
+  </div>
   <div class="mt-4 flex w-full items-center justify-between rounded bg-[var(--color-text-n9)] p-4">
     <div class="font-medium">
       <span
@@ -103,9 +112,10 @@
 
   import { reportCaseStepDetail, reportStepDetail } from '@/api/modules/api-test/report';
   import { useI18n } from '@/hooks/useI18n';
+  import { findNodeByKey } from '@/utils';
 
   import type { ReportStepDetail, ReportStepDetailItem, ScenarioItemType } from '@/models/apiTest/report';
-  import { ResponseComposition } from '@/enums/apiEnum';
+  import { ResponseComposition, ScenarioStepType } from '@/enums/apiEnum';
 
   const props = defineProps<{
     mode: 'tiled' | 'tab'; // 平铺 | tab形式
@@ -119,6 +129,7 @@
     environmentName?: string; // 环境
     isResponseModel?: boolean;
     reportId?: string;
+    steps?: ScenarioItemType[]; // 步骤列表
   }>();
   const { t } = useI18n();
 
@@ -171,7 +182,7 @@
 
   const total = computed(() => (activeStepDetail.value?.content.subRequestResults || []).length);
   const current = ref(1);
-  const pageSize = ref(1);
+  const pageSize = ref(10);
 
   const activeType = ref<'ResContent' | 'SubRequest'>('ResContent');
   const subRequestResults = ref<any[]>([]);
@@ -238,13 +249,13 @@
 
   const loading = ref<boolean>(false);
   // 获取详情
-  async function getStepDetail() {
+  async function getStepDetail(stepId: string) {
     try {
       loading.value = true;
       if (props.stepItem) {
         const res = await reportDetailMap[props.showType].stepDetail(
           (props.stepItem?.reportId || props.reportId) as string,
-          props?.stepItem?.stepId,
+          stepId,
           route.query.shareId as string | undefined
         );
         stepDetailInfo.value = cloneDeep(res) as any;
@@ -279,11 +290,40 @@
     }
   }
 
+  /**
+   *  获取对应父是否为次数循环步骤
+   */
+
+  const isShowLoopControl = computed(() => {
+    if (props.steps && props.steps.length && props.stepItem) {
+      return findNodeByKey<ScenarioItemType>(props.steps, props.stepItem?.parentId, 'stepId');
+    }
+  });
+
+  const controlCurrent = ref(1);
+  const controlTotal = computed(() => (isShowLoopControl.value?.children || []).length);
+  /**
+   *  循环次数控制器
+   */
+  function loadControlLoop() {
+    if (
+      isShowLoopControl.value &&
+      isShowLoopControl.value?.stepType === ScenarioStepType.LOOP_CONTROLLER &&
+      isShowLoopControl.value.children &&
+      isShowLoopControl.value.children.length
+    ) {
+      const loopStepId = isShowLoopControl.value?.children[controlCurrent.value - 1].stepId;
+      if (loopStepId) {
+        getStepDetail(loopStepId);
+      }
+    }
+  }
+
   const originStepId = ref<string | undefined>('');
 
   watchEffect(() => {
     if (props?.stepItem?.stepId && props.stepItem.stepId !== originStepId.value) {
-      getStepDetail();
+      getStepDetail(props?.stepItem?.stepId);
     }
   });
 
diff --git a/frontend/src/views/api-test/report/component/caseReportDrawer.vue b/frontend/src/views/api-test/report/component/caseReportDrawer.vue
index a1bb2b792b..d175cc6752 100644
--- a/frontend/src/views/api-test/report/component/caseReportDrawer.vue
+++ b/frontend/src/views/api-test/report/component/caseReportDrawer.vue
@@ -89,7 +89,9 @@
       emit('update:visible', val);
     },
   });
+
   const innerReportId = ref(props.reportId);
+  const detailDrawerRef = ref();
 
   const reportStepDetail = ref<ReportDetail>({
     id: '',
diff --git a/frontend/src/views/api-test/report/component/reportList.vue b/frontend/src/views/api-test/report/component/reportList.vue
index df8e5fbd6f..957bebdadf 100644
--- a/frontend/src/views/api-test/report/component/reportList.vue
+++ b/frontend/src/views/api-test/report/component/reportList.vue
@@ -401,9 +401,10 @@
   const showDetailDrawer = ref<boolean>(false);
   const showCaseDetailDrawer = ref<boolean>(false);
   const activeCaseReportType = ref('');
+
   function showReportDetail(id: string, rowIndex: number, integrated: boolean) {
     activeDetailId.value = id;
-    activeReportIndex.value = rowIndex;
+    activeReportIndex.value = rowIndex - 1;
     if (props.moduleType === ReportEnum.API_SCENARIO_REPORT) {
       showDetailDrawer.value = true;
     } else {
diff --git a/frontend/src/views/api-test/report/component/step/stepTree.vue b/frontend/src/views/api-test/report/component/step/stepTree.vue
index 42ddd3fb42..b61b830ea6 100644
--- a/frontend/src/views/api-test/report/component/step/stepTree.vue
+++ b/frontend/src/views/api-test/report/component/step/stepTree.vue
@@ -50,15 +50,11 @@
                   </div>
                 </a-tooltip>
                 <!-- 展开折叠控制器 -->
-                <div v-if="getShowExpand(step)" class="mx-1">
-                  <span
-                    v-if="step.fold"
-                    class="collapsebtn flex items-center justify-center"
-                    @click.stop="expandHandler(step)"
-                  >
+                <div v-if="getShowExpand(step)" class="mx-1" @click.stop="expandHandler(step)">
+                  <span v-if="step.fold" class="collapsebtn flex items-center justify-center">
                     <icon-right class="text-[var(--color-text-4)]" :style="{ 'font-size': '12px' }" />
                   </span>
-                  <span v-else class="expand flex items-center justify-center" @click.stop="expandHandler(step)">
+                  <span v-else class="expand flex items-center justify-center">
                     <icon-down class="text-[rgb(var(--primary-6))]" :style="{ 'font-size': '12px' }" />
                   </span>
                 </div>
@@ -66,7 +62,7 @@
                   <ConditionStatus class="mx-1" :status="step.stepType || ''" />
                 </div>
 
-                <a-tooltip :content="step.name">
+                <a-tooltip :content="step.name" position="tl">
                   <div class="step-name-container w-full flex-grow" @click.stop="showDetail(step)">
                     <div class="one-line-text mx-[4px] max-w-[150px] text-[var(--color-text-1)]">
                       {{ step.name }}
@@ -137,7 +133,7 @@
             </div>
             <div v-if="!step.fold" class="line"></div>
           </div>
-          <!-- 折叠展开内容 -->
+          <!-- 折叠展开内容 v-if="showResContent(step)" -->
           <div v-if="showResContent(step)" class="foldContent mt-4 pl-2">
             <a-scrollbar
               :style="{
@@ -155,6 +151,7 @@
                 :show-type="props.showType"
                 :is-response-model="true"
                 :report-id="props?.reportId"
+                :steps="steps"
               />
             </a-scrollbar>
           </div>
@@ -232,6 +229,7 @@
 
   function expandHandler(item: ScenarioItemType) {
     const realStep = findNodeByKey<ScenarioItemType>(steps.value, item.stepId, 'stepId');
+    // TODO
     if (realStep) {
       realStep.fold = !realStep.fold;
     }
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue b/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
index b12a9ce5ee..c507509198 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
@@ -526,6 +526,7 @@
         span: 15,
       },
       contentClass: 'contentClass',
+      autoLabelWidth: true,
     },
     // 暂时默认
     row: {
@@ -697,11 +698,11 @@
       color: red !important;
     }
     :deep(.arco-form-item-label-col > .arco-form-item-label) {
-      color: var(--color-text-3) !important;
-      width: 84px;
       overflow: hidden;
+      width: 84px;
       text-overflow: ellipsis;
       white-space: nowrap;
+      color: var(--color-text-3) !important;
     }
     :deep(.arco-select-view-single) {
       border-color: transparent !important;
diff --git a/frontend/src/views/case-management/caseManagementFeature/index.vue b/frontend/src/views/case-management/caseManagementFeature/index.vue
index 72c414cb4b..9ba2ab9038 100644
--- a/frontend/src/views/case-management/caseManagementFeature/index.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/index.vue
@@ -332,8 +332,8 @@
     isCover.value = cover;
     validateLoading.value = true;
     try {
-      start();
       validateModal.value = true;
+      start();
       const params = {
         projectId: appStore.currentProjectId,
         versionId: '',
@@ -345,6 +345,7 @@
         validateInfo.value = result.data;
       }
     } catch (error) {
+      validateModal.value = false;
       console.log(error);
     } finally {
       validateLoading.value = false;
diff --git a/frontend/src/views/project-management/environmental/components/envParams/popUp/addDatabaseModal.vue b/frontend/src/views/project-management/environmental/components/envParams/popUp/addDatabaseModal.vue
index b4ae008ebe..ff479df63f 100644
--- a/frontend/src/views/project-management/environmental/components/envParams/popUp/addDatabaseModal.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/popUp/addDatabaseModal.vue
@@ -258,31 +258,37 @@
       }
     });
   };
-  onMounted(() => {
-    getDriverOption();
-  });
 
-  watchEffect(() => {
-    if (props.currentId) {
-      const currentItem = store.currentEnvDetailInfo.config.dataSources.find(
-        (item) => item.id === props.currentId
-      ) as DataSourceItem;
-      if (currentItem) {
-        if (props.isCopy) {
-          form.value = {
-            ...currentItem,
-            id: '',
-            dataSource: `copy_${currentItem.dataSource}`,
-          };
-        } else {
-          form.value = {
-            ...currentItem,
-          };
+  watch(
+    () => props.visible,
+    (val) => {
+      if (val) {
+        if (props.currentId) {
+          const currentItem = store.currentEnvDetailInfo.config.dataSources.find(
+            (item) => item.id === props.currentId
+          ) as DataSourceItem;
+          if (currentItem) {
+            if (props.isCopy) {
+              form.value = {
+                ...currentItem,
+                id: '',
+                dataSource: `copy_${currentItem.dataSource}`,
+              };
+            } else {
+              form.value = {
+                ...currentItem,
+              };
+            }
+          } else {
+            formReset();
+          }
         }
-      } else {
-        formReset();
       }
     }
+  );
+
+  onMounted(() => {
+    getDriverOption();
   });
 </script>
 
diff --git a/frontend/src/views/setting/organization/serviceIntegration/index.vue b/frontend/src/views/setting/organization/serviceIntegration/index.vue
index 9833fca94d..d1742ed172 100644
--- a/frontend/src/views/setting/organization/serviceIntegration/index.vue
+++ b/frontend/src/views/setting/organization/serviceIntegration/index.vue
@@ -11,7 +11,7 @@
               t('organization.service.expand')
             }}</span>
           </template>
-          <div class="flex w-[100%] flex-row justify-between text-sm font-normal">
+          <div class="flex w-[100%] flex-row justify-between pb-1 text-sm font-normal">
             <div v-for="(item, index) in cardContent" :key="item.id" class="item mt-4" :class="`ms-item-${index}`">
               <span class="mr-3">
                 <svg-icon width="64px" height="46px" :name="item.icon" />
@@ -114,6 +114,7 @@
       ],
       step: '@/assets/images/ms_plugindownload.jpg',
       description: 'organization.service.description',
+      bg: '@/assets/svg/service_01.svg',
     },
     {
       id: '1002',
@@ -129,6 +130,7 @@
       ],
       step: '@/assets/images/ms_configplugin.jpg',
       description: 'organization.service.configDescription',
+      bg: '@/assets/svg/service_02.svg',
     },
   ]);
   const isCollapse = ref<boolean>(false);
@@ -167,11 +169,13 @@
     @apply flex items-center rounded-md;
   }
   .ms-item-0 {
-    background: url('@/assets/images/ms_plugindownload.jpg') no-repeat center;
+    background: url('@/assets/svg/service_01.svg') no-repeat;
+    background-position: center;
     background-size: cover;
   }
   .ms-item-1 {
-    background: url('@/assets/images/ms_configplugin.jpg') no-repeat center;
+    background: url('@/assets/svg/service_02.svg') no-repeat;
+    background-position: center;
     background-size: cover;
   }
 </style>