antiwear-web/frontend/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <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 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="toggleCaptionBtn" 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="captionPanel" class="floating-panel caption-panel">
        <div class="panel-header">
            <h2>📝 字幕样式设置</h2>
            <button class="panel-close" data-panel="captionPanel">×</button>
        </div>
        <div class="panel-content">
            <div class="form-group">
                <label for="captionWidth">宽度 (px)</label>
                <input type="number" id="captionWidth" value="400" min="200" max="800">
            </div>
            <div class="form-group">
                <label for="captionHeight">高度 (px)</label>
                <input type="number" id="captionHeight" value="200" min="100" max="600">
            </div>
            <div class="form-group">
                <label for="captionFontSize">字体大小 (px)</label>
                <input type="number" id="captionFontSize" value="16" min="12" max="32">
            </div>
            <div class="form-group">
                <label for="captionRight">距右侧距离 (px)</label>
                <input type="number" id="captionRight" value="20" min="0" max="100">
            </div>
            <div class="form-group">
                <label for="captionBottom">距底部距离 (px)</label>
                <input type="number" id="captionBottom" value="20" min="0" max="200">
            </div>
            <button id="applyCaptionStyleBtn" class="btn btn-primary" style="width: 100%; margin-top: 16px;">应用样式</button>
        </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>

    <script type="module" src="./scripts/main.js"></script>
</body>
</html>