Live2D模型集成操作文档

一、功能说明

本文档详细介绍如何在只调用模型显示的项目中集成以下功能：

Live2D模型显示
语音播报功能（含音波动画）
可拖拽移动位置的组件
侧边导航控制面板

二、所需文件

核心组件文件

文件名	路径	功能说明
`Live2D.vue`	`src/components/Live2D.vue`	集成了所有功能的Live2D主组件
`eventBus.js`	`src/utils/eventBus.js`	事件总线，用于组件间通信

依赖文件

文件名	路径	功能说明
`L2Dwidget.min.js`	外部CDN或本地	Live2D核心库

三、安装步骤

1. 创建文件结构

在目标项目中创建以下目录结构：

src/
├── components/
│   └── Live2D.vue     # 主Live2D组件
└── utils/
    └── eventBus.js     # 事件总线

2. 复制核心文件

2.1 创建 eventBus.js

// src/utils/eventBus.js
import Vue from 'vue'

// 创建事件总线实例
export const EventBus = new Vue()

// 定义事件名称常量
export const EVENTS = {
  SHOW_LIVE2D_TIP: 'showLive2DTip',
  CLOSE_LIVE2D: 'closeLive2D',
  SHOW_LIVE2D: 'show-live2d',
  TOGGLE_LIVE2D: 'toggle-live2d',
  SPEAK_START: 'speak_start',
  SPEAK_END: 'speak_end',
  SPEAK_PAUSE: 'speak_pause',
  SPEAK_RESUME: 'speak_resume',
};

2.2 创建 Live2D.vue 组件

<template>
  <div>
    <!-- 控制按钮触发器（固定在左下角的小图标） -->
    <div
      class="live2d-controls-trigger"
      :class="{ 'controls-hidden': controlsHidden }"
      @click="toggleControls"
      @mouseenter="onMouseEnterTrigger"
      @mouseleave="onMouseLeaveTrigger"
    >
      <div class="trigger-icon">
        <i v-if="controlsHidden">▶</i>
        <i v-else>◀</i>
      </div>
      <div class="trigger-tip" v-if="showTriggerTip">
        {{ controlsHidden ? '显示控制面板' : '隐藏控制面板' }}
      </div>
    </div>

    <!-- 控制按钮面板 -->
    <div
      class="live2d-controls-panel"
      :class="{ 'panel-hidden': controlsHidden }"
      @mouseenter="onMouseEnterPanel"
      @mouseleave="onMouseLeavePanel"
    >
      <div class="panel-header">
        <span class="panel-title">助手控制</span>
        <span class="panel-close" @click.stop="toggleControls">×</span>
      </div>

      <div class="panel-body">
        <button @click="toggleLive2D" class="control-btn">
          <i class="btn-icon">{{ closed ? '👁️' : '👁️‍🗨️' }}</i>
          <span>{{ closed ? '显示助手' : '隐藏助手' }}</span>
        </button>

        <button @click="resetPosition" class="control-btn" v-if="!closed">
          <i class="btn-icon">📍</i>
          <span>重置位置</span>
        </button>

        <button @click="toggleTalk" class="control-btn">
          <i class="btn-icon">{{ autoTalk ? '🔇' : '💬' }}</i>
          <span>{{ autoTalk ? '关闭提示' : '开启提示' }}</span>
        </button>

        <!-- 语音播报控制按钮 -->
        <button @click="toggleAudioAnimation" class="control-btn">
          <i class="btn-icon">{{ showAudioAnimation ? '🎵' : '🔇' }}</i>
          <span>{{ showAudioAnimation ? '关闭音效' : '开启音效' }}</span>
        </button>

        <!-- 语音模式切换 -->
        <button @click="toggleSpeechMode" class="control-btn">
          <i class="btn-icon">{{ speechMode === 'sync' ? '🎭' : '🗣️' }}</i>
          <span>{{ speechMode === 'sync' ? '智能同步' : '简单模式' }}</span>
        </button>

        <button @click="testSmartSpeech" class="control-btn">
          <i class="btn-icon">🧠</i>
          <span>测试播报</span>
        </button>

        <div class="drag-status" v-if="dragging">
          <i class="status-icon">✊</i>
          <span>拖拽中...</span>
        </div>
      </div>

      <div class="panel-footer">
        <small>长按角色可拖拽</small>
      </div>
    </div>

    <!-- Live2D 容器 -->
    <div
      ref="live2dContainer"
      class="live2d-container"
      :style="containerStyle"
      v-show="!closed"
      @mousedown="startDrag"
      @touchstart="startDrag"
      @dblclick="toggleLive2D"
    >
      <!-- 语音播报状态指示器 -->
      <div v-if="isSpeaking && showAudioAnimation" class="speech-status-indicator">
        <div class="speech-wave">
          <div class="wave-bar" :style="{ height: waveHeight1 + 'px' }"></div>
          <div class="wave-bar" :style="{ height: waveHeight2 + 'px' }"></div>
          <div class="wave-bar" :style="{ height: waveHeight3 + 'px' }"></div>
          <div class="wave-bar" :style="{ height: waveHeight4 + 'px' }"></div>
        </div>
        <span class="speech-text">播报中...</span>
      </div>

      <!-- 拖拽提示 -->
      <div v-if="showDragHint" class="live2d-drag-hint">
        ↕ 拖拽移动位置
      </div>

      <!-- 提示文字 -->
      <div v-if="tipVisible && autoTalk" class="live2d-tip">{{ tipMessage }}</div>
    </div>
  </div>
