vf_react/src/views/Dashboard/components/EventFormModal.less

/* EventFormModal.less - 投资计划/复盘弹窗响应式样式 */

// ==================== 变量定义 ====================
@mobile-breakpoint: 768px;
@modal-border-radius-mobile: 12px;
@modal-border-radius-desktop: 8px;

// 间距
@spacing-xs: 4px;
@spacing-sm: 8px;
@spacing-md: 12px;
@spacing-lg: 16px;
@spacing-xl: 20px;
@spacing-xxl: 24px;

// 字体大小
@font-size-xs: 12px;
@font-size-sm: 14px;
@font-size-md: 16px;

// 颜色
@color-border: #f0f0f0;
@color-text-secondary: #999;
@color-error: #ff4d4f;

// ==================== 主样式 ====================
.event-form-modal {
  // Modal 整体
  .ant-modal-content {
    border-radius: @modal-border-radius-desktop;
  }

  // Modal 标题放大加粗
  .ant-modal-title {
    font-size: 20px;
    font-weight: 700;
  }

  .ant-modal-body {
    padding: @spacing-xxl;
    padding-top: 36px;  // 增加标题与表单间距
  }

  .ant-form-item {
    margin-bottom: @spacing-xl;
  }

  // 表单标签加粗，左对齐
  .ant-form-item-label {
    text-align: left !important;

    > label {
      font-weight: 600 !important;
      color: #333;
    }
  }

  // 字符计数样式
  .ant-input-textarea-show-count::after {
    font-size: @font-size-xs;
    color: @color-text-secondary;
  }

  // 日期选择器全宽
  .ant-picker {
    width: 100%;
  }

  // 股票标签样式
  .ant-tag {
    margin: 2px;
    border-radius: @spacing-xs;
  }

  // 模板按钮组
  .template-buttons {
    .ant-btn {
      font-size: @font-size-xs;
    }
  }

  // 底部操作栏布局
  .modal-footer {
    display: flex;
    justify-content: flex-end;
  }

  // 加载状态
  .ant-btn-loading {
    opacity: 0.8;
  }

  // 错误状态动画
  .ant-form-item-has-error {
    .ant-input,
    .ant-picker,
    .ant-select-selector {
      animation: shake 0.3s ease-in-out;
    }
  }
}

// ==================== 移动端适配 ====================
@media (max-width: @mobile-breakpoint) {
  .event-form-modal {
    // Modal 整体尺寸
    .ant-modal {
      width: calc(100vw - 32px) !important;
      max-width: 100% !important;
      margin: @spacing-lg auto;
      top: 0;
      padding-bottom: 0;
    }

    .ant-modal-content {
      max-height: calc(100vh - 32px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: @modal-border-radius-mobile;
    }

    // Modal 头部
    .ant-modal-header {
      padding: @spacing-md @spacing-lg;
      flex-shrink: 0;
    }

    .ant-modal-title {
      font-size: @font-size-md;
    }

    // Modal 内容区域
    .ant-modal-body {
      padding: @spacing-lg;
      overflow-y: auto;
      flex: 1;
      -webkit-overflow-scrolling: touch;
    }

    // Modal 底部
    .ant-modal-footer {
      padding: @spacing-md @spacing-lg;
      flex-shrink: 0;
      border-top: 1px solid @color-border;
    }

    // 表单项间距
    .ant-form-item {
      margin-bottom: @spacing-lg;
    }

    // 表单标签
    .ant-form-item-label > label {
      font-size: @font-size-sm;
      height: auto;
    }

    // 输入框字体 - iOS 防止缩放需要 16px
    .ant-input,
    .ant-picker-input > input,
    .ant-select-selection-search-input {
      font-size: @font-size-md !important;
    }

    // 文本域高度
    .ant-input-textarea textarea {
      font-size: @font-size-md !important;
      min-height: 120px;
    }

    // 模板按钮组
    .template-buttons .ant-btn {
      font-size: @font-size-xs;
      padding: 2px @spacing-sm;
      height: 26px;
    }

    // 股票选择器
    .ant-select-selector {
      min-height: 40px !important;
    }

    // 底部按钮
    .ant-modal-footer .ant-btn {
      font-size: @font-size-md;
      height: 40px;
      border-radius: @spacing-sm;
    }
  }
}

// ==================== 动画 ====================
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}