ORBCAFE 布局 + 导航

工作流程

1. 1. 首先对照 skills/orbcafe-ui-component-usage/references/module-contracts.md，确认这是一个 Hook-first 模块。
2. 执行安装与基础壳层接入。
3. 使用 references/patterns.md 选择完整壳层或仅导航。
4. 使用 references/guardrails.md 逐条检查语言环境、水合、菜单动作和动效。
5. 以官方示例中的布局/提供者/页面骨架为基础产出代码。

安装与引导（必选）

bash
npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs

本仓库联调：

bash
npm run build
cd examples
npm install
npm run dev

参考实现：

• - examples/app/layout.tsx
• examples/app/providers.tsx
• examples/app/components/HomeDemoClient.tsx
• examples/app/components/StdReportExampleClient.tsx

输出契约

1. 0. 模式：Hook-first。
2. 布局决策：完整壳层 vs 仅导航。
3. 代码片段：最小属性应用框架。
4. 运行时安全：语言环境、水合、路由高亮安全策略。
5. 验证：菜单跳转、语言环境切换、用户菜单动作、过渡动画。
6. 故障排查：至少包含 3 条页面看起来没反应排查项。

基于示例的经验总结

• - 在 App Router 下优先采用 Server page -> Client page 分层，不在客户端首屏直接消费 Promise 语义路由参数。
• usePathname 高亮逻辑使用 mounted 防抖策略，避免 SSR/CSR 首帧不一致。
• CAppPageLayout 内部负责壳层，业务页只注入 menu/user/logo/children，避免重复造壳。
• CPageTransition 持续使用 160-260ms，仅用 transform/opacity 变换，性能更稳。
• Providers 层集中挂载 ThemeProvider + LocalizationProvider + GlobalMessage，避免每页重复配置。