tuikit-atomicX-react

TUIChat React UI 组件库

已迁移的组件和状态

组件 (Components)

• Search - 搜索组件，支持用户、群组、消息搜索（完整实现）
• ConversationList - 会话列表组件（基础结构已迁移）
• ContactList - 联系人列表组件（基础结构已迁移）

状态管理 (States)

• useSearchState - 搜索状态管理 Hook（完整实现，原 SearchStore）
• useConversationListState - 会话列表状态管理 Hook（原 ConversationListStore）
• useContactListState - 联系人列表状态管理 Hook（原 ContactListState）

类型定义 (Types)

• 搜索相关类型定义（完整迁移）
• 会话列表相关类型定义
• 联系人列表相关类型定义

SearchState 完整实现

SearchState 已经完整实现了原 SearchStore 的所有功能，包括：

核心功能

• ✅ 关键词搜索：支持防抖的关键词搜索
• ✅ 多类型搜索：支持消息、用户、群组搜索
• ✅ 高级搜索参数：支持各种搜索条件筛选
• ✅ 搜索结果管理：完整的搜索结果状态管理
• ✅ 分页加载：支持搜索结果分页加载更多
• ✅ 搜索类型切换：支持不同搜索类型间的切换

搜索模式

• ✅ 标准模式 (STANDARD)：全局搜索模式
• ✅ 嵌入模式 (EMBEDDED)：会话内搜索模式
• ✅ 迷你模式 (MINI)：简化搜索模式

状态监听

• ✅ 搜索结果监听：自动监听搜索结果更新
• ✅ 会话切换监听：自动处理会话切换时的搜索状态重置

实现的方法

interface SearchStateActions {
  setKeyword: (keyword: string) => void;
  setSelectedType: (type: ISearchType | 'all') => void;
  loadMore: (type?: ISearchType) => Promise<void>;
  setSearchMessageAdvancedParams: (params: SearchCloudMessagesParams) => void;
  setSearchUserAdvancedParams: (params: SearchCloudUsersParams) => void;
  setSearchGroupAdvancedParams: (params: SearchCloudGroupsParams) => void;
}

使用方式

import { 
  Search, 
  ConversationList, 
  ContactList,
  useSearchState,
  useConversationListState,
  useContactListState,
  VariantType
} from 'tuikit-atomicX-react';

// 使用 Search 组件
function App() {
  return (
    <div>
      <Search variant={VariantType.STANDARD} />
      <ConversationList />
      <ContactList />
    </div>
  );
}

// 使用 SearchState
function CustomSearchComponent() {
  const { 
    keyword, 
    results, 
    isLoading,
    setKeyword, 
    loadMore,
    setSelectedType 
  } = useSearchState(VariantType.STANDARD);
  
  // 搜索逻辑
  const handleSearch = (searchKeyword: string) => {
    setKeyword(searchKeyword);
  };
  
  // 加载更多
  const handleLoadMore = (type: ISearchType) => {
    loadMore(type);
  };
  
  return (
    <div>
      <input 
        value={keyword} 
        onChange={(e) => handleSearch(e.target.value)} 
      />
      {isLoading && <div>搜索中...</div>}
      {/* 渲染搜索结果 */}
    </div>
  );
}

主要变更

1. 命名变更: 所有 Store 相关命名已更改为 State
2. 结构迁移: 按照 uikit-component-vue3 的目录结构进行组织
3. 状态管理: 使用 Zustand 进行状态管理，保持与原有逻辑一致
4. 类型安全: 完整的 TypeScript 类型定义支持
5. 完整实现: SearchState 已完整实现所有原 SearchStore 功能

技术特性

• 防抖搜索: 300ms 防抖延迟，避免频繁请求
• 多变体支持: 支持 STANDARD、EMBEDDED、MINI 三种搜索模式
• 状态隔离: 不同变体的搜索状态相互独立
• 自动监听: 自动监听 TUIStore 的搜索结果和会话变化
• 错误处理: 完整的错误状态管理
• 加载状态: 完整的加载状态管理

注意事项

• 组件的具体实现内容仍需根据实际需求进一步完善
• 某些依赖模块可能需要在实际项目中安装和配置
• 建议在实际使用时根据项目需求调整组件样式和交互逻辑
• SearchState 已完整实现，可直接用于生产环境