VueLaravel后台启动器

guacpanel-tailwind — Vue 后台模板

作者 otatechie

GuacPanel 是一个基于 Laravel、Vue.js、Inertia.js 和 Tailwind CSS 的后台启动套件，内置认证、权限、审计、备份与实时通知等管理面板常用功能。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

1 个预览视图
作者提供的预览
作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

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

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

值得关注的模板亮点

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

01

内置审计日志、登录历史、在线会话终止与留痕的模拟登录，覆盖管理面板长期运行所需的安全能力

02

前端为可直接编辑的 Vue 文件，shadcn-vue 组件置于有文档契约的包装层之后，便于替换组件库

03

功能按文档化接缝移除，并有测试校验前端调用的路由与实际路由一致

04

提供 Cmd/Ctrl+K 命令面板，可搜索页面、操作和数据

05

集成 TanStack Table 服务端分页、排序、过滤、CSV 导出与批量操作

06

通过 Laravel Reverb 提供实时站内通知，可用环境变量切换演示模式

模板详细介绍

GuacPanel 是一个有明确取舍的 Laravel 后台启动套件，前端由 Vue.js、Inertia.js 和 Tailwind CSS 构成。它不满足于只提供登录和仪表盘，而是把管理面板在长期使用中需要的部分一并纳入：审计日志记录谁改了什么、登录历史、可终止的在线会话、受保护且留痕的模拟登录、定时备份、健康检查，以及通过 Cmd/Ctrl+K 唤起的命令面板，可搜索页面、操作和数据。

在结构上，它强调两点。前端是可直接编辑的 Vue 文件，而非由 PHP 渲染他人组件；shadcn-vue 组件被放在一层包装之后，并附有文档化的契约，使组件库可以在不触碰页面的前提下替换。其次，它按“可裁剪”来设计：功能沿文档化的接缝移除，并有测试将前端调用的每个路由与实际存在的路由做交叉校验，避免移除功能后问题在用户请求时才暴露。

功能覆盖认证与安全（Fortify 登录、免密码魔法链接、Socialite 社交登录、双因素认证、Spatie Permission 角色权限、会话与登录历史管理）、界面（shadcn-vue 包装层、明暗模式、响应式、命令面板、自动头像、主题设置）、数据可视化（Unovis 折线、面积、柱状、环形与迷你图）、数据表格（TanStack Table 服务端分页、排序、搜索过滤、CSV 导出与批量操作）、文件管理（FilePond 拖拽上传、图片预览、类型与大小校验）、系统功能（Spatie Backup 备份、Laravel Auditing 活动日志、安全事件监控）以及基于 Laravel Reverb 的实时站内通知。

使用前需注意：运行环境要求 PHP 8.3 及以上、Node.js 与 Composer；数据库需在 .env 中自行配置；种子数据会创建超级用户和普通用户两个默认账号，密码均为 password，仅适合本地起步，不应原样用于生产。演示图片、字体、图标等第三方素材需按各自许可核对，域名、托管、数据库、支付或 AI 等外部服务可能另行收费。

VueLaravel后台启动器

适合你的项目吗？

适用场景

  • 需要快速搭建带认证、权限和审计能力的 Laravel 后台管理面板
  • 希望在 Vue 单文件组件中直接维护后台界面，而不是使用 PHP 渲染的组件
  • 需要为管理后台加入数据表格、图表、文件上传和备份等常见模块
  • 需要在线会话管理、登录历史与操作留痕等安全相关功能
  • 作为可裁剪的起点，按项目需要移除不需要的功能模块

适合人群

  • 熟悉 Laravel、Vue.js 与 Inertia.js 的全栈开发者
  • 需要后台启动套件并计划自行裁剪功能的技术团队
  • 希望前端组件层可替换、页面与组件库解耦的项目
  • 需要审计、会话管理和备份等后台基础能力的中后台项目

