92 lines
2.1 KiB
TypeScript
92 lines
2.1 KiB
TypeScript
import React from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { ChevronLeft, ArrowLeft } from 'lucide-react';
|
||
|
||
interface BackButtonProps {
|
||
/** 返回按钮的样式变体 */
|
||
variant?: 'icon' | 'button' | 'text';
|
||
/** 自定义返回逻辑，如果不提供则使用navigate(-1) */
|
||
onBack?: () => void;
|
||
/** 按钮文本，仅在button和text变体时使用 */
|
||
text?: string;
|
||
/** 自定义CSS类名 */
|
||
className?: string;
|
||
/** 图标大小 */
|
||
iconSize?: number;
|
||
/** 是否显示图标 */
|
||
showIcon?: boolean;
|
||
/** 自定义图标 */
|
||
icon?: React.ReactNode;
|
||
}
|
||
|
||
/**
|
||
* 通用返回上一页按钮组件
|
||
* 使用React Router的navigate方法实现返回功能
|
||
*/
|
||
export const BackButton: React.FC<BackButtonProps> = ({
|
||
variant = 'icon',
|
||
onBack,
|
||
text = '返回',
|
||
className = '',
|
||
iconSize = 6,
|
||
showIcon = true,
|
||
icon
|
||
}) => {
|
||
const navigate = useNavigate();
|
||
|
||
const handleBack = () => {
|
||
if (onBack) {
|
||
onBack();
|
||
} else {
|
||
navigate(-1);
|
||
}
|
||
};
|
||
|
||
const defaultIcon = variant === 'icon' ? (
|
||
<ChevronLeft className={`h-${iconSize} w-${iconSize}`} />
|
||
) : (
|
||
<ArrowLeft className={`h-${iconSize} w-${iconSize}`} />
|
||
);
|
||
|
||
const buttonIcon = icon || (showIcon ? defaultIcon : null);
|
||
|
||
switch (variant) {
|
||
case 'icon':
|
||
return (
|
||
<button
|
||
onClick={handleBack}
|
||
className={`p-2 hover:bg-gray-100 rounded-lg transition-colors ${className}`}
|
||
title="返回上一页"
|
||
>
|
||
{buttonIcon}
|
||
</button>
|
||
);
|
||
|
||
case 'button':
|
||
return (
|
||
<button
|
||
onClick={handleBack}
|
||
className={`flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors ${className}`}
|
||
>
|
||
{buttonIcon}
|
||
{text}
|
||
</button>
|
||
);
|
||
|
||
case 'text':
|
||
return (
|
||
<button
|
||
onClick={handleBack}
|
||
className={`flex items-center gap-2 text-blue-600 hover:text-blue-700 transition-colors ${className}`}
|
||
>
|
||
{buttonIcon}
|
||
{text}
|
||
</button>
|
||
);
|
||
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
export default BackButton;
|