tuikit-atomicx-vue3 0.1.1 → 3.3.0-beta.3

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) => {

package/src/components/Search/SearchBar/SearchBar.scss

@@ -25,7 +25,6 @@
   &__input {
     flex: 1;
 
-    // 自定义 TUIInput 样式
     .tui-input {
       width: 100%;
       
@@ -115,7 +114,6 @@
     gap: 8px;
   }
 
-  // H5 模式
   &--h5 {
     padding: 10px;
   }

package/src/components/Search/SearchBar/SearchBar.vue

@@ -52,7 +52,13 @@
       :class="$style['SearchBar__right']"
       @click="handleClear"
     >
-      <IconBack :size="24" />
+      <component
+        :is="ClearIcon"
+        v-if="ClearIcon"
+      />
+      <span
+        v-else
+      >{{ t('Search.action.cancel') }}</span>
     </div>
   </div>
 </template>
@@ -74,7 +80,6 @@ const props = withDefaults(defineProps<SearchBarProps>(), {
 
 const inputValue = ref(props.value);
 
-// 监听 value 变化，同步到 inputValue
 watch(
   () => props.value,
   (newValue) => {
@@ -86,7 +91,6 @@ const { t } = useUIKit();
 
 const isHasBack = computed(() => props.variant !== VariantType.MINI && props.variant !== VariantType.EXACT && isH5);
 
-// 替换 searchPlaceholderMap 里的 t('xxx') 为 t('xxx')
 const searchPlaceholderMap = {
   [VariantType.EXACT]: t('Search.action.search'),
   [VariantType.STANDARD]: t('Search.action.search'),
@@ -96,7 +100,6 @@ const searchPlaceholderMap = {
 
 const handleInput = (value: string | number) => {
   const stringValue = String(value);
-  // 创建一个模拟的 Event 对象
   const event = {
     target: { value: stringValue },
   } as unknown as Event;
@@ -112,7 +115,6 @@ const handleBlur = (e: FocusEvent) => {
 };
 
 const handleDone = (element: HTMLInputElement | null) => {
-  // 当用户按下回车键时触发
   if (element) {
     const event = new KeyboardEvent('keydown', { key: 'Enter' });
     props.onKeyDown?.(event);

package/src/components/Search/SearchResults/EmptyResult/EmptyResult.vue

@@ -3,7 +3,9 @@
   <div :class="$style.SearchEmpty">
     <IconSearchDefault size="88px" />
     <div :class="$style['SearchEmpty__text']">
-      <p :class="$style['SearchEmpty__title']">{{ text }}</p>
+      <p :class="$style['SearchEmpty__title']">
+        {{ text }}
+      </p>
     </div>
   </div>
 </template>
@@ -17,7 +19,7 @@ interface IEmptyResultProps {
 }
 
 const props = withDefaults(defineProps<IEmptyResultProps>(), {
-  text: '暂无内容',
+  text: '',
 });
 
 const { t } = useUIKit();

package/src/components/Search/SearchResults/SearchResults.scss

@@ -148,17 +148,6 @@
   z-index: 1;
 }
 
-.SearchResults__back-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--text-color-primary);
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .SearchResults__message-detail-title {
   flex: 1;
   font-size: 14px;
@@ -194,4 +183,9 @@
 .SearchResults__section-footer {
   display: flex;
   padding: 10px 0;
+} 
+
+:global(.highlight) {
+  color: var(--text-color-link);
+  font-weight: 500;
 } 

package/src/components/Search/SearchResults/SearchResults.vue

@@ -1,13 +1,6 @@
 <!-- eslint-disable import/extensions -->
 <template>
-  <div
-    v-if="error"
-    :class="$style['SearchResults__error']"
-  >
-    {{ error.message }}
-  </div>
-
-  <div v-else-if="!keyword">
+  <div v-if="!keyword">
     <component
       :is="SearchResultsPresearch"
       v-if="SearchResultsPresearch"
@@ -18,20 +11,26 @@
       :text="t('Search.input.placeholder.keywords')"
     />
   </div>
+  <div
+    v-else-if="error"
+    :class="$style['SearchResults__error']"
+  >
+    {{ error.message }}
+  </div>
 
-  <div v-else-if="keyword && isLoading">
+  <div v-else-if="!results?.size && isLoading">
     <component :is="SearchResultsLoading" />
   </div>
 
-  <div v-else-if="keyword && !results?.size && !isLoading">
+  <div v-else-if="!results?.size && !isLoading">
     <component :is="SearchResultsEmpty" />
   </div>
 
-  <div v-else-if="results && results.size > 0 && allZero">
+  <div v-else-if="results.size > 0 && allZero">
     <component :is="SearchResultsEmpty" />
   </div>
 
-  <div v-else-if="keyword && searchType !== 'all' && results?.get(searchType)?.totalCount === 0">
+  <div v-else-if="searchType !== 'all' && results?.get(searchType)?.totalCount === 0">
     <component :is="SearchResultsEmpty" />
   </div>
 
@@ -52,12 +51,7 @@
         v-if="variant !== VariantType.EMBEDDED"
         :class="$style['SearchResults__message-detail-header']"
       >
-        <button
-          :class="$style['SearchResults__back-button']"
-          @click="handleBack"
-        >
-          <IconBack />
-        </button>
+        <IconBack @click="handleBack" />
         <span :class="$style['SearchResults__message-detail-title']">
           {{ t('Search.results.relatedTo', { count: results?.get(SearchType.CHAT_MESSAGE)?.totalCount || 0 }) }}
           {{ t('Search.results.relatedToSuffix') }}
@@ -81,13 +75,14 @@
           v-if="results?.get(SearchType.CHAT_MESSAGE)?.hasMore"
           :class="$style['SearchResults__section-footer']"
         >
-          <button
+          <TUIButton
             :class="$style['SearchResults__load-more-button']"
+            type="text"
             :disabled="isLoading"
             @click="() => onLoadMore?.(SearchType.CHAT_MESSAGE)"
           >
             {{ isLoading ? t('Search.status.loading') : getLoadMoreText(SearchType.CHAT_MESSAGE) }}
-          </button>
+          </TUIButton>
         </div>
       </div>
     </div>
@@ -133,13 +128,14 @@
             v-if="currentResults.get(type).hasMore"
             :class="$style['SearchResults__section-footer']"
           >
-            <button
+            <TUIButton
               :class="$style['SearchResults__load-more-button']"
+              type="text"
               :disabled="loadingType === type"
               @click="() => handleLoadMore(type)"
             >
               {{ loadingType === type ? t('Search.status.loading') : getLoadMoreText(type) }}
-            </button>
+            </TUIButton>
           </div>
         </div>
       </div>
@@ -163,13 +159,14 @@
             <span :class="$style.SearchResults__highlight">  {{ keyword }}  </span>
             {{ t('Search.results.relatedToSuffix') }}
           </span>
-          <button
+          <TUIButton
             :class="$style['SearchResults__section-header-action']"
+            type="text"
             @click="() => handleClickItem(chatMessageResult, SearchType.CHAT_MESSAGE)"
           >
             {{ t('Search.action.enterChat') }}
             <IconChevronRight :class="$style.SearchResults__highlight" />
-          </button>
+          </TUIButton>
         </div>
         <div :class="$style['SearchResults__result-items']">
           <div
@@ -189,13 +186,14 @@
           v-if="results?.get(SearchType.CHAT_MESSAGE)?.hasMore"
           :class="$style['SearchResults__section-footer']"
         >
-          <button
+          <TUIButton
             :class="$style['SearchResults__load-more-button']"
+            type="text"
             :disabled="isLoading"
             @click="() => onLoadMore?.(SearchType.CHAT_MESSAGE)"
           >
             {{ isLoading ? t('Search.status.loading') : getLoadMoreText(SearchType.CHAT_MESSAGE) }}
-          </button>
+          </TUIButton>
         </div>
       </div>
     </div>
@@ -204,7 +202,7 @@
 
 <script lang="ts" setup>
 import { ref, computed, watch, useCssModule, withDefaults, defineProps } from 'vue';
-import { IconBack, IconChevronRight, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { IconBack, IconChevronRight, TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { SearchType } from '../../../types/engine';
 import { VariantType, defaultTypeLabels } from '../../../types/search';
 import { isH5 } from '../../../utils';
@@ -267,7 +265,6 @@ function updateActiveConversation() {
 
 watch([() => props.results, () => props.searchType, () => props.variant], updateActiveConversation, { deep: true });
 
-// 监听关键词变化
 watch(
   () => props.keyword,
   () => {
@@ -277,7 +274,6 @@ watch(
   },
 );
 
-// 监听加载状态变化
 watch(
   () => props.isLoading,
   (newIsLoading) => {

package/src/components/Search/SearchResults/SearchResultsItem/Conversation/Conversation.scss

@@ -44,12 +44,4 @@
   -webkit-box-orient: vertical;
   word-break: break-word;
   color: var(--text-color-secondary);
-}
-
-:global(.highlight) {
-  background-color: var(--bg-color-operate);
-  color: var(--text-color-link);
-  padding: 0 2px;
-  border-radius: 2px;
-  font-weight: 500;
-} 
+}