tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/src/components/UserPicker/hooks/useSelection.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { ref, computed, watch, type Ref } from 'vue';
-import type { IUserPickerNode, IUserPickerRow, IUserPickerDataSource, IUserPickerResult } from '../type';
+import type { UserPickerNode, UserPickerRow, UserPickerDataSource, UserPickerResult } from '../type';
 
 interface UseSelectionOptions<T = unknown> {
   defaultSelectedKeys?: string[];
@@ -8,9 +8,9 @@ interface UseSelectionOptions<T = unknown> {
   maxCount?: number;
   minCount?: number;
   isTreeMode?: boolean;
-  dataSource: Ref<IUserPickerDataSource<T>>;
-  onSelectedChange?: (selectedItems: IUserPickerResult<T>) => void;
-  onMaxCountExceed?: (selectedItems: IUserPickerResult<T>) => void;
+  dataSource: Ref<UserPickerDataSource<T>>;
+  onSelectedChange?: (selectedItems: UserPickerResult<T>) => void;
+  onMaxCountExceed?: (selectedItems: UserPickerResult<T>) => void;
 }
 
 interface UseSelectionReturn<T = unknown> {
@@ -21,18 +21,18 @@ interface UseSelectionReturn<T = unknown> {
   isHalfSelected: (key: string) => boolean;
   isLocked: (key: string) => boolean;
   toggle: (key: string) => void;
-  getSelectedItems: () => IUserPickerResult<T>;
-  getNodeChildKeys: (node: IUserPickerNode<T>) => string[];
+  getSelectedItems: () => UserPickerResult<T>;
+  getNodeChildKeys: (node: UserPickerNode<T>) => string[];
   getNodeParentChildrenMap: () => Map<string, string[]>;
   canSelectMore: Ref<boolean>;
   reachMaxCount: Ref<boolean>;
   allSelectedCount: Ref<number>;
-  getSelectableLeafNodes: (nodeKey: string) => IUserPickerNode<T>[];
-  getCancelableLeafNodes: (nodeKey: string) => IUserPickerNode<T>[];
+  getSelectableLeafNodes: (nodeKey: string) => UserPickerNode<T>[];
+  getCancelableLeafNodes: (nodeKey: string) => UserPickerNode<T>[];
 }
 
 // Check if it's tree data structure
-function isTreeDataSource<T>(data: IUserPickerDataSource<T>): data is IUserPickerNode<T>[] {
+function isTreeDataSource<T>(data: UserPickerDataSource<T>): data is UserPickerNode<T>[] {
   if (data.length === 0) {
     return false;
   }
@@ -44,9 +44,9 @@ function isTreeDataSource<T>(data: IUserPickerDataSource<T>): data is IUserPicke
  * @param nodes
  * @returns
  */
-function buildAllNodesMap<T>(nodes: IUserPickerNode<T>[]): Map<string, IUserPickerNode<T>> {
-  const map = new Map<string, IUserPickerNode<T>>();
-  const traverse = (nodesToScan: IUserPickerNode<T>[]) => {
+function buildAllNodesMap<T>(nodes: UserPickerNode<T>[]): Map<string, UserPickerNode<T>> {
+  const map = new Map<string, UserPickerNode<T>>();
+  const traverse = (nodesToScan: UserPickerNode<T>[]) => {
     nodesToScan.forEach(node => {
       map.set(node.key, node);
       if (node.children && node.children.length) {
@@ -59,10 +59,10 @@ function buildAllNodesMap<T>(nodes: IUserPickerNode<T>[]): Map<string, IUserPick
 }
 
 // Build parent-children mapping relationship
-function buildParentChildrenMap<T>(nodes: IUserPickerNode<T>[]): Map<string, string[]> {
+function buildParentChildrenMap<T>(nodes: UserPickerNode<T>[]): Map<string, string[]> {
   const map = new Map<string, string[]>();
 
-  const traverse = (nodesList: IUserPickerNode<T>[], parentKey?: string) => {
+  const traverse = (nodesList: UserPickerNode<T>[], parentKey?: string) => {
     nodesList.forEach(node => {
       if (parentKey) {
         if (!map.has(parentKey)) {
@@ -82,10 +82,10 @@ function buildParentChildrenMap<T>(nodes: IUserPickerNode<T>[]): Map<string, str
 }
 
 // Build child-parent mapping relationship
-function buildChildParentMap<T>(nodes: IUserPickerNode<T>[]): Map<string, string> {
+function buildChildParentMap<T>(nodes: UserPickerNode<T>[]): Map<string, string> {
   const map = new Map<string, string>();
 
-  const traverse = (nodesList: IUserPickerNode<T>[], parentKey?: string) => {
+  const traverse = (nodesList: UserPickerNode<T>[], parentKey?: string) => {
     nodesList.forEach(node => {
       if (parentKey) {
         map.set(node.key, parentKey);
@@ -127,23 +127,23 @@ export function useSelection<T = unknown>({
   // Tree node relationships
   const parentChildrenMap = computed(() => {
     if (isTreeMode && isTreeDataSource(dataSource.value)) {
-      return buildParentChildrenMap(dataSource.value as IUserPickerNode<T>[]);
+      return buildParentChildrenMap(dataSource.value as UserPickerNode<T>[]);
     }
     return new Map<string, string[]>();
   });
 
   const childParentMap = computed(() => {
     if (isTreeMode && isTreeDataSource(dataSource.value)) {
-      return buildChildParentMap(dataSource.value as IUserPickerNode<T>[]);
+      return buildChildParentMap(dataSource.value as UserPickerNode<T>[]);
     }
     return new Map<string, string>();
   });
 
   const nodeEntitiesMap = computed(() => {
     if (isTreeMode && isTreeDataSource(dataSource.value)) {
-      return buildAllNodesMap(dataSource.value as IUserPickerNode<T>[]);
+      return buildAllNodesMap(dataSource.value as UserPickerNode<T>[]);
     }
-    return new Map<string, IUserPickerNode<T>>();
+    return new Map<string, UserPickerNode<T>>();
   });
 
   // Check if maximum selection count is reached
@@ -156,7 +156,7 @@ export function useSelection<T = unknown>({
    * @param node - The node to get the child keys of
    * @returns The child keys of the node
    */
-  const getNodeChildKeys = (node: IUserPickerNode<T>): string[] => {
+  const getNodeChildKeys = (node: UserPickerNode<T>): string[] => {
     const result: string[] = [];
 
     const traverse = (nodeKey: string) => {
@@ -178,7 +178,7 @@ export function useSelection<T = unknown>({
    * @param nodeKey - The key of the node to select
    * @returns The number of leaf nodes that would be selected when selecting this node (excluding already selected or locked nodes)
    */
-  const getSelectableLeafNodes = (nodeKey: string): IUserPickerNode<T>[] => {
+  const getSelectableLeafNodes = (nodeKey: string): UserPickerNode<T>[] => {
     // If the node itself is a leaf node and not selected or locked, return 1
     const nodeEntity = nodeEntitiesMap.value.get(nodeKey);
     if (nodeEntity?.isLeafNode && !selectedKeys.value.has(nodeKey) && !lockedKeysSet.value.has(nodeKey)) {
@@ -186,29 +186,29 @@ export function useSelection<T = unknown>({
     }
 
     // Get all child node keys
-    const childKeys = getNodeChildKeys({ key: nodeKey } as IUserPickerNode<T>);
+    const childKeys = getNodeChildKeys({ key: nodeKey } as UserPickerNode<T>);
 
     // Filter out unselected and unlocked leaf nodes
     const selectableLeafNodes = childKeys
       .filter(key => !selectedKeys.value.has(key) && !lockedKeysSet.value.has(key))
       .map(key => nodeEntitiesMap.value.get(key))
-      .filter(childNode => childNode?.isLeafNode) as IUserPickerNode<T>[];
+      .filter(childNode => childNode?.isLeafNode) as UserPickerNode<T>[];
 
     return selectableLeafNodes;
   };
 
-  const getCancelableLeafNodes = (nodeKey: string): IUserPickerNode<T>[] => {
+  const getCancelableLeafNodes = (nodeKey: string): UserPickerNode<T>[] => {
     const nodeEntity = nodeEntitiesMap.value.get(nodeKey);
     if (nodeEntity?.isLeafNode && selectedKeys.value.has(nodeKey)) {
       return [nodeEntity];
     }
 
-    const childKeys = getNodeChildKeys({ key: nodeKey } as IUserPickerNode<T>);
+    const childKeys = getNodeChildKeys({ key: nodeKey } as UserPickerNode<T>);
 
     const cancelableLeafNodes = childKeys
       .filter(key => selectedKeys.value.has(key) && !lockedKeysSet.value.has(key))
       .map(key => nodeEntitiesMap.value.get(key))
-      .filter(childNode => childNode?.isLeafNode) as IUserPickerNode<T>[];
+      .filter(childNode => childNode?.isLeafNode) as UserPickerNode<T>[];
 
     return cancelableLeafNodes;
   };
@@ -427,14 +427,14 @@ export function useSelection<T = unknown>({
   };
 
   // Get selected items
-  const getSelectedItems = (): IUserPickerResult<T> => {
-    const result: IUserPickerResult<T> = [];
+  const getSelectedItems = (): UserPickerResult<T> => {
+    const result: UserPickerResult<T> = [];
 
     if (isTreeMode && isTreeDataSource(dataSource.value)) {
-      const treeData = dataSource.value as IUserPickerNode<T>[];
+      const treeData = dataSource.value as UserPickerNode<T>[];
 
       // Helper function: find node - use array iteration instead of for...of loop
-      const findNode = (key: string, nodes: IUserPickerNode<T>[]): IUserPickerNode<T> | null => {
+      const findNode = (key: string, nodes: UserPickerNode<T>[]): UserPickerNode<T> | null => {
         const found = nodes.find(node => node.key === key);
         if (found) {
           return found;
@@ -471,7 +471,7 @@ export function useSelection<T = unknown>({
       });
     } else {
       // List mode
-      const listData = dataSource.value as IUserPickerRow<T>[];
+      const listData = dataSource.value as UserPickerRow<T>[];
       selectedKeys.value.forEach(key => {
         const item = listData.find(listItem => listItem.key === key);
         if (item) {

package/src/components/UserPicker/hooks/useTreeState.ts

@@ -1,8 +1,8 @@
 import { ref, type Ref } from 'vue';
-import type { IUserPickerNode } from '../type';
+import type { UserPickerNode } from '../type';
 
 interface UseTreeStateOptions<T = unknown> {
-  onExpand?: (node: IUserPickerNode<T>) => void;
+  onExpand?: (node: UserPickerNode<T>) => void;
 }
 
 interface UseTreeStateReturn<T = unknown> {
@@ -10,7 +10,7 @@ interface UseTreeStateReturn<T = unknown> {
   loadingKeys: Ref<Set<string>>;
   checkNodeIsExpanded: (key: string) => boolean;
   checkNodeIsLoading: (key: string) => boolean;
-  toggleExpand: (node: IUserPickerNode<T>) => void;
+  toggleExpand: (node: UserPickerNode<T>) => void;
   setNodeLoading: (key: string, loading: boolean) => void;
 }
 
@@ -39,7 +39,7 @@ export function useTreeState<T = unknown>({ onExpand }: UseTreeStateOptions<T> =
   };
 
   // Toggle node expand state
-  const toggleExpand = (node: IUserPickerNode<T>) => {
+  const toggleExpand = (node: UserPickerNode<T>) => {
     // If node is leaf node, no need to handle
     if (node.isLeafNode) {
       return;

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

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

package/src/components/UserPicker/index.ts

@@ -1,23 +1,26 @@
-import UserPicker from './UserPicker.vue';
+import UserPickerComponent from './UserPicker.vue';
 import type {
-  IUserPickerProps,
-  IUserPickerRef,
-  IUserPickerRow,
-  IUserPickerNode,
-  IUserPickerDataSource,
-  IUserPickerResult,
+  UserPickerProps,
+  UserPickerRef,
+  UserPickerRow,
+  UserPickerNode,
+  UserPickerDataSource,
+  UserPickerResult,
 } from './type';
+import { addI18n } from '../../i18n';
+import { resources } from './i18n';
 
-import './i18n';
+addI18n('en-US', { translation: { UserPicker: resources['en-US'] } });
+addI18n('zh-CN', { translation: { UserPicker: resources['zh-CN'] } });
 
+const UserPicker = UserPickerComponent;
+
+export { UserPicker };
 export type {
-  IUserPickerProps,
-  IUserPickerRef,
-  IUserPickerRow,
-  IUserPickerNode,
-  IUserPickerDataSource,
-  IUserPickerResult,
+  UserPickerProps,
+  UserPickerRef,
+  UserPickerRow,
+  UserPickerNode,
+  UserPickerDataSource,
+  UserPickerResult,
 };
-export { UserPicker };
-
-export default UserPicker;

package/src/components/UserPicker/type.ts

@@ -1,5 +1,5 @@
 // List item data structure
-export interface IUserPickerRow<T = unknown> {
+export interface UserPickerRow<T = unknown> {
   key: string; // Unique identifier
   label: string; // Display name
   avatarUrl?: string | undefined; // Avatar URL
@@ -7,21 +7,21 @@ export interface IUserPickerRow<T = unknown> {
 }
 
 // Tree node data structure
-export interface IUserPickerNode<T = unknown> {
+export interface UserPickerNode<T = unknown> {
   key: string; // Unique identifier
   label: string; // Display name
   isLeafNode: boolean; // Whether is leaf node
   avatarUrl?: string | undefined; // Avatar URL
   lazyLoad?: boolean; // Whether supports lazy loading
-  children?: Array<IUserPickerNode<T>>; // Child nodes
+  children?: Array<UserPickerNode<T>>; // Child nodes
   extraData?: T | undefined; // Extended data
 }
 
 // Data source type
-export type IUserPickerDataSource<T = unknown> = Array<IUserPickerRow<T>> | Array<IUserPickerNode<T>>;
+export type UserPickerDataSource<T = unknown> = Array<UserPickerRow<T>> | Array<UserPickerNode<T>>;
 
 // Selection result item type
-export interface IUserPickerResultItem<T = unknown> {
+export interface UserPickerResultItem<T = unknown> {
   key: string;
   label: string;
   avatarUrl?: string | undefined;
@@ -31,18 +31,18 @@ export interface IUserPickerResultItem<T = unknown> {
 }
 
 // Selection result type
-export type IUserPickerResult<T = unknown> = Array<IUserPickerResultItem<T>>;
+export type UserPickerResult<T = unknown> = Array<UserPickerResultItem<T>>;
 
 // Component props interface
-export interface IUserPickerProps<T = unknown> {
+export interface UserPickerProps<T = unknown> {
   // Basic properties
   displayMode: 'list' | 'tree'; // Display mode
-  dataSource: IUserPickerDataSource<T>; // Data source
+  dataSource: UserPickerDataSource<T>; // Data source
   defaultSelectedItems?: Array<{ key: string; [key: string]: any }>;
   lockedItems?: Array<{ key: string; [key: string]: any }>;
   maxCount?: number | undefined;
   minCount?: number | undefined;
-  onMaxCountExceed?: (selectedItems: IUserPickerResult<T>) => void;
+  onMaxCountExceed?: (selectedItems: UserPickerResult<T>) => void;
 
   // Search related
   enableSearch?: boolean; // Whether to enable search
@@ -50,31 +50,31 @@ export interface IUserPickerProps<T = unknown> {
   onSearch?: (value: string) => void; // Search callback
 
   // Custom rendering
-  renderItem?: (data: IUserPickerRow<T> | IUserPickerNode<T>) => any; // Vue render function or component
+  renderItem?: (data: UserPickerRow<T> | UserPickerNode<T>) => any; // Vue render function or component
 
   // Event callbacks
-  onSelectedChange?: (selectedItems: IUserPickerResult<T>) => void; // Selection change callback
+  onSelectedChange?: (selectedItems: UserPickerResult<T>) => void; // Selection change callback
   onReachEnd?: () => void; // List scroll to bottom callback (list mode)
 
   // Tree mode specific properties
-  onExpand?: (node: IUserPickerNode<T>) => void; // Expand callback for lazy loading child items
+  onExpand?: (node: UserPickerNode<T>) => void; // Expand callback for lazy loading child items
 }
 
 // Component ref interface
-export interface IUserPickerRef<T = unknown> {
-  getSelectedItems: () => IUserPickerResult<T>; // Get currently selected items
-  updateListData: (newDataSource: Array<IUserPickerRow<T>>) => void; // Update list data
-  updateTreeData: (key: string, partialNewNode: Partial<IUserPickerNode<T>>) => void; // Update tree data
+export interface UserPickerRef<T = unknown> {
+  getSelectedItems: () => UserPickerResult<T>; // Get currently selected items
+  updateListData: (newDataSource: Array<UserPickerRow<T>>) => void; // Update list data
+  updateTreeData: (key: string, partialNewNode: Partial<UserPickerNode<T>>) => void; // Update tree data
 }
 
 // Selection state type (for internal state management)
-export interface ISelectionState {
+export interface SelectionState {
   selectedKeys: Set<string>;
   halfSelectedKeys?: Set<string>; // Only valid in tree mode
 }
 
 // Tree node state type (for internal state management)
-export interface ITreeState {
+export interface TreeState {
   expandedKeys: Set<string>;
   loadingKeys: Set<string>;
 }

package/src/components/VideoSettingPanel/VideoPreview.vue

@@ -1,25 +1,31 @@
 <template>
   <div class="video-preview-container">
-    <div id="video-preview" class="video-preview"></div>
+    <div
+      id="video-preview"
+      class="video-preview"
+    />
     <div class="attention-info">
       <span
         v-if="!isCameraTesting && !isCameraTestLoading"
         class="off-camera-info"
-        >{{ t('Off Camera') }}
+      >{{ t('Off Camera') }}
       </span>
-      <IconLoading size="36" v-if="isCameraTestLoading" class="loading" />
+      <IconLoading
+        v-if="isCameraTestLoading"
+        size="36"
+        class="loading"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue';
-import { IconLoading } from '@tencentcloud/uikit-base-component-vue3';
-import { useI18n } from '../../locales';
 import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { IconLoading, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
 
-const { t } = useI18n();
+const { t } = useUIKit();
 const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
 
 onMounted(async () => {
@@ -83,4 +89,3 @@ onUnmounted(async () => {
   }
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSettingPanel/VideoProfile.vue

@@ -16,13 +16,13 @@
 </template>
 
 <script setup lang="ts">
-import { watch, computed, ComputedRef } from 'vue';
-import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
-import { useI18n } from '../../locales';
+import { watch, computed } from 'vue';
+import type { ComputedRef } from 'vue';
 import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { TUISelect, TUIOption, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
 
-const { t } = useI18n();
+const { t } = useUIKit();
 
 const videoQualityList: ComputedRef<
   { label: string; value: TUIVideoQuality }[]

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

@@ -1,7 +1,12 @@
 export const resource = {
-  Camera: 'Camera',
+  'Camera': 'Camera',
   'Select device': 'Select device',
-  Preview: 'Preview',
+  'Preview': 'Preview',
   'Video profile': 'Video profile',
-  Resolution: 'Resolution',
+  'Resolution': 'Resolution',
+  'Low Definition': 'Low Definition',
+  'Standard Definition': 'Standard Definition',
+  'High Definition': 'High Definition',
+  'Super Definition': 'Super Definition',
+  'Off Camera': 'Off Camera',
 };

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

@@ -1,7 +1,12 @@
 export const resource = {
-  Camera: '摄像头',
+  'Camera': '摄像头',
   'Select device': '选择设备',
-  Preview: '预览',
+  'Preview': '预览',
   'Video profile': '视频设置',
-  Resolution: '分辨率',
+  'Resolution': '分辨率',
+  'Low Definition': '流畅',
+  'Standard Definition': '标清',
+  'High Definition': '高清',
+  'Super Definition': '超清',
+  'Off Camera': '摄像头已关闭',
 };

package/src/components/VideoSettingPanel/index.vue

@@ -2,30 +2,36 @@
   <div class="video-setting-panel">
     <template v-if="cameraSelectVisible">
       <div class="section">
-        <div class="section-title">{{ t('Camera') }}</div>
+        <div class="section-title">
+          {{ t('Camera') }}
+        </div>
         <div class="row">
           <span class="label">{{ t('Select device') }}</span>
           <camera-select />
         </div>
       </div>
 
-      <div class="divider"></div>
+      <div class="divider" />
     </template>
 
     <template v-if="videoPreviewVisible">
       <div class="section">
-        <div class="section-title">{{ t('Preview') }}</div>
+        <div class="section-title">
+          {{ t('Preview') }}
+        </div>
         <div class="preview-container">
           <video-preview class="video-preview" />
         </div>
       </div>
 
-      <div class="divider"></div>
+      <div class="divider" />
     </template>
 
     <template v-if="videoProfileVisible">
       <div class="section">
-        <div class="section-title">{{ t('Video profile') }}</div>
+        <div class="section-title">
+          {{ t('Video profile') }}
+        </div>
         <div class="row">
           <span class="label">{{ t('Resolution') }}</span>
           <video-profile />
@@ -36,15 +42,15 @@
 </template>
 
 <script setup lang="ts">
-import CameraSelect from './CameraSelect.vue';
-import VideoProfile from './VideoProfile.vue';
-import VideoPreview from './VideoPreview.vue';
 import { defineProps } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import CameraSelect from './CameraSelect.vue';
+import VideoPreview from './VideoPreview.vue';
+import VideoProfile from './VideoProfile.vue';
 
 const { t } = useUIKit();
 
-const props = defineProps({
+defineProps({
   cameraSelectVisible: {
     type: Boolean,
     default: true,

package/src/hooks/useLongPress.ts

@@ -1,29 +1,24 @@
 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 事件处理器对象
+ * Vue3 long press hook
+ * @param onLongPress - long press callback function
+ * @param options - configuration options for long press behavior
+ * @returns event handlers and state for long press
  */
 export function useLongPress(
   onLongPress: ((event: PointerEvent) => void) | null,
-  options?: UseLongPressOptions
+  options?: UseLongPressOptions,
 ) {
   const effectiveCallback = onLongPress ?? noop;
 
@@ -35,7 +30,7 @@ export function useLongPress(
     onContextMenu,
   } = options || {};
 
-  let fixedThreshold = 5; // 移动阈值（像素）
+  let fixedThreshold = 5; // Default threshold for cancelOnMove
   if (typeof cancelOnMove === 'number') {
     fixedThreshold = cancelOnMove;
   }
@@ -44,7 +39,6 @@ export function useLongPress(
   let timer: ReturnType<typeof setTimeout> | null = null;
   let startCoords: { x: number; y: number } | null = null;
 
-  // 清除定时器和重置状态
   const clear = (event: PointerEvent) => {
     if (timer) {
       clearTimeout(timer);
@@ -54,7 +48,6 @@ export function useLongPress(
     isLongPressActive.value = false;
   };
 
-  // 开始处理：记录起始位置并开始定时器
   const start = (event: PointerEvent) => {
     clear(event);
     if (preventDefault) {
@@ -68,7 +61,6 @@ export function useLongPress(
     }, delay);
   };
 
-  // 移动处理：如果指针移动超过阈值则取消长按
   const move = (event: PointerEvent) => {
     if (!startCoords || !cancelOnMove) {
       return;
@@ -80,19 +72,16 @@ export function useLongPress(
     }
   };
 
-  // 结束处理：指针抬起，取消长按
   const end = (event: PointerEvent) => {
     clear(event);
   };
 
-  // 组件卸载时清理定时器
   onUnmounted(() => {
     if (timer) {
       clearTimeout(timer);
     }
   });
 
-  // 返回事件处理器
   const getEventHandlers = () => {
     if (onLongPress === null) {
       return {};
@@ -121,4 +110,4 @@ export function useLongPress(
   };
 }
 
-export type { UseLongPressOptions };
+export type { UseLongPressOptions };

package/src/hooks/useMessageActions.ts

@@ -42,13 +42,13 @@ interface MessageAction {
 const DEFAULT_ACTIONS: Record<string, MessageAction> = {
   copy: {
     key: 'copy',
-    label: 'Copy',
+    label: 'copy',
     visible: (message: MessageModel) => message.type === ChatEngine.TYPES.MSG_TEXT,
     icon: IconCopy,
   },
   recall: {
     key: 'recall',
-    label: 'Recall',
+    label: 'recall',
     visible: (message: MessageModel) =>
       !isCallMessage(message) && message.flow === 'out'
       && message.status === 'success'
@@ -57,19 +57,19 @@ const DEFAULT_ACTIONS: Record<string, MessageAction> = {
   },
   quote: {
     key: 'quote',
-    label: 'Quote',
+    label: 'quote',
     visible: (message: MessageModel) => !isCallMessage(message),
     icon: IconMsgQuote,
   },
   forward: {
     key: 'forward',
-    label: 'Forward',
+    label: 'forward',
     visible: (message: MessageModel) => !isCallMessage(message),
     icon: IconMsgForward,
   },
   delete: {
     key: 'delete',
-    label: 'Delete',
+    label: 'delete',
     icon: IconMsgDel,
     visible: true,
     style: {