style(前端页面): 优化多个页面的UI样式和交互体验

重构页面布局和组件样式，统一设计语言
添加渐变背景、圆角边框和阴影效果
优化按钮、卡片和表格的视觉表现
改进模态框的标题和内容区域样式
增强导航按钮的悬停交互效果

frontend/src/index.css

@@ -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;
 }

frontend/src/pages/Dashboard.jsx

@@ -1,26 +1,31 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Card, Row, Col, Statistic, message, Button, Tag } from 'antd';
+import { Card, Row, Col, Statistic, message, Button, Tag, Typography } from 'antd';
 import {
   DatabaseOutlined,
   CloudServerOutlined,
   WarningOutlined,
-  PoweroffOutlined, 
   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,
+  color: '#fff',
-  WebkitBackgroundClip: 'text',
+  margin: '0 0 8px 0',
-  WebkitTextFillColor: 'transparent',
+  display: 'flex',
-  margin: '0 0 8px 0'
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '12px'
 };
 
 const subtitleStyle = {
-  fontSize: '1.1rem',
+  fontSize: '1rem',
-  color: theme.textSecondary,
+  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)',
+  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
-  background: theme.cardBg,
+  background: '#fff',
-  backdropFilter: 'blur(10px)',
   transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
   position: 'relative',
   overflow: 'hidden',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  height: '100%'
 };
 
-const systemOverviewStyle = {
+const statCardHoverStyle = {
-  marginTop: '32px'
+  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)',
+  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
-  background: theme.cardBg,
+  background: '#fff'
-  backdropFilter: 'blur(10px)'
-};
-
-const welcomeSectionStyle = {
-  background: theme.background,
-  borderRadius: '12px',
-  padding: '20px',
-  textAlign: 'center',
-  color: 'white',
-  marginBottom: '24px'
 };
 
 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)',
+  border: '2px solid #f0f0f0',
-  background: 'rgba(24, 144, 255, 0.02)',
+  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',
+  fontSize: '2.2rem',
-  color: theme.primary
+  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',
+  padding: '20px',
-  border: '1px solid rgba(24, 144, 255, 0.1)'
+  border: '1px solid #91d5ff'
 };
 
