mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-13 21:06:42 +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>
|
</el-button>
|
||||||
</div>
|
</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
|
<div
|
||||||
class="welcome-message"
|
class="welcome-message"
|
||||||
ref="messageContainer"
|
ref="messageContainer"
|
||||||
@@ -112,6 +115,7 @@ import { mapState } from 'vuex'
|
|||||||
import messages from './components/messages.vue'
|
import messages from './components/messages.vue'
|
||||||
import sendMessage from './components/sendMessage.vue'
|
import sendMessage from './components/sendMessage.vue'
|
||||||
import openImg from './components/open.png'
|
import openImg from './components/open.png'
|
||||||
|
import LanServiceChecker from "@/components/LanServiceChecker.vue";
|
||||||
export default {
|
export default {
|
||||||
name: 'CaseExpertDialog',
|
name: 'CaseExpertDialog',
|
||||||
props: {
|
props: {
|
||||||
@@ -121,6 +125,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
LanServiceChecker,
|
||||||
messages,
|
messages,
|
||||||
sendMessage
|
sendMessage
|
||||||
},
|
},
|
||||||
@@ -468,6 +473,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
isLan: true,
|
||||||
openImg,
|
openImg,
|
||||||
AIContent: '',
|
AIContent: '',
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
|
|||||||
Reference in New Issue
Block a user