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

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

@@ -0,0 +1,236 @@
+<template>
+  <div class="log-panel">
+    <div class="log-container">
+      <div class="log-list" ref="logContainer">
+        <el-timeline v-if="props.logs.length > 0">
+          <el-timeline-item
+            v-for="(log, index) in props.logs"
+            :key="index"
+            :timestamp="log.time"
+            :type="getLogType(log.type)"
+            :icon="getLogIcon(log.type)"
+            placement="top"
+            size="normal">
+            <div class="log-item">
+              <el-tag
+                :type="getTagType(log.type) as any"
+                size="small"
+                class="log-type-tag">
+                {{ getTypeLabel(log.type) }}
+              </el-tag>
+              <span class="log-message">{{ log.message }}</span>
+            </div>
+          </el-timeline-item>
+        </el-timeline>
+
+        <div v-else class="empty-logs">
+          <el-empty description="暂无日志" :image-size="80">
+            <template #description>
+              <span>暂无操作日志</span>
+            </template>
+          </el-empty>
+        </div>
+      </div>
+
+      <div class="log-actions">
+        <el-button
+          type="primary"
+          :icon="Bottom"
+          @click="scrollToBottom"
+        >
+          滚动到底部
+        </el-button>
+        <el-button
+          type="danger"
+          :icon="Delete"
+          @click="clearLogs"
+        >
+          清空日志
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, watch } from 'vue';
+import { ElButton, ElTag, ElTimeline, ElTimelineItem, ElEmpty } from 'element-plus';
+import { Bottom } from '@element-plus/icons-vue';
+import { Delete } from '@element-plus/icons-vue';
+
+interface ILogEntry {
+  time: string;
+  message: string;
+  type: 'info' | 'success' | 'warning' | 'error';
+}
+
+const props = defineProps<{ logs: ILogEntry[] }>();
+const emit = defineEmits<{ (e: 'clear-logs'): void }>();
+
+const logContainer = ref<HTMLElement | null>(null);
+
+watch(
+  () => props.logs,
+  async () => {
+    await nextTick();
+    if (logContainer.value) {
+      logContainer.value.scrollTop = logContainer.value.scrollHeight;
+    }
+  }
+);
+
+function scrollToBottom() {
+  if (logContainer.value) {
+    logContainer.value.scrollTop = logContainer.value.scrollHeight;
+  }
+}
+
+function clearLogs() {
+  emit('clear-logs');
+}
+
+function getLogType(type: ILogEntry['type']) {
+  const typeMap = {
+    info: 'primary',
+    success: 'success',
+    warning: 'warning',
+    error: 'danger',
+  };
+  return typeMap[type] || 'primary';
+}
+
+function getLogIcon(type: ILogEntry['type']) {
+  const iconMap = {
+    info: 'el-icon-info',
+    success: 'el-icon-success',
+    warning: 'el-icon-warning',
+    error: 'el-icon-error',
+  };
+  return iconMap[type] || 'el-icon-info';
+}
+
+function getTagType(type: ILogEntry['type']) {
+  const tagMap = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'danger',
+  };
+  return tagMap[type] || 'info';
+}
+
+function getTypeLabel(type: ILogEntry['type']) {
+  const labelMap = {
+    info: '信息',
+    success: '成功',
+    warning: '警告',
+    error: '错误',
+  };
+  return labelMap[type] || '信息';
+}
+</script>
+
+<style lang="scss" scoped>
+.log-panel {
+  height: 100%;
+  max-height: 650px;
+  display: flex;
+  flex-direction: column;
+  .log-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    .log-list {
+      flex: 1;
+      overflow-y: auto;
+      min-height: 300px;
+      padding: 10px;
+      background-color: #fafafa;
+      border-radius: 4px;
+      border: 1px solid #e4e7ed;
+      .el-timeline {
+        .el-timeline-item {
+          .el-timeline-item__wrapper {
+            .el-timeline-item__timestamp {
+              font-size: 11px;
+              color: #909399;
+              font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+            }
+            .el-timeline-item__content {
+              .log-item {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                margin-bottom: 5px;
+                .log-type-tag {
+                  flex-shrink: 0;
+                }
+                .log-message {
+                  font-size: 13px;
+                  line-height: 1.4;
+                  color: #2c3e50;
+                  word-break: break-word;
+                }
+              }
+            }
+          }
+        }
+      }
+      .empty-logs {
+        height: 200px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .log-actions {
+      margin-top: 10px;
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+      .el-button {
+        flex: 1;
+        max-width: 120px;
+      }
+    }
+  }
+}
+
+// 移动端优化
+@media screen and (max-width: 768px) {
+  .log-panel {
+    .log-container {
+      .log-list {
+        min-height: 250px;
+        padding: 8px;
+        .el-timeline {
+          .el-timeline-item {
+            .el-timeline-item__wrapper {
+              .el-timeline-item__timestamp {
+                font-size: 10px;
+              }
+              .el-timeline-item__content {
+                .log-item {
+                  flex-direction: column;
+                  align-items: flex-start;
+                  gap: 4px;
+                  .log-message {
+                    font-size: 12px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .log-actions {
+        .el-button {
+          font-size: 12px;
+          padding: 5px 8px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,373 @@
+<template>
+  <div class="motion-control-api">
+    <!-- API说明 -->
+    <div class="api-description">
+      <el-alert
+        title="动作管理API"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template #default>
+          <div class="api-signatures">
+            <div class="api-signature">
+              <code>playMotion(clipCode: string): Promise&lt;IAvatarCallbackResponse&gt;</code>
+            </div>
+            <div class="api-signature">
+              <code>getCurrentMotion(getRemainingTime?: boolean): Promise&lt;any&gt;</code>
+            </div>
+          </div>
+          <p>完整的数字人动作管理功能，支持动作播放和状态查询</p>
+          <p class="api-features">
+            ✅ 动作播放控制 &nbsp;&nbsp;
+            ✅ 当前动作查询 &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.canPlayMotion" type="success" size="default">可用</el-tag>
+            <el-tag v-else type="info" size="default">不可用</el-tag>
+          </div>
+        </template>
+
+        <div class="control-content">
+          <el-form :model="motionData" label-width="80px" size="default">
+            <el-form-item label="动作编码" required>
+              <el-input
+                v-model="motionData.clipCode"
+                placeholder="请输入动作编码"
+                prefix-icon="magic-stick"
+                :disabled="!sdkStatus.canPlayMotion"
+                @keydown.enter.native="handlePlayMotion"
+              />
+              <div class="input-help">
+                <span class="help-text">输入动作编码</span>
+              </div>
+            </el-form-item>
+
+            <el-form-item class="action-buttons">
+              <el-button
+                type="primary"
+                icon="video-play"
+                :loading="playLoading"
+                :disabled="!sdkStatus.canPlayMotion || !motionData.clipCode || !globalConfig.avatarCode"
+                @click="handlePlayMotion"
+              >
+                {{ playLoading ? '播放中...' : '播放动作' }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+
+          <div class="status-tips">
+            <el-alert
+              v-if="!sdkStatus.canPlayMotion"
+              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-controls" style="margin-top: 20px;">
+      <el-card shadow="hover" class="control-card">
+        <template #header>
+          <div class="card-header">
+            <span>🔍 动作查询</span>
+            <el-tag v-if="sdkStatus.canGetMotion" type="success" size="default">可用</el-tag>
+            <el-tag v-else type="info" size="default">不可用</el-tag>
+          </div>
+        </template>
+
+        <div class="control-content">
+          <el-form size="default">
+            <el-form-item>
+              <el-checkbox
+                v-model="queryData.getRemainingTime"
+                :disabled="!sdkStatus.canGetMotion"
+              >
+                获取剩余播放时间
+              </el-checkbox>
+            </el-form-item>
+
+            <el-form-item class="action-buttons">
+              <el-button
+                type="primary"
+                icon="search"
+                :loading="queryLoading"
+                :disabled="!sdkStatus.canGetMotion"
+                @click="handleGetCurrentMotion"
+              >
+                {{ queryLoading ? '查询中...' : '获取当前动作' }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+
+          <div class="status-tips">
+            <el-alert
+              v-if="!sdkStatus.canGetMotion"
+              title="请先初始化Avatar后再查询动作"
+              type="warning"
+              :closable="false"
+              show-icon
+            />
+          </div>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 执行结果 -->
+    <div class="api-result" style="margin-top: 20px;">
+      <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 {
+  canPlayMotion: boolean;
+  canGetMotion: boolean;
+}
+interface IGlobalConfig { 
+  avatarCode: string;
+}
+
+const props = defineProps<{
+  sdkStatus: ISDKStatus;
+  globalConfig: IGlobalConfig;
+}>();
+const emit = defineEmits<{
+  (e: 'play-motion', params: { clipCode: string }): void;
+  (e: 'get-current-motion', params: { getRemainingTime: boolean }): void;
+}>();
+
+const motionData = reactive({
+  clipCode: 'DH_ACTION_MODEL103_000023',
+}); 
+const queryData = reactive({
+  getRemainingTime: true,
+});
+const result = ref(
+  '等待动作操作...\n\n📋 功能说明：\n- 播放动作：输入动作编码来播放指定动作\n- 查询动作：获取当前正在播放的动作信息\n- 剩余时间：可选择查询动作剩余播放时间\n\n'
+);
+const playLoading = ref(false);
+const queryLoading = ref(false);
+
+async function handlePlayMotion() {
+  const { avatarCode } = props.globalConfig;
+  const { clipCode } = motionData;
+  if (!avatarCode) {
+    result.value = '❌ 请先在全局配置中设置Avatar Code';
+    ElMessage.warning('请先设置Avatar Code');
+    return;
+  }
+  if (!clipCode) {
+    result.value = '❌ 请输入动作编码';
+    ElMessage.warning('请输入动作编码');
+    return;
+  }
+  playLoading.value = true;
+  result.value = `🔄 正在播放动作...\n🎭 动作编码: ${clipCode}\n🤖 数字人: ${avatarCode}\n\n📡 发送动作播放指令...`;
+  try {
+    emit('play-motion', { clipCode });
+    setTimeout(() => {
+      playLoading.value = false;
+      result.value = '✅ 动作播放请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 动作播放成功会返回动作ID\n- 不同动作有不同的播放时长\n- 播放过程中可以播放新动作覆盖\n- 可以使用查询功能获取当前动作状态';
+    }, 800);
+  } catch (error: any) {
+    playLoading.value = false;
+    result.value = `❌ 动作播放失败: ${error.message}\n\n🔍 可能的原因：\n- 动作编码不存在\n- Avatar未正确初始化\n- Unity通信异常\n- 动作文件损坏`;
+    ElMessage.error(`动作播放失败: ${error.message}`);
+  }
+}
+
+async function handleGetCurrentMotion() {
+  if (!props.sdkStatus.canGetMotion) {
+    ElMessage.warning('请先初始化Avatar');
+    return;
+  }
+  queryLoading.value = true;
+  result.value = `🔄 正在获取当前动作信息...\n📊 查询参数: ${queryData.getRemainingTime ? '包含剩余时间' : '仅获取动作编码'}\n\n📡 发送查询请求...`;
+  try {
+    emit('get-current-motion', { getRemainingTime: queryData.getRemainingTime });
+    setTimeout(() => {
+      queryLoading.value = false;
+      result.value = '✅ 动作查询请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 查询结果说明：\n- 如果没有播放动作，返回值为空\n- 动作ID格式通常为 MOTION_XXX\n- 剩余时间以毫秒为单位\n- 查询不会影响当前播放状态';
+    }, 500);
+  } catch (error: any) {
+    queryLoading.value = false;
+    result.value = `❌ 动作查询失败: ${error.message}\n\n🔍 可能的原因：\n- Avatar未正确初始化\n- Unity通信异常\n- 内部状态错误`;
+    ElMessage.error(`动作查询失败: ${error.message}`);
+  }
+}
+
+function clearResult() {
+  result.value = '等待动作操作...\n\n📋 功能说明：\n- 播放动作：输入动作编码来播放指定动作\n- 查询动作：获取当前正在播放的动作信息\n- 剩余时间：可选择查询动作剩余播放时间\n\n🎭 ';
+}
+</script>
+
+<style lang="scss" scoped>
+.motion-control-api {
+  .api-description {
+    margin-bottom: 20px;
+    .api-signatures {
+      .api-signature {
+        background-color: #f5f5f5;
+        padding: 8px 12px;
+        border-radius: 4px;
+        margin-bottom: 8px;
+        font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+        font-size: 12px;
+        border-left: 4px solid #f56c6c;
+        &:last-child {
+          margin-bottom: 10px;
+        }
+        code {
+          color: #2c3e50;
+          font-weight: 600;
+        }
+      }
+    }
+    p {
+      margin: 5px 0;
+      color: #606266;
+      font-size: 14px;
+      &.api-features {
+        color: #f56c6c;
+        font-weight: 500;
+        margin-top: 8px;
+      }
+    }
+  }
+  .api-controls {
+    .control-card {
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 600;
+      }
+      .control-content {
+        .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;
+            }
+          }
+          .input-help {
+            margin-top: 5px;
+            .help-text {
+              font-size: 12px;
+              color: #909399;
+              line-height: 1.4;
+            }
+          }
+        }
+        .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) {
+  .motion-control-api {
+    .api-controls .control-card .control-content {
+      .el-form-item {
+        .input-help {
+          .help-text {
+            font-size: 11px;
+          }
+        }
+        &.action-buttons .el-button {
+          padding: 8px 0;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+</style>