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

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

@@ -0,0 +1,249 @@
+<template>
+  <div class="log-panel">
+    <div class="log-container">
+      <div class="log-list" ref="logContainer">
+        <el-timeline v-if="logs.length > 0">
+          <el-timeline-item
+            v-for="(log, index) in logs"
+            :key="index"
+            :timestamp="log.time"
+            :type="getLogType(log.type)"
+            :icon="getLogIcon(log.type)"
+            placement="top"
+            size="small"
+          >
+            <div class="log-item">
+              <el-tag
+                :type="getTagType(log.type)"
+                size="mini"
+                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"
+          size="mini"
+          icon="el-icon-bottom"
+          @click="scrollToBottom"
+        >
+          滚动到底部
+        </el-button>
+        <el-button
+          type="danger"
+          size="mini"
+          icon="el-icon-delete"
+          @click="clearLogs"
+        >
+          清空日志
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LogPanel',
+  props: {
+    logs: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    logs: {
+      handler () {
+        this.$nextTick(() => {
+          this.scrollToBottom()
+        })
+      },
+      deep: true
+    }
+  },
+  methods: {
+    scrollToBottom () {
+      const logContainer = this.$refs.logContainer
+      if (logContainer) {
+        logContainer.scrollTop = logContainer.scrollHeight
+      }
+    },
+
+    clearLogs () {
+      this.$emit('clear-logs')
+    },
+
+    getLogType (type) {
+      const typeMap = {
+        info: 'primary',
+        success: 'success',
+        warn: 'warning',
+        error: 'danger'
+      }
+      return typeMap[type] || 'primary'
+    },
+
+    getLogIcon (type) {
+      const iconMap = {
+        info: 'el-icon-info',
+        success: 'el-icon-success',
+        warn: 'el-icon-warning',
+        error: 'el-icon-error'
+      }
+      return iconMap[type] || 'el-icon-info'
+    },
+
+    getTagType (type) {
+      const tagMap = {
+        info: 'info',
+        success: 'success',
+        warn: 'warning',
+        error: 'danger'
+      }
+      return tagMap[type] || 'info'
+    },
+
+    getTypeLabel (type) {
+      const labelMap = {
+        info: '信息',
+        success: '成功',
+        warn: '警告',
+        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-vue2/src/components/MotionControlAPI.vue

@@ -0,0 +1,400 @@
+<template>
+  <div class="motion-control-api">
+    <!-- API说明 -->
+    <div class="api-description">
+      <el-alert
+        title="动作管理API"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template slot="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">
+        <div slot="header" class="card-header">
+          <span>🎭 动作播放</span>
+          <el-tag v-if="sdkStatus.canPlayMotion" type="success" size="mini">可用</el-tag>
+          <el-tag v-else type="info" size="mini">不可用</el-tag>
+        </div>
+
+        <div class="control-content">
+          <el-form :model="motionData" label-width="80px" size="small">
+            <el-form-item label="动作编码" required>
+              <el-input
+                v-model="motionData.clipCode"
+                placeholder="请输入动作编码"
+                prefix-icon="el-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"
+                size="medium"
+                icon="el-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">
+        <div slot="header" class="card-header">
+          <span>🔍 动作查询</span>
+          <el-tag v-if="sdkStatus.canGetMotion" type="success" size="mini">可用</el-tag>
+          <el-tag v-else type="info" size="mini">不可用</el-tag>
+        </div>
+
+        <div class="control-content">
+          <el-form size="small">
+            <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"
+                size="medium"
+                icon="el-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">
+        <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: 'MotionControlAPI',
+  props: {
+    sdkStatus: {
+      type: Object,
+      required: true
+    },
+    globalConfig: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      motionData: {
+        clipCode: 'DH_ACTION_MODEL103_000023'
+      },
+      queryData: {
+        getRemainingTime: true
+      },
+      result: '等待动作操作...\n\n📋 功能说明：\n- 播放动作：输入动作编码来播放指定动作\n- 查询动作：获取当前正在播放的动作信息\n- 剩余时间：可选择查询动作剩余播放时间\n\n',
+      playLoading: false,
+      queryLoading: false
+    }
+  },
+  methods: {
+    // 播放动作
+    async handlePlayMotion () {
+      const { avatarCode } = this.globalConfig
+      const { clipCode } = this.motionData
+
+      if (!avatarCode) {
+        this.result = '❌ 请先在全局配置中设置Avatar Code'
+        this.$message.warning('请先设置Avatar Code')
+        return
+      }
+
+      if (!clipCode) {
+        this.result = '❌ 请输入动作编码'
+        this.$message.warning('请输入动作编码')
+        return
+      }
+
+      this.playLoading = true
+      this.result = `🔄 正在播放动作...\n🎭 动作编码: ${clipCode}\n🤖 数字人: ${avatarCode}\n\n📡 发送动作播放指令...`
+
+      try {
+        this.$emit('play-motion', {
+          clipCode
+        })
+
+        // 模拟加载时间
+        setTimeout(() => {
+          this.playLoading = false
+          this.result = '✅ 动作播放请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 操作说明：\n- 动作播放成功会返回动作ID\n- 不同动作有不同的播放时长\n- 播放过程中可以播放新动作覆盖\n- 可以使用查询功能获取当前动作状态'
+        }, 800)
+      } catch (error) {
+        this.playLoading = false
+        this.result = `❌ 动作播放失败: ${error.message}\n\n🔍 可能的原因：\n- 动作编码不存在\n- Avatar未正确初始化\n- Unity通信异常\n- 动作文件损坏`
+        this.$message.error(`动作播放失败: ${error.message}`)
+      }
+    },
+
+    // 获取当前动作
+    async handleGetCurrentMotion () {
+      if (!this.sdkStatus.canGetMotion) {
+        this.$message.warning('请先初始化Avatar')
+        return
+      }
+
+      this.queryLoading = true
+      this.result = `🔄 正在获取当前动作信息...\n📊 查询参数: ${this.queryData.getRemainingTime ? '包含剩余时间' : '仅获取动作编码'}\n\n📡 发送查询请求...`
+
+      try {
+        this.$emit('get-current-motion', this.queryData)
+
+        // 模拟加载时间
+        setTimeout(() => {
+          this.queryLoading = false
+          this.result = '✅ 动作查询请求已发送\n📋 请查看右侧日志面板获取详细信息\n\n📝 查询结果说明：\n- 如果没有播放动作，返回值为空\n- 动作ID格式通常为 MOTION_XXX\n- 剩余时间以毫秒为单位\n- 查询不会影响当前播放状态'
+        }, 500)
+      } catch (error) {
+        this.queryLoading = false
+        this.result = `❌ 动作查询失败: ${error.message}\n\n🔍 可能的原因：\n- Avatar未正确初始化\n- Unity通信异常\n- 内部状态错误`
+        this.$message.error(`动作查询失败: ${error.message}`)
+      }
+    },
+
+    // 清空结果
+    clearResult () {
+      this.result = '等待动作操作...\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>