wuxu/DroneCan_WebTools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update visual design system

Browse Source
This commit is contained in:
wuxu
2026-05-24 19:47:05 +08:00
parent 1850c58197
commit 43d8563b79
11 changed files with 452 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/ConnectionIndicators.js
View File

@@ -7,29 +7,29 @@ const ConnectionIndicators = ({ isConnected, mavlinkSession, localNode }) => {
const [rxActive, setRxActive] = useState(false);
const txTimeout = useRef(null);
const rxTimeout = useRef(null);
useEffect(() => {
const handleFrameSend = () => {
setTxActive(true);
clearTimeout(txTimeout.current);
txTimeout.current = setTimeout(() => {
setTxActive(false);
}, 100); // Blink for 200ms
}, 100);
};
const handleFrameReceive = () => {
setRxActive(true);
clearTimeout(rxTimeout.current);
rxTimeout.current = setTimeout(() => {
setRxActive(false);
}, 100); // Blink for 200ms
}, 100);
};
if (mavlinkSession) {
mavlinkSession.on('mav-tx', handleFrameSend);
mavlinkSession.on('mav-rx', handleFrameReceive);
}
return () => {
if (mavlinkSession) {
mavlinkSession.removeListener('mav-tx', handleFrameSend);
@@ -39,14 +39,14 @@ const ConnectionIndicators = ({ isConnected, mavlinkSession, localNode }) => {
clearTimeout(rxTimeout.current);
};
}, [localNode, mavlinkSession]);
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mr: 5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mr: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', opacity: isConnected ? 1 : 0.3 }}>
<CircleIcon
fontSize="small"
sx={{
color: txActive && isConnected ? '#4caf50' : '#7e7e7e',
<CircleIcon
fontSize="small"
sx={{
color: txActive && isConnected ? '#5db872' : '#8e8b82',
width: '12px',
height: '12px',
transition: 'color 0.1s ease'
@@ -54,12 +54,12 @@ const ConnectionIndicators = ({ isConnected, mavlinkSession, localNode }) => {
/>
<Typography variant="caption" sx={{ ml: 0.5, color: 'text.secondary' }}>TX</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', opacity: isConnected ? 1 : 0.3 }}>
<CircleIcon
<CircleIcon
fontSize="small"
sx={{
color: rxActive && isConnected ? '#2196f3' : '#7e7e7e',
sx={{
color: rxActive && isConnected ? '#5db8a6' : '#8e8b82',
width: '12px',
height: '12px',
transition: 'color 0.1s ease'
@@ -71,4 +71,4 @@ const ConnectionIndicators = ({ isConnected, mavlinkSession, localNode }) => {
);
};
export default ConnectionIndicators;
export default ConnectionIndicators;