pnpm run start:server

pnpm add tuikit-live-manager-sdk-vue

// src/main.ts or app entry file
import { initHttpClient } from 'tuikit-live-manager-sdk-vue';
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: '/api',
  timeout: 10000,
});

initHttpClient(axiosInstance);

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

const {
  init,            // Init player/business capabilities (idempotent)
  liveList,        // Live room list Ref<MonitorLiveInfo[]>
  hasMore,         // Whether more data is available Ref<boolean>
  currentLive,     // Currently selected live room Ref<MonitorLiveInfo | null>
  setCurrentLive,  // Set current room (pass liveId)
  fetchLiveList,   // Fetch room list (supports pagination)
  createLive,      // Create room → Promise<MonitorLiveInfo>
  updateLive,      // Update current room info
  endLive,         // End live (supports liveId or currentLive)
  fetchLiveDetail,  // Fetch room details (with streaming info)
  fetchLiveStats,   // Fetch room statistics
  startPlay,        // Start playback (liveId + containerId)
  stopPlay,         // Stop playback
} = useLiveMonitorState();

<script setup>
import { useLiveMonitorState } from 'tuikit-live-manager-sdk-vue';
import { onMounted, ref } from 'vue';

const { init, liveList, fetchLiveList, createLive, setCurrentLive, fetchLiveDetail } = useLiveMonitorState();
const name = ref('');

onMounted(() => {
  init({ baseURL: 'http://localhost:9000/api' });
  fetchLiveList();
});

const handleCreate = async () => {
  const live = await createLive({ anchorId: 'anchor_001', liveName: name.value, coverUrl: '' });
  setCurrentLive(live.liveId);
  await fetchLiveDetail();
};
</script>

<template>
  <div>
    <input v-model="name" />
    <button @click="handleCreate">Create Room</button>
    <ul>
      <li v-for="live in liveList" :key="live.liveId" @click="setCurrentLive(live.liveId)">
        {{ live.liveName }} — {{ live.onlineCount }}  online
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useLiveMonitorState } from 'tuikit-live-manager-sdk-vue';
import { onMounted } from 'vue';

const { init, liveList, hasMore, fetchLiveList } = useLiveMonitorState();

onMounted(() => {
  init({ baseURL: 'http://localhost:9000/api' });
  fetchLiveList();
});

const loadMore = () => {
  if (hasMore.value) {
    fetchLiveList();
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="live in liveList" :key="live.liveId">
        {{ live.liveName }} — {{ live.onlineCount }}  online
      </li>
    </ul>
    <button v-if="hasMore" @click="loadMore">Load More</button>
  </div>
</template>

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

const {
  giftList,                  // Gift list Ref<GiftItem[]>
  giftCategoryList,          // Category list Ref<GiftCategoryItem[]>
  fetchGiftList,             // Fetch gift list (also returns categories)
  createGift,                // Create Gift → Promise<string>
  updateGift,                // Update gift
  deleteGift,                // Delete gift (pass giftId)
  createGiftCategory,        // Create gift category
  updateGiftCategory,        // Update gift category
  deleteGiftCategory,        // Delete gift category
  addGiftCategoryRelations,       // Add gift-category relation
  deleteGiftCategoryRelations,    // Remove gift-category relation
  // Multi-language Management
  getGiftLanguage,                // Get gift multi-language info
  setGiftLanguage,                // Set gift multi-language info
  deleteGiftLanguage,             // Deletegift multi-language
  getGiftCategoryLanguage,        // Get category multi-language info
  setGiftCategoryLanguage,        // Set category multi-language info
  deleteGiftCategoryLanguage,     // Deletecategory multi-language info
} = useGiftState();

<script setup>
import { useGiftState } from 'tuikit-live-manager-sdk-vue';
import { onMounted, ref } from 'vue';

const {
  giftList, giftCategoryList, fetchGiftList,
  createGift, updateGift, deleteGift,
  createGiftCategory, deleteGiftCategory,
} = useGiftState();

const newGiftName = ref('');
const selectedCategory = ref('');

onMounted(() => {
  fetchGiftList();
});

const handleCreateGift = async () => {
  await createGift({ id: `gift_${Date.now()}`, name: newGiftName.value, iconUrl: '', price: 100 });
  newGiftName.value = '';
  await fetchGiftList();
};

const handleDelete = async (giftId: string) => {
  await deleteGift(giftId);
  await fetchGiftList();
};

const handleCreateCategory = async () => {
  await createGiftCategory({ name: 'Popular Gifts' });
  await fetchGiftList();
};
</script>

<template>
  <div>
    <input v-model="newGiftName" placeholder="Gift Name" />
    <button @click="handleCreateGift">Create Gift</button>
    <button @click="handleCreateCategory">Create Category</button>

    <div v-for="cat in giftCategoryList" :key="cat.id">
      <h3>{{ cat.name }}</h3>
      <ul>
        <li v-for="gift in giftList.filter(g => g.categoryIds?.includes(cat.id))" :key="gift.id">
          {{ gift.name }} — {{ gift.price }}  coins
          <button @click="() => handleDelete(gift.id)">Delete</button>
        </li>
      </ul>
    </div>
  </div>
</template>

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

const {
  // Moderation Management
  textModerationAvailable,        // Whether moderation is available Ref<boolean>
  moderationMode,                 // Moderation mode: cloud | custom Ref<ModerationMode>
  customModerationToggleEnabled,  // Full moderation toggle (custom mode)Ref<boolean>
  updateCustomModerationToggleEnabled, // Set full moderation toggle (custom mode)
  textModerationList,             // Text moderation record list Ref<TextModerationItem[]>
  textModerationTotal,            // Total moderation records Ref<number>
  textModerationPageNum,          // Current moderation page Ref<number>
  textModerationLoading,          // Moderation list loading state Ref<boolean>
  fetchTextModerationList,        // Fetch moderation list (supports pagination)
  approveTextModerationItems,     // Batch approve moderation records
  bypassCorrectionKeyword,        // Bypass correction keyword params: { content: string; liveId?: string }
  deleteModerationItems,          // Delete moderation items ids: string[]

  // Member Management
  muteMember,                     // Mute member
  unmuteMember,                   // Unmute member
  banMember,                      // Ban member
  unbanMember,                    // Unban member
  mutedList,                      // Muted list Ref<MutedMember[]>
  bannedList,                     // Banned list Ref<BannedMember[]>
  fetchMutedList,                 // Fetch muted list
  fetchBannedList,                // Fetch banned list

  // Chat Management
  sendViolationWarning,           // Send violation warning
  sendAdminMessage,               // Send admin message content: string
} = useRiskControlState({ liveId: 'xxx', pageSize: 20 });

<script setup>
import { useRiskControlState } from 'tuikit-live-manager-sdk-vue';
import { onMounted } from 'vue';

const props = defineProps<{ liveId: string }>();

const { textModerationList, fetchTextModerationList, approveTextModerationItems, muteMember } =
  useRiskControlState({ liveId: props.liveId, pageSize: 20 });

onMounted(() => { fetchTextModerationList(); });
</script>

<template>
  <div v-for="item in textModerationList" :key="item.id">
    <span>{{ item.content }}</span>
    <button @click="approveTextModerationItems({ ids: [item.id] })">Approve</button>
    <button @click="muteMember({ memberAccounts: [item.userId], muteTime: 300 })">Mute 5 min</button>
  </div>
</template>