</template>

<script>
import { EventBus, EVENTS } from "@/utils/eventBus";

export default {
  name: "Live2D",
  data() {
    return {
      widgetLoaded: false,
      tipVisible: false,
      tipMessage: "",
      tipTimeout: null,
      closed: false,

      // 拖拽相关
      dragging: false,
      dragStartX: 0,
      dragStartY: 0,
      initialX: 0,
      initialY: 0,

      // 位置
      position: {
        x: 20,
        y: 20,
      },

      // 拖拽提示
      showDragHint: true,
      dragHintTimeout: null,

      // Live2D 实例
      live2dInstance: null,
      live2dWidget: null,

      // 控制面板状态
      controlsHidden: true,  // 默认隐藏
      panelHovered: false,
      triggerHovered: false,
      autoHideTimer: null,

      // 自动提示
      autoTalk: true,

      // 触发器提示
      showTriggerTip: false,
      triggerTipTimer: null,

      // 语音播报相关
      isSpeaking: false,
      showAudioAnimation: true,
      speechListenersAdded: false,
      animationInterval: null,

      // 语音波形参数
      waveHeight1: 5,
      waveHeight2: 8,
      waveHeight3: 6,
      waveHeight4: 7,
      waveInterval: null,

      // 语音强度（用于控制波形高度）
      speechIntensity: 0.5,

      // 语音模式
      speechMode: 'sync', // 'simple' 或 'sync'
      
      // 语音合成
      speechSynthesis: null,
      currentSpeech: null,
      speechQueue: [],
      
      // 动作映射表
      motionMap: {
        idle: ['idle'],
        talk_normal: ['01', '02', '03'],
        talk_excited: ['06', '07'],
        talk_question: ['03', '09'],
        happy: ['04', '09'],
        surprised: ['05', '08'],
        thinking: ['02', '03'],
        nod: ['01', '04'],
        shake: ['02', '08'],
        greeting: ['01', '04', '09']
      },
      
      // 当前动作状态
      currentMotionGroup: 'idle',
      currentMotionIndex: 0,
      motionInterval: null,
      
      // 动作优先级
      motionPriority: {
        idle: 0,
        talk_normal: 1,
        thinking: 1,
        question: 2,
        talk_excited: 2,
        happy: 3,
        surprised: 3,
        nod: 1,
        shake: 1,
        greeting: 2
      },
      
      // 情绪关键词
      emotionKeywords: {
        happy: ['开心', '高兴', '喜欢', '很棒', '很好', '成功', '优秀', '完美', '感谢'],
        surprised: ['惊讶', '突然', '意外', '竟然', '居然', '奇怪', '异常', '特别'],
        thinking: ['可能', '或许', '大概', '应该', '需要', '考虑', '分析', '建议', '方案'],
        question: ['吗', '呢', '？', '什么', '为什么', '如何', '怎么', '是否', '能否'],
        confident: ['一定', '肯定', '确定', '必须', '保证', '确保'],
        concerned: ['担心', '注意', '小心', '预防', '避免', '危险', '问题', '困难']
      }
    };
  },
  computed: {
    containerStyle() {
      return {
        position: "fixed",
        left: `${this.position.x}px`,
        top: `${this.position.y}px`,
        width: "150px",
        height: "300px",
        zIndex: 9999,
        cursor: this.dragging ? "grabbing" : "grab",
        pointerEvents: "auto",
      };
    },
  },
  mounted() {
    this.loadSavedSettings();
    this.initLive2D();
    this.setupEventListeners();
    this.initSpeechSystem();

    // 显示拖拽提示
    this.dragHintTimeout = setTimeout(() => {
      this.showDragHint = false;
    }, 5000);

    // 监听窗口大小变化，防止拖出边界
    window.addEventListener('resize', this.checkBoundaries);

    // 显示触发器提示
    this.showTriggerTip = true;
    this.triggerTipTimer = setTimeout(() => {
      this.showTriggerTip = false;
    }, 3000);
  },
  beforeUnmount() {
    this.removeEventListeners();
    window.removeEventListener('resize', this.checkBoundaries);

    if (this.dragHintTimeout) clearTimeout(this.dragHintTimeout);
    if (this.autoHideTimer) clearTimeout(this.autoHideTimer);
    if (this.triggerTipTimer) clearTimeout(this.triggerTipTimer);
    if (this.animationInterval) clearInterval(this.animationInterval);
    if (this.waveInterval) clearInterval(this.waveInterval);

    if (this.live2dInstance && window.L2Dwidget) {
      try {
        window.L2Dwidget.destroy();
      } catch (e) {
        console.warn("清理Live2D实例时出错:", e);
      }
    }
  },
  methods: {
    loadSavedSettings() {
      try {
        // 加载位置
        const savedPos = localStorage.getItem('live2d_position');
        if (savedPos) {
          const pos = JSON.parse(savedPos);
          this.position.x = pos.x;
          this.position.y = pos.y;
        }

        // 加载显示状态
        const savedVisible = localStorage.getItem('live2d_visible');
        if (savedVisible !== null) {
          this.closed = savedVisible === 'false';
        }

        // 加载控制面板状态
        const savedControls = localStorage.getItem('live2d_controls_hidden');
        if (savedControls !== null) {
          this.controlsHidden = savedControls === 'true';
        }

        // 加载自动提示状态
        const savedAutoTalk = localStorage.getItem('live2d_auto_talk');
        if (savedAutoTalk !== null) {
          this.autoTalk = savedAutoTalk === 'true';
        }

        // 加载音效动画状态
        const savedAudioAnimation = localStorage.getItem('live2d_audio_animation');
        if (savedAudioAnimation !== null) {
          this.showAudioAnimation = savedAudioAnimation === 'true';
        }

        // 加载语音模式
        const savedSpeechMode = localStorage.getItem('live2d_speech_mode');
        if (savedSpeechMode !== null) {
          this.speechMode = savedSpeechMode;
        }
      } catch (e) {
        console.warn('加载保存的设置失败:', e);
      }
    },

    saveSettings() {
      try {
        localStorage.setItem('live2d_position', JSON.stringify(this.position));
        localStorage.setItem('live2d_visible', JSON.stringify(!this.closed));
        localStorage.setItem('live2d_controls_hidden', JSON.stringify(this.controlsHidden));
        localStorage.setItem('live2d_auto_talk', JSON.stringify(this.autoTalk));
        localStorage.setItem('live2d_audio_animation', JSON.stringify(this.showAudioAnimation));
        localStorage.setItem('live2d_speech_mode', this.speechMode);
      } catch (e) {
        console.warn('保存设置失败:', e);
      }
    },

    setupEventListeners() {
      EventBus.$on(EVENTS.SHOW_LIVE2D_TIP, this.showTip);
      EventBus.$on(EVENTS.CLOSE_LIVE2D, this.closeLive2D);
      EventBus.$on(EVENTS.SHOW_LIVE2D, this.showLive2D);
      EventBus.$on(EVENTS.SPEAK_START, this.onSpeakStart);
      EventBus.$on(EVENTS.SPEAK_END, this.onSpeakEnd);
      EventBus.$on(EVENTS.SPEAK_PAUSE, this.onSpeakPause);
      EventBus.$on(EVENTS.SPEAK_RESUME, this.onSpeakResume);
    },

    removeEventListeners() {
      EventBus.$off(EVENTS.SHOW_LIVE2D_TIP, this.showTip);
      EventBus.$off(EVENTS.CLOSE_LIVE2D, this.closeLive2D);
      EventBus.$off(EVENTS.SHOW_LIVE2D, this.showLive2D);
      EventBus.$off(EVENTS.SPEAK_START, this.onSpeakStart);
      EventBus.$off(EVENTS.SPEAK_END, this.onSpeakEnd);
      EventBus.$off(EVENTS.SPEAK_PAUSE, this.onSpeakPause);
      EventBus.$off(EVENTS.SPEAK_RESUME, this.onSpeakResume);
    },

    // 初始化语音系统
    initSpeechSystem() {
      if ('speechSynthesis' in window) {
        this.speechSynthesis = window.speechSynthesis;
        this.speechSynthesis.onvoiceschanged = () => {
          console.log('语音引擎已就绪');
        };
      } else {
        console.warn('浏览器不支持语音合成');
        this.speechMode = 'simple';
      }
    },

    // 语音播报开始
    onSpeakStart() {
      if (!this.showAudioAnimation) return;

      this.isSpeaking = true;
      this.speechIntensity = 0.5;
      this.startWaveAnimation();
    },

    // 语音播报结束
    onSpeakEnd() {
      this.isSpeaking = false;
      this.speechIntensity = 0;

      if (this.waveInterval) {
        clearInterval(this.waveInterval);
        this.waveInterval = null;
      }
    },

    // 开始波形动画
    startWaveAnimation() {
      if (this.waveInterval) clearInterval(this.waveInterval);

      this.waveInterval = setInterval(() => {
        if (this.isSpeaking) {
          // 根据语音强度调整波形高度
          const baseHeight = 5;
          const intensityMultiplier = this.speechIntensity * 10;

          // 随机生成一些波动，模拟语音强度变化
          this.speechIntensity = 0.5 + Math.random() * 0.5;

          this.waveHeight1 = baseHeight + intensityMultiplier * (0.5 + Math.random() * 0.5);
          this.waveHeight2 = baseHeight + intensityMultiplier * (0.7 + Math.random() * 0.3);
          this.waveHeight3 = baseHeight + intensityMultiplier * (0.6 + Math.random() * 0.4);
          this.waveHeight4 = baseHeight + intensityMultiplier * (0.8 + Math.random() * 0.2);
        } else {
          // 逐渐减小波形
          this.waveHeight1 = Math.max(0, this.waveHeight1 - 0.5);
          this.waveHeight2 = Math.max(0, this.waveHeight2 - 0.5);
          this.waveHeight3 = Math.max(0, this.waveHeight3 - 0.5);
          this.waveHeight4 = Math.max(0, this.waveHeight4 - 0.5);

          if (this.waveHeight1 <= 0 && this.waveHeight2 <= 0 &&
              this.waveHeight3 <= 0 && this.waveHeight4 <= 0) {
            clearInterval(this.waveInterval);
            this.waveInterval = null;
          }
        }
      }, 150);
    },

    // 切换音效动画
    toggleAudioAnimation() {
      this.showAudioAnimation = !this.showAudioAnimation;
      this.saveSettings();

      if (this.showAudioAnimation) {
        this.showTip("已开启音效动画", 2000);
      } else {
        this.isSpeaking = false;
        if (this.waveInterval) {
          clearInterval(this.waveInterval);
          this.waveInterval = null;
        }
        this.showTip("已关闭音效动画", 2000);
      }
    },

    // 切换语音模式
    toggleSpeechMode() {
      this.speechMode = this.speechMode === 'sync' ? 'simple' : 'sync';
      this.showTip(`已切换到${this.speechMode === 'sync' ? '智能同步' : '简单'}模式`, 2000);
      this.saveSettings();
    },

    // 测试语音播报
    testSmartSpeech() {
      const testTexts = [
        "您好！我是智慧农业助手，我可以帮您分析病虫害情况。",
        "这是什么植物？看起来需要补充一些营养元素。",
        "太神奇了！这个识别结果非常准确！",
        "您认为我们应该如何预防这种情况再次发生呢？",
        "让我想一想...这个问题可能需要更深入的分析。",
        "哇！这个检测结果真是令人惊讶！"
      ];
      
      const randomText = testTexts[Math.floor(Math.random() * testTexts.length)];
      this.startSpeaking(randomText);
    },

    // 开始语音播报
    startSpeaking(text) {
      if (!this.autoTalk || this.closed) return;
      if (this.isSpeaking) {
        this.speechQueue.push(text);
        return;
      }
      
      this.isSpeaking = true;
      
      // 分析文本情绪并选择动作
      const emotion = this.analyzeEmotion(text);
      this.selectMotionByEmotion(emotion);
      
      if (this.speechMode === 'sync') {
        // 智能同步模式 - 模拟语音分析
        this.startIntelligentSpeech(text, emotion);
      } else {
        // 简单模式
        this.startSimpleSpeech(text);
      }
      
      // 启动语音波形动画
      this.startWaveAnimation();
    },

    // 简单语音播报
    startSimpleSpeech(text) {
      // 创建语音实例
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = 'zh-CN';
      utterance.rate = 1.0;
      utterance.pitch = 1.0;
      
      // 语音开始
      utterance.onstart = () => {
        console.log('开始语音播报:', text.substring(0, 50) + '...');
      };
      
      // 语音结束
      utterance.onend = () => {
        console.log('语音播报结束');
        this.stopSpeaking();
      };
      
      // 错误处理
      utterance.onerror = (event) => {
        console.error('语音播报出错:', event);
        this.stopSpeaking();
      };
      
      // 保存当前语音实例
      this.currentSpeech = utterance;
      
      // 开始播报
      this.speechSynthesis.speak(utterance);
    },

    // 智能语音播报
    startIntelligentSpeech(text, emotion) {
      const words = text.split('');
      let index = 0;
      const wordDuration = 200; // 每个字大约200ms
      
      const speakNext = () => {
        if (!this.isSpeaking || index >= words.length) {
          this.stopSpeaking();
          return;
        }
        
        const char = words[index];
        
        // 根据字符类型决定语音强度
        if (/[aeiouAEIOU]/.test(char)) {
          this.speechIntensity = 0.7; // 元音强度高
        } else if (/[mnMN]/.test(char)) {
          this.speechIntensity = 0.4; // 鼻音中等
        } else if (/[,.，。]/.test(char)) {
          this.speechIntensity = 0.1; // 标点符号低
        } else {
          this.speechIntensity = 0.5 + Math.random() * 0.3; // 辅音随机
        }
        
        index++;
        setTimeout(speakNext, wordDuration);
      };
      
      speakNext();
    },

    // 停止播报
    stopSpeaking() {
      this.isSpeaking = false;
      this.speechQueue = [];
      
      if (this.currentSpeech) {
        this.speechSynthesis.cancel();
        this.currentSpeech = null;
      }
      
      // 停止波形动画
      if (this.waveInterval) {
        clearInterval(this.waveInterval);
        this.waveInterval = null;
      }
      
      // 回到空闲状态
      setTimeout(() => {
        this.triggerMotion('idle');
      }, 300);
    },

    // 分析文本情绪
    analyzeEmotion(text) {
      const lowerText = text.toLowerCase();
      const emotions = {
        happy: 0,
        surprised: 0,
        thinking: 0,
        question: 0,
        concerned: 0
      };
      
      // 检查关键词
      for (const [emotion, keywords] of Object.entries(this.emotionKeywords)) {
        for (const keyword of keywords) {
          if (lowerText.includes(keyword.toLowerCase())) {
            emotions[emotion]++;
          }
        }
      }
      
      // 检查标点符号
      if (lowerText.includes('？') || lowerText.includes('?') || 
          lowerText.includes('吗') || lowerText.includes('呢')) {
        emotions.question++;
      }
      
      // 找出最高分情绪
      let maxEmotion = 'normal';
      let maxScore = 0;
      
      for (const [emotion, score] of Object.entries(emotions)) {
        if (score > maxScore) {
          maxScore = score;
          maxEmotion = emotion;
        }
      }
      
      return maxScore > 0 ? maxEmotion : 'normal';
    },

    // 根据情绪选择动作
    selectMotionByEmotion(emotion) {
      const motionMap = {
        normal: 'talk_normal',
        happy: 'talk_excited',
        surprised: 'surprised',
        thinking: 'thinking',
        question: 'talk_question',
        concerned: 'thinking'
      };
      
      const motion = motionMap[emotion] || 'talk_normal';
      this.triggerMotion(motion);
    },

    // 触发动作
    triggerMotion(motionName) {
      if (!window.L2Dwidget) return;
      
      const motions = this.motionMap[motionName];
      if (!motions || motions.length === 0) {
        console.warn('未找到动作:', motionName);
        return;
      }
      
      // 检查优先级
      const currentPriority = this.motionPriority[this.currentMotionGroup] || 0;
      const newPriority = this.motionPriority[motionName] || 0;
      
      if (this.isSpeaking && newPriority <= currentPriority && motionName !== 'idle') {
        // 优先级不够，不打断当前动作
        return;
      }
      
      // 随机选择动作组中的一个动作
      const motionIndex = Math.floor(Math.random() * motions.length);
      const motion = motions[motionIndex];
      
      try {
        // 停止所有动作
        window.L2Dwidget.model.motionManager.stopAllMotions();
        
        // 播放新动作
        if (motion === 'idle') {
          window.L2Dwidget.model.motionManager.startMotion('idle', 0);
        } else {
          // 注意：01.mtn对应索引0，02.mtn对应索引1，以此类推
          const motionIndex = parseInt(motion) - 1;
          if (motionIndex >= 0) {
            window.L2Dwidget.model.motionManager.startMotion('', motionIndex);
          } else {
            window.L2Dwidget.model.motionManager.startMotion('idle', 0);
          }
        }
        
        this.currentMotionGroup = motionName;
        this.currentMotionIndex = motionIndex;
        
      } catch (error) {
        console.warn('触发动作失败:', error);
      }
    },

    initLive2D() {
      this.loadLive2DScript().then(() => {
        if (!window.L2Dwidget) {
          console.error("Live2D 脚本加载失败");
          return;
        }

        this.live2dWidget = this.findOrCreateLive2DWidget();

        this.live2dInstance = window.L2Dwidget.init({
          pluginRootPath: "/live2dw/",
          pluginJsPath: "lib/",
          pluginModelPath: "assets/",
          tagMode: false,
          debug: false,
          model: {
            jsonPath: "/live2dw/live2d-widget-model-koharu/assets/koharu.model.json",
            scale: 1,
          },
          display: {
            superSample: 2,
            width: 150,
            height: 300,
            position: 'left',
            hOffset: 0,
            vOffset: 0,
          },
          mobile: {
            show: true,
            scale: 0.8,
          },
          react: {
            opacityDefault: 1,
            opacityOnHover: 0.8,
          },
          dialog: {
            enable: false,
          },
        });

        setTimeout(() => {
          this.syncLive2DPosition();
          if (this.autoTalk) {
            this.showTip("智慧农业助手已就绪！长按我可拖拽移动", 4000);
            // 打招呼
            setTimeout(() => {
              this.triggerMotion('greeting');
            }, 1000);
          }
        }, 1000);
      }).catch(error => {
        console.error("初始化 Live2D 失败:", error);
      });
    },

    findOrCreateLive2DWidget() {
      let widget = document.querySelector('#live2d-widget');
      if (!widget) {
        widget = document.createElement('div');
        widget.id = 'live2d-widget';
        widget.style.cssText = `
          position: fixed;
          z-index: 9998;
          pointer-events: none;
        `;
        document.body.appendChild(widget);
      }
      return widget;
    },

    syncLive2DPosition() {
      const live2dCanvas = document.querySelector('#live2d-widget canvas');
      if (live2dCanvas && this.$refs.live2dContainer) {
        this.$refs.live2dContainer.appendChild(live2dCanvas);
        live2dCanvas.style.cssText = `
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
        `;
      }
    },

    loadLive2DScript() {
      return new Promise((resolve, reject) => {
        if (window.L2Dwidget) {
          resolve();
          return;
        }

        const sources = [
          'https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js',
          'https://unpkg.com/live2d-widget@3.1.4/lib/L2Dwidget.min.js',
          'https://cdnjs.cloudflare.com/ajax/libs/live2d-widget/3.1.4/L2Dwidget.min.js'
        ];

        const loadScript = (index) => {
          if (index >= sources.length) {
            reject(new Error('所有CDN都加载失败'));
            return;
          }

          const script = document.createElement('script');
          script.src = sources[index];
          script.onload = () => resolve();
          script.onerror = () => loadScript(index + 1);
          document.head.appendChild(script);
        };

        loadScript(0);
      });
    },

    // 拖拽相关方法
    startDrag(event) {
      event.preventDefault();
      event.stopPropagation();

      const isTouch = event.type === 'touchstart';
      const clientX = isTouch ? event.touches[0].clientX : event.clientX;
      const clientY = isTouch ? event.touches[0].clientY : event.clientY;

      this.dragging = true;
      this.dragStartX = clientX;
      this.dragStartY = clientY;
      this.initialX = this.position.x;
      this.initialY = this.position.y;

      if (isTouch) {
        document.addEventListener('touchmove', this.handleDrag, { passive: false });
        document.addEventListener('touchend', this.stopDrag);
      } else {
        document.addEventListener('mousemove', this.handleDrag);
        document.addEventListener('mouseup', this.stopDrag);
      }

      this.showDragHint = true;
    },

    handleDrag(event) {
      if (!this.dragging) return;

      event.preventDefault();
      event.stopPropagation();

      const isTouch = event.type === 'touchmove';
      const clientX = isTouch ? event.touches[0].clientX : event.clientX;
      const clientY = isTouch ? event.touches[0].clientY : event.clientY;

      const deltaX = clientX - this.dragStartX;
      const deltaY = clientY - this.dragStartY;

      let newX = this.initialX + deltaX;
      let newY = this.initialY + deltaY;

      const maxX = window.innerWidth - 150;
      const maxY = window.innerHeight - 300;

      newX = Math.max(0, Math.min(newX, maxX));
      newY = Math.max(0, Math.min(newY, maxY));

      this.position.x = newX;
      this.position.y = newY;
    },

    stopDrag(event) {
      if (!this.dragging) return;

      this.dragging = false;
      this.saveSettings();

      document.removeEventListener('mousemove', this.handleDrag);
      document.removeEventListener('mouseup', this.stopDrag);
      document.removeEventListener('touchmove', this.handleDrag);
      document.removeEventListener('touchend', this.stopDrag);

      this.syncLive2DPosition();

      setTimeout(() => {
        this.showDragHint = false;
      }, 1000);

      if (this.autoTalk) {
        this.showTip("位置已保存", 2000);
      }
    },

    checkBoundaries() {
      const maxX = window.innerWidth - 150;
      const maxY = window.innerHeight - 300;

      if (this.position.x > maxX) this.position.x = maxX;
      if (this.position.y > maxY) this.position.y = maxY;
      if (this.position.x < 0) this.position.x = 0;
      if (this.position.y < 0) this.position.y = 0;

      this.saveSettings();
    },

    // 控制面板相关方法
    toggleControls() {
      this.controlsHidden = !this.controlsHidden;
      this.saveSettings();
    },

    onMouseEnterTrigger() {
      this.triggerHovered = true;
      this.showTriggerTip = true;
      clearTimeout(this.autoHideTimer);
    },

    onMouseLeaveTrigger() {
      this.triggerHovered = false;
      if (!this.panelHovered && !this.controlsHidden) {
        this.scheduleAutoHide();
      }
      this.scheduleHideTriggerTip();
    },

    onMouseEnterPanel() {
      this.panelHovered = true;
      clearTimeout(this.autoHideTimer);
    },

    onMouseLeavePanel() {
      this.panelHovered = false;
      if (!this.triggerHovered && !this.controlsHidden) {
        this.scheduleAutoHide();
      }
    },

    scheduleAutoHide() {
      clearTimeout(this.autoHideTimer);
      this.autoHideTimer = setTimeout(() => {
        if (!this.panelHovered && !this.triggerHovered && !this.controlsHidden) {
          this.controlsHidden = true;
          this.saveSettings();
        }
      }, 2000); // 2秒后自动隐藏
    },

    scheduleHideTriggerTip() {
      clearTimeout(this.triggerTipTimer);
      this.triggerTipTimer = setTimeout(() => {
        this.showTriggerTip = false;
      }, 1000);
    },

    toggleLive2D() {
      this.closed = !this.closed;
      this.saveSettings();

      if (this.autoTalk) {
        if (this.closed) {
          this.showTip("助手已隐藏，点击左下角按钮重新显示", 3000);
        } else {
          this.showTip("助手已显示", 2000);
          this.triggerMotion('greeting');
        }
      }
    },

    showTip(message, duration = 3000) {
      if (!this.autoTalk) return;

      this.tipMessage = message;
      this.tipVisible = true;

      clearTimeout(this.tipTimeout);
      this.tipTimeout = setTimeout(() => {
        this.tipVisible = false;
      }, duration);
    },

    resetPosition() {
      this.position.x = 20;
      this.position.y = 20;
      this.saveSettings();
      this.syncLive2DPosition();
      if (this.autoTalk) {
        this.showTip("位置已重置", 2000);
      }
    },

    toggleTalk() {
      this.autoTalk = !this.autoTalk;
      this.saveSettings();
      if (this.autoTalk) {
        this.showTip("已开启自动提示", 2000);
      } else {
        this.showTip("已关闭自动提示", 2000);
      }
    },

    closeLive2D() {
      this.closed = true;
      this.saveSettings();
    },

    showLive2D() {
      this.closed = false;
      this.saveSettings();
      if (this.autoTalk) {
        this.showTip("欢迎回来！", 2000);
        this.triggerMotion('greeting');
      }
    },

    onSpeakPause() {
      // 处理语音暂停
    },

    onSpeakResume() {
      // 处理语音恢复
    }
  },
};
</script>

