-
导入完成：
-
总记录数：{importResult.total || 0}
-
成功：{importResult.imported || 0}
-
重复：{importResult.duplicates || 0}
+
+
+ 导入结果：
+
+
+ ✓ 总记录数：{importResult.total || 0}
+
+
+ ✓ 成功：{importResult.imported || 0}
+
+
0 ? '#faad14' : '#52c41a' }}>
+ {importResult.duplicates > 0 ? '⚠' : '✓'} 重复：{importResult.duplicates || 0}
+
{importResult.details && importResult.details.length > 0 && (
-
-
导入失败记录：
-
+
+
+ 导入失败记录：
+
+
{importResult.details.map((item, index) => (
- -
+
-
第 {item.row} 行
{item.errors.map((err, errIndex) => (
- - {err}
+ - {err}
))}
@@ -465,21 +658,21 @@ function RackManagement() {
)}
+
)}
diff --git a/frontend/src/pages/RackVisualization.jsx b/frontend/src/pages/RackVisualization.jsx
index b21add4..793281c 100644
--- a/frontend/src/pages/RackVisualization.jsx
+++ b/frontend/src/pages/RackVisualization.jsx
@@ -61,8 +61,10 @@ const getDeviceColor = (deviceType) => {
const getDeviceStatusColor = (status) => {
const statusColorMap = {
'normal': '#10b981',
+ 'running': '#10b981',
'warning': '#f59e0b',
'error': '#ef4444',
+ 'fault': '#ef4444',
'offline': '#6b7280',
'maintenance': '#3b82f6',
undefined: '#3b82f6',
@@ -71,6 +73,85 @@ const getDeviceStatusColor = (status) => {
return statusColorMap[status] || '#3b82f6';
};
+const getStatusTheme = (status) => {
+ const themeMap = {
+ 'normal': {
+ bgGradient: 'linear-gradient(180deg, #059669 0%, #047857 50%, #065f46 100%)',
+ borderColor: '#10b981',
+ topBorderColor: '#34d399',
+ glowColor: 'rgba(16, 185, 129, 0.4)',
+ shadowColor: 'rgba(16, 185, 129, 0.3)',
+ iconColor: '#10b981',
+ label: '正常'
+ },
+ 'running': {
+ bgGradient: 'linear-gradient(180deg, #059669 0%, #047857 50%, #065f46 100%)',
+ borderColor: '#10b981',
+ topBorderColor: '#34d399',
+ glowColor: 'rgba(16, 185, 129, 0.4)',
+ shadowColor: 'rgba(16, 185, 129, 0.3)',
+ iconColor: '#10b981',
+ label: '运行中'
+ },
+ 'warning': {
+ bgGradient: 'linear-gradient(180deg, #d97706 0%, #b45309 50%, #92400e 100%)',
+ borderColor: '#f59e0b',
+ topBorderColor: '#fbbf24',
+ glowColor: 'rgba(245, 158, 11, 0.4)',
+ shadowColor: 'rgba(245, 158, 11, 0.3)',
+ iconColor: '#f59e0b',
+ label: '警告'
+ },
+ 'error': {
+ bgGradient: 'linear-gradient(180deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%)',
+ borderColor: '#ef4444',
+ topBorderColor: '#f87171',
+ glowColor: 'rgba(239, 68, 68, 0.5)',
+ shadowColor: 'rgba(239, 68, 68, 0.4)',
+ iconColor: '#ef4444',
+ label: '故障'
+ },
+ 'fault': {
+ bgGradient: 'linear-gradient(180deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%)',
+ borderColor: '#ef4444',
+ topBorderColor: '#f87171',
+ glowColor: 'rgba(239, 68, 68, 0.5)',
+ shadowColor: 'rgba(239, 68, 68, 0.4)',
+ iconColor: '#ef4444',
+ label: '故障'
+ },
+ 'offline': {
+ bgGradient: 'linear-gradient(180deg, #4b5563 0%, #374151 50%, #1f2937 100%)',
+ borderColor: '#6b7280',
+ topBorderColor: '#9ca3af',
+ glowColor: 'rgba(107, 114, 128, 0.2)',
+ shadowColor: 'rgba(0, 0, 0, 0.2)',
+ iconColor: '#9ca3af',
+ label: '离线'
+ },
+ 'maintenance': {
+ bgGradient: 'linear-gradient(180deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%)',
+ borderColor: '#3b82f6',
+ topBorderColor: '#60a5fa',
+ glowColor: 'rgba(59, 130, 246, 0.4)',
+ shadowColor: 'rgba(59, 130, 246, 0.3)',
+ iconColor: '#3b82f6',
+ label: '维护中'
+ },
+ 'default': {
+ bgGradient: 'linear-gradient(180deg, #3d4451 0%, #2d3139 50%, #252930 100%)',
+ borderColor: '#4a5568',
+ topBorderColor: '#565c6b',
+ glowColor: 'rgba(56, 189, 248, 0.2)',
+ shadowColor: 'rgba(0, 0, 0, 0.3)',
+ iconColor: '#38bdf8',
+ label: '未知'
+ }
+ };
+
+ return themeMap[status] || themeMap['default'];
+};
+
const getDeviceTypeTheme = (type) => {
const themeMap = {
'server': {
@@ -317,6 +398,56 @@ class ErrorBoundary extends React.Component {
}
function RackVisualization() {
+ const pageHeaderStyle = {
+ marginBottom: '24px',
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ flexWrap: 'wrap',
+ gap: '16px'
+ };
+
+ const titleStyle = {
+ fontSize: '24px',
+ fontWeight: '700',
+ margin: 0,
+ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ backgroundClip: 'text'
+ };
+
+ const primaryButtonStyle = {
+ height: '40px',
+ borderRadius: '8px',
+ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+ border: 'none',
+ boxShadow: '0 4px 12px rgba(102, 126, 234, 0.35)',
+ fontWeight: '500',
+ transition: 'all 0.3s ease'
+ };
+
+ const secondaryButtonStyle = {
+ height: '40px',
+ borderRadius: '8px',
+ border: '1px solid #e8e8e8',
+ transition: 'all 0.3s ease'
+ };
+
+ const cardStyle = {
+ borderRadius: '16px',
+ border: 'none',
+ boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
+ overflow: 'hidden'
+ };
+
+ const searchCardStyle = {
+ borderRadius: '12px',
+ border: 'none',
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
+ marginBottom: '20px'
+ };
+
const [racks, setRacks] = useState([]);
const [selectedRack, setSelectedRack] = useState(null);
const [selectedRoom, setSelectedRoom] = useState(null);
@@ -1035,96 +1166,98 @@ function RackVisualization() {
// 无需额外的初始化，CSS 3D变换直接在JSX中实现
return (
-
-
- handleSearch(e.target.value)}
- onPressEnter={(e) => handleSearch(e.target.value)}
- style={{ width: 220 }}
- allowClear
- prefix={}
- suffix={
- searchMatchCount > 0 ? (
-
- ) : null
- }
+
+
+
+
+ 机柜可视化
+
+
+ handleSearch(e.target.value)}
+ onPressEnter={(e) => handleSearch(e.target.value)}
+ style={{ width: 220, height: '40px', borderRadius: '8px' }}
+ allowClear
+ prefix={}
+ suffix={
+ searchMatchCount > 0 ? (
+
+ ) : null
+ }
+ />
+ {searchKeyword && (
+ }
+ onClick={clearSearch}
+ title="清除搜索"
/>
- {searchKeyword && (
- }
- onClick={clearSearch}
- title="清除搜索"
- />
- )}
-
-
- }
- onClick={handleReload}
- loading={loading}
- disabled={loading}
- >
- 刷新
-
- }
- onClick={handleOpenTooltipConfig}
- type={showTooltipConfig ? 'primary' : 'default'}
- >
- 字段配置
-
-
- }
- >
- {searchKeyword && (
+ )}
+
+
+ }
+ onClick={handleReload}
+ loading={loading}
+ disabled={loading}
+ >
+ 刷新
+
+ }
+ onClick={handleOpenTooltipConfig}
+ type={showTooltipConfig ? 'primary' : 'default'}
+ >
+ 字段配置
+
+
+
+
+ {searchKeyword && (
+
0 ? 'linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%)' : '#fff2f0',
- border: `1px solid ${searchResults.length > 0 ? '#b7eb8f' : '#ffccc7'}`,
- borderRadius: '6px',
display: 'flex',
alignItems: 'center',
- gap: '12px'
+ gap: '12px',
+ flexWrap: 'wrap'
}}>
0 ? '#52c41a' : '#ff4d4f'
}} />
- 0 ? '#135200' : '#cf1322' }}>
+ 0 ? '#135200' : '#cf1322', margin: 0 }}>
{searchResults.length > 0
? `找到 ${searchResults.length} 个设备`
: searching ? '搜索中...' : '未找到匹配的设备'}
@@ -1143,7 +1276,6 @@ function RackVisualization() {
type={highlightedDevice === result.deviceId ? 'primary' : 'default'}
icon={}
onClick={() => {
- // 如果设备不在当前机柜，跳转到对应机柜
if (selectedRack && result.rackId !== selectedRack.rackId) {
const targetRack = racks.find(r => r.rackId === result.rackId);
if (targetRack) {
@@ -1161,8 +1293,10 @@ function RackVisualization() {
setHighlightedDevice(result.deviceId);
}}
style={{
- borderColor: highlightedDevice === result.deviceId ? '#1890ff' : undefined,
- background: highlightedDevice === result.deviceId ? '#1890ff' : undefined
+ borderColor: highlightedDevice === result.deviceId ? '#667eea' : undefined,
+ background: highlightedDevice === result.deviceId ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : undefined,
+ height: '32px',
+ borderRadius: '6px'
}}
>
@@ -1185,37 +1319,40 @@ function RackVisualization() {
)}
- )}
+
+ )}
+
+
-
- } onClick={handleZoomIn}>放大
- } onClick={handleZoomOut}>缩小
- } onClick={handleResetView}>重置视角
+
+ } onClick={handleZoomIn}>放大
+ } onClick={handleZoomOut}>缩小
+ } onClick={handleResetView}>重置视角
+ {backgroundType === 'image' && (
+
+ {
+ const image = e.target.value;
+ setBackgroundImage(image);
+ await saveBackgroundSettings(backgroundType, image, backgroundSize);
}}
- >
-
-
-
- {backgroundType === 'image' && (
-
- {
- const image = e.target.value;
- setBackgroundImage(image);
- await saveBackgroundSettings(backgroundType, image, backgroundSize);
- }}
- value={backgroundImage || ''}
- />
+ value={backgroundImage || ''}
+ />
-
+
{backgroundImage && (
-
@@ -1299,23 +1434,23 @@ function RackVisualization() {
className="rack-visualization-container"
style={{
width: '100%',
- height: 'calc(100vh - 200px)',
+ height: 'calc(100vh - 280px)',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
perspective: '1000px',
overflow: 'auto',
- backgroundColor: '#f5f5f5',
+ backgroundColor: '#fafafa',
background: backgroundType === 'image' && backgroundImage
? `url(${backgroundImage})`
- : '#f8fffe',
+ : 'linear-gradient(180deg, #f8fffe 0%, #f0fdf4 50%, #e6fffa 100%)',
backgroundSize: backgroundType === 'image' ? backgroundSize : 'auto',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
position: 'relative',
- borderRadius: '8px',
+ borderRadius: '12px',
border: '1px solid #e8e8e8',
- boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+ boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
transition: 'all 0.3s ease',
padding: '20px',
boxSizing: 'border-box',
@@ -1560,6 +1695,10 @@ function RackVisualization() {
// 检查是否是高亮的设备
const isHighlighted = highlightedDevice === deviceId;
+ // 获取状态主题
+ const statusTheme = getStatusTheme(device?.status);
+ const statusColor = getDeviceStatusColor(device?.status);
+
return (
{
const isOneU = (device?.height || 1) === 1;
@@ -1611,11 +1752,11 @@ function RackVisualization() {
}
e.currentTarget.style.transform = 'scale(1.008)';
e.currentTarget.style.boxShadow = `
- 0 4px 12px rgba(56, 189, 248, 0.3),
+ 0 4px 12px ${statusTheme.shadowColor},
0 2px 6px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.15)
`;
- e.currentTarget.style.borderColor = '#38bdf8';
+ e.currentTarget.style.borderColor = statusTheme.topBorderColor;
const rect = e.currentTarget.getBoundingClientRect();
setTooltipPosition({ x: rect.right + 5, y: rect.top + rect.height / 2 });
@@ -1635,24 +1776,25 @@ function RackVisualization() {
inset 0 1px 0 rgba(255,255,255,0.1),
inset 0 -1px 0 rgba(0,0,0,0.1)
`;
- e.currentTarget.style.borderColor = '#4a5568';
+ e.currentTarget.style.borderColor = statusTheme.borderColor;
setDeviceTooltip(null);
}}
>
{/* 左侧状态指示区域 - 增强版 */}
{/* 设备类型标识 */}
diff --git a/frontend/src/pages/RoomManagement.jsx b/frontend/src/pages/RoomManagement.jsx
index a5eb3d2..d6ce4ad 100644
--- a/frontend/src/pages/RoomManagement.jsx
+++ b/frontend/src/pages/RoomManagement.jsx
@@ -176,30 +176,144 @@ function RoomManagement() {
},
];
+ const pageHeaderStyle = {
+ marginBottom: '24px',
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ flexWrap: 'wrap',
+ gap: '16px'
+ };
+
+ const titleStyle = {
+ fontSize: '24px',
+ fontWeight: '700',
+ margin: 0,
+ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ backgroundClip: 'text'
+ };
+
+ const cardStyle = {
+ borderRadius: '16px',
+ border: 'none',
+ boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
+ overflow: 'hidden'
+ };
+
+ const cardHeadStyle = {
+ borderBottom: '1px solid #f0f0f0',
+ padding: '16px 24px',
+ background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)'
+ };
+
+ const tableStyle = {
+ borderRadius: '12px',
+ overflow: 'hidden'
+ };
+
+ const statusTagStyle = (color) => ({
+ padding: '4px 12px',
+ borderRadius: '20px',
+ fontSize: '12px',
+ fontWeight: '500',
+ border: 'none',
+ background: color === 'green' ? '#f6ffed' : color === 'orange' ? '#fff7e6' : '#f5f5f5',
+ color: color === 'green' ? '#52c41a' : color === 'orange' ? '#faad14' : '#8c8c8c'
+ });
+
+ const primaryButtonStyle = {
+ height: '40px',
+ borderRadius: '8px',
+ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+ border: 'none',
+ boxShadow: '0 4px 12px rgba(102, 126, 234, 0.35)',
+ fontWeight: '500',
+ transition: 'all 0.3s ease'
+ };
+
+ const actionButtonStyle = {
+ height: '32px',
+ borderRadius: '6px',
+ border: '1px solid #e8e8e8',
+ transition: 'all 0.3s ease'
+ };
+
return (
-
-
- } onClick={() => showModal()}>
+
+
+
机房管理
+
+ }
+ onClick={fetchRooms}
+ style={actionButtonStyle}
+ >
+ 刷新
+
+ }
+ onClick={() => showModal()}
+ style={primaryButtonStyle}
+ >
添加机房
- }>
+
+
+
`共 ${total} 条记录`
+ }}
+ style={tableStyle}
+ rowClassName={() => 'table-row'}
/>
-
+
+ {editingRoom ? '编辑机房' : '添加机房'}
+
+ }
open={modalVisible}
onCancel={handleCancel}
footer={null}
width={600}
+ destroyOnClose
+ styles={{
+ body: { padding: '24px' },
+ header: {
+ borderBottom: '1px solid #f0f0f0',
+ padding: '16px 24px',
+ marginBottom: '0'
+ }
+ }}
+ style={{
+ borderRadius: '16px',
+ overflow: 'hidden'
+ }}
>