feat: 存储了

nkebao/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 = 20,
+  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; 

nkebao/src/components/PageHeader.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import BackButton from './BackButton';
+import { useSimpleBack } from '@/hooks/useBackNavigation';
+
+interface PageHeaderProps {
+  /** 页面标题 */
+  title: string;
+  /** 返回按钮文本 */
+  backText?: string;
+  /** 自定义返回逻辑 */
+  onBack?: () => void;
+  /** 默认返回路径 */
+  defaultBackPath?: string;
+  /** 是否显示返回按钮 */
+  showBack?: boolean;
+  /** 右侧扩展内容 */
+  rightContent?: React.ReactNode;
+  /** 自定义CSS类名 */
+  className?: string;
+  /** 标题样式类名 */
+  titleClassName?: string;
+  /** 返回按钮样式变体 */
+  backButtonVariant?: 'icon' | 'button' | 'text';
+  /** 返回按钮自定义样式类名 */
+  backButtonClassName?: string;
+  /** 是否固定在顶部 */
+  fixed?: boolean;
+  /** 是否显示底部边框 */
+  showBorder?: boolean;
+}
+
+/**
+ * 通用页面Header组件
+ * 支持返回按钮、标题和右侧扩展插槽
+ */
+export const PageHeader: React.FC<PageHeaderProps> = ({
+  title,
+  backText = '返回',
+  onBack,
+  defaultBackPath = '/',
+  showBack = true,
+  rightContent,
+  className = '',
+  titleClassName = '',
+  backButtonVariant = 'icon',
+  backButtonClassName = '',
+  fixed = true,
+  showBorder = true
+}) => {
+  const { goBack } = useSimpleBack(defaultBackPath);
+
+  const handleBack = onBack || goBack;
+
+  const baseClasses = `bg-white ${showBorder ? 'border-b border-gray-200' : ''} ${fixed ? 'fixed top-0 left-0 right-0 z-20' : ''}`;
+  const headerClasses = `${baseClasses} ${className}`;
+  // 默认小号按钮样式
+  const defaultBackBtnClass = 'text-sm px-2 py-1 h-8 min-h-0';
+
+  return (
+    <header className={headerClasses}>
+      <div className="flex items-center justify-between px-4 py-3">
+        <div className="flex items-center ">
+          {showBack && (
+            <BackButton
+              variant={backButtonVariant}
+              text={backText}
+              onBack={handleBack}
+              className={`${defaultBackBtnClass} ${backButtonClassName}`.trim()}
+            />
+          )}
+          <h1 className={`text-lg font-semibold ${titleClassName}`}>
+            {title}
+          </h1>
+        </div>
+        
+        {rightContent && (
+          <div className="flex items-center gap-2">
+            {rightContent}
+          </div>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default PageHeader; 

nkebao/src/components/ThrottledButton.tsx

@@ -151,7 +151,7 @@ const DebounceButtonContent: React.FC<{
   errorText?: string;
   children: React.ReactNode;
 }> = ({ onClick, delay, loadingText, showLoadingText, disabled, className, errorText, children }) => {
-  const { debouncedRequest, loading, error } = useThrottledRequestWithError(onClick, delay);
+  const { throttledRequest, loading, error } = useThrottledRequestWithError(onClick, delay);
 
   const getButtonText = () => {
     return loading && showLoadingText ? loadingText : children;
@@ -174,7 +174,7 @@ const DebounceButtonContent: React.FC<{
   return (
     <div className="flex items-center gap-2">
       <button
-        onClick={debouncedRequest}
+        onClick={throttledRequest}
         disabled={disabled || loading}
         className={getButtonClassName()}
       >