cunkebao_v3/Cunkebao/src/components/NavCommon/index.tsx

import React, { useEffect, useState } from "react";
import { NavBar } from "antd-mobile";
import { ArrowLeftOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { getSafeAreaHeight } from "@/utils/common";

interface NavCommonProps {
  title: string | React.ReactNode;
  /** 副标题，渲染在 title 下方 */
  subtitle?: string | React.ReactNode;
  backFn?: () => void;
  right?: React.ReactNode;
  left?: React.ReactNode;
  /** 启用毛玻璃头部背景（白底 + 模糊）；默认 false 保持旧风格 */
  glass?: boolean;
  /** 标题使用品牌渐变文字（蓝→绿/蓝→紫）；默认 false */
  gradient?: boolean | "brand" | "primary";
  /** 主色调（用于返回按钮 hover 等） */
  tone?: "blue" | "green" | "purple" | "pink" | "cyan";
}

const NavCommon: React.FC<NavCommonProps> = ({
  title,
  subtitle,
  backFn,
  right,
  left,
  glass = false,
  gradient = false,
  tone = "blue",
}) => {
  const navigate = useNavigate();
  const [paddingTop, setPaddingTop] = useState("0px");
  useEffect(() => {
    setPaddingTop(getSafeAreaHeight() + "px");
  }, []);

  const wrapperClass = glass ? "ckb-nav-glass" : "";
  const gradientClass =
    gradient === true || gradient === "brand"
      ? "ckb-gradient-text-brand"
      : gradient === "primary"
        ? "ckb-gradient-text"
        : "";

  const toneColor =
    tone === "green"
      ? "#22c55e"
      : tone === "purple"
        ? "#8b5cf6"
        : tone === "pink"
          ? "#ec4899"
          : tone === "cyan"
            ? "#06b6d4"
            : "var(--ckb-primary, #1677ff)";

  const titleNode =
    typeof title === "string" ? (
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", lineHeight: 1.2 }}>
        <span
          className={gradientClass}
          style={{
            fontSize: 16,
            fontWeight: 700,
            color: gradientClass ? undefined : "var(--ckb-text-primary, #0f172a)",
          }}
        >
          {title}
        </span>
        {subtitle && (
          <span
            style={{
              fontSize: 11,
              color: "var(--ckb-text-muted, #94a3b8)",
              marginTop: 2,
            }}
          >
            {subtitle}
          </span>
        )}
      </div>
    ) : (
      title
    );

  return (
    <div
      className={wrapperClass}
      style={{
        paddingTop,
        background: glass ? undefined : "#fff",
      }}
    >
      <NavBar
        back={null}
        left={
          left ? (
            left
          ) : (
            <div className="nav-title">
              <ArrowLeftOutlined
                style={{ color: toneColor, fontSize: 18 }}
                onClick={() => {
                  if (backFn) {
                    backFn();
                  } else {
                    navigate(-1);
                  }
                }}
              />
            </div>
          )
        }
        right={right}
      >
        {titleNode}
      </NavBar>
    </div>
  );
};

export default NavCommon;