zxf/admin-template

基于 Laravel 11+ 的现代化管理后台模板

v0.0.1 2026-04-06 07:47 UTC

Requires

• php: >=8.2
• illuminate/support: ^11.0|^12.0
• illuminate/view: ^11.0|^12.0

Requires (Dev)

• orchestra/testbench: ^9.0|^10.0
• phpunit/phpunit: ^10.0|^11.0

MIT

• zxf

• admin
• template
• components
• laravel
• render
• blade
• laravel-admin
• zxf

README

基于 Laravel 11+ 和 PHP 8.2+ 的现代化管理后台模板包。

特性

• 丰富的 UI 组件 - 40+ 个可复用的 Blade 组件
• 多种布局 - 主布局、认证布局、错误布局
• 表单系统 - 表单构建器、多种输入组件、验证支持
• 表格系统 - 集成 DataTables，支持 AJAX、服务器端处理
• 图表系统 - 集成 ApexCharts，支持多种图表类型
• 菜单系统 - 无限级递归菜单，支持权限控制
• 通知系统 - 支持 SweetAlert2、Toastr、Notyf
• 主题系统 - 可扩展的主题机制
• 响应式设计 - 完美适配移动端
• 高度可配置 - 丰富的配置选项
• 完全中文化 - 内置中文语言包

安装

composer require zxf/admin-template

快速开始

1. 发布资源

# 发布配置文件
php artisan vendor:publish --tag=admin-template-config

# 发布视图（可选）
php artisan vendor:publish --tag=admin-template-views

# 发布语言文件
php artisan vendor:publish --tag=admin-template-lang

# 发布静态资源
php artisan vendor:publish --tag=admin-template-assets

2. 复制静态资源

将模板静态资源复制到 public 目录：

cp -r original-template/assets public/vendor/admin-template/

3. 基础使用

<?php

use zxf\AdminTemplate\Facades\AdminTemplate;

class DashboardController extends Controller
{
    public function index()
    {
        // 设置页面标题
        AdminTemplate::setTitle('仪表盘', '数据概览');
        
        // 添加面包屑
        AdminTemplate::addBreadcrumb('首页', route('admin.dashboard'));
        
        // 添加页面操作按钮
        AdminTemplate::addPageAction('导出', route('admin.export'), 'ti ti-download');
        
        return view('admin.dashboard');
    }
}

{{-- resources/views/admin/dashboard.blade.php --}}
<x-admin::layouts.master>
    <div class="row">
        <div class="col-md-4">
            <x-admin::widgets.stat-card
                title="总用户"
                :value="1234"
                icon="ti ti-users"
                color="primary"
                trend="+12%"
                trend-direction="up"
            />
        </div>
    </div>
    
    <x-admin::ui.card title="数据报表" collapsible>
        <x-admin::tables.datatable
            id="data-table"
            ajax-url="{{ route('api.data') }}"
            :columns="$columns"
            :server-side="true"
        />
    </x-admin::ui.card>
</x-admin::layouts.master>

组件列表

布局组件

组件	描述
<x-admin::layouts.master>	主布局（侧边栏+顶部导航+内容区）
<x-admin::layouts.auth>	认证布局（登录/注册）
<x-admin::layouts.error>	错误页面布局

表单组件

组件	描述
<x-admin::forms.input>	文本输入框
<x-admin::forms.select>	下拉选择框（支持 Select2）
<x-admin::forms.textarea>	文本域
<x-admin::forms.checkbox>	复选框
<x-admin::forms.radio>	单选框
<x-admin::forms.date>	日期选择器
<x-admin::forms.file>	文件上传

UI 组件

组件	描述
<x-admin::ui.card>	卡片（支持折叠/最大化/移除）
<x-admin::ui.button>	按钮
<x-admin::ui.alert>	警告框
<x-admin::ui.modal>	模态框
<x-admin::ui.tabs>	标签页
<x-admin::ui.accordion>	手风琴
<x-admin::ui.timeline>	时间线
<x-admin::ui.stepper>	步骤条
<x-admin::ui.progress>	进度条
<x-admin::ui.dropdown>	下拉菜单

