src/assets/css/homeView.css
/* 主页容器样式 */
.home-container {
  @apply w-full h-full flex relative overflow-auto;
  /* 使用DaisyUI的主题色变量创建渐变背景 */
  background-image: linear-gradient(
    135deg,
    hsl(var(--p) / 0.2) 0%,
    hsl(var(--p) / 0.5) 100%
  );
  color: hsl(var(--bc));
}

/* 深色模式下的主页背景渐变 - DaisyUI会自动处理主题色 */
[data-theme="dark"] .home-container,
[data-theme="night"] .home-container,
[data-theme="black"] .home-container {
  background-image: linear-gradient(
    135deg,
    hsl(var(--n) / 0.8) 0%,
    hsl(var(--n) / 0.6) 100%
  );
}

/* 侧边导航栏样式 */
.side-nav {
  @apply w-16 h-screen flex flex-col items-center py-5 overflow-hidden z-[110] flex-shrink-0 fixed left-0 top-0;
  background: var(--sidebar-bg, rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}

.side-nav.expanded {
  @apply w-52 items-start px-5;
}

.home-content {
  @apply flex-1 p-5 w-full h-full overflow-y-auto;
  margin-left: calc(var(--sidebar-indicator-width, 3px) + 15px);
  transition: margin-left 0.3s ease;
}

/* 顶部标题和控件区域 */
.header {
  @apply flex justify-between items-center mb-5 w-full relative;
}

.title-section .main-title {
  @apply text-2xl lg:text-3xl font-bold;
}

.header-right {
  @apply flex items-center gap-5;
}

.setting-icon {
  @apply text-2xl cursor-pointer;
}

/* 统计卡片样式 */
.stats-cards {
  @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8;
}

.stat-card {
  @apply bg-base-100 rounded-lg p-4 shadow-md border border-base-300 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
}

.stat-title {
  @apply text-base-content/70 text-sm mb-2.5;
}

.stat-value {
  @apply text-base-content text-2xl font-bold;
}

/* 性能图表容器样式 */
.performance-section {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-5 mt-5;
}

.chart-container {
  @apply bg-base-100 rounded-xl shadow-md mb-5 p-4 transition-all duration-300 border border-base-300;
}

.chart-header {
  @apply flex flex-col mb-4 pb-2.5 border-b border-base-300;
}

.chart-header h3 {
  @apply m-0 mb-2.5 text-base font-medium text-base-content;
}

/* 系统信息展示框样式 */
.system-info-box {
  @apply flex flex-wrap gap-2.5 bg-base-200/50 border border-base-300 rounded-md p-2 w-full box-border;
}

.info-item {
  @apply p-[3px_8px] text-sm text-base-content/70 overflow-hidden min-w-[150px] flex-1 relative table w-full;
}

/* 移除之前的::before伪元素，使用表格布局实现两端对齐 */
.info-item-label {
  @apply font-medium whitespace-nowrap text-right;
}

.info-item-value {
  @apply whitespace-nowrap overflow-hidden text-ellipsis text-left;
}

.chart {
  @apply h-[250px] rounded-lg overflow-hidden transition-all duration-300;
}

/* 侧边栏指示器样式 */
:root {
  --sidebar-indicator-width: 3px;
}

.home-container {
  @apply relative;
}

.home-container:before {
  content: "";
  @apply absolute left-0 top-1/2 -translate-y-1/2 rounded-r-md z-[5] transition-all duration-300 opacity-0 -ml-px;
  width: var(--sidebar-indicator-width);
  height: 30vh;
  background-color: rgba(255, 255, 255, 0.7);
}

.sidebar-collapsed .home-container:before {
  @apply opacity-100;
}

/* 深色模式下的指示器 */
[data-theme="dark"] .home-container:before,
[data-theme="night"] .home-container:before,
[data-theme="black"] .home-container:before {
  background-color: rgba(255, 255, 255, 0.4);
}

/* 确保在侧边栏展开时隐藏指示器 */
:not(.sidebar-collapsed) .home-container:before {
  @apply opacity-0;
}

/* 添加Iconify图标支持 */
.iconify {
  @apply inline-flex align-middle;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .performance-section {
    @apply grid-cols-1;
  }

  .chart {
    @apply h-[200px];
  }

  .system-info-box {
    @apply flex-col gap-1.5;
  }

  .info-item {
    @apply w-full;
  }

  .info-item-label,
  .info-item-value {
    @apply block w-full text-left;
  }

  .info-item-label {
    @apply mb-0.5;
  }
}
