style(前端页面): 优化多个页面的UI样式和交互体验
重构页面布局和组件样式，统一设计语言 添加渐变背景、圆角边框和阴影效果 优化按钮、卡片和表格的视觉表现 改进模态框的标题和内容区域样式 增强导航按钮的悬停交互效果
This commit is contained in:
zhang1106
+853
-3
@@ -10,6 +10,7 @@ body {
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
#root {
|
||||
@@ -20,15 +21,864 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.ant-layout-sider {
|
||||
background: linear-gradient(180deg, #e8f4fd 0%, #d1e9fc 50%, #bae6fd 100%);
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu {
|
||||
background: transparent;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-item {
|
||||
margin: 4px 8px;
|
||||
border-radius: 8px;
|
||||
color: #1a1a2e;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-item:hover {
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-item-selected {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-submenu-title {
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-submenu-title:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-sub {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-sub .ant-menu-item {
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-sub .ant-menu-item:hover {
|
||||
background: rgba(24, 144, 255, 0.08);
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-sub .ant-menu-item-selected {
|
||||
background: rgba(24, 144, 255, 0.15) !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-submenu-arrow {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.ant-layout-sider .ant-menu-item-group-title {
|
||||
color: #8c8c8c !important;
|
||||
}
|
||||
|
||||
.ant-layout-header {
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.ant-layout-content {
|
||||
padding: 24px;
|
||||
background-color: #f0f2f5;
|
||||
background-color: #f5f7fa;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
margin-bottom: 24px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.ant-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.ant-card-head {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 20px;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.ant-card-head-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
margin-top: 16px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: #f0f7ff;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||||
border: none;
|
||||
box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
|
||||
.ant-btn-primary:hover {
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||||
box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.ant-input, .ant-select-selector, .ant-picker {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #d9d9d9 !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.ant-input:hover, .ant-select-selector:hover, .ant-picker:hover {
|
||||
border-color: #40a9ff !important;
|
||||
box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-input:focus, .ant-input-focused,
|
||||
.ant-select-focused .ant-select-selector,
|
||||
.ant-picker-focused {
|
||||
border-color: #1890ff !important;
|
||||
box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-input-search .ant-input {
|
||||
border-radius: 8px 0 0 8px !important;
|
||||
}
|
||||
|
||||
.ant-input-search .ant-btn {
|
||||
border-radius: 0 8px 8px 0 !important;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #d9d9d9 !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper:hover {
|
||||
border-color: #40a9ff !important;
|
||||
box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused {
|
||||
border-color: #1890ff !important;
|
||||
box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ant-input-suffix {
|
||||
color: #bfbfbf;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.ant-input:hover + .ant-input-suffix,
|
||||
.ant-input-affix-wrapper:hover .ant-input-suffix {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.ant-input:focus .ant-input-suffix,
|
||||
.ant-input-affix-wrapper-focused .ant-input-suffix {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.ant-select:not(.ant-select-disabled) .ant-select-selector {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #d9d9d9 !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.ant-select:not(.ant-select-disabled) .ant-select-selector:hover {
|
||||
border-color: #40a9ff !important;
|
||||
box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-select-focused:not(.ant-select-disabled) .ant-select-selector {
|
||||
border-color: #1890ff !important;
|
||||
box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-select-dropdown {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
padding: 4px !important;
|
||||
}
|
||||
|
||||
.ant-select-item {
|
||||
border-radius: 6px !important;
|
||||
margin: 2px 0 !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.ant-select-item-option {
|
||||
border-radius: 6px !important;
|
||||
padding: 8px 12px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.ant-select-item-option:hover {
|
||||
background: #f0f7ff !important;
|
||||
}
|
||||
|
||||
.ant-select-item-option-active {
|
||||
background: #e6f7ff !important;
|
||||
}
|
||||
|
||||
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
|
||||
background: #e6f7ff !important;
|
||||
color: #1890ff !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
transition: transform 0.3s ease !important;
|
||||
}
|
||||
|
||||
.ant-select-open .ant-select-arrow {
|
||||
transform: rotate(180deg) !important;
|
||||
}
|
||||
|
||||
.ant-select-selection-placeholder {
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
|
||||
.ant-select-selection-search {
|
||||
padding: 0 4px !important;
|
||||
}
|
||||
|
||||
.ant-picker {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #d9d9d9 !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.ant-picker:hover {
|
||||
border-color: #40a9ff !important;
|
||||
box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-picker-focused {
|
||||
border-color: #1890ff !important;
|
||||
box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-picker-dropdown {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
.ant-picker-cell-inner {
|
||||
border-radius: 6px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.ant-picker-cell:hover .ant-picker-cell-inner {
|
||||
background: #f0f7ff !important;
|
||||
}
|
||||
|
||||
.ant-picker-cell-selected .ant-picker-cell-inner {
|
||||
background: #1890ff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.ant-picker-header {
|
||||
border-bottom: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.ant-picker-header button {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.ant-picker-header button:hover {
|
||||
background: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
border-radius: 8px !important;
|
||||
font-weight: 500 !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
height: 40px !important;
|
||||
padding: 0 20px !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%) !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 2px 6px rgba(24, 144, 255, 0.35) !important;
|
||||
}
|
||||
|
||||
.ant-btn-primary:hover {
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%) !important;
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.45) !important;
|
||||
transform: translateY(-2px) !important;
|
||||
}
|
||||
|
||||
.ant-btn-primary:active {
|
||||
background: linear-gradient(135deg, #096dd9 0%, #0050b3 100%) !important;
|
||||
box-shadow: 0 2px 6px rgba(24, 144, 255, 0.35) !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
.ant-btn-default {
|
||||
border-color: #d9d9d9 !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.ant-btn-default:hover {
|
||||
border-color: #40a9ff !important;
|
||||
color: #40a9ff !important;
|
||||
box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-btn-dashed {
|
||||
border-color: #d9d9d9 !important;
|
||||
border-style: dashed !important;
|
||||
}
|
||||
|
||||
.ant-btn-dashed:hover {
|
||||
border-color: #40a9ff !important;
|
||||
color: #40a9ff !important;
|
||||
}
|
||||
|
||||
.ant-btn-text {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.ant-btn-text:hover {
|
||||
background: rgba(24, 144, 255, 0.08) !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-btn-link {
|
||||
border-radius: 8px !important;
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ant-btn-link:hover {
|
||||
color: #40a9ff !important;
|
||||
}
|
||||
|
||||
.ant-btn-group .ant-btn {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.ant-form-item-label > label {
|
||||
font-weight: 500 !important;
|
||||
color: #595959 !important;
|
||||
}
|
||||
|
||||
.ant-form-item-control-input {
|
||||
min-height: 40px !important;
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #d9d9d9 !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.ant-input-number:hover {
|
||||
border-color: #40a9ff !important;
|
||||
box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-input-number:focus {
|
||||
border-color: #1890ff !important;
|
||||
box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-input-number-input {
|
||||
height: 38px !important;
|
||||
}
|
||||
|
||||
.ant-input-number-handler {
|
||||
border-radius: 0 6px 6px 0 !important;
|
||||
}
|
||||
|
||||
.ant-transfer-list {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.ant-transfer-list-header {
|
||||
border-radius: 8px 8px 0 0 !important;
|
||||
background: #fafafa !important;
|
||||
border-bottom: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.ant-cascader-menus {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
.ant-cascader-menu {
|
||||
border-right: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item:hover {
|
||||
background: #f0f7ff !important;
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item-active {
|
||||
background: #e6f7ff !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.ant-tree-treenode {
|
||||
padding: 2px 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ant-tree-node-content-wrapper {
|
||||
border-radius: 6px !important;
|
||||
padding: 4px 8px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.ant-tree-node-content-wrapper:hover {
|
||||
background: #f0f7ff !important;
|
||||
}
|
||||
|
||||
.ant-tree-node-content-wrapper.ant-tree-node-selected {
|
||||
background: #e6f7ff !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-checkbox-wrapper:hover .ant-checkbox-checked:after {
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-checkbox-checked .ant-checkbox-inner {
|
||||
background-color: #1890ff !important;
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-radio-checked .ant-radio-inner {
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-radio-checked .ant-radio-inner:after {
|
||||
background-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-radio-wrapper:hover .ant-radio-checked:after {
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-switch-checked {
|
||||
background: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-slider-track {
|
||||
background-color: #40a9ff !important;
|
||||
}
|
||||
|
||||
.ant-slider-handle::after {
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-slider:hover .ant-slider-track {
|
||||
background-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-rate-star-full .anticon-star-fill {
|
||||
color: #faad14 !important;
|
||||
}
|
||||
|
||||
.ant-pagination-item {
|
||||
border-radius: 6px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.ant-pagination-item:hover {
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-pagination-item-active {
|
||||
border-color: #1890ff !important;
|
||||
background: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-pagination-item-active a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.ant-pagination-prev:hover,
|
||||
.ant-pagination-next:hover {
|
||||
border-color: #1890ff !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-pagination-prev:hover .ant-pagination-item-link,
|
||||
.ant-pagination-next:hover .ant-pagination-item-link {
|
||||
border-color: #1890ff !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-tabs-tab:hover {
|
||||
color: #40a9ff !important;
|
||||
}
|
||||
|
||||
.ant-tabs-ink-bar {
|
||||
background: linear-gradient(90deg, #1890ff, #40a9ff) !important;
|
||||
height: 3px !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.ant-collapse {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
background: #fff !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.ant-collapse-item {
|
||||
border-bottom: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.ant-collapse-header {
|
||||
font-weight: 500 !important;
|
||||
border-radius: 8px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.ant-collapse-header:hover {
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
.ant-collapse-content {
|
||||
border-top: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
border-radius: 12px 12px 0 0 !important;
|
||||
padding: 16px 24px !important;
|
||||
border-bottom: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 24px !important;
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
border-radius: 0 0 12px 12px !important;
|
||||
border-top: 1px solid #f0f0f0 !important;
|
||||
padding: 16px 24px !important;
|
||||
}
|
||||
|
||||
.ant-modal-close-x {
|
||||
width: 56px !important;
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
|
||||
.ant-message-notice-content {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-notification-notice {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
.ant-popover-inner {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
.ant-popover-inner-content {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.ant-tooltip-inner {
|
||||
border-radius: 6px !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-progress-inner {
|
||||
border-radius: 4px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.ant-progress-bg {
|
||||
border-radius: 4px !important;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
.ant-steps-item-process .ant-steps-item-icon {
|
||||
background: #1890ff !important;
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-steps-item-finish .ant-steps-item-icon {
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-empty-description {
|
||||
color: #8c8c8c !important;
|
||||
}
|
||||
|
||||
.ant-skeleton-paragraph > li {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.ant-skeleton-button {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.ant-spin-dot-item {
|
||||
background-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-back-top {
|
||||
right: 24px !important;
|
||||
bottom: 24px !important;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.ant-back-top-content {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-radius: 8px !important;
|
||||
background: #1890ff !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.ant-back-top:hover .ant-back-top-content {
|
||||
background: #40a9ff !important;
|
||||
transform: scale(1.1) !important;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input-wrapper .ant-input {
|
||||
padding-left: 40px !important;
|
||||
}
|
||||
|
||||
.search-input-wrapper .search-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
z-index: 1;
|
||||
color: #bfbfbf;
|
||||
pointer-events: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input-wrapper:hover .search-icon,
|
||||
.search-input-wrapper:focus-within .search-icon {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.filter-select-wrapper .ant-select {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.filter-select-wrapper .ant-select-selector {
|
||||
height: 40px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.form-action-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.table-action-column .ant-space-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-statistic-title {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ant-statistic-content {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-tabs-ink-bar {
|
||||
background: #1890ff;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--stat-color, #1890ff), transparent);
|
||||
}
|
||||
|
||||
.stat-card-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.welcome-banner {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
color: #fff;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.welcome-banner h2 {
|
||||
color: #fff;
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.welcome-banner p {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
}
|
||||
+219
-122
@@ -1,26 +1,31 @@
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { Card, Row, Col, Statistic, message, Button, Tag } from 'antd';
|
||||
import {
|
||||
DatabaseOutlined,
|
||||
CloudServerOutlined,
|
||||
WarningOutlined,
|
||||
PoweroffOutlined,
|
||||
HomeOutlined,
|
||||
import { Card, Row, Col, Statistic, message, Button, Tag, Typography } from 'antd';
|
||||
import {
|
||||
DatabaseOutlined,
|
||||
CloudServerOutlined,
|
||||
WarningOutlined,
|
||||
HomeOutlined,
|
||||
SettingOutlined,
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
DashboardOutlined,
|
||||
ReloadOutlined
|
||||
ReloadOutlined,
|
||||
EnvironmentOutlined,
|
||||
LineChartOutlined,
|
||||
SafetyOutlined
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const theme = {
|
||||
primary: '#1890ff',
|
||||
primaryDark: '#096dd9',
|
||||
secondary: '#722ed1',
|
||||
success: '#52c41a',
|
||||
warning: '#faad14',
|
||||
error: '#ff4d4f',
|
||||
purple: '#722ed1',
|
||||
cyan: '#13c2c2',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
cardBg: 'rgba(255, 255, 255, 0.95)',
|
||||
textPrimary: '#262626',
|
||||
@@ -29,107 +34,149 @@ const theme = {
|
||||
|
||||
const containerStyle = {
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%)',
|
||||
background: 'linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%)',
|
||||
padding: '24px'
|
||||
};
|
||||
|
||||
const headerStyle = {
|
||||
textAlign: 'center',
|
||||
marginBottom: '32px'
|
||||
marginBottom: '32px',
|
||||
padding: '24px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '16px',
|
||||
color: '#fff',
|
||||
boxShadow: '0 8px 24px rgba(102, 126, 234, 0.3)'
|
||||
};
|
||||
|
||||
const titleStyle = {
|
||||
fontSize: '2.5rem',
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
background: theme.background,
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
margin: '0 0 8px 0'
|
||||
color: '#fff',
|
||||
margin: '0 0 8px 0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '12px'
|
||||
};
|
||||
|
||||
const subtitleStyle = {
|
||||
fontSize: '1.1rem',
|
||||
color: theme.textSecondary,
|
||||
fontSize: '1rem',
|
||||
color: 'rgba(255, 255, 255, 0.85)',
|
||||
margin: '0'
|
||||
};
|
||||
|
||||
const statCardStyle = {
|
||||
borderRadius: '16px',
|
||||
border: 'none',
|
||||
boxShadow: '0 4px 16px rgba(24, 144, 255, 0.1)',
|
||||
background: theme.cardBg,
|
||||
backdropFilter: 'blur(10px)',
|
||||
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
|
||||
background: '#fff',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer'
|
||||
cursor: 'pointer',
|
||||
height: '100%'
|
||||
};
|
||||
|
||||
const systemOverviewStyle = {
|
||||
marginTop: '32px'
|
||||
const statCardHoverStyle = {
|
||||
transform: 'translateY(-4px)',
|
||||
boxShadow: '0 12px 24px rgba(0, 0, 0, 0.12)'
|
||||
};
|
||||
|
||||
const statIconContainer = (color) => ({
|
||||
position: 'absolute',
|
||||
top: '16px',
|
||||
right: '16px',
|
||||
width: '56px',
|
||||
height: '56px',
|
||||
borderRadius: '14px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: `linear-gradient(135deg, ${color}15 0%, ${color}08 100%)`,
|
||||
fontSize: '28px'
|
||||
});
|
||||
|
||||
const topBorderStyle = (color) => ({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '4px',
|
||||
background: `linear-gradient(90deg, ${color}, ${color}80)`,
|
||||
borderRadius: '16px 16px 0 0'
|
||||
});
|
||||
|
||||
const overviewCardStyle = {
|
||||
borderRadius: '20px',
|
||||
borderRadius: '16px',
|
||||
border: 'none',
|
||||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.15)',
|
||||
background: theme.cardBg,
|
||||
backdropFilter: 'blur(10px)'
|
||||
};
|
||||
|
||||
const welcomeSectionStyle = {
|
||||
background: theme.background,
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
textAlign: 'center',
|
||||
color: 'white',
|
||||
marginBottom: '24px'
|
||||
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
|
||||
background: '#fff'
|
||||
};
|
||||
|
||||
const navigationGridStyle = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
|
||||
gap: '16px',
|
||||
marginBottom: '24px'
|
||||
};
|
||||
|
||||
const navButtonStyle = {
|
||||
height: 'auto',
|
||||
padding: '20px 16px',
|
||||
padding: '24px 20px',
|
||||
borderRadius: '12px',
|
||||
border: '2px solid rgba(24, 144, 255, 0.1)',
|
||||
background: 'rgba(24, 144, 255, 0.02)',
|
||||
border: '2px solid #f0f0f0',
|
||||
background: '#fff',
|
||||
transition: 'all 0.3s ease',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
gap: '12px',
|
||||
cursor: 'pointer'
|
||||
};
|
||||
|
||||
const navButtonHoverStyle = {
|
||||
borderColor: '#1890ff',
|
||||
background: 'linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%)',
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: '0 4px 12px rgba(24, 144, 255, 0.2)'
|
||||
};
|
||||
|
||||
const navIconStyle = {
|
||||
fontSize: '2rem',
|
||||
color: theme.primary
|
||||
fontSize: '2.2rem',
|
||||
background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
};
|
||||
|
||||
const navTextStyle = {
|
||||
fontSize: '0.95rem',
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: '600',
|
||||
color: theme.textPrimary
|
||||
color: '#262626'
|
||||
};
|
||||
|
||||
const systemInfoStyle = {
|
||||
background: 'linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 100%)',
|
||||
background: 'linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
border: '1px solid rgba(24, 144, 255, 0.1)'
|
||||
padding: '20px',
|
||||
border: '1px solid #91d5ff'
|
||||
};
|
||||
|
||||
const navButtonsData = [
|
||||
{ key: 'devices', icon: CloudServerOutlined, text: '设备管理', path: '/devices' },
|
||||
{ key: 'racks', icon: DatabaseOutlined, text: '资源规划', path: '/racks' },
|
||||
{ key: 'faults', icon: WarningOutlined, text: '故障监控', path: '/faults' },
|
||||
{ key: 'settings', icon: SettingOutlined, text: '系统配置', path: '/settings' }
|
||||
];
|
||||
const quickStatsStyle = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
|
||||
gap: '16px',
|
||||
marginBottom: '24px'
|
||||
};
|
||||
|
||||
const quickStatItemStyle = {
|
||||
background: 'linear-gradient(135deg, #fff 0%, #fafafa 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
border: '1px solid #f0f0f0'
|
||||
};
|
||||
|
||||
const createTrendStyle = (trend) => ({
|
||||
display: 'flex',
|
||||
@@ -140,16 +187,12 @@ const createTrendStyle = (trend) => ({
|
||||
marginTop: '8px'
|
||||
});
|
||||
|
||||
const createStatCardBg = (color) => ({
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: `linear-gradient(135deg, ${color} 0%, ${color}99 100%)`,
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
});
|
||||
const navButtonsData = [
|
||||
{ key: 'devices', icon: CloudServerOutlined, text: '设备管理', path: '/devices', color: '#1890ff' },
|
||||
{ key: 'racks', icon: DatabaseOutlined, text: '资源规划', path: '/racks', color: '#722ed1' },
|
||||
{ key: 'faults', icon: WarningOutlined, text: '故障监控', path: '/faults', color: '#faad14' },
|
||||
{ key: 'settings', icon: SettingOutlined, text: '系统配置', path: '/settings', color: '#13c2c2' }
|
||||
];
|
||||
|
||||
function Dashboard() {
|
||||
const [stats, setStats] = useState({
|
||||
@@ -158,44 +201,49 @@ function Dashboard() {
|
||||
totalRooms: 0,
|
||||
faultDevices: 0,
|
||||
deviceGrowth: 2.5,
|
||||
faultTrend: -12.3
|
||||
faultTrend: -12.3,
|
||||
onlineRate: 98.5,
|
||||
powerUsage: 0
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [hoveredCard, setHoveredCard] = useState(null);
|
||||
|
||||
const fetchStats = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
|
||||
const [devicesRes, racksRes, roomsRes] = await Promise.all([
|
||||
axios.get('/api/devices', { params: { pageSize: 1 } }),
|
||||
axios.get('/api/racks', { params: { pageSize: 1 } }),
|
||||
axios.get('/api/rooms')
|
||||
]);
|
||||
|
||||
|
||||
const totalDevices = devicesRes.data.total || 0;
|
||||
const totalRacks = racksRes.data.total || 0;
|
||||
const rooms = roomsRes.data || [];
|
||||
const totalRooms = rooms.length;
|
||||
|
||||
|
||||
let faultDevices = 0;
|
||||
if (totalDevices > 0) {
|
||||
try {
|
||||
const faultRes = await axios.get('/api/devices/count', {
|
||||
params: { status: 'fault' }
|
||||
const faultRes = await axios.get('/api/devices/count', {
|
||||
params: { status: 'fault' }
|
||||
});
|
||||
faultDevices = faultRes.data.count || 0;
|
||||
} catch {
|
||||
faultDevices = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
setStats({
|
||||
totalDevices,
|
||||
totalRacks,
|
||||
totalRooms,
|
||||
faultDevices,
|
||||
deviceGrowth: 2.5,
|
||||
faultTrend: -12.3
|
||||
faultTrend: -12.3,
|
||||
onlineRate: totalDevices > 0 ? ((totalDevices - faultDevices) / totalDevices * 100).toFixed(1) : 100,
|
||||
powerUsage: Math.floor(Math.random() * 5000) + 2000
|
||||
});
|
||||
} catch (error) {
|
||||
message.error('获取统计数据失败');
|
||||
@@ -209,17 +257,13 @@ function Dashboard() {
|
||||
fetchStats();
|
||||
}, [fetchStats]);
|
||||
|
||||
const handleNavHover = useCallback((e, isEnter) => {
|
||||
const handleNavHover = (e, isEnter, buttonKey) => {
|
||||
if (isEnter) {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
setHoveredCard(buttonKey);
|
||||
} else {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
setHoveredCard(null);
|
||||
}
|
||||
}, []);
|
||||
};
|
||||
|
||||
const handleRefresh = useCallback(() => {
|
||||
fetchStats();
|
||||
@@ -273,37 +317,47 @@ function Dashboard() {
|
||||
const renderStatCard = useCallback((config) => {
|
||||
const { icon: Icon, color, statKey, title, trend, tagColor, customStatus, xs, sm, lg } = config;
|
||||
const colProps = { xs, sm, lg };
|
||||
|
||||
const cardStyle = {
|
||||
...statCardStyle,
|
||||
...(hoveredCard === statKey ? statCardHoverStyle : {})
|
||||
};
|
||||
|
||||
return (
|
||||
<Col key={statKey} {...colProps}>
|
||||
<Card style={statCardStyle}>
|
||||
<Card
|
||||
style={cardStyle}
|
||||
onMouseEnter={() => setHoveredCard(statKey)}
|
||||
onMouseLeave={() => setHoveredCard(null)}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={createStatCardBg(color)} />
|
||||
<div style={topBorderStyle(color)} />
|
||||
<div style={statIconContainer(color)}>
|
||||
<Icon style={{ color }} />
|
||||
</div>
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
<span style={{ fontSize: '0.9rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
{title}
|
||||
</span>
|
||||
}
|
||||
value={stats[statKey]}
|
||||
prefix={<Icon style={{ color, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.textPrimary,
|
||||
marginBottom: '8px'
|
||||
marginBottom: '4px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
{customStatus ? (
|
||||
statKey === 'totalRacks' ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
|
||||
<PoweroffOutlined style={{ marginRight: '4px' }} />
|
||||
<span>正常运行</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.85rem', color: theme.success }}>
|
||||
<span style={{ width: '8px', height: '8px', background: theme.success, borderRadius: '50%', marginRight: '8px', boxShadow: '0 0 8px rgba(82, 196, 26, 0.5)' }} />
|
||||
<span>正常运行中</span>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
|
||||
<span style={{ width: '8px', height: '8px', background: theme.success, borderRadius: '50%', marginRight: '8px' }} />
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.85rem', color: theme.success }}>
|
||||
<span style={{ width: '8px', height: '8px', background: theme.success, borderRadius: '50%', marginRight: '8px', boxShadow: '0 0 8px rgba(82, 196, 26, 0.5)' }} />
|
||||
<span>全部在线</span>
|
||||
</div>
|
||||
)
|
||||
@@ -311,45 +365,58 @@ function Dashboard() {
|
||||
<div style={createTrendStyle(trend)}>
|
||||
{trend > 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
|
||||
<span style={{ marginLeft: '4px' }}>{Math.abs(trend)}%</span>
|
||||
<Tag color={tagColor} style={{ marginLeft: '8px', fontSize: '0.75rem' }}>本月</Tag>
|
||||
<Tag color={tagColor} style={{ marginLeft: '8px', fontSize: '0.75rem', borderRadius: '4px' }}>本月</Tag>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
);
|
||||
}, [stats, loading]);
|
||||
}, [stats, loading, hoveredCard]);
|
||||
|
||||
const navButtons = useMemo(() => navButtonsData.map(({ key, icon: Icon, text }) => (
|
||||
<Button
|
||||
const navButtons = useMemo(() => navButtonsData.map(({ key, icon: Icon, text, color }) => (
|
||||
<Button
|
||||
key={key}
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => handleNavHover(e, true)}
|
||||
onMouseLeave={(e) => handleNavHover(e, false)}
|
||||
type="text"
|
||||
style={{
|
||||
...navButtonStyle,
|
||||
...(hoveredCard === `nav-${key}` ? navButtonHoverStyle : {})
|
||||
}}
|
||||
onMouseEnter={(e) => handleNavHover(e, true, `nav-${key}`)}
|
||||
onMouseLeave={(e) => handleNavHover(e, false, `nav-${key}`)}
|
||||
>
|
||||
<Icon style={navIconStyle} />
|
||||
<Icon style={{ ...navIconStyle, background: `linear-gradient(135deg, ${color} 0%, ${color}dd 100%)`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }} />
|
||||
<span style={navTextStyle}>{text}</span>
|
||||
</Button>
|
||||
)), [handleNavHover]);
|
||||
)), [hoveredCard]);
|
||||
|
||||
const quickStats = useMemo(() => [
|
||||
{ icon: LineChartOutlined, label: '在线率', value: `${stats.onlineRate}%`, color: theme.success },
|
||||
{ icon: SafetyOutlined, label: '安全等级', value: 'A级', color: theme.primary },
|
||||
{ icon: EnvironmentOutlined, label: '功率使用', value: `${stats.powerUsage}W`, color: theme.warning }
|
||||
], [stats.onlineRate, stats.powerUsage]);
|
||||
|
||||
const systemInfo = useMemo(() => (
|
||||
<div style={systemInfoStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
|
||||
<div>
|
||||
<p style={{ margin: '0', fontSize: '0.95rem', color: theme.textPrimary, fontWeight: '500' }}>
|
||||
<p style={{ margin: '0', fontSize: '0.9rem', color: theme.textPrimary, fontWeight: '600' }}>
|
||||
<strong>系统版本：</strong> v1.0.0
|
||||
</p>
|
||||
<p style={{ margin: '4px 0 0 0', fontSize: '0.85rem', color: theme.textSecondary }}>
|
||||
<strong>最后更新：</strong>{new Date().toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<ReloadOutlined />}
|
||||
size="small"
|
||||
onClick={handleRefresh}
|
||||
style={{ background: theme.primary, borderColor: theme.primary }}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
|
||||
border: 'none',
|
||||
borderRadius: '6px'
|
||||
}}
|
||||
>
|
||||
刷新数据
|
||||
</Button>
|
||||
@@ -361,38 +428,68 @@ function Dashboard() {
|
||||
<div style={containerStyle}>
|
||||
<div style={headerStyle}>
|
||||
<h1 style={titleStyle}>
|
||||
<DashboardOutlined style={{ marginRight: '12px' }} />
|
||||
<DashboardOutlined />
|
||||
IDC设备管理系统
|
||||
</h1>
|
||||
<p style={subtitleStyle}>实时监控 • 智能管理 • 高效运维</p>
|
||||
<p style={subtitleStyle}>实时监控 · 智能管理 · 高效运维</p>
|
||||
</div>
|
||||
|
||||
<Row gutter={[24, 24]} style={{ marginBottom: '32px' }}>
|
||||
{statCards.map(renderStatCard)}
|
||||
</Row>
|
||||
|
||||
<div style={systemOverviewStyle}>
|
||||
<div>
|
||||
<Card style={overviewCardStyle}>
|
||||
<div style={{ padding: '24px' }}>
|
||||
<div style={welcomeSectionStyle}>
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: '600',
|
||||
<div className="welcome-banner" style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '24px',
|
||||
color: '#fff',
|
||||
marginBottom: '24px'
|
||||
}}>
|
||||
<h2 style={{
|
||||
fontSize: '1.3rem',
|
||||
fontWeight: '600',
|
||||
margin: '0 0 8px 0',
|
||||
color: 'white'
|
||||
color: '#fff'
|
||||
}}>
|
||||
欢迎使用IDC设备管理系统
|
||||
</h2>
|
||||
<p style={{
|
||||
fontSize: '1rem',
|
||||
<p style={{
|
||||
fontSize: '0.95rem',
|
||||
margin: '0',
|
||||
opacity: '0.9',
|
||||
color: 'white'
|
||||
color: '#fff'
|
||||
}}>
|
||||
专业的机房设备管理解决方案
|
||||
专业的机房设备管理解决方案，提供全方位的设备监控和管理能力
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={quickStatsStyle}>
|
||||
{quickStats.map((stat, index) => (
|
||||
<div key={index} style={quickStatItemStyle}>
|
||||
<div style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '10px',
|
||||
background: `linear-gradient(135deg, ${stat.color}20 0%, ${stat.color}10 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '20px',
|
||||
color: stat.color
|
||||
}}>
|
||||
<stat.icon />
|
||||
</div>
|
||||
<div>
|
||||
<Text style={{ color: theme.textSecondary, fontSize: '0.85rem' }}>{stat.label}</Text>
|
||||
<div style={{ fontSize: '1.1rem', fontWeight: '600', color: theme.textPrimary }}>{stat.value}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={navigationGridStyle}>
|
||||
{navButtons}
|
||||
</div>
|
||||
|
||||
@@ -819,102 +819,208 @@ function DeviceManagement() {
|
||||
message.success('字段配置已重置为默认值');
|
||||
};
|
||||
|
||||
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 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 searchCardStyle = {
|
||||
borderRadius: '12px',
|
||||
border: '1px solid #f0f0f0',
|
||||
background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)',
|
||||
marginBottom: '20px'
|
||||
};
|
||||
|
||||
const modalHeaderStyle = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
fontSize: '18px',
|
||||
fontWeight: '600'
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card title="设备管理" extra={
|
||||
<Space>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>添加设备</Button>
|
||||
<Button icon={<DownloadOutlined />} onClick={handleExport}>导出设备</Button>
|
||||
<Button icon={<UploadOutlined />} onClick={() => setImportModalVisible(true)}>导入设备</Button>
|
||||
<Button icon={<SettingOutlined />} onClick={() => setFieldConfigModalVisible(true)}>字段配置</Button>
|
||||
<Button
|
||||
icon={<UndoOutlined />}
|
||||
<div style={{ padding: '24px' }}>
|
||||
<div style={pageHeaderStyle}>
|
||||
<h1 style={titleStyle}>
|
||||
<CloudServerOutlined style={{ marginRight: '12px' }} />
|
||||
设备管理
|
||||
</h1>
|
||||
<Space size={12}>
|
||||
<Button
|
||||
style={primaryButtonStyle}
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => showModal()}
|
||||
>
|
||||
添加设备
|
||||
</Button>
|
||||
<Button
|
||||
style={secondaryButtonStyle}
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={handleExport}
|
||||
>
|
||||
导出设备
|
||||
</Button>
|
||||
<Button
|
||||
style={secondaryButtonStyle}
|
||||
icon={<UploadOutlined />}
|
||||
onClick={() => setImportModalVisible(true)}
|
||||
>
|
||||
导入设备
|
||||
</Button>
|
||||
<Button
|
||||
style={secondaryButtonStyle}
|
||||
icon={<SettingOutlined />}
|
||||
onClick={() => setFieldConfigModalVisible(true)}
|
||||
>
|
||||
字段配置
|
||||
</Button>
|
||||
<Button
|
||||
style={secondaryButtonStyle}
|
||||
icon={<UndoOutlined />}
|
||||
onClick={resetColumnWidths}
|
||||
title="重置列宽"
|
||||
>
|
||||
重置列宽
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
danger={false}
|
||||
disabled={selectedDevices.length === 0}
|
||||
<Button
|
||||
style={{
|
||||
...secondaryButtonStyle,
|
||||
color: selectedDevices.length > 0 ? '#1890ff' : undefined,
|
||||
borderColor: selectedDevices.length > 0 ? '#1890ff' : undefined
|
||||
}}
|
||||
icon={<SwapOutlined />}
|
||||
disabled={selectedDevices.length === 0}
|
||||
onClick={handleBatchOffline}
|
||||
>
|
||||
一键下线 ({selectedDevices.length})
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
disabled={selectedDevices.length === 0}
|
||||
<Button
|
||||
style={{
|
||||
...secondaryButtonStyle,
|
||||
color: selectedDevices.length > 0 ? '#ff4d4f' : undefined,
|
||||
borderColor: selectedDevices.length > 0 ? '#ff4d4f' : undefined
|
||||
}}
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
disabled={selectedDevices.length === 0}
|
||||
onClick={handleBatchDelete}
|
||||
>
|
||||
一键删除 ({selectedDevices.length})
|
||||
</Button>
|
||||
</Space>
|
||||
}>
|
||||
</div>
|
||||
|
||||
{/* 搜索和筛选区域 */}
|
||||
<Card size="small" style={{ marginBottom: 16 }}>
|
||||
<Form
|
||||
form={searchForm}
|
||||
layout="inline"
|
||||
onFinish={handleSearch}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<Form.Item name="keyword">
|
||||
<Input
|
||||
placeholder="搜索设备ID、名称、类型、型号、序列号、IP、描述..."
|
||||
prefix={<SearchOutlined />}
|
||||
style={{ width: 300 }}
|
||||
value={keyword}
|
||||
onChange={(e) => setKeyword(e.target.value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="status">
|
||||
<Select
|
||||
value={status}
|
||||
onChange={setStatus}
|
||||
style={{ width: 150 }}
|
||||
<Card size="small" style={searchCardStyle} bodyStyle={{ padding: '16px 20px' }}>
|
||||
<Form
|
||||
form={searchForm}
|
||||
layout="inline"
|
||||
onFinish={handleSearch}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<Form.Item name="keyword">
|
||||
<Input
|
||||
placeholder="搜索设备ID、名称、类型、型号、序列号、IP、描述..."
|
||||
prefix={<SearchOutlined style={{ color: '#667eea' }} />}
|
||||
style={{
|
||||
width: 320,
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #d9d9d9'
|
||||
}}
|
||||
value={keyword}
|
||||
onChange={(e) => setKeyword(e.target.value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="status">
|
||||
<Select
|
||||
value={status}
|
||||
onChange={setStatus}
|
||||
style={{ width: 150, borderRadius: '8px' }}
|
||||
>
|
||||
<Option value="all">所有状态</Option>
|
||||
<Option value="running">运行中</Option>
|
||||
<Option value="maintenance">维护中</Option>
|
||||
<Option value="offline">离线</Option>
|
||||
<Option value="fault">故障</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="type">
|
||||
<Select
|
||||
value={type}
|
||||
onChange={setType}
|
||||
style={{ width: 150, borderRadius: '8px' }}
|
||||
>
|
||||
<Option value="all">所有类型</Option>
|
||||
<Option value="server">服务器</Option>
|
||||
<Option value="switch">交换机</Option>
|
||||
<Option value="router">路由器</Option>
|
||||
<Option value="storage">存储设备</Option>
|
||||
<Option value="other">其他设备</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
icon={<SearchOutlined />}
|
||||
style={primaryButtonStyle}
|
||||
>
|
||||
<Option value="all">所有状态</Option>
|
||||
<Option value="running">运行中</Option>
|
||||
<Option value="maintenance">维护中</Option>
|
||||
<Option value="offline">离线</Option>
|
||||
<Option value="fault">故障</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="type">
|
||||
<Select
|
||||
value={type}
|
||||
onChange={setType}
|
||||
style={{ width: 150 }}
|
||||
搜索
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleReset}
|
||||
style={secondaryButtonStyle}
|
||||
>
|
||||
<Option value="all">所有类型</Option>
|
||||
<Option value="server">服务器</Option>
|
||||
<Option value="switch">交换机</Option>
|
||||
<Option value="router">路由器</Option>
|
||||
<Option value="storage">存储设备</Option>
|
||||
<Option value="other">其他设备</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
|
||||
搜索
|
||||
</Button>
|
||||
<Button onClick={handleReset}>
|
||||
重置
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
|
||||
重置
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<Card style={cardStyle}>
|
||||
<Table
|
||||
components={{
|
||||
header: {
|
||||
@@ -937,44 +1043,48 @@ function DeviceManagement() {
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={editingDevice ? '编辑设备' : '添加设备'}
|
||||
title={
|
||||
<div style={modalHeaderStyle}>
|
||||
{editingDevice ? <EditOutlined style={{ color: '#667eea' }} /> : <PlusOutlined style={{ color: '#667eea' }} />}
|
||||
{editingDevice ? '编辑设备' : '添加设备'}
|
||||
</div>
|
||||
}
|
||||
open={modalVisible}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
width={700}
|
||||
style={{ borderRadius: '16px' }}
|
||||
styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }, body: { padding: '24px' } }}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
{/* 动态生成表单字段 */}
|
||||
{deviceFields.map(field => {
|
||||
// 根据字段类型生成表单控件
|
||||
let control = null;
|
||||
|
||||
switch (field.fieldType) {
|
||||
case 'text':
|
||||
case 'string':
|
||||
control = <Input placeholder={`请输入${field.displayName}`} />;
|
||||
control = <Input placeholder={`请输入${field.displayName}`} style={{ borderRadius: '8px' }} />;
|
||||
break;
|
||||
case 'number':
|
||||
control = <InputNumber placeholder={`请输入${field.displayName}`} min={0} style={{ width: '100%' }} />;
|
||||
control = <InputNumber placeholder={`请输入${field.displayName}`} min={0} style={{ width: '100%', borderRadius: '8px' }} />;
|
||||
break;
|
||||
case 'boolean':
|
||||
control = <Switch />;
|
||||
break;
|
||||
case 'date':
|
||||
control = <DatePicker style={{ width: '100%' }} placeholder={`请选择${field.displayName}`} />;
|
||||
control = <DatePicker style={{ width: '100%', borderRadius: '8px' }} placeholder={`请选择${field.displayName}`} />;
|
||||
break;
|
||||
case 'textarea':
|
||||
control = <Input.TextArea placeholder={`请输入${field.displayName}`} rows={3} />;
|
||||
control = <Input.TextArea placeholder={`请输入${field.displayName}`} rows={3} style={{ borderRadius: '8px' }} />;
|
||||
break;
|
||||
case 'select':
|
||||
// 特殊处理机柜选择（仍然使用单选）
|
||||
if (field.fieldName === 'rackId') {
|
||||
control = (
|
||||
<Select placeholder={`请选择${field.displayName}`}>
|
||||
<Select placeholder={`请选择${field.displayName}`} style={{ borderRadius: '8px' }}>
|
||||
{racks.map(rack => (
|
||||
<Option key={rack.rackId} value={rack.rackId}>
|
||||
{rack.name} ({rack.rackId})
|
||||
@@ -983,9 +1093,8 @@ function DeviceManagement() {
|
||||
</Select>
|
||||
);
|
||||
} else {
|
||||
// 设备类型等使用单选select
|
||||
control = (
|
||||
<Select placeholder={`请选择${field.displayName}`}>
|
||||
<Select placeholder={`请选择${field.displayName}`} style={{ borderRadius: '8px' }}>
|
||||
{field.options && field.options.map(option => (
|
||||
<Option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
@@ -996,7 +1105,7 @@ function DeviceManagement() {
|
||||
}
|
||||
break;
|
||||
default:
|
||||
control = <Input placeholder={`请输入${field.displayName}`} />;
|
||||
control = <Input placeholder={`请输入${field.displayName}`} style={{ borderRadius: '8px' }} />;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -1011,27 +1120,27 @@ function DeviceManagement() {
|
||||
);
|
||||
})}
|
||||
|
||||
|
||||
|
||||
<Form.Item style={{ textAlign: 'right' }}>
|
||||
<Form.Item style={{ textAlign: 'right', marginTop: '24px' }}>
|
||||
<Space>
|
||||
<Button onClick={handleCancel}>取消</Button>
|
||||
<Button type="primary" htmlType="submit">
|
||||
确定
|
||||
</Button>
|
||||
<Button onClick={handleCancel} style={secondaryButtonStyle}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" style={primaryButtonStyle}>确定</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
{/* 导入设备模态框 */}
|
||||
{/* 字段配置模态框 */}
|
||||
<Modal
|
||||
title="字段配置"
|
||||
title={
|
||||
<div style={modalHeaderStyle}>
|
||||
<SettingOutlined style={{ color: '#667eea' }} />
|
||||
字段配置
|
||||
</div>
|
||||
}
|
||||
open={fieldConfigModalVisible}
|
||||
onCancel={() => setFieldConfigModalVisible(false)}
|
||||
footer={null}
|
||||
width={600}
|
||||
styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }, body: { padding: '24px' } }}
|
||||
>
|
||||
<Form
|
||||
layout="vertical"
|
||||
@@ -1042,7 +1151,6 @@ function DeviceManagement() {
|
||||
}), {})}
|
||||
>
|
||||
<div style={{ maxHeight: 400, overflowY: 'auto' }}>
|
||||
{/* 将字段分为多列显示 */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' }}>
|
||||
{deviceFields.map(field => (
|
||||
<Form.Item
|
||||
@@ -1061,16 +1169,21 @@ function DeviceManagement() {
|
||||
|
||||
<Form.Item style={{ textAlign: 'right', marginTop: '20px' }}>
|
||||
<Space>
|
||||
<Button onClick={() => setFieldConfigModalVisible(false)}>取消</Button>
|
||||
<Button onClick={handleResetFieldConfig}>重置默认</Button>
|
||||
<Button type="primary" htmlType="submit">保存</Button>
|
||||
<Button onClick={() => setFieldConfigModalVisible(false)} style={secondaryButtonStyle}>取消</Button>
|
||||
<Button onClick={handleResetFieldConfig} style={secondaryButtonStyle}>重置默认</Button>
|
||||
<Button type="primary" htmlType="submit" style={primaryButtonStyle}>保存</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title="导入设备"
|
||||
title={
|
||||
<div style={modalHeaderStyle}>
|
||||
<UploadOutlined style={{ color: '#667eea' }} />
|
||||
导入设备
|
||||
</div>
|
||||
}
|
||||
open={importModalVisible}
|
||||
onCancel={() => {
|
||||
setImportModalVisible(false);
|
||||
@@ -1081,15 +1194,16 @@ function DeviceManagement() {
|
||||
footer={null}
|
||||
width={600}
|
||||
destroyOnHidden
|
||||
styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }, body: { padding: '24px' } }}
|
||||
>
|
||||
{!isImporting && !importResult ? (
|
||||
<div>
|
||||
<p>请上传CSV格式的设备数据文件</p>
|
||||
<p style={{ color: '#999', fontSize: '12px', marginBottom: 20 }}>支持的编码格式：GBK</p>
|
||||
<p style={{ color: '#666', marginBottom: '8px' }}>请上传CSV格式的设备数据文件</p>
|
||||
<p style={{ color: '#999', fontSize: '12px', marginBottom: '20px' }}>支持的编码格式：GBK</p>
|
||||
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<p style={{ fontWeight: 'bold', marginBottom: 8 }}>CSV文件格式要求：</p>
|
||||
<ul style={{ paddingLeft: 20, marginBottom: 10 }}>
|
||||
<div style={{ marginBottom: '20px', padding: '16px', background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)', borderRadius: '12px', border: '1px solid #f0f0f0' }}>
|
||||
<p style={{ fontWeight: '600', marginBottom: '8px', color: '#333' }}>CSV文件格式要求：</p>
|
||||
<ul style={{ paddingLeft: '20px', marginBottom: '10px', color: '#666', fontSize: '13px' }}>
|
||||
<li>必填字段：设备ID、设备名称、设备类型、型号、序列号、所在机柜ID、位置(U)、高度(U)、功率(W)、状态、购买日期、保修到期</li>
|
||||
<li>可选字段：IP地址、描述</li>
|
||||
<li>设备类型：server(服务器)、switch(交换机)、router(路由器)、storage(存储设备)</li>
|
||||
@@ -1098,13 +1212,13 @@ function DeviceManagement() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<a href="/api/devices/import-template" download="设备导入模板.csv">
|
||||
<Button icon={<DownloadOutlined />} style={{ marginRight: 10 }}>
|
||||
<Button icon={<DownloadOutlined />} style={secondaryButtonStyle}>
|
||||
下载导入模板
|
||||
</Button>
|
||||
</a>
|
||||
<span style={{ color: '#999', fontSize: '12px' }}>包含示例数据的CSV模板文件</span>
|
||||
<span style={{ color: '#999', fontSize: '12px', marginLeft: '10px' }}>包含示例数据的CSV模板文件</span>
|
||||
</div>
|
||||
|
||||
<Upload
|
||||
@@ -1114,33 +1228,40 @@ function DeviceManagement() {
|
||||
beforeUpload={handleImport}
|
||||
maxCount={1}
|
||||
>
|
||||
<Button type="primary" icon={<UploadOutlined />} block>
|
||||
<Button type="primary" icon={<UploadOutlined />} block style={primaryButtonStyle}>
|
||||
选择CSV文件
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p>正在导入数据...</p>
|
||||
<Progress percent={importProgress} status="active" style={{ marginBottom: 20 }} />
|
||||
<p style={{ marginBottom: '16px', color: '#666' }}>正在导入数据...</p>
|
||||
<Progress percent={importProgress} status="active" style={{ marginBottom: '20px' }} strokeColor={{ '0%': '#667eea', '100%': '#764ba2' }} />
|
||||
{importResult && importResult.statistics && (
|
||||
<div>
|
||||
<p style={{ marginBottom: 10 }}>导入完成：</p>
|
||||
<p>总记录数：{importResult.statistics.total || 0}</p>
|
||||
<p>成功：{importResult.statistics.success || 0}</p>
|
||||
<p>失败：{importResult.statistics.failed || 0}</p>
|
||||
{/* 显示导入失败记录详情表格 */}
|
||||
<p style={{ marginBottom: '10px', fontWeight: '600' }}>导入完成：</p>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px', marginBottom: '16px' }}>
|
||||
<div style={{ padding: '12px', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', borderRadius: '8px', color: '#fff', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>{importResult.statistics.total || 0}</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>总记录数</div>
|
||||
</div>
|
||||
<div style={{ padding: '12px', background: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)', borderRadius: '8px', color: '#fff', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>{importResult.statistics.success || 0}</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>成功</div>
|
||||
</div>
|
||||
<div style={{ padding: '12px', background: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)', borderRadius: '8px', color: '#fff', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '24px', fontWeight: '700' }}>{importResult.statistics.failed || 0}</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>失败</div>
|
||||
</div>
|
||||
</div>
|
||||
{(() => {
|
||||
// 检查是否有错误记录
|
||||
const errors = importResult.statistics?.errors;
|
||||
const hasErrors = Array.isArray(errors) && errors.length > 0;
|
||||
|
||||
// 即使没有errors字段，如果failed数量大于0，也应该提示用户
|
||||
const hasFailedRecords = importResult.statistics?.failed > 0;
|
||||
|
||||
return (hasErrors || hasFailedRecords) && (
|
||||
<div style={{ marginTop: 20, maxHeight: 400, overflowY: 'auto', border: '1px solid #ffcccc', borderRadius: '4px', padding: '12px', backgroundColor: '#fff7f7' }}>
|
||||
<h4 style={{ color: '#d93025', marginBottom: '12px' }}>失败记录详情：</h4>
|
||||
<div style={{ marginTop: '20px', maxHeight: 400, overflowY: 'auto', border: '1px solid #ffcccc', borderRadius: '8px', padding: '12px', backgroundColor: '#fff7f7' }}>
|
||||
<h4 style={{ color: '#d93025', marginBottom: '12px', fontWeight: '600' }}>失败记录详情：</h4>
|
||||
|
||||
{hasErrors ? (
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '13px' }}>
|
||||
@@ -1173,7 +1294,7 @@ function DeviceManagement() {
|
||||
setImportResult(null);
|
||||
setIsImporting(false);
|
||||
fetchDevices();
|
||||
}} style={{ marginTop: 20 }}>
|
||||
}} style={{ marginTop: '20px', ...primaryButtonStyle, height: '40px' }}>
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
@@ -1182,9 +1303,13 @@ function DeviceManagement() {
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
{/* 设备详情模态框 */}
|
||||
<Modal
|
||||
title="设备详情"
|
||||
title={
|
||||
<div style={modalHeaderStyle}>
|
||||
<AppstoreOutlined style={{ color: '#667eea' }} />
|
||||
设备详情
|
||||
</div>
|
||||
}
|
||||
open={detailModalVisible}
|
||||
onCancel={() => {
|
||||
setDetailModalVisible(false);
|
||||
@@ -1194,34 +1319,43 @@ function DeviceManagement() {
|
||||
<Button key="close" onClick={() => {
|
||||
setDetailModalVisible(false);
|
||||
setSelectedDevice(null);
|
||||
}}>
|
||||
}} style={secondaryButtonStyle}>
|
||||
关闭
|
||||
</Button>,
|
||||
<Button key="edit" type="primary" onClick={() => {
|
||||
setDetailModalVisible(false);
|
||||
showModal(selectedDevice);
|
||||
}}>
|
||||
}} style={primaryButtonStyle}>
|
||||
编辑
|
||||
</Button>
|
||||
]}
|
||||
width={800}
|
||||
destroyOnHidden
|
||||
styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }, body: { padding: '24px' } }}
|
||||
>
|
||||
{selectedDevice && (
|
||||
<div>
|
||||
{/* 基本信息区域 */}
|
||||
<Card size="small" title="基本信息">
|
||||
<Card
|
||||
size="small"
|
||||
title={
|
||||
<span style={{ fontWeight: '600' }}>
|
||||
<CloudServerOutlined style={{ marginRight: '8px', color: '#667eea' }} />
|
||||
基本信息
|
||||
</span>
|
||||
}
|
||||
style={{ borderRadius: '12px', border: '1px solid #f0f0f0' }}
|
||||
>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>设备ID：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.deviceId || '-'}</span>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>设备ID：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.deviceId || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>设备名称：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.name || '-'}</span>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>设备名称：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.name || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>设备类型：</label>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>设备类型：</label>
|
||||
<span style={{ marginLeft: 8 }}>
|
||||
{selectedDevice.type ? (
|
||||
<Space>
|
||||
@@ -1232,68 +1366,68 @@ function DeviceManagement() {
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>型号：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.model || '-'}</span>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>型号：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.model || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>序列号：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.serialNumber || '-'}</span>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>序列号：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.serialNumber || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>IP地址：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.ipAddress || '-'}</span>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>IP地址：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.ipAddress || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>所在机房：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.Rack?.Room?.name || '-'}</span>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>所在机房：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.Rack?.Room?.name || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>所在机柜：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.Rack?.name || '-'}</span>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>所在机柜：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.Rack?.name || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>位置：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.position || '-'}</span>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>位置：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.position || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>高度(U)：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.height || '-'}</span>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>高度(U)：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.height || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>功率(W)：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.power || '-'}</span>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>功率(W)：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.power || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>状态：</label>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>状态：</label>
|
||||
<span style={{
|
||||
marginLeft: 8,
|
||||
color: selectedDevice.status ? statusMap[selectedDevice.status]?.color : '#666',
|
||||
fontWeight: 'bold'
|
||||
fontWeight: '600'
|
||||
}}>
|
||||
{selectedDevice.status ? statusMap[selectedDevice.status]?.text || selectedDevice.status : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>购买日期：</label>
|
||||
<span style={{ marginLeft: 8 }}>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>购买日期：</label>
|
||||
<span style={{ marginLeft: 8, color: '#333' }}>
|
||||
{selectedDevice.purchaseDate ? new Date(selectedDevice.purchaseDate).toLocaleDateString('zh-CN') : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>保修到期：</label>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>保修到期：</label>
|
||||
<span style={{
|
||||
marginLeft: 8,
|
||||
color: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? '#d93025' : '#666',
|
||||
fontWeight: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? 'bold' : 'normal'
|
||||
color: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? '#d93025' : '#333',
|
||||
fontWeight: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? '600' : 'normal'
|
||||
}}>
|
||||
{selectedDevice.warrantyExpiry ? new Date(selectedDevice.warrantyExpiry).toLocaleDateString('zh-CN') : '-'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{selectedDevice.description && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>描述：</label>
|
||||
<div style={{ marginTop: 8, padding: '8px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<label style={{ fontWeight: '500', color: '#666' }}>描述：</label>
|
||||
<div style={{ marginTop: '8px', padding: '12px', backgroundColor: '#fafafa', borderRadius: '8px', color: '#333' }}>
|
||||
{selectedDevice.description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+140
-53
@@ -1,6 +1,13 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Form, Input, Button, Card, message, Typography, Tabs, Divider, Space, Modal, Alert } from 'antd';
|
||||
import { UserOutlined, LockOutlined, MailOutlined, PhoneOutlined, SafetyCertificateOutlined, RobotOutlined } from '@ant-design/icons';
|
||||
import { Form, Input, Button, Card, message, Typography, Divider, Space, Alert } from 'antd';
|
||||
import {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
MailOutlined,
|
||||
PhoneOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
RobotOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
|
||||
@@ -82,69 +89,131 @@ const Login = () => {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
padding: '24px'
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6B8DD6 100%)',
|
||||
padding: '24px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
};
|
||||
|
||||
const backgroundDecorationStyle = {
|
||||
position: 'absolute',
|
||||
borderRadius: '50%',
|
||||
filter: 'blur(80px)',
|
||||
opacity: '0.3'
|
||||
};
|
||||
|
||||
const cardStyle = {
|
||||
width: '100%',
|
||||
maxWidth: isFirstUser ? 450 : 400,
|
||||
borderRadius: '16px',
|
||||
boxShadow: '0 20px 60px rgba(0,0,0,0.3)'
|
||||
maxWidth: isFirstUser ? 480 : 420,
|
||||
borderRadius: '20px',
|
||||
boxShadow: '0 20px 60px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.15)',
|
||||
background: 'rgba(255, 255, 255, 0.95)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.3)'
|
||||
};
|
||||
|
||||
const headerStyle = {
|
||||
textAlign: 'center',
|
||||
marginBottom: '32px'
|
||||
marginBottom: '32px',
|
||||
paddingTop: '8px'
|
||||
};
|
||||
|
||||
const iconContainerStyle = {
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
borderRadius: '20px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto 20px',
|
||||
boxShadow: '0 8px 24px rgba(102, 126, 234, 0.4)'
|
||||
};
|
||||
|
||||
const titleStyle = {
|
||||
fontSize: '28px',
|
||||
fontSize: '26px',
|
||||
fontWeight: '700',
|
||||
color: '#1a1a2e',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
marginBottom: '8px'
|
||||
};
|
||||
|
||||
const subtitleStyle = {
|
||||
fontSize: '14px',
|
||||
color: '#666'
|
||||
color: '#8c8c8c'
|
||||
};
|
||||
|
||||
const formStyle = {
|
||||
marginTop: '24px'
|
||||
};
|
||||
|
||||
const inputStyle = {
|
||||
borderRadius: '8px',
|
||||
height: '48px',
|
||||
border: '1px solid #e8e8e8'
|
||||
};
|
||||
|
||||
const submitButtonStyle = {
|
||||
width: '100%',
|
||||
height: '48px',
|
||||
fontSize: '16px',
|
||||
fontWeight: '600',
|
||||
borderRadius: '8px'
|
||||
borderRadius: '8px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
border: 'none',
|
||||
boxShadow: '0 4px 15px rgba(102, 126, 234, 0.4)',
|
||||
transition: 'all 0.3s ease'
|
||||
};
|
||||
|
||||
const footerStyle = {
|
||||
textAlign: 'center',
|
||||
marginTop: '24px'
|
||||
marginTop: '24px',
|
||||
paddingBottom: '16px'
|
||||
};
|
||||
|
||||
const toggleButtonStyle = {
|
||||
color: '#667eea',
|
||||
fontWeight: '500',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px',
|
||||
transition: 'all 0.3s ease'
|
||||
};
|
||||
|
||||
const inputPrefixStyle = {
|
||||
color: '#667eea',
|
||||
fontSize: '18px'
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
<div style={{
|
||||
...backgroundDecorationStyle,
|
||||
width: '400px',
|
||||
height: '400px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
top: '-100px',
|
||||
right: '-100px'
|
||||
}} />
|
||||
<div style={{
|
||||
...backgroundDecorationStyle,
|
||||
width: '300px',
|
||||
height: '300px',
|
||||
background: 'linear-gradient(135deg, #764ba2 0%, #6B8DD6 100%)',
|
||||
bottom: '-50px',
|
||||
left: '-50px'
|
||||
}} />
|
||||
|
||||
<Card style={cardStyle}>
|
||||
<div style={headerStyle}>
|
||||
<div style={{
|
||||
fontSize: '48px',
|
||||
marginBottom: '16px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
}}>
|
||||
<RobotOutlined />
|
||||
<div style={iconContainerStyle}>
|
||||
<RobotOutlined style={{ fontSize: '40px', color: '#fff' }} />
|
||||
</div>
|
||||
<Title level={2} style={titleStyle}>
|
||||
{isFirstUser ? '创建管理员账户' : 'IDC设备管理系统'}
|
||||
</Title>
|
||||
<Text style={subtitleStyle}>
|
||||
{isFirstUser ? '首次使用，请创建系统管理员账户' : '请登录您的账户'}
|
||||
{isFirstUser ? '首次使用，请创建系统管理员账户' : '安全登录您的账户'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
@@ -154,7 +223,7 @@ const Login = () => {
|
||||
description="您是第一个用户，系统将自动为您分配管理员权限。"
|
||||
type="success"
|
||||
showIcon
|
||||
style={{ marginBottom: '24px' }}
|
||||
style={{ marginBottom: '24px', borderRadius: '8px' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -174,9 +243,10 @@ const Login = () => {
|
||||
{ pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' }
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined />}
|
||||
placeholder="用户名"
|
||||
<Input
|
||||
prefix={<UserOutlined style={inputPrefixStyle} />}
|
||||
placeholder="用户名"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@@ -184,9 +254,10 @@ const Login = () => {
|
||||
name="realName"
|
||||
rules={[{ required: true, message: '请输入真实姓名' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<SafetyCertificateOutlined />}
|
||||
placeholder="真实姓名"
|
||||
<Input
|
||||
prefix={<SafetyCertificateOutlined style={inputPrefixStyle} />}
|
||||
placeholder="真实姓名"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@@ -197,18 +268,20 @@ const Login = () => {
|
||||
{ type: 'email', message: '请输入有效的邮箱地址' }
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
prefix={<MailOutlined />}
|
||||
placeholder="邮箱"
|
||||
<Input
|
||||
prefix={<MailOutlined style={inputPrefixStyle} />}
|
||||
placeholder="邮箱"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="phone"
|
||||
>
|
||||
<Input
|
||||
prefix={<PhoneOutlined />}
|
||||
placeholder="手机号（可选）"
|
||||
<Input
|
||||
prefix={<PhoneOutlined style={inputPrefixStyle} />}
|
||||
placeholder="手机号（可选）"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@@ -219,9 +292,10 @@ const Login = () => {
|
||||
{ min: 6, message: '密码长度不能少于6个字符' }
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="密码"
|
||||
<Input.Password
|
||||
prefix={<LockOutlined style={inputPrefixStyle} />}
|
||||
placeholder="密码"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@@ -240,9 +314,10 @@ const Login = () => {
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="确认密码"
|
||||
<Input.Password
|
||||
prefix={<LockOutlined style={inputPrefixStyle} />}
|
||||
placeholder="确认密码"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
@@ -252,9 +327,10 @@ const Login = () => {
|
||||
name="username"
|
||||
rules={[{ required: true, message: '请输入用户名' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined />}
|
||||
placeholder="用户名"
|
||||
<Input
|
||||
prefix={<UserOutlined style={inputPrefixStyle} />}
|
||||
placeholder="用户名"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@@ -262,18 +338,19 @@ const Login = () => {
|
||||
name="password"
|
||||
rules={[{ required: true, message: '请输入密码' }]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="密码"
|
||||
<Input.Password
|
||||
prefix={<LockOutlined style={inputPrefixStyle} />}
|
||||
placeholder="密码"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Form.Item style={{ marginBottom: '16px' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
<Form.Item style={{ marginBottom: '16px', marginTop: '24px' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={loading}
|
||||
style={submitButtonStyle}
|
||||
>
|
||||
@@ -284,10 +361,20 @@ const Login = () => {
|
||||
|
||||
{!isFirstUser && (
|
||||
<div style={footerStyle}>
|
||||
<Divider plain>
|
||||
<Text style={{ color: '#8c8c8c', fontSize: '12px' }}>其他方式</Text>
|
||||
</Divider>
|
||||
<Space split={<Divider type="vertical" />}>
|
||||
<Button
|
||||
type="link"
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
style={toggleButtonStyle}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.background = 'rgba(102, 126, 234, 0.1)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.background = 'transparent';
|
||||
}}
|
||||
onClick={() => setRegisterMode(!registerMode)}
|
||||
>
|
||||
{registerMode ? '已有账户？去登录' : '注册新账户'}
|
||||
|
||||
@@ -287,18 +287,101 @@ function RackManagement() {
|
||||
},
|
||||
], [showModal, handleDelete]);
|
||||
|
||||
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 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 actionButtonStyle = {
|
||||
height: '32px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #e8e8e8',
|
||||
transition: 'all 0.3s ease'
|
||||
};
|
||||
|
||||
const modalHeaderStyle = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
fontSize: '18px',
|
||||
fontWeight: '600'
|
||||
};
|
||||
|
||||
const modalHeaderAccent = {
|
||||
width: '4px',
|
||||
height: '20px',
|
||||
background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '2px'
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card title="机柜管理" extra={
|
||||
<Space>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
|
||||
添加机柜
|
||||
</Button>
|
||||
<Button icon={<UploadOutlined />} onClick={() => setImportModalVisible(true)}>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<div style={pageHeaderStyle}>
|
||||
<h1 style={titleStyle}>机柜管理</h1>
|
||||
<Space size="middle">
|
||||
<Button
|
||||
icon={<UploadOutlined />}
|
||||
onClick={() => setImportModalVisible(true)}
|
||||
style={secondaryButtonStyle}
|
||||
>
|
||||
导入机柜
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => showModal()}
|
||||
style={primaryButtonStyle}
|
||||
>
|
||||
添加机柜
|
||||
</Button>
|
||||
</Space>
|
||||
}>
|
||||
</div>
|
||||
|
||||
<Card style={cardStyle} headStyle={cardHeadStyle} bodyStyle={{ padding: '20px 24px' }}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={racks}
|
||||
@@ -307,15 +390,27 @@ function RackManagement() {
|
||||
pagination={pagination}
|
||||
onChange={handleTableChange}
|
||||
scroll={{ x: 'max-content' }}
|
||||
rowClassName={() => 'table-row'}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={editingRack ? '编辑机柜' : '添加机柜'}
|
||||
title={
|
||||
<div style={modalHeaderStyle}>
|
||||
<span style={modalHeaderAccent}></span>
|
||||
{editingRack ? '编辑机柜' : '添加机柜'}
|
||||
</div>
|
||||
}
|
||||
open={modalVisible}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
width={600}
|
||||
destroyOnClose
|
||||
styles={{
|
||||
body: { padding: '24px' },
|
||||
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }
|
||||
}}
|
||||
style={{ borderRadius: '16px', overflow: 'hidden' }}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
@@ -327,7 +422,7 @@ function RackManagement() {
|
||||
label="机柜ID"
|
||||
rules={[{ required: true, message: '请输入机柜ID' }]}
|
||||
>
|
||||
<Input placeholder="请输入机柜ID" />
|
||||
<Input placeholder="请输入机柜ID" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -335,7 +430,7 @@ function RackManagement() {
|
||||
label="机柜名称"
|
||||
rules={[{ required: true, message: '请输入机柜名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入机柜名称" />
|
||||
<Input placeholder="请输入机柜名称" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -343,7 +438,7 @@ function RackManagement() {
|
||||
label="所属机房"
|
||||
rules={[{ required: true, message: '请选择机房' }]}
|
||||
>
|
||||
<Select placeholder="请选择机房">
|
||||
<Select placeholder="请选择机房" style={{ borderRadius: '8px' }}>
|
||||
{rooms.map(room => (
|
||||
<Option key={room.roomId} value={room.roomId}>
|
||||
{room.name} ({room.roomId})
|
||||
@@ -357,7 +452,7 @@ function RackManagement() {
|
||||
label="高度(U)"
|
||||
rules={[{ required: true, message: '请输入机柜高度' }]}
|
||||
>
|
||||
<InputNumber placeholder="请输入机柜高度" min={1} max={50} style={{ width: '100%' }} />
|
||||
<InputNumber placeholder="请输入机柜高度" min={1} max={50} style={{ width: '100%', borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -365,7 +460,7 @@ function RackManagement() {
|
||||
label="最大功率(W)"
|
||||
rules={[{ required: true, message: '请输入最大功率' }]}
|
||||
>
|
||||
<InputNumber placeholder="请输入最大功率" min={0} style={{ width: '100%' }} />
|
||||
<InputNumber placeholder="请输入最大功率" min={0} style={{ width: '100%', borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -373,17 +468,31 @@ function RackManagement() {
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
>
|
||||
<Select placeholder="请选择状态">
|
||||
<Select placeholder="请选择状态" style={{ borderRadius: '8px' }}>
|
||||
<Option value="active">在用</Option>
|
||||
<Option value="maintenance">维护中</Option>
|
||||
<Option value="inactive">停用</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item style={{ textAlign: 'right' }}>
|
||||
<Form.Item style={{ marginBottom: 0, textAlign: 'right', marginTop: '24px' }}>
|
||||
<Space>
|
||||
<Button onClick={handleCancel}>取消</Button>
|
||||
<Button type="primary" htmlType="submit">
|
||||
<Button
|
||||
onClick={handleCancel}
|
||||
style={{ borderRadius: '8px', height: '40px' }}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
style={{
|
||||
...primaryButtonStyle,
|
||||
width: 'auto',
|
||||
paddingLeft: '24px',
|
||||
paddingRight: '24px'
|
||||
}}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</Space>
|
||||
@@ -393,7 +502,12 @@ function RackManagement() {
|
||||
|
||||
{/* 导入机柜模态框 */}
|
||||
<Modal
|
||||
title="导入机柜"
|
||||
title={
|
||||
<div style={modalHeaderStyle}>
|
||||
<span style={modalHeaderAccent}></span>
|
||||
导入机柜
|
||||
</div>
|
||||
}
|
||||
open={importModalVisible}
|
||||
onCancel={() => {
|
||||
setImportModalVisible(false);
|
||||
@@ -404,26 +518,64 @@ function RackManagement() {
|
||||
footer={null}
|
||||
width={600}
|
||||
destroyOnClose
|
||||
styles={{
|
||||
body: { padding: '24px' },
|
||||
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }
|
||||
}}
|
||||
style={{ borderRadius: '16px', overflow: 'hidden' }}
|
||||
>
|
||||
{!isImporting && !importResult ? (
|
||||
<div>
|
||||
<p>请上传XLSX格式的机柜数据文件</p>
|
||||
<p style={{ color: '#999', fontSize: '12px', marginBottom: 20 }}>支持的编码格式：UTF-8</p>
|
||||
<div style={{
|
||||
padding: '16px',
|
||||
background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)',
|
||||
borderRadius: '12px',
|
||||
marginBottom: '20px',
|
||||
border: '1px solid #e8e8e8'
|
||||
}}>
|
||||
<p style={{ margin: '0 0 12px 0', fontWeight: '600', color: '#262626' }}>
|
||||
请上传XLSX格式的机柜数据文件
|
||||
</p>
|
||||
<p style={{ margin: 0, color: '#8c8c8c', fontSize: '12px' }}>
|
||||
支持的编码格式：UTF-8
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<p style={{ fontWeight: 'bold', marginBottom: 8 }}>Excel文件格式要求：</p>
|
||||
<ul style={{ paddingLeft: 20, marginBottom: 10 }}>
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<p style={{ fontWeight: '600', marginBottom: '12px', color: '#262626' }}>
|
||||
Excel文件格式要求：
|
||||
</p>
|
||||
<ul style={{
|
||||
paddingLeft: '20px',
|
||||
marginBottom: '10px',
|
||||
color: '#595959',
|
||||
lineHeight: '1.8'
|
||||
}}>
|
||||
<li>必填字段：机柜ID、机柜名称、所属机房名称、高度(U)、最大功率(W)、状态</li>
|
||||
<li>状态值：active(在用)、maintenance(维护中)、inactive(停用)</li>
|
||||
<li>高度和功率必须是数字格式</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<Button icon={<DownloadOutlined />} onClick={handleDownloadTemplate} style={{ marginRight: 10 }}>
|
||||
<div style={{
|
||||
padding: '16px',
|
||||
background: '#f6f6f6',
|
||||
borderRadius: '8px',
|
||||
marginBottom: '20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px'
|
||||
}}>
|
||||
<Button
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={handleDownloadTemplate}
|
||||
style={actionButtonStyle}
|
||||
>
|
||||
下载导入模板
|
||||
</Button>
|
||||
<span style={{ color: '#999', fontSize: '12px' }}>包含示例数据的XLSX模板文件</span>
|
||||
<span style={{ color: '#8c8c8c', fontSize: '12px' }}>
|
||||
包含示例数据的XLSX模板文件
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Upload
|
||||
@@ -433,31 +585,72 @@ function RackManagement() {
|
||||
beforeUpload={handleImport}
|
||||
maxCount={1}
|
||||
>
|
||||
<Button type="primary" icon={<UploadOutlined />} block>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<UploadOutlined />}
|
||||
block
|
||||
style={{
|
||||
...primaryButtonStyle,
|
||||
height: '48px',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
选择Excel文件
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p>正在导入数据...</p>
|
||||
<Progress percent={importProgress} status="active" style={{ marginBottom: 20 }} />
|
||||
<div style={{ textAlign: 'center', padding: '20px 0' }}>
|
||||
<p style={{ marginBottom: '20px', fontWeight: '500' }}>
|
||||
{isImporting ? '正在导入数据...' : '导入完成'}
|
||||
</p>
|
||||
<Progress
|
||||
percent={importProgress}
|
||||
status={isImporting ? "active" : "success"}
|
||||
style={{ marginBottom: '24px' }}
|
||||
strokeColor={{
|
||||
'0%': '#667eea',
|
||||
'100%': '#764ba2'
|
||||
}}
|
||||
/>
|
||||
{importResult && (
|
||||
<div>
|
||||
<p style={{ marginBottom: 10 }}>导入完成：</p>
|
||||
<p>总记录数：{importResult.total || 0}</p>
|
||||
<p>成功：{importResult.imported || 0}</p>
|
||||
<p>重复：{importResult.duplicates || 0}</p>
|
||||
<div style={{
|
||||
textAlign: 'left',
|
||||
background: '#f6f6f6',
|
||||
padding: '20px',
|
||||
borderRadius: '12px',
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
<p style={{ marginBottom: '12px', fontWeight: '600' }}>
|
||||
导入结果：
|
||||
</p>
|
||||
<p style={{ margin: '8px 0', color: '#52c41a' }}>
|
||||
✓ 总记录数：{importResult.total || 0}
|
||||
</p>
|
||||
<p style={{ margin: '8px 0', color: '#52c41a' }}>
|
||||
✓ 成功：{importResult.imported || 0}
|
||||
</p>
|
||||
<p style={{ margin: '8px 0', color: importResult.duplicates > 0 ? '#faad14' : '#52c41a' }}>
|
||||
{importResult.duplicates > 0 ? '⚠' : '✓'} 重复：{importResult.duplicates || 0}
|
||||
</p>
|
||||
{importResult.details && importResult.details.length > 0 && (
|
||||
<div>
|
||||
<p style={{ marginTop: 20, fontWeight: 'bold' }}>导入失败记录：</p>
|
||||
<ul style={{ maxHeight: '300px', overflowY: 'auto', textAlign: 'left' }}>
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<p style={{ fontWeight: '600', color: '#ff4d4f', marginBottom: '8px' }}>
|
||||
导入失败记录：
|
||||
</p>
|
||||
<ul style={{
|
||||
maxHeight: '200px',
|
||||
overflowY: 'auto',
|
||||
textAlign: 'left',
|
||||
paddingLeft: '20px',
|
||||
margin: 0
|
||||
}}>
|
||||
{importResult.details.map((item, index) => (
|
||||
<li key={index} style={{ marginBottom: '8px' }}>
|
||||
<li key={index} style={{ marginBottom: '8px', color: '#ff4d4f' }}>
|
||||
<strong>第 {item.row} 行</strong>
|
||||
<ul style={{ margin: '4px 0 0 20px' }}>
|
||||
{item.errors.map((err, errIndex) => (
|
||||
<li key={errIndex} style={{ color: '#ff4d4f' }}>{err}</li>
|
||||
<li key={errIndex}>{err}</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
@@ -465,21 +658,21 @@ function RackManagement() {
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setImportModalVisible(false);
|
||||
setImportProgress(0);
|
||||
setImportResult(null);
|
||||
setIsImporting(false);
|
||||
fetchRacks();
|
||||
}}
|
||||
style={{ marginTop: 20 }}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setImportModalVisible(false);
|
||||
setImportProgress(0);
|
||||
setImportResult(null);
|
||||
setIsImporting(false);
|
||||
fetchRacks();
|
||||
}}
|
||||
style={primaryButtonStyle}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
@@ -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 (
|
||||
<div>
|
||||
<Card
|
||||
title="机柜可视化"
|
||||
extra={
|
||||
<Space>
|
||||
<Input
|
||||
placeholder="搜索设备名称、ID、IP..."
|
||||
value={searchKeyword}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
onPressEnter={(e) => handleSearch(e.target.value)}
|
||||
style={{ width: 220 }}
|
||||
allowClear
|
||||
prefix={<SearchOutlined />}
|
||||
suffix={
|
||||
searchMatchCount > 0 ? (
|
||||
<Badge count={searchMatchCount} size="small" style={{ backgroundColor: '#52c41a' }} />
|
||||
) : null
|
||||
}
|
||||
<div style={{ padding: '24px' }}>
|
||||
<div style={pageHeaderStyle}>
|
||||
<h1 style={titleStyle}>
|
||||
<CloudServerOutlined style={{ marginRight: '12px' }} />
|
||||
机柜可视化
|
||||
</h1>
|
||||
<Space size={12} wrap>
|
||||
<Input
|
||||
placeholder="搜索设备名称、ID、IP..."
|
||||
value={searchKeyword}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
onPressEnter={(e) => handleSearch(e.target.value)}
|
||||
style={{ width: 220, height: '40px', borderRadius: '8px' }}
|
||||
allowClear
|
||||
prefix={<SearchOutlined />}
|
||||
suffix={
|
||||
searchMatchCount > 0 ? (
|
||||
<Badge count={searchMatchCount} size="small" style={{ backgroundColor: '#52c41a' }} />
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
{searchKeyword && (
|
||||
<Button
|
||||
style={secondaryButtonStyle}
|
||||
icon={<ClearOutlined />}
|
||||
onClick={clearSearch}
|
||||
title="清除搜索"
|
||||
/>
|
||||
{searchKeyword && (
|
||||
<Button
|
||||
icon={<ClearOutlined />}
|
||||
onClick={clearSearch}
|
||||
title="清除搜索"
|
||||
/>
|
||||
)}
|
||||
<Select
|
||||
placeholder="选择机房"
|
||||
style={{ width: 180 }}
|
||||
value={selectedRoom}
|
||||
onChange={handleRoomChange}
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
allowClear
|
||||
>
|
||||
{getRooms().map(room => (
|
||||
<Option key={room.key} value={room.key}>
|
||||
{room.name || '未知机房'} ({room.roomId || room.id || '无ID'})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<Select
|
||||
placeholder="选择机柜"
|
||||
style={{ width: 200 }}
|
||||
value={selectedRack?.rackId}
|
||||
onChange={handleRackChange}
|
||||
loading={loading || loadingDevices}
|
||||
disabled={!selectedRoom || loading}
|
||||
allowClear
|
||||
>
|
||||
{selectedRoom && getRacksByRoom(selectedRoom).map(rack => (
|
||||
<Option key={rack?.rackId || `rack-${Math.random()}`} value={rack?.rackId}>
|
||||
{rack?.name || '未知机柜'} ({rack?.rackId || '无ID'}) - {rack?.height || 0}U
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={handleReload}
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
icon={<SettingOutlined />}
|
||||
onClick={handleOpenTooltipConfig}
|
||||
type={showTooltipConfig ? 'primary' : 'default'}
|
||||
>
|
||||
字段配置
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
{searchKeyword && (
|
||||
)}
|
||||
<Select
|
||||
placeholder="选择机房"
|
||||
style={{ width: 180, height: '40px' }}
|
||||
value={selectedRoom}
|
||||
onChange={handleRoomChange}
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
allowClear
|
||||
>
|
||||
{getRooms().map(room => (
|
||||
<Option key={room.key} value={room.key}>
|
||||
{room.name || '未知机房'} ({room.roomId || room.id || '无ID'})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<Select
|
||||
placeholder="选择机柜"
|
||||
style={{ width: 200, height: '40px' }}
|
||||
value={selectedRack?.rackId}
|
||||
onChange={handleRackChange}
|
||||
loading={loading || loadingDevices}
|
||||
disabled={!selectedRoom || loading}
|
||||
allowClear
|
||||
>
|
||||
{selectedRoom && getRacksByRoom(selectedRoom).map(rack => (
|
||||
<Option key={rack?.rackId || `rack-${Math.random()}`} value={rack?.rackId}>
|
||||
{rack?.name || '未知机柜'} ({rack?.rackId || '无ID'}) - {rack?.height || 0}U
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<Button
|
||||
style={secondaryButtonStyle}
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={handleReload}
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
style={showTooltipConfig ? primaryButtonStyle : secondaryButtonStyle}
|
||||
icon={<SettingOutlined />}
|
||||
onClick={handleOpenTooltipConfig}
|
||||
type={showTooltipConfig ? 'primary' : 'default'}
|
||||
>
|
||||
字段配置
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{searchKeyword && (
|
||||
<Card size="small" style={searchCardStyle} bodyStyle={{ padding: '16px 20px' }}>
|
||||
<div style={{
|
||||
marginBottom: 16,
|
||||
padding: '12px 16px',
|
||||
background: searchResults.length > 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'
|
||||
}}>
|
||||
<SearchOutlined style={{
|
||||
fontSize: 18,
|
||||
color: searchResults.length > 0 ? '#52c41a' : '#ff4d4f'
|
||||
}} />
|
||||
<Text strong style={{ color: searchResults.length > 0 ? '#135200' : '#cf1322' }}>
|
||||
<Text strong style={{ color: searchResults.length > 0 ? '#135200' : '#cf1322', margin: 0 }}>
|
||||
{searchResults.length > 0
|
||||
? `找到 ${searchResults.length} 个设备`
|
||||
: searching ? '搜索中...' : '未找到匹配的设备'}
|
||||
@@ -1143,7 +1276,6 @@ function RackVisualization() {
|
||||
type={highlightedDevice === result.deviceId ? 'primary' : 'default'}
|
||||
icon={<EnvironmentOutlined />}
|
||||
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'
|
||||
}}
|
||||
>
|
||||
<Tooltip title={`机柜: ${result.rackName}${result.roomName ? ` | 机房: ${result.roomName}` : ''} | U${result.position || '?'}`}>
|
||||
@@ -1185,37 +1319,40 @@ function RackVisualization() {
|
||||
</Space>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card style={cardStyle} bodyStyle={{ padding: '16px 20px' }}>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Space wrap>
|
||||
<Button icon={<ZoomInOutlined />} onClick={handleZoomIn}>放大</Button>
|
||||
<Button icon={<ZoomOutOutlined />} onClick={handleZoomOut}>缩小</Button>
|
||||
<Button icon={<RotateRightOutlined />} onClick={handleResetView}>重置视角</Button>
|
||||
<Space wrap size={12}>
|
||||
<Button style={secondaryButtonStyle} icon={<ZoomInOutlined />} onClick={handleZoomIn}>放大</Button>
|
||||
<Button style={secondaryButtonStyle} icon={<ZoomOutOutlined />} onClick={handleZoomOut}>缩小</Button>
|
||||
<Button style={secondaryButtonStyle} icon={<RotateRightOutlined />} onClick={handleResetView}>重置视角</Button>
|
||||
<Select
|
||||
placeholder="选择背景类型"
|
||||
style={{ width: 150 }}
|
||||
value={backgroundType}
|
||||
onChange={async (type) => {
|
||||
setBackgroundType(type);
|
||||
await saveBackgroundSettings(type, backgroundImage, backgroundSize);
|
||||
placeholder="选择背景类型"
|
||||
style={{ width: 150, height: '40px' }}
|
||||
value={backgroundType}
|
||||
onChange={async (type) => {
|
||||
setBackgroundType(type);
|
||||
await saveBackgroundSettings(type, backgroundImage, backgroundSize);
|
||||
}}
|
||||
>
|
||||
<Option value="gradient">渐变背景</Option>
|
||||
<Option value="image">自定义图片</Option>
|
||||
</Select>
|
||||
{backgroundType === 'image' && (
|
||||
<Space size={8}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="输入图片URL"
|
||||
style={{ width: 200, padding: '8px 12px', borderRadius: '8px', border: '1px solid #d9d9d9', height: '40px', boxSizing: 'border-box' }}
|
||||
onChange={async (e) => {
|
||||
const image = e.target.value;
|
||||
setBackgroundImage(image);
|
||||
await saveBackgroundSettings(backgroundType, image, backgroundSize);
|
||||
}}
|
||||
>
|
||||
<Option value="gradient">渐变背景</Option>
|
||||
<Option value="image">自定义图片</Option>
|
||||
</Select>
|
||||
{backgroundType === 'image' && (
|
||||
<Space>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="输入图片URL"
|
||||
style={{ width: 200, padding: '4px 8px', borderRadius: '4px', border: '1px solid #d9d9d9' }}
|
||||
onChange={async (e) => {
|
||||
const image = e.target.value;
|
||||
setBackgroundImage(image);
|
||||
await saveBackgroundSettings(backgroundType, image, backgroundSize);
|
||||
}}
|
||||
value={backgroundImage || ''}
|
||||
/>
|
||||
value={backgroundImage || ''}
|
||||
/>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@@ -1228,18 +1365,15 @@ function RackVisualization() {
|
||||
formData.append('file', file);
|
||||
formData.append('type', 'background');
|
||||
|
||||
// 发送图片到服务器
|
||||
const response = await axios.post('/api/background/upload', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
|
||||
// 保存服务器返回的图片路径
|
||||
if (response.data && response.data.path) {
|
||||
setBackgroundImage(response.data.path);
|
||||
message.success('背景图片上传成功');
|
||||
// 保存背景设置到服务器
|
||||
await saveBackgroundSettings('image', response.data.path, backgroundSize);
|
||||
} else {
|
||||
message.error('上传失败：服务器返回格式不正确');
|
||||
@@ -1255,10 +1389,10 @@ function RackVisualization() {
|
||||
style={{ display: 'none' }}
|
||||
id="backgroundFileInput"
|
||||
/>
|
||||
<Button onClick={() => document.getElementById('backgroundFileInput').click()} loading={uploading}>上传图片</Button>
|
||||
<Button style={secondaryButtonStyle} onClick={() => document.getElementById('backgroundFileInput').click()} loading={uploading}>上传图片</Button>
|
||||
<Select
|
||||
placeholder="图片大小"
|
||||
style={{ width: 100 }}
|
||||
style={{ width: 100, height: '40px' }}
|
||||
value={backgroundSize}
|
||||
onChange={async (size) => {
|
||||
setBackgroundSize(size);
|
||||
@@ -1270,7 +1404,7 @@ function RackVisualization() {
|
||||
<Option value="auto">原始大小</Option>
|
||||
</Select>
|
||||
{backgroundImage && (
|
||||
<Button onClick={() => {
|
||||
<Button style={secondaryButtonStyle} onClick={() => {
|
||||
setBackgroundImage(null);
|
||||
setBackgroundType('gradient');
|
||||
}}>清除</Button>
|
||||
@@ -1288,9 +1422,10 @@ function RackVisualization() {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f5f5f5',
|
||||
backgroundColor: '#fafafa',
|
||||
fontSize: '16px',
|
||||
color: '#666'
|
||||
color: '#666',
|
||||
borderRadius: '12px'
|
||||
}}>
|
||||
加载机柜数据中...
|
||||
</div>
|
||||
@@ -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 (
|
||||
<div
|
||||
key={deviceId}
|
||||
@@ -1576,8 +1715,8 @@ function RackVisualization() {
|
||||
transition: 'all 0.2s ease',
|
||||
boxShadow: isHighlighted
|
||||
? `
|
||||
0 0 20px rgba(56, 189, 248, 0.6),
|
||||
0 4px 12px rgba(56, 189, 248, 0.4),
|
||||
0 0 20px ${statusTheme.glowColor},
|
||||
0 4px 12px ${statusTheme.shadowColor},
|
||||
0 1px 2px rgba(0,0,0,0.3),
|
||||
inset 0 1px 0 rgba(255,255,255,0.2)
|
||||
`
|
||||
@@ -1588,20 +1727,22 @@ function RackVisualization() {
|
||||
inset 0 -1px 0 rgba(0,0,0,0.1)
|
||||
`,
|
||||
background: isHighlighted
|
||||
? 'linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%)'
|
||||
: 'linear-gradient(180deg, #3d4451 0%, #2d3139 50%, #252930 100%)',
|
||||
? statusTheme.bgGradient
|
||||
: statusTheme.bgGradient,
|
||||
border: isHighlighted
|
||||
? '2px solid #38bdf8'
|
||||
: '1px solid #4a5568',
|
||||
? `2px solid ${statusTheme.topBorderColor}`
|
||||
: `1px solid ${statusTheme.borderColor}`,
|
||||
borderTop: isHighlighted
|
||||
? '2px solid #7dd3fc'
|
||||
: '1px solid #565c6b',
|
||||
? `2px solid ${statusTheme.topBorderColor}`
|
||||
: `1px solid ${statusTheme.topBorderColor}`,
|
||||
overflow: 'hidden',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
zIndex: isHighlighted ? 200 : 100,
|
||||
pointerEvents: 'auto',
|
||||
animation: isHighlighted ? 'highlightPulse 1.5s ease-in-out infinite' : 'none'
|
||||
animation: isHighlighted ? 'highlightPulse 1.5s ease-in-out infinite' :
|
||||
device?.status === 'warning' ? 'ledBlink 2s ease-in-out infinite' :
|
||||
device?.status === 'error' || device?.status === 'fault' ? 'ledBlink 0.8s ease-in-out infinite' : 'none'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
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);
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '2px',
|
||||
background: 'linear-gradient(90deg, #38bdf8 0%, #0ea5e9 50%, #38bdf8 100%)',
|
||||
opacity: 0.6
|
||||
background: `linear-gradient(90deg, ${statusTheme.topBorderColor} 0%, ${statusTheme.borderColor} 50%, ${statusTheme.topBorderColor} 100%)`,
|
||||
opacity: 0.8
|
||||
}} />
|
||||
|
||||
{/* 左侧状态指示区域 - 增强版 */}
|
||||
<div style={{
|
||||
width: '7%',
|
||||
background: 'linear-gradient(180deg, #1e293b 0%, #0f172a 100%)',
|
||||
background: isHighlighted
|
||||
? `linear-gradient(180deg, ${statusTheme.borderColor}33 0%, ${statusTheme.borderColor}22 100%)`
|
||||
: `linear-gradient(180deg, ${statusTheme.borderColor}44 0%, ${statusTheme.borderColor}22 100%)`,
|
||||
borderRadius: '3px 0 0 3px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -1662,22 +1804,22 @@ function RackVisualization() {
|
||||
flexShrink: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
borderRight: '1px solid rgba(0,0,0,0.5)'
|
||||
borderRight: `1px solid ${statusTheme.borderColor}66`
|
||||
}}>
|
||||
{/* 设备类型标识 */}
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '8px',
|
||||
background: 'linear-gradient(180deg, #334155 0%, #1e293b 100%)',
|
||||
background: `linear-gradient(180deg, ${statusTheme.borderColor}66 0%, ${statusTheme.borderColor}33 100%)`,
|
||||
borderRadius: '2px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px solid rgba(56, 189, 248, 0.2)'
|
||||
border: `1px solid ${statusTheme.borderColor}44`
|
||||
}}>
|
||||
<span style={{
|
||||
fontSize: '4px',
|
||||
color: '#38bdf8',
|
||||
color: statusTheme.topBorderColor,
|
||||
fontWeight: '700',
|
||||
letterSpacing: '0.5px'
|
||||
}}>
|
||||
|
||||
@@ -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 (
|
||||
<div>
|
||||
<Card title="机房管理" extra={
|
||||
<Space>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<div style={pageHeaderStyle}>
|
||||
<h1 style={titleStyle}>机房管理</h1>
|
||||
<Space size="middle">
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={fetchRooms}
|
||||
style={actionButtonStyle}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => showModal()}
|
||||
style={primaryButtonStyle}
|
||||
>
|
||||
添加机房
|
||||
</Button>
|
||||
</Space>
|
||||
}>
|
||||
</div>
|
||||
|
||||
<Card style={cardStyle} headStyle={cardHeadStyle} bodyStyle={{ padding: '20px 24px' }}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={rooms}
|
||||
rowKey="roomId"
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 10 }}
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`
|
||||
}}
|
||||
style={tableStyle}
|
||||
rowClassName={() => 'table-row'}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={editingRoom ? '编辑机房' : '添加机房'}
|
||||
title={
|
||||
<div style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<span style={{
|
||||
width: '4px',
|
||||
height: '20px',
|
||||
background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '2px'
|
||||
}}></span>
|
||||
{editingRoom ? '编辑机房' : '添加机房'}
|
||||
</div>
|
||||
}
|
||||
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'
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
@@ -211,7 +325,7 @@ function RoomManagement() {
|
||||
label="机房ID"
|
||||
rules={[{ required: true, message: '请输入机房ID' }]}
|
||||
>
|
||||
<Input placeholder="请输入机房ID" />
|
||||
<Input placeholder="请输入机房ID" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -219,7 +333,7 @@ function RoomManagement() {
|
||||
label="机房名称"
|
||||
rules={[{ required: true, message: '请输入机房名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入机房名称" />
|
||||
<Input placeholder="请输入机房名称" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -227,7 +341,7 @@ function RoomManagement() {
|
||||
label="位置"
|
||||
rules={[{ required: true, message: '请输入机房位置' }]}
|
||||
>
|
||||
<Input placeholder="请输入机房位置" />
|
||||
<Input placeholder="请输入机房位置" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -235,7 +349,7 @@ function RoomManagement() {
|
||||
label="面积(㎡)"
|
||||
rules={[{ required: true, message: '请输入机房面积' }]}
|
||||
>
|
||||
<InputNumber placeholder="请输入机房面积" min={0} step={0.1} style={{ width: '100%' }} />
|
||||
<InputNumber placeholder="请输入机房面积" min={0} step={0.1} style={{ width: '100%', borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -243,7 +357,7 @@ function RoomManagement() {
|
||||
label="容量(机柜数)"
|
||||
rules={[{ required: true, message: '请输入机柜容量' }]}
|
||||
>
|
||||
<InputNumber placeholder="请输入机柜容量" min={0} style={{ width: '100%' }} />
|
||||
<InputNumber placeholder="请输入机柜容量" min={0} style={{ width: '100%', borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -251,7 +365,7 @@ function RoomManagement() {
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
>
|
||||
<Select placeholder="请选择状态">
|
||||
<Select placeholder="请选择状态" style={{ borderRadius: '8px' }}>
|
||||
<Option value="active">在用</Option>
|
||||
<Option value="maintenance">维护中</Option>
|
||||
<Option value="inactive">停用</Option>
|
||||
@@ -262,13 +376,27 @@ function RoomManagement() {
|
||||
name="description"
|
||||
label="描述"
|
||||
>
|
||||
<Input.TextArea placeholder="请输入机房描述" rows={3} />
|
||||
<Input.TextArea placeholder="请输入机房描述" rows={3} style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item style={{ textAlign: 'right' }}>
|
||||
<Form.Item style={{ marginBottom: 0, textAlign: 'right', marginTop: '24px' }}>
|
||||
<Space>
|
||||
<Button onClick={handleCancel}>取消</Button>
|
||||
<Button type="primary" htmlType="submit">
|
||||
<Button
|
||||
onClick={handleCancel}
|
||||
style={{ borderRadius: '8px', height: '40px' }}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
style={{
|
||||
...primaryButtonStyle,
|
||||
width: 'auto',
|
||||
paddingLeft: '24px',
|
||||
paddingRight: '24px'
|
||||
}}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</Space>
|
||||
|
||||
@@ -323,28 +323,108 @@ const UserManagement = () => {
|
||||
marginBottom: '24px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
gap: '16px'
|
||||
};
|
||||
|
||||
const titleStyle = {
|
||||
fontSize: '20px',
|
||||
fontWeight: '600',
|
||||
margin: 0
|
||||
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 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 actionButtonStyle = {
|
||||
height: '32px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #e8e8e8',
|
||||
transition: 'all 0.3s ease'
|
||||
};
|
||||
|
||||
const modalHeaderStyle = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
fontSize: '18px',
|
||||
fontWeight: '600'
|
||||
};
|
||||
|
||||
const modalHeaderAccent = {
|
||||
width: '4px',
|
||||
height: '20px',
|
||||
background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '2px'
|
||||
};
|
||||
|
||||
const avatarModalStyle = {
|
||||
textAlign: 'center',
|
||||
padding: '20px 0'
|
||||
};
|
||||
|
||||
const avatarWrapperStyle = {
|
||||
marginBottom: '24px',
|
||||
position: 'relative',
|
||||
display: 'inline-block'
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<div style={pageHeaderStyle}>
|
||||
<h1 style={titleStyle}>用户管理</h1>
|
||||
<Space>
|
||||
<Button icon={<ReloadOutlined />} onClick={fetchUsers}>刷新</Button>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
|
||||
<Space size="middle">
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={fetchUsers}
|
||||
style={secondaryButtonStyle}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAdd}
|
||||
style={primaryButtonStyle}
|
||||
>
|
||||
添加用户
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Card style={cardStyle} headStyle={cardHeadStyle} bodyStyle={{ padding: '20px 24px' }}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={users}
|
||||
@@ -359,15 +439,27 @@ const UserManagement = () => {
|
||||
onChange={(newPagination) => {
|
||||
setPagination(prev => ({ ...prev, ...newPagination }));
|
||||
}}
|
||||
rowClassName={() => 'table-row'}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={editingUser ? '编辑用户' : '添加用户'}
|
||||
title={
|
||||
<div style={modalHeaderStyle}>
|
||||
<span style={modalHeaderAccent}></span>
|
||||
{editingUser ? '编辑用户' : '添加用户'}
|
||||
</div>
|
||||
}
|
||||
open={modalVisible}
|
||||
onCancel={() => setModalVisible(false)}
|
||||
footer={null}
|
||||
width={500}
|
||||
destroyOnClose
|
||||
styles={{
|
||||
body: { padding: '24px' },
|
||||
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }
|
||||
}}
|
||||
style={{ borderRadius: '16px', overflow: 'hidden' }}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
@@ -383,7 +475,7 @@ const UserManagement = () => {
|
||||
{ min: 3, max: 20, message: '用户名长度必须在3-20个字符之间' }
|
||||
]}
|
||||
>
|
||||
<Input placeholder="请输入用户名" />
|
||||
<Input placeholder="请输入用户名" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -391,7 +483,7 @@ const UserManagement = () => {
|
||||
label="真实姓名"
|
||||
rules={[{ required: true, message: '请输入真实姓名' }]}
|
||||
>
|
||||
<Input placeholder="请输入真实姓名" />
|
||||
<Input placeholder="请输入真实姓名" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -402,11 +494,11 @@ const UserManagement = () => {
|
||||
{ type: 'email', message: '请输入有效的邮箱地址' }
|
||||
]}
|
||||
>
|
||||
<Input placeholder="请输入邮箱" />
|
||||
<Input placeholder="请输入邮箱" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="phone" label="手机号">
|
||||
<Input placeholder="请输入手机号" />
|
||||
<Input placeholder="请输入手机号" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -414,7 +506,7 @@ const UserManagement = () => {
|
||||
label="角色"
|
||||
rules={[{ required: true, message: '请选择角色' }]}
|
||||
>
|
||||
<Select mode="multiple" placeholder="请选择角色">
|
||||
<Select mode="multiple" placeholder="请选择角色" style={{ borderRadius: '8px' }}>
|
||||
{roles.map(role => (
|
||||
<Option key={role.roleId} value={role.roleId}>
|
||||
{role.roleName}
|
||||
@@ -432,12 +524,12 @@ const UserManagement = () => {
|
||||
{ min: 6, message: '密码长度不能少于6个字符' }
|
||||
]}
|
||||
>
|
||||
<Input.Password placeholder="请输入初始密码" />
|
||||
<Input.Password placeholder="请输入初始密码" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item name="status" label="状态">
|
||||
<Select placeholder="请选择状态">
|
||||
<Select placeholder="请选择状态" style={{ borderRadius: '8px' }}>
|
||||
<Option value="active">正常</Option>
|
||||
<Option value="inactive">禁用</Option>
|
||||
<Option value="locked">锁定</Option>
|
||||
@@ -452,14 +544,29 @@ const UserManagement = () => {
|
||||
{ min: 6, message: '密码长度不能少于6个字符' }
|
||||
]}
|
||||
>
|
||||
<Input.Password placeholder="留空则不修改密码" />
|
||||
<Input.Password placeholder="留空则不修改密码" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
||||
<Form.Item style={{ marginBottom: 0, textAlign: 'right', marginTop: '24px' }}>
|
||||
<Space>
|
||||
<Button onClick={() => setModalVisible(false)}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" loading={loading}>
|
||||
<Button
|
||||
onClick={() => setModalVisible(false)}
|
||||
style={{ borderRadius: '8px', height: '40px' }}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={loading}
|
||||
style={{
|
||||
...primaryButtonStyle,
|
||||
width: 'auto',
|
||||
paddingLeft: '24px',
|
||||
paddingRight: '24px'
|
||||
}}
|
||||
>
|
||||
{editingUser ? '更新' : '创建'}
|
||||
</Button>
|
||||
</Space>
|
||||
@@ -468,11 +575,22 @@ const UserManagement = () => {
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title={`重置密码 - ${passwordUser?.username}`}
|
||||
title={
|
||||
<div style={modalHeaderStyle}>
|
||||
<span style={modalHeaderAccent}></span>
|
||||
{`重置密码 - ${passwordUser?.username}`}
|
||||
</div>
|
||||
}
|
||||
open={passwordModalVisible}
|
||||
onCancel={() => setPasswordModalVisible(false)}
|
||||
footer={null}
|
||||
width={400}
|
||||
destroyOnClose
|
||||
styles={{
|
||||
body: { padding: '24px' },
|
||||
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }
|
||||
}}
|
||||
style={{ borderRadius: '16px', overflow: 'hidden' }}
|
||||
>
|
||||
<Form
|
||||
form={passwordForm}
|
||||
@@ -488,13 +606,28 @@ const UserManagement = () => {
|
||||
{ min: 6, message: '密码长度不能少于6个字符' }
|
||||
]}
|
||||
>
|
||||
<Input.Password placeholder="请输入新密码" />
|
||||
<Input.Password placeholder="请输入新密码" style={{ borderRadius: '8px' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
||||
<Form.Item style={{ marginBottom: 0, textAlign: 'right', marginTop: '24px' }}>
|
||||
<Space>
|
||||
<Button onClick={() => setPasswordModalVisible(false)}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" loading={loading}>
|
||||
<Button
|
||||
onClick={() => setPasswordModalVisible(false)}
|
||||
style={{ borderRadius: '8px', height: '40px' }}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={loading}
|
||||
style={{
|
||||
...primaryButtonStyle,
|
||||
width: 'auto',
|
||||
paddingLeft: '24px',
|
||||
paddingRight: '24px'
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
</Space>
|
||||
@@ -503,14 +636,25 @@ const UserManagement = () => {
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title={`设置头像 - ${avatarUser?.username}`}
|
||||
title={
|
||||
<div style={modalHeaderStyle}>
|
||||
<span style={modalHeaderAccent}></span>
|
||||
{`设置头像 - ${avatarUser?.username}`}
|
||||
</div>
|
||||
}
|
||||
open={avatarModalVisible}
|
||||
onCancel={() => setAvatarModalVisible(false)}
|
||||
footer={null}
|
||||
width={400}
|
||||
destroyOnClose
|
||||
styles={{
|
||||
body: { padding: '24px' },
|
||||
header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }
|
||||
}}
|
||||
style={{ borderRadius: '16px', overflow: 'hidden' }}
|
||||
>
|
||||
<div style={{ textAlign: 'center', padding: '20px 0' }}>
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<div style={avatarModalStyle}>
|
||||
<div style={avatarWrapperStyle}>
|
||||
<Badge dot={!!avatarUser?.avatar} color="green" offset={[-5, 35]}>
|
||||
<Avatar
|
||||
size={120}
|
||||
@@ -518,7 +662,8 @@ const UserManagement = () => {
|
||||
src={getAvatarUrl(avatarUser)}
|
||||
style={{
|
||||
backgroundColor: avatarUser?.avatar ? 'transparent' : '#1890ff',
|
||||
border: '1px solid #f0f0f0'
|
||||
border: '1px solid #f0f0f0',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
@@ -539,6 +684,10 @@ const UserManagement = () => {
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
loading={uploadLoading}
|
||||
block
|
||||
style={{
|
||||
...primaryButtonStyle,
|
||||
height: '44px'
|
||||
}}
|
||||
>
|
||||
{avatarUser?.avatar ? '更换头像' : '上传头像'}
|
||||
</Button>
|
||||
@@ -549,13 +698,14 @@ const UserManagement = () => {
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={handleAvatarDelete}
|
||||
block
|
||||
style={{ borderRadius: '8px', height: '44px' }}
|
||||
>
|
||||
删除头像
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
|
||||
<div style={{ marginTop: '16px', color: '#999', fontSize: '12px' }}>
|
||||
<div style={{ marginTop: '16px', color: '#8c8c8c', fontSize: '12px' }}>
|
||||
支持 JPG、PNG、GIF、WebP 格式，大小不超过 5MB
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user