SuperAPI AI 工具集

d2-04-search-delete-page

前端与建站

查看项目

更新于 10-16 02:41

技能介绍

用途

该技能用于在 up-app 项目中构建某个实体的搜索/列表页面,通过实体服务加载并展示全部记录。页面功能会根据在 d2-03-main-menu 中选择的能力(capability)进行适配,支持搜索(列表)、编辑,以及可选的删除。

主要能力

  • 列表展示:使用 signal<Entity[]>([]) 存储条目列表,初始化时调用 <entity>Service.getAll() 并通过 this.items.set(data) 更新。
  • 编辑:每行始终包含 Edit 按钮,点击后导航至 /<entity>/<id>/edit。
  • 删除(可选):仅当选择删除能力时显示 Delete 按钮,点击后弹出确认框,确认后调用 <entity>Service.delete(id) 并在成功后更新 signal。
  • 新增(可选):若启用创建能力,头部栏显示 Add 按钮,导航至 /<entity>/new。
  • 返回:提供 Back 按钮,导航至首页/菜单(/)。
  • 空状态:当列表为空时显示提示,若启用创建能力则提供创建链接,否则提示联系管理员。

使用方式

该技能生成一个独立的 Angular 组件,文件路径为 up-app/src/app/pages/<entity>-search/<entity>-search.component.ts。组件使用 CommonModule,通过构造函数注入 Router 和 <Entity>Service。能力标志 hasCreateCapability 和 hasDeleteCapability 根据 d2-03 的选择设置,设为 false 时对应按钮不显示。模板中使用 @for 配合 track item.id 遍历列表,表格列需替换为实体实际属性名,可选字段使用 || "-" 显示占位符。路由已在 d2-03-main-menu 中定义,本技能直接使用这些路由进行导航。

适用场景

适用于需要为实体快速生成搜索/列表页面的 Angular 应用开发场景,尤其适合基于能力开关动态调整界面功能的 CRUD 应用。

限制

该技能依赖 d2-03-main-menu 中定义的路由和能力选择。表格列、实体属性名、服务方法等需根据实际项目替换。删除操作使用浏览器原生 confirm 弹窗。具体收费、价格、平台支持等信息暂未提供。