liveh5-nuxt/app/components/floatingBubble/floating.js

import { createApp } from 'vue'
import MinWindow from '@/components/floatingBubble/index.vue'

let minWindowInstance = null
let minWindowApp = null
let container = null

// 创建悬浮窗
export const showMinWindow1 = (props = {}) => {
    if (!process.client) return

    // 如果在首页，不创建实例并销毁现有实例
    if (window?.$nuxt?.$route?.path === '/') {
        hideMinWindow1()
        return null
    }

    // 如果已经存在实例，直接返回该实例
    if (minWindowInstance) {
        return minWindowInstance
    }

    // 确保清理旧的容器
    const existingContainer = document.querySelector('.floating-bubble-container')
    if (existingContainer) {
        document.body.removeChild(existingContainer)
    }
    
    container = document.createElement('div')
    container.className = 'floating-bubble-container'
    document.body.appendChild(container)
    
    const app = createApp(MinWindow, {
        ...props
    })

    minWindowApp = app
    minWindowInstance = app.mount(container)
    return minWindowInstance
}

export const hideMinWindow1 = () => {
    if (!minWindowApp) return
    
    try {
        minWindowApp.unmount()
        if (container && document.body.contains(container)) {
            document.body.removeChild(container)
        }
    } catch (e) {
        console.error('清理浮动气泡时出错:', e)
    } finally {
        // 确保状态被重置
        minWindowApp = null
        minWindowInstance = null
        container = null
        
        // 额外清理可能残留的容器
        const existingContainer = document.querySelector('.floating-bubble-container')
        if (existingContainer) {
            document.body.removeChild(existingContainer)
        }
    }
}