@zeewain/3d-avatar-sdk 1.2.1 → 1.2.3

package/dist/examples/test-vue3/src/components/InfoCards.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="info-cards">
+    <el-row :gutter="16">
+      <el-col :xs="24"
+              :sm="12"
+              :md="8"
+              :lg="6"
+              :xl="6"
+      >
+        <el-card class="info-card" shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <i class="el-icon-info"></i>
+              <span>SDK版本</span>
+            </div>
+          </template>
+          <div class="card-content">
+            <div class="version-info">
+              <div class="version-item">
+                <span class="label">当前版本:</span>
+                <el-tag type="primary" size="default">v1.0.0</el-tag>
+              </div>
+              <div class="version-item">
+                <span class="label">发布日期:</span>
+                <span class="value">2025-01-01</span>
+              </div>
+              <div class="version-item"> 
+                <span class="label">Unity版本:</span>
+                <span class="value">2022.3.0f1</span>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :xs="24"
+              :sm="12"
+              :md="8"
+              :lg="6"
+              :xl="6"
+      >
+        <el-card class="info-card" shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <i class="el-icon-cpu"></i>
+              <span>系统信息</span>
+            </div>
+          </template>
+          <div class="card-content">
+            <div class="system-info">
+              <div class="system-item">
+                <span class="label">浏览器:</span>
+                <span class="value">{{ browserInfo }}</span>
+              </div>
+              <div class="system-item">
+                <span class="label">平台:</span>
+                <span class="value">{{ platformInfo }}</span>
+              </div>
+              <div class="system-item">
+                <span class="label">WebGL:</span>
+                <el-tag :type="webglSupported ? 'success' : 'danger'" size="default">
+                  {{ webglSupported ? '支持' : '不支持' }}
+                </el-tag>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :xs="24"
+              :sm="12"
+              :md="8"
+              :lg="6"
+              :xl="6"
+      >
+        <el-card class="info-card" shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <i class="el-icon-document"></i>
+              <span>快速文档</span>
+            </div>
+          </template>
+          <div class="card-content">
+            <div class="doc-links">
+              <el-link type="primary" size="default" >
+                <el-icon class="el-icon--left"><Link /></el-icon>API文档
+              </el-link>
+              <el-link type="primary" size="default" >
+                <el-icon class="el-icon--left"><VideoPlay /></el-icon>视频教程
+              </el-link>
+              <el-link type="primary" size="default" >
+                <el-icon class="el-icon--left"><ChatLineRound /></el-icon>技术支持
+              </el-link>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :xs="24"
+              :sm="12"
+              :md="8"
+              :lg="6"
+              :xl="6"
+      >
+        <el-card class="info-card" shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <i class="el-icon-star-on"></i>
+              <span>功能特性</span>
+            </div>
+          </template>
+          <div class="card-content">
+            <div class="features">
+              <div class="feature-item">
+                <el-icon><Check /></el-icon>
+                <span>3D数字人渲染</span>
+              </div>
+              <div class="feature-item">
+                <el-icon><Check /></el-icon>
+                <span>智能语音播报</span>
+              </div>
+              <div class="feature-item">
+                <el-icon><Check /></el-icon>
+                <span>动作控制系统</span>
+              </div>
+              <div class="feature-item">
+                <el-icon><Check /></el-icon>
+                <span>多平台支持</span>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Check, Link, VideoPlay, ChatLineRound } from '@element-plus/icons-vue';
+const browserInfo = ref('');
+const platformInfo = ref('');
+const webglSupported = ref(false);
+
+function getBrowserInfo() {
+  const userAgent = navigator.userAgent;
+  if (userAgent.includes('Chrome')) {
+    browserInfo.value = 'Chrome';
+  } else if (userAgent.includes('Firefox')) {
+    browserInfo.value = 'Firefox';
+  } else if (userAgent.includes('Safari')) {
+    browserInfo.value = 'Safari';
+  } else if (userAgent.includes('Edge')) {
+    browserInfo.value = 'Edge';
+  } else {
+    browserInfo.value = 'Unknown';
+  }
+}
+
+function getPlatformInfo() {
+  const platform = navigator.platform;
+  if (platform.includes('Win')) {
+    platformInfo.value = 'Windows';
+  } else if (platform.includes('Mac')) {
+    platformInfo.value = 'macOS';
+  } else if (platform.includes('Linux')) {
+    platformInfo.value = 'Linux';
+  } else {
+    platformInfo.value = 'Unknown';
+  }
+}
+
+function checkWebGLSupport() {
+  try {
+    const canvas = document.createElement('canvas');
+    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+    webglSupported.value = !!gl;
+  } catch (e) {
+    webglSupported.value = false;
+  }
+}
+
+onMounted(() => {
+  getBrowserInfo();
+  getPlatformInfo();
+  checkWebGLSupport();
+});
+</script>
+
+<style lang="scss" scoped>
+.info-cards {
+  .info-card {
+    margin-bottom: 16px;
+    .card-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 600;
+      color: #2c3e50;
+      i {
+        font-size: 16px;
+      }
+    }
+    .card-content {
+      .version-info,
+      .system-info {
+        .version-item,
+        .system-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+          .label {
+            font-size: 13px;
+            color: #606266;
+          }
+          .value {
+            font-size: 13px;
+            color: #2c3e50;
+          }
+        }
+      }
+      .doc-links {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        .el-link {
+          align-self: flex-start;
+          text-align: left;
+          &:hover {
+            color: #409eff;
+          }
+        }
+      }
+      .features {
+        .feature-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 8px;
+          font-size: 13px;
+          color: #2c3e50;
+          i {
+            color: #67c23a;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动端优化
+@media screen and (max-width: 768px) {
+  .info-cards {
+    .info-card {
+      .card-header {
+        font-size: 14px;
+        i {
+          font-size: 14px;
+        }
+      }
+      .card-content {
+        .version-info,
+        .system-info {
+          .version-item,
+          .system-item {
+            .label,
+            .value {
+              font-size: 12px;
+            }
+          }
+        }
+        .doc-links {
+          .el-button {
+            font-size: 12px;
+          }
+        }
+        .features {
+          .feature-item {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/dist/examples/test-vue3/src/components/InitAPI.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="init-api">
+    <div class="api-description">
+      <el-alert
+        title="API说明"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template #default>
+          <div class="api-signature">
+            <code>initializeAvatar(avatarCode: string, cameraType?: AvatarCameraType): Promise&lt;IAvatarCallbackResponse&gt;</code>
+          </div>
+          <p>通过数字人编码加载数字人，token在SDK初始化时配置，无需在每次调用时传递</p>
+          <p class="api-features">
+            ✅ Promise-based异步API &nbsp;&nbsp;
+            ✅ 统一错误处理 &nbsp;&nbsp;
+            ✅ 详细响应信息
+          </p>
+        </template>
+      </el-alert>
+    </div>
+
+    <div class="api-controls">
+      <el-card shadow="hover" class="control-card">
+        <template #header>
+          <div class="card-header">
+            <span>初始化控制</span>
+            <el-tag v-if="sdkStatus.avatarLoaded" type="success" size="default">已加载</el-tag>
+            <el-tag v-else type="info" size="default">未加载</el-tag>
+          </div>
+        </template>
+
+        <div class="control-content">
+          <div class="status-info">
+            <el-row :gutter="16">
+              <el-col :span="12">
+                <div class="status-item">
+                  <span class="status-label">Unity状态:</span>
+                  <el-tag :type="sdkStatus.unityLoaded ? 'success' : 'info'" size="default">
+                    {{ sdkStatus.unityLoaded ? '已加载' : '未加载' }}
+                  </el-tag>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="status-item">
+                  <span class="status-label">Avatar状态:</span>
+                  <el-tag :type="sdkStatus.avatarLoaded ? 'success' : 'info'" size="default">
+                    {{ sdkStatus.avatarLoaded ? '已加载' : '未加载' }}
+                  </el-tag>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+
+          <div class="config-info">
+            <el-descriptions :column="1" size="default" border>
+              <el-descriptions-item label="Token状态">
+                <el-tag :type="globalConfig.token ? 'success' : 'danger'" size="default">
+                  {{ globalConfig.token ? '已配置' : '未配置' }}
+                </el-tag>
+              </el-descriptions-item>
+              <el-descriptions-item label="Avatar编码">
+                <span v-if="globalConfig.avatarCode" class="avatar-code">{{ globalConfig.avatarCode }}</span>
+                <el-tag v-else type="warning" size="default">未设置</el-tag>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+
+          <div class="action-buttons">
+            <el-button
+              type="primary"
+              size="default"
+              :loading="isLoading"
+              :disabled="sdkStatus.avatarLoaded || !globalConfig.token || !globalConfig.avatarCode"
+              @click="handleInitAvatar"
+            >
+              <template #icon>
+                <el-icon><VideoPlay /></el-icon>
+              </template>
+              {{ isLoading ? '初始化中...' : '初始化 Unity + Avatar' }}
+            </el-button>
+
+            <div class="button-tips">
+              <el-alert
+                v-if="!globalConfig.token || !globalConfig.avatarCode"
+                title="请先在全局配置中设置Token和Avatar Code"
+                type="warning"
+                :closable="false"
+                show-icon
+              />
+              <el-alert
+                v-else-if="sdkStatus.avatarLoaded"
+                title="Avatar已加载，请先卸载后再重新初始化"
+                type="info"
+                :closable="false"
+                show-icon
+              />
+              <el-alert
+                v-else-if="!sdkStatus.unityLoaded"
+                title="将同时初始化Unity实例和Avatar，首次加载需要一些时间"
+                type="info"
+                :closable="false"
+                show-icon
+              />
+            </div>
+          </div>
+        </div>
+      </el-card>
+    </div>
+
+    <div class="api-result">
+      <el-card shadow="hover" class="result-card">
+        <template #header>
+          <div class="card-header">
+            <span>执行结果</span>
+            <el-link
+              size="default"
+              @click="clearResult"
+            >
+              <template #icon>
+                <el-icon><Refresh /></el-icon>
+              </template>
+              清空
+            </el-link>
+          </div>
+        </template>
+
+        <div class="result-content">
+          <pre class="result-text">{{ result }}</pre>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { VideoPlay, Refresh } from '@element-plus/icons-vue';
+
+// 定义接口类型
+interface ISDKStatus {
+  unityLoaded: boolean;
+  avatarLoaded: boolean;
+  canPlayMotion: boolean;
+  canBroadcast: boolean;
+  canGetMotion: boolean;
+  canControlBroadcast: boolean;
+  canControlCamera: boolean;
+}
+
+interface IGlobalConfig {
+  token: string;
+  avatarCode: string;
+}
+
+// 定义 props
+const props = defineProps<{
+  sdkStatus: ISDKStatus;
+  globalConfig: IGlobalConfig;
+}>();
+
+// 定义 emits
+const emit = defineEmits<{
+  'init-avatar-with-unity': [params: { avatarCode: string }];
+}>();
+
+// 响应式数据
+const result = ref('等待初始化操作...\n\n新版SDK特性：\n- token在初始化时配置，无需重复传递\n- Promise-based异步API\n- 统一的错误处理和响应格式\n- 完整的TypeScript类型支持');
+const isLoading = ref(false);
+
+// 处理初始化Avatar
+async function handleInitAvatar(): Promise<void> {
+  if (!props.globalConfig.token || !props.globalConfig.avatarCode) {
+    result.value = '❌ 请先在全局配置中设置Token和Avatar Code';
+    ElMessage.warning('请先配置Token和Avatar Code');
+    return;
+  }
+
+  isLoading.value = true;
+  result.value = '🔄 正在初始化Unity实例和Avatar...\n📦 加载Unity引擎（约19MB）\n🤖 初始化数字人模型\n⚙️ 配置播报服务\n\n请稍等，这可能需要一些时间...';
+
+  try {
+    // 发送初始化请求
+    emit('init-avatar-with-unity', {
+      avatarCode: props.globalConfig.avatarCode
+    });
+
+    // 等待初始化完成的反馈
+    setTimeout(() => {
+      isLoading.value = false;
+      result.value = '✅ 初始化请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 初始化成功后可以使用其他API功能\n- Unity实例将在中间预览窗口中显示\n- 所有操作日志会在右侧面板实时更新';
+    }, 1000);
+  } catch (error) {
+    isLoading.value = false;
+    const message = error instanceof Error ? error.message : String(error);
+    result.value = `❌ 初始化失败: ${message}\n\n🔍 可能的原因：\n- Token无效或已过期\n- 网络连接问题\n- Unity资源文件加载失败\n- Avatar编码不存在`;
+    ElMessage.error(`初始化失败: ${message}`);
+  }
+}
+
+// 清空结果
+function clearResult(): void {
+  result.value = '等待初始化操作...\n\n新版SDK特性：\n- token在初始化时配置，无需重复传递\n- Promise-based异步API\n- 统一的错误处理和响应格式\n- 完整的TypeScript类型支持';
+}
+</script>
+
+<style lang="scss" scoped>
+.init-api {
+  .api-description {
+    margin-bottom: 20px;
+    .api-signature {
+      background-color: #f5f5f5;
+      padding: 8px 12px;
+      border-radius: 4px;
+      margin-bottom: 10px;
+      font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+      font-size: 12px;
+      border-left: 4px solid #409eff;
+      code {
+        color: #2c3e50;
+        font-weight: 600;
+      }
+    }
+    p {
+      margin: 5px 0;
+      color: #606266;
+      font-size: 14px;
+      &.api-features {
+        color: #67c23a;
+        font-weight: 500;
+        margin-top: 8px;
+      }
+    }
+  }
+  .api-controls {
+    margin-bottom: 20px;
+    .control-card {
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 600;
+      }
+      .control-content {
+        .status-info {
+          margin-bottom: 15px;
+          .status-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+            .status-label {
+              margin-right: 8px;
+              font-size: 13px;
+              color: #606266;
+            }
+          }
+        }
+        .config-info {
+          margin-bottom: 20px;
+          .avatar-code {
+            font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+            background-color: #f5f5f5;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-size: 12px;
+          }
+        }
+        .action-buttons {
+          .el-button {
+            width: 100%;
+            margin-bottom: 15px;
+          }
+          .button-tips {
+            :deep(.el-alert) {
+              margin-bottom: 10px;
+              &:last-child {
+                margin-bottom: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .api-result {
+    .result-card {
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 600;
+      }
+      .result-content {
+        max-height: 300px;
+        overflow-y: auto;
+        .result-text {
+          margin: 0;
+          padding: 15px;
+          background-color: #f8f9fa;
+          border-radius: 4px;
+          border: 1px solid #e9ecef;
+          font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+          font-size: 13px;
+          line-height: 1.6;
+          color: #2c3e50;
+          white-space: pre-wrap;
+          word-wrap: break-word;
+        }
+      }
+    }
+  }
+}
+
+// 移动端优化
+@media screen and (width <= 768px) {
+  .init-api {
+    .api-description {
+      .api-signature {
+        font-size: 11px;
+        padding: 6px 10px;
+        code {
+          word-break: break-all;
+        }
+      }
+    }
+    .control-content {
+      .status-info {
+        .el-row {
+          .el-col {
+            margin-bottom: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>