interface InstanceRecord {
  app: ReturnType<typeof createApp> // Vue 應(yīng)用實(shí)例
  cache: any                        // 業(yè)務(wù)數(shù)據(jù)快照，用于保存實(shí)例相關(guān)的業(yè)務(wù)數(shù)據(jù)
  mounted: boolean                  // 標(biāo)記實(shí)例是否已掛載
  lastUsedAt: number                // 最后使用時(shí)間，用于判斷實(shí)例是否過(guò)期
}
const instancePool = new Map<string, InstanceRecord>()

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
export function createAppInstance(targetId: string, initData: any = {}) {
  // 檢查緩存池，存在則更新最后使用時(shí)間并返回
  if (instancePool.has(targetId)) {
    const rec = instancePool.get(targetId)!
    rec.lastUsedAt = Date.now()
    return rec
  }
  // 確保掛載容器存在，不存在則創(chuàng)建并添加到文檔中
  let el = document.getElementById(targetId)
  if (!el) {
    el = document.createElement('div')
    el.id = targetId
    document.body.appendChild(el)
  }
  // 創(chuàng)建 Vue 應(yīng)用實(shí)例，配置 Pinia 狀態(tài)管理
  const app = createApp(App)
}

app.provide('initData', JSON.parse(JSON.stringify(initData)))

<script setup>
import { inject } from 'vue'
// 獲取注入的初始化數(shù)據(jù)，默認(rèn)值為空對(duì)象
const initData = inject('initData', {})
console.log('當(dāng)前實(shí)例初始化數(shù)據(jù):', initData)
</script>

/**
 * 顯示指定實(shí)例的容器
 * @param targetId 實(shí)例掛載容器的 id
 */
export function showApp(targetId: string) {
  const el = document.getElementById(targetId)
  if (el) el.style.display = 'block'
  // 可選：更新實(shí)例最后使用時(shí)間
  const rec = instancePool.get(targetId)
  if (rec) rec.lastUsedAt = Date.now()
}
/**
 * 隱藏指定實(shí)例的容器
 * @param targetId 實(shí)例掛載容器的 id
 */
export function hideApp(targetId: string) {
  const el = document.getElementById(targetId)
  if (el) el.style.display = 'none'
}

// 推薦：只打印關(guān)鍵信息
const rec = instancePool.get(targetId)
if (rec) {
  console.log('實(shí)例調(diào)試信息:', {
    targetId,
    cache: rec.cache,
    container: rec.app._container,
    lastUsedAt: new Date(rec.lastUsedAt).toLocaleString()
  })
}
// 不推薦：直接打印完整實(shí)例
// console.log(rec.app) // 會(huì)輸出大量冗余信息

// 模塊級(jí)共享的響應(yīng)式數(shù)據(jù)，會(huì)導(dǎo)致多實(shí)例監(jiān)聽沖突
export const sharedRef = ref(0)

<script setup>
import { sharedRef, watch } from 'vue'
// 多個(gè)實(shí)例都會(huì)監(jiān)聽 sharedRef，數(shù)據(jù)變化時(shí)所有實(shí)例的 watch 都會(huì)觸發(fā)
watch(sharedRef, (newVal) => {
  console.log('sharedRef 變化:', newVal)
})
</script>

<script setup>
import { ref, watch } from 'vue'
// 組件內(nèi)部創(chuàng)建響應(yīng)式數(shù)據(jù)，每個(gè)實(shí)例獨(dú)立
const privateRef = ref(0) 
watch(privateRef, (newVal) => {
  console.log('當(dāng)前實(shí)例 privateRef 變化:', newVal)
})
</script>

<script setup>
import { onUnmounted } from 'vue'
// 1. 定時(shí)器清理
const timer = setInterval(() => {
  console.log('定時(shí)器執(zhí)行')
}, 1000)
// 2. 全局事件監(jiān)聽清理
function handleResize() {
  console.log('窗口大小變化')
}
window.addEventListener('resize', handleResize)
// 3. WebSocket 連接清理
const ws = new WebSocket('wss://example.com')
ws.onopen = () => {
  ws.send('連接建立')
}
// 在組件卸載時(shí)清理所有資源
onUnmounted(() => {
  // 清理定時(shí)器
  clearInterval(timer)
  // 移除全局事件監(jiān)聽
  window.removeEventListener('resize', handleResize)
  // 關(guān)閉 WebSocket 連接
  if (ws.readyState === WebSocket.OPEN) {
    ws.close(1000, '組件卸載')
  }
  // 若使用 RxJS 等訂閱流，需取消訂閱
  // subscription.unsubscribe()
})
</script>