-const navButtonsData = [
+const quickStatsStyle = {
-  { key: 'devices', icon: CloudServerOutlined, text: '设备管理', path: '/devices' },
+  display: 'grid',
-  { key: 'racks', icon: DatabaseOutlined, text: '资源规划', path: '/racks' },
+  gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-  { key: 'faults', icon: WarningOutlined, text: '故障监控', path: '/faults' },
+  gap: '16px',
-  { key: 'settings', icon: SettingOutlined, text: '系统配置', path: '/settings' }
+  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) => ({
+const navButtonsData = [
-  position: 'absolute', 
+  { key: 'devices', icon: CloudServerOutlined, text: '设备管理', path: '/devices', color: '#1890ff' },
-  top: '0', 
+  { key: 'racks', icon: DatabaseOutlined, text: '资源规划', path: '/racks', color: '#722ed1' },
-  right: '0', 
+  { key: 'faults', icon: WarningOutlined, text: '故障监控', path: '/faults', color: '#faad14' },
-  width: '60px', 
+  { key: 'settings', icon: SettingOutlined, text: '系统配置', path: '/settings', color: '#13c2c2' }
-  height: '60px', 
+];
-  background: `linear-gradient(135deg, ${color} 0%, ${color}99 100%)`,
-  borderRadius: '50%',
-  opacity: '0.1'
-});
 
 function Dashboard() {
   const [stats, setStats] = useState({
@@ -158,9 +201,12 @@ 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 {
@@ -195,7 +241,9 @@ function Dashboard() {
         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;
+      setHoveredCard(buttonKey);
-      e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
-      e.currentTarget.style.transform = 'translateY(-2px)';
     } else {
-      e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
+      setHoveredCard(null);
-      e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
-      e.currentTarget.style.transform = 'translateY(0)';
     }
-  }, []);
+  };
 
   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',
                 color: theme.textPrimary,
-                marginBottom: '8px'
+                marginBottom: '4px'
               }}
               loading={loading}
             />
             {customStatus ? (
               statKey === 'totalRacks' ? (
-                <div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
+                <div style={{ display: 'flex', alignItems: 'center', fontSize: '0.85rem', color: theme.success }}>
-                  <PoweroffOutlined style={{ marginRight: '4px' }} />
+                  <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>
+                  <span>正常运行中</span>
                 </div>
               ) : (
-                <div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
+                <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' }} />
+                  <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,33 +365,42 @@ 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 }) => (
+  const navButtons = useMemo(() => navButtonsData.map(({ key, icon: Icon, text, color }) => (
     <Button
       key={key}
       type="text"
-      style={navButtonStyle}
+      style={{
-      onMouseEnter={(e) => handleNavHover(e, true)}
+        ...navButtonStyle,
-      onMouseLeave={(e) => handleNavHover(e, false)}
+        ...(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 }}>
@@ -349,7 +412,11 @@ function Dashboard() {
           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}>
+            <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.5rem', 
+                fontSize: '1.3rem',
                 fontWeight: '600',
                 margin: '0 0 8px 0',
-                color: 'white'
+                color: '#fff'
               }}>
                 欢迎使用IDC设备管理系统
               </h2>
               <p style={{
-                fontSize: '1rem', 
+                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>

frontend/src/pages/DeviceManagement.jsx

@@ -819,15 +819,102 @@ 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>
+    <div style={{ padding: '24px' }}>
-      <Card title="设备管理" extra={
+      <div style={pageHeaderStyle}>
-        <Space>
+        <h1 style={titleStyle}>
-          <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>添加设备</Button>
+          <CloudServerOutlined style={{ marginRight: '12px' }} />
-          <Button icon={<DownloadOutlined />} onClick={handleExport}>导出设备</Button>
+          设备管理
-          <Button icon={<UploadOutlined />} onClick={() => setImportModalVisible(true)}>导入设备</Button>
+        </h1>
-          <Button icon={<SettingOutlined />} onClick={() => setFieldConfigModalVisible(true)}>字段配置</Button>
+        <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="重置列宽"
@@ -835,26 +922,34 @@ function DeviceManagement() {
             重置列宽
           </Button>
           <Button
-            type="primary" 
+            style={{
-            danger={false} 
+              ...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" 
+            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={searchCardStyle} bodyStyle={{ padding: '16px 20px' }}>
-        <Card size="small" style={{ marginBottom: 16 }}>
         <Form
           form={searchForm}
           layout="inline"
@@ -864,8 +959,12 @@ function DeviceManagement() {
           <Form.Item name="keyword">
             <Input
               placeholder="搜索设备ID、名称、类型、型号、序列号、IP、描述..."
-                prefix={<SearchOutlined />}
+              prefix={<SearchOutlined style={{ color: '#667eea' }} />}
-                style={{ width: 300 }}
+              style={{ 
+                width: 320,
+                borderRadius: '8px',
+                border: '1px solid #d9d9d9'
+              }}
               value={keyword}
               onChange={(e) => setKeyword(e.target.value)}
             />
@@ -875,7 +974,7 @@ function DeviceManagement() {
             <Select
               value={status}
               onChange={setStatus}
-                style={{ width: 150 }}
+              style={{ width: 150, borderRadius: '8px' }}
             >
               <Option value="all">所有状态</Option>
               <Option value="running">运行中</Option>
@@ -889,7 +988,7 @@ function DeviceManagement() {
             <Select
               value={type}
               onChange={setType}
-                style={{ width: 150 }}
+              style={{ width: 150, borderRadius: '8px' }}
             >
               <Option value="all">所有类型</Option>
               <Option value="server">服务器</Option>
@@ -902,10 +1001,18 @@ function DeviceManagement() {
           
           <Form.Item>
             <Space>
-                <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
+              <Button
+                type="primary"
+                htmlType="submit"
+                icon={<SearchOutlined />}
+                style={primaryButtonStyle}
+              >
                 搜索
               </Button>
-                <Button onClick={handleReset}>
+              <Button
+                onClick={handleReset}
+                style={secondaryButtonStyle}
+              >
                 重置
               </Button>
             </Space>
@@ -913,8 +1020,7 @@ function DeviceManagement() {
         </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', marginTop: '24px' }}>
-
-          <Form.Item style={{ textAlign: 'right' }}>
             <Space>
-              <Button onClick={handleCancel}>取消</Button>
+              <Button onClick={handleCancel} style={secondaryButtonStyle}>取消</Button>
-              <Button type="primary" htmlType="submit">
+              <Button type="primary" htmlType="submit" style={primaryButtonStyle}>确定</Button>
-                确定
-              </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={() => setFieldConfigModalVisible(false)} style={secondaryButtonStyle}>取消</Button>
-              <Button onClick={handleResetFieldConfig}>重置默认</Button>
+              <Button onClick={handleResetFieldConfig} style={secondaryButtonStyle}>重置默认</Button>
-              <Button type="primary" htmlType="submit">保存</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: '#666', marginBottom: '8px' }}>请上传CSV格式的设备数据文件</p>
-            <p style={{ color: '#999', fontSize: '12px', marginBottom: 20 }}>支持的编码格式：GBK</p>
+            <p style={{ color: '#999', fontSize: '12px', marginBottom: '20px' }}>支持的编码格式：GBK</p>
             
-            <div style={{ marginBottom: 20 }}>
+            <div style={{ marginBottom: '20px', padding: '16px', background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)', borderRadius: '12px', border: '1px solid #f0f0f0' }}>
-              <p style={{ fontWeight: 'bold', marginBottom: 8 }}>CSV文件格式要求：</p>
+              <p style={{ fontWeight: '600', marginBottom: '8px', color: '#333' }}>CSV文件格式要求：</p>
-              <ul style={{ paddingLeft: 20, marginBottom: 10 }}>
+              <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>
+            <p style={{ marginBottom: '16px', color: '#666' }}>正在导入数据...</p>
-            <Progress percent={importProgress} status="active" style={{ marginBottom: 20 }} />
+            <Progress percent={importProgress} status="active" style={{ marginBottom: '20px' }} strokeColor={{ '0%': '#667eea', '100%': '#764ba2' }} />
             {importResult && importResult.statistics && (
               <div>
-                <p style={{ marginBottom: 10 }}>导入完成：</p>
+                <p style={{ marginBottom: '10px', fontWeight: '600' }}>导入完成：</p>
-                <p>总记录数：{importResult.statistics.total || 0}</p>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px', marginBottom: '16px' }}>
-                <p>成功：{importResult.statistics.success || 0}</p>
+                  <div style={{ padding: '12px', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', borderRadius: '8px', color: '#fff', textAlign: 'center' }}>
-                <p>失败：{importResult.statistics.failed || 0}</p>
+                    <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' }}>
+                    <div style={{ marginTop: '20px', maxHeight: 400, overflowY: 'auto', border: '1px solid #ffcccc', borderRadius: '8px', padding: '12px', backgroundColor: '#fff7f7' }}>
-                      <h4 style={{ color: '#d93025', marginBottom: '12px' }}>失败记录详情：</h4>
+                      <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 
-            <Card size="small" title="基本信息">
+              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>
+                  <label style={{ fontWeight: '500', color: '#666' }}>设备ID：</label>
-                  <span style={{ marginLeft: 8 }}>{selectedDevice.deviceId || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.deviceId || '-'}</span>
                 </div>
                 <div>
-                  <label style={{ fontWeight: 'bold', color: '#666' }}>设备名称：</label>
+                  <label style={{ fontWeight: '500', color: '#666' }}>设备名称：</label>
-                  <span style={{ marginLeft: 8 }}>{selectedDevice.name || '-'}</span>
+                  <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>
+                  <label style={{ fontWeight: '500', color: '#666' }}>型号：</label>
-                  <span style={{ marginLeft: 8 }}>{selectedDevice.model || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.model || '-'}</span>
                 </div>
                 <div>
-                  <label style={{ fontWeight: 'bold', color: '#666' }}>序列号：</label>
+                  <label style={{ fontWeight: '500', color: '#666' }}>序列号：</label>
-                  <span style={{ marginLeft: 8 }}>{selectedDevice.serialNumber || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.serialNumber || '-'}</span>
                 </div>
                 <div>
-                  <label style={{ fontWeight: 'bold', color: '#666' }}>IP地址：</label>
+                  <label style={{ fontWeight: '500', color: '#666' }}>IP地址：</label>
-                  <span style={{ marginLeft: 8 }}>{selectedDevice.ipAddress || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.ipAddress || '-'}</span>
                 </div>
                 <div>
-                  <label style={{ fontWeight: 'bold', color: '#666' }}>所在机房：</label>
+                  <label style={{ fontWeight: '500', color: '#666' }}>所在机房：</label>
-                  <span style={{ marginLeft: 8 }}>{selectedDevice.Rack?.Room?.name || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.Rack?.Room?.name || '-'}</span>
                 </div>
                 <div>
-                  <label style={{ fontWeight: 'bold', color: '#666' }}>所在机柜：</label>
+                  <label style={{ fontWeight: '500', color: '#666' }}>所在机柜：</label>
-                  <span style={{ marginLeft: 8 }}>{selectedDevice.Rack?.name || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.Rack?.name || '-'}</span>
                 </div>
                 <div>
-                  <label style={{ fontWeight: 'bold', color: '#666' }}>位置：</label>
+                  <label style={{ fontWeight: '500', color: '#666' }}>位置：</label>
-                  <span style={{ marginLeft: 8 }}>{selectedDevice.position || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.position || '-'}</span>
                 </div>
                 <div>
-                  <label style={{ fontWeight: 'bold', color: '#666' }}>高度(U)：</label>
+                  <label style={{ fontWeight: '500', color: '#666' }}>高度(U)：</label>
-                  <span style={{ marginLeft: 8 }}>{selectedDevice.height || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.height || '-'}</span>
                 </div>
                 <div>
-                  <label style={{ fontWeight: 'bold', color: '#666' }}>功率(W)：</label>
+                  <label style={{ fontWeight: '500', color: '#666' }}>功率(W)：</label>
-                  <span style={{ marginLeft: 8 }}>{selectedDevice.power || '-'}</span>
+                  <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>
+                  <label style={{ fontWeight: '500', color: '#666' }}>购买日期：</label>
-                  <span style={{ marginLeft: 8 }}>
+                  <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',
+                    color: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? '#d93025' : '#333',
-                    fontWeight: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? 'bold' : 'normal'
+                    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 }}>
+                <div style={{ marginTop: '16px' }}>
-                  <label style={{ fontWeight: 'bold', color: '#666' }}>描述：</label>
+                  <label style={{ fontWeight: '500', color: '#666' }}>描述：</label>
-                  <div style={{ marginTop: 8, padding: '8px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
+                  <div style={{ marginTop: '8px', padding: '12px', backgroundColor: '#fafafa', borderRadius: '8px', color: '#333' }}>
                     {selectedDevice.description}
                   </div>
                 </div>

frontend/src/pages/Login.jsx

@@ -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 { Form, Input, Button, Card, message, Typography, Divider, Space, Alert } from 'antd';
-import { UserOutlined, LockOutlined, MailOutlined, PhoneOutlined, SafetyCertificateOutlined, RobotOutlined } from '@ant-design/icons';
+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%)',
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6B8DD6 100%)',
-    padding: '24px'
+    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,
+    maxWidth: isFirstUser ? 480 : 420,
-    borderRadius: '16px',
+    borderRadius: '20px',
-    boxShadow: '0 20px 60px rgba(0,0,0,0.3)'
+    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={{ 
+          <div style={iconContainerStyle}>
-            fontSize: '48px', 
+            <RobotOutlined style={{ fontSize: '40px', color: '#fff' }} />
-            marginBottom: '16px',
-            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent'
-          }}>
-            <RobotOutlined />
           </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' }}
           />
         )}
 
@@ -175,8 +244,9 @@ const Login = () => {
                 ]}
               >
                 <Input
-                  prefix={<UserOutlined />} 
+                  prefix={<UserOutlined style={inputPrefixStyle} />}
                   placeholder="用户名"
+                  style={inputStyle}
                 />
               </Form.Item>
 
@@ -185,8 +255,9 @@ const Login = () => {
                 rules={[{ required: true, message: '请输入真实姓名' }]}
               >
                 <Input
-                  prefix={<SafetyCertificateOutlined />} 
+                  prefix={<SafetyCertificateOutlined style={inputPrefixStyle} />}
                   placeholder="真实姓名"
+                  style={inputStyle}
                 />
               </Form.Item>
 
@@ -198,8 +269,9 @@ const Login = () => {
                 ]}
               >
                 <Input
-                  prefix={<MailOutlined />} 
+                  prefix={<MailOutlined style={inputPrefixStyle} />}
                   placeholder="邮箱"
+                  style={inputStyle}
                 />
               </Form.Item>
 
@@ -207,8 +279,9 @@ const Login = () => {
                 name="phone"
               >
                 <Input
-                  prefix={<PhoneOutlined />} 
+                  prefix={<PhoneOutlined style={inputPrefixStyle} />}
                   placeholder="手机号（可选）"
+                  style={inputStyle}
                 />
               </Form.Item>
 
@@ -220,8 +293,9 @@ const Login = () => {
                 ]}
               >
                 <Input.Password
-                  prefix={<LockOutlined />} 
+                  prefix={<LockOutlined style={inputPrefixStyle} />}
                   placeholder="密码"
+                  style={inputStyle}
                 />
               </Form.Item>
 
@@ -241,8 +315,9 @@ const Login = () => {
                 ]}
               >
                 <Input.Password
-                  prefix={<LockOutlined />} 
+                  prefix={<LockOutlined style={inputPrefixStyle} />}
                   placeholder="确认密码"
+                  style={inputStyle}
                 />
               </Form.Item>
             </>
@@ -253,8 +328,9 @@ const Login = () => {
                 rules={[{ required: true, message: '请输入用户名' }]}
               >
                 <Input
-                  prefix={<UserOutlined />} 
+                  prefix={<UserOutlined style={inputPrefixStyle} />}
                   placeholder="用户名"
+                  style={inputStyle}
                 />
               </Form.Item>
 
@@ -263,14 +339,15 @@ const Login = () => {
                 rules={[{ required: true, message: '请输入密码' }]}
               >
                 <Input.Password
-                  prefix={<LockOutlined />} 
+                  prefix={<LockOutlined style={inputPrefixStyle} />}
                   placeholder="密码"
+                  style={inputStyle}
                 />
               </Form.Item>
             </>
           )}
 
-          <Form.Item style={{ marginBottom: '16px' }}>
+          <Form.Item style={{ marginBottom: '16px', marginTop: '24px' }}>
             <Button
               type="primary"
               htmlType="submit"
@@ -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"
                 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 ? '已有账户？去登录' : '注册新账户'}

frontend/src/pages/RackManagement.jsx

@@ -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>
+    <div style={{ padding: '8px' }}>
-      <Card title="机柜管理" extra={
+      <div style={pageHeaderStyle}>
-        <Space>
+        <h1 style={titleStyle}>机柜管理</h1>
-          <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
+        <Space size="middle">
-            添加机柜
+          <Button 
-          </Button>
+            icon={<UploadOutlined />} 
-          <Button icon={<UploadOutlined />} onClick={() => setImportModalVisible(true)}>
+            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 
-              <Button type="primary" htmlType="submit">
+                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>
+            <div style={{ 
-            <p style={{ color: '#999', fontSize: '12px', marginBottom: 20 }}>支持的编码格式：UTF-8</p>
+              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 }}>
+            <div style={{ marginBottom: '24px' }}>
-              <p style={{ fontWeight: 'bold', marginBottom: 8 }}>Excel文件格式要求：</p>
+              <p style={{ fontWeight: '600', marginBottom: '12px', color: '#262626' }}>
-              <ul style={{ paddingLeft: 20, marginBottom: 10 }}>
+                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 }}>
+            <div style={{ 
-              <Button icon={<DownloadOutlined />} onClick={handleDownloadTemplate} style={{ marginRight: 10 }}>
+              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>
+          <div style={{ textAlign: 'center', padding: '20px 0' }}>
-            <p>正在导入数据...</p>
+            <p style={{ marginBottom: '20px', fontWeight: '500' }}>
-            <Progress percent={importProgress} status="active" style={{ marginBottom: 20 }} />
+              {isImporting ? '正在导入数据...' : '导入完成'}
+            </p>
+            <Progress 
+              percent={importProgress} 
+              status={isImporting ? "active" : "success"}
+              style={{ marginBottom: '24px' }}
+              strokeColor={{
+                '0%': '#667eea',
+                '100%': '#764ba2'
+              }}
+            />
             {importResult && (
-              <div>
+              <div style={{ 
-                <p style={{ marginBottom: 10 }}>导入完成：</p>
+                textAlign: 'left', 
-                <p>总记录数：{importResult.total || 0}</p>
+                background: '#f6f6f6', 
-                <p>成功：{importResult.imported || 0}</p>
+                padding: '20px', 
-                <p>重复：{importResult.duplicates || 0}</p>
+                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>
+                  <div style={{ marginTop: '16px' }}>
-                    <p style={{ marginTop: 20, fontWeight: 'bold' }}>导入失败记录：</p>
+                    <p style={{ fontWeight: '600', color: '#ff4d4f', marginBottom: '8px' }}>
-                    <ul style={{ maxHeight: '300px', overflowY: 'auto', textAlign: 'left' }}>
+                      导入失败记录：
+                    </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,6 +658,8 @@ function RackManagement() {
                     </ul>
                   </div>
                 )}
+              </div>
+            )}
             <Button
               type="primary"
               onClick={() => {
@@ -474,14 +669,12 @@ function RackManagement() {
                 setIsImporting(false);
                 fetchRacks();
               }}
-                  style={{ marginTop: 20 }}
+              style={primaryButtonStyle}
             >
               确定
             </Button>
           </div>
         )}
-          </div>
-        )}
       </Modal>
 
     </div>

frontend/src/pages/RackVisualization.jsx

@@ -61,8 +61,10 @@ const getDeviceColor = (deviceType) => {
 const getDeviceStatusColor = (status) => {
   const statusColorMap = {
     'normal': '#10b981',
+    'running': '#10b981',
     'warning': '#f59e0b',
     'error': '#ef4444',
+    'fault': '#ef4444',
     'offline': '#6b7280',
     'maintenance': '#3b82f6',
     undefined: '#3b82f6',
@@ -71,6 +73,85 @@ const getDeviceStatusColor = (status) => {
   return statusColorMap[status] || '#3b82f6';
 };
 
+const getStatusTheme = (status) => {
+  const themeMap = {
+    'normal': {
+      bgGradient: 'linear-gradient(180deg, #059669 0%, #047857 50%, #065f46 100%)',
+      borderColor: '#10b981',
+      topBorderColor: '#34d399',
+      glowColor: 'rgba(16, 185, 129, 0.4)',
+      shadowColor: 'rgba(16, 185, 129, 0.3)',
+      iconColor: '#10b981',
+      label: '正常'
+    },
+    'running': {
+      bgGradient: 'linear-gradient(180deg, #059669 0%, #047857 50%, #065f46 100%)',
+      borderColor: '#10b981',
+      topBorderColor: '#34d399',
+      glowColor: 'rgba(16, 185, 129, 0.4)',
+      shadowColor: 'rgba(16, 185, 129, 0.3)',
+      iconColor: '#10b981',
+      label: '运行中'
+    },
+    'warning': {
+      bgGradient: 'linear-gradient(180deg, #d97706 0%, #b45309 50%, #92400e 100%)',
+      borderColor: '#f59e0b',
+      topBorderColor: '#fbbf24',
+      glowColor: 'rgba(245, 158, 11, 0.4)',
+      shadowColor: 'rgba(245, 158, 11, 0.3)',
+      iconColor: '#f59e0b',
+      label: '警告'
+    },
+    'error': {
+      bgGradient: 'linear-gradient(180deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%)',
+      borderColor: '#ef4444',
+      topBorderColor: '#f87171',
+      glowColor: 'rgba(239, 68, 68, 0.5)',
+      shadowColor: 'rgba(239, 68, 68, 0.4)',
+      iconColor: '#ef4444',
+      label: '故障'
+    },
+    'fault': {
+      bgGradient: 'linear-gradient(180deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%)',
+      borderColor: '#ef4444',
+      topBorderColor: '#f87171',
+      glowColor: 'rgba(239, 68, 68, 0.5)',
+      shadowColor: 'rgba(239, 68, 68, 0.4)',
+      iconColor: '#ef4444',
+      label: '故障'
+    },
+    'offline': {
+      bgGradient: 'linear-gradient(180deg, #4b5563 0%, #374151 50%, #1f2937 100%)',
+      borderColor: '#6b7280',
+      topBorderColor: '#9ca3af',
+      glowColor: 'rgba(107, 114, 128, 0.2)',
+      shadowColor: 'rgba(0, 0, 0, 0.2)',
+      iconColor: '#9ca3af',
+      label: '离线'
+    },
+    'maintenance': {
+      bgGradient: 'linear-gradient(180deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%)',
+      borderColor: '#3b82f6',
+      topBorderColor: '#60a5fa',
+      glowColor: 'rgba(59, 130, 246, 0.4)',
+      shadowColor: 'rgba(59, 130, 246, 0.3)',
+      iconColor: '#3b82f6',
+      label: '维护中'
+    },
+    'default': {
+      bgGradient: 'linear-gradient(180deg, #3d4451 0%, #2d3139 50%, #252930 100%)',
+      borderColor: '#4a5568',
+      topBorderColor: '#565c6b',
+      glowColor: 'rgba(56, 189, 248, 0.2)',
+      shadowColor: 'rgba(0, 0, 0, 0.3)',
+      iconColor: '#38bdf8',
+      label: '未知'
+    }
+  };
+  
+  return themeMap[status] || themeMap['default'];
+};
+
 const getDeviceTypeTheme = (type) => {
   const themeMap = {
     'server': {
@@ -317,6 +398,56 @@ class ErrorBoundary extends React.Component {
 }
 
 function RackVisualization() {
+  const pageHeaderStyle = {
+    marginBottom: '24px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: '16px'
+  };
+  
+  const titleStyle = {
+    fontSize: '24px',
+    fontWeight: '700',
+    margin: 0,
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    backgroundClip: 'text'
+  };
+  
+  const primaryButtonStyle = {
+    height: '40px',
+    borderRadius: '8px',
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    border: 'none',
+    boxShadow: '0 4px 12px rgba(102, 126, 234, 0.35)',
+    fontWeight: '500',
+    transition: 'all 0.3s ease'
+  };
+  
+  const secondaryButtonStyle = {
+    height: '40px',
+    borderRadius: '8px',
+    border: '1px solid #e8e8e8',
+    transition: 'all 0.3s ease'
+  };
+  
+  const cardStyle = {
+    borderRadius: '16px',
+    border: 'none',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
+    overflow: 'hidden'
+  };
+  
+  const searchCardStyle = {
+    borderRadius: '12px',
+    border: 'none',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
+    marginBottom: '20px'
+  };
+  
   const [racks, setRacks] = useState([]);
   const [selectedRack, setSelectedRack] = useState(null);
   const [selectedRoom, setSelectedRoom] = useState(null);
@@ -1035,17 +1166,19 @@ function RackVisualization() {
   // 无需额外的初始化，CSS 3D变换直接在JSX中实现
 
   return (
-    <div>
+    <div style={{ padding: '24px' }}>
-      <Card 
+      <div style={pageHeaderStyle}>
-        title="机柜可视化"
+        <h1 style={titleStyle}>
-        extra={
+          <CloudServerOutlined style={{ marginRight: '12px' }} />
-          <Space>
+          机柜可视化
+        </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 }}
+            style={{ width: 220, height: '40px', borderRadius: '8px' }}
             allowClear
             prefix={<SearchOutlined />}
             suffix={
@@ -1056,6 +1189,7 @@ function RackVisualization() {
           />
           {searchKeyword && (
             <Button
+              style={secondaryButtonStyle}
               icon={<ClearOutlined />}
               onClick={clearSearch}
               title="清除搜索"
@@ -1063,7 +1197,7 @@ function RackVisualization() {
           )}
           <Select
             placeholder="选择机房"
-              style={{ width: 180 }}
+            style={{ width: 180, height: '40px' }}
             value={selectedRoom}
             onChange={handleRoomChange}
             loading={loading}
@@ -1078,7 +1212,7 @@ function RackVisualization() {
           </Select>
           <Select
             placeholder="选择机柜"
-              style={{ width: 200 }}
+            style={{ width: 200, height: '40px' }}
             value={selectedRack?.rackId}
             onChange={handleRackChange}
             loading={loading || loadingDevices}
@@ -1092,6 +1226,7 @@ function RackVisualization() {
             ))}
           </Select>
           <Button 
+            style={secondaryButtonStyle}
             icon={<ReloadOutlined />} 
             onClick={handleReload}
             loading={loading}
@@ -1100,6 +1235,7 @@ function RackVisualization() {
             刷新
           </Button>
           <Button 
+            style={showTooltipConfig ? primaryButtonStyle : secondaryButtonStyle}
             icon={<SettingOutlined />} 
             onClick={handleOpenTooltipConfig}
             type={showTooltipConfig ? 'primary' : 'default'}
@@ -1107,24 +1243,21 @@ function RackVisualization() {
             字段配置
           </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,
+                        borderColor: highlightedDevice === result.deviceId ? '#667eea' : undefined,
-                        background: highlightedDevice === result.deviceId ? '#1890ff' : 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,15 +1319,18 @@ function RackVisualization() {
               </Space>
             )}
           </div>
+        </Card>
       )}
+      
+      <Card style={cardStyle} bodyStyle={{ padding: '16px 20px' }}>
         <div style={{ marginBottom: 16 }}>
-          <Space wrap>
+          <Space wrap size={12}>
-            <Button icon={<ZoomInOutlined />} onClick={handleZoomIn}>放大</Button>
+            <Button style={secondaryButtonStyle} icon={<ZoomInOutlined />} onClick={handleZoomIn}>放大</Button>
-            <Button icon={<ZoomOutOutlined />} onClick={handleZoomOut}>缩小</Button>
+            <Button style={secondaryButtonStyle} icon={<ZoomOutOutlined />} onClick={handleZoomOut}>缩小</Button>
-            <Button icon={<RotateRightOutlined />} onClick={handleResetView}>重置视角</Button>
+            <Button style={secondaryButtonStyle} icon={<RotateRightOutlined />} onClick={handleResetView}>重置视角</Button>
             <Select
               placeholder="选择背景类型"
-                  style={{ width: 150 }}
+              style={{ width: 150, height: '40px' }}
               value={backgroundType}
               onChange={async (type) => {
                 setBackgroundType(type);
@@ -1204,11 +1341,11 @@ function RackVisualization() {
               <Option value="image">自定义图片</Option>
             </Select>
             {backgroundType === 'image' && (
-                  <Space>
+              <Space size={8}>
                 <input
                   type="text"
                   placeholder="输入图片URL"
-                      style={{ width: 200, padding: '4px 8px', borderRadius: '4px', border: '1px solid #d9d9d9' }}
+                  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);
@@ -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 0 20px ${statusTheme.glowColor},
-                                    0 4px 12px rgba(56, 189, 248, 0.4),
+                                    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%)'
+                                ? statusTheme.bgGradient
-                                : 'linear-gradient(180deg, #3d4451 0%, #2d3139 50%, #252930 100%)',
+                                : statusTheme.bgGradient,
                               border: isHighlighted 
-                                ? '2px solid #38bdf8' 
+                                ? `2px solid ${statusTheme.topBorderColor}` 
-                                : '1px solid #4a5568',
+                                : `1px solid ${statusTheme.borderColor}`,
                               borderTop: isHighlighted
-                                ? '2px solid #7dd3fc'
+                                ? `2px solid ${statusTheme.topBorderColor}`
-                                : '1px solid #565c6b',
+                                : `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%)',
+                              background: `linear-gradient(90deg, ${statusTheme.topBorderColor} 0%, ${statusTheme.borderColor} 50%, ${statusTheme.topBorderColor} 100%)`,
-                              opacity: 0.6
+                              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'
                                   }}>

frontend/src/pages/RoomManagement.jsx

@@ -176,30 +176,144 @@ function RoomManagement() {
     },
   ];
 
+  const pageHeaderStyle = {
+    marginBottom: '24px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: '16px'
+  };
+
+  const titleStyle = {
+    fontSize: '24px',
+    fontWeight: '700',
+    margin: 0,
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    backgroundClip: 'text'
+  };
+
+  const cardStyle = {
+    borderRadius: '16px',
+    border: 'none',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
+    overflow: 'hidden'
+  };
+
+  const cardHeadStyle = {
+    borderBottom: '1px solid #f0f0f0',
+    padding: '16px 24px',
+    background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)'
+  };
+
+  const tableStyle = {
+    borderRadius: '12px',
+    overflow: 'hidden'
+  };
+
+  const statusTagStyle = (color) => ({
+    padding: '4px 12px',
+    borderRadius: '20px',
+    fontSize: '12px',
+    fontWeight: '500',
+    border: 'none',
+    background: color === 'green' ? '#f6ffed' : color === 'orange' ? '#fff7e6' : '#f5f5f5',
+    color: color === 'green' ? '#52c41a' : color === 'orange' ? '#faad14' : '#8c8c8c'
+  });
+
+  const primaryButtonStyle = {
+    height: '40px',
+    borderRadius: '8px',
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    border: 'none',
+    boxShadow: '0 4px 12px rgba(102, 126, 234, 0.35)',
+    fontWeight: '500',
+    transition: 'all 0.3s ease'
+  };
+
+  const actionButtonStyle = {
+    height: '32px',
+    borderRadius: '6px',
+    border: '1px solid #e8e8e8',
+    transition: 'all 0.3s ease'
+  };
+
   return (
-    <div>
+    <div style={{ padding: '8px' }}>
-      <Card title="机房管理" extra={
+      <div style={pageHeaderStyle}>
-        <Space>
+        <h1 style={titleStyle}>机房管理</h1>
-          <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
+        <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 
-              <Button type="primary" htmlType="submit">
+                onClick={handleCancel}
+                style={{ borderRadius: '8px', height: '40px' }}
+              >
+                取消
+              </Button>
+              <Button 
+                type="primary" 
+                htmlType="submit"
+                style={{
+                  ...primaryButtonStyle,
+                  width: 'auto',
+                  paddingLeft: '24px',
+                  paddingRight: '24px'
+                }}
+              >
                 确定
               </Button>
             </Space>

frontend/src/pages/UserManagement.jsx

@@ -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',
+    fontSize: '24px',
-    fontWeight: '600',
+    fontWeight: '700',
-    margin: 0
+    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>
+        <Space size="middle">
-          <Button icon={<ReloadOutlined />} onClick={fetchUsers}>刷新</Button>
+          <Button 
-          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
+            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 
-              <Button type="primary" htmlType="submit" loading={loading}>
+                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 
-              <Button type="primary" htmlType="submit" loading={loading}>
+                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={avatarModalStyle}>
-          <div style={{ marginBottom: '24px' }}>
+          <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>