formDialogLayout.ts 1.32 KB

Edit Raw Blame History

import type { CSSProperties } from "react";

/**
 * 新增/编辑弹框：50% 宽、70vh 高；中间区域滚动。
 * 使用 grid 三行（与 DialogContent 默认 display:grid 一致），避免 flex 被覆盖后高度失效。
 */
export const FORM_DIALOG_CONTENT_CLASS =
  "form-dialog-shell sm:max-w-none w-[min(50%,calc(100vw-2rem))] max-w-[min(50%,calc(100vw-2rem))] gap-0 overflow-hidden p-0 grid-rows-[auto_minmax(0,1fr)_auto]";

export const FORM_DIALOG_CONTENT_STYLE: CSSProperties = {
  display: "grid",
  height: "70vh",
  maxHeight: "70vh",
  minHeight: 0,
  width: "50%",
  maxWidth: "min(50%, calc(100vw - 2rem))",
  overflow: "hidden",
  padding: 0,
  boxSizing: "border-box",
};

export const FORM_DIALOG_HEADER_CLASS =
  "shrink-0 space-y-2 px-6 pt-6 pr-14 pb-2 text-center sm:text-left min-h-0";

export const FORM_DIALOG_SCROLL_BODY_CLASS =
  "form-dialog-scroll-body min-h-0 overflow-y-auto overflow-x-hidden overscroll-contain px-6 pb-4";

export const FORM_DIALOG_FOOTER_CLASS =
  "shrink-0 gap-2 border-t border-gray-100 bg-background px-6 py-4 sm:flex-row sm:justify-end min-h-0";

/** 弹框内 Button Image 上传区边长（px） */
export const FORM_DIALOG_IMAGE_UPLOAD_SIZE_PX = 120;

/** 弹框内 Button Image 上传区 class（配合 boxSizePx 使用） */
export const FORM_DIALOG_IMAGE_UPLOAD_BOX_CLASS = "shrink-0";