上手与定制指南

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

  1. 1

    环境要求 PHP 8.3 及以上、Node.js 最新 LTS 与 Composer

  2. 2

    依次执行 composer install、npm install，复制 .env.example 为 .env 并生成应用密钥

  3. 3

    在 .env 中配置数据库连接，然后运行 php artisan migrate 和 php artisan db:seed

  4. 4

    分别运行 npm run dev 与 php artisan serve 启动开发环境，访问 http://localhost:8000

  5. 5

    种子数据创建 [email protected] 与 [email protected] 两个账号，密码均为 password，仅用于本地起步

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 社交登录依赖 Laravel Socialite，需自行在 Google、GitHub、Facebook、LinkedIn 等平台注册应用并配置客户端 ID 与密钥，属于外部服务账号要求。
  • 需自行准备并配置数据库连接（如 MySQL 的主机、端口、库名、用户名与密码），项目本身不提供数据库服务。
  • 实时通知依赖 Laravel Reverb WebSocket 服务，需单独启动该进程，部署时需额外运行并维护此服务。
  • 种子数据会创建 [email protected] 与 [email protected] 两个默认账号，密码均为 password，仅适合本地起步，不应原样用于生产环境。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Social Authentication with [Laravel Socialite](https://laravel.com/docs/socialite)

README 原文

Configure your database in `.env`

README 原文

Run locally with `php artisan reverb:start`

README 原文

Seeding creates two accounts (configurable via the `SEED_*` variables in `.env`)

README 原文
https://github.com/otatechie/guacpanel-tailwind/blob/main/LICENSE.mdhttps://github.com/otatechie/guacpanel-tailwind/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

记录的仓库更新时间
2026-08-31
截图检查日期
2026-10-01

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: dd5aa00ef4d1eb46e0895ff037d3f3b2baabc29eeabb488600bcf922a809be54

2026-10-01T02:30:43.834Z

来源文件 / 仓库
<div align="center">
  <img src="https://github.com/user-attachments/assets/d1256dda-6820-4e21-bcee-36c82ffab1fc" alt="GuacPanel Logo" width="200">
</div>

# GuacPanel - Laravel Vue Admin Starter Kit

[![Laravel](https://img.shields.io/badge/Laravel-v13.x-FF2D20?style=flat&logo=laravel)](https://laravel.com)
[![Vue.js](https://img.shields.io/badge/Vue.js-v3.x-4FC08D?style=flat&logo=vue.js)](https://vuejs.org)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-v4.x-06B6D4?style=flat&logo=tailwind-css)](https://tailwindcss.com)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/license/MIT)

An opinionated Laravel admin starter kit built with Vue.js, Inertia.js and Tailwind CSS.

Most starter kits give you authentication and a dashboard. This one gives you the
things an admin panel needs on day 90: an audit trail of who changed what, login
history, live sessions you can terminate, guarded and logged impersonation,
scheduled backups, health checks, and a `Cmd/Ctrl+K` palette that searches your
pages, actions and data.

Two things make it different from the alternatives:

- **You own the frontend.** These are Vue files you edit, not PHP that renders
  someone else's components. The shadcn-vue layer sits behind wrappers with a
  documented contract ([docs/ui-contract.md](docs/ui-contract.md)), so the
  component library is replaceable without touching a single page.
- **It is built to be cut down.** A starter kit is forked and stripped. Features
  come out along documented seams ([REMOVING.md](REMOVING.md)), and a test
  cross-checks every route the frontend calls against the ones that exist, so a
  removal that breaks something fails your build instead of a user's request.

<table>
  <tr>
    <td><img src="https://github.com/user-attachments/assets/fa319d6a-695f-4d6f-95ea-16b72d128647" alt="Dashboard" width="100%"></td>
    <td><img src="https://github.com/user-attachments/assets/7e32de33-8001-425f-a2bb-b08399005335" alt="Dark Mode" width="100%"></td>
  </tr>
  <tr>
    <td><img src="https://github.com/user-attachments/assets/0bb0354f-b565-40f9-9cc8-9787ecd9a632" alt="Settings" width="100%"></td>
    <td><img src="https://github.com/user-attachments/assets/e438b751-ad01-455a-93f4-04e37e1c9537" alt="Personalization" width="100%"></td>
  </tr>
</table>

## Features

- 🔐 **Authentication & Security**
    - Secure login with [Laravel Fortify](https://laravel.com/docs/fortify)
    - Passwordless magic link authentication
    - Social Authentication with [Laravel Socialite](https://laravel.com/docs/socialite)
        - [Google](https://console.developers.google.com/)
        - [GitHub](https://github.com/settings/applications/new) (Will work with local dev callback)
        - [Facebook](https://developers.facebook.com/) (Will work with local dev callback)
        - [LinkedIn](https://www.linkedin.com/developers/apps/) (Will work with local dev callback)
    - Two-factor authentication (2FA) via [Laravel Fortify](https://laravel.com/docs/fortify#two-factor-authentication)
    - Role-based permissions with [Spatie Permission](https://spatie.be/docs/laravel-permission)
        - Visual role and permission management
        - User role assignment interface
    - Session and security management
        - Active sessions overview
        - Login history tracking
        - Password policies enforcement

- 🎨 **Interface & Design**
    - [shadcn-vue](https://www.shadcn-vue.com) primitives behind a wrapper layer, so pages
      stay decoupled from the component library — see [docs/ui-contract.md](docs/ui-contract.md)
    - Dark/Light mode with system preference detection
    - Responsive design with [Tailwind CSS v4](https://tailwindcss.com/docs)
    - Command palette on `Cmd/Ctrl+K`, searching pages, actions and your data
    - Auto-generated avatars via [Laravel Avatar](https://github.com/laravolt/avatar)
    - Customizable theme settings

- 📊 **Data Visualization**
    - Interactive charts with [Unovis v1.6](https://unovis.dev)
        - Line, Area, Bar, Donut and Sparkline
        - Responsive and mobile-friendly
        - Themed by the app's design tokens, so charts follow light/dark mode
    - Shared legend, tooltip and axis formatting

- 📊 **Data Tables**
    - Modern tables with [@tanstack/vue-table v8](https://tanstack.com/table/v8/docs)
        - Server-side pagination
        - Column sorting
        - Search and filtering
        - CSV export and bulk actions
    - Row action menus with confirmation dialogs

- 📁 **File Management**
    - Drag & drop uploads with [FilePond v4](https://pqina.nl/filepond/docs/)
        - Image preview
        - File type validation
        - Size restrictions
    - Multiple file selection

- 🔄 **System Features**
    - Backup management via [Spatie Backup](https://spatie.be/docs/laravel-backup)
        - User-friendly dashboard
        - One-click backup creation
        - Backup download
    - Activity logging with [Laravel Auditing](https://laravel-auditing.com)
        - User action tracking
        - Data change history
    - Security event monitoring

- 🔔 **Real-time Notifications (Laravel Reverb)**
    - Live, in-app notifications via WebSockets (Reverb)
    - Demo mode toggle via `APP_NOTIFICATIONS_IN_DEMO_MODE`
    - Run locally with `php artisan reverb:start`

## Quick Start

### Prerequisites

- PHP >= 8.3
- Node.js & NPM (Latest LTS)
- Composer

### Installation

1. Clone the repository

```bash
git clone https://github.com/otatechie/guacpanel-tailwind.git
cd guacpanel-tailwind
```

2. Install dependencies

```bash
composer install
npm install
```

3. Set up environment

```bash
cp .env.example .env
php artisan key:generate
```

4. Configure your database in `.env`

```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database
DB_USERNAME=your_username
DB_PASSWORD=your_password
```

5. Run migrations and seed

```bash
php artisan migrate
php artisan db:seed
```

6. Start development servers

```bash
npm run dev
php artisan serve
```

**🎉 That's it!** Visit `http://localhost:8000` to see the app in action.

### Default login

Seeding creates two accounts (configurable via the `SEED_*` variables in `.env`):

| Account | Email | Password |
|---|---|---|
| Superuser | `[email protected]` | `password` |
| Regular user | `[email protected]` | `password` |

**🔗 External Resources**

- [Removing features](REMOVING.md) — what to delete, and the shared files to edit
- [UI component contract](docs/ui-contract.md) — the wrapper layer and its rules
- [GuacPanel Documentation](https://guacpanel.com)
- [Laravel Documentation](https://laravel.com/docs)
- [Fortify Documentation](https://laravel.com/docs/fortify)
- [Socialite Documentation](https://laravel.com/docs/socialite)
- [Vue.js Documentation](https://vuejs.org/guide/introduction.html)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [Inertia.js Documentation](https://inertiajs.com/)
- [TanStack Table Documentation](https://tanstack.com/table/v8)
- [FilePond Documentation](https://pqina.nl/filepond/)
- [Unovis Documentation](https://unovis.dev/docs/intro)
- [shadcn-vue Documentation](https://www.shadcn-vue.com/docs/introduction.html)

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

## License

[MIT License](https://opensource.org/license/MIT)
反馈内容错误

看看同类模板

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

vuestic-admin

vuestic-admin

Vuestic Admin is an open-source, ready-to-use admin template suite designed for rapid development, easy mainte…

Vue · 后台

vitesse

vitesse

🏕 Opinionated Vite + Vue Starter Template

Vue · 启动器

v3-admin-vite

v3-admin-vite

v3-admin-vite 是一个主打 AI 编程友好体验的 Vue3 后台管理模板，基于 Vue3、Vite、TypeScript、Element Plus 构建。

Vue · 后台

vue-typescript-admin-template

vue-typescript-admin-template

vue-typescript-admin-template 是一套面向后台管理界面的前端解决方案，基于 Vue 2.6、TypeScript 和 Element UI 构建。

Vue · 后台

vue-antd-admin

vue-antd-admin

Vue Antd Admin 是 Ant Design Pro 的 Vue 实现版本，目标是为中后台项目提供一套开箱即用的前端与设计解决方案。

Vue · 后台

coreui-free-vue-admin-template

coreui-free-vue-admin-template

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

Vue · 后台