From 5a54f0cdaf8db4cc0afd374d77febd1d3e18f461 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Sun, 10 Nov 2024 16:45:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E4=BF=AE=E5=A4=8D=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=94=9F=E6=88=90=E5=99=A8=E4=B8=AD=E7=AC=AC=E4=B8=80?=
 =?UTF-8?q?=E6=AC=A1=E5=8A=A0=E8=BD=BD=E6=88=BF=E9=97=B4=E5=90=8ECSS?=
 =?UTF-8?q?=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/base.js                    | 10 ++++--
 frontend/src/main.js                        |  3 ++
 frontend/src/views/Room.vue                 | 12 +++++++
 frontend/src/views/StyleGenerator/index.vue | 38 +++++++++++++++------
 4 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/frontend/src/api/base.js b/frontend/src/api/base.js
index 44d7122..c107fe2 100644
--- a/frontend/src/api/base.js
+++ b/frontend/src/api/base.js
@@ -8,8 +8,11 @@ export const apiClient = axios.create({
   timeout: 10 * 1000,
 })
 
+export let init
 export let getBaseUrl
 if (!process.env.BACKEND_DISCOVERY) {
+  init = async function() {}
+
   const onRequest = config => {
     config.baseURL = getBaseUrl()
     return config
@@ -24,7 +27,12 @@ if (!process.env.BACKEND_DISCOVERY) {
   getBaseUrl = function() {
     return window.location.origin
   }
+
 } else {
+  init = async function() {
+    return updateBaseUrls()
+  }
+
   const onRequest = config => {
     let baseUrl = getBaseUrl()
     if (baseUrl === null) {
@@ -160,6 +168,4 @@ if (!process.env.BACKEND_DISCOVERY) {
     }
     return breaker
   }
-
-  await updateBaseUrls()
 }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 5412a32..2242bbc 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -5,6 +5,7 @@ if (!process.env.LIB_USE_CDN) {
   import('element-ui/lib/theme-chalk/index.css')
 }
 
+import * as apiBase from './api/base'
 import * as i18n from './i18n'
 import App from './App'
 import NotFound from './views/NotFound'
@@ -60,6 +61,8 @@ const router = new VueRouter({
   ]
 })
 
+await apiBase.init()
+
 new Vue({
   render: h => h(App),
   router,
diff --git a/frontend/src/views/Room.vue b/frontend/src/views/Room.vue
index f26959a..a43a207 100644
--- a/frontend/src/views/Room.vue
+++ b/frontend/src/views/Room.vue
@@ -142,6 +142,8 @@ export default {
         message: 'Loaded',
         duration: 500
       })
+
+      this.sendMessageToStylegen('stylegenExampleRoomLoad')
     },
     initConfig() {
       let locale = this.strConfig.lang
@@ -220,8 +222,18 @@ export default {
       this.textEmoticons = await chat.getTextEmoticons()
     },
 
+    sendMessageToStylegen(type, data = null) {
+      if (window.parent === window) {
+        return
+      }
+      let msg = { type, data }
+      window.parent.postMessage(msg, window.location.origin)
+    },
     // 处理样式生成器发送的消息
     onWindowMessage(event) {
+      if (event.source !== window.parent) {
+        return
+      }
       if (event.origin !== window.location.origin) {
         console.warn(`消息origin错误，${event.origin} != ${window.location.origin}`)
         return
diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue
index dbaaf2b..7a35b16 100644
--- a/frontend/src/views/StyleGenerator/index.vue
+++ b/frontend/src/views/StyleGenerator/index.vue
@@ -38,9 +38,7 @@
           </el-form-item>
         </el-form>
         <div id="example-container" :class="{ light: exampleBgLight }">
-          <iframe id="example-room-iframe" ref="exampleRoomIframe"
-            :src="exampleRoomUrl" frameborder="0" @load="onExampleRoomLoad"
-          ></iframe>
+          <iframe id="example-room-iframe" ref="exampleRoomIframe" :src="exampleRoomUrl" frameborder="0"></iframe>
         </div>
       </div>
     </el-col>
@@ -96,22 +94,42 @@ export default {
   },
   mounted() {
     this.debounceResult = this.inputResult = this.subComponentResult
+
+    window.addEventListener('message', this.onWindowMessage)
+  },
+  beforeDestroy() {
+    window.removeEventListener('message', this.onWindowMessage)
   },
   methods: {
-    onExampleRoomLoad() {
-      this.setExampleRoomCustomCss(this.debounceResult)
-      this.setExampleRoomClientStart(this.playAnimation)
+    sendMessageToExampleRoom(type, data = null) {
+      let msg = { type, data }
+      this.$refs.exampleRoomIframe.contentWindow.postMessage(msg, window.location.origin)
     },
+    // 处理房间发送的消息
+    onWindowMessage(event) {
+      if (event.source !== this.$refs.exampleRoomIframe.contentWindow) {
+        return
+      }
+      if (event.origin !== window.location.origin) {
+        console.warn(`消息origin错误，${event.origin} != ${window.location.origin}`)
+        return
+      }
+
+      let { type } = event.data
+      switch (type) {
+      case 'stylegenExampleRoomLoad':
+        this.setExampleRoomCustomCss(this.debounceResult)
+        this.setExampleRoomClientStart(this.playAnimation)
+        break
+      }
+    },
+
     setExampleRoomCustomCss(css) {
       this.sendMessageToExampleRoom('roomSetCustomStyle', { css })
     },
     setExampleRoomClientStart(isStart) {
       this.sendMessageToExampleRoom(isStart ? 'roomStartClient' : 'roomStopClient')
     },
-    sendMessageToExampleRoom(type, data = null) {
-      let msg = { type, data }
-      this.$refs.exampleRoomIframe.contentWindow.postMessage(msg, window.location.origin)
-    },
 
     copyResult() {
       this.$refs.result.select()