三栏布局骨架
P0左：社区导航与我的订阅；中：当前 slug 页面；右：社区资料、规则、版主与外部资源。
实现要点：CSS Grid：lg 两栏、xl 三栏；左右栏 sticky 吸顶，中栏独立滚动。
!See translation tasks
This page is not translated yet
The interface, navigation and community content are bilingual. The long-form body of this page is still in Chinese. The translation work is tracked as task I18N-10.
Module 13 · V1.0 · Layout & Menu System
界面与菜单系统
三栏布局 + 无限级横向 megamenu + 每个菜单一个 slug 独立页
P0V1.0缺失则产品不成立，必须最先交付
模块目标
要达成什么
把「社区」从一张帖子列表升级为一个可无限延展的内容站点：左侧栏承担导航与订阅，中栏承载任意 slug 页面，右栏承担社区资料与规则；顶部用一条横向 megamenu 把社区的全部子站组织起来，且深度不设上限。
为什么必须存在
社区真正的护城河不是「能发帖」，而是「能被结构化地阅读」。Reddit 的 wiki、Discourse 的分类、V2EX 的节点都只做到两三层；而技术社区天然需要「框架 → 生态 → 具体方案」这类四到五层的信息架构。如果菜单层级被写死在代码里，每加一个板块都要改路由、改组件、发版；本模块把它变成数据 + 注册表，运营侧加一条菜单数据、开发侧加一个 SFC 即可上线，这才是可长期运营的社区底层。
功能清单
共 9 个功能点，每个功能点给出实现要点，可直接作为开发任务的描述。
社区主题色注入
P0每个社区自有强调色，切换社区整页换肤，突出「独立站点」感。
实现要点：在外层容器注入 --c-brand / --c-brand-dark / --c-brand-soft 三个 CSS 变量，子树只引用变量。
无限级横向 megamenu
P0一级横向排列，悬停展开大面板；面板内按分组分列；条目仍有子级时继续向右飞出。
实现要点：MegaMenu（条 + 面板）+ MegaFlyout（递归组件）。深度无硬编码上限，递归到数据没有 children 为止。
菜单数据模型
P0menu 是一棵树，节点含 slug / desc / badge / children，由运营后台维护。
实现要点：落库到 communities + community_menu_items 两张表，slug 唯一索引，parent_id 建树。
slug 独立页注册表
P0每个菜单叶子映射一个 SFC，动态 import，按需加载。
实现要点：menuRegistry：key = `社区/slug`，value = () => import(...)；未登记则回退通用骨架页。
泛化页面（一枚 SFC 多 slug）
P1资讯、版本、百科等页面形态稳定，用同一组件接收 path 推导变体。
实现要点：组件 props 收 { community, node, path }，变体由 path 推导，避免为每个叶子重复造组件。
移动端降级
P0窄屏 megamenu 收起为递归折叠树，保证无限层级在手机上依然可用。
实现要点：MegaTree 递归折叠，缩进按深度递增，仅展开当前分支。
键盘与无障碍
P1一级菜单可用 ←/→ 切换、Esc 关闭、Tab 聚焦后自动展开；选中态与 aria-expanded 齐备。
深链回溯与站点地图
P1任一深链都能回到上级，并自动生成站点地图供搜索引擎收录。
实现要点：由菜单树直接推导上级链路与 sitemap.xml，无需手工维护。全站不使用面包屑。
交互设计
2 条关键交互的分步流程，按用户体验顺序描述，可直接作为前端开发与可用性测试脚本。
1
浏览一个五级菜单
- 1
进入 /c/php，顶部出现横向 megamenu，一级项为「资讯 / 版本更新记录 / PHP 百科 / 网址大全 / …」。
- 2
鼠标移到「网址大全」，下方展开大面板：左列是该板块的自我介绍，右侧是多列分组（框架 / 包与依赖 / 工具链 / 学习资源 / 社区与活动）。
- 3
「工具链」列下的「静态分析」右侧出现箭头，继续悬停 → 向右飞出 PHPStan / Psalm。
- 4
点击 PHPStan，URL 变为 /c/php/directory/tools/static/phpstan，中栏换成对应 SFC，左右两栏保持不变。
2
运营新增一个板块
- 1
后台在「PHP 百科」下新增子菜单「运行时调优」，slug 填 wiki/runtime-tuning。
- 2
前台立刻出现该菜单项，点击后落到通用骨架页（因为还没有专属组件）。
- 3
开发新建 WikiRuntimeTuning.vue，在注册表加一行 key → 页面即刻生效，无需改动路由与导航。
业务规则
6 条硬性约束。这些规则应当在服务层强校验，而非仅在前端提示。
R01
slug 在社区内唯一且一经发布不可更改；改名需保留 301 重定向记录。
R02
菜单深度不设硬上限，但要求任意叶子的 URL 段数 ≤ 8，超出请审视信息架构。
R03
同一 slug 只能命中一个组件；注册表冲突在构建期直接报错。
R04
未登记的 slug 一律可访问（落到骨架页），禁止返回 404 —— 菜单即承诺。
R05
菜单项的显示名与 slug 解耦：改名不动 URL，动 URL 必须留重定向。
R06
社区主题色需保证与白色文字对比度 ≥ 4.5:1，不满足则由系统自动加深。
slug 页面类型与推荐承载方式
| 列表型 | news / jobs / qa | 一枚泛化 SFC + path 推导变体 |
| 详情型 | wiki/language/oop/inheritance | 按类型一枚 SFC，数据由 slug 查库 |
| 对比型 | directory/frameworks | 表格 SFC，行数据来自 MySQL |
| 聚合型 | releases/lifecycle | 跨表聚合，走 Redis 缓存 |
| 未实现 | 任意新 slug | StubPage 骨架页，自动生成层级指示与接入指引 |
涉及数据表
本模块涉及的 4 张表。完整字段、索引与说明见「数据表设计」页。
竞品参考
本模块的设计参照了哪些产品，具体参照了什么。
REReddit
左侧栏 + 社区顶部 tab，层级浅（3 层内），wiki 与帖子分离。
DI
Discourse
分类 + 子分类两级，靠 tag 补充，无 megamenu。
V2
V2EX
节点即分类，单层，导航能力弱但足够轻。
LA
Laravel / Vue 官网
典型 megamenu：一级悬停展开多列面板，是本站菜单形态的直接参考。
验收指标
本模块交付时应当达到的量化目标。未达标即视为该模块未完成。
菜单展开到点击延迟≤ 100ms（面板无网络请求）
深链首屏 SSR 输出命中率 100%，正文不依赖客户端补齐
slug 页面组件按需加载单 chunk ≤ 60KB（gzip）
新增一个板块的工时数据 5 分钟 / 专属组件 0.5–1 天
避坑清单
竞品踩过的坑，以及本模块在实现时最容易犯的错误。
把菜单写死在组件里 → 每加一个板块都要发版，运营完全依赖开发。
为每个叶子都写一个近乎相同的 SFC → 组件爆炸，维护成本随层级指数上升。
用 404 兜底未实现的 slug → 用户点了菜单却看到报错，信任感受损。
移动端直接把 megamenu 塞进抽屉 → 四层以上的树无法阅读，必须做折叠树。
主题色只在 header 生效 → 页面出现两套强调色，破坏「独立站点」的整体感。