SuperAPI AI 工具集

hide-show-shell

通用与其它

查看项目

更新于 10-16 05:03

技能介绍

用途:当 Flows/Fusion 应用需要全屏“仅应用”模式时,隐藏 Fusion 侧边栏和顶栏,让应用使用整个浏览器视口,并可再次显示。

前提:需已接入 @cognite/app-sdk 的 connectToHostApp(),且 app-sdk >= 0.9.0,可用 npm ls @cognite/app-sdk 或检查 package.json 确认,旧版本没有 HostAppAPI.setHideShell。认证须落在 Apps API 流程(app.json 含 "infra": "appsApi",用 npx @cognite/cli@latest apps deploy 部署),而非 Classic 流程(@cognite/dune、DuneAuthProvider/useDune)。若尚未配置认证,先运行 setup-flows-auth。

主要能力:调用 connectToHostApp() 返回的 api.setHideShell(true/false),隐藏或显示 CDF 侧边栏与顶栏;底层切换可书签化的 ?hideShell=true URL 参数,无需服务端往返,共享链接可直接全屏打开。用户导航离开应用时外壳会自动恢复,但这不能作为唯一返回途径。

使用方式:建议封装 useHideShell hook(React),在卸载时自动恢复外壳,避免永久隐藏;添加明确的切换控件(有自导航则放在导航底部,无自导航则用常驻角落图标按钮),图标按钮需加 aria-label;可配合测试验证隐藏、显示与卸载恢复行为。

适用场景:应用自带侧边导航、需要全画布(仪表盘、绘图、信息亭等)的 Flows 应用。不适合默认隐藏、无用户操作隐藏或 Classic 应用。

限制:外壳隐藏期间 Fusion 不渲染自带的“显示”浮动按钮,返回方式只有应用自己的控件、手动改 URL 或导航离开;必须始终提供可发现的显示控件。setHideShell(true) 实际生效还需环境的 NAVIGATION_HIDE_SHELL Unleash 标志开启、应用是被识别为托管 Flows 应用的活动路由、且页面没有其他已重新显示外壳的操作。标志关闭时调用为无操作,外壳保持可见。若需与 Fusion 侧边栏对齐,其宽度为展开 min-width: 240px、max-width: 280px,折叠 56px,属内部实现细节,可能变化。