使用 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。