视图

在Dcat Admin中我们可以用admin_view函数渲染视图，这个功能借鉴了vue的设计思想，可以把HTML、CSS和JS代码写在同一个模板文件中，让代码分层更清晰更简洁易读，如

  1. <div class="my-class">...</div>
  3. <style>
  4.     .my-class {
  5.         color: blue;
  6.     }
  7. </style>
  9. <script require="@test1,@test2" init=".my-class">
  10.     $this.css({background: 'red'})
  11. </script>

在php中渲染这个视图

<?php

public function index(Content $content)
{
    return $content->body(admin_view('...'));
}

示例解析

上面示例中的代码，其实相当于下面的代码

<div class="my-class">...</div>

<?php

public function index(Content $content)
{
    admin_require_assets(['@test1', '@test2']);

    admin_style('
          .my-class {
                    color: blue;
            }
 ');

    admin_script(
        <<<JS
      Dcat.init('.my-class', function (\$this, id) {
        \$this.css({background: 'red'})
      });
    JS
    );

    return $content->body(view('...'));
}

很显然，使用admin_view渲染视图会让你的代码更简洁易读，关于Dcat.init以及script标签中的init和require属性的用法，请参考文档静态资源以及动态监听元素生成 (init)章节。

自定义页面

在Dcat Admin中构建自定义页面非常简单，可以参考如下两个例子

示例1

{tip} Dcat Admin构建的是一个单页应用，加载的JS脚本只会执行一次，所以初始化操作不能直接放在JS脚本中，应该使用Admin::script方法载入。

<?php

namespace App\Admin\Pages;

use Illuminate\Contracts\Support\Renderable;

class MyPage implements Renderable
{
    public function render()
    {
        return admin_view('admin.pages.my-page');
    }
}

视图admin.pages.my-page，注意视图代码里面不要包含<body>和<html>等标签

<div class="my-class">
  <h3>自定义页面演示</h3>
</div>

<!-- 
     引入页面所需的静态资源，这里会按需加载
    js脚本不能直接包含初始化操作，否则页面刷新后无效 
-->
{!! admin_js(['xxx/js/page.min.js']) !!}
{!! admin_css(['xxx/js/page.min.css']) !!}

<script init=".my-class">
    // js代码也可以放在模板里面
    console.log('所有JS脚本都加载完了!!!');

    $this.on('click', function () {
        ...
    });
</script>

使用

<?php

public function index(Content $content)
{
    return $content->body(new MyPage());
}

示例2

后台的仪表盘页面/admin，也可以看做是一个自定义页面，代码实现如下

<?php

public function index(Content $content)
{
    return $content
        ->header('Dashboard')
        ->description('Description...')
        ->body(function (Row $row) {
            $row->column(6, function (Column $column) {
                $column->row(Dashboard::title());
                $column->row(new Examples\Tickets());
            });

            $row->column(6, function (Column $column) {
                $column->row(function (Row $row) {
                    $row->column(6, new Examples\NewUsers());
                    $row->column(6, new Examples\NewDevices());
                });

                $column->row(new Examples\Sessions());
                $column->row(new Examples\ProductOrders());
            });
        });
}