mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 20:06:44 +08:00
feat(portal): 添加局域网服务检测功能
- 在 AICall.vue 中引入并使用 LanServiceChecker 组件 - 新增 LanServiceChecker.vue 组件,用于检测用户是否处于局域网环境 - 实现通过 fetch 发送 HEAD 请求以验证网络环境是否符合要求 - 添加重新检测按钮与加载状态提示 - 支持自定义错误信息展示 - 使用 AbortController 控制请求超时,提升用户体验
This commit is contained in:
96
src/components/LanServiceChecker.vue
Normal file
96
src/components/LanServiceChecker.vue
Normal 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>
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user