aida_front/src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less

// 文本省略样式
.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// 主容器样式
.layers-panel-inner {
  display: flex;
  flex-direction: column;
  user-select: none;
  z-index: 6;
  overflow-y: auto;
  height: 100%;
  max-height: 85vh;
  -webkit-overflow-scrolling: touch;
}

// 头部样式
.layers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
}

.layer-actions-group {
  display: flex;
  gap: 8px;
  .normal-actions,
  .multi-select-actions {
    display: flex;
    gap: 8px;
  }
}

// 操作按钮样式
.action-btn {
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background-color: #f0f0f0;
    border-color: #40a9ff;
    color: #40a9ff;
  }

  &:active {
    background-color: #e6f7ff;
    border-color: #1890ff;
    color: #1890ff;
  }

  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f5f5f5;
    color: #bfbfbf;
    border-color: #e6e6e6;

    &:hover {
      background-color: #f5f5f5;
      color: #bfbfbf;
      border-color: #e6e6e6;
    }
  }
}

// 特殊按钮样式
.group-btn {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;

  &:hover {
    background-color: #bae7ff;
    border-color: #69c0ff;
  }

  &.disabled{
    background-color: #f0f5ff;
    border-color: #d9ecff;
    color: #bfbfbf;
  }
}

.ungroup-btn {
  background-color: #fff2e8;
  border-color: #ffbb96;
  color: #fa8c16;

  &:hover {
    background-color: #ffd8bf;
    border-color: #ff9c6e;
    color: #fa8c16;
  }

  &.disabled{
    background-color: #f0f5ff;
    border-color: #d9ecff;
    color: #bfbfbf;
  }
}

.delete-selected-btn {
  background-color: #fff2f0;
  border-color: #ffccc7;
  color: #ff4d4f;

  &:hover {
    background-color: #ffebe6;
    border-color: #ff7875;
    color: #ff4d4f;
  }
}

.clear-selection-btn {
  background-color: #f6f6f6;
  border-color: #d9d9d9;
  color: #595959;

  &:hover {
    background-color: #e6e6e6;
    border-color: #bfbfbf;
    color: #595959;
  }
}

// 多选信息提示
.multi-select-info {
  padding: 10px 6px;
  // background-color: #e6f7ff;
  background-color: rgba(238, 238, 238,0.4);
  border-bottom: 1px solid #91d5ff;
  color: #333;
  font-size: 13px;
  line-height: 1.4;

  small {
    display: block;
    margin-top: 4px;
    color: #666;
    font-size: 11px;
  }
}

// 图层列表
.layers-list {
  position: relative;
  flex: 1;
  overflow-y: auto;
}

// 图层项样式
.layer-item {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  border-left: 0;
  border-right: 0;
  border: none;
  border-bottom: 1px solid #f5f2f2;
  padding-left: 30px;
  padding-right: 10px;  

  &.group-layer {
    background-color: rgba(240, 248, 255, 0.3);
    border-color: #e6f7ff;
  }

  &:hover {
    background-color: #f0f0f0;
    border-color: #e0e0e0;
  }

  &.active {
    background-color: #e6f7ff;
    border-color: #91d5ff;
  }

  &.selected {
    background-color: #bae7ff;
    border-color: #91d5ff;
    // box-shadow: 0 0 0 1px #1890ff;
  }

  &.editing {
    background-color: #fff7e6;
    border-color: #ffd666;
  }

  // &.multi-select-mode {
  //   // padding-left: 30px;
  // }

  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;

    &:hover {
      background-color: transparent;
    }
  }
}

// 图层头部
.layer-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
}

