...

...

...

...

...

src/components/ui/buttons/DarkButton.tsx

@@ -1,28 +0,0 @@
-import PlainButton, { ButtonType } from "./PlainButton";
-
-export default function DarkButton({
-  onClick,
-  className,
-  selected,
-  children,
-  type = "button",
-  disabled
-}: {
-  onClick?: (() => void) | undefined;
-  className?: string;
-  selected?: boolean;
-  children?: React.ReactNode;
-  type?: ButtonType;
-  disabled?: boolean;
-}) {
-  return (
-    <PlainButton
-      onClick={onClick}
-      className={`hover:bg-gray-100 text-black ${selected ? "bg-gray-100" : "bg-white"} ${className}`}
-      type={type}
-      disabled={disabled}
-    >
-      {children}
-    </PlainButton>
-  );
-}

src/components/ui/buttons/GhostButton.tsx

@@ -1,27 +0,0 @@
-import Link from "next/link";
-
-export type ButtonType = "button" | "submit" | "reset" | undefined;
-
-export default function GhostButton({
-    onClick,
-    className,
-    children,
-    type = "button",
-    href
-}: {
-    onClick?: () => void;
-    className?: string;
-    children?: React.ReactNode;
-    type?: ButtonType;
-    href?: string;
-}) {
-    return (
-        <button
-            onClick={onClick}
-            className={`rounded hover:bg-black/30 p-2 ${className}`}
-            type={type}
-        >
-            {href ? <Link href={href}>{children}</Link> : children}
-        </button>
-    );
-}

src/components/ui/buttons/IconClick.tsx

@@ -1,29 +0,0 @@
-import Image from "next/image";
-
-interface IconClickProps {
-  src: string;
-  alt: string;
-  onClick?: () => void;
-  className?: string;
-  size?: number;
-  disableOnHoverBgChange?: boolean;
-}
-export default function IconClick({
-  src,
-  alt,
-  onClick = () => {},
-  className = "",
-  size = 32,
-  disableOnHoverBgChange = false,
-}: IconClickProps) {
-  return (
-    <>
-      <div
-        onClick={onClick}
-        className={`${disableOnHoverBgChange ? "" : "hover:bg-gray-200"} hover:cursor-pointer rounded-3xl w-[${size}px] h-[${size}px] flex justify-center items-center ${className}`}
-      >
-        <Image src={src} width={size - 5} height={size - 5} alt={alt}></Image>
-      </div>
-    </>
-  );
-}

src/components/ui/buttons/LightButton.tsx

@@ -1,28 +0,0 @@
-import PlainButton, { ButtonType } from "../buttons/PlainButton";
-
-export default function LightButton({
-  onClick,
-  className,
-  selected,
-  children,
-  type = "button",
-  disabled
-}: {
-  onClick?: (() => void) | undefined;
-  className?: string;
-  selected?: boolean;
-  children?: React.ReactNode;
-  type?: ButtonType;
-  disabled?: boolean;
-}) {
-  return (
-    <PlainButton
-      onClick={onClick}
-      className={`hover:bg-gray-100 text-black ${selected ? "bg-gray-100" : "bg-white"} ${className}`}
-      type={type}
-      disabled={disabled}
-    >
-      {children}
-    </PlainButton>
-  );
-}

src/components/ui/buttons/PlainButton.tsx

@@ -1,26 +0,0 @@
-export type ButtonType = "button" | "submit" | "reset" | undefined;
-
-export default function PlainButton({
-  onClick,
-  className,
-  children,
-  type = "button",
-  disabled
-}: {
-  onClick?: () => void;
-  className?: string;
-  children?: React.ReactNode;
-  type?: ButtonType;
-  disabled?: boolean;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className={`px-2 py-1 rounded shadow font-bold hover:cursor-pointer ${className}`}
-      type={type}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-}

src/components/ui/buttons/index.tsx

@@ -0,0 +1,56 @@
+// 向后兼容的按钮组件包装器
+// 这些组件将新 Button 组件包装，以保持向后兼容
+
+import Button from "../Button";
+
+// LightButton: 次要按钮，支持 selected 状态
+export const LightButton = (props: any) => <Button variant="secondary" {...props} />;
+
+// GreenButton: 主题色主要按钮
+export const GreenButton = (props: any) => <Button variant="primary" {...props} />;
+
+// IconButton: SVG 图标按钮
+export const IconButton = (props: any) => {
+  const { icon, ...rest } = props;
+  return <Button variant="icon" leftIcon={icon} {...rest} />;
+};
+
+// GhostButton: 透明导航按钮
+export const GhostButton = (props: any) => {
+  const { className, children, ...rest } = props;
+  return (
+    <Button variant="ghost" className={className} {...rest}>
+      {children}
+    </Button>
+  );
+};
+
+// IconClick: 图片图标按钮
+export const IconClick = (props: any) => {
+  // IconClick 使用 src/alt 属性，需要映射到 Button 的 iconSrc/iconAlt
+  const { src, alt, size, disableOnHoverBgChange, className, ...rest } = props;
+  let buttonSize: "sm" | "md" | "lg" = "md";
+  if (typeof size === "number") {
+    if (size <= 20) buttonSize = "sm";
+    else if (size >= 32) buttonSize = "lg";
+  } else if (typeof size === "string") {
+    buttonSize = (size === "sm" || size === "md" || size === "lg") ? size : "md";
+  }
+
+  // 如果禁用悬停背景变化，通过 className 覆盖
+  const hoverClass = disableOnHoverBgChange ? "hover:bg-black/30 hover:cursor-pointer border-0 bg-transparent shadow-none" : "";
+
+  return (
+    <Button
+      variant="icon"
+      iconSrc={src}
+      iconAlt={alt}
+      size={buttonSize}
+      className={`${hoverClass} ${className || ""}`}
+      {...rest}
+    />
+  );
+};
+
+// PlainButton: 基础小按钮
+export const PlainButton = (props: any) => <Button variant="secondary" size="sm" {...props} />;