user-behavior-monitor 1.0.0 → 2.0.0

package/dist/user-behavior-monitor.umd.js

@@ -177,6 +177,17 @@ function toComment(sourceMap) {
 }
 
 
+/***/ }),
+
+/***/ "3505":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_UserBehaviorMonitor_vue_vue_type_style_index_0_id_4f34cec0_prod_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("f079");
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_UserBehaviorMonitor_vue_vue_type_style_index_0_id_4f34cec0_prod_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_UserBehaviorMonitor_vue_vue_type_style_index_0_id_4f34cec0_prod_lang_css__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "499e":
@@ -445,18 +456,7 @@ function applyToTag (styleElement, obj) {
 
 /***/ }),
 
-/***/ "533e":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_UserBehaviorMonitor_vue_vue_type_style_index_0_id_06a138e4_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("d1b1");
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_UserBehaviorMonitor_vue_vue_type_style_index_0_id_06a138e4_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_UserBehaviorMonitor_vue_vue_type_style_index_0_id_06a138e4_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
-/***/ }),
-
-/***/ "9cfc":
+/***/ "a042":
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__("2350")(false);
@@ -464,26 +464,26 @@ exports = module.exports = __webpack_require__("2350")(false);
 
 
 // module
-exports.push([module.i, ".user-behavior-monitor[data-v-06a138e4]{display:none}.behavior-warning-dialog[data-v-06a138e4]  .el-dialog__body{text-align:center;font-size:16px;padding:30px 20px}.behavior-warning-dialog[data-v-06a138e4]{z-index:9999!important}", ""]);
+exports.push([module.i, ".behavior-warning-dialog.el-dialog.el-dialog--center{text-align:left}", ""]);
 
 // exports
 
 
 /***/ }),
 
-/***/ "d1b1":
+/***/ "f079":
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__("9cfc");
+var content = __webpack_require__("a042");
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = __webpack_require__("499e").default
-var update = add("2c53b590", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("1c569d63", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -512,12 +512,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7caff2c6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/UserBehaviorMonitor.vue?vue&type=template&id=06a138e4&scoped=true
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"behaviorMonitor",staticClass:"user-behavior-monitor"},[_c('el-dialog',{attrs:{"visible":_vm.showWarning,"show-close":false,"modal":true,"width":"30%","center":"","custom-class":"behavior-warning-dialog","append-to-body":true,"modal-append-to-body":true,"close-on-click-modal":false,"close-on-press-escape":false},on:{"update:visible":function($event){_vm.showWarning=$event}}},[_c('span',[_vm._v(_vm._s(_vm.warningMessage))])]),_c('button',{staticStyle:{"position":"fixed","top":"10px","right":"10px","z-index":"10000"},on:{"click":_vm.testWarning}},[_vm._v("\n    测试警告\n  ")])],1)}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"14550f6a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/UserBehaviorMonitor.vue?vue&type=template&id=4f34cec0
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"behaviorMonitor",staticClass:"user-behavior-monitor"},[_c('el-dialog',{attrs:{"title":"提示","visible":_vm.showWarning,"show-close":false,"modal":true,"width":"30%","center":"","custom-class":"behavior-warning-dialog"},on:{"update:visible":function($event){_vm.showWarning=$event}}},[_c('span',[_vm._v(_vm._s(_vm.warningMessage))])])],1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/UserBehaviorMonitor.vue?vue&type=template&id=06a138e4&scoped=true
+// CONCATENATED MODULE: ./src/components/UserBehaviorMonitor.vue?vue&type=template&id=4f34cec0
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/UserBehaviorMonitor.vue?vue&type=script&lang=js
 //
