设计导航架构Skill design-navigation

---

名称: 设计导航 描述: 设计导航架构，包括菜单、面包屑和巨型菜单。生成具有可访问性的结构化导航。 参数提示: [–type primary|footer|mega|breadcrumb|all] [–format yaml|json|html] 允许工具: Read, Glob, Grep, Task, Skill, AskUserQuestion

设计导航命令

设计一个全面的导航系统，包括菜单、面包屑和导航 API。

用法

/cms:design-navigation --type primary
/cms:design-navigation --type mega --format json
/cms:design-navigation --type all

导航类型

• primary: 主站点导航
• footer: 页脚链接结构
• mega: 多列下拉菜单
• breadcrumb: 分层路径导航
• all: 完整导航系统

工作流程

步骤 1: 解析参数

从命令中提取导航类型和输出格式。

步骤 2: 收集需求

使用 AskUserQuestion 来理解：

• 站点的主要结构是什么？
• 导航应达到多深？
• 是否有巨型菜单需求？
• 应使用哪些移动端模式？

步骤 3: 调用技能

调用相关技能进行分析：

• navigation-architecture - 导航模式
• page-structure-design - 页面层次结构
• url-routing-patterns - URL 结构

步骤 4: 生成导航设计

主导航：

导航:
  名称: MainNav
  类型: primary
  最大深度: 2

  项目:
    - 标签: 首页
      网址: /
      图标: home

    - 标签: 产品
      网址: /products
      子项:
        - 标签: 所有产品
          网址: /products
        - 标签: 分类
          网址: /products/categories
        - 标签: 新品上市
          网址: /products/new

    - 标签: 关于
      网址: /about
      子项:
        - 标签: 我们的故事
          网址: /about/story
        - 标签: 团队
          网址: /about/team
        - 标签: 职业
          网址: /about/careers

    - 标签: 联系
      网址: /contact

  设置:
    移动端断点: 768
    移动端模式: hamburger
    粘性: true
    首页透明: true

巨型菜单：

巨型菜单:
  名称: ProductsMega
  触发器: Products
  布局: columns

  列:
    - 标题: 按类别购物
      项目:
        - 标签: 电子产品
          网址: /products/electronics
          图片: /images/nav/electronics.jpg
        - 标签: 服装
          网址: /products/clothing
          图片: /images/nav/clothing.jpg
        - 标签: 家居与园艺
          网址: /products/home-garden

    - 标题: 特色
      项目:
        - 标签: 畅销产品
          网址: /products/best-sellers
          徽章: Popular
        - 标签: 促销商品
          网址: /products/sale
          徽章: Up to 50% off

    - 标题: 快速链接
      项目:
        - 标签: 礼品卡
          网址: /gift-cards
        - 标签: 店铺查找器
          网址: /stores

  促销:
    标题: 夏季促销
    描述: 部分商品高达 50% 折扣
    图片: /images/promo/summer-sale.jpg
    网址: /products/sale
    行动号召: 立即购物

面包屑配置：

面包屑:
  分隔符: /
  显示首页: true
  首页标签: 首页
  显示当前页: true
  最大长度: 5
  中间截断: true

  架构:
    启用: true
    类型: BreadcrumbList

  模式:
    - 路径: /products/:category/:product
      模板:
        - 标签: 首页
          网址: /
        - 标签: 产品
          网址: /products
        - 标签: "{category.name}"
          网址: /products/{category.slug}
        - 标签: "{product.name}"
          网址: null  # 当前页面

    - 路径: /blog/:year/:month/:slug
      模板:
        - 标签: 首页
          网址: /
        - 标签: 博客
          网址: /blog
        - 标签: "{year}"
          网址: /blog/{year}
        - 标签: "{post.title}"
          网址: null

步骤 5: 生成实现

提供 EF Core 导航模型：

public class NavigationMenu
{
    public Guid Id { get; set; }
    public string Name { get; set; }
    public string Type { get; set; } // primary, footer, mega
    public List<NavigationItem> Items { get; set; }
    public NavigationSettings Settings { get; set; }
}

public class NavigationItem
{
    public Guid Id { get; set; }
    public string Label { get; set; }
    public string Url { get; set; }
    public string Icon { get; set; }
    public string Target { get; set; }
    public int SortOrder { get; set; }
    public Guid? ParentId { get; set; }
    public List<NavigationItem> Children { get; set; }
    public bool IsVisible { get; set; }
    public string[] Roles { get; set; } // 基于角色的可见性
}

public class NavigationSettings
{
    public int MobileBreakpoint { get; set; }
    public string MobilePattern { get; set; }
    public bool Sticky { get; set; }
    public bool TransparentOnHome { get; set; }
}

步骤 6: 生成 API 端点

// GET /api/navigation/{name}
[HttpGet("{name}")]
public async Task<ActionResult<NavigationDto>> GetNavigation(
    string name,
    [FromQuery] string locale = "en")
{
    var navigation = await _navigationService
        .GetByNameAsync(name, locale);

    if (navigation == null)
        return NotFound();

    return Ok(navigation);
}

// 响应结构
public class NavigationDto
{
    public string Name { get; set; }
    public string Type { get; set; }
    public List<NavigationItemDto> Items { get; set; }
}

public class NavigationItemDto
{
    public string Label { get; set; }
    public string Url { get; set; }
    public string Icon { get; set; }
    public string Target { get; set; }
    public bool IsActive { get; set; }
    public List<NavigationItemDto> Children { get; set; }
}

可访问性要求

导航必须符合 WCAG 2.1 AA 标准：

要求	实现
键盘导航	Tab 顺序、箭头键、Enter/Space
ARIA 标签	aria-label, aria-expanded, aria-current
焦点管理	可见焦点指示器
跳过链接	“跳转到主要内容”链接
移动端触摸	触摸目标最小 44x44 像素

相关技能

• navigation-architecture - 导航模式
• page-structure-design - 页面层次结构
• url-routing-patterns - URL 模式