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

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

@@ -0,0 +1,376 @@
+<template>
+  <div class="camera-api">
+    <div class="api-description">
+      <el-alert
+        title="API说明"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template template #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">
+        <template #header>
+          <div class="card-header">
+          <span>镜头控制</span>
+          <el-tag v-if="sdkStatus.canControlCamera" type="success" size="default">可用</el-tag>
+          <el-tag v-else type="info" size="default">不可用</el-tag>
+        </div>
+        </template>
+        <div class="control-content">
+          <div class="preset-selector">
+            <el-form :model="presetData" label-width="80px" size="default">
+              <el-form-item label="预设视角" required>
+                <el-radio-group v-model="presetData.preset" class="preset-radio-group">
+                  <el-radio-button value="whole">
+                    <i class="el-icon-full-screen"></i>
+                    全身
+                  </el-radio-button>
+                  <el-radio-button value="half"> 
+                    <i class="el-icon-picture"></i>
+                    半身
+                  </el-radio-button>
+                  <el-radio-button value="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"
+                  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">
+        <template #header>
+          <div class="card-header">
+          <span>执行结果</span>
+          <el-link
+            size="default"
+            icon="refresh"
+            @click="clearResult"
+          >
+            清空
+          </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, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+
+interface ISDKStatus {
+  canControlCamera: boolean;
+}
+interface IGlobalConfig {
+  avatarCode: string;
+}
+
+const props = defineProps<{
+  sdkStatus: ISDKStatus;
+  globalConfig: IGlobalConfig;
+}>();
+const emit = defineEmits<{
+  (e: 'set-camera-preset', params: { preset: string }): void;
+}>();
+
+const presetData = reactive({
+  preset: 'whole',
+});
+const result = ref(
+  '等待镜头控制操作...\n\n支持的镜头类型：\n- whole: 全身视角，展示数字人完整形象\n- half: 半身视角，适合对话场景\n- face: 近景视角，突出面部表情'
+);
+const isLoading = ref(false);
+
+function getPresetName(preset: string) {
+  const names: Record<string, string> = {
+    whole: '全身视角',
+    half: '半身视角',
+    face: '近景视角',
+  };
+  return names[preset] || preset;
+}
+
+function clearResult() {
+  result.value = '等待镜头控制操作...\n\n支持的镜头类型：\n- whole: 全身视角，展示数字人完整形象\n- half: 半身视角，适合对话场景\n- face: 近景视角，突出面部表情';
+}
+
+function handleSetCameraPreset() {
+  const { avatarCode } = props.globalConfig;
+  if (!avatarCode) {
+    result.value = '❌ 请先在全局配置中设置Avatar Code';
+    ElMessage.warning('请先设置Avatar Code');
+    return;
+  }
+  if (!presetData.preset) {
+    result.value = '❌ 请选择镜头预设类型';
+    ElMessage.warning('请选择镜头预设类型');
+    return;
+  }
+  isLoading.value = true;
+  const presetName = getPresetName(presetData.preset);
+  result.value = `🔄 正在设置镜头...\n📹 目标视角: ${presetName}\n⚙️ 类型: ${presetData.preset}\n\n📡 发送镜头切换指令...`;
+  try {
+    emit('set-camera-preset', { preset: presetData.preset });
+    setTimeout(() => {
+      isLoading.value = false;
+      result.value = `✅ 镜头设置请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 镜头将平滑切换到${presetName}\n- 切换过程可能需要几秒钟\n- 不同视角适合不同的应用场景`;
+    }, 800);
+  } catch (error: any) {
+    isLoading.value = false;
+    result.value = `❌ 镜头设置失败: ${error.message}\n\n🔍 可能的原因：\n- Avatar未正确初始化\n- 镜头类型不支持\n- Unity通信异常`;
+    ElMessage.error(`镜头设置失败: ${error.message}`);
+  }
+}
+</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-vue3/src/components/GlobalConfig.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="global-config">
+    <div class="config-header">
+      <el-icon :size="18">
+        <Setting />
+      </el-icon>
+      <span class="config-title">全局配置</span>
+      <el-tag type="primary" size="default">必填</el-tag>
+    </div>
+
+    <el-form :model="modelValue" size="default" label-width="120px" :inline="true" label-position="top" class="config-form">
+          <el-form-item label="调试环境" required>
+           <el-radio-group v-model="modelValue.env">
+            <el-radio-button value="dev">开发</el-radio-button>
+            <el-radio-button value="test">测试</el-radio-button>
+            <el-radio-button value="prod">生产</el-radio-button>
+            <el-radio-button value="custom">自定义</el-radio-button>
+           </el-radio-group>
+          </el-form-item>
+         <el-form-item  v-if="modelValue.env === 'custom'" label="API地址" required>
+            <el-input
+              v-model="modelValue.apiBaseUrl"
+              placeholder="请输入API地址"
+              clearable>
+              <template #prefix> 
+                <el-icon><Folder /></el-icon> 
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item  v-if="modelValue.env === 'custom'" label="AB包地址">
+            <el-input
+              v-model="modelValue.resourcesUrl"
+              placeholder="请输入AB包地址"
+              clearable>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="WebGL路径" required>
+            <el-input
+              v-model="modelValue.webglPath"
+              placeholder="请输入WebGL路径"
+              clearable>
+              <template #prefix> 
+                <el-icon><Folder /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="Token" required>
+            <el-input
+              v-model="modelValue.token"
+              placeholder="请输入全局Token"
+              clearable
+            >
+              <template #prefix> 
+                <el-icon><Key /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="Avatar Code" required>
+            <el-input
+              v-model="modelValue.avatarCode"
+              placeholder="请输入数字人编码"
+              clearable
+            >
+              <template #prefix>
+                <el-icon><User /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="待机动作列表">
+            <div style="display: flex;  flex-direction: column;">
+            <el-input
+              v-model="modelValue.idleMotionListString"
+              placeholder="请输入待机动作列表"
+              clearable
+            >
+            </el-input>
+              <div style="font-size: 12px; color: #999;">
+                  动作编码列表，多个动作编码用逗号分隔
+              </div>
+            </div>
+          </el-form-item>
+          <div class="config-actions"> 
+            <el-button
+            type="primary"
+            size="default"
+            @click="saveConfig"
+            :disabled="!modelValue.token || !modelValue.avatarCode"
+            >
+              <template #icon>
+                <el-icon><Check /></el-icon>
+              </template>
+              保存配置
+           </el-button>
+          </div>
+    </el-form>
+    
+    <div class="config-tips">
+      <el-alert
+        title="配置提示"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template #default>
+          <ul>
+            <li>1、Token: 用于API鉴权的访问令牌。   2、Avatar Code: 默认数字人编码，用于初始化Avatar。    3、配置保存后将自动应用到所有API接口</li>
+          </ul>
+        </template>
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus';
+import { Setting, Key, User, Check, Folder } from '@element-plus/icons-vue';
+import type { IGlobalConfig } from '../types';
+
+// 定义 props
+const props = defineProps<{
+  modelValue: IGlobalConfig;
+}>();
+
+const modelValue = defineModel<IGlobalConfig>({
+  required: true
+});
+
+// 定义 emits
+const emit = defineEmits<{
+  'save-config': [];
+  'apply-all': [];
+}>();
+
+
+// 保存配置
+function saveConfig(): void {
+  if (!modelValue.value.token || !modelValue.value.avatarCode) {
+    ElMessage.warning('请填写完整的配置信息');
+    return;
+  }
+
+  emit('save-config');
+}
+
+</script>
+
+<style lang="scss" scoped>
+.global-config {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 20px;
+  .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;
+    }
+  }
+  .config-form {
+    :deep(.el-form-item) {
+      .el-input {
+        width: 300px;
+      }
+    }
+  }
+  .config-actions {
+    display: flex;
+    align-items: center;
+  }
+  .config-tips {
+    :deep(.el-alert__content) {
+      ul {
+        margin: 0;
+        li {
+          margin: 5px 0;
+          font-size: 12px;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+}
+
+// 移动端优化
+@media screen and (max-width: 768px) {
+  .global-config {
+    .config-form {
+      :deep(.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>