Dashboard Admin

当用户想做管理后台、做 admin 面板、做数据管理界面时使用 — 生成带表格、图表和侧边栏的管理后台

lightpointventures 9a9eb32 1.6 KB Updated

File contents

搭建管理后台

帮用户快速生成一个功能完整的管理后台界面。

步骤

1. 了解需求

依次提问(每次一个):

问题 1:管理什么数据

这个后台用来管理什么?比如用户、订单、文章、产品。

问题 2:需要哪些页面

除了数据管理,还需要什么?

  • 数据概览(Dashboard 首页,带统计卡片和图表)
  • 数据表格(增删改查)
  • 表单页面(新增/编辑) 默认全部包含,有不需要的告诉我。

问题 3:技术栈

检查项目已有的前端框架。如果是新项目,推荐纯 HTML + Chart.js(最简单)或 React。

2. 生成管理后台

生成完整的后台界面:

  • 侧边栏 — 导航菜单,可折叠
  • 顶栏 — 搜索框、通知、用户头像
  • 概览页 — 统计卡片(总数、增长率)+ 图表
  • 列表页 — 数据表格,支持搜索、排序、分页
  • 详情/编辑页 — 表单,带字段验证

技术要求:

  • 响应式布局,移动端侧边栏可收起
  • 使用示例数据填充,替换方便
  • 配色专业(深色侧边栏 + 浅色内容区)

3. 验证

后台已生成,打开浏览器预览。 需要调整布局、加页面、或者连接真实数据吗?

完成后提示:

用 /api 生成后端接口,用 /database 连接数据库,让后台管理真实数据。

lightpointventures/claude-code-starter/tree/main/skills/dashboard-admin commit 9a9eb3241c

Frequently asked questions

npx skillmds@latest add lightpointventures/dashboard-admin