快速接入（React）

git clone https://github.com/Tencent-RTC/TUILiveKit_Manager
cd TUILiveKit_Manager
pnpm install

VITE_API_BASE_URL=http://localhost:9000/api

pnpm run dev:react

STORAGE_PROVIDER=cos

COS_SECRET_ID=your_secret_id        # 腾讯云 API SecretId
COS_SECRET_KEY=your_secret_key      # 腾讯云 API SecretKey
COS_BUCKET=your-bucket-1250000000   # COS 存储桶名称
COS_REGION=ap-guangzhou             # 存储桶所在地域
COS_CDN_DOMAIN=web.sdk.qcloud.com   # （可选）CDN 加速域名，不配置则使用默认 COS 域名
COS_PATH_PREFIX=uploads             # （可选）存储路径前缀，文件将存储在此目录下

STORAGE_PROVIDER=custom

CUSTOM_UPLOAD_URL=https://your-api.com/upload     # 上传接口地址（必填）
CUSTOM_ACCESS_DOMAIN=https://cdn.your-api.com     # （可选）文件访问域名前缀
CUSTOM_UPLOAD_FIELD=file                          # （可选）上传文件字段名，默认 file
CUSTOM_RESPONSE_URL_FIELD=data.url                # （可选）响应中 URL 字段的 JSON 路径，默认 data.url
CUSTOM_AUTH_HEADER=Authorization: Bearer token    # （可选）自定义认证请求头
CUSTOM_PATH_PREFIX=uploads                        # （可选）存储路径前缀

# 腾讯云 API 密钥（内容审核、违规标签等功能依赖）
TENCENT_CLOUD_SECRET_ID=xxxx    # 请替换腾讯云 SecretId
TENCENT_CLOUD_SECRET_KEY=xxxx   # 请替换腾讯云 SecretKey

import type { ComponentType, LazyExoticComponent } from 'react';

import { configureLiveManager } from 'tuikit-live-manager-sdk-react';

export default configureLiveManager<ComponentType | LazyExoticComponent<any>>({
  brand: {
    appName: '我的直播管理系统',
    pageTitle: '直播管理后台',
    logoUrl: '/assets/my-logo.png',
    primaryColor: '#0052D9',
  },
  menus: {
    hidden: [],
    rename: { 'live-list': '直播间管理' },
    order: ['live-list', 'live-monitor', 'gift-config'],
    extraMenus: [],
  },
  components: {},
  features: { enableGift: true },
  runtime: {
    apiBaseUrl: 'http://localhost:9000/api',
    language: 'zh-CN',
  },
});

export default configureLiveManager<ComponentType | LazyExoticComponent<any>>({
  components: {
    layout: { headerRight: MyHeaderWidget },
  },
});

// live-manager.ts
import MyMonitorButton from './components/MyMonitorButton.tsx';

export default configureLiveManager({
  components: {
    liveMonitor: {
      userActionExtraItems: MyMonitorButton,
    },
  },
});

// MyMonitorButton.tsx
import type { MonitorLiveInfo } from 'tuikit-live-manager-sdk-react';

interface Props { live: MonitorLiveInfo }

function MyMonitorButton({ live }: Props) {
  return (
    <t-button variant="text" size="small">
      自定义操作 — {live.liveName}
    </t-button>
  );
}

// live-manager.ts
import CustomColumn from './components/CustomColumn.tsx';

export default configureLiveManager({
  components: {
    liveList: {
      tableExtraColumns: CustomColumn,
    },
  },
});

// CustomColumn.tsx
import type { MonitorLiveInfo } from 'tuikit-live-manager-sdk-react';
import { Tag as TTag } from 'tdesign-react';

interface Props {
  live: MonitorLiveInfo;
}

function CustomColumn({ live }: Props) {
  return (
    <TTag theme={live.isMuted ? 'warning' : 'success'} variant="light">
      {live.isMuted ? '已禁言' : '正常'}
    </TTag>
  );
}

export default CustomColumn;

// live-manager.ts
import CustomPanel from './components/CustomPanel.tsx';

export default configureLiveManager({
  components: {
    liveControl: {
      customControlPanel: CustomPanel,
    },
  },
});

// CustomPanel.tsx
import { useMemo } from 'react';
import type { MonitorLiveInfo, LiveStats } from 'tuikit-live-manager-sdk-react';

interface Props {
  liveInfo: MonitorLiveInfo | null;
  stats: LiveStats;
}

function CustomPanel({ liveInfo, stats }: Props) {
  const revenueRate = useMemo(() => {
    if (!stats || stats.viewCount === 0) return '0';
    return ((Number(stats.giftUserCount ?? 0) / stats.viewCount) * 100).toFixed(2);
  }, [stats]);

  return (
    <t-card title="自定义统计" class="custom-panel">
      <p>送礼转化率：{revenueRate}%</p>
      <p>累计点赞：{stats.likeCount.toLocaleString()}</p>
      <p>累计评论：{stats.commentCount.toLocaleString()}</p>
    </t-card>
  );
}

// live-manager.ts
import GiftCategoryTag from './components/GiftCategoryTag.tsx';

export default configureLiveManager<ComponentType | LazyExoticComponent<any>>({
  components: {
    giftConfig: {
      giftTableExtraColumns: GiftCategoryTag,
    },
  },
});

// GiftCategoryTag.tsx
import type { GiftItem } from 'tuikit-live-manager-sdk-react';
import { Space as TSpace, Tag as TTag } from 'tdesign-react';

interface Props {
  gift: GiftItem;
}

function GiftCategoryTag({ gift }: Props) {
  const categories = gift.categories ?? [];
  return (
    <TSpace size="small">
      {categories.map(cat => (
        <TTag key={cat} size="small" variant="light">
          {cat}
        </TTag>
      ))}
    </TSpace>
  );
}

export default GiftCategoryTag;