-
-
-
- 低库存预警
+
+
+
-
- {lowStockItems.length}项
-
-
-
-
-
-
-
-
-
-
-
- 最近出入库记录
+
+
+
+ 暂无记录
+ 出入库操作后将显示在这里
+
+ ),
+ }}
+ />
-
最近
-
-
-
-
-
-
+
+
+
+
+
);
-}
+};
export default ConsumableStatistics;
diff --git a/frontend/src/pages/PortManagement.jsx b/frontend/src/pages/PortManagement.jsx
index 989a5f0..9295515 100644
--- a/frontend/src/pages/PortManagement.jsx
+++ b/frontend/src/pages/PortManagement.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
import {
Table,
Button,
@@ -19,9 +19,11 @@ import {
Upload,
Progress,
Checkbox,
- Tabs,
Badge,
- List,
+ Row,
+ Col,
+ Skeleton,
+ Alert,
Typography,
} from 'antd';
import {
@@ -37,56 +39,110 @@ import {
AppstoreOutlined,
UnorderedListOutlined,
FilterOutlined,
- EyeOutlined,
- CompressOutlined,
+ ClearOutlined,
CloudServerOutlined,
+ ApiOutlined,
+ CheckCircleOutlined,
+ ExclamationCircleOutlined,
+ DisconnectOutlined,
} from '@ant-design/icons';
import axios from 'axios';
import * as XLSX from 'xlsx';
import Papa from 'papaparse';
-import PortPanel from '../components/PortPanel';
+import { motion, AnimatePresence } from 'framer-motion';
import VirtualDeviceList from '../components/VirtualDeviceList';
import NetworkCardPanel from '../components/NetworkCardPanel';
import NetworkCardCreateModal from '../components/NetworkCardCreateModal';
-import PortCreateModal from '../components/PortCreateModal';
const { Option } = Select;
const { Panel } = Collapse;
+const { Text, Title } = Typography;
+const { TextArea } = Input;
+// 设计令牌 - 与接线管理页面保持一致
const designTokens = {
colors: {
primary: {
- main: '#667eea',
- gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
- light: '#8b9ff0',
- dark: '#4f5db8',
+ main: '#6366f1',
+ gradient: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+ light: '#818cf8',
+ dark: '#4f46e5',
+ bg: '#eef2ff',
},
success: {
main: '#10b981',
gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
light: '#34d399',
dark: '#047857',
+ bg: '#ecfdf5',
},
warning: {
main: '#f59e0b',
gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
light: '#fbbf24',
dark: '#b45309',
+ bg: '#fffbeb',
},
error: {
main: '#ef4444',
gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
light: '#f87171',
dark: '#b91c1c',
+ bg: '#fef2f2',
+ },
+ info: {
+ main: '#3b82f6',
+ bg: '#eff6ff',
+ },
+ neutral: {
+ 50: '#f8fafc',
+ 100: '#f1f5f9',
+ 200: '#e2e8f0',
+ 300: '#cbd5e1',
+ 400: '#94a3b8',
+ 500: '#64748b',
+ 600: '#475569',
+ 700: '#334155',
+ 800: '#1e293b',
+ 900: '#0f172a',
},
},
borderRadius: {
- small: '6px',
- medium: '10px',
- large: '16px',
+ sm: '6px',
+ md: '10px',
+ lg: '16px',
+ xl: '20px',
},
shadows: {
- medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+ sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+ md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+ lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+ xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+ },
+};
+
+// 动画配置
+const animations = {
+ container: {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.05,
+ delayChildren: 0.1,
+ },
+ },
+ },
+ item: {
+ hidden: { opacity: 0, y: 20 },
+ visible: {
+ opacity: 1,
+ y: 0,
+ transition: {
+ duration: 0.3,
+ ease: [0.25, 0.46, 0.45, 0.94],
+ },
+ },
},
};
@@ -101,13 +157,13 @@ function PortManagement() {
status: 'all',
portType: 'all',
portSpeed: 'all',
+ searchText: '',
});
const [modalVisible, setModalVisible] = useState(false);
const [editingPort, setEditingPort] = useState(null);
const [form] = Form.useForm();
const [importModalVisible, setImportModalVisible] = useState(false);
- const [importFileList, setImportFileList] = useState([]);
const [importPreview, setImportPreview] = useState([]);
const [importProgress, setImportProgress] = useState({ current: 0, total: 0 });
const [importing, setImporting] = useState(false);
@@ -117,26 +173,20 @@ function PortManagement() {
// 视图模式：list 或 panel
const [viewMode, setViewMode] = useState('list');
- // 面板视图优化状态
- const [panelFilters, setPanelFilters] = useState({
- deviceType: 'all',
- searchText: '',
- showOnlyOccupied: false,
- });
- const [visibleDeviceCount, setVisibleDeviceCount] = useState(10);
- const [expandedDevices, setExpandedDevices] = useState({});
-
// 网卡管理相关状态
const [networkCardModalVisible, setNetworkCardModalVisible] = useState(false);
const [portCreateModalVisible, setPortCreateModalVisible] = useState(false);
const [selectedDeviceForNic, setSelectedDeviceForNic] = useState(null);
const [refreshTrigger, setRefreshTrigger] = useState(0);
+ // 展开的设备
+ const [expandedKeys, setExpandedKeys] = useState([]);
+
const fetchPorts = useCallback(async () => {
try {
setLoading(true);
const params = {
- pageSize: 1000, // 获取所有端口，不分页
+ pageSize: 1000,
};
if (filters.deviceId) params.deviceId = filters.deviceId;
@@ -145,7 +195,20 @@ function PortManagement() {
if (filters.portSpeed !== 'all') params.portSpeed = filters.portSpeed;
const response = await axios.get('/api/device-ports', { params });
- setPorts(response.data.ports || response.data || []);
+ const portsData = response.data.ports || response.data || [];
+
+ // 搜索过滤
+ let filteredPorts = portsData;
+ if (filters.searchText) {
+ const searchLower = filters.searchText.toLowerCase();
+ filteredPorts = portsData.filter(port =>
+ port.portName?.toLowerCase().includes(searchLower) ||
+ port.portType?.toLowerCase().includes(searchLower) ||
+ port.description?.toLowerCase().includes(searchLower)
+ );
+ }
+
+ setPorts(filteredPorts);
} catch (error) {
message.error('获取端口列表失败');
console.error('获取端口列表失败:', error);
@@ -211,6 +274,10 @@ function PortManagement() {
});
setGroupedPorts(grouped);
+
+ // 自动展开前5个
+ const deviceIds = Object.keys(grouped);
+ setExpandedKeys(deviceIds.slice(0, 5));
}, [ports, devices]);
const handleSearch = () => {
@@ -223,6 +290,7 @@ function PortManagement() {
status: 'all',
portType: 'all',
portSpeed: 'all',
+ searchText: '',
});
};
@@ -235,34 +303,22 @@ function PortManagement() {
const handleAddPortForDevice = device => {
setEditingPort(null);
form.resetFields();
- // 自动选中当前设备
form.setFieldsValue({
deviceId: device.deviceId,
});
setModalVisible(true);
};
- // 打开网卡管理模态框
const handleManageNetworkCards = device => {
setSelectedDeviceForNic(device);
setNetworkCardModalVisible(true);
};
- // 打开添加网卡模态框
- const handleAddNetworkCard = device => {
- setSelectedDeviceForNic(device);
- setPortCreateModalVisible(true);
- };
-
- // 网卡/端口创建成功回调
const handleNicSuccess = () => {
- message.success('操作成功');
- setRefreshTrigger(prev => prev + 1);
- fetchPorts();
- };
-
- const handlePortSuccess = () => {
- message.success('端口添加成功');
+ message.success({
+ content: '操作成功',
+ icon:
,
+ });
setRefreshTrigger(prev => prev + 1);
fetchPorts();
};
@@ -285,7 +341,10 @@ function PortManagement() {
const handleDelete = async portId => {
try {
await axios.delete(`/api/device-ports/${portId}`);
- message.success('删除成功');
+ message.success({
+ content: '删除成功',
+ icon:
,
+ });
fetchPorts();
} catch (error) {
message.error('删除失败');
@@ -293,7 +352,6 @@ function PortManagement() {
}
};
- // 解析端口名称范围，例如 "1/0/1-1/0/48" -> ["1/0/1", "1/0/2", ..., "1/0/48"]
const parsePortRange = portName => {
const rangeMatch = portName.match(/^(.*?)\/(\d+)-\1\/(\d+)$/);
if (rangeMatch) {
@@ -302,11 +360,10 @@ function PortManagement() {
const end = parseInt(rangeMatch[3]);
if (start <= end && end - start < 100) {
- // 限制最多100个端口
return Array.from({ length: end - start + 1 }, (_, i) => `${prefix}/${start + i}`);
}
}
- return [portName]; // 如果不是范围格式，返回原名称
+ return [portName];
};
const handleSubmit = async () => {
@@ -315,13 +372,14 @@ function PortManagement() {
if (editingPort) {
await axios.put(`/api/device-ports/${editingPort.portId}`, values);
- message.success('更新成功');
+ message.success({
+ content: '更新成功',
+ icon:
,
+ });
} else {
- // 解析端口名称范围
const portNames = parsePortRange(values.portName);
if (portNames.length > 1) {
- // 批量创建端口
const portsData = portNames.map((name, index) => ({
portId: `PORT-${Date.now()}-${index}`,
deviceId: values.deviceId,
@@ -339,12 +397,17 @@ function PortManagement() {
if (failed > 0) {
message.warning(`批量创建完成！成功 ${success} 个，失败 ${failed} 个`);
} else {
- message.success(`成功创建 ${success} 个端口`);
+ message.success({
+ content: `成功创建 ${success} 个端口`,
+ icon:
,
+ });
}
} else {
- // 单个创建
await axios.post('/api/device-ports', values);
- message.success('创建成功');
+ message.success({
+ content: '创建成功',
+ icon:
,
+ });
}
}
@@ -365,7 +428,6 @@ function PortManagement() {
const handleFileUpload = info => {
const { file } = info;
- setImportFileList([file]);
const reader = new FileReader();
reader.onload = async e => {
@@ -427,8 +489,6 @@ function PortManagement() {
};
const validatePortRow = async (row, index) => {
- const errors = [];
-
if (!row['设备ID'] || !row['端口名称']) {
return { valid: false, error: `第 ${index + 1} 行：缺少必填字段（设备ID或端口名称）` };
}
@@ -453,10 +513,6 @@ function PortManagement() {
return { valid: false, error: `第 ${index + 1} 行：无效的状态` };
}
- if (errors.length > 0) {
- return { valid: false, error: errors.join('; ') };
- }
-
return { valid: true };
};
@@ -488,7 +544,6 @@ function PortManagement() {
}));
const response = await axios.post('/api/device-ports/batch', { ports: portsData });
-
const { total, success, failed, errors } = response.data;
setImportProgress({ current: total, total: total });
@@ -497,7 +552,10 @@ function PortManagement() {
console.error('导入错误:', errors);
message.warning(`导入完成！成功 ${success} 条，失败 ${failed} 条`);
} else {
- message.success(`导入完成！成功 ${success} 条`);
+ message.success({
+ content: `导入完成！成功 ${success} 条`,
+ icon:
,
+ });
}
fetchPorts();
@@ -532,15 +590,23 @@ function PortManagement() {
const getStatusTag = status => {
const statusMap = {
- free: { color: 'success', text: '空闲' },
- occupied: { color: 'processing', text: '占用' },
- fault: { color: 'error', text: '故障' },
- 空闲: { color: 'success', text: '空闲' },
- 占用: { color: 'processing', text: '占用' },
- 故障: { color: 'error', text: '故障' },
+ free: { color: 'success', text: '空闲', icon:
},
+ occupied: { color: 'processing', text: '占用', icon:
},
+ fault: { color: 'error', text: '故障', icon:
},
+ 空闲: { color: 'success', text: '空闲', icon:
},
+ 占用: { color: 'processing', text: '占用', icon:
},
+ 故障: { color: 'error', text: '故障', icon:
},
};
- const config = statusMap[status] || { color: 'default', text: status };
- return
{config.text};
+ const config = statusMap[status] || { color: 'default', text: status, icon: null };
+ return (
+
+ {config.text}
+
+ );
};
const getPortTypeTag = type => {
@@ -553,15 +619,20 @@ function PortManagement() {
QSFP28: { color: 'red', text: 'QSFP28' },
};
const config = typeMap[type] || { color: 'default', text: type };
- return
{config.text};
+ return (
+
+ {config.text}
+
+ );
};
- const portColumns = [
+ const portColumns = useMemo(() => [
{
title: '端口名称',
dataIndex: 'portName',
key: 'portName',
width: 120,
+ render: text =>
{text},
},
{
title: '端口类型',
@@ -575,6 +646,7 @@ function PortManagement() {
dataIndex: 'portSpeed',
key: 'portSpeed',
width: 100,
+ render: text =>
{text},
},
{
title: '状态',
@@ -588,316 +660,544 @@ function PortManagement() {
dataIndex: 'vlanId',
key: 'vlanId',
width: 100,
- render: vlanId => vlanId || '-',
+ render: vlanId => vlanId ||
-,
},
{
title: '描述',
dataIndex: 'description',
key: 'description',
ellipsis: true,
- render: text => (
-
- {text || '-'}
-
- ),
+ render: text => text ||
-,
},
{
title: '操作',
key: 'action',
- width: 150,
+ width: 120,
fixed: 'right',
render: (_, record) => (
- }
- onClick={() => handleEdit(record)}
- >
- 编辑
-
- handleDelete(record.portId)}
- okText="确定"
- cancelText="取消"
- >
- }>
- 删除
-
-
+
+ }
+ onClick={() => handleEdit(record)}
+ style={{ color: designTokens.colors.primary.main }}
+ />
+
+
+ handleDelete(record.portId)}
+ okText="确定"
+ cancelText="取消"
+ >
+ } />
+
+
),
},
- ];
+ ], []);
+
+ // 获取设备图标
+ const getDeviceIcon = device => {
+ if (!device?.type) return
;
+ const type = device.type.toLowerCase();
+ if (type.includes('server')) return
;
+ if (type.includes('switch')) return
;
+ if (type.includes('router')) return
;
+ return
;
+ };
return (
-
-
-
-
-
-
-
-
-
-
-
-
- }
- onClick={handleSearch}
- style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
- >
- 搜索
-
-
- } onClick={handleReset}>
- 重置
-
-
-
-
-
-
- }
- onClick={handleAdd}
- style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
- >
- 新增端口
-
-
- }
- onClick={handleImport}
- style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
- >
- 批量导入
-
-
- }>导出
-
-
-
-
- }
- onClick={() => setViewMode('list')}
- >
- 列表
-
- }
- onClick={() => setViewMode('panel')}
- >
- 面板
-
-
-
-
-
- {loading ? (
-
-
-
- ) : Object.keys(groupedPorts).length === 0 ? (
-
-
-
- ) : viewMode === 'panel' ? (
- // 面板视图 - 使用虚拟滚动优化
- g.device)
- .filter(Boolean)}
- groupedPorts={groupedPorts}
- cables={cables}
- allDevices={devices}
- onPortClick={port => handleEdit(port)}
- onAddPort={device => handleAddPortForDevice(device)}
- onManageNetworkCards={device => handleManageNetworkCards(device)}
- initialVisibleCount={5}
- loadMoreCount={5}
- />
- ) : (
- // 列表视图
-
+ {/* 页面标题 */}
+
+
+
- {Object.entries(groupedPorts).map(([deviceId, data]) => {
- const device = data.device;
- const devicePorts = data.ports || [];
- const freeCount = devicePorts.filter(p => p.status === 'free').length;
- const occupiedCount = devicePorts.filter(p => p.status === 'occupied').length;
- const faultCount = devicePorts.filter(p => p.status === 'fault').length;
+
+
+
+
端口管理
+ 管理设备的网络端口信息
+
+
+
+
+
+
+ 设备
+
+
+
+
+
+
+ 端口类型
+
+
+
+
+
+
+ 端口速率
+
+
+
+
+
+
+ 状态
+
+
+
+
+
+
+ 搜索
+
+ setFilters(prev => ({ ...prev, searchText: e.target.value }))}
+ onPressEnter={handleSearch}
+ prefix={}
+ allowClear
+ />
+
+
+
+ 操作
+
+ }
+ onClick={handleSearch}
+ style={{
+ background: designTokens.colors.primary.gradient,
+ border: 'none',
+ borderRadius: designTokens.borderRadius.sm,
}}
>
-
-
- {device?.type?.toLowerCase()?.includes('server')
- ? '🖥️'
- : device?.type?.toLowerCase()?.includes('switch')
- ? '🔀'
- : device?.type?.toLowerCase()?.includes('router')
- ? '🌐'
- : '📦'}
-
-
-
- {device?.name || '未知设备'}
-
-
- {device?.deviceId || '-'}
-
-
-
+
+
+
+ }
+ onClick={handleAdd}
+ size="large"
+ style={{
+ background: designTokens.colors.primary.gradient,
+ border: 'none',
+ borderRadius: designTokens.borderRadius.sm,
+ boxShadow: designTokens.shadows.md,
+ }}
+ >
+ 新增端口
+
+ }
+ onClick={handleImport}
+ size="large"
+ style={{ borderRadius: designTokens.borderRadius.sm }}
+ >
+ 批量导入
+
+ }
+ size="large"
+ style={{ borderRadius: designTokens.borderRadius.sm }}
+ >
+ 导出
+
+
+
+
+
+ }
+ onClick={() => setViewMode('list')}
+ style={viewMode === 'list' ? {
+ background: designTokens.colors.primary.gradient,
+ border: 'none',
+ } : {}}
+ >
+ 列表
+
+ }
+ onClick={() => setViewMode('panel')}
+ style={viewMode === 'panel' ? {
+ background: designTokens.colors.primary.gradient,
+ border: 'none',
+ } : {}}
+ >
+ 面板
+
+
+
+ }
+ onClick={fetchPorts}
+ loading={loading}
+ style={{ borderRadius: designTokens.borderRadius.sm }}
+ />
+
+
+
+
+ {/* 数据展示区域 */}
+ {loading ? (
+
+
+
+ ) : Object.keys(groupedPorts).length === 0 ? (
+
+
+
+ 暂无端口数据
+
+
+ 点击"新增端口"按钮创建第一个端口
+
+
+ }
+ >
+
}
+ onClick={handleAdd}
+ style={{
+ background: designTokens.colors.primary.gradient,
+ border: 'none',
+ borderRadius: designTokens.borderRadius.sm,
+ }}
+ >
+ 新增端口
+
+
+
+ ) : viewMode === 'panel' ? (
+
g.device)
+ .filter(Boolean)}
+ groupedPorts={groupedPorts}
+ cables={cables}
+ allDevices={devices}
+ onPortClick={port => handleEdit(port)}
+ onAddPort={device => handleAddPortForDevice(device)}
+ onManageNetworkCards={device => handleManageNetworkCards(device)}
+ initialVisibleCount={5}
+ loadMoreCount={5}
+ />
+ ) : (
+
+
+ {Object.entries(groupedPorts).map(([deviceId, data], index) => {
+ const device = data.device;
+ const devicePorts = data.ports || [];
+ const freeCount = devicePorts.filter(p => p.status === 'free').length;
+ const occupiedCount = devicePorts.filter(p => p.status === 'occupied').length;
+ const faultCount = devicePorts.filter(p => p.status === 'fault').length;
+
+ return (
+
+
- 网卡管理
-
- )}
-
-