{/* SVG 包含人型轮廓和流光效果 */}
{/* 加载文字 */}
数字人准备中，请稍候...
正在听...
) : null
) : null}
{tag ?
);
}
export default CheckScene;
================================================
FILE: src/components/AiChangeCard/index.module.less
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
.card {
position: relative;
text-align: center;
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
.avatar {
img {
width: 128px;
height: 128px;
}
border-radius: 50%;
width: 128px;
height: 128px;
background: linear-gradient(180deg, #c3e4ff 0%, #98d6fe 100%);
}
.title {
font-weight: 500;
font-size: 24px;
line-height: 32px;
color: #1d2129;
}
.desc {
margin-top: 8px;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #737a87;
}
.exceededTitle {
font-weight: 500;
font-size: 24px;
line-height: 32px;
background: linear-gradient(77.86deg, #3b91ff -3.23%, #0d5eff 51.11%, #c069ff 98.65%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
cursor: pointer;
img {
margin-left: 4px;
}
}
.sceneContainer {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
width: max-content;
}
}
================================================
FILE: src/components/AiChangeCard/index.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@/store';
import CheckScene from './CheckScene';
import { SceneConfig, updateScene } from '@/store/slices/room';
import { useScene } from '@/lib/useCommon';
import style from './index.module.less';
function AIChangeCard() {
const { scene, sceneConfigMap } = useSelector((state: RootState) => state.room);
const dispatch = useDispatch();
const { icon, isVision } = useScene();
const Scenes = Object.keys(sceneConfigMap).map(key => sceneConfigMap[key]);
const handleChecked = (checkedScene: string) => {
dispatch(updateScene(checkedScene));
};
return (
{tag}
: ''}
{icon ? 
: ''}
{title}
Hi，欢迎体验实时对话式 AI
{isVision ? <>支持豆包 Vision 模型和 深度思考模型， : ''}
超多对话场景等你开启
{Scenes.map((key: SceneConfig) =>
handleChecked(key.id)}
/>
)}
{btnSrc ? 
: ''}
{btnText}
{suffix}
{drawer?.children}
{!isMobile() ?
);
}
export default FullScreenCard;
================================================
FILE: src/components/Header/index.module.less
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
.header {
height: 48px;
background: white;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
:global {
.arco-popover-content-top {
padding: 0px;
}
}
}
.header-logo {
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 24px;
:global {
img {
height: 24px;
}
.arco-popover-content {
padding: 0;
}
}
}
.menu-wrapper {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 8px;
justify-content: space-between;
}
.header-logo-text {
background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 16px;
}
.header-right {
z-index: 2;
color: #fff;
display: flex;
align-items: center;
:global {
span {
height: 24px;
}
}
}
.header-setting-btn {
background-color: transparent;
border: none;
margin-right: 24px;
color: #000000;
font-size: 16px;
cursor: pointer;
}
.header-pop {
:global {
.ant-popover-arrow {
left: 16px;
.ant-popover-arrow-content {
&:before {
background-color: white;
}
}
}
.ant-popover-content {
margin-left: 12px;
}
.ant-popover-inner {
margin-right: 12px;
}
.ant-popover-inner-content {
padding: 0;
background-color: white;
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
padding-bottom: 7px;
padding-top: 7px;
cursor: pointer;
color: black;
div {
font-size: 13px;
font-weight: 400;
line-height: 20px;
&:hover {
color: #1664ff;
}
}
}
}
}
.divider {
margin-top: 2px;
margin-bottom: 2px;
min-width: 70%;
width: 70%;
}
.header-right-text {
color: #000000;
margin-right: 24px;
cursor: pointer;
}
================================================
FILE: src/components/Header/index.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { Button, Divider, Popover } from '@arco-design/web-react';
import { IconMenu } from '@arco-design/web-react/icon';
import NetworkIndicator from '@/components/NetworkIndicator';
import { useIsMobile } from '@/utils/utils';
import Logo from '@/assets/img/Logo.svg';
import styles from './index.module.less';
const Disclaimer = 'https://www.volcengine.com/docs/6348/68916';
const ReversoContext = 'https://www.volcengine.com/docs/6348/68918';
const UserAgreement = 'https://www.volcengine.com/docs/6348/128955';
interface HeaderProps {
children?: React.ReactNode;
hide?: boolean;
}
function Header(props: HeaderProps) {
const { children, hide } = props;
const MenuProps = [
{
name: '免责声明',
url: Disclaimer,
},
{
name: '隐私政策',
url: ReversoContext,
},
{
name: '用户协议',
url: UserAgreement,
},
];
return (
{useIsMobile() ? null : (
{MenuProps.map((menuItem) => (
))}
}
>
window.open('https://www.volcengine.com/product/veRTC/ConversationalAI', '_blank')
}
>
官网链接
window.open(
'https://www.volcengine.com/contact/product?t=%E5%AF%B9%E8%AF%9D%E5%BC%8Fai&source=%E4%BA%A7%E5%93%81%E5%92%A8%E8%AF%A2',
'_blank'
)
}
>
联系我们
{Array(3)
.fill(0)
.map((_, index) => (
))}
);
}
export default memo(AudioLoading);
================================================
FILE: src/components/Loading/HorizonLoading/index.module.less
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
.loader {
display: flex;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
animation: glow 0.9s infinite;
}
================================================
FILE: src/components/Loading/HorizonLoading/index.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { memo } from 'react';
import style from './index.module.less';
interface ILoadingProps extends React.HTMLAttributes
{Array(3)
.fill(0)
.map((_, index) => (
))}
);
}
export default memo(Loading);
================================================
FILE: src/components/Loading/VerticalLoading/index.module.less
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
.loader {
width: 40px;
height: 10px;
display: flex;
justify-content: center;
align-items: center;
margin: 6px 0px;
}
.bar {
width: 3px;
height: 12px;
margin: 1px;
display: inline-block;
animation: shake 0.6s ease infinite;
}
/* 为每个 bar 指定不同的延迟来实现抖动效果 */
.bar:nth-child(1) {
animation-delay: -0.2s;
}
.bar:nth-child(2) {
animation-delay: -0.1s;
}
.bar:nth-child(3) {
}
@keyframes shake {
0% {
transform: scaleY(1);
background-color: var(--primary-color-primary-7, rgba(23, 89, 221, 1));
}
50% {
transform: scaleY(0.5);
background-color: var(--primary-color-primary-3, rgba(151, 188, 255, 1));
}
100% {
transform: scaleY(1);
background-color: var(--primary-color-primary-7, rgba(23, 89, 221, 1));
}
}
================================================
FILE: src/components/Loading/VerticalLoading/index.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { memo } from 'react';
import styles from './index.module.less';
function Loading() {
return (
);
}
export default memo(Loading);
================================================
FILE: src/components/LocalPlayerSet/index.module.less
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
.container {
position: absolute;
right: 0;
top: 148px;
width: 36px;
height: 36px;
border-radius: 4px;
cursor: pointer;
z-index: 1;
img {
width: 100%;
height: 100%;
}
}
================================================
FILE: src/components/LocalPlayerSet/index.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Popover } from '@arco-design/web-react';
import { RootState } from '@/store';
import { updateFullScreen } from '@/store/slices/room';
import SET_LOCAL_PLAYER from '@/assets/img/setLocalPlayer.svg';
import styles from './index.module.less';
function LocalPlayerSet() {
const dispatch = useDispatch();
const room = useSelector((state: RootState) => state.room);
const { isFullScreen } = room;
const [loading, setLoading] = useState(false);
const [isFull, setFull] = useState(isFullScreen);
const setLocalPlayer = () => {
setLoading(true);
setFull(!isFull);
dispatch(updateFullScreen({ isFullScreen: !isFull }));
setLoading(false);
};
return (
网络状态
延迟
丢包率
{INDICATOR_TEXT[networkQuality]}
{delay ? delay.toFixed(0) : '- '}ms
{indicators.map((color, index) => (
))}
{children}
);
}
================================================
FILE: src/components/UserTag/index.module.less
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
.userTagWrapper {
display: flex;
border-radius: 6px;
border: 0.4px solid #1f232926;
background-color: #fff;
width: max-content;
z-index: 1;
margin-bottom: 45px;
}
.iconContainer {
background-color: #5a6169;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.nameContainer {
color: #0c0d0e;
padding: 0 4px;
height: 20px;
line-height: 20px;
font-size: 12px;
font-weight: 500;
}
================================================
FILE: src/components/UserTag/index.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { IconUser } from '@arco-design/web-react/icon';
import styles from './index.module.less';
interface IUserTagProps {
name: string;
className?: string;
}
function UserTag(props: IUserTagProps) {
const { name, className } = props;
return (
{name}
{loading ? '连接中' : '通话'}
{Array(3)
.fill(0)
.map((_, index) => (
))}
);
}
export default Loading;
================================================
FILE: src/pages/MainPage/MainArea/Antechamber/index.module.less
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
.wrapper {
position: relative;
width: 100%;
height: 100%;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.avatar {
/**
* height = 128px in AvatarCard.avatar
*
*/
margin-top: -128px;
/**
* width = 128px in AvatarCard.avatar
* 128px / 2 = 64px
*
*/
transform: translateX(calc(50% - 64px));
}
.mobile {
transform: none !important;
}
.description {
font-family: PingFang SC;
font-weight: 400;
font-size: 10px;
line-height: 20px;
color: #c7ccd6;
position: absolute;
bottom: 24px;
left: 24px;
}
.invoke-btn {
margin-top: 32px;
}
.mobileDesc {
font-weight: 400;
font-size: 14px;
line-height: 22px;
text-align: center;
color: #737a87;
position: absolute;
bottom: 12px;
}
}
.mobile {
background:
/* 图层1 (最上层): 背景图片 */
/* url(...) [position] / [size] [repeat] */ url('../../../../assets/img/mobileBg.png')
center center / cover no-repeat,
/* 图层2 (下层): 渐变背景 */ linear-gradient(167.98deg, #f5f7ff 0%, #faf3ff 100%);
border-radius: 0;
}
================================================
FILE: src/pages/MainPage/MainArea/Antechamber/index.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { useDispatch } from 'react-redux';
import { isMobile } from '@/utils/utils';
import InvokeButton from '@/pages/MainPage/MainArea/Antechamber/InvokeButton';
import { useJoin, useScene } from '@/lib/useCommon';
import AIChangeCard from '@/components/AiChangeCard';
import { updateFullScreen, updateShowSubtitle } from '@/store/slices/room';
import style from './index.module.less';
function Antechamber() {
const dispatch = useDispatch();
const [joining, dispatchJoin] = useJoin();
const { isScreenMode, isAvatarScene } = useScene();
const handleJoinRoom = () => {
dispatch(updateFullScreen({ isFullScreen: !isMobile() && !isScreenMode && !isAvatarScene })); // 初始化
dispatch(updateShowSubtitle({ isShowSubtitle: !isAvatarScene }));
if (!joining) {
dispatchJoin();
}
};
return (
Powered by 豆包大模型和火山引擎视频云 RTC
)}
{isAudioPublished ? (
isAIReady && isAITalking ? (
);
}
export default AudioController;
================================================
FILE: src/pages/MainPage/MainArea/Room/CameraArea.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { useSelector } from 'react-redux';
import { VideoRenderMode } from '@volcengine/rtc';
import { useEffect } from 'react';
import { RootState } from '@/store';
import { useDeviceState, useScene } from '@/lib/useCommon';
import RtcClient from '@/lib/RtcClient';
import styles from './index.module.less';
import UserTag from '@/components/UserTag';
import LocalPlayerSet from '@/components/LocalPlayerSet';
import AiAvatarCard from '@/components/AiAvatarCard';
import UserAvatar from '@/assets/img/userAvatar.png';
import CameraCloseNoteSVG from '@/assets/img/CameraCloseNote.svg';
import ScreenCloseNoteSVG from '@/assets/img/ScreenCloseNote.svg';
import { LocalFullID, RemoteFullID } from '@/components/FullScreenCard';
const LocalVideoID = 'local-video-player';
const LocalScreenID = 'local-screen-player';
const RemoteVideoID = 'remote-video-player';
function CameraArea(props: React.HTMLAttributes
{isInterruptMode ?
) : isLoading ? null : (
语音打断 或
: null}
点此打断
请开始说话
)
) : (
你已关闭麦克风
)}
{isScreenMode ? (
<>
打开
屏幕共享
)}
体验豆包视觉理解模型
) : isVision ? (
<>
打开
摄像头
体验豆包视觉理解模型
) : null}
{lines.map((line) => line)}
{!isAIReady ? (
);
}
export default Conversation;
================================================
FILE: src/pages/MainPage/MainArea/Room/ToolBar.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { memo, useState } from 'react';
import { Drawer } from '@arco-design/web-react';
import { useDeviceState, useLeave, useScene } from '@/lib/useCommon';
import { isMobile } from '@/utils/utils';
import Menu from '../../Menu';
import style from './index.module.less';
import CameraOpenSVG from '@/assets/img/CameraOpen.svg';
import CameraCloseSVG from '@/assets/img/CameraClose.svg';
import MicOpenSVG from '@/assets/img/MicOpen.svg';
import MicCloseSVG from '@/assets/img/MicClose.svg';
import LeaveRoomSVG from '@/assets/img/LeaveRoom.svg';
import ScreenOnSVG from '@/assets/img/ScreenOn.svg';
import ScreenOffSVG from '@/assets/img/ScreenOff.svg';
function ToolBar(props: React.HTMLAttributes
{isAvatarScene ? (
) : (
''
)}
{(showSubtitle ? msgHistory : [])?.map(({ value, user, isInterrupted }, index) => {
const isUserMsg = user === userId;
const isRobotMsg = user === botName || user.includes('voiceChat_');
if (!isUserMsg && !isRobotMsg) {
return '';
}
return (
{!isMobile() && (
{isUserMsg ? '我' : scene}
)}
已打断 : ''}
);
})}
{value}
{!isUserMsg && isInterrupted ?
{isAIReady &&
(isUserTextLoading(user) || isAITextLoading(user)) &&
index === msgHistory.length - 1 ? (
{isMobile() ? : null}
{isMobile() ?
);
}
export default Room;
================================================
FILE: src/pages/MainPage/MainArea/index.module.less
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
.wrapper {
width: 100%;
height: 100%;
background-color: white;
border: 1px solid var(--line-color-border-2, rgba(234, 237, 241, 1));
border-radius: 16px;
padding: 20px 12.5%;
.space {
width: 100%;
min-height: 40px;
}
.doubaoIcon {
width: 111px;
height: 111px;
min-height: 111px;
overflow: hidden;
}
.interruptTag {
width: max-content;
height: 22px;
padding: 0px 6px 0px 6px;
border-radius: 4px;
margin-left: 4px;
font-family: PingFang SC;
font-size: 12px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0.003em;
color: var(--text-color-text-3, rgba(115, 122, 135, 1));
background: var(--security-unknown-tag-unknown-1, rgba(241, 243, 245, 1));
}
.welcome {
font-family: PingFang SC;
font-size: 24px;
font-weight: 500;
line-height: 32px;
letter-spacing: 0.003em;
text-align: left;
margin-top: 8px;
}
.weight {
background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tip {
font-family: PingFang SC;
font-size: 13px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0.003em;
text-align: left;
color: rgba(27, 30, 61, 0.6);
margin-top: 18px;
margin-bottom: 18px;
}
.tagProblem {
width: max-content;
border-radius: 4px;
font-family: PingFang SC;
font-size: 12px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.003em;
text-align: center;
margin-bottom: 12px;
color: rgba(66, 70, 78, 1);
}
.conversation {
overflow-x: hidden;
overflow-y: auto;
width: 100%;
position: relative;
height: calc(75% - 12px);
display: flex;
flex-direction: column;
padding-bottom: 12px;
.aiReadying {
font-family: PingFang SC;
font-size: 16px;
font-weight: 500;
line-height: 18px;
letter-spacing: 0.003em;
color: rgba(27, 30, 61, 0.6);
margin-top: 12px;
text-align: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.aiReading-spin {
margin-right: 12px;
}
}
.conversation::-webkit-scrollbar {
width: 0px;
height: 0px;
}
.conversation::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0);
border-radius: 0px;
}
.conversation::-webkit-scrollbar-track {
background: rgba(0,0,0,0);
border-radius: 0px;
}
.sentence {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.user {
width: max-content;
border: 0px solid;
align-self: flex-end;
padding: 8px 12px 8px 12px;
border-radius: 12px 0px 12px 12px;
background: var(--background-color-bg-5, rgba(241, 243, 245, 1));
margin-top: 12px;
}
.robot {
font-family: PingFang SC;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.003em;
border: 0px solid;
align-self: flex-start;
padding: 3px 12px 3px 0px;
}
.userTalkingWave {
height: 100px;
}
.userStopTalkingWave {
height: 100px;
transform: scaleY(.5);
}
.status {
overflow: hidden;
width: 100%;
height: 25%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 8px;
.status-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.status-icon {
width: 24px;
height: 24px;
margin-right: 6px;
}
.status-text {
font-family: PingFang SC;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0.003em;
}
}
.desc {
font-family: PingFang SC;
font-size: 10px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0.003em;
text-align: center;
color: var(--text-color-text-4, rgba(199, 204, 214, 1));
}
.micNotify {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.micReopen {
position: relative;
width: 107px;
height: 40px;
padding: 5px 16px 5px 16px;
margin-left: 12px;
margin-right: 12px;
background-clip: padding-box; /* 确保背景不覆盖边框 */
border-radius: 12px;
&:hover,
&:active,
&:focus {
opacity: 1;
color: rgba(0, 0, 0, 0.85);
border-color: #d9d9d9;
}
}
}
.interrupt {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 12px;
width: max-content;
line-height: 28px;
padding: 1px 6px 1px 6px;
border-radius: 4px;
margin-left: 4px;
font-family: PingFang SC;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.003em;
text-align: left;
box-shadow: 0px 0px 0px 1px rgba(221, 226, 233, 1);
color: var(--text-color-text-3, rgba(115, 122, 135, 1));
&:hover,
&:active,
&:focus {
opacity: 1;
border-color: #d9d9d9;
}
img {
margin-right: 8px;
}
}
}
================================================
FILE: src/pages/MainPage/MainArea/index.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { useSelector } from 'react-redux';
import Antechamber from './Antechamber';
import Room from './Room';
function MainArea() {
const room = useSelector((state: any) => state.room);
const isJoined = room.isJoined;
return isJoined ? AI生成内容由大模型生成，不能完全保障真实
{DEVICE_NAME[type]}
屏幕共享
字幕
{isJoined && isMobile() && isVision ? (
);
}
export default Menu;
================================================
FILE: src/pages/MainPage/index.module.less
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
.main {
position: relative;
width: 100%;
height: calc(100% - 48px);
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
.mainArea {
position: relative;
width: calc(100% - 220px);
height: 100%;
margin-right: 2%;
background-color: white;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--line-color-border-2, #eaedf1);
}
.isMobile {
width: 100% !important;
margin-right: 0% !important;
border-radius: 0px !important;
}
.operationArea {
position: relative;
width: 200px;
height: 100%;
}
}
================================================
FILE: src/pages/MainPage/index.tsx
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import Header from '@/components/Header';
import ResizeWrapper from '@/components/ResizeWrapper';
import Menu from './Menu';
import { useIsMobile } from '@/utils/utils';
import Apis from '@/app/index';
import MainArea from './MainArea';
import { ABORT_VISIBILITY_CHANGE, useLeave } from '@/lib/useCommon';
import { RTCConfig, SceneConfig, updateRTCConfig, updateScene, updateSceneConfig } from '@/store/slices/room';
import styles from './index.module.less';
export default function () {
const leaveRoom = useLeave();
const dispatch = useDispatch();
const getScenes = async () => {
const { scenes }: {
scenes: {
rtc: RTCConfig;
scene: SceneConfig;
}[];
} = await Apis.Basic.getScenes();
dispatch(updateScene(scenes[0].scene.id));
dispatch(updateSceneConfig(
scenes.reduceAI 人设：{name}
{isJoined ? '其他信息' : '版本信息'}
Demo Version {packageJson.version}
SDK Version {VERTC.getSdkVersion()}
{isJoined ? (
房间ID{' '}
{room.roomId || '-'}
) : (
''
)}
{room.isAIGCEnable ? (
RequestID{' '}
{requestId || '-'}
) : (
''
)}
字幕
{label}
);
}
================================================
FILE: src/react-app-env.d.ts
================================================
/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
///
{value && {value}}
{showArrow &&