feat(前端): 重构数字人交互界面并添加全屏功能
重构前端界面布局，将控制面板改为浮动式设计，添加全屏显示功能。主要变更包括： 1. 重新设计界面布局，使用浮动面板替代固定面板 2. 实现数字人显示区域的全屏功能 3. 优化SDK容器缩放逻辑 4. 添加面板切换和状态管理功能 5. 更新样式以适应新的交互设计
This commit is contained in:
@@ -5,142 +5,153 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>华为交互数字人 - HwICSUiSdk 演示</title>
|
||||
<link rel="stylesheet" href="./styles/main.css">
|
||||
<link rel="stylesheet" href="./hwICSUiSdk/HwICSUiSdk.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<!-- 头部 -->
|
||||
<header class="header">
|
||||
<div class="logo">
|
||||
<span class="logo-icon">🎭</span>
|
||||
<h1>华为交互数字人</h1>
|
||||
</div>
|
||||
<div class="status-bar">
|
||||
<span id="connectionStatus" class="status disconnected">未连接</span>
|
||||
<span id="sdkVersion" class="version"></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main-content">
|
||||
<!-- 配置面板 -->
|
||||
<section class="config-panel">
|
||||
<h2>📋 连接配置</h2>
|
||||
|
||||
<!-- 基本配置 -->
|
||||
<div class="config-section">
|
||||
<h3>基本配置</h3>
|
||||
<div class="form-group">
|
||||
<label for="serverAddress">服务器地址</label>
|
||||
<input type="text" id="serverAddress" placeholder="请输入服务器地址" value="metastudio-api.cn-north-4.myhuaweicloud.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="robotId">机器人ID</label>
|
||||
<input type="text" id="robotId" placeholder="请输入机器人ID" value="2c9084bf9c9cc1c0019db2c4ca2a5c89">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 授权码配置 -->
|
||||
<div class="config-section">
|
||||
<h3>授权码</h3>
|
||||
<div class="form-group">
|
||||
<label for="onceCode">一次性授权码</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="onceCode" placeholder="请输入一次性授权码或点击获取" value="" readonly>
|
||||
<button id="getOnceCodeBtn" class="btn btn-secondary">🔑 获取授权码</button>
|
||||
</div>
|
||||
<small class="field-hint">有效期5分钟，只能使用一次</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions main-actions">
|
||||
<button id="initBtn" class="btn btn-primary">初始化 SDK</button>
|
||||
<button id="destroyBtn" class="btn btn-danger" disabled>销毁 SDK</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 数字人显示区 -->
|
||||
<section class="digital-human-container">
|
||||
<h2>🎬 数字人显示</h2>
|
||||
<div id="digitalHumanBox" class="digital-human-box">
|
||||
<div class="placeholder">
|
||||
<span class="placeholder-icon">🤖</span>
|
||||
<p>请先初始化 SDK 并创建数字人</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<div class="control-panel">
|
||||
<div class="control-group">
|
||||
<h3>对话控制</h3>
|
||||
<div class="button-row">
|
||||
<button id="startChatBtn" class="btn btn-success" disabled>
|
||||
<span class="icon">▶️</span> 开始对话
|
||||
</button>
|
||||
<button id="stopChatBtn" class="btn btn-warning" disabled>
|
||||
<span class="icon">⏹️</span> 停止对话
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>语音交互</h3>
|
||||
<div class="button-row">
|
||||
<button id="startSpeakBtn" class="btn btn-info" disabled>
|
||||
<span class="icon">🎤</span> 开始说话
|
||||
</button>
|
||||
<button id="stopSpeakBtn" class="btn btn-secondary" disabled>
|
||||
<span class="icon">🛑</span> 停止说话
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>文本交互</h3>
|
||||
<div class="text-input-row">
|
||||
<input type="text" id="textInput" placeholder="输入文本消息..." disabled>
|
||||
<button id="sendTextBtn" class="btn btn-primary" disabled>
|
||||
<span class="icon">📤</span> 发送
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>其他控制</h3>
|
||||
<div class="button-row">
|
||||
<button id="interruptBtn" class="btn btn-warning" disabled>
|
||||
<span class="icon">⚡</span> 打断说话
|
||||
</button>
|
||||
<button id="toggleAudioBtn" class="btn btn-secondary" disabled>
|
||||
<span class="icon">🔊</span> 静音/取消静音
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 日志面板 -->
|
||||
<section class="log-panel">
|
||||
<h2>📜 事件日志</h2>
|
||||
<div class="log-toolbar">
|
||||
<button id="clearLogBtn" class="btn btn-small">清空日志</button>
|
||||
<select id="logLevel">
|
||||
<option value="debug">Debug</option>
|
||||
<option value="info" selected>Info</option>
|
||||
<option value="warn">Warn</option>
|
||||
<option value="error">Error</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="logContainer" class="log-container"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer class="footer">
|
||||
<p>Powered by HwICSUiSdk | 华为交互数字人解决方案</p>
|
||||
</footer>
|
||||
<!-- 数字人全视口容器 -->
|
||||
<div id="digitalHumanBox" class="digital-human-box">
|
||||
<div class="fullscreen-exit-hint">按 ESC 退出全屏</div>
|
||||
<div class="placeholder">
|
||||
<span class="placeholder-icon">🤖</span>
|
||||
<p>点击右下角 ⚙️ 按钮初始化 SDK</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 浮动控制栏 -->
|
||||
<div class="floating-toolbar">
|
||||
<button id="toggleConfigBtn" class="toolbar-btn" title="连接配置">
|
||||
⚙️
|
||||
</button>
|
||||
<button id="toggleControlBtn" class="toolbar-btn" title="对话控制">
|
||||
🎮
|
||||
</button>
|
||||
<button id="toggleLogBtn" class="toolbar-btn" title="事件日志">
|
||||
📜
|
||||
</button>
|
||||
<button id="fullscreenBtn" class="toolbar-btn" title="全屏显示">
|
||||
⛶
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 浮动面板：连接配置 -->
|
||||
<div id="configPanel" class="floating-panel config-panel">
|
||||
<div class="panel-header">
|
||||
<h2>📋 连接配置</h2>
|
||||
<button class="panel-close" data-panel="configPanel">×</button>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div class="config-section">
|
||||
<h3>基本配置</h3>
|
||||
<div class="form-group">
|
||||
<label for="serverAddress">服务器地址</label>
|
||||
<input type="text" id="serverAddress" placeholder="请输入服务器地址" value="metastudio-api.cn-north-4.myhuaweicloud.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="robotId">机器人ID</label>
|
||||
<input type="text" id="robotId" placeholder="请输入机器人ID" value="2c9084bf9c9cc1c0019db2c4ca2a5c89">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-section">
|
||||
<h3>授权码</h3>
|
||||
<div class="form-group">
|
||||
<label for="onceCode">一次性授权码</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="onceCode" placeholder="请输入一次性授权码或点击获取" value="" readonly>
|
||||
<button id="getOnceCodeBtn" class="btn btn-secondary">🔑 获取</button>
|
||||
</div>
|
||||
<small class="field-hint">有效期5分钟，只能使用一次</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button id="initBtn" class="btn btn-primary">初始化 SDK</button>
|
||||
<button id="destroyBtn" class="btn btn-danger" disabled>销毁 SDK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 浮动面板：对话控制 -->
|
||||
<div id="controlPanel" class="floating-panel control-panel">
|
||||
<div class="panel-header">
|
||||
<h2>🎮 对话控制</h2>
|
||||
<button class="panel-close" data-panel="controlPanel">×</button>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div class="control-group">
|
||||
<h3>对话控制</h3>
|
||||
<div class="button-row">
|
||||
<button id="startChatBtn" class="btn btn-success" disabled>
|
||||
<span class="icon">▶️</span> 开始对话
|
||||
</button>
|
||||
<button id="stopChatBtn" class="btn btn-warning" disabled>
|
||||
<span class="icon">⏹️</span> 停止对话
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>语音交互</h3>
|
||||
<div class="button-row">
|
||||
<button id="startSpeakBtn" class="btn btn-info" disabled>
|
||||
<span class="icon">🎤</span> 开始说话
|
||||
</button>
|
||||
<button id="stopSpeakBtn" class="btn btn-secondary" disabled>
|
||||
<span class="icon">🛑</span> 停止说话
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>文本交互</h3>
|
||||
<div class="text-input-row">
|
||||
<input type="text" id="textInput" placeholder="输入文本消息..." disabled>
|
||||
<button id="sendTextBtn" class="btn btn-primary" disabled>
|
||||
<span class="icon">📤</span> 发送
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>其他控制</h3>
|
||||
<div class="button-row">
|
||||
<button id="interruptBtn" class="btn btn-warning" disabled>
|
||||
<span class="icon">⚡</span> 打断说话
|
||||
</button>
|
||||
<button id="toggleAudioBtn" class="btn btn-secondary" disabled>
|
||||
<span class="icon">🔊</span> 静音
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 浮动面板：事件日志 -->
|
||||
<div id="logPanel" class="floating-panel log-panel">
|
||||
<div class="panel-header">
|
||||
<h2>📜 事件日志</h2>
|
||||
<div class="log-toolbar">
|
||||
<button id="clearLogBtn" class="btn btn-small btn-secondary">清空</button>
|
||||
<select id="logLevel">
|
||||
<option value="debug">Debug</option>
|
||||
<option value="info" selected>Info</option>
|
||||
<option value="warn">Warn</option>
|
||||
<option value="error">Error</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="panel-close" data-panel="logPanel">×</button>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div id="logContainer" class="log-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar-floating">
|
||||
<span id="connectionStatus" class="status disconnected">未连接</span>
|
||||
<span id="sdkVersion" class="version"></span>
|
||||
</div>
|
||||
|
||||
<!-- SDK 引入 -->
|
||||
<script type="module" src="./scripts/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user