npm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react --save
npm install sass --save-dev

import React, { useEffect, useCallback } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { LiveList, useLoginState } from 'tuikit-atomicx-react';
import type { LiveInfo } from 'tuikit-atomicx-react';
import { UIKitProvider, MessageBox } from '@tencentcloud/uikit-base-component-react';
import styles from './LiveListView.module.scss';

const LiveListView: React.FC = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const { loginUserInfo, login, setSelfInfo } = useLoginState();

  const handleLiveRoomClick = (liveInfo: LiveInfo) => {
    if (loginUserInfo?.userId === liveInfo.liveOwner?.userId) {
      MessageBox.alert({
        title: '警告',
        content: '无法查看自己的直播间',
      });
      return;
    }

    if (liveInfo?.liveId) {
      // 可以在此处添加业务处理，跳转到观看页面
      // // 从【直播列表页面】跳转【观众观看页面】示例
      // const newParams = new URLSearchParams(searchParams);
      // newParams.set('liveId', liveInfo.liveId);
      // // 直播间 ID 放入 URL 参数，观众观看页面可根据 URL 参数进入对应直播间
      // navigate(`/live-player?${newParams.toString()}`); 
    }
  };

  const initLogin = useCallback(async () => {
    try {
      await login({
        SDKAppID: 0,    // 请替换为您的 SDKAppID（服务开通时获取）
        userID: '',     // 请替换为您的用户 ID
        userSig: '',    // 请替换为您的用户签名（详细获取方式请参阅【步骤1：环境配置及开通服务】文档）
      });
      await setSelfInfo({
        userName: '',   // 用户昵称，会显示在成员列表、聊天消息中。不设置昵称时，将显示用户 ID
        avatarUrl: '',  // 用户头像，必须为完整的 URL 图片地址，比如：https://your.domain.com/avatar-default.png
      });
    } catch (error) {
      console.error('登录失败:', error);
    }
  }, [login, setSelfInfo]);

  useEffect(() => {
    async function init() {
      await initLogin();
    }

    if (!loginUserInfo?.userId) {
      init();
    } else {
      console.log('[LiveList]用户已登录:', loginUserInfo.userId);
    }
  }, [initLogin, loginUserInfo?.userId]);

  return (
    <UIKitProvider theme="dark">
      <div className={styles.liveList}>
        {/* 直播列表组件：设置为显示 5 列、注册直播间点击事件处理函数 */}
        <LiveList columnCount={5} onLiveRoomClick={handleLiveRoomClick} />
      </div>
    </UIKitProvider>
  );
};

export default LiveListView;