site_8g/src/components/HeaderBack/index.tsx

"use client";
import { usePathname, useRouter } from "@/i18n/routing";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import { FC, PropsWithChildren, ReactNode, useEffect, useState } from "react";
import styles from "./style.module.scss";

import clearCache from "./actions";

/**
 * @description 自定义头部返回组件
 * @param {string} title header标题
 * @param {ReactNode} children 插槽内容
 * @param {() => ReactNode} headerRender 自定义渲染
 */
export interface HeaderBackProps {
    title?: string;
    children?: ReactNode;
    showBack?: Boolean;
    headerRender?: () => ReactNode;
    className?: string;
    useBg?: Boolean;
    Right?: () => ReactNode; // 右侧自定义渲染，优先级高于childre
}

const HeaderBack: FC<PropsWithChildren<HeaderBackProps>> = ({
    title = "",
    showBack = true,
    children,
    className,
    useBg = false,
    Right,
}) => {
    const t = useTranslations("HeaderBack");

    const iconClassName1 = clsx(
        {
            [styles.iconfontIcon1]: true,
        },
        "iconfont icon-xiangzuo1  text-[#87ccda]"
    );
    const iconClassName2 = clsx(
        {
            [styles.iconfontIcon2]: true,
        },
        "iconfont icon-company_nav_icon_home text-[#87ccda]"
    );

    let pathname = usePathname();
    let [selfTitle, setSelfTitle] = useState("");
    const setSelfTitleFun = () => {
        if (pathname == "/deposit") {
            setSelfTitle(t("Depósito"));
            return;
        }
        setSelfTitle("");
    };
    useEffect(() => {
        setSelfTitleFun();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [pathname]);

    const router = useRouter();
    const goPage = async (path = "") => {
        if (path) {
            await clearCache();
            router.replace("/");
            return;
        }
        router.back();
    };

    const cls = clsx(styles.headerBack, className, useBg && styles.useBg);

    return (
        <div className={cls}>
            <div className={styles.left}>
                {showBack && <span className={iconClassName1} onClick={() => goPage()}></span>}
            </div>
            <div className={clsx(styles.title, "text-[#87ccda]")}>
                {(title || selfTitle) && <span>{title || selfTitle}</span>}
            </div>
            <div className={styles.content}>{children}</div>
            {!Right && (
                <span className={styles.right} onClick={() => goPage("home")}>
                    <span className={iconClassName2}></span>
                </span>
            )}
            {Right && Right()}
        </div>
    );
};

export default HeaderBack;