@tencentcloud/sdk-mcp 1.3.9 → 1.4.0

package/resource/doc/roomkit/vue/workflow.md

@@ -1,733 +0,0 @@
-# Vue TUIRoomKit (Atomicx 版本) 代码生成工作流指令
-
-## 📋 指令目的
-
-为 Agent 提供实现 Vue TUIRoomKit (Atomicx 版本) **核心功能的代码生成蓝图**，并指导 Agent **优先使用工具实时获取的最新文档内容**，支持 PC 端和 H5 移动端 Vue3 音视频会议应用场景。
-
----
-
-## 🛑 Agent 执行硬性限制 (Guardrails)
-
-Agent 在生成代码时必须严格遵守以下指令：
-
-### 1. 文档驱动集成
-- 必须严格按照工具返回结果中的 `llm_code_generation_instructions_md` 步骤执行
-- **必须严格按照集成文档中的示例代码生成代码**，不得擅自修改代码结构和实现方式
-- 代码生成时应完全遵循集成文档提供的最佳实践和示例，确保代码的正确性和可运行性
-
-### 2. npm 包接入方式（推荐）
-- TUIRoomKit (Atomicx 版本) 采用 **npm 包直接安装方式**，无需克隆 GitHub 仓库
-- 通过 npm/pnpm/yarn 安装依赖包即可快速集成
-- 如需深度定制 UI，可使用源码导出功能
-
-### 3. 静默执行集成
-- 所有代码编写完成后，在最后一步自动安装依赖并启动项目
-- 启动成功后提示用户在浏览器中访问本地开发服务器地址
-
-### 4. 零外部配置（测试阶段）
-- 禁止自动创建任何 `.env` 文件用于生产环境配置
-- SDKAppID 和 UserSig 等关键凭证必须从 MCP 工具获取或让用户手动配置
-
-### 5. 鉴权凭据配置
-- 使用 `get_usersig` MCP 工具获取 `SDKAppID`、`userId` 和 `userSig`
-- **⚠️ 重要安全提示**：必须告知用户，客户端生成 UserSig 仅适合本地测试，正式生产环境必须在服务端生成 UserSig
-
-### 6. Vue 3 组合式 API
-- 优先使用 `<script setup lang="ts">` 语法（注意启用 TypeScript）
-- 使用 Vue 3 Composition API（ref、reactive、computed、onMounted 等）
-- 正确引入和使用 TUIRoomKit 组件
-
-### 7. 平台适配
-- 使用 `getPlatform()` 检测当前平台，PC 端使用 `ConferenceMainView`，H5 移动端使用 `ConferenceMainViewH5`
-- 两套组件已分别针对 PC 和 H5 进行 UI 适配，开箱即用
-
-### 8. 会议组件加载前置要求（⚠️ 关键约束）
-- **调用 `conference.start()` 或 `conference.join()` 的页面，必须确保会议主视图组件已在模板中加载**
-- 在调用发起/加入会议 API 前，页面模板中必须包含以下组件结构：
-
-```vue
-<template>
-  <ConferenceMainView v-if="isPC"></ConferenceMainView>
-  <ConferenceMainViewH5 v-else></ConferenceMainViewH5>
-</template>
-```
-
-- 如果缺少会议主视图组件，`conference.start()` 和 `conference.join()` 将无法正常渲染会议界面
-- Agent 生成会议室页面代码时，必须先引入并渲染上述组件，再执行发起/加入会议的逻辑
-
----
-
-## 📦 TUIRoomKit 版本与依赖自动化
-
-Agent 生成代码后，必须自动执行以下依赖链：
-
-### 1. 核心依赖版本推荐
-
-```json
-{
-  "@tencentcloud/roomkit-web-vue3": "latest",              // TUIRoomKit 主组件包（包含 ConferenceMainView、ConferenceMainViewH5、conference 等）
-  "tuikit-atomicx-vue3": "latest",                         // TUIRoomKit 原子化组件库（包含所有 Hooks 和原子化 UI 组件）
-  "@tencentcloud/uikit-base-component-vue3": "latest",     // 基础 UI 组件库（UIKitProvider 等）
-  "@tencentcloud/universal-api": "latest"                  // 跨平台 API 工具库（getPlatform 等）
-}
-```
-
-**依赖说明**：
-
-| 依赖包 | 作用 | 是否必需 | 说明 |
-|-------|------|---------|------|
-| **@tencentcloud/roomkit-web-vue3** | TUIRoomKit 主组件包 | ✅ 必须 | 提供 `ConferenceMainView`（PC 端）、`ConferenceMainViewH5`（H5 端）和 `conference` 对象（发起/加入会议） |
-| **tuikit-atomicx-vue3** | 原子化组件库 | ✅ 必须 | 提供 `useLoginState`、`useRoomState` 等 Hooks，以及 `RoomLayoutTemplate` 等枚举类型 |
-| **@tencentcloud/uikit-base-component-vue3** | 基础 UI 组件库 | ✅ 必须 | 提供 `UIKitProvider` 组件，用于配置全局主题和语言 |
-| **@tencentcloud/universal-api** | 跨平台 API 工具库 | ✅ 必须 | 提供 `getPlatform()` 方法，用于检测当前运行平台（pc/mobile） |
-
-**安装命令**：
-
-```bash
-# npm
-npm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-
-# pnpm
-pnpm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-
-# yarn
-yarn add @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-```
-
-### 2. 开发环境依赖（TypeScript 和 SCSS）
-
-如果用户项目尚未支持 TypeScript 和 SCSS，Agent 必须自动安装：
-
-```json
-{
-  "typescript": "latest",  // TypeScript 编译器
-  "sass": "latest"         // SCSS 预处理器
-}
-```
-
-### 3. 构建环境补丁 (Vite/esbuild)
-
-若检测到 Vite 项目，Agent 必须在 `package.json` 自动增加补丁配置以兼容 esbuild-wasm：
-
-```json
-{
-  "overrides": { 
-    "esbuild": "npm:esbuild-wasm@latest"
-  },
-  "resolutions": { 
-    "esbuild": "npm:esbuild-wasm@latest"
-  }
-}
-```
-
----
-
-## 🎯 TUIRoomKit (Atomicx 版本) 核心组件说明
-
-### 主要组件
-
-| 组件名称 | 说明 | 使用场景 |
-|---------|------|---------|
-| `ConferenceMainView` | PC 端会议主界面组件 | 桌面端多人会议 |
-| `ConferenceMainViewH5` | H5 移动端会议主界面组件 | 移动端多人会议 |
-| `conference` | 会议控制对象 | 发起会议（start）和加入会议（join） |
-| `UIKitProvider` | 全局 UI 配置组件 | 配置主题和语言 |
-
-### 核心 Hooks
-
-| Hook 名称 | 来源 | 说明 |
-|---------|------|------|
-| `useLoginState` | `tuikit-atomicx-vue3/room` | 提供 `login`、`setSelfInfo` 等登录方法 |
-| `useRoomState` | `tuikit-atomicx-vue3/room` | 提供房间状态管理 |
-| `useDeviceState` | `tuikit-atomicx-vue3/room` | 提供设备状态管理 |
-| `useRoomEngine` | `tuikit-atomicx-vue3/room` | 获取 roomEngine 实例 |
-
-### 平台检测
-
-```typescript
-import { getPlatform } from '@tencentcloud/universal-api';
-
-const isPC = getPlatform() === 'pc';
-// isPC === true  → 使用 ConferenceMainView
-// isPC === false → 使用 ConferenceMainViewH5
-```
-
----
-
-## 👥 默认测试用户说明
-
-为方便开发调试，Agent 生成的代码**默认提供 3 个测试用户**：
-
-| 用户 ID | 用户名称 | 说明 |
-|---------|---------|------|
-| `user001` | 用户 001 | 测试用户 1（可作为主持人） |
-| `user002` | 用户 002 | 测试用户 2（可作为参会者） |
-| `user003` | 用户 003 | 测试用户 3（可作为参会者） |
-
-### 应用登录流程
-
-Agent 生成的完整应用包含以下页面和流程：
-
-```mermaid
-graph LR
-    A[首页 - 用户选择登录] --> B{选择用户}
-    B --> C[user001 登录]
-    B --> D[user002 登录]
-    B --> E[user003 登录]
-    C --> F[会议入口页面]
-    D --> F
-    E --> F
-    F --> G[创建会议]
-    F --> H[加入会议]
-    G --> I[进入会议室]
-    H --> I
-```
-
-### 首页功能要求
-
-Agent 生成的首页（Home 页面）必须包含以下功能：
-
-1. **用户选择界面**：
-   - 提供下拉框或按钮组，让用户选择要登录的测试用户（user001/user002/user003）
-   - 显示当前选中用户的 ID 和名称
-
-2. **登录按钮**：
-   - 点击登录按钮后，调用 `login()` 和 `setSelfInfo()` 完成用户登录
-   - 登录过程中显示加载状态
-
-3. **登录成功后跳转**：
-   - 登录成功后自动跳转到会议入口页面
-   - 会议入口页面提供「创建会议」和「加入会议」两个入口
-
-### 会议入口页面功能要求
-
-登录成功后的会议入口页面必须包含：
-
-1. **显示当前登录用户信息**：展示已登录的用户 ID 和名称
-2. **创建会议功能**：
-   - 输入会议 ID（可选，不输入则自动生成）
-   - 输入会议名称（可选）
-   - 点击「创建会议」按钮调用 `conference.start()`
-3. **加入会议功能**：
-   - 输入要加入的会议 ID（必填）
-   - 点击「加入会议」按钮调用 `conference.join()`
-
-### 代码实现示例
-
-#### 测试用户配置
-
-Agent 在生成代码时，需要为每个测试用户调用 `get_usersig` MCP 工具获取对应的 userSig，并**预先填入**代码中：
-
-```typescript
-// ⚠️ Agent 生成代码时，需要调用 get_usersig 工具 3 次，分别为 user001、user002、user003 获取 userSig
-// 然后将获取到的 SDKAppID 和每个用户的 userSig 填入下方配置
-
-const SDKAppID = 0; // Agent 填入从 get_usersig 获取的 SDKAppID
-
-// 测试用户列表（包含预生成的 userSig）
-const TEST_USERS = [
-  { userId: 'user001', userName: '用户 001', userSig: '' }, // Agent 填入 user001 的 userSig
-  { userId: 'user002', userName: '用户 002', userSig: '' }, // Agent 填入 user002 的 userSig
-  { userId: 'user003', userName: '用户 003', userSig: '' }, // Agent 填入 user003 的 userSig
-];
-```
-
-#### 首页用户选择组件示例
-
-```vue
-<template>
-  <div class="login-container">
-    <h1>TUIRoomKit 音视频会议</h1>
-    <div class="user-select">
-      <label>选择测试用户：</label>
-      <select v-model="selectedUserId">
-        <option v-for="user in TEST_USERS" :key="user.userId" :value="user.userId">
-          {{ user.userName }} ({{ user.userId }})
-        </option>
-      </select>
-    </div>
-    <button @click="handleLogin" :disabled="isLogging">
-      {{ isLogging ? '登录中...' : '登录' }}
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useLoginState } from 'tuikit-atomicx-vue3/room';
-
-// ⚠️ 以下凭证由 Agent 在代码生成时调用 get_usersig 工具获取并填入
-const SDKAppID = 0; // Agent 填入实际的 SDKAppID
-
-const TEST_USERS = [
-  { userId: 'user001', userName: '用户 001', userSig: '' }, // Agent 填入 user001 的 userSig
-  { userId: 'user002', userName: '用户 002', userSig: '' }, // Agent 填入 user002 的 userSig
-  { userId: 'user003', userName: '用户 003', userSig: '' }, // Agent 填入 user003 的 userSig
-];
-
-const router = useRouter();
-const { login, setSelfInfo } = useLoginState();
-
-const selectedUserId = ref('user001');
-const isLogging = ref(false);
-
-const handleLogin = async () => {
-  const user = TEST_USERS.find(u => u.userId === selectedUserId.value);
-  if (!user) return;
-
-  isLogging.value = true;
-  try {
-    await login({
-      userId: user.userId,
-      userSig: user.userSig, // 使用预填入的 userSig
-      sdkAppId: SDKAppID,
-    });
-    await setSelfInfo({
-      userName: user.userName,
-      avatarUrl: '',
-    });
-    // 登录成功，跳转到会议入口页面
-    router.push('/conference-entry');
-  } catch (error) {
-    console.error('登录失败:', error);
-  } finally {
-    isLogging.value = false;
-  }
-};
-</script>
-```
-
----
-
-## 🛠️ 集成步骤详解
-
-### 步骤 1：安装项目依赖
-
-```bash
-# npm
-npm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-
-# pnpm
-pnpm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-
-# yarn
-yarn add @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-```
-
----
-
-### 步骤 2：创建会议页面组件（⚠️ 关键步骤）
-
-创建会议页面组件，**必须在模板中先加载会议主视图组件**，然后再调用 `conference.start()` 或 `conference.join()`：
-
-```vue
-<template>
-  <!-- ⚠️ 关键：必须先在模板中加载会议主视图组件 -->
-  <ConferenceMainView v-if="isPC"></ConferenceMainView>
-  <ConferenceMainViewH5 v-else></ConferenceMainViewH5>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { ConferenceMainView, ConferenceMainViewH5, conference } from '@tencentcloud/roomkit-web-vue3';
-import { getPlatform } from '@tencentcloud/universal-api';
-
-const route = useRoute();
-const isPC = ref(getPlatform() === 'pc');
-
-// 从路由参数获取会议信息
-const roomId = route.query.roomId as string;
-const roomName = route.query.roomName as string;
-const action = route.query.action as 'start' | 'join'; // 'start' 或 'join'
-
-onMounted(async () => {
-  // ⚠️ 确保组件已挂载（模板已渲染）后再调用 conference API
-  if (action === 'start') {
-    // 发起新会议
-    await conference.start({
-      roomId: roomId,
-      options: {
-        roomName: roomName || '我的会议',
-      },
-    });
-  } else if (action === 'join') {
-    // 加入已有会议
-    await conference.join({
-      roomId: roomId,
-    });
-  }
-});
-</script>
-```
-
-**⚠️ 强制约束说明**：
-- `conference.start()` 和 `conference.join()` **必须在会议主视图组件加载后调用**
-- 模板中必须包含 `<ConferenceMainView>` 和 `<ConferenceMainViewH5>` 组件
-- 建议在 `onMounted` 生命周期中调用，确保组件已挂载完成
-- 如果模板中缺少会议主视图组件，调用 API 后会议界面将无法正常渲染
-
----
-
-### 步骤 3：配置 App.vue 文件
-
-将以下内容合并到项目的 `App.vue` 文件中：
-
-**关键配置要点**：
-- 配置全局 `UIKitProvider` 组件（设置主题和语言）
-- 配置全局样式，确保会议界面全屏显示
-- **注意**：用户登录逻辑在首页组件中实现（见「默认测试用户说明」章节）
-
-```vue
-<template>
-  <!-- Step 1: 配置全局 UIKitProvider -->
-  <UIKitProvider theme="light" language="zh-CN">
-    <!-- 您的业务组件（首页 → 会议入口 → 会议室） -->
-    <router-view />
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-</script>
-
-<!-- Step 2: 配置全局样式 -->
-<style>
-html, body {
-  padding: 0 !important;
-  margin: 0 !important;
-}
-
-#app {
-  width: 100% !important;
-  height: 100% !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  max-width: 100% !important;
-  max-height: 100% !important;
-  text-align: left !important;
-  overflow: hidden;
-}
-</style>
-```
-
-**Agent 执行要求**：
-- ⚠️ 用户登录逻辑在首页组件中实现，而非 App.vue
-- 必须调用 `get_usersig` MCP 工具为每个测试用户获取 SDKAppID、userId、userSig
-
----
-
-### 步骤 4：发起新会议（完整示例）
-
-从会议入口页面跳转到会议室页面并发起会议：
-
-```typescript
-// 会议入口页面中的发起会议逻辑
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const startConference = () => {
-  // 跳转到会议室页面，传递会议参数
-  router.push({
-    path: '/room',
-    query: {
-      action: 'start',
-      roomId: '123456',      // 会议 ID
-      roomName: '我的临时会议', // 会议名称
-    },
-  });
-};
-```
-
-**⚠️ 注意**：实际的 `conference.start()` 调用在会议室页面组件（步骤 2）的 `onMounted` 中执行，确保会议主视图组件已加载。
-
----
-
-### 步骤 5：加入已有会议（完整示例）
-
-从会议入口页面跳转到会议室页面并加入会议：
-
-```typescript
-// 会议入口页面中的加入会议逻辑
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const joinConference = () => {
-  // 跳转到会议室页面，传递会议参数
-  router.push({
-    path: '/room',
-    query: {
-      action: 'join',
-      roomId: '123456', // 要加入的会议 ID
-    },
-  });
-};
-```
-
-**⚠️ 注意**：实际的 `conference.join()` 调用在会议室页面组件（步骤 2）的 `onMounted` 中执行，确保会议主视图组件已加载。
-
----
-
-## 🎨 UI 自定义功能
-
-### 1. 主题及语言配置
-
-通过配置 `UIKitProvider` 的入参修改主题及语言：
-
-| UIKitProvider 参数 | 可选值 | 默认值 |
-|-------------------|--------|--------|
-| theme | "light" \| "dark" | "light" |
-| language | "zh-CN" \| "en-US" | "en-US" |
-
-```typescript
-<UIKitProvider theme="dark" language="en-US">
-  <router-view />
-</UIKitProvider>
-```
-
----
-
-### 2. 源码导出（深度定制）
-
-如需深度定制 TUIRoomKit 界面，可使用源码导出功能：
-
-```bash
-# 执行源码导出脚本，默认拷贝路径为 ./src/components/RoomKit
-node ./node_modules/@tencentcloud/roomkit-web-vue3/scripts/eject.js
-```
-
-导出后修改组件引用路径：
-
-```typescript
-// 修改前：从 npm 包引入
-- import { ConferenceMainView, conference } from '@tencentcloud/roomkit-web-vue3';
-
-// 修改后：从本地源码引入
-+ import { ConferenceMainView, ConferenceMainViewH5, conference } from './components/RoomKit/index.ts';
-```
-
----
-
-### 3. 自定义房间流布局
-
-TUIRoomKit 支持三种流布局：
-
-| 布局类型 | 枚举值 | 说明 |
-|---------|--------|------|
-| 九宫格布局 | `RoomLayoutTemplate.GridLayout` | 默认布局 |
-| 侧边栏布局 | `RoomLayoutTemplate.SidebarLayout` | 侧边栏布局 |
-| 顶部栏布局 | `RoomLayoutTemplate.CinemaLayout` | 顶部栏布局 |
-
-导出源码后，在 `RoomKit/views/ConferenceMainView/index.vue` 中修改：
-
-```typescript
-import { RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
-
-// 修改默认布局为侧边栏布局
-const participantViewLayout = ref(RoomLayoutTemplate.SidebarLayout);
-
-function handleLayoutUpdate(layout: RoomLayoutTemplate) {
-  participantViewLayout.value = layout;
-}
-```
-
----
-
-### 4. 自定义视频流挂件
-
-导出源码后，修改以下组件自定义视频流挂件：
-
-```
-src/components/RoomKit/components/RoomLayoutView/ParticipantViewUI/ParticipantViewUI.vue
-```
-
----
-
-### 5. 配置用户联系人列表
-
-TUIRoomKit 预定会议和会中呼叫的用户选择列表默认展示用户关系链。批量导入步骤：
-
-1. 使用 [账号管理 > 导入多个账号](https://cloud.tencent.com/document/product/269/4919) REST API 批量导入用户账号
-2. 使用 [好友管理 > 导入好友](https://cloud.tencent.com/document/product/269/8301) REST API 批量导入用户关系链
-
----
-
-## 🔄 完整自动化流程总结
-
-```mermaid
-graph TD
-    A[接收用户需求] --> B[安装 npm 依赖包]
-    B --> C{检测 TypeScript 和 SCSS 支持}
-    C -->|未安装| D[安装 typescript 和 sass]
-    C -->|已安装| E[跳过]
-    D --> F[创建首页 - 用户选择登录界面]
-    E --> F
-    F --> G[配置 3 个测试用户: user001/user002/user003]
-    G --> H[调用 get_usersig 为每个用户获取凭证]
-    H --> I[创建会议入口页面 - 创建/加入会议]
-    I --> J[创建会议室页面组件]
-    J --> K[配置 App.vue: UIKitProvider + 全局样式]
-    K --> L{用户需要深度定制 UI?}
-    L -->|是| M[执行源码导出脚本]
-    L -->|否| N[使用默认配置]
-    M --> O[提供 UI 自定义方案: 主题/布局/挂件]
-    N --> P[record_result 记录集成结果]
-    O --> P
-    P --> Q[自动启动开发服务器: npm run dev]
-    Q --> R[提示用户在浏览器中访问并选择用户登录]
-```
-
----
-
-## ✍️ Agent 代码生成示例指令 (Prompts)
-
-**基础集成**:
-> "按照 TUIRoomKit (Atomicx 版本) npm 包接入方式，为我生成一个 Vue 3 音视频会议应用。首页提供 3 个测试用户（user001/user002/user003）选择界面，用户选择后点击登录，登录成功后跳转到会议入口页面，提供创建会议和加入会议功能。使用 get_usersig 工具获取每个测试用户的鉴权凭证。启动后提示我在浏览器中访问调试地址。**请务必告知我：当前生成的代码仅适用于本地测试，正式生产环境必须在服务端生成 UserSig。**"
-
-**H5 移动端会议**:
-> "按照 TUIRoomKit (Atomicx 版本) 集成，生成一个同时支持 PC 端和 H5 移动端的 Vue 3 会议应用。首页提供测试用户选择和登录功能，使用 getPlatform() 检测平台，PC 端使用 ConferenceMainView，H5 端使用 ConferenceMainViewH5。"
-
-**深度定制 UI**:
-> "按照 TUIRoomKit (Atomicx 版本) 集成，生成一个 Vue 3 会议应用。包含用户选择登录流程，需要执行源码导出，自定义视频流布局为侧边栏布局，并自定义视频流挂件样式。"
-
----
-
-## 📝 关键要点总结
-
-| 类别 | 要求 |
-|------|------|
-| **框架版本** | Vue 3.4.21 及以上版本 |
-| **平台支持** | PC 端 + H5 移动端（响应式适配，开箱即用） |
-| **接入方式** | npm 包直接安装（推荐）；如需深度定制可使用源码导出 |
-| **文档优先** | 严格遵循工具返回的最新文档指令 |
-| **静默集成** | 代码编写完成后自动安装依赖并启动开发服务器 |
-| **凭证获取** | 调用 `get_usersig` MCP 工具获取 SDKAppID、userId、userSig |
-| **安全提示** | ⚠️ 必须告知用户：客户端生成 UserSig 仅适合测试，生产环境必须在服务端生成 |
-| **多语言** | 支持中文（zh-CN）和英文（en-US） |
-| **UI 自定义** | 支持主题、布局、视频流挂件等自定义（需源码导出） |
-
----
-
-## 🎯 Agent 执行检查清单
-
-### 项目初始化
-- [ ] 已安装核心依赖：`@tencentcloud/roomkit-web-vue3`、`tuikit-atomicx-vue3`、`@tencentcloud/uikit-base-component-vue3`、`@tencentcloud/universal-api`
-- [ ] 已检测并安装 TypeScript 和 SCSS 开发依赖（如果用户项目未安装）
-
-### 代码生成
-- [ ] 已创建会议页面组件，使用 `getPlatform()` 检测平台
-- [ ] 已配置 `App.vue`：UIKitProvider + 全局样式
-- [ ] 组件使用了 `<script setup lang="ts">` 语法
-
-### 测试用户与登录流程
-- [ ] 🔴 已配置 3 个默认测试用户：user001、user002、user003
-- [ ] 已创建首页用户选择界面（下拉框或按钮组选择测试用户）
-- [ ] 已实现登录按钮和登录加载状态
-- [ ] 登录成功后跳转到会议入口页面
-
-### 会议入口页面
-- [ ] 已显示当前登录用户信息
-- [ ] 已实现「创建会议」功能（调用 `conference.start()`）
-- [ ] 已实现「加入会议」功能（调用 `conference.join()`）
-
-### 凭证与登录
-- [ ] 🔴 已调用 `get_usersig` MCP 工具为每个测试用户获取 SDKAppID、userId、userSig
-- [ ] 已在首页实现 `login()` 和 `setSelfInfo()` 登录逻辑
-- [ ] ⚠️ **已告知用户**：当前生成的代码仅适用于本地测试，正式生产环境必须在服务端生成 UserSig
-
-### UI 配置
-- [ ] 已根据用户需求配置主题（light/dark）和语言（zh-CN/en-US）
-- [ ] 如果用户需要深度定制，已执行源码导出脚本
-
-### 最终检查
-- [ ] 已调用 `record_result` 记录集成结果
-- [ ] 已自动安装依赖（npm install）
-- [ ] 已自动启动开发服务器（npm run dev）
-- [ ] 已提示用户在浏览器中访问本地开发服务器地址
-- [ ] 项目可以正常运行，无报错
-
----
-
-## 🔗 相关工具参考
-
-### 必须使用的工具
-
-#### `get_usersig` - 获取鉴权凭证
-**用途**：从 MCP 环境变量获取腾讯云应用凭证
-- `SDKAppID`: 应用标识
-- `userId`: 用户 ID
-- `userSig`: 用户签名
-
-**使用约束**：
-- ✅ 必须调用此工具获取凭证
-- ⚠️ 必须告知用户：客户端生成 UserSig 仅适合测试，生产环境必须在服务端生成
-
-#### `record_result` - 记录集成结果
-**用途**：记录集成过程和结果，用于统计和分析
-
-**调用时机**：在完成所有集成步骤并成功启动项目后调用
-
----
-
-## 📚 相关资源链接
-
-- **TUIRoomKit GitHub 仓库**：https://github.com/Tencent-RTC/TUIRoomKit
-- **腾讯云 TRTC 控制台**：https://console.cloud.tencent.com/trtc
-- **正式运行阶段如何计算 UserSig**：https://cloud.tencent.com/document/product/647/17275#formal
-- **URL 域名及协议限制说明**：https://cloud.tencent.com/document/product/647/17249
-- **应对防火墙受限（内网代理）**：https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-34-advanced-proxy.html
-
----
-
-## ❓ 常见问题
-
-### TUIRoomKit 在本地开发时正常，但部署到线上后无法采集摄像头/麦克风？
-
-**原因分析**：浏览器出于安全和隐私保护考虑，对音视频设备采集有严格限制。只有在安全环境（https://、localhost、file://）下才允许采集。
-
-**解决方案**：必须使用 HTTPS 协议部署网页，并确保具备有效的安全证书。
-
-### TUIRoomKit 是否支持使用 iframe 集成？
-
-支持。使用 iframe 集成时，需要配置 allow 属性授予必要权限：
-
-```html
-<iframe allow="microphone; camera; display-capture; display; fullscreen;">
-```
-
-### TUIRoomKit 是否支持设置内网代理？
-
-支持。请在进房前设置内网代理参数：
-
-```typescript
-import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
-import { useRoomEngine } from 'tuikit-atomicx-vue3/room';
-
-const { roomEngine } = useRoomEngine();
-
-TUIRoomEngine.once('ready', () => {
-  const trtcCloud = roomEngine.instance?.getTRTCCloud();
-  trtcCloud.callExperimentalAPI(JSON.stringify({
-    api: 'setNetworkProxy',
-    params: {
-      websocketProxy: "wss://proxy.example.com/ws/",
-      turnServer: [{
-        url: '14.3.3.3:3478',
-        username: 'turn',
-        credential: 'turn',
-      }],
-      iceTransportPolicy: 'relay',
-    },
-  }));
-});
-```
-
----
-
-**适用框架**: Vue 3.4.21+  
-**平台支持**: PC 端 + H5 移动端  
-**TUIRoomKit 版本**: @tencentcloud/roomkit-web-vue3 (Atomicx 版本)  
-**构建工具**: Vite (推荐)