// 工具函數(shù)：創(chuàng)建并返回唯一容器
export function createContainer(prefix: string): string {
  const targetId = `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2)}`
  const el = document.createElement('div')
  el.id = targetId
  document.body.appendChild(el)
  return targetId
}
// 工具函數(shù)：安全刪除容器
export function destroyContainer(targetId: string) {
  const el = document.getElementById(targetId)
  if (el && el.parentNode) {
    el.parentNode.removeChild(el)
  }
}

export function showApp(targetId: string) {
  const el = document.getElementById(targetId)
  if (!el) {
    throw new Error(`實(shí)例容器 ${targetId} 已被刪除，請(qǐng)檢查 DOM 操作`)
  }
  el.style.display = 'block'
}

<!-- ChatWindow.vue：使用 scoped 樣式 -->
<style scoped>
.chat-title {
  font-size: 16px;
  color: #333;
}
</style>

<!-- 或使用 CSS Modules -->
<style module>
.title {
  font-size: 16px;
  color: #333;
}
</style>
<template>
  <h2 :class="$style.title">聊天窗口</h2>
</template>

// 改造 createAppInstance：使用 Shadow DOM 隔離樣式
export function createAppInstance(targetId: string, initData: any = {}) {
  // ... 省略緩存檢查邏輯 ...
  let el = document.getElementById(targetId)
  if (!el) {
    el = document.createElement('div')
    el.id = targetId
    // 創(chuàng)建 Shadow DOM 并附加到容器
    const shadowRoot = el.attachShadow({ mode: 'open' })
    // 在 Shadow DOM 中創(chuàng)建掛載點(diǎn)
    const mountPoint = document.createElement('div')
    mountPoint.id = `mount-${targetId}`
    shadowRoot.appendChild(mountPoint)
    document.body.appendChild(el)
  }
  // 注意：此時(shí)掛載目標(biāo)需改為 Shadow DOM 中的掛載點(diǎn)
  const shadowRoot = el.shadowRoot
  if (!shadowRoot) {
    throw new Error(`容器 ${targetId} 未初始化 Shadow DOM`)
  }
  const mountPoint = shadowRoot.getElementById(`mount-${targetId}`)
  if (!mountPoint) {
    throw new Error(`Shadow DOM 掛載點(diǎn)不存在`)
  }
  // 掛載到 Shadow DOM 內(nèi)的節(jié)點(diǎn)
  const app = createApp(App)
  app.mount(mountPoint)
  // ... 省略后續(xù)邏輯 ...
}

// 實(shí)例中生成唯一樣式前綴
const stylePrefix = `chat-window-${targetId}`

<template>
  <div :class="stylePrefix">
    <h2 :class="`${stylePrefix}__title`">聊天窗口</h2>
  </div>
</template>
<style>
.chat-window-${targetId}__title {
  font-size: 16px;
  color: #333;
}
</style>

// 配置：最大實(shí)例數(shù)
const MAX_INSTANCE_COUNT = 5
export function createAppInstance(targetId: string, initData: any = {}) {
  // 1. 檢查緩存，存在則直接返回
  if (instancePool.has(targetId)) {
    // ... 省略緩存邏輯 ...
  }
  // 2. 若實(shí)例數(shù)超過(guò)閾值，銷毀最久未使用的實(shí)例
  if (instancePool.size >= MAX_INSTANCE_COUNT) {
    // 按 lastUsedAt 排序，取最久未使用的實(shí)例
    const sortedInstances = Array.from(instancePool.entries()).sort(
      ([, a], [, b]) => a.lastUsedAt - b.lastUsedAt
    )
    const [oldTargetId] = sortedInstances[0]
    destroyApp(oldTargetId)
    console.log(`實(shí)例數(shù)超過(guò)閾值，銷毀最久未使用實(shí)例：${oldTargetId}`)
  }
  // 3. 創(chuàng)建新實(shí)例
  // ... 省略實(shí)例創(chuàng)建邏輯 ...
}

<!-- ChatWindow.vue：懶加載非核心組件 -->
<template>
  <div class="chat-window">
    <MessageList /> <!-- 核心組件：立即加載 -->
    <ChatInput />   <!-- 核心組件：立即加載 -->
    <template v-if="showSearchPanel">
      <!-- 非核心組件：懶加載 -->
      <Suspense>
        <template #default>
          <SearchPanel />
        </template>
        <template #fallback>
          <div>加載中...</div>
        </template>
      </Suspense>
    </template>
  </div>
