feat(portal): 添加局域网服务检测功能

- 在 AICall.vue 中引入并使用 LanServiceChecker 组件
- 新增 LanServiceChecker.vue 组件,用于检测用户是否处于局域网环境
- 实现通过 fetch 发送 HEAD 请求以验证网络环境是否符合要求
- 添加重新检测按钮与加载状态提示
- 支持自定义错误信息展示
- 使用 AbortController 控制请求超时,提升用户体验
This commit is contained in:
hz
2025-12-10 09:24:55 +08:00
parent 738add6f18
commit 19ad9756f8
2 changed files with 103 additions and 1 deletions

View File

@@ -0,0 +1,96 @@
<script>
export default {
name: 'LanServiceChecker',
props: {
errorMsg: {
type: String,
default: '十分抱歉,您当前的网络环境不符合观看要求。为了保障课程信息的安全,您需要接入公司内网才能观看。'
},
// 控制是否显示
value: {type: Boolean, default: false}
},
created() {
this.lanServiceCheck()
},
data() {
return {
loading: false,
}
},
methods: {
syncValue(val) {
this.loading = false
this.$emit('input', val)
},
/**局域网检测*/
lanServiceCheck() {
this.loading = true
// 使用 AbortController 来控制超时
const controller = new AbortController();
const timeoutId = setTimeout(() => {
controller.abort();
this.syncValue(false);
}, 1000);
// 拼接随机参数(时间戳+随机数确保URL唯一防止缓存
const url = `${window.location.protocol}//uapi.boe.com.cn/500.html?t=${Date.now()}${Math.random()}`;
// 使用 fetch 发送 HEAD 请求
fetch(url, {
method: 'HEAD',
signal: controller.signal
})
.then(response => {
clearTimeout(timeoutId);
response.ok ? this.syncValue(true) : this.syncValue(false);
})
.catch(error => {
clearTimeout(timeoutId);
if (error.name !== 'AbortError') {
this.syncValue(true)
}
});
},
}
}
</script>
<template>
<div class="lan-checker-container">
<div v-if="value">
<div>
<span>{{ errorMsg }}</span>
</div>
<div class="check-btn" @click="lanServiceCheck">
<el-button v-loading="loading" type="primary">重新检测</el-button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.lan-checker-container {
height: 100%;
& > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.error-msg {
margin-top: 40px;
font-weight: 700;
font-size: 22px;
color: #ccc;
}
.check-btn {
margin-top: 20px;
text-align: center;
}
}
</style>

View File

@@ -27,8 +27,11 @@
</el-button>
</div>
<div class="content-wrapper" v-if="isLan">
<lan-service-checker v-model="isLan"/>
</div>
<!-- 内容区域 -->
<div class="content-wrapper">
<div class="content-wrapper" v-else >
<div
class="welcome-message"
ref="messageContainer"
@@ -112,6 +115,7 @@ import { mapState } from 'vuex'
import messages from './components/messages.vue'
import sendMessage from './components/sendMessage.vue'
import openImg from './components/open.png'
import LanServiceChecker from "@/components/LanServiceChecker.vue";
export default {
name: 'CaseExpertDialog',
props: {
@@ -121,6 +125,7 @@ export default {
}
},
components: {
LanServiceChecker,
messages,
sendMessage
},
@@ -468,6 +473,7 @@ export default {
},
data() {
return {
isLan: true,
openImg,
AIContent: '',
isLoading: false,