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

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/StreamMixer/LocalMixer/index.vue

@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import type { Ref } from 'vue';
-import { ref, onMounted, watch, onUnmounted, computed, nextTick } from 'vue';
+import { ref, onMounted, watch, onBeforeUnmount, computed, nextTick } from 'vue';
 import TUIRoomEngine, {
   TRTCVideoResolutionMode,
   TRTCVideoRotation,
@@ -213,20 +213,25 @@ onMounted(() => {
   re.observe(localMixerRef.value);
   TUIRoomEngine.once('ready', async () => {
     const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
-    await mediaSourceManager.setDisplayParams(document.getElementById('local-video-mixer') as HTMLElement);
+    await mediaSourceManager.bindPreviewArea(document.getElementById('local-video-mixer') as HTMLElement);
     getMixControlStyle();
   });
 
   watch(localLiveStatus, async (newVal) => {
+    const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
     if (newVal === LiveStatus.Live) {
-      const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
       await mediaSourceManager?.startPublish();
     }
+    if (newVal === LiveStatus.IDLE) {
+      await mediaSourceManager?.stopPublish();
+    }
   });
 });
 
-onUnmounted(() => {
+onBeforeUnmount(async () => {
   re.unobserve(localMixerRef.value);
+  const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
+  await mediaSourceManager?.destroy();
 });
 </script>
 

package/src/components/StreamView/manager/mediaManager.ts

@@ -250,7 +250,7 @@ export class MediaManager {
       if (streamType === TUIVideoStreamType.kCameraStream) {
         if (isVideoMixerEnabled.value) {
           const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
-          mediaSourceManager.setDisplayParams(document.getElementById(viewIdList[0]) as HTMLElement);
+          mediaSourceManager.bindPreviewArea(document.getElementById(viewIdList[0]) as HTMLElement);
           // const publishParams = {
           //   videoEncoderParams: {
           //     videoResolution: TRTCVideoResolution.TRTCVideoResolution_1280_720,

package/src/components/UserPicker/UserPicker.vue

@@ -21,7 +21,7 @@
       </div>
       <ListMode
         v-else-if="!isTreeMode"
-        :data-source="searchManager.filteredData.value as IUserPickerRow<any>[]"
+        :data-source="searchManager.filteredData.value as UserPickerRow<any>[]"
         :selected-keys="selectionManager.selectedKeys.value"
         :locked-keys="selectionManager.lockedKeys.value"
         :on-item-click="selectionManager.toggle"
@@ -30,7 +30,7 @@
       />
       <TreeMode
         v-else
-        :data-source="searchManager.filteredData.value as IUserPickerNode<any>[]"
+        :data-source="searchManager.filteredData.value as UserPickerNode<any>[]"
         :selected-keys="selectionManager.selectedKeys.value"
         :half-selected-keys="selectionManager.halfSelectedKeys.value"
         :locked-keys="selectionManager.lockedKeys.value"
@@ -64,10 +64,7 @@ import TreeMode from './components/TreeMode';
 import { useSearchFilter } from './hooks/useSearchFilter';
 import { useSelection } from './hooks/useSelection';
 import { useTreeState } from './hooks/useTreeState';
-import type { IUserPickerProps, IUserPickerRef, IUserPickerNode, IUserPickerRow } from './type';
-
-// Define type for props (without generics for Vue3 compatibility)
-type UserPickerProps = IUserPickerProps<any>;
+import type { UserPickerProps, UserPickerRef, UserPickerNode, UserPickerRow } from './type';
 
 const props = withDefaults(defineProps<UserPickerProps>(), {
   dataSource: () => [],
@@ -129,7 +126,7 @@ watch(
 );
 
 // Generic node update function - can update any properties of a node
-const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<any>>) => {
+const updateNodeByKey = (nodeKey: string, partialNode: Partial<UserPickerNode<any>>) => {
   if (!isTreeMode.value) {
     return;
   }
@@ -187,7 +184,7 @@ const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<a
 };
 
 // Implement methods exposed by ref
-const refMethods: IUserPickerRef<any> = {
+const refMethods: UserPickerRef<any> = {
   getSelectedItems: () => selectionManager.getSelectedItems(),
   updateListData: (newDataSource: any[]) => {
     // Update list data
@@ -195,7 +192,7 @@ const refMethods: IUserPickerRef<any> = {
       internalDataSource.value = newDataSource;
     }
   },
-  updateTreeData: (nodeKey: string, partialNode: Partial<IUserPickerNode<any>>) => {
+  updateTreeData: (nodeKey: string, partialNode: Partial<UserPickerNode<any>>) => {
     // Use generic update function
     updateNodeByKey(nodeKey, partialNode);
   },

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

@@ -27,10 +27,7 @@
         <!-- Checkbox -->
         <div :class="$style['list__checkbox-wrapper']">
           <div :class="[$style.list__checkbox, { [$style['list__checkbox--checked']]: isSelected(item.key) }]">
-            <IconCheckSm
-              v-if="isSelected(item.key)"
-              name="check"
-            />
+            <IconCheckSm v-if="isSelected(item.key)" />
           </div>
         </div>
 
@@ -61,10 +58,10 @@
 import { defineProps } from 'vue';
 import { useUIKit, IconCheckSm } from '@tencentcloud/uikit-base-component-vue3';
 import { Avatar } from '../../../Avatar';
-import type { IUserPickerRow } from '../../type';
+import type { UserPickerRow } from '../../type';
 
 interface ListModeProps<T = unknown> {
-  dataSource: IUserPickerRow<T>[];
+  dataSource: UserPickerRow<T>[];
   selectedKeys: Set<string>;
   lockedKeys: Set<string>;
   onItemClick: (key: string) => void;
@@ -150,7 +147,6 @@ const handleScroll = (e: Event) => {
     align-items: center;
     justify-content: center;
     transition: all 0.3s;
-    color: #fff;
     border: 2px solid #d9d9d9;
 
     &--checked {

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

@@ -48,13 +48,13 @@
 import { defineProps, computed, withDefaults } from 'vue';
 import { IconClose, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { Avatar } from '../../../Avatar';
-import type { IUserPickerResult } from '../../type';
+import type { UserPickerResult } from '../../type';
 
 const { t } = useUIKit();
 
 interface SelectedPanelProps {
   displayMode: 'list' | 'tree';
-  selectedItems: IUserPickerResult;
+  selectedItems: UserPickerResult;
   lockedKeys: Set<string>;
   onRemove: (key: string) => void;
   maxCount?: number;

package/src/components/UserPicker/components/TreeMode/TreeMode.vue

@@ -21,17 +21,17 @@
 <script setup lang="ts">
 import { defineProps } from 'vue';
 import TreeNode from './TreeNode.vue';
-import type { IUserPickerNode } from '../../type';
+import type { UserPickerNode } from '../../type';
 
 interface TreeModeProps<T = unknown> {
-  dataSource: IUserPickerNode<T>[];
+  dataSource: UserPickerNode<T>[];
   selectedKeys: Set<string>;
   halfSelectedKeys: Set<string>;
   lockedKeys: Set<string>;
   expandedKeys: Set<string>;
   loadingKeys: Set<string>;
   onItemClick: (key: string) => void;
-  onExpand: (node: IUserPickerNode<T>) => void;
+  onExpand: (node: UserPickerNode<T>) => void;
   renderItem?: any; // Vue component or render function
 }
 

package/src/components/UserPicker/components/TreeMode/TreeNode.vue

@@ -88,10 +88,10 @@
 import { defineProps, defineEmits, computed } from 'vue';
 import { IconArrowDown, IconCheckSm, IconLoading } from '@tencentcloud/uikit-base-component-vue3';
 import { Avatar } from '../../../Avatar';
-import type { IUserPickerNode } from '../../type';
+import type { UserPickerNode } from '../../type';
 
 interface TreeNodeProps<T = unknown> {
-  node: IUserPickerNode<T>;
+  node: UserPickerNode<T>;
   level: number;
   selectedKeys: Set<string>;
   halfSelectedKeys: Set<string>;
@@ -105,7 +105,7 @@ const props = defineProps<TreeNodeProps>();
 
 const emit = defineEmits<{
   'item-click': [key: string];
-  expand: [node: IUserPickerNode<any>];
+  expand: [node: UserPickerNode<any>];
 }>();
 
 const isSelected = computed(() => props.selectedKeys.has(props.node.key));

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

@@ -1,8 +1,9 @@
-import { ref, computed, type Ref } from 'vue';
-import type { IUserPickerDataSource, IUserPickerNode, IUserPickerRow } from '../type';
+import { ref, computed } from 'vue';
+import type { Ref } from 'vue';
+import type { UserPickerDataSource, UserPickerNode, UserPickerRow } from '../type';
 
 interface UseSearchFilterOptions<T = unknown> {
-  dataSource: Ref<IUserPickerDataSource<T>>;
+  dataSource: Ref<UserPickerDataSource<T>>;
   isTreeMode?: boolean;
   onSearch?: (value: string) => void;
   debounceTime?: number;
@@ -11,7 +12,7 @@ interface UseSearchFilterOptions<T = unknown> {
 interface UseSearchFilterReturn<T = unknown> {
   searchValue: Ref<string>;
   setSearchValue: (value: string) => void;
-  filteredData: Ref<IUserPickerDataSource<T>>;
+  filteredData: Ref<UserPickerDataSource<T>>;
   isSearching: Ref<boolean>;
   handleSearch: (value: string) => void;
   clearSearch: () => void;
@@ -19,7 +20,7 @@ interface UseSearchFilterReturn<T = unknown> {
 }
 
 // Check if it's tree data structure
-function isTreeDataSource<T>(data: IUserPickerDataSource<T>): data is Array<IUserPickerNode<T>> {
+function isTreeDataSource<T>(data: UserPickerDataSource<T>): data is Array<UserPickerNode<T>> {
   if (data.length === 0) {
     return false;
   }
@@ -27,22 +28,22 @@ function isTreeDataSource<T>(data: IUserPickerDataSource<T>): data is Array<IUse
 }
 
 // Search tree structure
-function searchTreeNodes<T>(nodes: Array<IUserPickerNode<T>>, searchValue: string): Array<IUserPickerNode<T>> {
+function searchTreeNodes<T>(nodes: Array<UserPickerNode<T>>, searchValue: string): Array<UserPickerNode<T>> {
   if (!searchValue.trim()) {
     return nodes;
   }
 
   // Helper function: check if node matches
-  const isNodeMatched = (node: IUserPickerNode<T>): boolean =>
+  const isNodeMatched = (node: UserPickerNode<T>): boolean =>
     node.label.toLowerCase().includes(searchValue.toLowerCase());
 
   // Helper function: recursively search nodes
-  const searchNodes = (nodesList: Array<IUserPickerNode<T>>): Array<IUserPickerNode<T>> => {
-    const matchedNodes: Array<IUserPickerNode<T>> = [];
+  const searchNodes = (nodesList: Array<UserPickerNode<T>>): Array<UserPickerNode<T>> => {
+    const matchedNodes: Array<UserPickerNode<T>> = [];
 
     nodesList.forEach(node => {
       const isMatched = isNodeMatched(node);
-      let matchedChildren: Array<IUserPickerNode<T>> = [];
+      let matchedChildren: Array<UserPickerNode<T>> = [];
 
       if (node.children && node.children.length) {
         matchedChildren = searchNodes(node.children);
@@ -53,7 +54,7 @@ function searchTreeNodes<T>(nodes: Array<IUserPickerNode<T>>, searchValue: strin
         matchedNodes.push({
           ...node,
           children: matchedChildren.length > 0 ? matchedChildren : node.children,
-        } as IUserPickerNode<T>);
+        } as UserPickerNode<T>);
       }
     });
 
@@ -64,7 +65,7 @@ function searchTreeNodes<T>(nodes: Array<IUserPickerNode<T>>, searchValue: strin
 }
 
 // Search list structure
-function searchListItems<T>(items: Array<IUserPickerRow<T>>, searchValue: string): Array<IUserPickerRow<T>> {
+function searchListItems<T>(items: Array<UserPickerRow<T>>, searchValue: string): Array<UserPickerRow<T>> {
   if (!searchValue.trim()) {
     return items;
   }
@@ -89,9 +90,9 @@ export function useSearchFilter<T = unknown>({
     }
 
     if (isTreeMode && isTreeDataSource(dataSource.value)) {
-      return searchTreeNodes(dataSource.value as Array<IUserPickerNode<T>>, searchValue.value);
+      return searchTreeNodes(dataSource.value as Array<UserPickerNode<T>>, searchValue.value);
     }
-    return searchListItems(dataSource.value as Array<IUserPickerRow<T>>, searchValue.value);
+    return searchListItems(dataSource.value as Array<UserPickerRow<T>>, searchValue.value);
   });
 
   // Handle search input

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/index.ts

@@ -1,11 +1,11 @@
-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';
@@ -13,12 +13,14 @@ import { resources } from './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 };