feat: 存储了

2025-07-05 22:49:50 +08:00
parent 17ec8ecf25
commit 5a981bf038
13 changed files with 593 additions and 114 deletions
--- a/nkebao/src/components/PageHeader.tsx
+++ b/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;