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

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

@@ -0,0 +1,414 @@
+<template>
+  <div class="camera-api">
+    <div class="api-description">
+      <el-alert
+        title="API说明"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template slot="default">
+          <div class="api-signature">
+            <code>setCamera(type: AvatarCameraType): Promise&lt;IAvatarCallbackResponse&gt;</code>
+          </div>
+          <p>设置数字人的摄像机类型和视角，支持全身、半身、近景三种预设类型</p>
+          <p class="api-features">
+            ✅ 实时镜头切换 &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.canControlCamera" type="success" size="mini">可用</el-tag>
+          <el-tag v-else type="info" size="mini">不可用</el-tag>
+        </div>
+
+        <div class="control-content">
+          <div class="preset-selector">
+            <el-form :model="presetData" label-width="80px" size="small">
+              <el-form-item label="预设视角" required>
+                <el-radio-group v-model="presetData.preset" class="preset-radio-group">
+                  <el-radio-button label="whole">
+                    <i class="el-icon-full-screen"></i>
+                    全身
+                  </el-radio-button>
+                  <el-radio-button label="half">
+                    <i class="el-icon-picture"></i>
+                    半身
+                  </el-radio-button>
+                  <el-radio-button label="face">
+                    <i class="el-icon-view"></i>
+                    近景
+                  </el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+
+              <el-form-item label="预览">
+                <div class="preset-preview">
+                  <div class="preview-card" :class="{ active: presetData.preset === 'whole' }">
+                    <div class="preview-icon">👤</div>
+                    <div class="preview-label">全身视角</div>
+                    <div class="preview-desc">显示数字人全身</div>
+                  </div>
+                  <div class="preview-card" :class="{ active: presetData.preset === 'half' }">
+                    <div class="preview-icon">🧑‍💼</div>
+                    <div class="preview-label">半身视角</div>
+                    <div class="preview-desc">显示数字人上半身</div>
+                  </div>
+                  <div class="preview-card" :class="{ active: presetData.preset === 'face' }">
+                    <div class="preview-icon">😊</div>
+                    <div class="preview-label">近景视角</div>
+                    <div class="preview-desc">显示数字人面部特写</div>
+                  </div>
+                </div>
+              </el-form-item>
+
+              <el-form-item class="action-buttons">
+                <el-button
+                  type="primary"
+                  size="medium"
+                  icon="el-icon-camera"
+                  :loading="isLoading"
+                  :disabled="!sdkStatus.canControlCamera || !presetData.preset || !globalConfig.avatarCode"
+                  @click="handleSetCameraPreset"
+                >
+                  {{ isLoading ? '切换中...' : '应用镜头设置' }}
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="status-tips">
+            <el-alert
+              v-if="!sdkStatus.canControlCamera"
+              title="请先初始化Avatar后再进行镜头控制"
+              type="warning"
+              :closable="false"
+              show-icon
+            />
+            <el-alert
+              v-else-if="!globalConfig.avatarCode"
+              title="请先在全局配置中设置Avatar Code"
+              type="warning"
+              :closable="false"
+              show-icon
+            />
+          </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: 'CameraAPI',
+  props: {
+    sdkStatus: {
+      type: Object,
+      required: true
+    },
+    globalConfig: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      presetData: {
+        preset: 'whole'
+      },
+      result: '等待镜头控制操作...\n\n支持的镜头类型：\n- whole: 全身视角，展示数字人完整形象\n- half: 半身视角，适合对话场景\n- face: 近景视角，突出面部表情',
+      isLoading: false
+    }
+  },
+  methods: {
+    handleSetCameraPreset () {
+      const { avatarCode } = this.globalConfig
+
+      if (!avatarCode) {
+        this.result = '❌ 请先在全局配置中设置Avatar Code'
+        this.$message.warning('请先设置Avatar Code')
+        return
+      }
+
+      if (!this.presetData.preset) {
+        this.result = '❌ 请选择镜头预设类型'
+        this.$message.warning('请选择镜头预设类型')
+        return
+      }
+
+      this.isLoading = true
+      const presetName = this.getPresetName(this.presetData.preset)
+      this.result = `🔄 正在设置镜头...\n📹 目标视角: ${presetName}\n⚙️ 类型: ${this.presetData.preset}\n\n📡 发送镜头切换指令...`
+
+      try {
+        this.$emit('set-camera-preset', {
+          preset: this.presetData.preset
+        })
+
+        // 模拟加载时间
+        setTimeout(() => {
+          this.isLoading = false
+          this.result = `✅ 镜头设置请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 镜头将平滑切换到${presetName}\n- 切换过程可能需要几秒钟\n- 不同视角适合不同的应用场景`
+        }, 800)
+      } catch (error) {
+        this.isLoading = false
+        this.result = `❌ 镜头设置失败: ${error.message}\n\n🔍 可能的原因：\n- Avatar未正确初始化\n- 镜头类型不支持\n- Unity通信异常`
+        this.$message.error(`镜头设置失败: ${error.message}`)
+      }
+    },
+
+    getPresetName (preset) {
+      const names = {
+        whole: '全身视角',
+        half: '半身视角',
+        face: '近景视角'
+      }
+      return names[preset] || preset
+    },
+
+    clearResult () {
+      this.result = '等待镜头控制操作...\n\n支持的镜头类型：\n- whole: 全身视角，展示数字人完整形象\n- half: 半身视角，适合对话场景\n- face: 近景视角，突出面部表情'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.camera-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 #e6a23c;
+
+      code {
+        color: #2c3e50;
+        font-weight: 600;
+      }
+    }
+
+    p {
+      margin: 5px 0;
+      color: #606266;
+      font-size: 14px;
+
+      &.api-features {
+        color: #e6a23c;
+        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 {
+        .preset-selector {
+          .el-form-item {
+            margin-bottom: 18px;
+
+            :deep(.el-form-item__label) {
+              font-weight: 500;
+              color: #303133;
+            }
+
+            &.action-buttons {
+              margin-bottom: 0;
+              margin-top: 25px;
+
+              .el-button {
+                width: 100%;
+                padding: 10px 0;
+                font-weight: 500;
+              }
+            }
+          }
+
+          .preset-radio-group {
+            width: 100%;
+
+            .el-radio-button {
+              flex: 1;
+
+              :deep(.el-radio-button__inner) {
+                width: 100%;
+                padding: 8px 15px;
+
+                i {
+                  margin-right: 5px;
+                }
+              }
+            }
+          }
+
+          .preset-preview {
+            display: flex;
+            gap: 10px;
+            margin-top: 10px;
+
+            .preview-card {
+              flex: 1;
+              padding: 12px;
+              border: 2px solid #e4e7ed;
+              border-radius: 6px;
+              text-align: center;
+              cursor: pointer;
+              transition: all 0.3s;
+
+              &:hover {
+                border-color: #409eff;
+                background-color: #f0f9ff;
+              }
+
+              &.active {
+                border-color: #409eff;
+                background-color: #ecf5ff;
+              }
+
+              .preview-icon {
+                font-size: 24px;
+                margin-bottom: 8px;
+              }
+
+              .preview-label {
+                font-weight: 500;
+                color: #303133;
+                margin-bottom: 4px;
+                font-size: 13px;
+              }
+
+              .preview-desc {
+                color: #909399;
+                font-size: 11px;
+                line-height: 1.3;
+              }
+            }
+          }
+        }
+
+        .status-tips {
+          margin-top: 15px;
+
+          .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) {
+  .camera-api {
+    .preset-radio-group {
+      .el-radio-button {
+        :deep(.el-radio-button__inner) {
+          padding: 6px 10px;
+          font-size: 12px;
+
+          i {
+            margin-right: 3px;
+          }
+        }
+      }
+    }
+
+    .preset-preview {
+      .preview-card {
+        padding: 8px;
+
+        .preview-icon {
+          font-size: 20px;
+          margin-bottom: 6px;
+        }
+
+        .preview-label {
+          font-size: 12px;
+        }
+
+        .preview-desc {
+          font-size: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,200 @@
+<template>
+  <div class="global-config">
+    <div class="config-header">
+      <el-icon class="el-icon-setting" />
+      <span class="config-title">全局配置</span>
+      <el-tag type="primary" size="mini">必填</el-tag>
+    </div>
+
+    <el-form :model="formData"
+             size="small"
+             class="config-form"
+    >
+      <el-row :gutter="16">
+        <el-col :xs="12" :sm="12">
+          <el-form-item label="Token" required>
+            <el-input
+              v-model="formData.token"
+              placeholder="请输入全局Token"
+              prefix-icon="el-icon-key"
+              clearable
+              @input="handleTokenInput"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :xs="12" :sm="12">
+          <el-form-item label="Avatar Code" required>
+            <el-input
+              v-model="formData.avatarCode"
+              placeholder="请输入数字人编码"
+              prefix-icon="el-icon-user"
+              clearable
+              @input="handleAvatarCodeInput"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item class="config-actions">
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-check"
+          @click="saveConfig"
+          :disabled="!formData.token || !formData.avatarCode"
+        >
+          保存配置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <div class="config-tips">
+      <el-alert
+        title="配置提示"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template slot="default">
+          <ul>
+            <li>1、Token: 用于API鉴权的访问令牌。   2、Avatar Code: 默认数字人编码，用于初始化Avatar。    3、配置保存后将自动应用到所有API接口</li>
+          </ul>
+        </template>
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GlobalConfig',
+  props: {
+    globalToken: {
+      type: String,
+      default: ''
+    },
+    globalAvatarCode: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      formData: {
+        token: this.globalToken,
+        avatarCode: this.globalAvatarCode
+      }
+    }
+  },
+  watch: {
+    globalToken (newVal) {
+      this.formData.token = newVal
+    },
+    globalAvatarCode (newVal) {
+      this.formData.avatarCode = newVal
+    }
+  },
+  methods: {
+    handleTokenInput (value) {
+      this.$emit('update:global-token', value)
+    },
+    handleAvatarCodeInput (value) {
+      this.$emit('update:global-avatar-code', value)
+    },
+    saveConfig () {
+      if (!this.formData.token || !this.formData.avatarCode) {
+        this.$message.warning('请填写完整的配置信息')
+        return
+      }
+
+      this.$emit('save-config', {
+        token: this.formData.token,
+        avatarCode: this.formData.avatarCode
+      })
+    },
+    applyAll () {
+      if (!this.formData.token || !this.formData.avatarCode) {
+        this.$message.warning('请先保存配置')
+        return
+      }
+
+      this.$emit('apply-all')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.global-config {
+  .config-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+    padding: 10px;
+    background: linear-gradient(135deg, #409eff, #66b1ff);
+    color: white;
+    border-radius: 4px;
+
+    .config-title {
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    .el-icon-setting {
+      font-size: 18px;
+    }
+  }
+
+  .config-form {
+    margin-bottom: 20px;
+
+    .config-actions {
+      text-align: center;
+
+      .el-button {
+        margin: 0 5px;
+      }
+    }
+  }
+
+  .config-tips {
+    .el-alert {
+      .el-alert__content {
+        ul {
+          margin: 0;
+          padding-left: 20px;
+
+          li {
+            margin: 5px 0;
+            font-size: 12px;
+            line-height: 1.5;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动端优化
+@media screen and (max-width: 768px) {
+  .global-config {
+    .config-form {
+      .el-form-item {
+        .el-form-item__label {
+          width: 80px !important;
+          font-size: 12px;
+        }
+      }
+
+      .config-actions {
+        .el-button {
+          display: block;
+          width: 100%;
+          margin: 5px 0;
+        }
+      }
+    }
+  }
+}
+</style>