跳转到正文

构建内部管理工具

入门~12 分钟0/4 步骤

几分钟内交付内部工具

每个产品团队都有一堆"谁来给我们快速搭个管理页面"的积压需求。作为 PM,你不再需要排队等待。借助 AI 和一点 Tailwind,你就能为运营团队原型出他们真正需要的内部工具。

在本课中,你将构建一个简洁的管理面板:一个带操作按钮的数据表格,以及一个简单的"添加条目"表单。这是内部工具 UI 的核心模式,一旦你能自己画出来,就可以把一个可运行的原型交给工程师,而不是一个模糊的 Figma 稿。

保持务实。内部工具不需要漂亮——它们需要清晰、快速,并且让你的团队能顺畅使用。

操作说明

1

在一个居中的容器 div 内,添加标题为 "User Admin Panel" 的页面标题(h1)

提示: 使用:`<div class="max-w-4xl mx-auto p-8"><h1 class="text-3xl font-bold mb-6">User Admin Panel</h1></div>`

这段代码写在哪里?

<!-- Build your admin panel here -->

写在第 11 行——在那条注释下方,接在你已经写好的代码后面。

2

添加一个带有表头列(Name、Role、Actions)以及至少一行数据的数据表格

3

在表格行内添加编辑(Edit)和删除(Delete)操作按钮

4

添加一个带有文本输入框和提交按钮的"添加条目"表单

你的代码

html
13
1
2
3
4
5
6
7
8
9
10
11
12
13

实时预览

实时预览