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

package/dist/examples/test-vue2/src/App.vue

@@ -0,0 +1,943 @@
+<template>
+  <div id="app">
+    <el-container class="app-container">
+      <!-- 主要内容区域 -->
+      <el-main class="app-main">
+        <!-- 全局配置 -->
+        <el-card class="global-config-card" shadow="never">
+          <global-config
+            :global-token.sync="globalConfig.token"
+            :global-avatar-code.sync="globalConfig.avatarCode"
+            @save-config="handleSaveConfig"
+            @apply-all="handleApplyAll"
+          />
+        </el-card>
+
+        <!-- 移动端和PC端响应式布局 -->
+        <div class="main-content" :class="{ 'mobile-layout': isMobile }">
+          <!-- PC端布局 -->
+          <el-row v-if="!isMobile" :gutter="20">
+            <!-- 左侧控制面板 -->
+            <el-col :md="8" :lg="8" :xl="8">
+              <el-card class="control-panel" shadow="hover">
+                <div slot="header" class="card-header">
+                  <span>API 测试面板</span>
+                  <el-tag type="info" size="mini">SDK演示</el-tag>
+                </div>
+
+                <!-- API选项卡 -->
+                <el-tabs v-model="activeTab" type="card" class="api-tabs">
+                  <el-tab-pane label="初始化" name="init">
+                    <init-a-p-i
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @init-avatar-with-unity="handleInitAvatarWithUnity"
+                    />
+                  </el-tab-pane>
+
+                  <el-tab-pane label="动作管理" name="motion">
+                    <motion-control-a-p-i
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @play-motion="handlePlayMotion"
+                      @get-current-motion="handleGetCurrentMotion"
+                    />
+                  </el-tab-pane>
+
+                  <el-tab-pane label="智能播报" name="text-broadcast">
+                    <broadcast-a-p-i
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @text-broadcast="handleTextBroadcast"
+                      @audio-broadcast="handleAudioBroadcast"
+                      @pause-broadcast="handlePauseBroadcast"
+                      @resume-broadcast="handleResumeBroadcast"
+                      @stop-broadcast="handleStopBroadcast"
+                    />
+                  </el-tab-pane>
+
+                  <el-tab-pane label="镜头控制" name="camera">
+                    <camera-a-p-i
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @set-camera-preset="handleSetCameraPreset"
+                    />
+                  </el-tab-pane>
+                </el-tabs>
+              </el-card>
+            </el-col>
+
+            <!-- 中间Unity预览 -->
+            <el-col :md="10" :lg="10" :xl="10">
+              <unity-preview
+                :sdk-status="sdkStatus"
+                :loading-progress="loadingProgress"
+                @unload-avatar="handleUnloadAvatar"
+                @destroy-sdk="handleDestroySDK"
+              />
+            </el-col>
+
+            <!-- 右侧操作日志 -->
+            <el-col :md="6" :lg="6" :xl="6">
+              <el-card class="log-panel" shadow="hover">
+                <div slot="header" class="card-header">
+                  <span>操作日志</span>
+                  <el-button
+                    type="text"
+                    size="mini"
+                    @click="clearLogs"
+                    icon="el-icon-delete"
+                  >
+                    清空
+                  </el-button>
+                </div>
+
+                <log-panel
+                  :logs="logs"
+                  @clear-logs="clearLogs"
+                />
+              </el-card>
+            </el-col>
+          </el-row>
+
+          <!-- 移动端布局 -->
+          <div v-else class="mobile-panels">
+            <!-- API 测试面板 -->
+            <div class="mobile-panel-item">
+              <el-card class="control-panel" shadow="hover">
+                <div slot="header" class="card-header">
+                  <span>API 测试面板</span>
+                  <el-tag type="info" size="mini">SDK演示</el-tag>
+                </div>
+
+                <!-- API选项卡 -->
+                <el-tabs v-model="activeTab" type="card" class="api-tabs">
+                  <el-tab-pane label="初始化" name="init">
+                    <init-a-p-i
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @init-avatar-with-unity="handleInitAvatarWithUnity"
+                    />
+                  </el-tab-pane>
+
+                  <el-tab-pane label="动作管理" name="motion">
+                    <motion-control-a-p-i
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @play-motion="handlePlayMotion"
+                      @get-current-motion="handleGetCurrentMotion"
+                    />
+                  </el-tab-pane>
+
+                  <el-tab-pane label="智能播报" name="text-broadcast">
+                    <broadcast-a-p-i
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @text-broadcast="handleTextBroadcast"
+                      @audio-broadcast="handleAudioBroadcast"
+                      @pause-broadcast="handlePauseBroadcast"
+                      @resume-broadcast="handleResumeBroadcast"
+                      @stop-broadcast="handleStopBroadcast"
+                    />
+                  </el-tab-pane>
+
+                  <el-tab-pane label="镜头控制" name="camera">
+                    <camera-a-p-i
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @set-camera-preset="handleSetCameraPreset"
+                    />
+                  </el-tab-pane>
+                </el-tabs>
+              </el-card>
+            </div>
+
+            <!-- Unity 预览 -->
+            <div class="mobile-panel-item">
+              <unity-preview
+                :sdk-status="sdkStatus"
+                :loading-progress="loadingProgress"
+                @unload-avatar="handleUnloadAvatar"
+                @destroy-sdk="handleDestroySDK"
+              />
+            </div>
+
+            <!-- 操作日志 -->
+            <div class="mobile-panel-item">
+              <el-card class="log-panel" shadow="hover">
+                <div slot="header" class="card-header">
+                  <span>操作日志</span>
+                  <el-button
+                    type="text"
+                    size="mini"
+                    @click="clearLogs"
+                    icon="el-icon-delete"
+                  >
+                    清空
+                  </el-button>
+                </div>
+
+                <log-panel
+                  :logs="logs"
+                  @clear-logs="clearLogs"
+                />
+              </el-card>
+            </div>
+          </div>
+        </div>
+
+        <!-- 信息卡片 -->
+        <el-card class="info-cards" shadow="never">
+          <info-cards />
+        </el-card>
+      </el-main>
+    </el-container>
+
+    <!-- 页脚 -->
+    <el-footer class="app-footer">
+      <div class="footer-content">
+        <span>ZEEAvatarSDK © 2025 | 测试控制台 v2.0.0</span>
+        <el-divider direction="vertical" />
+        <span>SDK重构版演示Demo</span>
+      </div>
+    </el-footer>
+  </div>
+</template>
+
+<script>
+// 引入最新版SDK
+import {
+  ZEEAvatarLoader,
+  BroadcastService,
+  AvatarCameraType,
+  BroadcastType
+} from '@zeewain/3d-avatar-sdk'
+
+// 引入组件
+import GlobalConfig from './components/GlobalConfig.vue'
+import InitAPI from './components/InitAPI.vue'
+import MotionControlAPI from './components/MotionControlAPI.vue'
+import BroadcastAPI from './components/BroadcastAPI.vue'
+import CameraAPI from './components/CameraAPI.vue'
+import LogPanel from './components/LogPanel.vue'
+import InfoCards from './components/InfoCards.vue'
+import UnityPreview from './components/UnityPreview.vue'
+
+export default {
+  name: 'App',
+  components: {
+    GlobalConfig,
+    InitAPI,
+    MotionControlAPI,
+    BroadcastAPI,
+    CameraAPI,
+    LogPanel,
+    InfoCards,
+    UnityPreview
+  },
+  data () {
+    return {
+      // 当前活动选项卡
+      activeTab: 'init',
+
+      // 移动端检测
+      isMobile: false,
+
+      // 加载进度
+      loadingProgress: 0,
+
+      // 全局配置
+      globalConfig: {
+        token: '',
+        avatarCode: ''
+      },
+
+      // SDK状态
+      sdkStatus: {
+        unityLoaded: false,
+        avatarLoaded: false,
+        canPlayMotion: false,
+        canBroadcast: false,
+        canGetMotion: false,
+        canControlBroadcast: false,
+        canControlCamera: false
+      },
+
+      // 操作日志
+      logs: [
+        { time: new Date().toLocaleTimeString(), message: '系统准备就绪，请选择API进行测试', type: 'info' },
+        { time: new Date().toLocaleTimeString(), message: '支持移动端响应式布局', type: 'info' }
+      ],
+
+      // SDK实例
+      sdk: null,
+      avatarAPI: null,
+      broadcastService: null
+    }
+  },
+
+  mounted () {
+    this.loadStoredConfig()
+    this.checkMobile()
+    this.addLog('测试页面已加载（SDK重构版）', 'info')
+    this.addLog(`浏览器: ${navigator.userAgent.split(' ')[0]}`, 'info')
+
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.handleResize)
+  },
+
+  beforeDestroy () {
+    // 清理监听器
+    window.removeEventListener('resize', this.handleResize)
+
+    // 清理SDK资源
+    if (this.broadcastService) {
+      this.broadcastService.destroy()
+    }
+    if (this.sdk) {
+      this.sdk.destroy()
+    }
+  },
+
+  methods: {
+    // 初始化SDK配置
+    initializeSDKConfig () {
+      if (!this.globalConfig.token) {
+        this.addLog('请先配置Token', 'warning')
+        return null
+      }
+
+      const config = {
+        // Unity构建文件配置
+        loaderUrl: './assets/Build/webgl.loader.js',
+        dataUrl: './assets/Build/webgl.data.unityweb',
+        frameworkUrl: './assets/Build/webgl.framework.js.unityweb',
+        codeUrl: './assets/Build/webgl.wasm.unityweb',
+        containerId: 'unity-container',
+
+        // 认证配置
+        token: this.globalConfig.token,
+        env: 'dev',
+
+        // 进度回调
+        onProgress: progress => {
+          this.loadingProgress = progress
+          this.addLog(`加载进度: ${Math.round(progress * 100)}%`, 'info')
+        }
+      }
+
+      this.sdk = new ZEEAvatarLoader(config)
+      return this.sdk
+    },
+
+    // 从本地存储加载配置
+    loadStoredConfig () {
+      const token = localStorage.getItem('zee_token')
+      const avatarCode = localStorage.getItem('zee_avatar')
+
+      if (token) this.globalConfig.token = token
+      if (avatarCode) this.globalConfig.avatarCode = avatarCode
+    },
+
+    // 保存全局配置
+    handleSaveConfig (config) {
+      this.globalConfig = { ...config }
+      localStorage.setItem('zee_token', config.token)
+      localStorage.setItem('zee_avatar', config.avatarCode)
+      this.addLog('全局配置已保存', 'success')
+      this.$message.success('配置保存成功')
+    },
+
+    // 应用配置到所有接口
+    handleApplyAll () {
+      this.addLog('配置已应用到所有接口', 'info')
+      this.$message.info('配置已应用到所有接口')
+    },
+
+    // 初始化Avatar（包含Unity实例化）
+    async handleInitAvatarWithUnity (params) {
+      try {
+        this.$message.info('开始初始化Unity和Avatar...')
+
+        // 如果Unity还没有加载，先初始化Unity
+        if (!this.sdkStatus.unityLoaded) {
+          await this.handleUnityInstance()
+        }
+
+        // 然后初始化Avatar
+        await this.handleInitAvatar(params)
+      } catch (error) {
+        this.addLog(`初始化失败: ${error.message}`, 'error')
+        this.$message.error(`初始化失败: ${error.message}`)
+      }
+    },
+
+    // Unity实例化
+    async handleUnityInstance () {
+      try {
+        this.addLog('开始初始化 SDK...', 'info')
+
+        // 重新初始化SDK配置（包含最新token）
+        if (!this.initializeSDKConfig()) {
+          return
+        }
+
+        // 初始化SDK并获取Avatar API
+        this.avatarAPI = await this.sdk.init()
+        this.addLog('SDK 初始化成功!', 'success')
+
+        // 创建播报服务实例
+        this.broadcastService = new BroadcastService({
+          unityInstance: this.sdk.getInstance(),
+          callbacks: {
+            onStart: () => {
+              this.addLog('播报开始', 'success')
+            },
+            onFinish: () => {
+              this.addLog('播报完成', 'success')
+            },
+            onError: error => {
+              this.addLog(`播报错误: ${error.message}`, 'error')
+            },
+            onPause: () => {
+              this.addLog('播报已暂停', 'info')
+            },
+            onResume: () => {
+              this.addLog('播报已继续', 'info')
+            },
+            onStop: () => {
+              this.addLog('播报已停止', 'info')
+            }
+          }
+        })
+
+        this.addLog('播报服务初始化完成', 'success')
+
+        // 更新状态
+        this.sdkStatus.unityLoaded = true
+        this.loadingProgress = 1
+        this.$message.success('Unity初始化成功')
+      } catch (error) {
+        console.error(error)
+        this.addLog(`SDK初始化失败: ${error.message}`, 'error')
+        this.$message.error(`SDK初始化失败: ${error.message}`)
+        this.loadingProgress = 0
+        throw error
+      }
+    },
+
+    // 初始化Avatar
+    async handleInitAvatar (params) {
+      try {
+        const response = await this.avatarAPI.initializeAvatar(
+          params.avatarCode || this.globalConfig.avatarCode,
+          AvatarCameraType.WHOLE
+        )
+
+        if (response.success) {
+          this.addLog('Avatar初始化成功', 'success')
+          this.sdkStatus.avatarLoaded = true
+          this.sdkStatus.canPlayMotion = true
+          this.sdkStatus.canBroadcast = true
+          this.sdkStatus.canGetMotion = true
+          this.sdkStatus.canControlBroadcast = true
+          this.sdkStatus.canControlCamera = true
+          this.$message.success('Avatar初始化成功')
+        } else {
+          this.addLog(`Avatar初始化失败: ${response.message}`, 'error')
+          this.$message.error(`Avatar初始化失败: ${response.message}`)
+        }
+      } catch (error) {
+        this.addLog(`Avatar初始化失败: ${error.message}`, 'error')
+        this.$message.error(`Avatar初始化失败: ${error.message}`)
+      }
+    },
+
+    // 播放动作
+    async handlePlayMotion (params) {
+      try {
+        const response = await this.avatarAPI.playMotion(params.clipCode, true)
+
+        if (response.success) {
+          this.addLog('动作播放成功', 'success')
+          if (response.motionId) {
+            this.addLog(`动作ID: ${response.motionId}`, 'info')
+          }
+          this.$message.success('动作播放成功')
+        } else {
+          this.addLog(`动作播放失败: ${response.message}`, 'error')
+          this.$message.error(`动作播放失败: ${response.message}`)
+        }
+      } catch (error) {
+        this.addLog(`动作播放失败: ${error.message}-${error.code}`, 'error')
+        this.$message.error(`动作播放失败: ${error.message}`)
+      }
+    },
+
+    // 文本播报
+    async handleTextBroadcast (params) {
+      try {
+        this.addLog('开始文本播报...', 'info')
+        await this.broadcastService.startBroadcast({
+          type: BroadcastType.TEXT,
+          humanCode: params.avatarCode || this.globalConfig.avatarCode,
+          text: params.text,
+          volume: params.volume,
+          voiceCode: params.voiceCode,
+          speed: params.speed,
+          isSubtitle: false
+        })
+        this.addLog('文本播报已开始', 'success')
+        this.$message.success('文本播报已开始')
+      } catch (error) {
+        this.addLog(`文本播报失败: ${error.message}`, 'error')
+        this.$message.error(`文本播报失败: ${error.message}`)
+      }
+    },
+
+    // 音频播报
+    async handleAudioBroadcast (params) {
+      try {
+        this.addLog('开始音频播报...', 'info')
+        await this.broadcastService.startBroadcast({
+          type: BroadcastType.AUDIO,
+          humanCode: params.avatarCode || this.globalConfig.avatarCode,
+          audioUrl: params.audioUrl,
+          text: params.audioText || '',
+          volume: params.volume || 1.0,
+          speed: params.speed,
+          isSubtitle: false
+        })
+        this.addLog('音频播报已开始', 'success')
+        this.$message.success('音频播报已开始')
+      } catch (error) {
+        this.addLog(`音频播报失败: ${error.message}`, 'error')
+        this.$message.error(`音频播报失败: ${error.message}`)
+      }
+    },
+
+    // 获取当前动作
+    async handleGetCurrentMotion (params) {
+      try {
+        const response = await this.avatarAPI.getCurrentMotion(params.getRemainingTime)
+        if (response.success) {
+          if (params.getRemainingTime) {
+            this.addLog(`当前动作编码: ${response.data.motionId || '无'}, 剩余时间: ${response.data.motionRemainingTime || 0}ms`, 'success')
+          } else {
+            this.addLog(`当前动作编码: ${response.data.motionId || '无'}`, 'success')
+          }
+        } else {
+          this.addLog(`获取动作失败: ${response.message}`, 'error')
+        }
+      } catch (error) {
+        this.addLog(`获取动作失败: ${error.message}`, 'error')
+      }
+    },
+
+    // 暂停播报
+    async handlePauseBroadcast () {
+      try {
+        await this.broadcastService.pauseBroadcast()
+        this.addLog('播报已暂停', 'success')
+        this.$message.success('播报已暂停')
+      } catch (error) {
+        this.addLog(`暂停播报失败: ${error.message}`, 'error')
+        this.$message.error(`暂停播报失败: ${error.message}`)
+      }
+    },
+
+    // 恢复播报
+    async handleResumeBroadcast () {
+      try {
+        await this.broadcastService.resumeBroadcast()
+        this.addLog('播报已恢复', 'success')
+        this.$message.success('播报已恢复')
+      } catch (error) {
+        this.addLog(`恢复播报失败: ${error.message}`, 'error')
+        this.$message.error(`恢复播报失败: ${error.message}`)
+      }
+    },
+
+    // 停止播报
+    async handleStopBroadcast () {
+      try {
+        await this.broadcastService.stopBroadcast()
+        this.addLog('播报已停止', 'success')
+        this.$message.success('播报已停止')
+      } catch (error) {
+        this.addLog(`停止播报失败: ${error.message}`, 'error')
+        this.$message.error(`停止播报失败: ${error.message}`)
+      }
+    },
+
+    // 设置预设镜头
+    async handleSetCameraPreset (params) {
+      try {
+        const cameraType = this.convertCameraPreset(params.preset)
+        const response = await this.avatarAPI.setCamera(cameraType)
+        if (response && response.success) {
+          this.addLog(`镜头已设置为${this.getCameraPresetName(params.preset)}`, 'success')
+          this.$message.success('镜头设置成功')
+        } else {
+          this.addLog(`镜头设置失败: ${response?.message || '未知错误'}`, 'error')
+          this.$message.error('镜头设置失败')
+        }
+      } catch (error) {
+        this.addLog(`镜头设置失败: ${error.message}`, 'error')
+        this.$message.error(`镜头设置失败: ${error.message}`)
+      }
+    },
+
+    // 转换镜头预设
+    convertCameraPreset (preset) {
+      const mapping = {
+        whole: AvatarCameraType.WHOLE,
+        half: AvatarCameraType.HALF,
+        face: AvatarCameraType.FACE
+      }
+      return mapping[preset] || AvatarCameraType.WHOLE
+    },
+
+    // 获取预设镜头名称
+    getCameraPresetName (preset) {
+      const names = {
+        whole: '全身',
+        half: '半身',
+        face: '近景'
+      }
+      return names[preset] || preset
+    },
+
+    // 卸载Avatar
+    async handleUnloadAvatar () {
+      try {
+        const response = await this.avatarAPI.unloadAvatar()
+        if (response.success) {
+          this.addLog('Avatar已卸载', 'success')
+          this.sdkStatus.avatarLoaded = false
+          this.sdkStatus.canPlayMotion = false
+          this.sdkStatus.canBroadcast = false
+          this.sdkStatus.canGetMotion = false
+          this.sdkStatus.canControlBroadcast = false
+          this.sdkStatus.canControlCamera = false
+          this.$message.success('Avatar已卸载')
+        } else {
+          this.addLog(`卸载失败: ${response.message}`, 'error')
+          this.$message.error(`卸载失败: ${response.message}`)
+        }
+      } catch (error) {
+        this.addLog(`卸载失败: ${error.message}`, 'error')
+        this.$message.error(`卸载失败: ${error.message}`)
+      }
+    },
+
+    // 销毁SDK实例
+    handleDestroySDK () {
+      try {
+        // 销毁播报服务
+        if (this.broadcastService) {
+          this.broadcastService.destroy()
+          this.broadcastService = null
+        }
+
+        // 销毁SDK
+        if (this.sdk) {
+          this.sdk.destroy()
+          this.sdk = null
+        }
+
+        this.avatarAPI = null
+        this.loadingProgress = 0
+
+        this.addLog('SDK 实例已销毁', 'warn')
+        this.$message.warning('SDK 实例已销毁')
+
+        // 重置状态
+        this.sdkStatus = {
+          unityLoaded: false,
+          avatarLoaded: false,
+          canPlayMotion: false,
+          canBroadcast: false,
+          canGetMotion: false,
+          canControlBroadcast: false,
+          canControlCamera: false
+        }
+
+        // 重新创建容器
+        const container = document.getElementById('unity-container')
+        if (container) {
+          container.innerHTML = '<div class="unity-tip"><i class="el-icon-monitor"></i><p>Unity 内容已销毁，可重新初始化</p></div>'
+        }
+      } catch (error) {
+        this.addLog(`销毁失败: ${error.message}`, 'error')
+        this.$message.error(`销毁失败: ${error.message}`)
+      }
+    },
+
+    // 添加日志
+    addLog (message, type = 'info') {
+      const log = {
+        time: new Date().toLocaleTimeString(),
+        message,
+        type
+      }
+      this.logs.push(log)
+
+      // 限制日志数量
+      if (this.logs.length > 100) {
+        this.logs.shift()
+      }
+    },
+
+    // 清除日志
+    clearLogs () {
+      this.logs = []
+      this.addLog('日志已清除', 'info')
+      this.$message.info('日志已清除')
+    },
+
+    // 检测移动端
+    checkMobile () {
+      this.isMobile = window.innerWidth <= 768
+    },
+
+    // 处理窗口大小变化
+    handleResize () {
+      this.checkMobile()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+// 使用Element-UI主题变量
+@import '~element-ui/lib/theme-chalk/index.css';
+
+// 全局样式
+html, body {
+  height: 100vh;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+ul,li
+{
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+#app {
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.app-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  .app-main {
+    display: flex;
+    padding: 20px;
+    background-color: #f5f7fa;
+    flex: 1;
+    flex-direction: column;
+
+    // 移动端优化
+    @media screen and (width <= 768px) {
+      min-height: calc(100vh - 120px); // 减去头部和底部的大致高度
+      padding: 10px;
+      flex: none; // 取消flex撑满，允许内容滚动
+    }
+  }
+}
+
+// 全局配置卡片
+.global-config-card {
+  margin-bottom: 20px;
+
+  .el-card__body {
+    padding: 15px;
+  }
+}
+
+// 主要内容区域
+.main-content {
+  margin-bottom: 20px;
+
+  // PC端布局
+  &:not(.mobile-layout) {
+    // 让主要内容区域撑满剩余空间
+    flex: 1;
+    display: flex;
+
+    // 确保el-row也能撑满高度
+    .el-row {
+      flex: 1;
+      display: flex;
+      align-items: stretch; // 确保所有列高度相同
+    }
+
+    // 让所有列都有相同的高度
+    .el-col {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  // 移动端布局
+  &.mobile-layout {
+    flex: none;
+
+    .mobile-panels {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      .mobile-panel-item {
+        width: 100%;
+
+        // 移动端面板高度优化
+        .control-panel,
+        .log-panel {
+          height: auto;
+
+          .el-card__body {
+            flex: none;
+          }
+        }
+
+        .api-tabs {
+          height: auto;
+
+          .el-tabs__content {
+            flex: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 控制面板
+.control-panel {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .el-card__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .api-tabs {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .el-tabs__content {
+      padding: 15px 0;
+      flex: 1;
+    }
+  }
+}
+
+// 日志面板
+.log-panel {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .el-card__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
+// 信息卡片
+.info-cards {
+  .el-card__body {
+    padding: 15px;
+  }
+}
+
+// 页脚
+.app-footer {
+  padding: 15px 0;
+  background-color: #fff;
+  border-top: 1px solid #e4e7ed;
+
+  .footer-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    color: #606266;
+  }
+}
+
+// 移动端优化
+@media screen and (width <= 768px) {
+  .mobile-panels {
+    .mobile-panel-item {
+      .api-tabs {
+        .el-tabs__header {
+          .el-tabs__nav-wrap {
+            .el-tabs__nav-scroll {
+              .el-tabs__nav {
+                .el-tabs__item {
+                  padding: 0 10px;
+                  font-size: 12px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式断点优化
+@media screen and (width <= 992px) {
+  .main-content:not(.mobile-layout) {
+    .el-row {
+      flex-direction: column; // 平板端也使用垂直布局
+    }
+
+    .el-col {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    // 平板端面板高度优化
+    .control-panel,
+    .log-panel {
+      height: auto;
+      min-height: 400px; // 设置最小高度
+    }
+  }
+}
+</style>