tuikit-atomicx-vue3 0.1.0 → 0.1.1

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

@@ -0,0 +1,76 @@
+/**
+ * 转义正则表达式中的特殊字符
+ * @param string - 需要转义的字符串
+ * @returns 转义后的字符串
+ */
+function escapeRegExp(string: string): string {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * 转义HTML特殊字符，防止XSS攻击
+ * @param text - 需要转义的文本
+ * @returns 转义后的文本
+ */
+function sanitizeInput(text: string): string {
+  if (!text || typeof text !== 'string') {
+    return String(text || '');
+  }
+  return text
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * 文本高亮工具函数
+ * 用于在搜索结果中高亮显示关键词
+ * @param text - 原始文本
+ * @param keyword - 要高亮的关键词
+ * @param className - 高亮元素的CSS类名，默认为'highlight'
+ * @returns 包含高亮标记的HTML字符串
+ */
+export const highlightText = (
+  text: string,
+  keyword: string,
+  className: string = 'highlight'
+): string => {
+  const safeText = sanitizeInput(text);
+  const safeKeyword = sanitizeInput(keyword);
+  
+  if (!text || typeof text !== 'string') {
+    return safeText;
+  }
+  
+  if (!safeKeyword || typeof safeKeyword !== 'string') {
+    return safeText;
+  }
+
+  const trimmedKeyword = safeKeyword.trim();
+  if (!trimmedKeyword) {
+    return safeText;
+  }
+
+  try {
+    const regex = new RegExp(`(${escapeRegExp(trimmedKeyword)})`, 'gi');
+    const parts = safeText.split(regex);
+
+    if (parts.length === 1) {
+      return safeText;
+    }
+
+    return parts
+      .map((part, index) => {
+        if (part.toLowerCase() === trimmedKeyword.toLowerCase()) {
+          return `<span key="${index}" class="${className}">${part}</span>`;
+        }
+        return part;
+      })
+      .join('');
+  } catch (error) {
+    console.warn('Error highlighting text:', error);
+    return safeText;
+  }
+};
+
+export default highlightText;

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

@@ -0,0 +1 @@
+export { highlightText } from './highlightText';

package/src/components/Search/SearchResults/index.ts

@@ -0,0 +1,7 @@
+import SearchResultsComponent from './SearchResults.vue';
+
+export * from './SearchResultsItem';
+export * from './EmptyResult';
+export * from './Loading';
+
+export default SearchResultsComponent;

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

@@ -0,0 +1,24 @@
+export const DateRangePicker = {
+  Time: 'Time',
+  January: 'January',
+  February: 'February',
+  March: 'March',
+  April: 'April',
+  May: 'May',
+  June: 'June',
+  July: 'July',
+  August: 'August',
+  September: 'September',
+  October: 'October',
+  November: 'November',
+  December: 'December',
+  Monday: 'Mon',
+  Tuesday: 'Tue',
+  Wednesday: 'Wed',
+  Thursday: 'Thu',
+  Friday: 'Fri',
+  Saturday: 'Sat',
+  Sunday: 'Sun',
+};
+
+export default DateRangePicker;

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

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

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

@@ -0,0 +1,9 @@
+import { Search } from './Search';
+import { DateRangePicker } from './DateRangePicker';
+
+export const enResource = {
+  Search,
+  DateRangePicker,
+};
+
+export default enResource;

package/src/components/Search/i18n/index.ts

@@ -0,0 +1,4 @@
+import enResource from './en-US';
+import zhResource from './zh-CN';
+
+export { enResource, zhResource };

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

@@ -0,0 +1,24 @@
+export const DateRangePicker = {
+  Time: '时间',
+  January: '一月',
+  February: '二月',
+  March: '三月',
+  April: '四月',
+  May: '五月',
+  June: '六月',
+  July: '七月',
+  August: '八月',
+  September: '九月',
+  October: '十月',
+  November: '十一月',
+  December: '十二月',
+  Monday: '一',
+  Tuesday: '二',
+  Wednesday: '三',
+  Thursday: '四',
+  Friday: '五',
+  Saturday: '六',
+  Sunday: '日',
+};
+
+export default DateRangePicker;

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

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

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

@@ -0,0 +1,9 @@
+import { Search } from './Search';
+import { DateRangePicker } from './DateRangePicker';
+
+export const zhResource = {
+  Search,
+  DateRangePicker,
+};
+
+export default zhResource;

package/src/components/Search/index.ts

@@ -0,0 +1,34 @@
+import { addI18n } from '../../i18n';
+import { enResource, zhResource } from './i18n';
+import SearchComponent from './Search.vue';
+import {
+  default as SearchAdvancedComponent,
+  MessageAdvanced as MessageAdvancedComponent,
+  UserAdvanced as UserAdvancedComponent,
+} from './SearchAdvanced';
+import { default as SearchBarComponent } from './SearchBar';
+import {
+  default as SearchResultsComponent,
+  SearchResultItem as SearchResultItemComponent,
+} from './SearchResults';
+
+const Search = SearchComponent;
+const SearchAdvanced = SearchAdvancedComponent;
+const SearchResults = SearchResultsComponent;
+const SearchBar = SearchBarComponent;
+const UserAdvanced = UserAdvancedComponent;
+const MessageAdvanced = MessageAdvancedComponent;
+const SearchResultItem = SearchResultItemComponent;
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+
+export {
+  Search,
+  SearchAdvanced,
+  UserAdvanced,
+  MessageAdvanced,
+  SearchResults,
+  SearchResultItem,
+  SearchBar,
+};

package/src/components/UserPicker/UserPicker.vue

@@ -5,7 +5,7 @@
   >
     <SearchBar
       v-if="enableSearch"
-      :placeholder="searchPlaceholder || t('TUIConversation.Search')"
+      :placeholder="searchPlaceholder || t('UserPicker.search')"
       :on-search="searchManager.handleSearch"
     />
 
@@ -17,7 +17,7 @@
         v-if="searchManager.isSearchEmpty.value"
         :class="$style['empty-search']"
       >
-        {{ t('TUIChat.No Result') }}
+        {{ t('UserPicker.no_result') }}
       </div>
       <ListMode
         v-else-if="!isTreeMode"
@@ -138,7 +138,7 @@ const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<a
   const newData = JSON.parse(JSON.stringify(internalDataSource.value));
 
   // Recursive function: find and update node
-  const updateNode = (nodes: Array<IUserPickerNode<any>>): boolean => {
+  const updateNode = (nodes: any[]): boolean => {
     for (let i = 0; i < nodes.length; i += 1) {
       if (nodes[i].key === nodeKey) {
         // Found target node, apply updates
@@ -176,7 +176,7 @@ const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<a
 
   // Try to update, return original data if node is not found
   if (Array.isArray(newData)) {
-    updateNode(newData as Array<IUserPickerNode<any>>);
+    updateNode(newData as any[]);
   }
   internalDataSource.value = newData;
 
@@ -189,7 +189,7 @@ const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<a
 // Implement methods exposed by ref
 const refMethods: IUserPickerRef<any> = {
   getSelectedItems: () => selectionManager.getSelectedItems(),
-  updateListData: (newDataSource: Array<IUserPickerRow<any>>) => {
+  updateListData: (newDataSource: any[]) => {
     // Update list data
     if (!isTreeMode.value) {
       internalDataSource.value = newDataSource;

package/src/components/UserPicker/components/ListMode/ListMode.vue

@@ -3,7 +3,7 @@
     v-if="dataSource.length === 0"
     :class="$style.list__empty"
   >
-    {{ t('TUIChat.No Data Available') }}
+    {{ t('UserPicker.no_data_available') }}
   </div>
   <div
     v-else
@@ -64,7 +64,7 @@ import { Avatar } from '../../../Avatar';
 import type { IUserPickerRow } from '../../type';
 
 interface ListModeProps<T = unknown> {
-  dataSource: Array<IUserPickerRow<T>>;
+  dataSource: IUserPickerRow<T>[];
   selectedKeys: Set<string>;
   lockedKeys: Set<string>;
   onItemClick: (key: string) => void;

package/src/components/UserPicker/components/SelectedPanel/SelectedPanel.vue

@@ -4,7 +4,7 @@
     :class="$style.selected__panel"
   >
     <div :class="$style.selected__header">
-      <span :class="$style.selected__title">{{ t('TUIChat.Selected') }}</span>
+      <span :class="$style.selected__title">{{ t('UserPicker.selected') }}</span>
       <span :class="$style.selected__count">
         {{ leafItems.length }}
         <template v-if="maxCount < InfinityValue"> / {{ maxCount }} </template>

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

@@ -0,0 +1,8 @@
+const UserPicker = {
+  search: 'Search',
+  no_result: 'No result',
+  no_data_available: 'No data available',
+  selected: 'Selected',
+};
+
+export default UserPicker;

package/src/components/UserPicker/i18n/index.ts

@@ -0,0 +1,13 @@
+import { i18next } from '@tencentcloud/uikit-base-component-vue3';
+
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+const resources = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+};
+
+Object.entries(resources).forEach(([lng, resource]) => {
+  i18next.addResourceBundle(lng, 'translation', { UserPicker: resource }, true, false);
+});

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

@@ -0,0 +1,8 @@
+const UserPicker = {
+  search: '搜索',
+  no_result: '没有结果',
+  no_data_available: '无数据',
+  selected: '已选择',
+};
+
+export default UserPicker;

package/src/components/UserPicker/index.ts

@@ -8,6 +8,8 @@ import type {
   IUserPickerResult,
 } from './type';
 
+import './i18n';
+
 export type {
   IUserPickerProps,
   IUserPickerRef,

package/src/components/VideoSettingPanel/index.ts

@@ -1,8 +1,10 @@
-import VideoSettingPanel from './index.vue';
+import VideoSettingPanelPC from './index.vue';
 import { addI18n } from '../../i18n';
 import { enResource, zhResource } from './i18n';
 
 addI18n('en-US', { translation: enResource });
 addI18n('zh-CN', { translation: zhResource });
 
+const VideoSettingPanel = VideoSettingPanelPC;
+
 export { VideoSettingPanel };

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useLongPress } from './useLongPress';
+export type { UseLongPressOptions } from './useLongPress';
+
+export { useMouseHover } from './useMouseHover';

package/src/hooks/useLongPress.ts

@@ -0,0 +1,124 @@
+import { ref, onUnmounted } from 'vue';
+
+interface UseLongPressOptions {
+  // 长按触发延迟（毫秒），默认500ms
+  delay?: number;
+  // 是否阻止默认事件，默认true
+  preventDefault?: boolean;
+  // 是否在指针离开元素时取消长按，默认true
+  cancelOutsideElement?: boolean;
+  // 是否在指针移动超过阈值时取消长按，默认true
+  cancelOnMove?: boolean | number;
+  onContextMenu?: (event: PointerEvent) => void;
+}
+
+// 空操作函数
+const noop = () => {};
+
+/**
+ * Vue3长按事件hook
+ * @param onLongPress - 长按触发时的回调函数
+ * @param options - 长按配置选项
+ * @returns 事件处理器对象
+ */
+export function useLongPress(
+  onLongPress: ((event: PointerEvent) => void) | null,
+  options?: UseLongPressOptions
+) {
+  const effectiveCallback = onLongPress ?? noop;
+
+  const {
+    delay = 500,
+    preventDefault = true,
+    cancelOutsideElement = true,
+    cancelOnMove = true,
+    onContextMenu,
+  } = options || {};
+
+  let fixedThreshold = 5; // 移动阈值（像素）
+  if (typeof cancelOnMove === 'number') {
+    fixedThreshold = cancelOnMove;
+  }
+
+  const isLongPressActive = ref(false);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let startCoords: { x: number; y: number } | null = null;
+
+  // 清除定时器和重置状态
+  const clear = (event: PointerEvent) => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    startCoords = null;
+    isLongPressActive.value = false;
+  };
+
+  // 开始处理：记录起始位置并开始定时器
+  const start = (event: PointerEvent) => {
+    clear(event);
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    startCoords = { x: event.clientX, y: event.clientY };
+    timer = setTimeout(() => {
+      effectiveCallback(event);
+      isLongPressActive.value = true;
+      clear(event);
+    }, delay);
+  };
+
+  // 移动处理：如果指针移动超过阈值则取消长按
+  const move = (event: PointerEvent) => {
+    if (!startCoords || !cancelOnMove) {
+      return;
+    }
+    const diffX = Math.abs(event.clientX - startCoords.x);
+    const diffY = Math.abs(event.clientY - startCoords.y);
+    if (diffX > fixedThreshold || diffY > fixedThreshold) {
+      clear(event);
+    }
+  };
+
+  // 结束处理：指针抬起，取消长按
+  const end = (event: PointerEvent) => {
+    clear(event);
+  };
+
+  // 组件卸载时清理定时器
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  });
+
+  // 返回事件处理器
+  const getEventHandlers = () => {
+    if (onLongPress === null) {
+      return {};
+    }
+
+    const handlers: Record<string, (event: PointerEvent) => void> = {
+      onPointerdown: start,
+      onPointermove: move,
+      onPointerup: end,
+    };
+
+    if (onContextMenu) {
+      handlers.onContextmenu = onContextMenu;
+    }
+
+    if (cancelOutsideElement) {
+      handlers.onPointerleave = end;
+    }
+
+    return handlers;
+  };
+
+  return {
+    getEventHandlers,
+    isLongPressActive,
+  };
+}
+
+export type { UseLongPressOptions };

package/src/hooks/useMouseHover.ts

@@ -0,0 +1,40 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+/**
+ * Vue3鼠标悬停检测hook
+ * @param elementRef - 目标元素的ref
+ * @returns 是否悬停的状态
+ */
+export function useMouseHover<T extends HTMLElement = HTMLElement>(
+  elementRef: { value: T | null }
+) {
+  const isHovered = ref(false);
+
+  const handleMouseEnter = () => {
+    isHovered.value = true;
+  };
+
+  const handleMouseLeave = () => {
+    isHovered.value = false;
+  };
+
+  onMounted(() => {
+    const element = elementRef.value;
+    if (element) {
+      element.addEventListener('mouseenter', handleMouseEnter);
+      element.addEventListener('mouseleave', handleMouseLeave);
+    }
+  });
+
+  onUnmounted(() => {
+    const element = elementRef.value;
+    if (element) {
+      element.removeEventListener('mouseenter', handleMouseEnter);
+      element.removeEventListener('mouseleave', handleMouseLeave);
+    }
+  });
+
+  return isHovered;
+}
+
+export default useMouseHover;