前端修复样式生成器中第一次加载房间后CSS不生效的问题

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()
 }

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,

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

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"
+          <iframe id="example-room-iframe" ref="exampleRoomIframe" :src="exampleRoomUrl" frameborder="0"></iframe>
-            :src="exampleRoomUrl" frameborder="0" @load="onExampleRoomLoad"
-          ></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() {
+    sendMessageToExampleRoom(type, data = null) {
-      this.setExampleRoomCustomCss(this.debounceResult)
+      let msg = { type, data }
-      this.setExampleRoomClientStart(this.playAnimation)
+      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()