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

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

@@ -0,0 +1,294 @@
+<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">
+          <div slot="header" class="card-header">
+            <i class="el-icon-info"></i>
+            <span>SDK版本</span>
+          </div>
+          <div class="card-content">
+            <div class="version-info">
+              <div class="version-item">
+                <span class="label">当前版本:</span>
+                <el-tag type="primary" size="mini">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">
+          <div slot="header" class="card-header">
+            <i class="el-icon-cpu"></i>
+            <span>系统信息</span>
+          </div>
+          <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="mini">
+                  {{ 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">
+          <div slot="header" class="card-header">
+            <i class="el-icon-document"></i>
+            <span>快速文档</span>
+          </div>
+          <div class="card-content">
+            <div class="doc-links">
+              <el-button type="text" size="small" icon="el-icon-link">
+                API文档
+              </el-button>
+              <el-button type="text" size="small" icon="el-icon-video-play">
+                视频教程
+              </el-button>
+              <el-button type="text" size="small" icon="el-icon-chat-line-round">
+                技术支持
+              </el-button>
+            </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">
+          <div slot="header" class="card-header">
+            <i class="el-icon-star-on"></i>
+            <span>功能特性</span>
+          </div>
+          <div class="card-content">
+            <div class="features">
+              <div class="feature-item">
+                <i class="el-icon-check"></i>
+                <span>3D数字人渲染</span>
+              </div>
+              <div class="feature-item">
+                <i class="el-icon-check"></i>
+                <span>智能语音播报</span>
+              </div>
+              <div class="feature-item">
+                <i class="el-icon-check"></i>
+                <span>动作控制系统</span>
+              </div>
+              <div class="feature-item">
+                <i class="el-icon-check"></i>
+                <span>多平台支持</span>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoCards',
+  data () {
+    return {
+      browserInfo: '',
+      platformInfo: '',
+      webglSupported: false
+    }
+  },
+  mounted () {
+    this.getBrowserInfo()
+    this.getPlatformInfo()
+    this.checkWebGLSupport()
+  },
+  methods: {
+    getBrowserInfo () {
+      const userAgent = navigator.userAgent
+      if (userAgent.includes('Chrome')) {
+        this.browserInfo = 'Chrome'
+      } else if (userAgent.includes('Firefox')) {
+        this.browserInfo = 'Firefox'
+      } else if (userAgent.includes('Safari')) {
+        this.browserInfo = 'Safari'
+      } else if (userAgent.includes('Edge')) {
+        this.browserInfo = 'Edge'
+      } else {
+        this.browserInfo = 'Unknown'
+      }
+    },
+
+    getPlatformInfo () {
+      const platform = navigator.platform
+      if (platform.includes('Win')) {
+        this.platformInfo = 'Windows'
+      } else if (platform.includes('Mac')) {
+        this.platformInfo = 'macOS'
+      } else if (platform.includes('Linux')) {
+        this.platformInfo = 'Linux'
+      } else {
+        this.platformInfo = 'Unknown'
+      }
+    },
+
+    checkWebGLSupport () {
+      try {
+        const canvas = document.createElement('canvas')
+        const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
+        this.webglSupported = !!gl
+      } catch (e) {
+        this.webglSupported = false
+      }
+    }
+  }
+}
+</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-button {
+          text-align: left;
+          padding: 8px 0;
+
+          &: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-vue2/src/components/InitAPI.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="init-api">
+    <div class="api-description">
+      <el-alert
+        title="API说明"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template slot="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">
+        <div slot="header" class="card-header">
+          <span>初始化控制</span>
+          <el-tag v-if="sdkStatus.avatarLoaded" type="success" size="mini">已加载</el-tag>
+          <el-tag v-else type="info" size="mini">未加载</el-tag>
+        </div>
+
+        <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="mini">
+                    {{ 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="mini">
+                    {{ sdkStatus.avatarLoaded ? '已加载' : '未加载' }}
+                  </el-tag>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+
+          <div class="config-info">
+            <el-descriptions :column="1" size="mini" border>
+              <el-descriptions-item label="Token状态">
+                <el-tag :type="globalConfig.token ? 'success' : 'danger'" size="mini">
+                  {{ 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="mini">未设置</el-tag>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+
+          <div class="action-buttons">
+            <el-button
+              type="primary"
+              size="medium"
+              icon="el-icon-play"
+              :loading="isLoading"
+              :disabled="sdkStatus.avatarLoaded || !globalConfig.token || !globalConfig.avatarCode"
+              @click="handleInitAvatar"
+            >
+              {{ 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">
+        <div slot="header" class="card-header">
+          <span>执行结果</span>
+          <el-button
+            type="text"
+            size="mini"
+            icon="el-icon-refresh"
+            @click="clearResult"
+          >
+            清空
+          </el-button>
+        </div>
+
+        <div class="result-content">
+          <pre class="result-text">{{ result }}</pre>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InitAPI',
+  props: {
+    sdkStatus: {
+      type: Object,
+      required: true
+    },
+    globalConfig: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      result: '等待初始化操作...\n\n新版SDK特性：\n- token在初始化时配置，无需重复传递\n- Promise-based异步API\n- 统一的错误处理和响应格式\n- 完整的TypeScript类型支持',
+      isLoading: false
+    }
+  },
+  methods: {
+    async handleInitAvatar () {
+      if (!this.globalConfig.token || !this.globalConfig.avatarCode) {
+        this.result = '❌ 请先在全局配置中设置Token和Avatar Code'
+        this.$message.warning('请先配置Token和Avatar Code')
+        return
+      }
+
+      this.isLoading = true
+      this.result = '🔄 正在初始化Unity实例和Avatar...\n📦 加载Unity引擎（约19MB）\n🤖 初始化数字人模型\n⚙️ 配置播报服务\n\n请稍等，这可能需要一些时间...'
+
+      try {
+        // 发送初始化请求
+        this.$emit('init-avatar-with-unity', {
+          avatarCode: this.globalConfig.avatarCode
+        })
+
+        // 等待初始化完成的反馈
+        setTimeout(() => {
+          this.isLoading = false
+          this.result = '✅ 初始化请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 初始化成功后可以使用其他API功能\n- Unity实例将在中间预览窗口中显示\n- 所有操作日志会在右侧面板实时更新'
+        }, 1000)
+      } catch (error) {
+        this.isLoading = false
+        this.result = `❌ 初始化失败: ${error.message}\n\n🔍 可能的原因：\n- Token无效或已过期\n- 网络连接问题\n- Unity资源文件加载失败\n- Avatar编码不存在`
+        this.$message.error(`初始化失败: ${error.message}`)
+      }
+    },
+
+    clearResult () {
+      this.result = '等待初始化操作...\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 {
+            .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>