content-find-agent-new/web/components/layout/AppShell.tsx

import Link from "next/link";
import { ArrowLeft, RefreshCw } from "lucide-react";

export function AppShell({
  children,
  onRefresh,
  showBack,
  onBack,
  backLabel = "返回",
  toolbarLeading,
  centerNav
}: {
  children: React.ReactNode;
  onRefresh?: () => void;
  showBack?: boolean;
  // 提供 onBack 时,返回按钮走该回调(如浏览器历史回退),回到来时的页面;否则默认 Link 到 /runs。
  onBack?: () => void;
  backLabel?: string;
  toolbarLeading?: React.ReactNode;
  centerNav?: React.ReactNode;
}) {
  return (
    <main className="app-shell">
      <div className="workspace">
        <header className="topbar">
          <div className="topbar-left">
            {onBack ? (
              <button className="back-link" type="button" onClick={onBack}>
                <ArrowLeft size={15} />
                {backLabel}
              </button>
            ) : showBack ? (
              <Link className="back-link" href="/runs">
                <ArrowLeft size={15} />
                {backLabel}
              </Link>
            ) : null}
            <Link className="brand" href="/runs">
              <strong>ContentFindAgent</strong>
            </Link>
          </div>
          {centerNav ? <div className="topbar-center">{centerNav}</div> : null}
          <div className="toolbar">
            {toolbarLeading}
            <Link className="back-link" href="/config">
              配置
            </Link>
            {onRefresh ? (
              <button className="icon-button" onClick={onRefresh} type="button" title="刷新">
                <RefreshCw size={16} />
              </button>
            ) : null}
          </div>
        </header>
        {children}
      </div>
    </main>
  );
}