feat: 本次提交更新内容如下

定版本转移2025年7月17日
2025-07-17 10:22:38 +08:00
parent 0f860d01e4
commit 92a3d407a7
645 changed files with 30755 additions and 118800 deletions
--- a/Cunkebao/src/components/BackButton.tsx
+++ b/Cunkebao/src/components/BackButton.tsx
@@ -0,0 +1,92 @@
+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;