HTML后台

cleopatra — HTML 后台模板

作者 moesaid

Cleopatra 是一个基于 Tailwind CSS 与 Vite 构建的后台管理面板模板，提供多套仪表盘、明暗主题和大量预置页面，使用原生 JavaScript 与 Handlebars 组织界面。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

提供 Analytics、E-commerce、Crypto、Mission Control 四套仪表盘模板

02

包含 47 个以上页面与 15 个以上 UI 组件，覆盖认证、应用、表单等常见后台场景

03

支持浅色与深色两种主题模式，并提供 10 种强调色

04

使用原生 JavaScript 与 Handlebars，不绑定 React、Vue 或 Angular 等框架

05

导航为类似单页应用的切换方式，页面跳转不整页刷新

06

采用 Vite 构建，样式基于 Tailwind CSS，图表使用 ApexCharts 与 Chart.js

模板详细介绍

Cleopatra 是 moesaid 在 GitHub 上开源的 HTML 后台管理模板，采用 MIT 许可。它使用 Vite 作为构建工具和开发服务器，样式基于 Tailwind CSS，模板部分由 Handlebars 处理，图表使用 ApexCharts 与 Chart.js。项目刻意采用原生 JavaScript，不依赖 React、Vue 或 Angular 等前端框架，因此可以配合任意后端或静态托管使用。

模板包含 4 套仪表盘（Analytics、E-commerce、Crypto、Mission Control）、47 个以上页面（涵盖认证、应用、组件、表单等）以及 15 个以上 UI 组件（按钮、卡片、表格、图表、模态框等）。界面支持浅色与深色两种模式，并提供 10 种强调色可选。导航采用类似单页应用的切换方式，页面之间过渡不整页刷新。

代码按 layout、ui、widgets、charts 等目录组织，README 中另附 ARCHITECTURE.md 与 COMPONENT_GUIDE.md 说明项目结构和组件用法。需要注意的是，仓库中的演示图片、字体、图标等第三方素材需单独核对其许可，不能仅凭代码的 MIT 许可判断；模板本身是静态前端界面，不包含后端、数据库或业务逻辑。

HTML后台

适合你的项目吗？

适用场景

  • 为管理后台或数据面板搭建前端界面骨架
  • 在无前端框架的项目中快速获得成套的后台页面与组件
  • 需要同时提供浅色与深色主题的后台产品原型
  • 配合 Laravel、Django、Rails、Node 或静态托管等任意后端使用

适合人群

  • 希望用原生 JavaScript 构建后台界面的开发者
  • 需要现成仪表盘与页面模板来缩短界面搭建时间的项目
  • 不打算引入 React、Vue 或 Angular 的前端项目
  • 需要多套仪表盘样式与明暗主题切换的后台产品

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    克隆仓库后进入目录执行 npm install 安装依赖

  2. 2

    运行 npm run dev 启动开发服务器，默认访问 http://localhost:8081

  3. 3

    项目结构说明见 ARCHITECTURE.md，组件创建与使用见 COMPONENT_GUIDE.md

  4. 4

    演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文
https://github.com/moesaid/cleopatra/blob/main/LICENSEhttps://github.com/moesaid/cleopatra/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 95 / 100
技术栈
HTML
网站类型
后台
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-02-24
截图检查日期
2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: ef827ab5173a4b5c05fa8a84d2ec788fccf1863b52806220f68c77f7ae8f54af

2026-10-02T07:15:22.494Z

