tuikit-atomicx-vue3 0.1.1 → 3.3.0

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.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchEmpty {
   display: flex;
   flex-direction: column;

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/Loading/Loading.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchLoading {
   padding: 32px;
   text-align: center;

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

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../styles/mixins' as mixins;
 .SearchResults {
   flex: 1;
   overflow: hidden;
@@ -64,11 +62,8 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+
+  @include mixins.scrollbar-hidden();
 }
 
 .SearchResults__error {
@@ -148,17 +143,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;
@@ -166,19 +150,15 @@
   text-align: center;
   margin: 0;
   padding: 0 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+  @include mixins.text-ellipsis();
 }
 
 .SearchResults__message-detail-content {
   flex: 1;
   overflow-y: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  
+  @include mixins.scrollbar-hidden();
 }
 
 .SearchResults__result-section {
@@ -194,4 +174,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

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../../../styles/mixins' as mixins;
 .conversationItem {
   display: flex;
   align-items: flex-start;
@@ -28,28 +26,16 @@
 .name {
   font-weight: 500;
   font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--text-color-primary);
+
+  @include mixins.text-ellipsis();
 }
 
 .showText {
   font-size: 12px;
   line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -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;
-} 
+  @include mixins.multi-line-ellipsis(3);
+}

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

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../../../styles/mixins' as mixins;
 .SearchGroup {
   display: flex;
   align-items: flex-start;
@@ -27,22 +25,18 @@
   font-weight: 500;
   font-size: 14px;
   margin-bottom: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--text-color-primary);
+
+  @include mixins.text-ellipsis();
 }
 
 .SearchGroup__intro {
   font-size: 12px;
   line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
   word-break: break-word;
   color: var(--text-color-secondary);
+
+  @include mixins.multi-line-ellipsis(3);
 }
 
 :global(.SearchGroup__highlight) {

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

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../../../styles/mixins' as mixins;
 .SearchMessage {
   display: flex;
   align-items: flex-start;
@@ -35,10 +33,9 @@
 .SearchMessage__name {
   font-weight: 500;
   font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--text-color-primary);
+
+  @include mixins.text-ellipsis();
 }
 
 .SearchMessage__time {
@@ -85,13 +82,10 @@
 .SearchMessage__text {
   font-size: 12px;
   line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
   word-break: break-word;
   color: var(--text-color-primary);
+
+  @include mixins.multi-line-ellipsis(3);
 }
 
 .SearchMessage__emoji-img {

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

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchResultsItem {
   padding: 12px 16px;
   cursor: pointer;

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

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../../../styles/mixins' as mixins;
 .SearchUser {
   display: flex;
   align-items: flex-start;
@@ -26,10 +24,9 @@
   font-weight: 500;
   font-size: 14px;
   margin-bottom: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--text-color-primary);
+
+  @include mixins.text-ellipsis();
 }
 
 .SearchUser__signature {
@@ -42,6 +39,8 @@
   -webkit-box-orient: vertical;
   word-break: break-word;
   color: var(--text-color-secondary);
+
+  @include mixins.multi-line-ellipsis(3);
 }
 
 :global(.SearchUser__highlight) {

package/src/components/Search/SearchResults/SearchResultsItem/utils/highlightText.ts

@@ -1,16 +1,16 @@
 /**
- * 转义正则表达式中的特殊字符
- * @param string - 需要转义的字符串
- * @returns 转义后的字符串
+ * trims and escapes a string for use in a regular expression
+ * @param string - string to trim and escape
+ * @returns string with trimmed and escaped characters
  */
 function escapeRegExp(string: string): string {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
 /**
- * 转义HTML特殊字符，防止XSS攻击
- * @param text - 需要转义的文本
- * @returns 转义后的文本
+ * Escape HTML special characters to prevent XSS attacks
+ * @param text - string to escape
+ * @returns escaped string
  */
 function sanitizeInput(text: string): string {
   if (!text || typeof text !== 'string') {
@@ -23,25 +23,24 @@ function sanitizeInput(text: string): string {
 }
 
 /**
- * 文本高亮工具函数
- * 用于在搜索结果中高亮显示关键词
- * @param text - 原始文本
- * @param keyword - 要高亮的关键词
- * @param className - 高亮元素的CSS类名，默认为'highlight'
- * @returns 包含高亮标记的HTML字符串
+ * Highlights a keyword in a given text
+ * @param text - text to highlight
+ * @param keyword - keyword to highlight
+ * @param className - CSS class name for the highlight, default is 'highlight'
+ * @returns HTML string with highlighted text
  */
 export const highlightText = (
   text: string,
   keyword: string,
-  className: string = 'highlight'
+  className = 'highlight',
 ): string => {
   const safeText = sanitizeInput(text);
   const safeKeyword = sanitizeInput(keyword);
-  
+
   if (!text || typeof text !== 'string') {
     return safeText;
   }
-  
+
   if (!safeKeyword || typeof safeKeyword !== 'string') {
     return safeText;
   }
@@ -73,4 +72,4 @@ export const highlightText = (
   }
 };
 
-export default highlightText;
+export default highlightText;

package/src/components/Search/i18n/en-US/Search.ts

@@ -1,5 +1,5 @@
 export const Search = {
-  // 基础操作
+  // actions
   'action.search': 'Search',
   'action.cancel': 'Cancel',
   'action.confirm': 'Confirm',
@@ -8,39 +8,39 @@ export const Search = {
   'action.readMore': 'Read More',
   'action.filter': 'Filter',
 
-  // 搜索类型
+  // types
   'type.all': 'All',
   'type.messages': 'Messages',
   'type.users': 'Users',
   'type.groups': 'Groups',
 
-  // 输入提示
+  // input
   'input.placeholder.keywords': 'Please enter keywords to search',
   'input.selectTime': 'Select Time',
 
-  // 加载状态
+  // status
   'status.loading': 'Loading...',
   'status.noContent': 'No Content',
 
-  // 加载更多
+  // loading
   'loadMore.default': 'Load More',
   'loadMore.messages': 'Load More Messages',
   'loadMore.users': 'Load More Users',
   'loadMore.groups': 'Load More Groups',
 
-  // 搜索结果
+  // results
   'results.title': 'Search Messages',
   'results.relatedTo': '{{count}} texts related to',
   'results.relatedToSuffix': 'related texts',
   'results.foundMessages': 'Found {{count}} messages',
 
-  // 消息类型
+  // message types
   'messageType.image': 'Image Message',
   'messageType.videoCover': 'Video Cover',
   'messageType.custom': 'Custom Message',
   'messageType.unsupported': 'Unsupported Message Type',
 
-  // 用户筛选
+  // filter
   'filter.title': 'Filter Users',
   'filter.gender': 'Gender',
   'filter.age': 'Age',
@@ -50,7 +50,7 @@ export const Search = {
   'filter.gender.secret': 'Secret',
   'filter.age.yearsOld': 'years old',
 
-  // 时间筛选
+  // time filter
   'timeFilter.allTime': 'All Time',
   'timeFilter.today': 'Today',
   'timeFilter.last3Days': 'Last 3 Days',

package/src/components/Search/i18n/zh-CN/Search.ts

@@ -1,5 +1,5 @@
 export const Search = {
-  // 基础操作
+  // actions
   'action.search': '搜索',
   'action.cancel': '取消',
   'action.confirm': '确定',
@@ -8,39 +8,39 @@ export const Search = {
   'action.readMore': '查看更多',
   'action.filter': '筛选',
 
-  // 搜索类型
+  // types
   'type.all': '全部',
   'type.messages': '消息',
   'type.users': '用户',
   'type.groups': '群组',
 
-  // 输入提示
+  // input
   'input.placeholder.keywords': '请输入关键词搜索',
   'input.selectTime': '选择时间',
 
-  // 加载状态
+  // status
   'status.loading': '加载中...',
   'status.noContent': '暂无内容',
 
-  // 加载更多
+  // loading
   'loadMore.default': '加载更多',
   'loadMore.messages': '加载更多消息',
   'loadMore.users': '加载更多用户',
   'loadMore.groups': '加载更多群组',
 
-  // 搜索结果
+  // results
   'results.title': '搜索消息',
-  'results.relatedTo': '{{count}}条与',
+  'results.relatedTo': '{{count}} 条与',
   'results.relatedToSuffix': '的消息',
-  'results.foundMessages': '发现{{count}}条消息',
+  'results.foundMessages': '发现 {{count}} 条消息',
 
-  // 消息类型
+  // message types
   'messageType.image': '图片消息',
   'messageType.videoCover': '视频封面',
   'messageType.custom': '自定义消息',
   'messageType.unsupported': '不支持的消息类型',
 
-  // 用户筛选
+  // filter
   'filter.title': '筛选用户',
   'filter.gender': '性别',
   'filter.age': '年龄',
@@ -50,11 +50,11 @@ export const Search = {
   'filter.gender.secret': '保密',
   'filter.age.yearsOld': '岁',
 
-  // 时间筛选
+  // time filter
   'timeFilter.allTime': '全部时间',
   'timeFilter.today': '今天',
-  'timeFilter.last3Days': '最近3天',
-  'timeFilter.last7Days': '最近7天',
+  'timeFilter.last3Days': '最近 3 天',
+  'timeFilter.last7Days': '最近 7 天',
 };
 
 export default Search;