git clone https://github.com/Tencent-RTC/TUIKit_React.git

cd TUIKit_React/demos/live-monitor-react && npm install && cd server && npm install

// cd TUIKit_React/demos/live-monitor-react/server/config/index.js

const Config = {
  SdkAppId: 0,    // Enter the SDKAppID of your TUILiveKit service
  SecretKey: '',  // Enter the SDKSecretKey for your TUILiveKit service
  Identifier: 'administrator',
  Protocol: 'https://',
  Domain: 'console.tim.qq.com',
  Port: 9000,
};

module.exports = { Config };

// Execute the following command to start the service. The default access address is: http://localhost:9000/api
npm run start

// cd TUIKit_React/demos/live-monitor-react/src/views/LiveMointor/index.tsx

import React, { useLayoutEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useLiveMonitorState } from 'tuikit-atomicx-react';
import { safelyParse } from '../../utils';
import { Header } from '../../components/Header';
import { LiveList } from '../../components/LiveList';
import { Pagination } from '../../components/Pagination';
import { PaginationProvider } from '../../context/PaginationContext';
import styles from './LiveMonitor.module.scss';

const LiveMonitor: React.FC = () => {
  const { init, monitorLiveInfoList } = useLiveMonitorState();
  const navigate = useNavigate();

  useLayoutEffect(() => {
    const account = safelyParse(localStorage.getItem('tuiLiveMonitor-userInfo') || '');

    if (account) {
      init({
        baseUrl: 'http://localhost:9000/api', // Default access address in procedure 4 
        account: {
          sdkAppId: 0,  // The SDKAppID of your TUILiveKit service
          userId: '',   // The userId of the user in procedure 1
          password: '', // The userSig of the user in procedure 1
        },
      });
    } else {
      navigate('/login');
    }
  }, [init, navigate]);

  return (
  <UIKitProvider theme="dark">
    <div className={styles['live-monitor']}>
      <Header />
      <PaginationProvider>
        <LiveList monitorLiveInfoList={monitorLiveInfoList} />
        <div className={styles['live-pagination']}>
          <Pagination pageSize={10} />
        </div>
      </PaginationProvider>
    </div>
  </UIKitProvider>
  );
};

export default LiveMonitor;


npm run start

<UIKitProvider theme="dark">  // When theme is set to dark, the interface adopts a black color theme overall
  xxx                         // When theme is set to light, the interface adopts a white-theme overall
</UIKitProvider>