技能介绍

要解决什么问题

Console Plugin 以 SPA 独立站点在本地跑 npm run dev 时，没有宿主 Console 自带的顶栏和侧栏。你只能看到业务页面本身，很难对照线上「模块 Tab + 侧栏分组」做菜单验收，也不方便让产品或访客在 dev 环境里点菜单走一遍流程。

本技能面向的是：Mock 壳已经接入、dev 在跑 的场景。它不负责装环境、拉 V3 模板或首次集成 layout（那一步看 implementation.md，立项用 ccos-fe-appseed）。

技能如何工作

菜单结构来自项目根目录的 dev-navigation.config.yaml（文件名可在首次个性化卡点里约定）。Mock 会渲染：

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

日常改菜单的流程很固定：确认 dev 在跑 → 编辑 YAML → 保存 → 浏览器几秒内热更新（不行再刷新）。常见可改项：

| 意图 | 字段 |
|------|------|
| 显示名 | label |
| 同级顺序 | 整段 - key: ... 上下移动 |
| 顶栏占位 Tab 文案 | 占位项的 label |

启用 Skill 后，Agent 会按 agent-guide.md 做 Q0–Q4 卡点（配置文件路径、Default 还是个性化、brandTitle、模块根名、侧栏叶子名等），避免把顶栏品牌、模块 Tab 和侧栏菜单名混在一起。主题与资源走 dev-navigation.theme.yaml；v1.3+ 顶栏右侧 Select 可在 Mock / Arco 主题间切换。

边界与注意点

占位 Tab（主页、资源）和右侧购物车、通知等 仅视觉模拟，故意不可点。
颜色、间距、侧栏宽度 不能靠菜单 YAML 改，需主题接入（Q-Theme / Q-Assets）或找前端。
日常 不要改 key、route，否则容易和路由不一致；只动 label 和顺序时一般不需要懂业务代码。
dev-navigation.config.yaml 应提交 Git，团队共享同一份菜单；标准流程是本机改菜单 → 本机预览 → 部署后线上导航与本机一致。
预览入口要用常规 dev（不是 dev:cp），CP 预览无 Mock 壳。