d2-03-main-menu

用途

本技能用于创建一个 Angular 主菜单/导航中心组件（MenuComponent），作为应用的默认落地页。菜单项会根据所选能力（capabilities）动态生成，适用于 CRUD 类应用的入口导航。

主要能力

• 根据实体名称（PascalCase，如 Product、Order、Employee）和所选能力动态生成菜单按钮。
• 支持的能力包括：
  • search：浏览/列出所有记录，生成 Browse 按钮，路径为 /<entity>
  • create：创建新记录，生成 Create 按钮，路径为 /<entity>/new
  • save：保存到数据库（与 create/edit 配合使用）
  • delete：删除记录
• 提供完整的 app.routes.ts 路由表，将菜单设为默认路由（path: ''），并为每个实体定义 search、create、edit 路由。
• 路由表由 d2-03（菜单）、d2-04（搜索）、d2-05（表单）共用。
• 组件使用 Angular standalone 模式，模板采用 Tailwind CSS 响应式卡片网格布局。

使用方式

使用前需要提供两项必填信息：

1. 实体名称（PascalCase，例如 Product、Order、Employee）
2. 可用能力（选择一个或多个：search、create、save、delete）

路由配置（app.routes.ts）：

import { Routes } from '@angular/router';
import { MenuComponent } from './pages/menu/menu.component';
import { <Entity>SearchComponent } from './pages/<entity>-search/<entity>-search.component';
import { <Entity>FormComponent } from './pages/<entity>-form/<entity>-form.component';

export const routes: Routes = [
  { path: '', component: MenuComponent },
  { path: '<entity>', component: <Entity>SearchComponent },
  { path: '<entity>/new', component: <Entity>FormComponent },
  { path: '<entity>/:id/edit', component: <Entity>FormComponent },
];

组件 TypeScript 核心逻辑：

generateMenuItems(entity: string, capabilities: string[]): MenuItem[] {
  const items: MenuItem[] = [];
  if (capabilities.includes('search')) {
    items.push({ name: 'Browse', icon: '📋', path: `/${entity}` });
  }
  if (capabilities.includes('create')) {
    items.push({ name: 'Create', icon: '✚', path: `/${entity}/new` });
  }
  return items;
}

模板使用 Tailwind CSS 类，包含响应式卡片网格（1-2-3 列）、能力标签、动态菜单按钮和空状态提示。

适用场景

• 需要为 Angular CRUD 应用创建统一入口导航页。
• 多个实体程序需要集中展示和管理入口。
• 与 d2-04 搜索页、d2-05 表单页配合使用，构成完整的 CRUD 流程。

限制

• 仅生成 search 和 create 对应的菜单按钮；save 和 delete 能力虽可声明，但不直接生成独立菜单项。
• 依赖 Angular 和 Tailwind CSS 环境。
• 路由表需与搜索页、表单页组件路径保持一致。
• 其他功能、收费、平台等信息暂未提供。