快速接入（Vue3）

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:vue

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 { Component } from 'vue';

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

export default configureLiveManager({
  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({
  components: {
    layout: { headerRight: MyHeaderWidget },
  },
});

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

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

<!-- MyMonitorButton.vue -->
<script setup lang="ts">
import type { MonitorLiveInfo } from 'tuikit-live-manager-sdk-vue';

defineProps<{ live: MonitorLiveInfo }>();
</script>

<template>
  <t-button variant="text" size="small">
    自定义操作 — {{ live.liveName }}
  </t-button>
</template>

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

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

<!-- CustomColumn.vue -->
<script setup lang="ts">
import type { MonitorLiveInfo } from 'tuikit-live-manager-sdk-vue';

defineProps<{ live: MonitorLiveInfo }>();
</script>

<template>
  <t-tag :theme="live.isMuted ? 'warning' : 'success'" variant="light">
    {{ live.isMuted ? '已禁言' : '正常' }}
  </t-tag>
</template>

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

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

<!-- CustomPanel.vue -->
<script setup lang="ts">
import { computed } from 'vue';
import type { MonitorLiveInfo, LiveStats } from 'tuikit-live-manager-sdk-vue';

const props = defineProps<{
  liveInfo: MonitorLiveInfo | null;
  stats: LiveStats;
}>();

const revenueRate = computed(() => {
  if (!props.stats || props.stats.viewCount === 0) return '0';
  return ((Number(props.stats.giftUserCount ?? 0) / props.stats.viewCount) * 100).toFixed(2);
});
</script>

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

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

export default configureLiveManager({
  components: {
    giftConfig: {
      giftTableExtraColumns: GiftCategoryTag,
    },
  },
});

<!-- GiftCategoryTag.vue -->
<script setup lang="ts">
import { computed } from 'vue';
import type { GiftItem } from 'tuikit-live-manager-sdk-vue';

const props = defineProps<{ gift: GiftItem }>();
const categories = computed(() => props.gift.categories ?? []);
</script>

<template>
  <t-space size="small">
    <t-tag v-for="cat in categories" :key="cat" size="small" variant="light">
      {{ cat }}
    </t-tag>
  </t-space>
</template>