feat(设备管理): 使用函数替代映射表获取设备和状态信息
This commit is contained in:
zhang1106
+35
-1
@@ -1,4 +1,4 @@
|
||||
import React, { useState, Suspense, lazy } from 'react';
|
||||
import React, { useState, useEffect, Suspense, lazy } from 'react';
|
||||
import {
|
||||
Layout,
|
||||
Menu,
|
||||
@@ -48,6 +48,8 @@ import { useAuth } from './context/AuthContext';
|
||||
import { ConfigProvider, useConfig } from './context/ConfigContext';
|
||||
import { Scene3DProvider } from './context/Scene3DContext';
|
||||
import { useDesignTokens } from './hooks/useDesignTokens';
|
||||
import useIdleTimeout from './hooks/useIdleTimeout';
|
||||
import axios from 'axios';
|
||||
import { Spin } from 'antd';
|
||||
|
||||
const Dashboard = lazy(() => import('./pages/Dashboard'));
|
||||
@@ -127,15 +129,47 @@ const ProtectedRoute = ({ component: Component }) => (
|
||||
</PrivateRoute>
|
||||
);
|
||||
|
||||
// 默认空闲超时配置
|
||||
const DEFAULT_IDLE_CONFIG = {
|
||||
timeout: 10 * 60 * 1000, // 10分钟
|
||||
warningTime: 30 * 1000, // 30秒
|
||||
};
|
||||
|
||||
const AppLayout = ({ children }) => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [activeKey, setActiveKey] = useState('dashboard');
|
||||
const [idleConfig, setIdleConfig] = useState(DEFAULT_IDLE_CONFIG);
|
||||
const { user, logout } = useAuth();
|
||||
const { config } = useConfig();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const designTokens = useDesignTokens();
|
||||
|
||||
// 获取空闲超时配置
|
||||
useEffect(() => {
|
||||
const fetchIdleConfig = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/system-settings/idle-timeout');
|
||||
setIdleConfig({
|
||||
timeout: response.data.timeout,
|
||||
warningTime: response.data.warningTime,
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn('获取空闲超时配置失败，使用默认配置:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchIdleConfig();
|
||||
}, []);
|
||||
|
||||
// 启用空闲超时检测
|
||||
useIdleTimeout({
|
||||
timeout: idleConfig.timeout,
|
||||
warningTime: idleConfig.warningTime,
|
||||
onLogout: logout,
|
||||
enabled: true,
|
||||
});
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
message.success('已退出登录');
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
import { useEffect, useRef, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { message, Modal } from 'antd';
|
||||
|
||||
/**
|
||||
* 用户空闲超时检测 Hook
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {number} options.timeout - 超时时间（毫秒），默认30分钟
|
||||
* @param {number} options.warningTime - 警告提示时间（毫秒），默认超时前1分钟
|
||||
* @param {Function} options.onLogout - 登出回调函数
|
||||
* @param {boolean} options.enabled - 是否启用，默认true
|
||||
*/
|
||||
const useIdleTimeout = ({
|
||||
timeout = 30 * 60 * 1000, // 默认30分钟
|
||||
warningTime = 60 * 1000, // 默认提前1分钟警告
|
||||
onLogout,
|
||||
enabled = true,
|
||||
} = {}) => {
|
||||
const navigate = useNavigate();
|
||||
const timerRef = useRef(null);
|
||||
const warningTimerRef = useRef(null);
|
||||
const modalRef = useRef(null);
|
||||
const lastActivityRef = useRef(Date.now());
|
||||
|
||||
// 清除所有定时器
|
||||
const clearTimers = useCallback(() => {
|
||||
if (timerRef.current) {
|
||||
clearTimeout(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
if (warningTimerRef.current) {
|
||||
clearTimeout(warningTimerRef.current);
|
||||
warningTimerRef.current = null;
|
||||
}
|
||||
if (modalRef.current) {
|
||||
modalRef.current.destroy();
|
||||
modalRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 执行登出
|
||||
const handleLogout = useCallback(() => {
|
||||
clearTimers();
|
||||
|
||||
// 清除登录状态
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
|
||||
// 执行自定义登出回调
|
||||
if (onLogout) {
|
||||
onLogout();
|
||||
}
|
||||
|
||||
message.warning('由于长时间未操作，您已自动退出登录', 3);
|
||||
navigate('/login');
|
||||
}, [clearTimers, navigate, onLogout]);
|
||||
|
||||
// 显示超时警告
|
||||
const showWarning = useCallback(() => {
|
||||
let countdown = Math.ceil(warningTime / 1000);
|
||||
|
||||
modalRef.current = Modal.warning({
|
||||
title: '即将超时退出',
|
||||
content: `由于长时间未操作，系统将在 ${countdown} 秒后自动退出登录，请重新登录。`,
|
||||
okText: '保持登录',
|
||||
onOk: () => {
|
||||
// 用户点击保持登录，重置计时器
|
||||
resetTimer();
|
||||
},
|
||||
maskClosable: false,
|
||||
keyboard: false,
|
||||
});
|
||||
|
||||
// 更新倒计时
|
||||
const countdownInterval = setInterval(() => {
|
||||
countdown -= 1;
|
||||
if (modalRef.current && countdown > 0) {
|
||||
modalRef.current.update({
|
||||
content: `由于长时间未操作，系统将在 ${countdown} 秒后自动退出登录，请重新登录。`,
|
||||
});
|
||||
}
|
||||
if (countdown <= 0) {
|
||||
clearInterval(countdownInterval);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// 警告时间结束后自动登出
|
||||
warningTimerRef.current = setTimeout(() => {
|
||||
clearInterval(countdownInterval);
|
||||
handleLogout();
|
||||
}, warningTime);
|
||||
}, [warningTime, handleLogout]);
|
||||
|
||||
// 重置计时器
|
||||
const resetTimer = useCallback(() => {
|
||||
if (!enabled) return;
|
||||
|
||||
clearTimers();
|
||||
lastActivityRef.current = Date.now();
|
||||
|
||||
// 设置警告定时器
|
||||
if (warningTime > 0 && timeout > warningTime) {
|
||||
warningTimerRef.current = setTimeout(() => {
|
||||
showWarning();
|
||||
}, timeout - warningTime);
|
||||
}
|
||||
|
||||
// 设置超时定时器
|
||||
timerRef.current = setTimeout(() => {
|
||||
handleLogout();
|
||||
}, timeout);
|
||||
}, [enabled, timeout, warningTime, clearTimers, showWarning, handleLogout]);
|
||||
|
||||
// 监听用户活动事件
|
||||
useEffect(() => {
|
||||
if (!enabled) {
|
||||
clearTimers();
|
||||
return;
|
||||
}
|
||||
|
||||
// 定义需要监听的事件
|
||||
const events = [
|
||||
'mousedown',
|
||||
'mousemove',
|
||||
'keydown',
|
||||
'scroll',
|
||||
'touchstart',
|
||||
'click',
|
||||
'wheel',
|
||||
];
|
||||
|
||||
// 事件处理函数
|
||||
const handleActivity = () => {
|
||||
// 防抖：避免频繁重置
|
||||
const now = Date.now();
|
||||
if (now - lastActivityRef.current < 1000) {
|
||||
return;
|
||||
}
|
||||
resetTimer();
|
||||
};
|
||||
|
||||
// 绑定事件监听
|
||||
events.forEach(event => {
|
||||
document.addEventListener(event, handleActivity, { passive: true });
|
||||
});
|
||||
|
||||
// 初始化计时器
|
||||
resetTimer();
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
events.forEach(event => {
|
||||
document.removeEventListener(event, handleActivity);
|
||||
});
|
||||
clearTimers();
|
||||
};
|
||||
}, [enabled, resetTimer, clearTimers]);
|
||||
|
||||
// 页面可见性变化处理
|
||||
useEffect(() => {
|
||||
if (!enabled) return;
|
||||
|
||||
const handleVisibilityChange = () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
// 页面重新可见时检查是否已超时
|
||||
const idleTime = Date.now() - lastActivityRef.current;
|
||||
if (idleTime >= timeout) {
|
||||
handleLogout();
|
||||
} else {
|
||||
resetTimer();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
};
|
||||
}, [enabled, timeout, resetTimer, handleLogout]);
|
||||
|
||||
return {
|
||||
resetTimer,
|
||||
clearTimers,
|
||||
getIdleTime: () => Date.now() - lastActivityRef.current,
|
||||
};
|
||||
};
|
||||
|
||||
export default useIdleTimeout;
|
||||
@@ -2222,7 +2222,7 @@ function DeviceManagement() {
|
||||
{selectedDevice.type ? (
|
||||
<Space>
|
||||
{getDeviceTypeIcon(selectedDevice.type)}
|
||||
<span>{typeMap[selectedDevice.type] || selectedDevice.type}</span>
|
||||
<span>{getTypeLabel(selectedDevice.type)}</span>
|
||||
</Space>
|
||||
) : (
|
||||
'-'
|
||||
@@ -2283,13 +2283,13 @@ function DeviceManagement() {
|
||||
style={{
|
||||
marginLeft: 8,
|
||||
color: selectedDevice.status
|
||||
? statusMap[selectedDevice.status]?.color
|
||||
? getStatusConfig(selectedDevice.status).color
|
||||
: '#666',
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
{selectedDevice.status
|
||||
? statusMap[selectedDevice.status]?.text || selectedDevice.status
|
||||
? getStatusConfig(selectedDevice.status).text || selectedDevice.status
|
||||
: '-'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -368,7 +368,7 @@ const SystemSettings = () => {
|
||||
'site_logo',
|
||||
'timezone',
|
||||
'date_format',
|
||||
'session_timeout',
|
||||
'idle_timeout',
|
||||
'max_login_attempts',
|
||||
'maintenance_mode',
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user