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

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

@@ -0,0 +1,962 @@
+<template>
+  <div id="app">
+    <div class="app-container">
+      <!-- 主要内容区域 -->
+      <div class="app-main">
+        <!-- 全局配置 -->
+        <el-card class="global-config-card" shadow="never">
+          <GlobalConfig
+            v-model="globalConfig"
+            @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">
+                <template #header>
+                  <div class="card-header">
+                    <span>API 测试面板</span>
+                    <el-tag type="info" size="small">SDK演示</el-tag>
+                  </div>
+                </template>
+
+                <!-- API选项卡 -->
+                <el-tabs v-model="activeTab" type="card" class="api-tabs">
+                  <el-tab-pane label="初始化" name="init">
+                    <InitAPI
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @init-avatar-with-unity="handleInitAvatarWithUnity"
+                    />
+                  </el-tab-pane>
+
+                  <el-tab-pane label="动作管理" name="motion">
+                    <MotionControlAPI
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @play-motion="handlePlayMotion"
+                      @get-current-motion="handleGetCurrentMotion"
+                    />
+                  </el-tab-pane>
+
+                  <el-tab-pane label="智能播报" name="text-broadcast">
+                    <BroadcastAPI
+                      :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">
+                    <CameraAPI
+                      :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">
+              <UnityPreview
+                :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">
+                <template #header>
+                  <div class="card-header">
+                    <span>操作日志</span>
+                    <el-link
+                      size="small"
+                      @click="clearLogs"
+                      :icon="Delete"
+                    >
+                      清空
+                    </el-link>
+                  </div>
+                </template>
+
+                <LogPanel
+                  :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">
+                <template #header>
+                  <div class="card-header">
+                    <span>API 测试面板</span>
+                    <el-tag type="info" size="small">SDK演示</el-tag>
+                  </div>
+                </template>
+
+                <!-- API选项卡 -->
+                <el-tabs v-model="activeTab" type="card" class="api-tabs">
+                  <el-tab-pane label="初始化" name="init">
+                    <InitAPI
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @init-avatar-with-unity="handleInitAvatarWithUnity"
+                    />
+                  </el-tab-pane>
+
+                  <el-tab-pane label="动作管理" name="motion">
+                    <MotionControlAPI
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @play-motion="handlePlayMotion"
+                      @get-current-motion="handleGetCurrentMotion"
+                    />
+                  </el-tab-pane>
+
+                  <el-tab-pane label="智能播报" name="text-broadcast">
+                    <BroadcastAPI
+                      :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">
+                    <CameraAPI
+                      :sdk-status="sdkStatus"
+                      :global-config="globalConfig"
+                      @set-camera-preset="handleSetCameraPreset"
+                    />
+                  </el-tab-pane>
+                </el-tabs>
+              </el-card>
+            </div>
+
+            <!-- Unity 预览 -->
+            <div class="mobile-panel-item">
+              <UnityPreview
+                :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">
+                <template #header>
+                  <div class="card-header">
+                    <span>操作日志</span>
+                    <el-link
+                      size="small"
+                      @click="clearLogs"
+                      :icon="Delete"
+                    >
+                      清空
+                    </el-link>
+                  </div>
+                </template>
+
+                <LogPanel
+                  :logs="logs"
+                  @clear-logs="clearLogs"
+                />
+              </el-card>
+            </div>
+          </div>
+        </div>
+
+        <!-- 信息卡片 -->
+        <el-card class="info-cards" shadow="never">
+          <info-cards />
+        </el-card>
+      </div>
+    </div>
+
+    <!-- 页脚 -->
+    <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 setup lang="ts">
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { Delete } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+// 引入最新版SDK（单一入口类方式）
+import { ZEEAvatarSDK, AvatarCameraType, BroadcastType } from '@zeewain/3d-avatar-sdk';
+import type { IAvatarSDKConfig, IBroadcastParams } 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';
+
+import type { IGlobalConfig } from './types';
+
+interface ISDKStatus {
+  unityLoaded: boolean;
+  avatarLoaded: boolean;
+  canPlayMotion: boolean;
+  canBroadcast: boolean;
+  canGetMotion: boolean;
+  canControlBroadcast: boolean;
+  canControlCamera: boolean;
+}
+
+interface ILogEntry {
+  time: string;
+  message: string;
+  type: 'info' | 'success' | 'warning' | 'error';
+}
+
+// 响应式数据
+const activeTab = ref('init');
+const isMobile = ref(false);
+const loadingProgress = ref(0);
+
+// 全局配置
+const globalConfig = reactive<IGlobalConfig>({
+  token: '',
+  avatarCode: '',
+  env: 'dev',
+  webglPath: './assets/Build'
+});
+
+// SDK状态
+const sdkStatus = reactive<ISDKStatus>({
+  unityLoaded: false,
+  avatarLoaded: false,
+  canPlayMotion: false,
+  canBroadcast: false,
+  canGetMotion: false,
+  canControlBroadcast: false,
+  canControlCamera: false
+});
+
+// 操作日志
+const logs = reactive<ILogEntry[]>([
+  { time: new Date().toLocaleTimeString(), message: '系统准备就绪，请选择API进行测试', type: 'info' },
+  { time: new Date().toLocaleTimeString(), message: '支持移动端响应式布局', type: 'info' }
+]);
+
+// SDK实例
+const sdk = ref<ZEEAvatarSDK | null>(null);
+
+// 初始化SDK配置
+function initializeSDKConfig(): ZEEAvatarSDK | null {
+  if (!globalConfig.token) {
+    addLog('请先配置Token', 'warning');
+    return null;
+  }
+
+  const config: IAvatarSDKConfig = {
+    // Unity构建文件配置
+    loaderUrl: `${globalConfig.webglPath}/webgl.loader.js`,
+    dataUrl: `${globalConfig.webglPath}/webgl.data.unityweb`,
+    frameworkUrl: `${globalConfig.webglPath}/webgl.framework.js.unityweb`,
+    codeUrl: `${globalConfig.webglPath}/webgl.wasm.unityweb`,
+    containerId: 'unity-container',
+
+    // 认证配置
+    token: globalConfig.token,
+    env: globalConfig.env,
+    apiUrl: globalConfig.apiBaseUrl,
+    resourcesUrl: globalConfig.resourcesUrl || undefined,
+
+    // 待机动作列表：比心，左手指示（低）
+    idleMotionList: globalConfig.idleMotionListString?.split(',').filter(item => item.trim()) || [],
+
+    // 进度回调
+    onProgress: (progress: number) => {
+      loadingProgress.value = progress;
+      if(progress === 1 )
+      {
+       sdkStatus.unityLoaded = true;
+      }
+       addLog(`加载进度: ${Math.round(progress * 100)}%`, 'info');
+    },
+
+    // 播报回调
+    broadcastCallbacks: {
+      onStart: () => {
+        addLog('播报开始', 'info');
+      },
+      onFinish: () => {
+        addLog('播报完成', 'success');
+      },
+      onError: (error:any) => {
+        addLog(`播报失败: ${error.message}`, 'error');
+      },
+      onPause: () => {
+        addLog('播报暂停', 'warning');
+      },
+      onResume: () => {
+        addLog('播报恢复', 'success');
+      },
+      onStop: () => {
+        addLog('播报停止', 'error');
+      },
+    }
+  };
+
+  sdk.value = new ZEEAvatarSDK(config);
+  return sdk.value;
+}
+
+// 从本地存储加载配置
+function loadStoredConfig(): void {
+  const config = localStorage.getItem('zee_config');
+  if (config) {
+    const configObj = JSON.parse(config);
+    Object.assign(globalConfig, configObj);
+  }
+}
+
+// 保存全局配置
+function handleSaveConfig(): void {
+
+  localStorage.setItem('zee_config', JSON.stringify(globalConfig));
+
+  addLog('全局配置已保存', 'success');
+  ElMessage.success('配置保存成功');
+}
+
+// 应用配置到所有接口
+function handleApplyAll(): void {
+  addLog('配置已应用到所有接口', 'info');
+  ElMessage.info('配置已应用到所有接口');
+}
+
+// 初始化Avatar（包含Unity实例化）
+async function handleInitAvatarWithUnity(params: { avatarCode?: string }): Promise<void> {
+  try {
+    ElMessage.info('开始初始化Unity和Avatar...');
+
+    // 重新初始化SDK配置（包含最新token）
+    if (!initializeSDKConfig()) {
+      return;
+    }
+
+    // 初始化Avatar
+    await handleInitAvatar(params);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`初始化失败: ${message}`, 'error');
+    ElMessage.error(`初始化失败: ${message}`);
+  }
+}
+
+// 初始化Avatar
+async function handleInitAvatar(params: { avatarCode?: string }): Promise<void> {
+  if (!sdk.value) return;
+
+  try {
+    addLog('开始初始化 Avatar...', 'info');
+
+    // 使用新的SDK单一入口类方式初始化Avatar
+    const response = await sdk.value.initializeAvatar(
+      params.avatarCode || globalConfig.avatarCode,
+      AvatarCameraType.WHOLE
+    );
+
+    if (response.success) {
+      addLog('Avatar初始化成功', 'success');
+
+      // 更新所有状态
+      sdkStatus.avatarLoaded = true;
+      sdkStatus.canPlayMotion = true;
+      sdkStatus.canBroadcast = true;
+      sdkStatus.canGetMotion = true;
+      sdkStatus.canControlBroadcast = true;
+      sdkStatus.canControlCamera = true;
+
+      loadingProgress.value = 1;
+      ElMessage.success('Avatar初始化成功');
+    } else {
+      addLog(`Avatar初始化失败: ${response.message}`, 'error');
+      ElMessage.error(`Avatar初始化失败: ${response.message}`);
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`Avatar初始化失败: ${message}`, 'error');
+    ElMessage.error(`Avatar初始化失败: ${message}`);
+  }
+}
+
+// 播放动作
+async function handlePlayMotion(params: { clipCode: string }): Promise<void> {
+  if (!sdk.value) return;
+
+  try {
+    const response = await sdk.value.playMotion(params.clipCode);
+
+    if (response.success) {
+      addLog('动作播放成功', 'success');
+      if (response.data?.motionId) {
+        addLog(`动作ID: ${response.data.motionId}`, 'info');
+      }
+      ElMessage.success('动作播放成功');
+    } else {
+      addLog(`动作播放失败: ${response.message}`, 'error');
+      ElMessage.error(`动作播放失败: ${response.message}`);
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`动作播放失败: ${message}`, 'error');
+    ElMessage.error(`动作播放失败: ${message}`);
+  }
+}
+
+// 文本播报
+async function handleTextBroadcast(params: {
+  text: string;
+  avatarCode?: string;
+  volume?: number;
+  voiceCode?: string;
+  speed?: number;
+  broadcastMotionString?: string;
+}): Promise<void> {
+  if (!sdk.value) return;
+
+  try {
+    addLog('开始文本播报...', 'info');
+
+    const broadcastParams: IBroadcastParams = {
+      type: BroadcastType.TEXT,
+      humanCode: params.avatarCode || globalConfig.avatarCode,
+      text: params.text,
+      volume: params.volume ?? 100,
+      voiceCode: params.voiceCode || '',
+      speed: params.speed ?? 1,
+      isSubtitle: false,
+      motionList: params.broadcastMotionString?.split(',').filter(item => item.trim()) || [],
+      motionPlayMode: 'random'
+    };
+
+    await sdk.value.startBroadcast(broadcastParams);
+    addLog('文本播报已开始', 'success');
+    // ElMessage.success('文本播报已开始');
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`文本播报失败: ${message}`, 'error');
+    ElMessage.error(`文本播报失败: ${message}`);
+  }
+}
+
+// 音频播报
+async function handleAudioBroadcast(params: {
+  audioUrl: string;
+  avatarCode?: string;
+  volume?: number;
+  speed?: number;
+  audioText?: string;
+  broadcastMotionString?: string;
+}): Promise<void> {
+  if (!sdk.value) return;
+
+  try {
+    addLog('开始音频播报...', 'info');
+
+    const broadcastParams: IBroadcastParams = {
+      type: BroadcastType.AUDIO,
+      humanCode: params.avatarCode || globalConfig.avatarCode,
+      audioUrl: params.audioUrl,
+      // text: params.audioText || '',
+      volume: params.volume || 1.0,
+      speed: params.speed || 1.0,
+      isSubtitle: false,
+      motionList: params.broadcastMotionString?.split(',').filter(item => item.trim()) || [],
+      motionPlayMode: 'random'
+    };
+
+    await sdk.value.startBroadcast(broadcastParams);
+    addLog('音频播报已开始', 'success');
+    ElMessage.success('音频播报已开始');
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`音频播报失败: ${message}`, 'error');
+    ElMessage.error(`音频播报失败: ${message}`);
+  }
+}
+
+// 获取当前动作
+async function handleGetCurrentMotion(params: { getRemainingTime?: boolean }): Promise<void> {
+  if (!sdk.value) return;
+
+  try {
+    const response = await sdk.value.getCurrentMotion(params.getRemainingTime);
+
+    if (response.success) {
+      if (params.getRemainingTime) {
+        addLog(`当前动作编码: ${response.data?.motionId || '无'}, 剩余时间: ${response.data?.motionRemainingTime || 0}ms`, 'success');
+      } else {
+        addLog(`当前动作编码: ${response.data?.motionId || '无'}`, 'success');
+      }
+    } else {
+      addLog(`获取动作失败: ${response.message}`, 'error');
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`获取动作失败: ${message}`, 'error');
+  }
+}
+
+// 暂停播报
+async function handlePauseBroadcast(): Promise<void> {
+  if (!sdk.value) return;
+
+  try {
+    await sdk.value.pauseBroadcast(true);
+    addLog('播报已暂停', 'success');
+    ElMessage.success('播报已暂停');
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`暂停播报失败: ${message}`, 'error');
+    ElMessage.error(`暂停播报失败: ${message}`);
+  }
+}
+
+// 恢复播报
+async function handleResumeBroadcast(): Promise<void> {
+  if (!sdk.value) return;
+
+  try {
+    await sdk.value.resumeBroadcast();
+    addLog('播报已恢复', 'success');
+    ElMessage.success('播报已恢复');
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`恢复播报失败: ${message}`, 'error');
+    ElMessage.error(`恢复播报失败: ${message}`);
+  }
+}
+
+// 停止播报
+async function handleStopBroadcast(): Promise<void> {
+  if (!sdk.value) return;
+
+  try {
+    await sdk.value.stopBroadcast();
+    addLog('播报已停止', 'success');
+    ElMessage.success('播报已停止');
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`停止播报失败: ${message}`, 'error');
+    ElMessage.error(`停止播报失败: ${message}`);
+  }
+}
+
+// 设置预设镜头
+async function handleSetCameraPreset(params: { preset: string }): Promise<void> {
+  if (!sdk.value) return;
+
+  try {
+    const cameraType = convertCameraPreset(params.preset);
+    const response = await sdk.value.setCamera(cameraType);
+
+    if (response && response.success) {
+      addLog(`镜头已设置为${getCameraPresetName(params.preset)}`, 'success');
+      ElMessage.success('镜头设置成功');
+    } else {
+      addLog(`镜头设置失败: ${response?.message || '未知错误'}`, 'error');
+      ElMessage.error('镜头设置失败');
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`镜头设置失败: ${message}`, 'error');
+    ElMessage.error(`镜头设置失败: ${message}`);
+  }
+}
+
+// 转换镜头预设
+function convertCameraPreset(preset: string): AvatarCameraType {
+  const mapping = {
+    whole: AvatarCameraType.WHOLE,
+    half: AvatarCameraType.HALF,
+    face: AvatarCameraType.FACE
+  };
+  return mapping[preset as keyof typeof mapping] || AvatarCameraType.WHOLE;
+}
+
+// 获取预设镜头名称
+function getCameraPresetName(preset: string): string {
+  const names = {
+    whole: '全身',
+    half: '半身',
+    face: '近景'
+  };
+  return names[preset as keyof typeof names] || preset;
+}
+
+// 卸载Avatar
+async function handleUnloadAvatar(): Promise<void> {
+  if (!sdk.value) return;
+
+  try {
+    const response = await sdk.value.unloadAvatar();
+
+    if (response.success) {
+      addLog('Avatar已卸载', 'success');
+
+      // 重置状态
+      sdkStatus.avatarLoaded = false;
+      sdkStatus.unityLoaded = false;
+      sdkStatus.canPlayMotion = false;
+      sdkStatus.canBroadcast = false;
+      sdkStatus.canGetMotion = false;
+      sdkStatus.canControlBroadcast = false;
+      sdkStatus.canControlCamera = false;
+      loadingProgress.value = 0;
+
+      ElMessage.success('Avatar已卸载');
+    } else {
+      addLog(`卸载失败: ${response.message}`, 'error');
+      ElMessage.error(`卸载失败: ${response.message}`);
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`卸载失败: ${message}`, 'error');
+    ElMessage.error(`卸载失败: ${message}`);
+  }
+}
+
+// 销毁SDK实例
+function handleDestroySDK(){
+  try {
+    // 销毁SDK
+    if (sdk.value) {
+      sdk.value.destroy();
+      sdk.value = null;
+    }
+
+    addLog('SDK 实例已销毁', 'warning');
+    ElMessage.warning('SDK 实例已销毁');
+
+    // 重置状态
+    sdkStatus.unityLoaded = false;
+    sdkStatus.avatarLoaded = false;
+    sdkStatus.canPlayMotion = false;
+    sdkStatus.canBroadcast = false;
+    sdkStatus.canGetMotion = false;
+    sdkStatus.canControlBroadcast = false;
+    sdkStatus.canControlCamera = false;
+    loadingProgress.value = 0;
+
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    addLog(`销毁失败: ${message}`, 'error');
+    ElMessage.error(`销毁失败: ${message}`);
+  }
+}
+
+// 添加日志
+function addLog(message: string, type: ILogEntry['type'] = 'info'): void {
+  const log: ILogEntry = {
+    time: new Date().toLocaleTimeString(),
+    message,
+    type
+  };
+  logs.push(log);
+
+  // 限制日志数量
+  if (logs.length > 100) {
+    logs.shift();
+  }
+}
+
+// 清除日志
+function clearLogs(): void {
+  logs.splice(0, logs.length);
+  addLog('日志已清除', 'info');
+  ElMessage.info('日志已清除');
+}
+
+// 检测移动端
+function checkMobile(): void {
+  isMobile.value = window.innerWidth <= 768;
+}
+
+// 处理窗口大小变化
+function handleResize(): void {
+  checkMobile();
+}
+
+// 生命周期钩子
+onMounted(() => {
+  loadStoredConfig();
+  checkMobile();
+  addLog('测试页面已加载（SDK重构版）', 'info');
+  addLog(`浏览器: ${navigator.userAgent.split(' ')[0]}`, 'info');
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  // 清理监听器
+  window.removeEventListener('resize', handleResize);
+
+  // 清理SDK资源
+  if (sdk.value) {
+    sdk.value.destroy();
+  }
+});
+</script>
+
+<style lang="scss">
+// 使用Element Plus主题变量
+@import "element-plus/theme-chalk/index.css";
+
+// 全局样式
+html,
+body {
+  width: 100vw;
+  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 {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  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;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .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>