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
src/NodeList.js
+25 -24
View File
@@ -29,16 +29,27 @@ const NodeList = ({ nodes, selectedNodeId, setSelectedNodeId }) => {
};
const renderNodeRow = (key) => {
let node = nodes[key];
let status = node.status;
let health = status.getConstant('health');
let mode = status.getConstant('mode');
const node = nodes[key];
const status = node.status;
const health = status.getConstant('health');
const mode = status.getConstant('mode');
const isSelected = Number(key) === Number(selectedNodeId);
return (
<TableRow key={key} onClick={() => handleRowClick((Number(key)))} style={{ cursor: 'pointer' }}>
<TableRow
key={key}
onClick={() => handleRowClick(Number(key))}
sx={{
cursor: 'pointer',
backgroundColor: isSelected ? 'rgba(204, 120, 92, 0.08)' : 'transparent',
'&:hover': {
backgroundColor: 'rgba(245, 240, 232, 0.9)',
},
}}
>
<TableCell>{key}</TableCell>
<TableCell>{node.name}</TableCell>
<TableCell sx={{ width: 150 }}>{node.name}</TableCell>
<TableCell>{health}</TableCell>
<TableCell sx={{bgcolor: getModeColor(mode)}}>{mode}</TableCell>
<TableCell sx={{ bgcolor: getModeColor(mode), color: getModeColor(mode) ? 'common.white' : 'inherit' }}>{mode}</TableCell>
<TableCell>{secondsToTime(status.uptime_sec)}</TableCell>
<TableCell>{node.status.vendor_specific_status_code}</TableCell>
</TableRow>
@@ -48,25 +59,17 @@ const NodeList = ({ nodes, selectedNodeId, setSelectedNodeId }) => {
return (
<Box
component={Paper}
sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, height: '50%'}}
sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, height: '50%', backgroundColor: 'background.paper', border: '1px solid', borderColor: 'divider' }}
>
<Box margin={1} sx={{height: 20}}>
<Typography variant="caption">Online Nodes</Typography>
<Box margin={1} sx={{ height: 20 }}>
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600, letterSpacing: 0.2 }}>Online Nodes</Typography>
</Box>
<TableContainer
sx={{ overflow: 'auto' }}
>
<TableContainer sx={{ overflow: 'auto' }}>
<Table stickyHeader size="small">
<TableHead>
<TableRow>
<TableCell>NID</TableCell>
<TableCell
sx={{
width: 150,
}}
>
Name
</TableCell>
<TableCell>Name</TableCell>
<TableCell>Health</TableCell>
<TableCell>Mode</TableCell>
<TableCell>Uptime</TableCell>
@@ -74,9 +77,7 @@ const NodeList = ({ nodes, selectedNodeId, setSelectedNodeId }) => {
</TableRow>
</TableHead>
<TableBody>
{Object.keys(nodes).map((key) => (
renderNodeRow(key)
))}
{Object.keys(nodes).map((key) => renderNodeRow(key))}
</TableBody>
</Table>
</TableContainer>
@@ -84,4 +85,4 @@ const NodeList = ({ nodes, selectedNodeId, setSelectedNodeId }) => {
);
};
export default NodeList;
export default NodeList;