@@ -537,23 +537,15 @@ var staticRenderFns = []
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
-//
 
 /* harmony default export */ var UserBehaviorMonitorvue_type_script_lang_js = ({
   name: 'UserBehaviorMonitor',
   props: {
     // WebSocket服务器地址
-    websocketUrl: {
-      type: String,
-      required: true
-    },
+    // websocketUrl: {
+    //   type: String,
+    //   required: true
+    // },
     // 倒计时时长（分钟）
     timeoutMinutes: {
       type: Number,
@@ -567,39 +559,104 @@ var staticRenderFns = []
   },
   data() {
     return {
-      mouseMoveThrottled:false,
-      websocket: null,
+      mouseMoveThrottled: false,
+      socket: null,
       countdownTimer: null,
       warningTimer: null,
       showWarning: false,
-      warningMessage: `您已${this.timeoutMinutes}分钟未操作，将在${this.warningMinutes}分钟后自动退出`,
+      // warningMinutes
+      warningMessage: `您已${this.timeoutMinutes}分钟未操作，将在1分钟后自动退出`,
       lastActivityTime: null,
-      isMonitoring: false
+      isMonitoring: false,
+      currentTimeoutMinutes: 10,
+      currentWarningMinutes: 1
     };
   },
   mounted() {
-    console.log('开始开始！ mounted');
-    this.initMonitor();
+    // 检查当前路由是否包含/login，如果不包含则初始化监控
+    if (!this.isLoginRoute()) {
+      this.initMonitor();
+    }
   },
   beforeDestroy() {
-    console.log('开始开始！ beforeDestroy');
     this.destroyMonitor();
   },
+  watch: {
+    // 监听路由变化
+    '$route'(to, from) {
+      // 安全检查 from.href 是否存在
+      const isFromLogin = from.path.includes('/login') || 
+                        (from.href && from.href.includes('/login'));
+      
+      // 检查当前是否为登录路由
+      const isToLogin = this.isLoginRoute();
+      
+      // 如果从登录页跳转到非登录页，且监控未启动，则初始化监控
+      if (isFromLogin && !isToLogin && !this.isMonitoring) {
+        this.initMonitor();
+      }
+      // 如果从非登录页跳转到登录页，且监控正在运行，则销毁监控
+      else if (!isFromLogin && isToLogin && this.isMonitoring) {
+        this.destroyMonitor();
+      }
+    }
+  },
   methods: {
-    testWarning() {
-      console.log('Testing warning display');
-      this.showWarning = true;
+    // 检查当前路由是否为登录页面
+    isLoginRoute() {
+      // 优先检查 Vue Router 路由
+      if (this.$route && this.$route.path) {
+        if (this.$route.path.includes('/login')) {
+          return true;
+        }
+      }
+      
+      // 检查浏览器地址栏作为后备
+      if (typeof window !== 'undefined') {
+        return window.location.pathname.includes('/login') || 
+               window.location.href.includes('/login');
+      }
+      
+      return false;
+    },
+    
+    updateTimeoutSettings(timeoutMinutes, warningMinutes) {
+      if (timeoutMinutes !== undefined) {
+        this.currentTimeoutMinutes = timeoutMinutes;
+        localStorage.setItem('userBehavior_timeoutMinutes', timeoutMinutes.toString());
+      }
+      
+      if (warningMinutes !== undefined) {
+        this.currentWarningMinutes = warningMinutes;
+        localStorage.setItem('userBehavior_warningMinutes', warningMinutes.toString());
+      }
+      
+      // 更新警告消息
+      // ${this.currentWarningMinutes}
+      this.warningMessage = `您已${this.currentTimeoutMinutes}分钟未操作，将在1分钟后自动退出`;
+      
+      // 重置计时器
+      this.resetTimer();
     },
     // 初始化监控
     initMonitor() {
-      console.log('Initializing monitor');
+      // 再次检查确保不在登录页面
+      if (this.isLoginRoute()) {
+        // 如果在登录页面，确保清理所有监控资源
+        this.destroyMonitor();
+        return;
+      }
+      
       if (this.isMonitoring) return;
       
       this.isMonitoring = true;
       this.lastActivityTime = Date.now();
       
+      // 初始化WebSocket连接
+      this.initWebSocket();
+      
       // 启动倒计时
-      this.startCountdown();
+      // this.startCountdown();
       
       // 绑定事件监听器
       this.bindEventListeners();
@@ -613,71 +670,183 @@ var staticRenderFns = []
       if (this.countdownTimer) clearInterval(this.countdownTimer);
       if (this.warningTimer) clearTimeout(this.warningTimer);
       
+      // 关闭WebSocket连接
+      if (this.socket) {
+        this.socket.close();
+        this.socket = null;
+      }
+      
       // 解绑事件监听器
       this.unbindEventListeners();
     },
     
+    // 初始化WebSocket连接
+    initWebSocket() {
+      try {
+        // 使用传入的WebSocket URL
+        const websocketUrl =  `wss://${location.host}/xy-api/auth-server/ws/user-activity`;
+        
+        // 获取token（假设存储在localStorage中）
+        let token = '';
+        try {
+          const apiHeader = localStorage.getItem('api_header');
+          if (apiHeader) {
+            token = JSON.parse(apiHeader).Authorization || '';
+          }
+        } catch (e) {
+          token = localStorage.getItem('token') || '';
+        }
+        
+        // 创建WebSocket连接
+        this.socket = new WebSocket(`${websocketUrl}?token=${encodeURIComponent(token)}`);
+        
+        // 设置连接成功回调
+        this.socket.onopen = () => {
+          console.log('WebSocket连接已建立');
+          this.sendUserBehavior();
+          this.$emit('websocket-open');
+        };
+        
+        // 设置接收消息回调
+        this.socket.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data);
+            console.log('收到用户活动状态消息:', data);
+            this.handleActivityStatus(data);
+            this.$emit('websocket-message', data);
+          } catch (e) {
+            console.error('解析WebSocket消息失败:', e);
+          }
+        };
+        
+        // 设置连接关闭回调
+        this.socket.onclose = (event) => {
+          console.log('WebSocket连接已断开:', event.reason);
+          this.$emit('websocket-close');
+        };
+        
+        // 设置连接错误回调
+        this.socket.onerror = (error) => {
+          console.error('WebSocket错误:', error);
+          this.$emit('websocket-error', error);
+        };
+        
+      } catch (error) {
+        console.error('WebSocket初始化失败:', error);
+        this.$emit('websocket-error', error);
+      }
+    },
+    
+    // 处理活动状态信息
+    handleActivityStatus(data) {
+      if (data.type === 'ACTIVITY_STATUS' && data.data) {
+        const activityData = data.data;
+        
+        // 更新超时和警告时间配置
+        this.currentTimeoutMinutes = activityData.timeoutMinutes || 10;
+        this.currentWarningMinutes = activityData.reminderMinutes || 1;
+        
+        // 更新警告消息
+        this.warningMessage = `您已${this.currentTimeoutMinutes}分钟未操作，将在${this.currentWarningMinutes}分钟后自动退出`;
+        if(activityData.needReminder){
+          this.showWarningWarning(activityData.remainingMillis);
+        }
+        // remainingMillis
+
+
+        // 检查是否仍然活跃
+        //if (!activityData.isActive) {
+          //this.handleInactiveStatus();
+        //}
+      }
+      // 检查是否需要显示提醒
+      // let dataReminder=data.data;
+      //   if (dataReminder&&dataReminder.needReminder) {
+      //     this.showWarningWarning(dataReminder.remainingSeconds);
+      //   }
+    },
+    
+    // 处理非活跃状态
+    handleInactiveStatus() {
+      // 清空缓存
+      localStorage.clear();
+      sessionStorage.clear();
+      
+      // 跳转到登录页
+      //this.$router.push('/login');
+      
+      // 或者使用window.location
+       window.location.href = '/login';
+      
+      // 触发登出事件
+      this.$emit('logout');
+    },
+    
     // 发送用户行为数据到后端
     sendUserBehavior(data) {
-      // 用于测试：在控制台输出用户行为信息
-      console.log('用户行为监测:', data);
+      console.log('用户行为监测:')
+      if (this.warningTimer) clearTimeout(this.warningTimer);
+      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+        const message = {
+          "type": "HEARTBEAT",
+          "message": "心跳",
+        };
+        console.log('用户行为监测:', JSON.stringify(message));
+        this.socket.send(JSON.stringify(message));
+      }
     },
     
     // 绑定事件监听器
     bindEventListeners() {
-      console.log('Binding event listeners');
-      // 使用箭头函数或bind来保持this上下文
       // 鼠标事件
-      document.addEventListener('click', this.handleUserActivity.bind(this), true);
-      document.addEventListener('dblclick', this.handleUserActivity.bind(this), true);
-      document.addEventListener('mousedown', this.handleUserActivity.bind(this), true);
-      document.addEventListener('mouseup', this.handleUserActivity.bind(this), true);
-      document.addEventListener('mousemove', this.handleMouseMove.bind(this), true);
-      document.addEventListener('mouseover', this.handleUserActivity.bind(this), true);
-      document.addEventListener('mouseout', this.handleUserActivity.bind(this), true);
+      document.addEventListener('click', this.handleUserActivity, true);
+      document.addEventListener('dblclick', this.handleUserActivity, true);
+      document.addEventListener('mousedown', this.handleUserActivity, true);
+      document.addEventListener('mouseup', this.handleUserActivity, true);
+      document.addEventListener('mousemove', this.handleMouseMove, true);
+      document.addEventListener('mouseover', this.handleUserActivity, true);
+      document.addEventListener('mouseout', this.handleUserActivity, true);
       
       // 键盘事件
-      document.addEventListener('keydown', this.handleUserActivity.bind(this), true);
-      document.addEventListener('keyup', this.handleUserActivity.bind(this), true);
+      document.addEventListener('keydown', this.handleUserActivity, true);
+      document.addEventListener('keyup', this.handleUserActivity, true);
       
       // 表单事件
-      document.addEventListener('input', this.handleUserActivity.bind(this), true);
-      document.addEventListener('change', this.handleUserActivity.bind(this), true);
-      document.addEventListener('focus', this.handleUserActivity.bind(this), true);
-      document.addEventListener('blur', this.handleUserActivity.bind(this), true);
+      document.addEventListener('input', this.handleUserActivity, true);
+      document.addEventListener('change', this.handleUserActivity, true);
+      document.addEventListener('focus', this.handleUserActivity, true);
+      document.addEventListener('blur', this.handleUserActivity, true);
       
       // 滚动事件（防抖处理）
-      document.addEventListener('scroll', this.debounce(this.handleUserActivity, 300).bind(this), true);
+      document.addEventListener('scroll', this.debounce(this.handleUserActivity, 300), true);
       
       // 窗口事件
-      window.addEventListener('resize', this.handleUserActivity.bind(this), true);
-      window.addEventListener('beforeunload', this.handleBeforeUnload.bind(this));
+      window.addEventListener('resize', this.handleUserActivity, true);
+      window.addEventListener('beforeunload', this.handleBeforeUnload);
     },
     
     // 解绑事件监听器
     unbindEventListeners() {
-      console.log('Unbinding event listeners');
-      // 解绑时也要使用相同的方式
-      document.removeEventListener('click', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('dblclick', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('mousedown', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('mouseup', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('mousemove', this.handleMouseMove.bind(this), true);
-      document.removeEventListener('mouseover', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('mouseout', this.handleUserActivity.bind(this), true);
-      
-      document.removeEventListener('keydown', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('keyup', this.handleUserActivity.bind(this), true);
-      
-      document.removeEventListener('input', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('change', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('focus', this.handleUserActivity.bind(this), true);
-      document.removeEventListener('blur', this.handleUserActivity.bind(this), true);
-      
-      document.removeEventListener('scroll', this.debounce(this.handleUserActivity, 300).bind(this), true);
-      
-      window.removeEventListener('resize', this.handleUserActivity.bind(this), true);
-      window.removeEventListener('beforeunload', this.handleBeforeUnload.bind(this));
+      document.removeEventListener('click', this.handleUserActivity, true);
+      document.removeEventListener('dblclick', this.handleUserActivity, true);
+      document.removeEventListener('mousedown', this.handleUserActivity, true);
+      document.removeEventListener('mouseup', this.handleUserActivity, true);
+      document.removeEventListener('mousemove', this.handleMouseMove, true);
+      document.removeEventListener('mouseover', this.handleUserActivity, true);
+      document.removeEventListener('mouseout', this.handleUserActivity, true);
+      
+      document.removeEventListener('keydown', this.handleUserActivity, true);
+      document.removeEventListener('keyup', this.handleUserActivity, true);
+      
+      document.removeEventListener('input', this.handleUserActivity, true);
+      document.removeEventListener('change', this.handleUserActivity, true);
+      document.removeEventListener('focus', this.handleUserActivity, true);
+      document.removeEventListener('blur', this.handleUserActivity, true);
+      
+      document.removeEventListener('scroll', this.debounce(this.handleUserActivity, 300), true);
+      
+      window.removeEventListener('resize', this.handleUserActivity, true);
+      window.removeEventListener('beforeunload', this.handleBeforeUnload);
     },
     
     // 处理用户活动
@@ -708,7 +877,7 @@ var staticRenderFns = []
       
       this.sendUserBehavior(behaviorData);
     },
-     handleMouseMove(event) {
+    handleMouseMove(event) {
       if (!this.mouseMoveThrottled) {
         this.handleUserActivity(event);
         this.mouseMoveThrottled = true;
@@ -718,20 +887,6 @@ var staticRenderFns = []
       }
     },
     
-    // 处理鼠标移动（降低频率）
-    // handleMouseMove: function() {
-    //   let isThrottled = false;
-    //   return (event) => {
-    //     if (!isThrottled) {
-    //       this.handleUserActivity(event);
-    //       isThrottled = true;
-    //       setTimeout(() => {
-    //         isThrottled = false;
-    //       }, 500);
-    //     }
-    //   };
-    // }(),
-    
     // 判断是否为自动触发事件
     isAutomaticEvent(event) {
       // 自动刷新等非用户主动触发的事件
@@ -756,7 +911,6 @@ var staticRenderFns = []
     
     // 重置计时器
     resetTimer() {
-      console.log('Resetting timer');
       this.lastActivityTime = Date.now();
       this.showWarning = false;
       
@@ -767,52 +921,48 @@ var staticRenderFns = []
       }
       
       // 重新启动倒计时
-      this.startCountdown();
+      // this.startCountdown();
       
       this.$emit('user-active');
     },
     
     // 启动倒计时
     startCountdown() {
-      console.log('Starting countdown');
       // 清除现有定时器
       if (this.countdownTimer) clearInterval(this.countdownTimer);
       
       // 设置新的倒计时
       this.countdownTimer = setInterval(() => {
         const now = Date.now();
-        const elapsedMinutes = (now - this.lastActivityTime) / (1000 * 60);
-        console.log('Elapsed minutes:', elapsedMinutes);
+        const elapsedMinutes = (now - this.lastActivityTime) / (1000 * 50);
         
         // 检查是否需要显示警告
-        if (elapsedMinutes >= (this.timeoutMinutes - this.warningMinutes) && !this.warningTimer) {
-          console.log('Showing warning');
+        if (elapsedMinutes >= (this.currentTimeoutMinutes - this.currentWarningMinutes) && !this.warningTimer) {
           this.showWarningWarning();
         }
         
         // 检查是否超时
-        if (elapsedMinutes >= this.timeoutMinutes) {
-          console.log('Handling timeout');
+        if (elapsedMinutes >= this.currentTimeoutMinutes) {
           this.handleTimeout();
         }
       }, 1000);
     },
     
     // 显示超时警告
-    showWarningWarning() {
+    showWarningWarning(timeoutMinutes) {
+      let time=timeoutMinutes||50;
       console.log('Setting showWarning to true');
       this.showWarning = true;
       this.$emit('timeout-warning');
-      
+      if (this.warningTimer) clearTimeout(this.warningTimer);
       // 设置超时处理
       this.warningTimer = setTimeout(() => {
         this.handleTimeout();
-      }, this.warningMinutes * 60 * 1000);
+      }, 1 * time * 1000);
     },
     
     // 处理超时
     handleTimeout() {
-      console.log('Handling timeout');
       this.showWarning = false;
       this.$emit('timeout');
       
@@ -822,9 +972,24 @@ var staticRenderFns = []
     
     // 登出操作
     logout() {
-      // 用于测试：在控制台输出登出信息
-      console.log('用户超时登出');
+      localStorage.clear();
+      sessionStorage.clear();
+      location.reload();
+      // 跳转到登录页
+      //this.$router.push('/login');
       
+      // 或者使用window.location
+      //  window.location.href = '/login';
+      // 发送登出消息到后端
+      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+        const message = {
+          type: 'logout',
+          timestamp: Date.now()
+        };
+        this.socket.send(JSON.stringify(message));
+      }
+      
+      // 触发登出事件
       this.$emit('logout');
       
       // 清除定时器
@@ -834,21 +999,47 @@ var staticRenderFns = []
     
     // 处理页面卸载前的操作
     handleBeforeUnload(event) {
-      // 用于测试：在控制台输出页面卸载信息
-      console.log('页面即将卸载');
+      // 发送页面关闭消息
+      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+        const message = {
+          type: 'page_unload',
+          timestamp: Date.now()
+        };
+        this.socket.send(JSON.stringify(message));
+      }
     },
     
     // 手动重置监控
     reset() {
+      // 检查当前路由，如果在登录页面则销毁监控
+      if (this.isLoginRoute()) {
+        this.destroyMonitor();
+        return;
+      }
+      
       this.resetTimer();
+    },
+    
+    // 重新连接WebSocket
+    reconnect() {
+      // 检查当前路由，如果在登录页面则销毁监控
+      if (this.isLoginRoute()) {
+        this.destroyMonitor();
+        return;
+      }
+      
+      if (this.socket) {
+        this.socket.close();
+      }
+      this.initWebSocket();
     }
   }
 });
 
 // CONCATENATED MODULE: ./src/components/UserBehaviorMonitor.vue?vue&type=script&lang=js
  /* harmony default export */ var components_UserBehaviorMonitorvue_type_script_lang_js = (UserBehaviorMonitorvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./src/components/UserBehaviorMonitor.vue?vue&type=style&index=0&id=06a138e4&prod&scoped=true&lang=css
-var UserBehaviorMonitorvue_type_style_index_0_id_06a138e4_prod_scoped_true_lang_css = __webpack_require__("533e");
+// EXTERNAL MODULE: ./src/components/UserBehaviorMonitor.vue?vue&type=style&index=0&id=4f34cec0&prod&lang=css
+var UserBehaviorMonitorvue_type_style_index_0_id_4f34cec0_prod_lang_css = __webpack_require__("3505");
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -963,7 +1154,7 @@ var component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "06a138e4",
+  null,
   null
   
 )