Files
crmchat/admin/src/App.vue
T
feng0207 9e8186e5d3 修复客服嵌入问题并更新前端构建产物
- 管理端前端设备判定改为按宽高比(嵌入竖屏容器时正确使用手机版布局)
- 统计上报跨源读取 parent.location 报错防护(降级用 referrer)
- 续接会话时校验客服在线,离线不再误入聊天页
- 聊天记录整理与消息发送的用户资料缺失空值防护,避免接口 400
- entrypoint 数据库导入加空库守卫,容器重启/线上更新不再重置数据
2026-09-25 22:15:01 +08:00

65 lines
1.6 KiB
Vue

<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
import { on, off } from 'iview/src/utils/dom'
import { setMatchMedia } from 'iview/src/utils/assist'
import { mapMutations } from 'vuex'
setMatchMedia()
export default {
name: 'app',
methods: {
...mapMutations('media', [
'setDevice'
]),
handleWindowResize () {
this.handleMatchMedia()
},
handleMatchMedia () {
// 竖屏(宽高比 < 1)走手机版布局,横屏走 PC 布局。
// 嵌入竖屏 iframe(如游戏内客服)时由宿主容器形状决定,不受绝对宽度阈值影响
const w = document.documentElement.clientWidth || window.innerWidth
const h = document.documentElement.clientHeight || window.innerHeight
if (h > 0 && w / h < 1) {
const css = 'calc(100vw/7.5)'
document.documentElement.style.fontSize = css;
this.setDevice('Mobile')
} else {
this.setDevice('Desktop')
}
}
},
mounted () {
on(window, 'resize', this.handleWindowResize)
this.handleMatchMedia()
},
beforeDestroy () {
off(window, 'resize', this.handleWindowResize)
}
}
</script>
<style lang="less">
.size{
width: 100%;
height: 100%;
}
html,body{
.size;
overflow: hidden;
margin: 0;
padding: 0;
}
#app {
.size;
}
</style>