@tencentcloud/sdk-mcp 1.4.7 → 1.6.0-beta.1

package/resource/doc/livekit/preset/live/vue/components/barrage.md

@@ -1,291 +0,0 @@
-本文对**弹幕组件**进行了详细的介绍，其中包含**弹幕消息组件（BarrageList）**和**消息发送组件（BarrageInput）。**您可以在已有项目中直接参考本文示例集成我们开发好的整体组件，也可以根据您的需求按照文档中的组件自定义部分对样式，布局进行深度的定制。
-
-## 组件构成
-| **组件名称** | **具体内容** |
-| --- | --- |
-| **弹幕消息组件（BarrageList）** | 负责实时展示和管理弹幕消息流的组件，提供**消息列表渲染、时间聚合、用户交互和响应式适配**等完整的消息展示解决方案。 |
-| **消息发送组件（BarrageInput）** | 提供富文本编辑和消息发送功能的输入组件，集成**表情选择器、字符限制、状态管理和跨平台适配**，为用户提供流畅的消息输入体验。 |
-
-## 组件接入
-
-### 步骤1：环境配置及开通服务
-
-在进行快速接入之前，您需要参考准备工作，满足相关环境配置及开通对应服务。
-
-### 步骤2：安装依赖
-
-【npm】
-``` bash
-npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
-```
-
-【pnpm】
-``` bash
-pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
-```
-
-【yarn】
-``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
-```
-
-### 步骤3：集成弹幕组件
-
-在您的项目中引入并使用弹幕组件，可直接复制如下示例至您的项目中展示**完整的直播间弹幕消息组件以及消息发送组件**。
-``` typescript
-<template>
-  <UIKitProvider theme="dark" language="zh-CN">
-    <div class="app">
-      <div class="chat-container">
-        <div class="chat-content">
-          <BarrageList class="barrage-list" />
-        </div>
-        <div class="chat-input">
-          <BarrageInput class="barrage-input" />
-        </div>
-      </div>
-    </div>
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { BarrageList, BarrageInput, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';
-
-const { login, loginUserInfo } = useLoginState();
-const { joinLive } = useLiveState();
-
-async function initLogin() {
-  try {
-    await login({
-      sdkAppId: 0,        // SDKAppID, 可以参考步骤 1 获取
-      userId: '',         // UserID, 可以参考步骤 1 获取
-      userSig: '',        // userSig, 可以参考步骤 1 获取
-    });
-  } catch (error) {
-    console.error('登录失败:', error);
-  }
-}
-
-onMounted(async () => {
-  await initLogin();
-  await joinLive({
-    liveId: '输入对应直播间 LiveId',     // 输入对应 liveId 进入直播间
-  });
-});
-</script>
-
-<style scoped>.app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.chat-container{width:100%;max-width:500px;height:600px;border-radius:16px;display:flex;flex-direction:column;overflow:hidden}.chat-content{flex:1;overflow:hidden}.barrage-list{width:100%;height:100%}.chat-input{background-color:var(--bg-color-dialog);padding:16px}.barrage-input{width:100%}</style>
-```
-
-## 自定义组件
-
-**弹幕消息组件**分别为用户自定义需求提供了丰富且多维度的`Props` 接口，允许用户自定义功能或自定义 UI 等，具体参数内容如下表所示。
-
-> **说明：**
->
-
-> 若您需要直接了解弹幕消息组件（BarrageList）的自定义的详细内容可快速跳转如下链接：弹幕消息组件自定义；
->
-
-> 若您需要直接了解消息发送组件（BarrageInput）的自定义的详细内容可快速跳转如下链接：消息发送组件自定义；
->
-
-### 弹幕消息组件（BarrageList）自定义
-
-#### **Props**
-| **参数名** | **参数类型** | **默认值** | **说明** |
-| --- | --- | --- | --- |
-| messageAggregationTime | Number | 300 | 消息分组的最大时间间隔（秒）。 |
-| filter | (message: IMessageModel) => boolean | - | 用于筛选消息的函数。 |
-| Message | Component | Message | 自定义消息组件。 |
-| MessageTimeDivider | Component | MessageTimeDivider | 自定义消息时间分割线组件。 |
-| LocalNoticeMessage | Component | LocalNoticeMessage | 自定义本地通知消息组件。 |
-| containerStyle | CSSProperties | - | 自定义消息列表容器样式。 |
-| itemStyle | CSSProperties | - | 自定义单条消息项样式。 |
-| height | String | - | 组件高度，支持CSS单位。 |
-| style | CSSProperties | - | 指定根元素样式的自定义样式。 |
-
-如上表所示，弹幕消息组件的 Props 自定义部分由三块内容组成，分别为**组件属性、可替换子组件、自定义样式，**具体内容如下表所示。
-| **内容** | **参数** |
-| --- | --- |
-| **组件属性** | `filter`、`messageAggregationTime` |
-| **可替换子组件** | `Message`、`MessageTimeDivider`、`LocalNoticeMessage` |
-| **自定义样式** | `ContainerStyle`、`ItemStyle`、`height`、`style` |
-
-#### 消息筛选
-
-通过设置 `filter` 参数，您可以灵活地控制弹幕消息组件中显示的消息内容。
-``` typescript
-<BarrageList :filter="(message) => message.type === 'TIMTextElem'" />
-```
-
-#### 消息聚合时间
-
-通过设置 `messageAggregationTime` 参数，您可以控制消息分组的时间间隔。
-``` typescript
-<BarrageList :messageAggregationTime="300" />
-```
-
-#### 自定义样式
-
-弹幕消息组件提供了 `containerStyle`、`itemStyle`、`自定义子组件` 等内容，用于自定义组件样式。
-1. 要自定义消息列表容器样式，您可以给 `containerStyle` 属性传递一个样式对象。
-
-   **示例：自定义容器内边距**
-
-   ``` typescript
-   <BarrageList :containerStyle="{ padding: '0px' }" />
-   ```
-2. 要自定义单条消息样式，您可以给 `itemStyle` 属性传递一个样式对象。
-
-   **示例：自定义消息项间距和边框及消息气泡颜色**
-
-   ``` typescript
-   <BarrageList :itemStyle="{ borderRadius: '10px', background: '#1C66e5', padding: '10px', boxSizing: 'border-box'}" />
-   ```
-3. 弹幕消息组件支持自定义消息展示组件，您可以完全控制消息的渲染方式。
-
-   **示例：自定义消息组件**
-
-   ``` typescript
-   // MyCustomMessage.vue
-   <template>
-     <div class="custom-message">
-       <div class="message-header">
-         <span class="user-name">{{ getUserName(message) }}</span>
-         <span class="message-time">{{ formatTime(message.time) }}</span>
-       </div>
-       <div class="message-content">
-         {{ getMessageText(message) }}
-       </div>
-     </div>
-   </template>
-
-   <script setup lang="ts">
-   interface SimpleMessage {
-     id: string;
-     from: string;
-     nick?: string;
-     nameCard?: string;
-     time: number;
-     type: string;
-     content: string;
-     avatar?: string;
-   }
-
-   interface Props {
-     message: SimpleMessage;
-     isLastInChunk?: boolean;
-   }
-
-   const props = defineProps<Props>();
-
-   const formatTime = (timestamp: number) => {
-     return new Date(timestamp * 1000).toLocaleTimeString('zh-CN', {
-       hour: '2-digit',
-       minute: '2-digit'
-     });
-   };
-
-   const getUserName = (message: SimpleMessage) => {
-     return message.nameCard || message.nick || message.from || '匿名用户';
-   };
-
-   const getMessageText = (message: SimpleMessage) => {
-     if (message.type === 'text') {
-       return message.content || '';
-     } else if (message.type === 'image') {
-       return '[图片消息]';
-     } else if (message.type === 'emoji') {
-       return '[表情消息]';
-     }
-     return '[其他类型消息]';
-   };
-   </script>
-
-   <style scoped>.custom-message{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:12px;border-radius:12px;margin:4px 0;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.2s ease}.custom-message:hover{transform:translateY(-2px)}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;opacity:0.9}.user-name{font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-time{font-size:11px;opacity:0.7}.message-content{font-size:14px;line-height:1.4;word-break:break-word}</style>
-
-   // 在 弹幕消息组件 中使用
-   <template>
-      <BarrageList :Message="MyCustomMessage" />
-   </template>
-
-   <script setup lang="ts">
-   import MyCustomMessage from "./MyCustomMessage.vue";
-   </script>
-   ```
-| **修改前** | **修改后** |  |  |
-| --- | --- | --- | --- |
-| **自定义容器内边距** | **自定义消息项间距和边框** | **自定义消息组件** |  |
-|  |  |  |  |
-
-### 消息发送组件（BarrageInput）自定义
-
-#### **Props**
-| **参数名** | **类型** | **默认值** | **说明** |
-| --- | --- | --- | --- |
-| containerClass | String | '' | 自定义容器的 CSS 类名。 |
-| containerStyle | Record | {} | 自定义容器的内联样式。 |
-| width | String | - | 组件宽度，支持CSS单位。 |
-| height | String | - | 组件高度，支持CSS单位。 |
-| minHeight | String | '40px' | 组件最小高度，支持CSS单位。 |
-| maxHeight | String | '140px' | 组件最大高度，支持CSS单位。 |
-| placeholder | String | - | 输入框占位符文本。 |
-| disabled | Boolean | false | 是否禁用输入框。 |
-| autoFocus | Boolean | true | 是否自动聚焦到输入框。 |
-| maxLength | Number | 80 | 输入内容的最大字符数限制。 |
-
-#### **Events**
-| **事件名** | **参数** | **说明** |
-| --- | --- | --- |
-| focus | - | 输入框获得焦点时触发。 |
-| blur | - | 输入框失去焦点时触发。 |
-
-如上表所示，消息发送组件的 Props 自定义部分由三块内容组成，分别为**尺寸控制、输入限制、自定义样式，**具体内容如下表所示。
-| **内容** | **参数** |
-| --- | --- |
-| **尺寸控制** | `width`、`height`、`minHeight`、`minWidth` |
-| **输入限制** | `maxLength` |
-| **自定义样式** | `ContainerStyle`、`ContainerClass` |
-
-#### 尺寸控制
-
-通过设置 `width`、`height`、`minHeight`、`maxHeight` 参数，您可以灵活地控制 **BarrageInput** 的尺寸。
-``` typescript
-<BarrageInput width="400px" height="60px" minHeight="40px" maxHeight="120px" />
-```
-
-#### 输入限制
-
-通过设置 `maxLength` 参数，您可以控制输入内容的最大字符数。
-``` typescript
-<BarrageInput :maxLength="100" />
-```
-
-#### 自定义样式
-
-消息发送组件提供了 `containerStyle`、`containerClass` 属性，用于自定义组件样式。
-1. 若需要自定义输入框容器样式，您可以给 `containerStyle` 属性传递一个样式对象。
-
-   **示例：自定义容器背景和边框圆角**
-
-   ``` typescript
-   <BarrageInput :containerStyle="{ backgroundColor: '#a8abb2', borderRadius: '0 0', boxShadow: '0 2px 8px rgba(0,0,0,0.1)'}" />
-   ```
-2. 若需要自定义输入框容器类名，您可以给 `containerClass` 属性传递一个类名字符串。
-
-   **示例：自定义容器类名**
-
-   ``` typescript
-   <template>
-     <BarrageInput containerClass="my-custom-input-container" />
-   </template>
-
-   <style>.my-custom-input-container {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border: none;border-radius: 20px;padding: 8px 20px;}.my-custom-input-container:focus-within {box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);}</style>
-   ```
-| **修改前** | **修改后** |  |
-| --- | --- | --- |
-| **自定义容器背景和边框圆角** | **自定义消息项间距和边框** |  |
-|  |  |  |

package/resource/doc/livekit/preset/live/vue/components/co-guest-panel.md

@@ -1,88 +0,0 @@
-本文对**连麦管理面板（CoGuestPanel）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式和布局进行深度的定制。
-
-## 核心功能
-| **功能名称** | **具体内容** |
-| --- | --- |
-| **Tab 切换** | 提供双 Tab 界面设计，用户可在连麦申请和连麦管理两个功能模块间快速切换，支持状态记忆和消息提示。 |
-| **申请列表** | 实时展示所有待审核的连麦申请，显示用户头像、昵称等信息，支持按时间排序和状态筛选功能。 |
-| **主播操作** | 提供丰富的一键式操作按钮，支持接受申请、拒绝申请、断开连麦等功能，实时反馈操作结果。 |
-
-## 组件接入
-
-### 步骤1：环境配置及开通服务
-
-在进行快速接入之前，您需要参考 准备工作，满足相关环境配置及开通对应服务。
-
-### 步骤2：安装依赖
-
-【npm】
-``` bash
-npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
-```
-
-【pnpm】
-``` bash
-pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
-```
-
-【yarn】
-``` bash
-yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
-```
-
-### 步骤3：集成连麦管理面板
-
-在您的项目中引入并使用**连麦管理面板**，可直接复制如下代码示例至您的项目中展示连麦管理面板。
-``` typescript
-<template>
-  <UIKitProvider theme="light" language="zh-CN">
-    <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, 可以参考步骤 1 获取
-      userId: '',         // UserID, 可以参考步骤 1 获取
-      userSig: '',        // userSig, 可以参考步骤 1 获取
-    });
-  } catch (error) {
-    console.error('登录失败:', error);
-  }
-}
-
-onMounted(async () => {
-  await initLogin();
-  await joinLive({
-    liveId: '输入对应直播间 LiveId',     // 输入对应 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>
-```
-
-## 自定义样式定制
-
-连麦管理面板支持通过 CSS 变量进行样式定制，您可以覆盖以下变量来调整组件外观，在已完成**步骤3**的前提下，您可以参考如下示例的方式来调整连麦管理面板的 UI，也可以直接将下列示例增量复制进您的组件中生成下列效果示例。
-``` typescript
-<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></style>
-```
-| **修改前** | **修改后** |
-| --- | --- |
-|  |  |

package/resource/doc/livekit/preset/live/vue/components/live-audience-list.md

@@ -1,164 +0,0 @@
-本文对 TUILiveKit 组件中的**观众列表组件（LiveAudienceList）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式，布局进行深度的定制。
-
-## 核心功能
-| **功能分类** | **具体能力** |
-| --- | --- |
-| **实时观众展示** | 实时显示直播间在线观众列表，支持头像、昵称展示，提供清晰的观众信息视图，让主播能够直观了解观众构成 |
-| **响应式设计** | 组件支持桌面端和移动端两套UI方案，自动适配不同设备屏幕尺寸，提供一致的用户体验，满足多平台直播需求 |
-| **可定制化 UI** | 提供灵活的插槽机制，支持自定义观众标记、头像样式等元素，让您能够根据业务需求定制观众列表的展示效果，打造独特的视觉体验 |
-
-## 组件接入
-
-### 步骤1：环境配置及开通服务
-
-在进行快速接入之前，您需要参见 准备工作，满足相关环境配置及开通对应服务。
-
-### 步骤2: 安装依赖
-
-【npm】
-``` bash
-npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
-```
-
-【pnpm】
-``` bash
-pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
-```
-
-【yarn】
-``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
-```
-
-### 步骤3：集成观众列表组件
-
-在您的项目中引入并使用**观众列表组件**，可直接复制如下代码示例至您的项目中展示直播间观众列表。
-``` typescript
-<template>
-  <UIKitProvider theme="dark" language="zh-CN">
-    <div class="app">
-        <div class="live-audience-container">
-          <LiveAudienceList class="live-audience-list"/>
-      </div>
-    </div>
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { LiveAudienceList, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';
-
-const { login } = useLoginState();
-const { joinLive } = useLiveState();
-
-async function initLogin() {
-  try {
-    await login({
-      sdkAppId: 0,        // SDKAppID, 可以参考步骤 1 获取
-      userId: '',         // UserID, 可以参考步骤 1 获取
-      userSig: '',        // userSig, 可以参考步骤 1 获取
-    });
-  } catch (error) {
-    console.error('登录失败:', error);
-  }
-}
-
-onMounted(async () => {
-  await initLogin();
-  await joinLive({
-    liveId: '输入对应直播间 LiveId',     // 进入直播间
-  });
-});
-</script>
-
-<style>.live-audience-container{display:flex;height:100%;width:300px;padding:20px}.live-audience-list{width:100%;height:100%}</style>
-```
-
-## 组件定制化
-
-**观众列表组件**提供了灵活的组件自定义插槽，该插槽支持您根据自己需求调整观众标记、特殊身份标识等元素的样式与布局。下列分别给出插槽使用示例
-
-### 组件插槽
-| **名称** | **参数** | **说明** |
-| --- | --- | --- |
-| customAudienceInfo | audience: AudienceInfo | 自定义观众信息的显示 UI |
-
-``` typescript
-// customAudienceInfo 插槽使用示例
-<LiveAudienceList>
-   <CustomAudienceInfo #customAudienceInfo />
-</LiveAudienceList>
-```
-
-`AudienceInfo` 定义了直播房间中每个观众的基本信息和状态：
-| **参数** | **类型** | **说明** |
-| --- | --- | --- |
-| userId | string | 观众的唯一标识符，在整个系统中保持唯一性。 |
-| userName | string | 观众在直播中显示的名称，支持中文、英文等字符，为空时显示 userId。 |
-| avatarUrl | string | 观众头像的完整 URL 地址，支持 HTTPS 协议。 |
-| isMessageDisabled | boolean | 观众是否被禁言，true 表示已被禁言，false 表示可以正常发言。 |
-| joinTime | number | 观众进入直播间的时间戳，用于排序和统计。 |
-
-``` typescript
-interface AudienceInfo {
-  userId: string;              // 观众唯一标识
-  userName?: string;           // 观众显示名称（可选）
-  avatarUrl?: string;          // 观众头像URL（可选）
-  isMessageDisabled?: boolean; // 是否被禁言（可选）
-  joinTime?: number;           // 进入时间戳（可选）
-}
-```
-
-### 组件属性
-| **属性名** | **类型** | **默认值** | **说明** |
-| --- | --- | --- | --- |
-| height | string | '500px' | 组件高度，支持 CSS 单位（px、%、vh等）。 |
-| style | CSSProperties | {} | 自定义样式对象，用于覆盖组件默认样式。 |
-
-#### 自定义插槽示例
-
-为了更好地让您体验及理解**观众列表组件** 组件的 **customAudienceInfo **插槽定制化能力，我们提供了**自定义个人信息**示例场景供您参考，您可以参考上述**步骤3**将如下代码增量复制至您的项目中实现类似场景的效果。
-``` typescript
-<template>
-  <LiveAudienceList>
-    <template #customAudienceInfo="{ audience }">
-      <div class="custom-audience-info">
-        <!-- 头像 -->
-
-        <!-- 观众信息 -->
-        <div class="audience-details">
-          <span class="audience-name">{{ audience.userName || audience.userId }}</span>
-          <span class="join-time">{{ formatJoinTime(audience.joinTime) }}</span>
-        </div>
-
-        <!-- 状态指示器 -->
-        <div v-if="audience.isMessageDisabled" class="muted-indicator">🔇</div>
-      </div>
-    </template>
-  </LiveAudienceList>
-</template>
-
-<script setup lang="ts">
-import { LiveAudienceList } from 'tuikit-atomicx-vue3';
-
-const defaultAvatar = 'xxx'; // 输入默认头像 Url
-
-const formatJoinTime = (timestamp?: number) => {  // 格式化加入时间
-  if (!timestamp) return '刚刚加入';
-
-  const now = Date.now();
-  const diff = now - timestamp;
-  const minutes = Math.floor(diff / (1000 * 60));
-  const hours = Math.floor(diff / (1000 * 60 * 60));
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-
-  if (days > 0) return `${days}天前加入`;
-  if (hours > 0) return `${hours}小时前加入`;
-  if (minutes > 0) return `${minutes}分钟前加入`;
-  return '刚刚加入';
-};
-</script>
-
-<style scoped>.custom-audience-info{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;transition:background-color .2s ease}.custom-audience-info:hover{background-color:var(--uikit-color-gray-1)}.audience-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--uikit-color-gray-3)}.audience-details{flex:1;display:flex;flex-direction:column;gap:4px}.audience-name{font-size:14px;font-weight:500;color:var(--text-color-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.join-time{font-size:12px;color:var(--text-color-secondary)}.muted-indicator{font-size:16px;opacity:.6}</style>
-```

package/resource/doc/livekit/preset/live/vue/components/live-scene-panel.md

@@ -1,130 +0,0 @@
-本文对 TUILiveKit 组件中的**媒体源配置面板（LiveScenePanel）**进行了详细的介绍，您可以在已有项目中直接参考本文示例集成我们开发好的组件，也可以根据您的需求按照文档中的组件定制化部分对样式和布局进行深度的定制。
-
-## 核心功能
-| **功能分类** | **具体能力** |
-| --- | --- |
-| **多素材类型支持** | 摄像头、屏幕共享、图片、视频、文本等多种素材类型，支持设备选择和参数配置。 |
-| **智能显示模式** | 无素材时显示完整面板，有素材时自动切换为紧凑按钮模式，响应式布局适配。 |
-| **素材管理操作** | 添加、编辑、重命名、删除、排序等完整的素材管理功能，支持批量操作。 |
-| **实时预览配置** | 摄像头配置弹窗提供实时预览，支持参数调整和设备测试。 |
-| **权限与错误处理** | 自动权限检查，友好的错误提示和重试机制，保障用户体验。 |
-
-## 组件接入
-
-### 步骤1：环境配置及开通服务
-
-在进行快速接入之前，您需要参考准备工作，满足相关环境配置及开通对应服务。
-
-### 步骤2：安装依赖
-
-【npm】
-``` bash
-npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
-```
-
-【pnpm】
-``` bash
-pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
-```
-
-【yarn】
-``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
-```
-
-### 步骤3：集成**媒体源配置面板**
-
-在您的项目中引入并使用**媒体源配置面板**，可直接复制如下代码示例至您的项目中展示媒体源配置面板。
-``` typescript
-<template>
-  <UIKitProvider theme="dark" language="zh-CN">
-    <div class="app-container">
-      <LiveScenePanel class="live-scene-panel" />
-    </div>
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { LiveScenePanel, useLoginState } from 'tuikit-atomicx-vue3';
-
-const { login } = useLoginState();
-
-async function initLogin() {
-  try {
-    await login({
-      sdkAppId: 0,        // SDKAppID, 可以参考步骤 1 获取
-      userId: '',         // UserID, 可以参考步骤 1 获取
-      userSig: '',        // userSig, 可以参考步骤 1 获取
-    });
-  } catch (error) {
-    console.error('登录失败:', error);
-  }
-}
-
-onMounted(async () => {
-  await initLogin();
-});
-</script>
-
-<style scoped>.app-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.live-scene-panel{width:20%;height:80vh;background:rgba(0,0,0,0.8);border-radius:16px}</style>
-```
-
-## 自定义组件
-
-媒体源配置面板为用户自定义提供了丰富且多维度的功能接口，允许用户自定义素材类型、操作行为、样式主题等。在已完成上述**步骤3**的前提下，您可以参考如下示例的方式来调整媒体源配置面板的 UI，也可以直接将下列示例增量复制组件中生成下列效果示例。
-
-### 样式自定义
-
-通过 CSS 类名和变量自定义组件外观，支持主题色彩、布局样式、动画效果等全方位定制。
-``` typescript
-<template>
-  <LiveScenePanel class="custom-live-scene-panel" />
-</template>
-
-<style>.app-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.custom-live-scene-panel{width:100%;max-width:300px;height:80vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:2px solid #4c63d2;border-radius:16px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,0.1);color:white}.custom-live-scene-panel .add-material-item{background-color:#147fcb!important;color:white;border:none;border-radius:0!important;padding:12px 24px;font-weight:600;transition:all 0.3s ease}.custom-live-scene-panel .materials-list{margin-top:20px;gap:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.custom-live-scene-panel .material-item{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:16px;backdrop-filter:blur(10px);transition:all 0.3s ease}.custom-live-scene-panel .material-item:hover{background:rgba(255,255,255,0.2);transform:scale(1.02)}</style>
-```
-| **修改前** | **修改后** |  |  |
-| --- | --- | --- | --- |
-| **添加媒体源界面** | **媒体源设置界面** | **添加媒体源界面** | **媒体源设置界面** |
-|  |  |  |  |
-
-### 状态监听与扩展
-
-通过状态管理 Hooks，您可以监听媒体源配置面板的内部状态变化，实现外部业务逻辑的响应式处理。这种方式允许您在不修改组件内部代码的情况下，对素材的添加、删除、更新等操作进行监听和响应，从而实现数据同步、业务统计、用户提示等扩展功能。
-``` typescript
-<template>
-    <!-- 状态显示 -->
-    <div class="status-info">
-      <span>素材数量: {{ materialCount }}</span>
-      <span>最后操作: {{ lastOperation }}</span>
-    </div>
-    <!-- LiveScenePanel 组件 -->
-    <LiveScenePanel />
-    <StreamMixer />
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { LiveScenePanel, useVideoMixerState, StreamMixer } from 'tuikit-atomicx-vue3';
-
-// 使用状态管理 hooks
-const { mediaSourceList } = useVideoMixerState();
-const lastOperation = ref('无');
-const materialCount = computed(() => mediaSourceList.value.length);
-
-// 监听素材列表变化
-watch(mediaSourceList, (newList, oldList) => {
-  if (newList.length > oldList.length) {
-    lastOperation.value = '添加素材';
-    console.log('素材已添加');
-  } else if (newList.length < oldList.length) {
-    lastOperation.value = '删除素材';
-    console.log('素材已删除');
-  }
-}, { deep: true });
-</script>
-
-<style>.status-info {display: flex; gap: 20px; padding: 12px; background: #f8f9fa;border-radius: 6px; margin-bottom: 16px;font-size: 14px;}</style>
-```