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

This commit is contained in:
John Smith 2024-11-10 16:45:31 +08:00
parent cefca66d76
commit 5a54f0cdaf
4 changed files with 51 additions and 12 deletions

View File

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

View File

@ -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,

View File

@ -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

View File

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