主应用子应用globalData通信

src/views/Home.vue

@@ -40,15 +40,102 @@
         </tbody>
       </table>
     </div>
+
+    <!-- 跨应用通信演示 -->
+    <div class="comm-demo">
+      <div class="comm-title">📡 跨应用通信</div>
+
+      <div class="counter-section">
+        <span class="counter-label">共享计数器</span>
+        <span class="counter-value" :class="{ flash: counterFlash }">{{ count }}</span>
+      </div>
+
+      <div class="button-group">
+        <button class="btn-send-main" @click="broadcastIncrement">
+          📡 +1 并广播全局
+        </button>
+        <button class="btn-reset" @click="resetCount">
+          🔄 归零（广播）
+        </button>
+      </div>
+
+      <div class="comm-log">
+        <div class="log-header">📋 通信日志（vue3-app 视角）</div>
+        <div class="log-list" ref="logListRef">
+          <div v-for="(log, i) in logs" :key="i" class="log-item" :class="log.type">
+            <span class="log-time">{{ log.time }}</span>
+            <span class="log-msg">{{ log.msg }}</span>
+          </div>
+          <div v-if="logs.length === 0" class="log-empty">等待通信...</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, onMounted, nextTick, computed } from 'vue'
 
-const isMicroApp = computed(() => !!(window as any).__MICRO_APP_ENVIRONMENT__)
+const isMicroApp = computed(() => !!window.__MICRO_APP_ENVIRONMENT__)
-const baseRoute = computed(() => (window as any).__MICRO_APP_BASE_ROUTE__ || '/')
+const baseRoute = computed(() => window.__MICRO_APP_BASE_ROUTE__ || '/')
-const appName = computed(() => (window as any).__MICRO_APP_NAME__ || '独立运行')
+const appName = computed(() => window.__MICRO_APP_NAME__ || '独立运行')
+
+// 通信相关
+const count = ref(0)
+const counterFlash = ref(false)
+const logs = ref<Array<{ time: string; msg: string; type: string }>>([])
+const logListRef = ref<HTMLElement | null>(null)
+
+function flash() {
+  counterFlash.value = true
+  setTimeout(() => (counterFlash.value = false), 300)
+}
+
+function addLog(msg: string, type: 'receive' | 'send' | 'relay') {
+  const now = new Date()
+  const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
+  logs.value.push({ time, msg, type })
+  if (logs.value.length > 30) logs.value.shift()
+  nextTick(() => {
+    if (logListRef.value) {
+      logListRef.value.scrollTop = logListRef.value.scrollHeight
+    }
+  })
+}
+
+function broadcastIncrement() {
+  count.value++
+  flash()
+  if (window.__MICRO_APP_ENVIRONMENT__) {
+    window.microApp!.setGlobalData({ count: count.value, from: 'vue3-app' })
+    addLog(`vue3 → globalData: 广播计数 ${count.value}（主应用 + vue2 均收到）`, 'send')
+  } else {
+    addLog(`[独立模式] +1 → ${count.value}`, 'send')
+  }
+}
+
+function resetCount() {
+  count.value = 0
+  flash()
+  if (window.__MICRO_APP_ENVIRONMENT__) {
+    window.microApp!.setGlobalData({ count: 0, from: 'vue3-app' })
+    addLog(`归零 → globalData（全应用同步）`, 'send')
+  }
+}
+
+onMounted(() => {
+  if (window.__MICRO_APP_ENVIRONMENT__) {
+    // globalData 监听 — autoTrigger: true 立即用当前值触发一次
+    window.microApp?.addGlobalDataListener((data: any) => {
+      if (data.count !== undefined) {
+        const from = data.from || 'unknown'
+        count.value = data.count
+        flash()
+        addLog(`globalData ← ${from}: 计数 ${data.count}`, 'receive')
+      }
+    }, true)
+  }
+})
 </script>
 
 <style scoped>
@@ -169,4 +256,144 @@ td code {
   font-size: 13px;
   color: #42b883;
 }
+
+/* ============================================
+   跨应用通信演示
+   ============================================ */
+.comm-demo {
+  margin-top: 24px;
+  border: 2px solid #667eea;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.comm-title {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: #fff;
+  padding: 10px 20px;
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.counter-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: #f8f9ff;
+  border-bottom: 1px solid #e8e8f8;
+}
+
+.counter-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #555;
+}
+
+.counter-value {
+  font-size: 48px;
+  font-weight: 800;
+  color: #667eea;
+  transition: transform 0.3s, color 0.3s;
+}
+
+.counter-value.flash {
+  transform: scale(1.2);
+  color: #ff6b35;
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+  padding: 16px 20px;
+}
+
+.button-group button {
+  flex: 1;
+  padding: 10px 8px;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #fff;
+}
+
+.btn-send-main {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+}
+
+.btn-send-main:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
+}
+
+.btn-reset {
+  background: #94a3b8;
+}
+
+.btn-reset:hover {
+  background: #64748b;
+  transform: translateY(-1px);
+}
+
+.comm-log {
+  border-top: 1px solid #f0f0f0;
+  padding: 12px 20px;
+}
+
+.log-header {
+  font-size: 13px;
+  font-weight: 600;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.log-list {
+  max-height: 150px;
+  overflow-y: auto;
+  background: #fafafa;
+  border-radius: 6px;
+  padding: 8px 10px;
+  border: 1px solid #f0f0f0;
+}
+
+.log-item {
+  display: flex;
+  gap: 10px;
+  font-size: 12px;
+  padding: 3px 0;
+  border-bottom: 1px solid #f5f5f5;
+  font-family: 'Consolas', 'Courier New', monospace;
+}
+
+.log-item:last-child {
+  border-bottom: none;
+}
+
+.log-time {
+  color: #999;
+  flex-shrink: 0;
+}
+
+.log-item.receive .log-msg {
+  color: #667eea;
+}
+
+.log-item.send .log-msg {
+  color: #16a34a;
+}
+
+.log-item.relay .log-msg {
+  color: #f59e0b;
+}
+
+.log-empty {
+  font-size: 12px;
+  color: #ccc;
+  text-align: center;
+  padding: 12px 0;
+}
 </style>

src/vite-env.d.ts

@@ -32,4 +32,30 @@ interface Window {
    * micro-app 注入的公共路径 — 用于拼接静态资源路径
    */
   __MICRO_APP_PUBLIC_PATH__?: string
+
+  /**
+   * micro-app 子应用通信 API
+   */
+  microApp?: {
+    /** 获取主应用 setData 传递的数据 */
+    getData(): Record<string, any>
+    /** 监听主应用推送的数据 */
+    addDataListener(callback: (data: any) => void, autoTrigger?: boolean): void
+    /** 移除数据监听 */
+    removeDataListener(callback: (data: any) => void): void
+    /** 向主应用发送数据 */
+    dispatch(data: Record<string, any>): void
+
+    // ============================================================
+    // globalData API — 全局状态池（主应用 + 所有子应用共享）
+    // ============================================================
+    /** 获取全局数据 */
+    getGlobalData(): Record<string, any> | null
+    /** 设置全局数据（广播给主应用和所有子应用） */
+    setGlobalData(data: Record<string, any>): void
+    /** 监听全局数据变化 */
+    addGlobalDataListener(callback: (data: any) => void, autoTrigger?: boolean): void
+    /** 移除全局数据监听 */
+    removeGlobalDataListener(callback: (data: any) => void): void
+  }
 }