diff --git a/frontend/src/components/business/ms-filter-panel/query-form-item.vue b/frontend/src/components/business/ms-filter-panel/query-form-item.vue
index 540b80b76a..bdcf6cc543 100644
--- a/frontend/src/components/business/ms-filter-panel/query-form-item.vue
+++ b/frontend/src/components/business/ms-filter-panel/query-form-item.vue
@@ -36,9 +36,16 @@
         </component>
       </div>
       <div class="flex flex-1">
+        <TimerSelect
+          v-if="getQueryContentType('time-select')"
+          :model-value="form.queryContent.value"
+          v-bind="form.queryContent.props"
+          :operation-type="form.operatorCondition.value"
+          @update-time="updateTimeValue"
+        />
         <component
           :is="form.queryContent.type"
-          v-if="form.queryContent.type !== 'time-select'"
+          v-else
           v-bind="form.queryContent.props"
           v-model="form.queryContent.value"
           @change="filterKeyChange"
@@ -48,7 +55,7 @@
               opt.label
             }}</a-option>
           </template>
-          <template v-if="form.queryContent.type === 'a-select-group'">
+          <template v-else-if="form.queryContent.type === 'a-select-group'">
             <a-select v-model="form.queryContent.value" v-bind="form.queryContent.props">
               <a-optgroup v-for="group of form.searchKey.options" :key="group.id" :label="group.label">
                 <a-option v-for="groupOptions of group.options" :key="groupOptions.id" :value="groupOptions.id">{{
@@ -58,13 +65,6 @@
             </a-select>
           </template>
         </component>
-        <TimerSelect
-          v-else
-          :model-value="form.queryContent.value"
-          v-bind="form.queryContent.props"
-          :operation-type="form.operatorCondition.value"
-          @update-time="updateTimeValue"
-        />
         <div class="minus"> <slot></slot></div>
       </div>
     </div>
@@ -76,16 +76,16 @@
   import { cloneDeep } from 'lodash-es';
   import { useI18n } from '@/hooks/useI18n';
   import { TEST_PLAN_TEST_CASE } from './caseUtils';
-  import TimerSelect from './component/ms-date-picker.vue';
+  import TimerSelect from './time-select.vue';
   import { SelectOptionData } from '@arco-design/web-vue';
 
   const { t } = useI18n();
 
   const props = defineProps<{
-    formItem: Record<string, any>;
-    index: number;
-    formList: Record<string, any>[];
-    selectGroupList: SelectOptionData[];
+    formItem: Record<string, any>; // 当前筛选项
+    index: number; // 当前操作的项索引
+    formList: Record<string, any>[]; // 全部项列表筛选项列表
+    selectGroupList: SelectOptionData[]; // 条件字段筛选下拉列表
   }>();
 
   const emits = defineEmits(['dataUpdated']);
@@ -132,6 +132,17 @@
     form.value.queryContent.value = time;
     emits('dataUpdated', form.value, props.index);
   };
+
+  // 判断当前情况
+  const getQueryContentType = (type: string) => {
+    switch (type) {
+      // 时间选择面板
+      case 'time-select':
+        return true;
+      default:
+        return false;
+    }
+  };
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/components/business/ms-filter-panel/searchForm.vue b/frontend/src/components/business/ms-filter-panel/searchForm.vue
index b3c7cb0524..891038ec19 100644
--- a/frontend/src/components/business/ms-filter-panel/searchForm.vue
+++ b/frontend/src/components/business/ms-filter-panel/searchForm.vue
@@ -23,20 +23,7 @@
         >
           <div
             v-show="formModels.length > 1"
-            :class="[
-              'flex',
-              'h-[32px]',
-              'w-[32px]',
-              'p-[2px]',
-              'cursor-pointer',
-              'items-center',
-              'justify-center',
-              'text-[var(--color-text-4)]',
-              'hover:text-[rgb(var(--primary-5))]',
-              'hover:bg-[rgb(var(--primary-9))]',
-              'rounded',
-              'ml-[8px]',
-            ]"
+            class="remove-button ml-[8px] h-[32px] w-[32px] p-[2px]"
             @click="removeField(index)"
           >
             <icon-minus-circle />
@@ -228,4 +215,12 @@
       color: var(--color-text-2);
     }
   }
+  .remove-button {
+    color: var(--color-text-4);
+    @apply flex cursor-pointer items-center justify-center  rounded;
+    &:hover {
+      color: rgb(var(--primary-5));
+      background: rgb(var(--primary-9));
+    }
+  }
 </style>
diff --git a/frontend/src/components/business/ms-filter-panel/component/ms-date-picker.vue b/frontend/src/components/business/ms-filter-panel/time-select.vue
similarity index 100%
rename from frontend/src/components/business/ms-filter-panel/component/ms-date-picker.vue
rename to frontend/src/components/business/ms-filter-panel/time-select.vue