前端 - 界面布局

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: 邹景立