.mainLayout {
  min-height: 100vh;
  background: #0d1117;

  &-header {
    background: #26303a;
    padding: 0 24px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    line-height: 48px;
    border-bottom: 1px solid #30363d;

    &-left {
      display: flex;
      align-items: center;
      height: 100%;
      flex: 1;
    }

    &-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    &-logo-image {
      height: 32px;
      margin-right: 16px;
      object-fit: contain;
    }

    &-title {
      font-size: 16px;
      font-weight: 500;
      margin-right: 56px;
      color: #fff;
    }

    &-menu {
      flex: 1;
      margin-left: 16px;
      background: #26303a;
      line-height: 36px !important;

      :global {
        .ant-menu-item {
          color: rgba(255, 255, 255, 1);
          border-radius: 8px !important;
          margin-right: 8px !important;
          &::after {
            content: unset !important;
          }
          &:hover {
            color: #fff;
            background-color: rgb(31, 178, 89);
          }
        }
        .ant-menu-item.ant-menu-item-active {
          color: #fff !important;
          &::after {
            border: 0 !important;
          }
        }
        .ant-menu-item.ant-menu-item-selected {
          color: #fff;
          background-color: rgb(31, 178, 89);
        }
      }

      // .ant-menu {
      //   background: #26303a;
      //   border-bottom: none;

      //   .ant-menu-item {
      //     height: 48px;
      //     line-height: 48px;
      //     background: transparent;
      //     color: rgba(255, 255, 255, 0.65);

      //     &:hover {
      //       color: #55a722;
      //       background: rgba(85, 167, 34, 0.1);
      //     }

      //     &-ant-menu-item-selected {
      //       color: #55a722;
      //       background: rgba(85, 167, 34, 0.15);

      //       &::before {
      //         background: #55a722;
      //       }
      //     }
      //   }
      // }
    }

    &-date {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.65);
      background-color: rgba(255, 255, 255, 0.08);
      padding: 0 16px;
      border-radius: 10px;
      height: 32px;
      display: flex;
      align-items: center;
    }

    &-info-icon {
      color: rgba(255, 255, 255, 0.65);
      font-size: 16px;
      cursor: pointer;
      margin: 0 8px;

      &:hover {
        color: #55a722;
      }
    }

    &-user {
      display: flex;
      align-items: center;
      color: rgba(255, 255, 255, 0.85);

      .anticon {
        margin-right: 4px;
      }

      span {
        font-size: 14px;
      }
    }

    // 右侧区域背景色
    &-right {
      padding: 0 16px;
      border-radius: 8px;
    }
  }

  &-body {
    margin-top: 48px;
    min-height: calc(100vh - 48px);
    position: relative;
    transition: margin-left 0.2s;

    > .ant-layout-content {
      margin-left: 0 !important;
      padding: 24px;
      min-height: calc(100vh - 48px);
      background: #0d1117;
      border-radius: 8px;
      transition: margin-left 0.2s;
    }
  }

  &-sider {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    background: #161b22;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
    transition: width 0.2s;
    z-index: 999;

    .ant-layout-sider-trigger {
      top: 0;
      height: 48px;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.2);

      &:hover {
        background: rgba(85, 167, 34, 0.2);
        color: #55a722;
      }
    }

    .ant-menu {
      border-right: none;
      background: #161b22;

      .ant-menu-item {
        margin: 0;
        height: 64px;
        line-height: 64px;
        color: rgba(230, 237, 243, 0.65);

        &:hover {
          color: #55a722;
          background: rgba(85, 167, 34, 0.08);
        }

        &-ant-menu-item-selected {
          color: #55a722;
          background: rgba(85, 167, 34, 0.12);

          &::before {
            background: #55a722;
          }
        }

        .anticon {
          font-size: 18px;
        }
      }
    }
  }

  &-content {
    padding: 24px;
    background: #0d1117;
    border-radius: 8px;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(85, 167, 34, 0.3);
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.15);
      border-radius: 3px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .mainLayout {
    &-header {
      padding: 0 16px;

      &-left {
        flex-wrap: wrap;
      }

      &-right {
        padding-right: 8px;
      }

      &-logo-image {
        height: 24px;
        margin-right: 8px;
      }

      &-title {
        font-size: 14px;
        margin-right: 24px;
      }

      &-menu {
        flex: none;
        width: 100%;
        margin: 8px 0 0 0;

        .ant-menu {
          .ant-menu-item {
            font-size: 14px;
          }
        }
      }

      &-date {
        font-size: 10px;
        padding: 0 8px;
      }

      &-info-icon {
        margin: 0 4px;
      }

      &-user {
        span {
          display: none;
        }
      }
    }

    &-body {
      margin-top: 48px;

      > .ant-layout-content {
        padding: 16px;
      }
    }

    &-sider {
      top: 48px;
      width: 80px !important;
      max-width: 80px !important;
      min-width: 80px !important;

      .ant-menu-inline {
        width: 80px;
      }

      .ant-menu-title-content {
        display: none;
      }

      .anticon {
        font-size: 20px;
        margin: 0 auto;
      }
    }

    &-content {
      margin-left: 0;
    }
  }
}
