README

安装

在 composer.json 项目文件中添加稳定性指令和仓库

"repositories": [
    {
        "type": "git",
        "url": "git@github.com:randock/adminpress-bundle.git"
    }
],
"minimum-stability": "dev",
"prefer-stable": true,

安装包

$ composer require randock/adminpress-bundle

配置 Encore Webpack

$ yarn add sass-loader node-sass jquery --dev

从供应商文件夹复制 webpack 配置文件

$ cp vendor/randock/adminpress-bundle/src/Resources/webpack.config.js.dist ./webpack.config.js

或者将这些条目添加到现有的配置文件中

.addEntry('adminpress_js', './vendor/randock/adminpress-bundle/src/Resources/assets/adminpress.js')
.addStyleEntry('adminpress_css', './vendor/randock/adminpress-bundle/src/Resources/assets/adminpress.scss')
.addStyleEntry('adminpress_theme', './vendor/randock/adminpress-bundle/src/Resources/assets/scss/colors/blue.scss')
.autoProvidejQuery()

好的，现在您可以构建资源文件了

$ yarn build

要使用仪表板模板，创建一个继承基本模板的模板

{# templates/base.html.twig #}
{% extends '@RandockAdminPress/base.html.twig' %}

那么，看吧！

现在您可以看到基本布局的效果。

自定义

• 主题
• 区块
• 菜单
• 语言
• 右侧面板
• 个人菜单
• 通知列表

主题

在 webpack.config.js 中，将 adminpress_theme 条目替换为您想要的 scss 文件

.addStyleEntry('adminpress_theme', './vendor/randock/adminpress-bundle/src/Resources/assets/scss/colors/dark-red.scss')

区块

• page_content 是文档的内容，位于仪表板布局内部
• section_title 将是页面的可见标题
• header_css 和 header_js 位于 HTML 文档的头部部分
• inline_js 是关闭 body 标签之前最后一个区块
• header_extras 是放置所有所需元标签的正确位置
• header_title 是头部 <title> 标签的内容
• left_sidebar_user_profile 是左侧面板顶部的部分
• right_side_toggle 默认为空，是用于切换右侧面板的按钮或元素
• footer 很明显
• 其他区块，您可以在 基本模板 中找到

菜单

要创建左侧菜单，只需创建一个实现 MenuItemProviderInterface 的服务。它有一个名为 addItems 的方法，返回一个作为菜单根的 Knp\Menu\ItemInterface

然后，使用 randock_admin_press.main_menu_add_items 和 priority 标记服务。

# config/services.yaml

App\Menu\MenuItemProvider\MainMenuItemProvider:
    public: true
    tags:
        - { name: randock_admin_press.main_menu_add_items, priority: 10 }

语言菜单

您需要使用 {_locale} 参数配置路由，并告诉 adminpress-bundle 您希望使用哪些区域设置

# config/packages/admin_press.yaml

randock_admin_press:
  locales:
    - { code: en, name: US, icon: us }
    - { code: es, name: Spain }
    - { code: cn, name: China }
    - { code: in, name: India }

右侧面板

覆盖这两个 twig 块

{% block right_side_toggle %}
<button class="waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10">
    <i class="ti-settings text-white"></i>
</button>
{% endblock %}

{% block right_sidebar %}
    {% embed "@RandockAdminPress/components/right_sidebar.html.twig" %}
        {% block right_panel_title ''  %}
        {% block right_panel_body %}
        {% endblock %}
    {% endembed %}
{% endblock right_sidebar %}

个人菜单

按照主菜单的方式执行。在一个或多个服务中实现 MenuItemProviderInterface。这些菜单项将在个人菜单中由视觉分隔符分开

使用 randock_admin_press.profile_menu_add_items 标记服务并分配 priority。

# config/services.yaml

App\Menu\MenuItemProvider\AccountMenuItemProvider:
    public: true
    tags:
        - { name: randock_admin_press.profile_menu_add_items, priority: 20 }

通知列表

通知列表显示在顶部栏。您应该为每种类型的通知实现一个提供者。例如，您可以实现一个私信提供者和一个邮件提供者。它们应该实现 NotificationProviderInterface。优先级指示显示顺序

App\Notification\DmNotificationProvider:
    public: true
    tags:
        - { name: randock_admin_press.notification_provider, priority: 10 }

App\Notification\MailNotificationProvider:
    public: true
    tags:
        - { name: randock_admin_press.notification_provider, priority: 20 }

家族图标

主菜单

主菜单项接受一个名为 icon 的额外参数。此值应该是 mdi 图标名称，列于 Material Design Icons

$apps = $menu->addChild('Apps', ['extras' => ['icon' => 'bullseye']]);

国家国旗图标来自 Flag Icon CSS。如果没有指定图标，则使用区域代码来确定使用哪个

语言菜单

randock_admin_press:
  locales:
    - { code: en, name: US, icon: us }
    - { code: es, name: Spain }

个人菜单

与主菜单相同，但这里使用的是 Themify Icons

$menu->addChild('Logout', ['uri' => '/logout', 'extras' => ['icon' => 'power-off']]);

通知图标

Material Design Icons，与主菜单相同

开发

创建一个新的干净项目

$ composer create-project symfony/skeleton mybackend

安装依赖项

$ cd mybackend
$ composer require knplabs/knp-menu-bundle symfony/translation symfony/twig-bundle symfony/validator symfony/webpack-encore-bundle

在symfony工作项目的 lib/ 文件夹中克隆仓库

$ mkdir lib
$ cd lib
$ git clone git@github.com:randock/adminpress-bundle.git

将命名空间添加到类加载器

# composer.json

"autoload-dev": {
    "psr-4": {
        ...
        "Randock\\AdminPressBundle\\": "lib/adminpress-bundle/src/"
        ...
    }
},

在项目根目录下，重新构建自动加载类

# inside root project folder
$ composer dump-autoload

您可以在仓库文件夹中运行验证、代码修复和phpqa

$ composer install
$ ant validate
$ ant fix
$ ant phpqa

使项目运行

实例化bundle

# config/bundles.php

return [
    ...
    Randock\AdminPressBundle\RandockAdminPressBundle::class => ['all' => true],
    ...
];

然后，按照本文档开头所解释的，进行encore和模板配置。您应该更改入口文件的路径，将 ./vendor/randock 替换为 ./lib，并启用sass

.addEntry('adminpress_js', './lib/adminpress-bundle/src/Resources/assets/adminpress.js')
.addStyleEntry('adminpress_css', './lib/adminpress-bundle/src/Resources/assets/adminpress.scss')
.addStyleEntry('adminpress_theme', './lib/adminpress-bundle/src/Resources/assets/scss/colors/blue.scss')
.autoProvidejQuery()
.enableSassLoader()

运行开发服务器。您可能在docker容器中运行时遇到一些问题。为了获得更好的体验，请在本地机器上运行

$ yarn install
$ yarn dev-server