前端AppShell介绍（Application Shell，应用外壳）（前端应用的一个全局布局/外壳组件，它定义了登录后可用区域的整体页面框架）应用骨架

此前根路径会把所有访客(包括搜索引擎爬虫)强制重定向到 Keycloak 登录页,导致 站点没有任何可索引内容,B2C 自助注册漏斗也缺少产品展示入口。本次将 App Router 重组为两个路由组:(marketing)—— 公开、i18n-ready 的落地页(Hero、六张功能 卡片、托管与自托管模式对比、GitHub 链接);(app)—— AuthProvider 与 AppShell 从根 layout 下移至此,登录强制边界精确收缩到应用页面(URL 不变)。keycloak-js 初始化改为initKeycloak()记忆化单例:落地页执行静默 check-sso(新增 public/silent-check-sso.html),老用户回访时 CTA 变为进入 Dashboard;应用路 由保持 login-required 语义;登出后回到公开落地页,不再被弹回 Keycloak。SEO 方 面:基于新的运行时 SITE_URL 环境变量(12-factor,已接入 base 与 prod compose)按请求生成 canonical/OG/Twitter 元数据与 og-image;robots.txt 屏蔽应用路由;新 增 sitemap.xml;Caddy 为 auth.子域名添加 X-Robots-Tag noindex。E2E 冒烟围绕落 地页入口重写(6个测试,含静默 SSO 回访与登出回落地页),已在本地对重建镜像全 部通过;lint/type-check/build 与完整单元测试套件均通过。文章目录前端AppShell介绍什么是 AppShell在你的项目中具体是什么一句话总结前端AppShell介绍根据你提供的项目描述以及前端开发的通用概念AppShellApplication Shell应用外壳可以这样理解什么是 AppShellAppShell是前端应用的一个全局布局/外壳组件它定义了登录后可用区域的整体页面框架通常包含元素说明顶部导航栏 (Header/Navbar)Logo、用户头像、菜单等侧边栏 (Sidebar)应用内导航菜单主内容区域 (Content Area)通过{children}渲染具体页面全局状态/上下文如 AuthProvider 提供的登录态简单来说AppShell 就是用户登录后看到的应用骨架——不管切换到哪个子页面这个外壳始终存在。在你的项目中具体是什么根据描述(app) —— AuthProvider 与 AppShell 从根 layout 下移至此在重构之前AppShell和AuthProvider放在根 layout里这意味着所有页面包括根路径/都会走登录流程被强制跳转到 Keycloak 登录页在重构之后AppShell和AuthProvider被下移到(app)路由组只有访问/app/*等应用页面时才会触发认证和应用外壳根路径/现在走(marketing)路由组展示公开的落地页不再需要登录一句话总结AppShell 登录后的应用框架导航栏 侧边栏 内容区它和 AuthProvider 绑定在一起构成了需要认证才能访问的应用界面外壳。把它从根路由移走就是为了把公开落地页和需要登录的应用页面分开。