AppShell.tsx 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. "use client";
  2. import Link from "next/link";
  3. import { ArrowLeft, Database, RefreshCw } from "lucide-react";
  4. export function AppShell({
  5. children,
  6. title = "运营流程账本",
  7. subtitle,
  8. runId,
  9. showBack,
  10. onRefresh,
  11. actions
  12. }: {
  13. children: React.ReactNode;
  14. title?: string;
  15. subtitle?: string;
  16. runId?: string;
  17. showBack?: boolean;
  18. onRefresh?: () => void;
  19. actions?: React.ReactNode;
  20. }) {
  21. return (
  22. <main className="app-shell">
  23. <div className="scroll-area">
  24. <header className="page-header">
  25. <div className="header-left">
  26. {showBack ? (
  27. <Link className="toolbar-button" href={runId ? `/runs/${encodeURIComponent(runId)}` : "/runs"}>
  28. <ArrowLeft size={15} />
  29. 返回
  30. </Link>
  31. ) : null}
  32. <Link className="brand" href="/runs">
  33. <Database size={16} />
  34. <span>{title}</span>
  35. </Link>
  36. {subtitle ? <span className="header-subtitle">{subtitle}</span> : null}
  37. </div>
  38. <div className="toolbar">
  39. {actions}
  40. {onRefresh ? (
  41. <button className="icon-button" type="button" title="刷新" aria-label="刷新" onClick={onRefresh}>
  42. <RefreshCw size={15} />
  43. </button>
  44. ) : null}
  45. </div>
  46. </header>
  47. {children}
  48. </div>
  49. </main>
  50. );
  51. }