主应用子应用globalData通信

src/views/Home.vue

@@ -1,6 +1,278 @@
 <template>
   <div class="home">
-    <h1>🏠 首页</h1>
-    <p>欢迎来到 Vue2 + Vite + Router 项目！</p>
+    <h1>🏠 Vue2 子应用首页</h1>
+
+    <div class="env-badge" v-if="isMicroApp">
+      🟢 运行在 micro-app 微前端环境中
+    </div>
+    <div class="env-badge standalone" v-else>
+      🔵 独立运行模式
+    </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">📋 通信日志（vue2-app 视角）</div>
+        <div class="log-list" ref="logList">
+          <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>
+export default {
+  name: 'HomePage',
+  data() {
+    return {
+      count: 0,
+      counterFlash: false,
+      logs: [],
+      isMicroApp: false,
+      appName: '',
+    }
+  },
+  created() {
+    this.isMicroApp = !!window.__MICRO_APP_ENVIRONMENT__
+    this.appName = window.__MICRO_APP_NAME__ || ''
+
+    if (this.isMicroApp) {
+      // 通过 globalData 获取当前全局状态（autoTrigger: true 立即触发一次）
+      window.microApp?.addGlobalDataListener((data) => {
+        if (data.count !== undefined) {
+          const from = data.from || 'unknown'
+          this.count = data.count
+          this.flash()
+          this.addLog(`globalData ← ${from}: 计数 ${data.count}`, 'receive')
+        }
+      }, true)  // autoTrigger = true → 立即用当前 globalData 触发一次
+    }
+  },
+  methods: {
+    flash() {
+      this.counterFlash = true
+      setTimeout(() => (this.counterFlash = false), 300)
+    },
+    addLog(msg, type) {
+      const now = new Date()
+      const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
+      this.logs.push({ time, msg, type })
+      if (this.logs.length > 30) this.logs.shift()
+      this.$nextTick(() => {
+        const el = this.$refs.logList
+        if (el) el.scrollTop = el.scrollHeight
+      })
+    },
+    broadcastIncrement() {
+      this.count++
+      this.flash()
+      if (this.isMicroApp) {
+        // globalData 自动广播给主应用和所有子应用（包括 vue3-app）
+        window.microApp.setGlobalData({ count: this.count, from: 'vue2-app' })
+        this.addLog(`vue2 → globalData: 广播计数 ${this.count}（主应用 + vue3 均收到）`, 'send')
+      } else {
+        this.addLog(`[独立模式] +1 → ${this.count}`, 'send')
+      }
+    },
+    resetCount() {
+      this.count = 0
+      this.flash()
+      if (this.isMicroApp) {
+        window.microApp.setGlobalData({ count: 0, from: 'vue2-app' })
+        this.addLog(`归零 → globalData（全应用同步）`, 'send')
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.home {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+
+.home h1 {
+  font-size: 22px;
+  font-weight: 700;
+  color: #42b883;
+  margin-bottom: 12px;
+}
+
+.env-badge {
+  display: inline-block;
+  padding: 6px 16px;
+  background: #f0faf3;
+  color: #2e7d32;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 24px;
+}
+
+.env-badge.standalone {
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+/* 通信演示 */
+.comm-demo {
+  border: 2px solid #42b883;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.comm-title {
+  background: linear-gradient(135deg, #42b883, #35495e);
+  color: #fff;
+  padding: 10px 20px;
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.counter-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: #f0faf3;
+  border-bottom: 1px solid #e0f0e8;
+}
+
+.counter-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #555;
+}
+
+.counter-value {
+  font-size: 48px;
+  font-weight: 800;
+  color: #42b883;
+  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>