// 图层预览
.layer-review {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
  background: repeating-conic-gradient(#f5f5f5 0% 25%, #ffffff 0% 50%) 50% /
    10px 10px;
  border: 1px solid #e0e0e0;
}

.layer-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.layer-type-icon {
  font-size: 14px;
}

// 可见性按钮
.visibility-btn {
  width: 22px;
  height: 22px;
  cursor: pointer;
  flex: none;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;

  &.hidden {
    color: #999;
  }
}

// 图层名称
.layer-name-container {
  flex: 1;
  margin: 0 6px;
  overflow: hidden;
  // max-width: 204px;
  .layer-name-wrapper{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.layer-name {
  color: #333;
  font-size: 14px;
  text-align: left;
  display: block;
  width: 100%;
}

.layer-name-input {
  width: 100%;
  padding: 2px 4px;
  border: 1px solid #1890ff;
  border-radius: 3px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  outline: none;
  box-sizing: border-box;

  &:focus {
    border-color: #40a9ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
}

// 图层状态
.layer-status {
  display: flex;
  align-items: center;
  gap: 4px;

 
}

.status-icon {
  font-size: 12px;

  &.locked {
    color: #1890ff;
  }

  &.group {
    color: #fa8c16;
  }

  &.disabled {
    color: #ccc;
    cursor: not-allowed;
  }
}

// 图层操作
.layer-actions {
  display: flex;
  gap: 6px;
}

.delete-btn {
  font-size: 16px;
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    color: #ff4d4f;
  }
  
  &.disabled{
    color: #ccc;
    cursor: not-allowed;
    // pointer-events: none;
  }
}

// 拖拽手柄
.layer-drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  cursor: move;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  margin-right: 4px;
  background: #eee;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  &:hover {
    color: #333;
  }
}

// 复选框
.layer-checkbox {
  width: 18px;
  height: 18px;
  margin-right: 0;
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;

  // input[type="checkbox"] {
  //   width: 16px;
  //   height: 16px;
  //   cursor: pointer;
  //   accent-color: #1890ff;
  // }
}

// 子图层样式
.child-layers {
}

.child-layer {
  padding: 8px 20px 8px 32px;
  background-color: rgba(240, 240, 240, 0.3);
  border-left: 2px solid #e0e0e0;

  &:hover {
    background-color: rgba(224, 224, 224, 0.5);
  }

  &.active {
    background-color: rgba(230, 247, 255, 0.5);
    border-left: 2px solid #1890ff;
  }

  &.editing {
    background-color: rgba(255, 247, 230, 0.5);
    border-left: 2px solid #ffd666;
  }

  .layer-actions {
    position: static;
    display: flex;
    gap: 4px;

    button {
      width: 20px;
      height: 20px;
      border: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      border-radius: 2px;
      transition: all 0.2s;

      &:hover {
        background-color: #f0f0f0;
        color: #333;
      }
    }
  }
}

.layer-indent {
  width: 20px;
  flex: none;
}

.layer-info {
  flex: 1;
  margin: 0 8px;

  .layer-name {
    font-size: 13px;
    color: #333;
    margin-bottom: 2px;
  }

  .layer-status {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .layer-type {
    font-size: 11px;
    color: #999;
  }
}

.child-drag-handle {
  width: 16px;
  height: 16px;
  cursor: move;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  margin-right: 4px;

  &:hover {
    color: #333;
  }
}

// 固定图层样式
.fixed-layers {
  border-top: 1px solid #e0e0e0;
  // background-color: #fafafa;
  
  background-color: rgba(238, 238, 238,0.4);
  .layer-drag-handle{
    cursor: default;
  }
}

.fixed-layer {
  background-color: #fafafa;
  // border-left: 3px solid #1890ff;

  // &:hover {
  //   background-color: #e6f7ff;
  // }
}

.fixed-layer-indicator {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
  margin-right: 4px;
}

.background-indicator,
.fixed-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.background-icon,
.fixed-icon {
  font-size: 14px;
  color: #999;
}

// 拖拽样式
.sortable-layers {
  width: 100%;
}

.ghost {
  opacity: 0.5;
  background-color: #f0f0f0;
  border: 2px dashed #1890ff;
}

.chosen {
  background-color: #e6f7ff;
  border: 1px solid #1890ff;
}

.drag {
  opacity: 0.8;
  transform: rotate(5deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

// 子图层拖拽样式
.child-layers {
  .ghost {
    opacity: 0.4;
    background-color: #fff7e6;
    border: 2px dashed #faad14;
  }

  .chosen {
    background-color: #fff7e6;
    border: 1px solid #faad14;
  }

  .drag {
    opacity: 0.7;
    transform: rotate(3deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .layers-panel-inner {
    max-height: 70vh;
  }

  .layer-item {
    padding: 12px;
    padding-left: 35px;
  }

  .layer-header {
    min-height: 40px;
  }

  .layer-drag-handle,
  .visibility-btn {
    width: 24px;
  }

  .layer-review {
    width: 36px;
    height: 36px;
  }

  .action-btn {
    width: 36px;
    height: 36px;
  }

  .multi-select-info {
    // padding: 12px;

    small {
      font-size: 11px;
    }
  }
//   .layer-name-container {
//     // max-width: 182px;
//   }
}

// iPad 优化
@media (min-width: 768px) and (max-width: 1024px) {
  .layer-item {
    padding: 10px;
    padding-left: 30px;
  }

  .layer-drag-handle:hover,
  .visibility-btn:hover {
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
  }
}

// 触摸设备优化
@media (hover: none) and (pointer: coarse) {
  .layer-item {
    padding-left: 30px;
    &:hover {
      background-color: transparent;
    }

    &:active {
      background-color: #f0f0f0;
    }
  }

  .action-btn {
    &:hover {
      background-color: transparent;
      border-color: #d9d9d9;
      color: #666;
    }

    &:active {
      background-color: #e6f7ff;
      border-color: #1890ff;
      color: #1890ff;
    }
  }
}

// 组图层展开/收起图标样式
.group-expand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s ease;
  margin-right: 4px;

  // &:hover {
  //   background-color: rgba(0, 0, 0, 0.1);
  // }

  // 展开/收起图标的过渡动画
  .svg-icon {
    transition: transform 0.2s ease;
  }
}

// 组图层样式
.group-layer {
  .layer-type-icon {
    font-size: 14px;
  }
}

// 子图层缩进和连接线
.child-layers {
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #e0e0e0;
  }
}

.layer-indent {
  width: 16px;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 8px;
    height: 1px;
    background-color: #e0e0e0;
  }
}

// 子图层展开/收起动画样式
.child-layers-expand-enter-active,
.child-layers-expand-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.child-layers-expand-enter-from {
  height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.child-layers-expand-leave-to {
  height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

// 展开图标旋转动画优化
.group-expand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s ease;
  margin-right: 4px;

  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
  }

  &:active {
    transform: scale(0.95);
  }

  // 展开/收起图标的过渡动画
  .svg-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

// 子图层展开时的额外样式
.child-layers {
  position: relative;
  background: linear-gradient(135deg, rgba(240, 248, 255, 0.1) 0%, rgba(240, 248, 255, 0.05) 100%);
  // border-radius: 4px;
  // margin-top: 2px;
  
  &::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, #e0e0e0 0%, rgba(224, 224, 224, 0.3) 100%);
  }

  // 子图层项动画
  .layer-item {
    animation: slideInRight 0.2s ease-out;
    animation-fill-mode: both;
    
    &:nth-child(1) { animation-delay: 0.05s; }
    &:nth-child(2) { animation-delay: 0.1s; }
    &:nth-child(3) { animation-delay: 0.15s; }
    &:nth-child(4) { animation-delay: 0.2s; }
    &:nth-child(5) { animation-delay: 0.25s; }
  }
}

// 子图层项进入动画
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 移动端动画优化
@media (hover: none) and (pointer: coarse) {
  .child-layers-expand-enter-active,
  .child-layers-expand-leave-active {
    transition: all 0.25s ease;
  }
  
  .group-expand-icon {
    &:hover {
      transform: none;
      background-color: transparent;
    }
    
    &:active {
      transform: scale(0.9);
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
  
  .child-layers .layer-item {
    animation-duration: 0.15s;
  }
}