技能介绍

要解决什么问题

Console Plugin 以 SPA 独立站点在本地跑 yarn dev 时，没有宿主 Console 自带的顶栏和侧栏。页面路由和模块入口在真环境里靠 Console 导航串联，纯本地预览时容易「只有页面、没有壳」，菜单结构也无法和团队约定对齐验收。

本技能面向的是：Mock 已接入的 V3 工程里，用配置文件驱动顶栏/侧栏，而不是从零装脚手架或写 layout。

技能如何工作

预览由 @ccfe-aicoding/navbar-mocker 的 DevNavigationShell 在 dev 进程里渲染：

顶栏：brandTitle、中间 Tab（主页、资源、你的模块等占位）、右侧装饰图标
侧栏：当前模块下的分组与可点页面入口

菜单结构来自项目根目录的 dev-navigation.config.yaml（文件名可在首次个性化时约定）。保存后 dev 期间自动热更新，一般不必改 React/Vue 页面代码。Agent 启用后会读 agent-guide.md，在改 YAML 前走 Q0–Q4 卡点（配置文件路径、品牌名、模块名、侧栏叶子名、可选占位 Tab 文案）。

日常最常改的是 label 和同层顺序；key、route 动结构需开发介入。标准流程是：本机改菜单 → 本机预览 → 部署 → 线上导航应与本机一致（配置文件建议进 Git）。

适用边界与注意点

不包含环境安装、模板 clone、首次 npm run dev；缺工程请用 SkillHub 技能 ccos-fe-appseed（app-seed v0.2.0+，S-Mock 时模板可已依赖 navbar-mocker）。
确认浏览器里是 Mock 顶栏+侧栏，且 dev 入口是 yarn dev，不是 dev:cp（CP 预览无 Mock 壳）。
顶栏占位 Tab、右侧购物车/通知仅视觉模拟，故意不可点；颜色、间距、侧栏宽度由 npm 包统一维护，YAML 改不了。
改了 YAML 侧栏没变：确认 dev 在跑、已保存，看终端 [dev-nav]，再刷新浏览器。

截图预览

使用场景

V3 Console Plugin 用 yarn dev 本地预览时，按验收单改 dev-navigation.config.yaml 里侧栏页面的 label 和同级顺序，保存后几秒内对照浏览器检查。
Mock 壳已显示顶栏侧栏后，走 Agent Q0–Q4 卡点，分别确定配置文件名、brandTitle、模块 Tab/侧栏标题与各叶子菜单名。
上线前在本机把分组 label 和菜单顺序调到与 Console 约定一致，再部署，避免线上导航与本地预览结构不一致。
团队把 dev-navigation.config.yaml 提交 Git 后，其他成员 clone 同分支 yarn dev，应看到相同的顶栏 Tab 与侧栏入口。