表格组件

组件	描述
<x-admin::tables.datatable>	DataTables 表格

图表组件

组件	描述
<x-admin::charts.apexchart>	ApexCharts 图表

小部件组件

组件	描述
<x-admin::widgets.stat-card>	统计卡片

认证组件

组件	描述
<x-admin::auth.login-form>	登录表单
<x-admin::auth.register-form>	注册表单

表单构建器

use zxf\AdminTemplate\Form\FormBuilder;

$form = FormBuilder::make([
    'action' => route('admin.users.store'),
    'method' => 'POST',
])
->horizontal('col-sm-3', 'col-sm-9')
->text('name', '用户名', ['required' => true])
->email('email', '邮箱', ['required' => true])
->password('password', '密码')
->select('role', '角色', $roles, ['select2' => true])
->checkbox('is_active', '启用')
->file('avatar', '头像')
->textarea('bio', '简介', ['rows' => 4]);

return view('admin.form', compact('form'));

菜单配置

use zxf\AdminTemplate\Menu\MenuManager;

$menu = [
    MenuManager::header('主导航'),
    
    MenuManager::item('仪表盘', 'ti ti-dashboard', route('admin.dashboard')),
    
    MenuManager::submenu('用户管理', 'ti ti-users', [
        MenuManager::item('用户列表', route: 'admin.users.index'),
        MenuManager::item('角色管理', route: 'admin.roles.index'),
    ]),
    
    MenuManager::divider(),
    
    MenuManager::item('设置', 'ti ti-settings', route('admin.settings')),
];

admin_menu('sidebar', $menu);

辅助函数

// 获取模板实例
$template = admin_template();

// 设置页面标题
admin_page_title('用户管理', '管理系统用户');

// 添加面包屑
admin_breadcrumb('首页', route('dashboard'));
admin_breadcrumb('用户管理');

// 添加页面操作按钮
admin_add_action('添加用户', route('users.create'), 'ti ti-plus');

// 添加通知
admin_notify_success('操作成功！');
admin_notify_error('操作失败！');
admin_notify_warning('警告信息');
admin_notify_info('提示信息');

// 创建表单
$form = admin_form(['action' => route('store')])
    ->text('name', '名称')
    ->email('email', '邮箱');

自定义组件

创建组件

namespace App\View\Components\Admin;

use Illuminate\View\Component;

class CustomCard extends Component
{
    public function __construct(
        public string $title,
        public ?string $icon = null
    ) {}

    public function render()
    {
        return view('admin.components.custom-card');
    }
}

注册组件

use zxf\AdminTemplate\Contracts\ComponentRegistryInterface;

$registry = app(ComponentRegistryInterface::class);
$registry->register('widgets.custom', \App\View\Components\Admin\CustomCard::class);

使用组件

<x-admin::widgets.custom title="自定义卡片" icon="ti ti-star">
    内容
</x-admin::widgets.custom>

配置文件

// config/admin-template.php

return [
    'brand' => [
        'name' => '管理后台',
        'logo' => '/images/logo.png',
    ],
    
    'layout' => [
        'type' => 'default',
        'sidebar' => ['enabled' => true],
        'topbar' => ['enabled' => true],
    ],
    
    'menu' => [
        'default' => 'sidebar',
        'cache' => ['enabled' => true],
    ],
    
    'assets' => [
        'path' => 'vendor/admin-template',
        'css' => [...],
        'js' => [...],
    ],
];

文档

• 企业级使用指南 - 完整的功能使用文档
• 自定义组件开发指南 - 如何创建和扩展组件
• 组件参考手册 - 所有组件的详细说明

许可证

MIT License

作者

zxf

贡献

欢迎提交 Issue 和 Pull Request。