From 19ad9756f82c4e521edeb9b0b368fe47683cc99a Mon Sep 17 00:00:00 2001
From: hz <huang.ze@ebiz-digits.com>
Date: Wed, 10 Dec 2025 09:24:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(portal):=20=E6=B7=BB=E5=8A=A0=E5=B1=80?=
 =?UTF-8?q?=E5=9F=9F=E7=BD=91=E6=9C=8D=E5=8A=A1=E6=A3=80=E6=B5=8B=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 AICall.vue 中引入并使用 LanServiceChecker 组件
- 新增 LanServiceChecker.vue 组件，用于检测用户是否处于局域网环境
- 实现通过 fetch 发送 HEAD 请求以验证网络环境是否符合要求
- 添加重新检测按钮与加载状态提示
- 支持自定义错误信息展示
- 使用 AbortController 控制请求超时，提升用户体验
---
 src/components/LanServiceChecker.vue | 96 ++++++++++++++++++++++++++++
 src/views/portal/case/AICall.vue     |  8 ++-
 2 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 src/components/LanServiceChecker.vue

diff --git a/src/components/LanServiceChecker.vue b/src/components/LanServiceChecker.vue
new file mode 100644
index 00000000..f40e99fe
--- /dev/null
+++ b/src/components/LanServiceChecker.vue
@@ -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>
diff --git a/src/views/portal/case/AICall.vue b/src/views/portal/case/AICall.vue
index de28de92..aa61b877 100644
--- a/src/views/portal/case/AICall.vue
+++ b/src/views/portal/case/AICall.vue
@@ -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,