前端 - 界面布局

ThinkAdmin 的前端是基于最新版本的 LayUI 构建，对其中部分样式有调整。 页面默认已经加载了所有 LayUI 官方组件，无需再次加载。 对于 LayUI 版本我们不建议使用者自己对 LayUI 进行升级，否则有可能造成云存储无法上传文件，通常情况下 ThinkAdmin 官方版本会保持相对较新的 UI 版本。 另外，ThinkAdmin 的第三方插件是基于 requirejs 功能加载，对于符合 AMD/CMD 标准的插件，请使用 require 引入，具体阅读 外部插件。

后台模板页面分为三种

1、完整异步页面（ 包含完整的页面头部、内容、脚本部分 )

这种模板页面一般用于无菜单的页面，如：后台系统登录页面，内容带分页的选择器 iFrame 页面。 具体使用时，需要继承admin/view/full.html模板，这种页面有加载顺序的，代码最好按模板块来摆放。 现成案例参见：文章选择器

{extend name="../../admin/view/full"}

{block name='style'}
<style>
    /* 自定义页面样式 */
    .header-body {
        height: 50px;
    }
</style>
{/block}

{block name='content'}
<!-- 页面内容部分 -->
<div class="iframe-pagination">
    <textarea name="content"></textarea>
</div>
{/block}

{block name='script'}
<script>
    // 脚本部分，默认加载了所有插件
    $(function () {
        // layui 表单组件初始化
        layui.form.render();
        // layui 组件动作初始化
        layui.element.render();
        // 异步加载富文本编辑器
        require(['ckeditor'], function () {
            // 初始化富文本编辑器
            window.createEditor('[name=content]', {height: 350});
        });
    });
</script>
{/block}

2、内容异步页面（ 页面只包含内容，不包含头部和脚本代码 )

这种模板页面一般用于有菜单的页面，支持页面标签名称设置及控制按钮，如：数据列表页面、独立表单页面等。 具体使用时，需要继承admin/view/main.html模板，这种页面没有加载顺序的，代码可以随便放置，都会有效果。 现成案例参见：文章列表

{extend name="../../admin/view/main"}

{block name="button"}
<!-- html 按钮区 -->
<button data-open='{:url("add")}' data-title="添加文章内容" class='layui-btn layui-btn-sm layui-btn-primary'>添加文章</button>
<button data-action='{:url("remove")}' data-rule="id#{key}" class='layui-btn layui-btn-sm layui-btn-primary'>删除文章</button>
{/block}

{block name='content'}
<div class="think-box-shadow table-block">
    <!-- html 内容 -->
</div>
{/block}

{block name='style'}
<!-- 样式区，也可能放 content 中，局部加载限制少 -->
<style>
    table {
    }
</style>
{/block}

{block name='script'}
<!-- 自定义脚本区，也可能放 content 中，局部加载限制少-->
<script>
    // layui 表单组件初始化
    layui.form.render();
    // layui 组件动作初始化
    layui.element.render();
    // 异步加载富文本编辑器
    require(['ckeditor'], function () {
        // 初始化富文本编辑器
        window.createEditor('[name=content]', {height: 350});
    });
</script>
{/block}

3、弹层模板页面（ 页面只包含内容，不包含头部和脚本代码 )

这种模板页面一般只用于弹层小面面显示，如：少量数据表单页面，少量数据内容页面。 现成案例参见：文章标签

<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
    <div class="layui-card-body padding-left-40">
        <label class="layui-form-item relative block">
            <span class="color-green font-w7">标签名称</span>
            <span class="color-desc margin-left-5">Mark Name</span>
            <input class="layui-input" required placeholder="请输入标签名称" name="name" value="{$vo.name|default=''}"/>
            <span class="help-block"><b>必填，</b>请填写分类名称（如：系统管理），建议字符不要太长，一般4-6个汉字</span>
        </label>
        <div class="layui-form-item relative block">
            <span class="color-green font-w7">标签描述</span>
            <span class="color-desc margin-left-5">Mark Remark</span>
            <label class="relative block">
                <textarea class="layui-textarea" placeholder="请输入文档描述" name="desc">{$vo.desc|default=''}</textarea>
            </label>
        </div>
    </div>
    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
</form>

<script>
    // 支持脚本代码
</script>

<style>
    /* 支持样式代码 */
</style>

以上为模板的简单应用，更多用法需要自己去挖掘。