# Dashboard Admin

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

- Skill: `lightpointventures/dashboard-admin` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lightpointventures/dashboard-admin`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lightpointventures/dashboard-admin/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lightpointventures (https://skillmd.com/u/lightpointventures)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lightpointventures/dashboard-admin

---


# 搭建管理后台

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

## 步骤

### 1. 了解需求

依次提问（每次一个）：

**问题 1：管理什么数据**
> 这个后台用来管理什么？比如用户、订单、文章、产品。

**问题 2：需要哪些页面**
> 除了数据管理，还需要什么？
> - 数据概览（Dashboard 首页，带统计卡片和图表）
> - 数据表格（增删改查）
> - 表单页面（新增/编辑）
> 默认全部包含，有不需要的告诉我。

**问题 3：技术栈**
> 检查项目已有的前端框架。如果是新项目，推荐纯 HTML + Chart.js（最简单）或 React。

### 2. 生成管理后台

生成完整的后台界面：

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

技术要求：
- 响应式布局，移动端侧边栏可收起
- 使用示例数据填充，替换方便
- 配色专业（深色侧边栏 + 浅色内容区）

### 3. 验证

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

完成后提示：
> 用 /api 生成后端接口，用 /database 连接数据库，让后台管理真实数据。