このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

Link Management Panel

This document provides a detailed introduction to Link Management Panel (CoGuestPanel). You can refer to the sample code in this document for seamless integration of our pre-developed components in your existing project, or customize the style and layout according to your needs by following the customization section of components in the document.
﻿
Core Features
Feature Name
Detailed Description
Tab switchover
The UI offers dual tabs, allowing users to quickly switch between the Mic Connection Request and Mic Connection Management feature modules. It supports status memory and message prompts.
Application List
Display all pending Mic Connection Requests in real time, showing user avatars, Nicknames, and status. Supports sorting by time and the filter function.
Anchor Operations
Provide abundant one-click operation buttons, support accept application, reject application, disconnect and other features, with real-time feedback on operation results.
Component Integration
Step 1: Configuring the Environment and Activating the Service
Before performing quick integration, you need to refer to preparations to meet the related environment configuration and activate the corresponding service.
Step 2: Dependency Installation
npm
pnpm
yarn
npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
Step 3: Integrating the Link Management Panel
Introduce Link Management Panel in your project and use it. You can copy the following example code directly to your project to show the Link Management Panel.
<template>
  <UIKitProvider theme="light" language="en-US">
    <div class="app">
      <CoGuestPanel class="co-guest-panel" />
    </div>
  </UIKitProvider>
</template>
﻿
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { CoGuestPanel, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';
﻿
const { login, loginUserInfo } = useLoginState();
const { joinLive } = useLiveState();
﻿
async function initLogin() {
  try {
    await login({
      sdkAppId: 0,        // SDKAppID, see Step 1 to get
      userId: '',         // UserID, see Step 1 to get
      userSig: '',        // userSig, see Step 1 to get
    });
  } catch (error) {
    console.error('login error:', error);
  }
}
﻿
onMounted(async () => {
  await initLogin();
  // enter live room by inputting corresponding liveId
  await joinLive({
    liveId: 'input corresponding live streaming room LiveId',     
  });
});
</script>
﻿
<style scoped>.app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.co-guest-panel{width:100%;max-width:500px;padding: 24px;height:600px;background:rgba(255,255,255,0.9);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.1);overflow:hidden}</style>
Custom Style Customization
The Link Management Panel supports style customization via CSS variables. You can override the following variables to adjust the component appearance. After completing Step 3, see the following example to adjust the UI of the Link Management Panel, or directly perform incremental copying of the sample code into your component to generate the effect example.
<template>
   <CoGuestPanel class="co-guest-panel" />
</template>
﻿
<style>
.co-guest-panel{--text-color-primary:#2d3748;--text-color-secondary:#93a3bb;--text-color-link:#20c9e7;--bg-color-primary:#ffffff;--bg-color-hover:#d6e7f3;--stroke-color-primary:#8bb6ef;--stroke-color-secondary:#90c0f4;--shadow-light:0 2px 8px rgba(69,67,67,0.08);--shadow-medium:0 4px 16px rgba(93,87,87,0.12);--transition:all 0.3s ease;}.co-guest-panel .panel-content{background:var(--bg-color-primary);border-radius:16px;border:1px solid var(--stroke-color-primary);box-shadow:var(--shadow-medium);transition:var(--transition);overflow:hidden;}.co-guest-panel .panel-content:hover{box-shadow:0 8px 24px rgba(0,0,0,0.15);transform:translateY(-2px);border-color:var(--stroke-color-secondary);}.co-guest-panel .user-item{padding:16px;margin:8px 0;background:var(--bg-color-primary);border:1px solid var(--stroke-color-primary);border-radius:12px;transition:var(--transition);cursor:pointer;}.co-guest-panel .user-item:hover{background:var(--bg-color-hover);border-color:var(--text-color-link);box-shadow:var(--shadow-light);transform:translateY(-1px);}.co-guest-panel .user-item:active{transform:translateY(0);transition:all 0.15s ease;}.co-guest-panel .user-item.selected{background:rgba(102,126,234,0.08);border-color:var(--text-color-link);box-shadow:var(--shadow-light);}
</style>
Before modification
After modification
﻿
﻿
﻿
﻿
﻿
﻿

Feature Name	Detailed Description
Tab switchover	The UI offers dual tabs, allowing users to quickly switch between the Mic Connection Request and Mic Connection Management feature modules. It supports status memory and message prompts.
Application List	Display all pending Mic Connection Requests in real time, showing user avatars, Nicknames, and status. Supports sorting by time and the filter function.
Anchor Operations	Provide abundant one-click operation buttons, support accept application, reject application, disconnect and other features, with real-time feedback on operation results.

Before modification	After modification