xiaoxia-saas/apps/web/src/components/ui/Button.tsx

/**
 * V21 Button 按钮
 * 封装 Ant Design Button，应用 V21 设计系统样式
 */
import React from "react"
import { Button as AntButton } from "antd"
import type { ButtonProps as AntButtonProps } from "antd"
import classNames from "classnames"
import "./ui.css"

export type ButtonType = "primary" | "secondary" | "ghost" | "text" | "danger" | "link"

export type ButtonSize = "sm" | "md" | "lg"

export interface ButtonProps extends Omit<AntButtonProps, "type" | "size"> {
  /** 按钮类型 */
  buttonType?: ButtonType
  /** 按钮尺寸 */
  buttonSize?: ButtonSize
  /** 兼容 antd type（用于直接替换） */
  type?: AntButtonProps["type"]
  /** 兼容 antd size */
  size?: AntButtonProps["size"]
}

const TYPE_CLASS_MAP: Record<ButtonType, string> = {
  primary: "xx-btn-primary",
  secondary: "xx-btn-secondary",
  ghost: "xx-btn-ghost",
  text: "xx-btn-text",
  danger: "xx-btn-danger",
  link: "xx-btn-link",
}

const SIZE_CLASS_MAP: Record<ButtonSize, string> = {
  sm: "xx-btn-sm",
  md: "xx-btn-md",
  lg: "xx-btn-lg",
}

/** 将 buttonType 映射到 antd type */
const toAntdType = (bt: ButtonType): AntButtonProps["type"] => {
  switch (bt) {
    case "primary":
      return "primary"
    case "danger":
      return "primary"
    case "link":
      return "link"
    case "text":
      return "text"
    default:
      return "default"
  }
}

const Button: React.FC<ButtonProps> = ({
  buttonType = "ghost",
  buttonSize = "md",
  className,
  children,
  type,
  size,
  ...rest
}) => {
  const antdType = type ?? toAntdType(buttonType)
  const antdSize =
    size ?? (buttonSize === "sm" ? "small" : buttonSize === "lg" ? "large" : "middle")

  const v21Class = classNames(
    "xx-btn",
    TYPE_CLASS_MAP[buttonType],
    SIZE_CLASS_MAP[buttonSize],
    className,
  )

  return (
    <AntButton
      type={antdType}
      size={antdSize}
      className={v21Class}
      danger={buttonType === "danger" ? true : rest.danger}
      {...rest}
    >
      {children}
    </AntButton>
  )
}

export default Button