DinQuant/quantdinger_vue/src/layouts/BasicLayout.less

@import '~ant-design-vue/es/style/themes/default.less';

/* ========== 完全隐藏 ant-layout-footer ========== */
:global {
  /* 全局隐藏所有 ant-layout-footer */
  .ant-layout-footer,
  footer.ant-layout-footer,
  .ant-pro-layout .ant-layout-footer,
  .ant-layout .ant-layout-footer {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    min-height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
}

/* ========== ant-layout-header 主题适配 ========== */
/* 全局样式：根据 body 或 layout 的主题类自动适配 */
:global {
  /* 暗黑主题下的 ant-layout-header */
  body.dark .ant-layout-header,
  body.realdark .ant-layout-header,
  .ant-layout.dark .ant-layout-header,
  .ant-layout.realdark .ant-layout-header,
  .ant-pro-layout.dark .ant-layout-header,
  .ant-pro-layout.realdark .ant-layout-header {
    background: #001529 !important;
    border-bottom: 1px solid #1f1f1f !important;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;

    /* Header 内的所有文字和图标 */
    * {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Header 内的图标按钮 */
    .anticon {
      color: rgba(255, 255, 255, 0.85) !important;

      &:hover {
        color: #1890ff !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 4px;
      }
    }

    /* Header 内的链接 */
    a {
      color: rgba(255, 255, 255, 0.85) !important;

      &:hover {
        color: #1890ff !important;
      }
    }

    /* Header 内的工具提示容器 */
    .ant-tooltip-open {
      .anticon {
        color: rgba(255, 255, 255, 0.85) !important;
      }
    }
  }


  /* 浅色主题下的 ant-layout-header（确保覆盖默认样式） */
  body.light .ant-layout-header,
  .ant-layout.light .ant-layout-header,
  .ant-pro-layout.light .ant-layout-header {
    background: #fff !important;
    border-bottom: 1px solid #e8e8e8 !important;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) !important;
    color: rgba(0, 0, 0, 0.85) !important;
  }

  /* ========== ant-layout-content 主题适配（中间页面内容区域） ========== */
  /* 暗黑主题下的内容区域 */
  body.dark .ant-layout-content,
  body.realdark .ant-layout-content,
  .ant-layout.dark .ant-layout-content,
  .ant-layout.realdark .ant-layout-content,
  .ant-pro-layout.dark .ant-layout-content,
  .ant-pro-layout.realdark .ant-layout-content {
    background: #141414 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }



  /* 浅色主题下的内容区域 */
  body.light .ant-layout-content,
  .ant-layout.light .ant-layout-content,
  .ant-pro-layout.light .ant-layout-content {
    background: #f0f2f5 !important;
    color: rgba(0, 0, 0, 0.85) !important;
  }





  /* ========== GlobalHeader 核心样式（基于 .ant-pro-global-header） ========== */
  /* 暗黑主题下的 .ant-pro-global-header - 这是控制顶部标题栏的关键样式 */
  body.dark .ant-pro-global-header,
  body.realdark .ant-pro-global-header,
  .ant-layout.dark .ant-pro-global-header,
  .ant-layout.realdark .ant-pro-global-header,
  .ant-pro-layout.dark .ant-pro-global-header,
  .ant-pro-layout.realdark .ant-pro-global-header,
  body.dark .ant-layout-header .ant-pro-global-header,
  body.realdark .ant-layout-header .ant-pro-global-header,
  .ant-pro-layout.dark .ant-layout-header .ant-pro-global-header,
  .ant-pro-layout.realdark .ant-layout-header .ant-pro-global-header {
    /* 核心：背景色和边框 */
    background: #001529 !important;
    border-bottom: 1px solid #1f1f1f !important;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;

    /* 强制所有子元素文字颜色 */
    * {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Logo 区域 */
    .ant-pro-global-header-logo {
      background: transparent !important;
      color: rgba(255, 255, 255, 0.85) !important;

      h1 {
        color: rgba(255, 255, 255, 0.85) !important;
      }

      img {
        opacity: 0.9;
      }

      * {
        color: rgba(255, 255, 255, 0.85) !important;
      }
    }
  }

  /* Header 内容区域（中间部分，包含刷新按钮等） */
  .ant-pro-global-header-content {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;

    * {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    /* 刷新按钮等图标 */
    .anticon {
      color: rgba(255, 255, 255, 0.85) !important;

      &:hover {
        color: #1890ff !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 4px;
      }
    }

    /* 工具提示内的图标 */
    .ant-tooltip-open .anticon {
      color: rgba(255, 255, 255, 0.85) !important;
    }
  }

  /* Header 右侧内容区域（包含头像、语言选择、设置按钮） */
  .ant-pro-global-header-index-right {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;

    * {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    /* 操作按钮（头像、语言、设置） */
    .ant-pro-global-header-index-action {
      color: rgba(255, 255, 255, 0.85) !important;

      &:hover {
        color: #1890ff !important;
        background: rgba(255, 255, 255, 0.08) !important;
      }

      .anticon {
        color: rgba(255, 255, 255, 0.85) !important;
      }
    }

    /* 头像区域 */
    .ant-pro-account-avatar {
      color: rgba(255, 255, 255, 0.85) !important;

      span {
        color: rgba(255, 255, 255, 0.85) !important;
      }

      .antd-pro-global-header-index-avatar {
        background: rgba(255, 255, 255, 0.25) !important;
      }
    }

    /* 下拉菜单触发器 */
    .ant-pro-drop-down,
    .ant-dropdown-trigger {
      color: rgba(255, 255, 255, 0.85) !important;

      &:hover {
        color: #1890ff !important;
        background: rgba(255, 255, 255, 0.08) !important;
      }

      .anticon {
        color: rgba(255, 255, 255, 0.85) !important;
      }
    }
  }

  /* 链接样式 */
  a {
    color: rgba(255, 255, 255, 0.85) !important;

    &:hover {
      color: #1890ff !important;
    }
  }

  /* 所有图标 */
  .anticon {
    color: rgba(255, 255, 255, 0.85) !important;

    &:hover {
      color: #1890ff !important;
    }
  }

  /* 浅色主题下的 .ant-pro-global-header */
  body.light .ant-pro-global-header,
  .ant-layout.light .ant-pro-global-header,
  .ant-pro-layout.light .ant-pro-global-header,
  body.light .ant-layout-header .ant-pro-global-header,
  .ant-pro-layout.light .ant-layout-header .ant-pro-global-header {
    background: #fff !important;
    border-bottom: 1px solid #e8e8e8 !important;
    color: rgba(0, 0, 0, 0.85) !important;
  }
}

/* ========== 全局布局主题适配 - 强化覆盖 ========== */
:global(.ant-pro-layout) {
  /* 暗黑主题下的完整布局 */
  &.dark,
  &.realdark {
    /* 0. 基础 Layout 背景 - 确保整体背景变暗 */
    :global(.ant-layout) {
      background-color: #001529 !important;
    }

    /* 1. 顶部 Header */
    :global(.ant-layout-header) {
      background: #001529 !important;
      border-bottom: 1px solid #1f1f1f !important;
      color: rgba(255, 255, 255, 0.85) !important;

      :global(.ant-pro-global-header) {
        background: #001529 !important;
        border-bottom: none !important;
        color: rgba(255, 255, 255, 0.85) !important;

        * {
          color: rgba(255, 255, 255, 0.85) !important;
        }
      }
    }

    /* 2. 中间内容区域 */
    :global(.ant-layout-content) {
      background: #141414 !important;
      color: rgba(255, 255, 255, 0.85) !important;
    }

    :global(.ant-pro-basicLayout-content) {
      background: #141414 !important;
      color: rgba(255, 255, 255, 0.85) !important;
    }

  }

  /* 浅色主题下的完整布局 */
  &.light {
    /* 0. 基础 Layout 背景 */
    :global(.ant-layout) {
      background-color: #f0f2f5 !important;
    }

    /* 1. 顶部 Header */
    :global(.ant-layout-header) {
      background: #fff !important;
      border-bottom: 1px solid #e8e8e8 !important;
      color: rgba(0, 0, 0, 0.85) !important;
    }

    /* 2. 中间内容区域 */
    :global(.ant-layout-content) {
      background: #f0f2f5 !important;
      color: rgba(0, 0, 0, 0.85) !important;
    }

    :global(.ant-pro-basicLayout-content) {
      background: #f0f2f5 !important;
      color: rgba(0, 0, 0, 0.85) !important;
    }

  }
}

.ant-pro-global-header-index-right {
  margin-right: 8px;

  &.ant-pro-global-header-index-dark {
    .ant-pro-global-header-index-action {
      color: hsl(0deg 0% 100% / 85%);

      &:hover {
        background: #1890ff;
      }
    }

    /* 暗黑主题下的头像下拉菜单 */
    .ant-pro-account-avatar {
      color: rgba(255, 255, 255, 0.85);

      .antd-pro-global-header-index-avatar {
        background: rgba(255, 255, 255, 0.25) !important;
      }

      span {
        color: rgba(255, 255, 255, 0.85);
      }
    }

    /* 语言选择器和设置按钮 */
    .ant-pro-drop-down {
      color: rgba(255, 255, 255, 0.85);

      &:hover {
        color: #1890ff;
        background: rgba(255, 255, 255, 0.08);
      }
    }
  }

  /* 浅色主题下的头像样式 */
  .ant-pro-account-avatar {
    .antd-pro-global-header-index-avatar {
      margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
      margin-right: 8px;
      color: @primary-color;
      vertical-align: top;
      background: rgb(255 255 255 / 85%);
    }
  }

  .menu {
    .anticon {
      margin-right: 8px;
    }

    .ant-dropdown-menu-item {
      min-width: 100px;
    }
  }
}

/* 暗黑主题下的下拉菜单样式 */
:global {
  .ant-pro-layout.dark,
  .ant-pro-layout.realdark {
    .ant-dropdown-menu {
      background: #1f1f1f !important;
      border: 1px solid #303030 !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;

      .ant-dropdown-menu-item {
        color: rgba(255, 255, 255, 0.85) !important;

        &:hover {
          background: #262626 !important;
          color: #1890ff !important;
        }
      }

      .ant-dropdown-menu-item-divider {
        background: #303030 !important;
      }
    }
  }
}

/* 手机端适配 */
@media (max-width: 768px) {
  :global {
    /* 使用更具体的选择器强制覆盖 */
    .ant-layout-header .ant-pro-global-header .ant-pro-global-header-logo,
    .ant-pro-layout .ant-layout-header .ant-pro-global-header .ant-pro-global-header-logo,
    body .ant-layout-header .ant-pro-global-header .ant-pro-global-header-logo,
    .ant-pro-global-header-logo {
      padding: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
  }
}