<style scoped>
/* 控制按钮触发器 */
.live2d-controls-trigger {
  position: fixed;
  bottom: 20px;
  left: 5px;
  z-index: 10000;
  width: 36px;
  height: 36px;
  background: rgba(104, 226, 196, 0.85);
  border-radius: 18px 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: white;
  font-weight: bold;
}

.live2d-controls-trigger:hover {
  background: rgba(84, 206, 176, 0.95);
  width: 42px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.live2d-controls-trigger.controls-hidden {
  border-radius: 0 18px 18px 0;
  left: 0;
}

.trigger-icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.live2d-controls-trigger:hover .trigger-icon {
  transform: scale(1.2);
}

.trigger-tip {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  animation: fadeIn 0.3s ease;
  pointer-events: none;
  z-index: 10001;
}

.trigger-tip::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: rgba(0, 0, 0, 0.8);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-50%) translateX(-10px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* 控制按钮面板 */
.live2d-controls-panel {
  position: fixed;
  bottom: 20px;
  left: 40px;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 180px;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(104, 226, 196, 0.3);
}

.live2d-controls-panel.panel-hidden {
  transform: translateX(-200px);
  opacity: 0;
  pointer-events: none;
}

.panel-header {
  background: linear-gradient(135deg, #68e2c4, #4dc9b8);
  padding: 10px 12px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title {
  font-size: 13px;
  font-weight: bold;
}

.panel-close {
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.panel-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.panel-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-btn {
  background: rgba(104, 226, 196, 0.1);
  border: 1px solid rgba(104, 226, 196, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.control-btn:hover {
  background: rgba(104, 226, 196, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(104, 226, 196, 0.2);
}

.control-btn:active {
  transform: translateY(0);
}

.btn-icon {
  font-size: 14px;
  width: 20px;
}

.drag-status {
  background: rgba(255, 184, 0, 0.1);
  border: 1px solid rgba(255, 184, 0, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #e6a700;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: pulse 1.5s infinite;
}

.status-icon {
  font-size: 12px;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.panel-footer {
  padding: 8px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
}

.panel-footer small {
  color: #666;
  font-size: 11px;
}

/* Live2D 容器 */
.live2d-container {
  width: 150px;
  height: 300px;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 8px;
  overflow: visible;
}

.live2d-container:hover {
  box-shadow: 0 0 20px rgba(104, 226, 196, 0.3);
}

/* 语音播报状态指示器 */
.speech-status-indicator {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(104, 226, 196, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.speech-wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
}

.wave-bar {
  width: 3px;
  background: white;
  border-radius: 2px;
  transition: height 0.2s ease;
}

.speech-text {
  font-weight: bold;
  white-space: nowrap;
}

/* 拖拽提示 */
.live2d-drag-hint {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(104, 226, 196, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10000;
  pointer-events: none;
  animation: fadeInOut 5s ease-in-out forwards;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 提示文字 */
.live2d-tip {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(104, 226, 196, 0.95);
  color: white;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 13px;
  max-width: 200px;
  min-width: 120px;
  z-index: 10000;
  pointer-events: none;
  animation: fadeInOut 3s ease-in-out forwards;
  text-align: center;
  line-height: 1.4;
  word-wrap: break-word;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.live2d-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(104, 226, 196, 0.95);
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .live2d-controls-trigger {
    bottom: 10px;
    left: 2px;
    width: 32px;
    height: 32px;
  }

  .live2d-controls-panel {
    bottom: 10px;
    left: 35px;
    width: 140px;
  }

  .control-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .btn-icon {
    font-size: 12px;
    width: 18px;
  }

  .live2d-container {
    width: 120px;
    height: 240px;
  }

  .live2d-tip {
    font-size: 11px;
    max-width: 150px;
    top: -70px;
  }

  .speech-status-indicator {
    top: -60px;
    padding: 6px 10px;
    font-size: 10px;
  }
}
</style>

3. 配置Live2D模型文件

3.1 下载Live2D模型

从以下链接下载Live2D模型文件：

live2d-widget-model-koharu

3.2 放置模型文件

在项目的静态资源目录中创建以下结构：

static/
└── live2dw/
    ├── lib/
    │   └── L2Dwidget.min.js  # 如果不使用CDN，可以下载到本地
    └── live2d-widget-model-koharu/
        └── assets/
            ├── koharu.model.json
            └── 其他模型文件...

4. 在项目中使用

4.1 全局注册组件

在 main.js 中添加：

import Vue from 'vue'
import Live2D from './components/Live2D.vue'

Vue.component('Live2D', Live2D)

4.2 在页面中使用

在需要显示Live2D的页面中添加：

<template>
  <div>
    <!-- 其他页面内容 -->
    <Live2D />
  </div>
</template>

四、功能说明

1. 核心功能

功能	说明	操作方式
模型显示	显示Live2D角色	自动加载
拖拽移动	可拖动角色到任意位置	长按角色并拖动
语音播报	支持文本转语音	通过EventBus触发或点击测试按钮
音波动画	播报时显示波形动画	自动触发
控制面板	提供各种控制选项	点击左下角图标

2. 事件触发

显示提示消息

1
2
3

import { EventBus, EVENTS } from '@/utils/eventBus'

EventBus.$emit(EVENTS.SHOW_LIVE2D_TIP, '这是一条提示消息')

开始语音播报

import { EventBus, EVENTS } from '@/utils/eventBus'

// 方式1：通过事件触发
EventBus.$emit('startSpeaking', { text: '您好，这是一条测试语音' })

// 方式2：直接调用组件方法
// 需要通过ref获取组件实例
this.$refs.live2d.startSpeaking('您好，这是一条测试语音')

五、注意事项

浏览器兼容性：语音合成功能依赖浏览器支持，部分浏览器可能不支持。
模型文件：确保Live2D模型文件路径正确，默认使用CDN加载模型。
性能优化：Live2D可能会占用一定资源，建议在低配置设备上适当调整。
响应式设计：组件已适配移动端，会自动调整大小和位置。
本地存储：用户的设置（位置、显示状态等）会保存在localStorage中。

六、故障排除

1. Live2D模型不显示

检查网络连接，确保CDN可以访问
检查模型文件路径是否正确
查看浏览器控制台是否有错误信息

2. 语音播报不工作

检查浏览器是否支持语音合成
检查系统音量设置
查看浏览器控制台是否有错误信息

3. 拖拽功能失效

检查是否有其他元素阻止了鼠标事件
查看浏览器控制台是否有错误信息

七、扩展与定制

1. 更换Live2D模型

修改 Live2D.vue 中的模型配置：

model: {
  jsonPath: "/live2dw/your-model/assets/model.json", // 更换为你的模型路径
  scale: 1,
},

2. 自定义提示消息

可以通过修改 emotionKeywords 和 motionMap 来自定义不同情绪的动作响应。

3. 扩展控制面板

可以在 panel-body 中添加更多控制按钮和功能。

八、版本历史

版本	日期	变更内容
1.0.0	2026-04-15	初始版本，集成Live2D模型、语音播报、拖拽功能

说明：本文档基于现有的Live2D组件实现，已集成了所有必要的功能。按照上述步骤操作，即可在新项目中成功集成Live2D模型及其相关功能。

九、总结

1. 环境准备与文件结构

首先需要在项目中创建必要的目录和工具文件，用于管理事件和组件。

创建目录结构：在 src 目录下创建 components 和 utils 文件夹。
配置事件总线：创建 eventBus.js，用于在不同组件间通信（如触发语音、显示/隐藏模型）。
引入依赖：项目依赖 Live2D.vue 核心组件和 L2Dwidget.min.js 库（通常通过 CDN 引入）。

2. 核心组件集成 (Live2D.vue)

这是实现所有功能的核心文件，你需要将其完整代码集成到项目中。该组件主要实现了以下逻辑：

模板结构：
- 控制触发器：页面左下角的小图标，用于展开/收起控制面板。
- 控制面板：包含显示/隐藏助手、重置位置、开关音效、切换语音模式等按钮。
- Live2D 容器：承载模型的 DOM 元素，包含语音波形动画和提示气泡。
脚本逻辑：
- 状态管理：使用 data 定义了模型位置、显示状态、语音模式等。
- 生命周期：在 mounted 中初始化 Live2D 和语音系统，并加载本地保存的设置（如位置、音效开关）。
- 本地存储：利用 localStorage 自动保存用户的位置、显示状态和偏好设置，实现刷新后记忆功能。

3. 模型文件配置

Live2D 需要特定的模型文件才能显示。

下载模型：文档示例使用了 live2d-widget-model-koharu 模型。
放置路径：将模型文件放置在项目的静态资源目录（如 static/live2dw/）下。
路径配置：在 Live2D.vue 的 initLive2D 方法中，确保 jsonPath 指向正确的模型配置文件路径。

4. 项目引入与使用

完成上述步骤后，需要在主应用中注册并使用该组件。

全局注册：在 main.js 中导入 Live2D 组件并使用 Vue.component 进行全局注册。
页面调用：在任意页面的 <template> 中直接写入 <Live2D /> 标签即可。

5. 核心功能实现原理

文档中的组件还封装了以下高级功能，其实现方式如下表：

功能模块	实现方式
语音播报	利用浏览器的 `SpeechSynthesis` API。组件支持“简单模式”（直接播放）和“智能同步模式”（模拟分析文本节奏控制波形）。
音波动画	通过 CSS 和 Vue 的响应式数据（`waveHeight1-4`）动态改变波形高度，模拟语音的强弱变化。
拖拽移动	监听 `mousedown`/`touchstart` 事件，计算鼠标/触摸点位移，动态修改 `position` 样式，并在松开时保存位置到本地。
情绪动作	内置关键词库（如“开心”、“惊讶”），通过分析文本内容触发对应的动作组（Motion），控制模型做出反应。