前端 - 界面布局

ThinkAdmin 的前端框架是基于最新版本的 LayUI 构建,我们对部分样式进行了调整。默认情况下,页面已经加载了所有 LayUI 官方组件,因此无需再次加载。 对于 LayUI 的版本,我们不建议用户自行升级。因为自行升级可能导致云存储无法上传文件。通常情况下,ThinkAdmin 官方版本会保持相对较新的 LayUI 版本,以确保与最新技术和标准保持一致。

此外,ThinkAdmin 的第三方插件是基于 requirejs 功能加载的。对于符合 AMD/CMD 标准的插件,请使用 require 函数进行引入。具体操作可参考“外部插件”部分的文档说明。 遵循这些指南将帮助您确保 ThinkAdmin 前端的稳定性和兼容性,并充分利用 LayUI 和其他插件的功能。

后台模板页面分为三种:

1、完整异步页面( 完整的页面 HTML 代理,含头部、内容、脚本部分 )

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

eg. 系统后台使用 data-iframe 方式打开或独立页面,若 full.html 主模板不存在,可以从 admin 应用视图复制过来。

{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 模板,这种页面没有加载顺序的,代码可以随便放置,都会有效果。 现成案例参见:商品编辑

eg. 系统后台使用 data-open 方式打开,若 main.html 主模板不存在,可以从 admin 应用插件视图复制过来。

{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、弹层模板页面( 页面只包含内容,不包含头部和脚本代码 )

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

eg. 系统后台使用 data-modal 方式打开的弹框子页面。


<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>

以上为模板的简单应用,更多用法需要自己去挖掘,建议参考官方案例代码。

Last Updated:
Contributors: 邹景立