StageFrame.tsx

import type { ReactNode } from 'react'
import { Link } from 'react-router-dom'

type StageFrameProps = {
  title: string
  subtitle: string
  stack: string
  controls?: ReactNode
  legend?: ReactNode
  children: ReactNode
}

export function StageFrame({
  title,
  subtitle,
  stack,
  controls,
  legend,
  children,
}: StageFrameProps) {
  return (
    <main className="stage-page">
      <header className="stage-header">
        <div>
          <Link className="ghost-link" to="/">
            返回总览
          </Link>
          <h1>{title}</h1>
          <p>{subtitle}</p>
        </div>
        <div className="stage-stack">{stack}</div>
      </header>

      <section className="stage-body">
        <div className="stage-canvas-card">{children}</div>
        <aside className="stage-sidebar">
          {controls}
          {legend}
        </aside>
      </section>
    </main>
  )
}