function TopBar({ pageId, projectName, setPage, openCmd }) {
  const { Ico, LiveClock } = window;
  const titles = {
    hub: '从故事到分镜图的短剧生产工作台',
    bench: `${projectName} · 项目工作台`,
    asset: `${projectName} · 数字资产`,
    script: `${projectName} · 故事 / 剧情地图 / 分集剧本`,
    board: `${projectName} · 分镜表`,
    export: `${projectName} · 导出与交付`,
    model: '模型设置',
  };
  const crumbs = {
    hub: ['STUDIO', 'PROJECT', '项目中心'],
    bench: ['STUDIO', 'PROJECT', 'WORKBENCH', '项目工作台'],
    asset: ['STUDIO', 'PROJECT', 'ASSETS', '数字资产'],
    script: ['STUDIO', 'PROJECT', 'SCRIPT', '剧本与流程'],
    board: ['STUDIO', 'PROJECT', 'BOARD', '分镜表'],
    export: ['STUDIO', 'PROJECT', 'EXPORT', '导出'],
    model: ['STUDIO', 'SETTINGS', '模型设置'],
  };
  const c = crumbs[pageId] || [];
  return (
    <div className="topbar">
      <div className="crumb">
        <span>EagClaw Story</span>
        {c.map((x, i) => (
          <React.Fragment key={i}>
            <span className="sep">/</span>
            <span className={i === c.length - 1 ? 'cur' : ''}>{x}</span>
          </React.Fragment>
        ))}
      </div>
      <h1>
        <span className="pg">{titles[pageId]}</span>
      </h1>
      <div className="top-right">
        <LiveClock />
        <button className="icon-btn" title="通知"><Ico.Bell /></button>
        <button className="icon-btn" title="搜索 (⌘K)" onClick={openCmd}><Ico.Search /></button>
        {pageId !== 'hub' ? (
          <button className="icon-btn" title="返回项目中心" onClick={() => setPage('hub')}><Ico.Close /></button>
        ) : (
          <button className="icon-btn"><Ico.Close /></button>
        )}
      </div>
    </div>
  );
}
window.TopBar = TopBar;