数据列表页创建与扩展｜AI Coding

在 Codex、Claude Code、Trae、Cursor 等 AI Coding 工具中，可以通过 rabetbase Skill 生成数据列表页，并将标准代码工程拉到本地继续开发。SmartList 是这项能力的技术名称，面向业务沟通统一称为“数据列表页”。

准备工作

开始前确保以下就绪（首次使用，对 rabetbase 说「帮我配置好」即可完成安装和登录）：

• 已选中目标应用
• 目标数据集已在平台上建好

不确定数据集是否就绪时，直接问 rabetbase：

找一下叫 <名称> 的数据集，给我它的 code

用一句话生成数据列表页（推荐）

不需要先理解页面工程。说清楚目标数据集和业务用途，Skill 会完成结构分析、方案预览、生成和结果返回。

1. 打开项目，唤起 rabetbase skill

在 AI Coding 工具中打开项目目录。安装 Skill 后，在对话中提出“生成数据列表页”或具体业务页面需求即可触发相应流程。

2. 直接说需求

生成「客户公司」对应的数据列表页

3. 跟着 skill 完成生成

skill 会自动按顺序执行，你确认每步结果即可：

• 查数据集字段和关联关系
• 先预览生成方案（这一步不写入）
• 确认后提交生成任务
• 轮询任务状态直到完成
• 返回数据列表页地址，以及配套的新建、编辑和详情表单。

4. 打开页面验收

结果里会给出页面地址，点开就是可用的数据列表页。

继续扩展：在列表顶部增加指标卡片

生成的数据列表页是可维护的标准代码工程。需要增加指标卡片、调整字段展示或补充业务交互时，直接描述目标效果；rabetbase Skill 会拉取工程、完成修改并推回平台。

示例提示词：

CRM 客户公司数据列表页的表格上放4个card，展示汇总数据，card可以点击，点击之后下面table内容跟card数据指标口径保持一致

其他提示词示例：

把 <数据集名> 数据列表页的「创建时间」列固定在最左，隐藏「备注」列
给 <数据集名> 数据列表页加一个按状态汇总的统计卡片
列表筛选条件加上「仅看本周」
……

常见问题

• 提示未登录 / 没有应用：对 rabetbase 说「帮我登录并配置好应用」。
• 生成一直不完成：让 rabetbase「查一下 <数据集名> 数据列表页的生成状态和报错」；多半是数据集字段或关联关系不完整。
• 关联数据带不出来：让 rabetbase「检查 <数据集名> 的关联关系和页面绑定是否一致」。
• 字段改了、页面没更新：已有页面让 rabetbase「把 <数据集名> 数据列表页同步到最新字段」，不要重新生成。