AppShell.tsx 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import Link from "next/link";
  2. import { Activity, ArrowLeft, RefreshCw } from "lucide-react";
  3. export function AppShell({
  4. children,
  5. onRefresh,
  6. showBack,
  7. toolbarLeading
  8. }: {
  9. children: React.ReactNode;
  10. onRefresh?: () => void;
  11. showBack?: boolean;
  12. toolbarLeading?: React.ReactNode;
  13. }) {
  14. return (
  15. <main className="app-shell">
  16. <div className="workspace">
  17. <header className="topbar">
  18. <div className="topbar-left">
  19. {showBack ? (
  20. <Link className="back-link" href="/runs">
  21. <ArrowLeft size={15} />
  22. 返回 Dashboard
  23. </Link>
  24. ) : null}
  25. </div>
  26. <Link className="brand" href="/runs">
  27. <strong>ContentFind 可视化工作台</strong>
  28. </Link>
  29. <div className="toolbar">
  30. {toolbarLeading}
  31. <Link className="back-link" href="/config">
  32. 配置
  33. </Link>
  34. <span className="badge">
  35. <Activity size={13} />
  36. Douyin V1
  37. </span>
  38. {onRefresh ? (
  39. <button className="icon-button" onClick={onRefresh} type="button" title="刷新">
  40. <RefreshCw size={16} />
  41. </button>
  42. ) : null}
  43. </div>
  44. </header>
  45. {children}
  46. </div>
  47. </main>
  48. );
  49. }