页面调整优化

hongjli

2025-06-16 90b3b6329fec3205b845198ca6dc539dcde186c8

 src/app/globals.css

@@ -13,6 +13,11 @@
  /* 基础颜色设置 */
  --background: var(--ai-surface);
  --foreground: #1E2B63;
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 10, 16, 51;
  --background-end-rgb: 0, 0, 0;
  --scrollbar-track: rgba(30, 43, 99, 0.1);
  --scrollbar-thumb: rgba(106, 219, 255, 0.3);
}

@theme inline {
@@ -26,13 +31,73 @@
  :root {
    --background: var(--ai-dark);
    --foreground: #E9EFFD;
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  background: linear-gradient(to bottom, 
    rgb(var(--background-start-rgb)), 
    rgb(var(--background-end-rgb)));
  color: rgb(var(--foreground-rgb));
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  min-height: 100vh;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

/* 滚动性能优化 */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  scroll-behavior: smooth;
}

/* 启用硬件加速 */
.will-change-transform,
.motion-safe\:will-change-transform,
.motion-safe\:hover\:will-change-transform:hover,
canvas {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 优化滚动条 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(106, 219, 255, 0.5);
}

/* 滚动优化类 */
.smooth-scroll {
  overflow-y: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 防止过度重排和重绘 */
.motion-reduce {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}

/* 导航栏特效样式 */
@@ -743,3 +808,90 @@
.animate-shine {
  animation: shine 1.5s ease-in-out;
}

@keyframes error-scan {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(50%);
  }
}

.animate-error-scan {
  animation: error-scan 2s linear infinite;
}

/* 页面过渡效果 */
.page-transitioning {
  animation: fadeOut 0.2s ease-out forwards;
  pointer-events: none;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 防止链接点击时的闪烁 */
.no-flash-link {
  -webkit-tap-highlight-color: transparent;
}

/* 消息生成时锁定滚动 */
body.generating-message {
  overflow: hidden !important;
}

/* 滚动锁定遮罩 */
.scroll-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: transparent;
  pointer-events: all;
  touch-action: none;
}

/* 图表全屏模式时的样式 */
body:has(.echart-wrapper[data-echarts-container]) {
  scroll-behavior: smooth;
}

.echart-wrapper[data-echarts-container] {
  transition: all 0.3s ease-in-out;
}

/* 当处于全屏模式时防止页面滚动 */
body:has(.echart-wrapper:has(+ .fullscreen-controls)) {
  overflow: hidden;
}

/* 彻底固定图表容器的高度 */
[data-echarts-container="true"] {
  height: 400px !important;
  min-height: 400px !important;
  width: 100%;
  position: relative;
}

/* 确保tooltip显示在适当位置 */
.echarts-tooltip-wrap, 
div[class*="echarts-tooltip"],
div[class*="tooltip"] {
  z-index: 9999 !important;
  top: auto !important; /* 防止固定在顶部 */
  transform: translateY(0) !important; /* 防止向上偏移 */
  max-width: 80vw !important; /* 限制最大宽度 */
  pointer-events: auto !important;
}

/* 确保热力图tooltip在高风险区域显示时不会被导航栏遮挡 */
body .ec-tooltip, 
body .echarts-tooltip {
  margin-top: 60px !important; /* 确保不会显示在导航栏之上 */
}