xinmicode/yunrui_asset
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 统一代码风格并配置ESLint和Prettier

Browse Source 
配置ESLint和Prettier规则
添加前端和后端的忽略文件
统一代码格式和缩进
修复代码风格问题
This commit is contained in:
zhang1106
2026-02-10 11:04:01 +08:00
parent f82d82e57e
commit afc372a432
61 changed files with 14976 additions and 6124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ServerBackplanePanel.jsx
+173 -54
View File
@@ -9,7 +9,7 @@ import {
DesktopOutlined,
UsbOutlined,
MonitorOutlined,
SettingOutlined
SettingOutlined,
} from '@ant-design/icons';
import PortPanel from './PortPanel';
import axios from 'axios';
@@ -23,8 +23,8 @@ const designTokens = {
error: '#ef4444',
warning: '#f59e0b',
metal: { light: '#9ca3af', DEFAULT: '#6b7280', dark: '#4b5563' },
slot: { empty: '#d1d5db', occupied: '#3b82f6' }
}
slot: { empty: '#d1d5db', occupied: '#3b82f6' },
},
};
/**
@@ -44,7 +44,7 @@ const ServerBackplanePanel = ({
cables,
allDevices,
onPortClick,
onManageNetworkCards
onManageNetworkCards,
}) => {
const [cards, setCards] = useState([]);
const [loading, setLoading] = useState(false);
@@ -82,9 +82,20 @@ const ServerBackplanePanel = ({
const name = (card.name || '').toLowerCase();
// 判断网卡类型
if (name.includes('idrac') || name.includes('ilo') || name.includes('bmc') || name.includes('mgmt') || name.includes('管理')) {
if (
name.includes('idrac') ||
name.includes('ilo') ||
name.includes('bmc') ||
name.includes('mgmt') ||
name.includes('管理')
) {
management.push({ ...card, type: 'management' });
} else if (slotNum === 0 || name.includes('onboard') || name.includes('板载') || name.includes('内置')) {
} else if (
slotNum === 0 ||
name.includes('onboard') ||
name.includes('板载') ||
name.includes('内置')
) {
onboard.push({ ...card, type: 'onboard' });
} else {
expansionSlots.push({ ...card, type: 'expansion', slotIndex: slotNum });
@@ -115,7 +126,7 @@ const ServerBackplanePanel = ({
alignItems: 'center',
gap: '6px',
border: '2px solid #4b5563',
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)'
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)',
}}
>
<div style={{ fontSize: '10px', color: '#9ca3af', fontWeight: 600 }}>MGMT</div>
@@ -134,7 +145,7 @@ const ServerBackplanePanel = ({
justifyContent: 'center',
cursor: 'pointer',
transition: 'all 0.2s',
boxShadow: '0 2px 4px rgba(0,0,0,0.3)'
boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
}}
>
<SettingOutlined style={{ fontSize: 16, color: '#10b981' }} />
@@ -152,7 +163,7 @@ const ServerBackplanePanel = ({
border: '2px dashed #6b7280',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
justifyContent: 'center',
}}
>
<PlusOutlined style={{ fontSize: 14, color: '#6b7280' }} />
@@ -160,11 +171,47 @@ const ServerBackplanePanel = ({
)}
{/* 其他接口占位 */}
<div style={{ width: '48px', height: '24px', background: '#1f2937', borderRadius: '2px', border: '1px solid #4b5563' }}>
<Text style={{ fontSize: '8px', color: '#6b7280', display: 'block', textAlign: 'center', lineHeight: '22px' }}>VGA</Text>
<div
style={{
width: '48px',
height: '24px',
background: '#1f2937',
borderRadius: '2px',
border: '1px solid #4b5563',
}}
>
<Text
style={{
fontSize: '8px',
color: '#6b7280',
display: 'block',
textAlign: 'center',
lineHeight: '22px',
}}
>
VGA
</Text>
</div>
<div style={{ width: '48px', height: '16px', background: '#1f2937', borderRadius: '2px', border: '1px solid #4b5563' }}>
<Text style={{ fontSize: '8px', color: '#6b7280', display: 'block', textAlign: 'center', lineHeight: '14px' }}>USB</Text>
<div
style={{
width: '48px',
height: '16px',
background: '#1f2937',
borderRadius: '2px',
border: '1px solid #4b5563',
}}
>
<Text
style={{
fontSize: '8px',
color: '#6b7280',
display: 'block',
textAlign: 'center',
lineHeight: '14px',
}}
>
USB
</Text>
</div>
</div>
);
@@ -182,11 +229,20 @@ const ServerBackplanePanel = ({
borderRadius: '4px',
padding: '12px',
border: '2px solid #6b7280',
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)'
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)',
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<Text style={{ fontSize: '11px', color: '#d1d5db', fontWeight: 600 }}>板载网卡 (Onboard)</Text>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: '8px',
}}
>
<Text style={{ fontSize: '11px', color: '#d1d5db', fontWeight: 600 }}>
板载网卡 (Onboard)
</Text>
{onboardCard && (
<Badge
count={onboardCard.ports?.length || 0}
@@ -204,18 +260,21 @@ const ServerBackplanePanel = ({
padding: '12px',
border: `2px solid ${onboardCard.ports?.length > 0 ? designTokens.colors.primary.main : '#6b7280'}`,
cursor: 'pointer',
transition: 'all 0.2s'
transition: 'all 0.2s',
}}
>
{/* 4个RJ45端口布局 */}
<div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
{[0, 1, 2, 3].map((idx) => {
{[0, 1, 2, 3].map(idx => {
const port = onboardCard.ports?.[idx];
const hasPort = !!port;
const isOccupied = hasPort && port.status === 'occupied';
return (
<Tooltip key={idx} title={hasPort ? `${port.portName} - ${port.status}` : '未配置'}>
<Tooltip
key={idx}
title={hasPort ? `${port.portName} - ${port.status}` : '未配置'}
>
<div
style={{
width: '40px',
@@ -224,15 +283,18 @@ const ServerBackplanePanel = ({
? 'linear-gradient(180deg, #374151 0%, #1f2937 100%)'
: '#374151',
borderRadius: '4px',
border: `2px solid ${hasPort
? (isOccupied ? designTokens.colors.success : designTokens.colors.metal.light)
: '#4b5563'
border: `2px solid ${
hasPort
? isOccupied
? designTokens.colors.success
: designTokens.colors.metal.light
: '#4b5563'
}`,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
position: 'relative'
position: 'relative',
}}
>
{/* LED指示灯 */}
@@ -241,13 +303,11 @@ const ServerBackplanePanel = ({
width: '4px',
height: '4px',
borderRadius: '50%',
background: hasPort
? (isOccupied ? '#10b981' : '#6b7280')
: '#374151',
background: hasPort ? (isOccupied ? '#10b981' : '#6b7280') : '#374151',
position: 'absolute',
top: '2px',
right: '2px',
boxShadow: isOccupied ? '0 0 4px #10b981' : 'none'
boxShadow: isOccupied ? '0 0 4px #10b981' : 'none',
}}
/>
<span style={{ fontSize: '8px', color: '#9ca3af' }}>⬡</span>
@@ -273,7 +333,7 @@ const ServerBackplanePanel = ({
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
gap: '8px'
gap: '8px',
}}
>
<PlusOutlined style={{ fontSize: 20, color: '#6b7280' }} />
@@ -303,13 +363,23 @@ const ServerBackplanePanel = ({
borderRadius: '4px',
padding: '12px',
border: '2px solid #6b7280',
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)'
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)',
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: '8px',
}}
>
<Text style={{ fontSize: '11px', color: '#d1d5db', fontWeight: 600 }}>PCIe 扩展插槽</Text>
<Space size={4}>
<Badge count={expansionSlots.length} style={{ backgroundColor: designTokens.colors.primary.main }} />
<Badge
count={expansionSlots.length}
style={{ backgroundColor: designTokens.colors.primary.main }}
/>
<Text style={{ fontSize: '10px', color: '#9ca3af' }}>/{totalSlots}</Text>
</Space>
</div>
@@ -318,7 +388,9 @@ const ServerBackplanePanel = ({
{slots.map(({ slotNumber, card }) => (
<Tooltip
key={slotNumber}
title={card ? `${card.name} (${card.ports?.length || 0}口)` : `插槽 ${slotNumber} (空闲)`}
title={
card ? `${card.name} (${card.ports?.length || 0}口)` : `插槽 ${slotNumber} (空闲)`
}
>
<div
onClick={() => card && setSelectedSlot(card)}
@@ -337,15 +409,24 @@ const ServerBackplanePanel = ({
padding: '6px',
cursor: card ? 'pointer' : 'default',
transition: 'all 0.2s',
boxShadow: card ? '0 2px 8px rgba(59, 130, 246, 0.3)' : 'none'
boxShadow: card ? '0 2px 8px rgba(59, 130, 246, 0.3)' : 'none',
}}
>
<Text style={{ fontSize: '9px', color: '#6b7280', fontWeight: 600 }}>Slot {slotNumber}</Text>
<Text style={{ fontSize: '9px', color: '#6b7280', fontWeight: 600 }}>
Slot {slotNumber}
</Text>
{card ? (
<>
<CloudServerOutlined style={{ fontSize: 20, color: '#3b82f6' }} />
<div style={{ display: 'flex', gap: '2px', flexWrap: 'wrap', justifyContent: 'center' }}>
<div
style={{
display: 'flex',
gap: '2px',
flexWrap: 'wrap',
justifyContent: 'center',
}}
>
{card.ports?.slice(0, 4).map((port, idx) => (
<div
key={idx}
@@ -354,19 +435,30 @@ const ServerBackplanePanel = ({
height: '8px',
borderRadius: '1px',
background: port.status === 'occupied' ? '#10b981' : '#6b7280',
boxShadow: port.status === 'occupied' ? '0 0 2px #10b981' : 'none'
boxShadow: port.status === 'occupied' ? '0 0 2px #10b981' : 'none',
}}
/>
))}
{card.ports?.length > 4 && (
<Text style={{ fontSize: '8px', color: '#9ca3af' }}>+{card.ports.length - 4}</Text>
<Text style={{ fontSize: '8px', color: '#9ca3af' }}>
+{card.ports.length - 4}
</Text>
)}
</div>
<Text style={{ fontSize: '8px', color: '#9ca3af' }}>{card.ports?.length || 0}口</Text>
<Text style={{ fontSize: '8px', color: '#9ca3af' }}>
{card.ports?.length || 0}口
</Text>
</>
) : (
<>
<div style={{ width: '40px', height: '40px', border: '2px dashed #4b5563', borderRadius: '4px' }} />
<div
style={{
width: '40px',
height: '40px',
border: '2px dashed #4b5563',
borderRadius: '4px',
}}
/>
<Text style={{ fontSize: '8px', color: '#6b7280' }}>空闲</Text>
</>
)}
@@ -390,11 +482,13 @@ const ServerBackplanePanel = ({
border: '2px solid #4b5563',
display: 'flex',
flexDirection: 'column',
gap: '8px'
gap: '8px',
}}
>
<Text style={{ fontSize: '10px', color: '#9ca3af', fontWeight: 600, textAlign: 'center' }}>电源</Text>
{[1, 2].map((psu) => (
<Text style={{ fontSize: '10px', color: '#9ca3af', fontWeight: 600, textAlign: 'center' }}>
电源
</Text>
{[1, 2].map(psu => (
<div
key={psu}
style={{
@@ -406,7 +500,7 @@ const ServerBackplanePanel = ({
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: '4px'
gap: '4px',
}}
>
<ThunderboltOutlined style={{ fontSize: 20, color: '#10b981' }} />
@@ -417,7 +511,7 @@ const ServerBackplanePanel = ({
height: '6px',
borderRadius: '50%',
background: '#10b981',
boxShadow: '0 0 6px #10b981'
boxShadow: '0 0 6px #10b981',
}}
/>
</div>
@@ -445,17 +539,24 @@ const ServerBackplanePanel = ({
padding: '8px 12px',
background: '#f8fafc',
borderRadius: '8px',
border: '1px solid #e2e8f0'
border: '1px solid #e2e8f0',
}}
>
<Space>
<Badge count={cards.filter(c => !c.isUngrouped).length} style={{ backgroundColor: designTokens.colors.primary.main }} />
<Text type="secondary" style={{ fontSize: '13px' }}>个网卡</Text>
<Badge
count={cards.filter(c => !c.isUngrouped).length}
style={{ backgroundColor: designTokens.colors.primary.main }}
/>
<Text type="secondary" style={{ fontSize: '13px' }}>
个网卡
</Text>
<Badge
count={cards.reduce((acc, card) => acc + (card.ports?.length || 0), 0)}
style={{ backgroundColor: '#667eea' }}
/>
<Text type="secondary" style={{ fontSize: '13px' }}>个端口</Text>
<Text type="secondary" style={{ fontSize: '13px' }}>
个端口
</Text>
</Space>
<Space>
<Button size="small" icon={<ReloadOutlined />} onClick={fetchData}>
@@ -480,7 +581,7 @@ const ServerBackplanePanel = ({
borderRadius: '8px',
padding: '16px',
border: '3px solid #374151',
boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3)'
boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3)',
}}
>
{/* 服务器标识 */}
@@ -492,7 +593,7 @@ const ServerBackplanePanel = ({
marginBottom: '12px',
padding: '6px 12px',
background: 'rgba(0,0,0,0.3)',
borderRadius: '4px'
borderRadius: '4px',
}}
>
<DesktopOutlined style={{ fontSize: 14, color: '#9ca3af', marginRight: 8 }} />
@@ -536,16 +637,34 @@ const ServerBackplanePanel = ({
>
{selectedSlot && (
<div>
<div style={{ marginBottom: '16px', padding: '12px', background: '#f8fafc', borderRadius: '8px' }}>
<div
style={{
marginBottom: '16px',
padding: '12px',
background: '#f8fafc',
borderRadius: '8px',
}}
>
<Space direction="vertical" size={4} style={{ width: '100%' }}>
<Text type="secondary">类型: {selectedSlot.type === 'onboard' ? '板载网卡' : selectedSlot.type === 'management' ? '管理口' : '扩展网卡'}</Text>
{selectedSlot.description && <Text type="secondary">描述: {selectedSlot.description}</Text>}
<Text type="secondary">
类型:{' '}
{selectedSlot.type === 'onboard'
? '板载网卡'
: selectedSlot.type === 'management'
? '管理口'
: '扩展网卡'}
</Text>
{selectedSlot.description && (
<Text type="secondary">描述: {selectedSlot.description}</Text>
)}
<div>
<Text type="secondary">端口统计: </Text>
<Space size={8}>
<Tag color="success">空闲: {selectedSlot.stats?.free || 0}</Tag>
<Tag color="processing">占用: {selectedSlot.stats?.occupied || 0}</Tag>
{selectedSlot.stats?.fault > 0 && <Tag color="error">故障: {selectedSlot.stats.fault}</Tag>}
{selectedSlot.stats?.fault > 0 && (
<Tag color="error">故障: {selectedSlot.stats.fault}</Tag>
)}
<Tag color="blue">总计: {selectedSlot.ports?.length || 0}</Tag>
</Space>
</div>