</template>
<script setup>
import MessageList from './MessageList.vue'
import ChatInput from './ChatInput.vue'
// 懶加載非核心組件
const SearchPanel = defineAsyncComponent(() => import('./SearchPanel.vue'))
const showSearchPanel = ref(false)
</script>

// 錯(cuò)誤：緩存復(fù)雜對(duì)象（消息列表）
const rec: InstanceRecord = {
  app,
  cache: {
    userId: initData.userId,
    messages: initData.messages // 復(fù)雜數(shù)組，占用內(nèi)存大
  },
  // ... 其他字段 ...
}
// 正確：僅緩存輕量快照
const rec: InstanceRecord = {
  app,
  cache: {
    userId: initData.userId,
    unreadCount: initData.messages.filter(m => !m.read).length // 僅緩存統(tǒng)計(jì)結(jié)果
  },
  // ... 其他字段 ...
}

export function destroyApp(targetId: string) {
  const rec = instancePool.get(targetId)
  if (!rec) return
  // 異步執(zhí)行銷毀，避免阻塞主線程
  requestIdleCallback(() => {
    // 1. 卸載 Vue 應(yīng)用
    rec.app.unmount()
    // 2. 移除緩存記錄
    instancePool.delete(targetId)
    // 3. 刪除 DOM 容器
    const el = document.getElementById(targetId)
    if (el && el.parentNode) {
      el.parentNode.removeChild(el)
    }
    console.log(`實(shí)例 ${targetId} 已異步銷毀`)
  }, { timeout: 1000 }) // 1 秒內(nèi)若未空閑，強(qiáng)制執(zhí)行
}

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ChatWindow from './ChatWindow.vue'
// 實(shí)例記錄接口
interface InstanceRecord {
  app: ReturnType<typeof createApp>
  cache: { userId: string; title: string }
  mounted: boolean
  lastUsedAt: number
}
// 緩存池
const instancePool = new Map<string, InstanceRecord>()
// 配置：最大實(shí)例數(shù)
const MAX_INSTANCE_COUNT = 3
// 創(chuàng)建/獲取聊天窗口實(shí)例
export function openChatWindow(initData: { userId: string; title: string }): string {
  // 生成唯一 targetId（基于用戶 ID + 時(shí)間戳）
  const targetId = `chat-window-${initData.userId}-${Date.now().toString().slice(-4)}`
  // 1. 檢查緩存，存在則顯示并返回
  if (instancePool.has(targetId)) {
    const rec = instancePool.get(targetId)!
    rec.lastUsedAt = Date.now()
    showChatWindow(targetId)
    return targetId
  }
  // 2. 實(shí)例數(shù)超過(guò)閾值，銷毀最久未使用實(shí)例
  if (instancePool.size >= MAX_INSTANCE_COUNT) {
    const sortedInstances = Array.from(instancePool.entries()).sort(
      ([, a], [, b]) => a.lastUsedAt - b.lastUsedAt
    )
    const [oldTargetId] = sortedInstances[0]
    closeChatWindow(oldTargetId)
  }
  // 3. 創(chuàng)建容器（含 Shadow DOM 樣式隔離）
  const container = document.createElement('div')
  container.id = targetId
  container.style.position = 'fixed'
  container.style.bottom = '20px'
  container.style.right = `${(instancePool.size * 320) + 20}px` // 窗口橫向排列
  container.style.width = '300px'
  container.style.height = '400px'
  container.style.border = '1px solid #eee'
  container.style.borderRadius = '8px'
  container.style.overflow = 'hidden'
  // 初始化 Shadow DOM
  const shadowRoot = container.attachShadow({ mode: 'open' })
  const mountPoint = document.createElement('div')
  shadowRoot.appendChild(mountPoint)
  document.body.appendChild(container)
  // 4. 創(chuàng)建 Vue 實(shí)例
  const app = createApp(ChatWindow)
  const pinia = createPinia()
  app.use(pinia)
  // 注入初始化數(shù)據(jù)
  app.provide('chatInitData', { ...initData, targetId })
  // 掛載到 Shadow DOM 內(nèi)的節(jié)點(diǎn)
  app.mount(mountPoint)
  // 5. 加入緩存池
  const rec: InstanceRecord = {
    app,
    cache: { userId: initData.userId, title: initData.title },
    mounted: true,
    lastUsedAt: Date.now()
  }
  instancePool.set(targetId, rec)
  return targetId
}
// 顯示聊天窗口
export function showChatWindow(targetId: string) {
  const container = document.getElementById(targetId)
  if (container) container.style.display = 'block'
}
// 隱藏聊天窗口
export function hideChatWindow(targetId: string) {
  const container = document.getElementById(targetId)
  if (container) container.style.display = 'none'
}