来源文件 / 仓库
<div align="center">
  
  <h1>Cleopatra</h1>
  <p><strong>Modern Admin Dashboard Template</strong></p>
  
  [![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://lbesson.mit-license.org/)
  [![Vite](https://img.shields.io/badge/Vite-5.0-646CFF.svg)](https://vitejs.dev/)
  [![Tailwind CSS](https://img.shields.io/badge/Tailwind-4.0-38B2AC.svg)](https://tailwindcss.com/)
  
  <p>A beautifully designed, production-ready admin dashboard built with <strong>Tailwind CSS v4</strong> and <strong>Vite</strong>.</p>
  
  [Live Demo](https://moesaid.github.io/cleopatra/)
</div>

---

## Version 2.0 - Complete Rewrite

Version 2.0 is a **complete rewrite** from the ground up. The entire codebase has been rebuilt with a modern architecture, improved developer experience, and better performance.

**What's New:**
- Rebuilt with Tailwind CSS v4 and Vite
- 4 unique dashboard templates
- 10 accent colors + Light/Dark themes
- SPA-like navigation without page reloads
- Widget-based component architecture
- Redesigned landing page

**Documentation:**
- [ARCHITECTURE.md](ARCHITECTURE.md) - Project structure and architecture rules
- [COMPONENT_GUIDE.md](COMPONENT_GUIDE.md) - How to create and use components

---

## Preview

<div align="center">
  <img src="public/images/demo_1.png" alt="Analytics Dashboard" width="100%">
</div>

### 4 Dashboard Templates

| Analytics | E-commerce |
|-----------|------------|
| ![Analytics](public/images/demo_1.png) | ![E-commerce](public/images/demo_2.png) |

| Crypto | Mission Control |
|--------|-----------------|
| ![Crypto](public/images/demo_3.png) | ![Mission Control](public/images/demo_4.png) |

---

## Features

- **4 Dashboard Templates** - Analytics, E-commerce, Crypto, Mission Control
- **2 Themes** - Light & Dark mode
- **47+ Pages** - Authentication, Apps, Components, Forms, and more
- **15+ Components** - Buttons, Cards, Tables, Charts, Modals, etc.
- **SPA Navigation** - Smooth transitions without page reloads
- **Responsive Design** - Works on all devices
- **Modern Stack** - Vite, Tailwind CSS v4, Handlebars

---

## Why Pure JavaScript?

Cleopatra is built with vanilla JavaScript intentionally:

- **Zero Framework Lock-in** - Use it with any backend (Laravel, Django, Rails, Node, or static)
- **Faster Load Times** - No framework runtime overhead
- **Easy to Understand** - Simple, readable code without framework abstractions
- **Future Proof** - Vanilla JS never goes out of style
- **Lightweight** - Smaller bundle size means faster page loads
- **Full Control** - No hidden magic, you own every line of code

This makes Cleopatra perfect for developers who want a clean starting point without the complexity of React, Vue, or Angular.

---

## Quick Start

```bash
# Clone the repository
git clone https://github.com/moesaid/cleopatra.git

# Navigate to directory
cd cleopatra

# Install dependencies
npm install

# Start development server
npm run dev
```

Open [http://localhost:8081](http://localhost:8081)

---

## Project Structure

```
src/
├── components/
│   ├── layout/      # App shell, header, sidebar
│   ├── ui/          # Buttons, cards, alerts, modals
│   ├── widgets/     # Dashboard widgets, charts, stats
│   └── charts/      # ApexCharts & Chart.js components
├── pages/           # Route files
├── styles/          # Global styles & Tailwind config
└── js/              # JavaScript modules
```

---

## Customization

### Theme Colors

Choose from 10 accent colors:

| | | | | |
|---|---|---|---|---|
| Black (default) | Blue | Green | Orange | Yellow |
| Olive | Slate | Cyan | Purple | Rose |

### Theme Modes

- **Light Mode** - Clean white interface
- **Dark Mode** - Easy on the eyes

---

## Tech Stack

| Tool | Purpose |
|------|---------|
| **Vite** | Build tool & dev server |
| **Tailwind CSS v4** | Utility-first styling |
| **Handlebars** | Template partials |
| **ApexCharts** | Interactive charts |
| **Chart.js** | Additional chart types |

---

## License

MIT © [Mohamed Said](https://moesaid.com)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

gentelella

gentelella

Free admin dashboard template — vanilla JS, SCSS, Vite 8. No Bootstrap, no jQuery.

HTML · 后台

coreui-free-bootstrap-admin-template

coreui-free-bootstrap-admin-template

Free Bootstrap Admin & Dashboard Template Built for AI-Assisted Development

HTML · 后台

dashboards

dashboards

Responsive dashboard templates 📊✨

HTML · 后台

SB Admin 2

SB Admin 2

SB Admin 2 是 Start Bootstrap 推出的开源后台模板，基于 Bootstrap 构建，整体风格偏向经典管理界面。

HTML · 后台

Adminator-admin-dashboard

Adminator-admin-dashboard

Adminator is easy to use and well design admin dashboard template with dark mode for web apps, websites, servi…

HTML · 后台

SB Admin

SB Admin

SB Admin 是 Start Bootstrap 推出的开源后台管理模板，基于 Bootstrap 构建，定位是简洁、实用的管理界面。

HTML · 后台