tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/src/components/Search/SearchAdvanced/DateRangePicker/DateRangePicker.vue

@@ -1,27 +1,54 @@
 <!-- eslint-disable import/extensions -->
 <template>
-  <!-- H5 版本 -->
-  <div v-if="isH5" :class="$style['SearchDateRangePicker__h5-mask']" @click="handleH5Cancel">
-    <div :class="$style['SearchDateRangePicker__h5-panel']" @click.stop>
-      <div :class="$style['SearchDateRangePicker__h5-header']">{{ t('DateRangePicker.Time') }}</div>
+  <div
+    v-if="isH5"
+    :class="$style['SearchDateRangePicker__h5-mask']"
+    @click="handleH5Cancel"
+  >
+    <div
+      :class="$style['SearchDateRangePicker__h5-panel']"
+      @click.stop
+    >
+      <div :class="$style['SearchDateRangePicker__h5-header']">
+        {{ t('DateRangePicker.Time') }}
+      </div>
       <div :class="$style.SearchDateRangePicker__calendar">
         <div :class="$style['SearchDateRangePicker__calendar-header']">
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(true, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(true, false)"
+          >
             &lt;&lt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(true, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(true, false)"
+          >
             &lt;
           </button>
-          <span :class="$style['SearchDateRangePicker__current-month-year']" @click="handlePickerToggle(true)">
+          <span
+            :class="$style['SearchDateRangePicker__current-month-year']"
+            @click="handlePickerToggle(true)"
+          >
             {{ leftDate.getFullYear() }} {{ MONTH_NAMES[leftDate.getMonth()] }}
           </span>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(true, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(true, true)"
+          >
             &gt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(true, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(true, true)"
+          >
             &gt;&gt;
           </button>
-          <div v-if="isPickerOpenLeft" :class="$style['SearchDateRangePicker__picker-dropdown']" ref="pickerRefLeft">
+          <div
+            v-if="isPickerOpenLeft"
+            ref="pickerRefLeft"
+            :class="$style['SearchDateRangePicker__picker-dropdown']"
+          >
             <div :class="$style['SearchDateRangePicker__picker-header']">
               <button
                 :class="$style['SearchDateRangePicker__picker-nav-button']"
@@ -50,7 +77,13 @@
           </div>
         </div>
         <div :class="$style['SearchDateRangePicker__week-days']">
-          <div v-for="day in WEEK_DAYS" :key="day" :class="$style['SearchDateRangePicker__week-day']">{{ day }}</div>
+          <div
+            v-for="day in WEEK_DAYS"
+            :key="day"
+            :class="$style['SearchDateRangePicker__week-day']"
+          >
+            {{ day }}
+          </div>
         </div>
         <div :class="$style.SearchDateRangePicker__days">
           <div
@@ -75,28 +108,48 @@
     </div>
   </div>
 
-  <!-- PC 版本 -->
-  <div v-else :class="[$style.SearchDateRangePicker, className]">
+  <div
+    v-else
+    :class="[$style.SearchDateRangePicker, className]"
+  >
     <div :class="$style.SearchDateRangePicker__calendars">
-      <!-- 左侧日历 -->
       <div :class="$style.SearchDateRangePicker__calendar">
         <div :class="$style['SearchDateRangePicker__calendar-header']">
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(true, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(true, false)"
+          >
             &lt;&lt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(true, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(true, false)"
+          >
             &lt;
           </button>
-          <span :class="$style['SearchDateRangePicker__current-month-year']" @click="handlePickerToggle(true)">
+          <span
+            :class="$style['SearchDateRangePicker__current-month-year']"
+            @click="handlePickerToggle(true)"
+          >
             {{ leftDate.getFullYear() }} {{ MONTH_NAMES[leftDate.getMonth()] }}
           </span>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(true, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(true, true)"
+          >
             &gt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(true, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(true, true)"
+          >
             &gt;&gt;
           </button>
-          <div v-if="isPickerOpenLeft" :class="$style['SearchDateRangePicker__picker-dropdown']" ref="pickerRefLeft">
+          <div
+            v-if="isPickerOpenLeft"
+            ref="pickerRefLeft"
+            :class="$style['SearchDateRangePicker__picker-dropdown']"
+          >
             <div :class="$style['SearchDateRangePicker__picker-header']">
               <button
                 :class="$style['SearchDateRangePicker__picker-nav-button']"
@@ -125,7 +178,13 @@
           </div>
         </div>
         <div :class="$style['SearchDateRangePicker__week-days']">
-          <div v-for="day in WEEK_DAYS" :key="day" :class="$style['SearchDateRangePicker__week-day']">{{ day }}</div>
+          <div
+            v-for="day in WEEK_DAYS"
+            :key="day"
+            :class="$style['SearchDateRangePicker__week-day']"
+          >
+            {{ day }}
+          </div>
         </div>
         <div :class="$style.SearchDateRangePicker__days">
           <div
@@ -148,25 +207,43 @@
         </div>
       </div>
 
-      <!-- 右侧日历 -->
       <div :class="$style.SearchDateRangePicker__calendar">
         <div :class="$style['SearchDateRangePicker__calendar-header']">
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(false, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(false, false)"
+          >
             &lt;&lt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(false, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(false, false)"
+          >
             &lt;
           </button>
-          <span :class="$style['SearchDateRangePicker__current-month-year']" @click="handlePickerToggle(false)">
+          <span
+            :class="$style['SearchDateRangePicker__current-month-year']"
+            @click="handlePickerToggle(false)"
+          >
             {{ rightDate.getFullYear() }} {{ MONTH_NAMES[rightDate.getMonth()] }}
           </span>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(false, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(false, true)"
+          >
             &gt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(false, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(false, true)"
+          >
             &gt;&gt;
           </button>
-          <div v-if="isPickerOpenRight" :class="$style['SearchDateRangePicker__picker-dropdown']" ref="pickerRefRight">
+          <div
+            v-if="isPickerOpenRight"
+            ref="pickerRefRight"
+            :class="$style['SearchDateRangePicker__picker-dropdown']"
+          >
             <div :class="$style['SearchDateRangePicker__picker-header']">
               <button
                 :class="$style['SearchDateRangePicker__picker-nav-button']"
@@ -195,7 +272,13 @@
           </div>
         </div>
         <div :class="$style['SearchDateRangePicker__week-days']">
-          <div v-for="day in WEEK_DAYS" :key="day" :class="$style['SearchDateRangePicker__week-day']">{{ day }}</div>
+          <div
+            v-for="day in WEEK_DAYS"
+            :key="day"
+            :class="$style['SearchDateRangePicker__week-day']"
+          >
+            {{ day }}
+          </div>
         </div>
         <div :class="$style.SearchDateRangePicker__days">
           <div
@@ -223,8 +306,8 @@
 
 <script lang="ts" setup>
 import { ref, watch, onMounted, onUnmounted, defineProps } from 'vue';
-import { isH5 } from '../../../../utils';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { isH5 } from '../../../../utils';
 
 interface DateRangePickerProps {
   value?: [Date | null, Date | null];
@@ -242,7 +325,7 @@ const rightDate = ref(
     const date = new Date();
     date.setMonth(date.getMonth() + 1);
     return date;
-  })()
+  })(),
 );
 const internalDates = ref<[Date | null, Date | null]>([null, null]);
 const isPickerOpenLeft = ref(false);
@@ -290,16 +373,14 @@ const setEndOfDay = (date: Date): Date => {
   return newDate;
 };
 
-// 监听外部值变化
 watch(
   () => props.value,
-  newValue => {
+  (newValue) => {
     internalDates.value = newValue || [null, null];
   },
-  { immediate: true }
+  { immediate: true },
 );
 
-// 点击外部关闭选择器
 const handleClickOutside = (event: MouseEvent) => {
   if (pickerRefLeft.value && !pickerRefLeft.value.contains(event.target as Node)) {
     isPickerOpenLeft.value = false;
@@ -431,7 +512,9 @@ const handlePickerMonthSelect = (isLeft: boolean, month: number) => {
 
 const isDateSelected = (date: Date): boolean => {
   const [start, end] = internalDates.value;
-  if (!start || !end) return false;
+  if (!start || !end) {
+    return false;
+  }
   const dayTime = date.setHours(0, 0, 0, 0);
   const startTime = new Date(start).setHours(0, 0, 0, 0);
   const endTime = new Date(end).setHours(0, 0, 0, 0);
@@ -440,7 +523,9 @@ const isDateSelected = (date: Date): boolean => {
 
 const isStartDate = (date: Date): boolean => {
   const [start] = internalDates.value;
-  if (!start) return false;
+  if (!start) {
+    return false;
+  }
   const dayTime = date.setHours(0, 0, 0, 0);
   const startTime = new Date(start).setHours(0, 0, 0, 0);
   return startTime === dayTime;
@@ -448,7 +533,9 @@ const isStartDate = (date: Date): boolean => {
 
 const isEndDate = (date: Date): boolean => {
   const [, end] = internalDates.value;
-  if (!end) return false;
+  if (!end) {
+    return false;
+  }
   const dayTime = date.setHours(0, 0, 0, 0);
   const endTime = new Date(end).setHours(0, 0, 0, 0);
   return endTime === dayTime;

package/src/components/Search/SearchAdvanced/MessageAdvanced/MessageAdvanced.vue

@@ -1,8 +1,14 @@
 <!-- eslint-disable import/extensions -->
 <template>
   <div :class="$style.SearchMessageAdvanced">
-    <div :class="$style['SearchMessageAdvanced__filter-row']" ref="datePickerRef">
-      <div :class="$style['SearchMessageAdvanced__filter-select']" @click="toggleDatePicker">
+    <div
+      ref="datePickerRef"
+      :class="$style['SearchMessageAdvanced__filter-row']"
+    >
+      <div
+        :class="$style['SearchMessageAdvanced__filter-select']"
+        @click="toggleDatePicker"
+      >
         <span :class="$style['SearchMessageAdvanced__filter-label']"> {{ t('Search.input.selectTime') }}： </span>
         <span :class="$style['SearchMessageAdvanced__filter-value']">
           {{ getDateRangeText() }}
@@ -17,9 +23,10 @@
         </span>
       </div>
       <div :class="$style['SearchMessageAdvanced__quick-options']">
-        <button
+        <TUIButton
           v-for="option in quickOptions"
           :key="option.value"
+          type="text"
           :class="[
             $style['SearchMessageAdvanced__quick-option'],
             { [$style['SearchMessageAdvanced__quick-option--active']]: activeQuickOption === option.value },
@@ -27,10 +34,16 @@
           @click="handleQuickOptionClick(option.value)"
         >
           {{ option.label }}
-        </button>
+        </TUIButton>
       </div>
-      <div v-if="isDatePickerOpen" :class="$style['SearchMessageAdvanced__date-picker-dropdown']">
-        <DateRangePicker :value="dateRange" @change="onDateRangeChange" />
+      <div
+        v-if="isDatePickerOpen"
+        :class="$style['SearchMessageAdvanced__date-picker-dropdown']"
+      >
+        <DateRangePicker
+          :value="dateRange"
+          @change="onDateRangeChange"
+        />
       </div>
     </div>
   </div>
@@ -38,9 +51,9 @@
 
 <script lang="ts" setup>
 import { ref, watch, onMounted, onUnmounted, defineProps } from 'vue';
+import { TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { SearchType } from '../../../../types/engine';
 import { DateRangePicker } from '../DateRangePicker';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
 interface IMessageAdvancedProps {
   advancedParams?: Map<SearchType, any>;
@@ -62,7 +75,6 @@ const quickOptions = [
   { label: t('Search.timeFilter.last7Days'), value: 'last7days' },
 ];
 
-// 点击外部关闭日期选择器
 const handleClickOutside = (event: MouseEvent) => {
   if (datePickerRef.value && !datePickerRef.value.contains(event.target as Node)) {
     isDatePickerOpen.value = false;
@@ -89,10 +101,9 @@ const setEndOfDay = (date: Date): Date => {
   return newDate;
 };
 
-// 监听高级参数变化
 watch(
   () => props.advancedParams,
-  newParams => {
+  (newParams) => {
     const messageParams = newParams?.get(SearchType.MESSAGE);
     let newDateRange: [Date | null, Date | null] = [null, null];
     if (messageParams?.timePosition && messageParams?.timePeriod) {
@@ -102,7 +113,7 @@ watch(
     }
     dateRange.value = newDateRange;
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const dateRangeMatch = (startTime: number | undefined, endTime: number | undefined, daysAgo: number): boolean => {
@@ -129,11 +140,9 @@ function matchQuickOptionByDateRange([start, end]: [Date | null, Date | null]):
   return matchedOption?.option || '';
 }
 
-// 监听日期范围变化，更新快速选项
 watch(
   dateRange,
-  newDateRange => {
-    // 只有在没有手动激活时才自动匹配
+  (newDateRange) => {
     if (!activeQuickOption.value) {
       const startTimes = newDateRange[0]?.getTime();
       const endTimes = newDateRange[1]?.getTime();
@@ -149,7 +158,7 @@ watch(
       activeQuickOption.value = matchedOption?.option || '';
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const getDateRangeText = () => {
@@ -172,7 +181,6 @@ const handleDateRange = (dates: [Date | null, Date | null], quickOption?: string
   };
 
   if (startDate && endDate) {
-    // 指定时间范围
     const startTimestamp = Math.floor(startDate.getTime() / 1000);
     options.timePosition = Math.floor(endDate.getTime() / 1000);
     options.timePeriod = options.timePosition - startTimestamp;

package/src/components/Search/SearchAdvanced/SearchAdvanced.vue

@@ -1,7 +1,11 @@
 <!-- eslint-disable import/extensions -->
 <template>
   <div :class="$style.SearchAdvanced">
-    <SearchTab v-if="variant === VariantType.STANDARD" :active-tab="searchType" @tab-change="handleTabChange" />
+    <SearchTab
+      v-if="variant === VariantType.STANDARD"
+      :active-tab="searchType"
+      @tab-change="handleTabChange"
+    />
     <MessageAdvanced
       v-if="variant === VariantType.STANDARD && searchType === SearchType.MESSAGE"
       :variant="variant"
@@ -19,13 +23,13 @@
 
 <script lang="ts" setup>
 import { defineProps, withDefaults } from 'vue';
-import { VariantType } from '../../../types/search';
-import { SearchType } from '../../../types/engine';
 import { useSearchState } from '../../../states/SearchState';
-import type { SearchAdvancedProps, SearchTabType } from '../../../types/search';
-import { SearchTab } from './SearchTab';
+import { SearchType } from '../../../types/engine';
+import { VariantType } from '../../../types/search';
 import { MessageAdvanced } from './MessageAdvanced';
+import { SearchTab } from './SearchTab';
 import { UserAdvanced } from './UserAdvanced';
+import type { SearchAdvancedProps, SearchTabType } from '../../../types/search';
 
 const props = withDefaults(defineProps<SearchAdvancedProps>(), {
   variant: VariantType.STANDARD,
@@ -38,7 +42,6 @@ const handleTabChange = (tab: SearchTabType) => {
   setSelectedType(tab);
 };
 
-// 处理 MessageAdvanced 组件的回调
 const handleMessageAdvancedChange = (params: Map<SearchType, any>) => {
   const messageParams = params.get(SearchType.MESSAGE);
   if (messageParams) {
@@ -46,7 +49,6 @@ const handleMessageAdvancedChange = (params: Map<SearchType, any>) => {
   }
 };
 
-// 处理 UserAdvanced 组件的回调
 const handleUserAdvancedChange = (params: Map<SearchType, any>) => {
   const userParams = params.get(SearchType.USER);
   if (userParams) {

package/src/components/Search/SearchAdvanced/SearchTab/SearchTab.vue

@@ -1,9 +1,10 @@
 <!-- eslint-disable import/extensions -->
 <template>
   <div :class="$style.SearchTab">
-    <button
+    <TUIButton
       v-for="tab in tabs"
       :key="tab.key"
+      type="text"
       :class="[
         $style['SearchTab__item'],
         {
@@ -13,15 +14,15 @@
       @click="handleTabClick(tab.key)"
     >
       {{ tab.label }}
-    </button>
+    </TUIButton>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineProps, defineEmits } from 'vue';
+import { TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { SearchType } from '../../../../types/engine';
 import type { SearchTabType } from '../../../../types/search';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
 interface SearchTabItem {
   key: SearchTabType;

package/src/components/Search/SearchAdvanced/UserAdvanced/UserAdvanced.scss

@@ -105,7 +105,6 @@
     color: var(--text-color-disabled);
   }
 
-  // 隐藏数字输入框的上下箭头
   &::-webkit-inner-spin-button,
   &::-webkit-outer-spin-button {
     -webkit-appearance: none;

package/src/components/Search/SearchAdvanced/UserAdvanced/UserAdvanced.vue

@@ -14,7 +14,11 @@
           ▼
         </span>
       </div>
-      <div v-if="!isH5 && isGenderOpen" :class="$style.SearchUserAdvanced__dropdown" ref="genderRef">
+      <div
+        v-if="!isH5 && isGenderOpen"
+        ref="genderRef"
+        :class="$style.SearchUserAdvanced__dropdown"
+      >
         <div
           v-for="item in genderList"
           :key="item.value"
@@ -25,7 +29,10 @@
         </div>
       </div>
     </div>
-    <div :class="$style['SearchUserAdvanced__filter-row']" ref="ageRef">
+    <div
+      ref="ageRef"
+      :class="$style['SearchUserAdvanced__filter-row']"
+    >
       <div
         :class="$style['SearchUserAdvanced__filter-select']"
         @click="isH5 ? toggleFilter() : setIsAgeOpen(!isAgeOpen)"
@@ -41,7 +48,10 @@
           ▼
         </span>
       </div>
-      <div v-if="!isH5 && isAgeOpen" :class="$style.SearchUserAdvanced__dropdown">
+      <div
+        v-if="!isH5 && isAgeOpen"
+        :class="$style.SearchUserAdvanced__dropdown"
+      >
         <div :class="$style['SearchUserAdvanced__age-inputs']">
           <input
             type="number"
@@ -49,9 +59,9 @@
             max="99"
             :value="tempAge.min ?? ''"
             placeholder="0"
-            @input="e => handleAgeInputChange('min', (e.target as HTMLInputElement).value)"
             :class="$style['SearchUserAdvanced__age-input']"
-          />
+            @input="e => handleAgeInputChange('min', (e.target as HTMLInputElement).value)"
+          >
           <span>-</span>
           <input
             type="number"
@@ -59,27 +69,42 @@
             max="99"
             :value="tempAge.max ?? ''"
             placeholder="99"
-            @input="e => handleAgeInputChange('max', (e.target as HTMLInputElement).value)"
             :class="$style['SearchUserAdvanced__age-input']"
-          />
+            @input="e => handleAgeInputChange('max', (e.target as HTMLInputElement).value)"
+          >
           <span>{{ t('Search.filter.age.yearsOld') }}</span>
-          <TUIButton :class="$style['SearchUserAdvanced__confirm-button']" @click="handleAgeConfirm">
+          <TUIButton
+            :class="$style['SearchUserAdvanced__confirm-button']"
+            @click="handleAgeConfirm"
+          >
             {{ t('Search.action.confirm') }}
           </TUIButton>
         </div>
       </div>
     </div>
-    <div v-if="isH5" :class="$style['SearchUserAdvanced__filter-row-right']" @click="toggleFilter">
+    <div
+      v-if="isH5"
+      :class="$style['SearchUserAdvanced__filter-row-right']"
+      @click="toggleFilter"
+    >
       <IconSetting :class="$style['SearchUserAdvanced__filter-icon']" />
       <span :class="$style['SearchUserAdvanced__filter-text']">{{ t('Search.filter.title') }}</span>
     </div>
 
-    <div v-if="isFilterPage" :class="$style['SearchUserAdvanced__filter-page']">
+    <div
+      v-if="isFilterPage"
+      :class="$style['SearchUserAdvanced__filter-page']"
+    >
       <div :class="$style['SearchUserAdvanced__filter-page-header']">
-        <div :class="$style['SearchUserAdvanced__back-button']" @click="toggleFilter">
+        <div
+          :class="$style['SearchUserAdvanced__back-button']"
+          @click="toggleFilter"
+        >
           <IconBack size="24" />
         </div>
-        <div :class="$style['SearchUserAdvanced__header-title']">{{ t('Search.filter.title') }}</div>
+        <div :class="$style['SearchUserAdvanced__header-title']">
+          {{ t('Search.filter.title') }}
+        </div>
       </div>
 
       <div :class="$style['SearchUserAdvanced__filter-page-main']">
@@ -93,8 +118,14 @@
             <span :class="$style.SearchUserAdvanced__arrow">&gt;</span>
           </div>
         </div>
-        <div v-if="isGenderOpen" :class="$style['SearchUserAdvanced__action-sheet-mask']">
-          <div :class="$style['SearchUserAdvanced__action-sheet-panel']" ref="genderRef">
+        <div
+          v-if="isGenderOpen"
+          :class="$style['SearchUserAdvanced__action-sheet-mask']"
+        >
+          <div
+            ref="genderRef"
+            :class="$style['SearchUserAdvanced__action-sheet-panel']"
+          >
             <div
               v-for="item in genderList"
               :key="item.value"
@@ -103,7 +134,10 @@
             >
               {{ item.label }}
             </div>
-            <div :class="$style['SearchUserAdvanced__action-sheet-cancel']" @click="setIsGenderOpen(false)">
+            <div
+              :class="$style['SearchUserAdvanced__action-sheet-cancel']"
+              @click="setIsGenderOpen(false)"
+            >
               {{ t('Search.action.cancel') }}
             </div>
           </div>
@@ -123,7 +157,10 @@
       </div>
 
       <div :class="$style['SearchUserAdvanced__filter-page-footer']">
-        <TUIButton :class="$style['SearchUserAdvanced__filter-confirm-button']" @click="handleFilterChange">
+        <TUIButton
+          :class="$style['SearchUserAdvanced__filter-confirm-button']"
+          @click="handleFilterChange"
+        >
           {{ t('Search.action.confirm') }}
         </TUIButton>
       </div>
@@ -148,7 +185,6 @@ const props = defineProps<IUserAdvancedProps>();
 
 const { t } = useUIKit();
 
-// 临时工具函数
 const birthdayToAge = (birthday: number) => {
   const today = new Date();
   const birthDate = new Date(Math.floor(birthday / 10000), Math.floor((birthday % 10000) / 100) - 1, birthday % 100);
@@ -196,7 +232,6 @@ const genderList = [
   },
 ];
 
-// 点击外部关闭下拉框
 const handleClickOutside = (event: MouseEvent) => {
   if (genderRef.value && !genderRef.value.contains(event.target as Node)) {
     isGenderOpen.value = false;
@@ -214,10 +249,9 @@ onUnmounted(() => {
   document.removeEventListener('mousedown', handleClickOutside);
 });
 
-// 监听高级参数变化
 watch(
   () => props.advancedParams,
-  newParams => {
+  (newParams) => {
     const userParams = newParams?.get(SearchType.USER) || {};
     userAdvanced.value = {
       ...userAdvanced.value,
@@ -229,7 +263,7 @@ watch(
       max: userParams?.miniBirthday ? birthdayToAge(userParams?.miniBirthday) : undefined,
     };
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const handleGenderChange = (gender: string) => {
@@ -325,10 +359,10 @@ const setTempAge = (value: { min: number | undefined; max: number | undefined })
 };
 
 const minAge = computed(() =>
-  userAdvanced.value?.maxBirthday ? birthdayToAge(userAdvanced.value.maxBirthday) : undefined
+  userAdvanced.value?.maxBirthday ? birthdayToAge(userAdvanced.value.maxBirthday) : undefined,
 );
 const maxAge = computed(() =>
-  userAdvanced.value?.miniBirthday ? birthdayToAge(userAdvanced.value.miniBirthday) : undefined
+  userAdvanced.value?.miniBirthday ? birthdayToAge(userAdvanced.value.miniBirthday) : undefined,
 );
 
 const getGenderText = (gender: string) => {