front-end/src/components/ToolBar/index.module.less
@tooBarHeight: 40px;
@backgroundColor: #f6f7f8;

.tooBar {
  height: @tooBarHeight;
  background-color: @backgroundColor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // gap: 8px;
  padding: 0 16px;

  .left, .right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .operation {
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    &:hover {
      background-color: #e6e8eb; // 设置悬停时的背景颜色
    }
  }

  .colorPickerWrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    
    :global(.ant-color-picker-trigger) {
      width: 20px !important;
      height: 20px !important;
      border-radius: 3px !important;
      border: 1px solid #d9d9d9 !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.2s ease !important;
      
      &:hover {
        border-color: #4096ff !important;
        box-shadow: 0 2px 4px rgba(64, 150, 255, 0.2) !important;
      }
    }
  }

  .line {
    width: 1px;
    height: 25px;
    background-color: #dfe3e8;
  }
}


.themeList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 8px;
}

.operationItem {
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  &:hover {
    background-color: #f5f5f5; // 设置悬停时的背景颜色
  }
  .themeImage {
    width: 100px;
    height: 40px;
  }
}
