MiniMax Agent写数据列表页面教程

使用 MiniMax Agent 可快速生成带搜索、排序、分页和响应式布局的员工信息管理列表页，支持导出、编辑与状态变更等 CRUD 功能，无需手写代码。

你需要快速生成一个带搜索、排序、分页和响应式布局的数据列表页面，但不想写一行HTML/CSS/JS代码，也不愿反复调试样式和交互逻辑。

创建基础数据列表页面

打开 MiniMax Agent 正式，确保已登录并完成实名认证。未认证账户无法调用完整前端渲染能力，页面可能缺失表格交互或导出功能。

在对话框中直接输入提示词：“生成一个员工信息管理列表页，字段包括姓名、部门、入职日期、职级、状态（在职/离职），要求支持按姓名搜索、按入职日期排序、每页显示10条、响应式适配手机。”

按下回车后，Agent 会自动进入 high-level 规划阶段，把技术选型（React + TypeScript + TanStack Table）、数据模拟方案（JSON mock）以及页面结构草图依次展示出来。这一步一定得保留，

。

看到“是否继续执行？”提示时，点击「确认」。页面将在90秒内生成并自动预览。

注入真实数据源

方法一：拖入 Excel 文件
把包含员工数据的 .xlsx 或 .csv 文件直接拖进 Agent 对话窗口。它会自动识别表头，匹配字段名（如“姓名”“入职日期”），并替换默认 mock 数据。注意：文件首行必须为中文列名，且不能含合并单元格，否则解析失败。

方法二：粘贴 JSON 数据
复制形如 [{"name":"张三","dept":"技术部","join_date":"2024-05-12","level":"P6","status":"在职"}] 的数组，在对话框中发送：“用以下数据替换当前列表数据：[粘贴内容]”。Agent 会校验字段类型，自动转换日期格式并映射到对应列。

方法三：连接 Supabase 表（需提前配置）
如果手头已经有 Supabase 项目，就到「凭证与基础信息」页面把 Project URL 和 Anon Key 取出来，然后直接告诉 Agent：“接入 Supabase 表 employees，字段映射同上”。接下来它会自动生成一个可用于生产环境的列表页，实时查询和增量加载这些能力也会一并配好。

添加导出与操作按钮

第一步：告诉 Agent 当前页面需要导出功能
在已生成的页面预览状态下，输入：“在表格顶部加一个‘导出 Excel’按钮，点击后下载当前筛选结果。”

第二步：追加行操作
接着说：“每行末尾加‘编辑’和‘停用’按钮，编辑弹窗需保留原字段值，停用按钮点击后将状态改为‘离职’并刷新列表。”

第三步：触发重生成
Agent 会自动复用原有布局结构，仅增量更新交互逻辑。整个过程无需重新构建页面，耗时约25秒。导出功能默认使用 SheetJS，不依赖后端接口；停用操作走本地状态更新，如需同步到数据库，需额外提供 API Endpoint。

这一步做完，页面就具备了真实业务系统所需的核心 CRUD 能力，可直接部署到 Vercel 或 Netlify。