如何开发自定义布局后台布局

如何开发自定义布局后台布局

开发自定义布局，需在admin/src/addon/插件/layout文件夹下创建inedx.vue、layout.json的文件。

1、创建一个自定义布局并将其保存到layout/index.vue:

<template>
    <div class="min-w-[1200px]">
        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <el-aside width="200px">Aside</el-aside>
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>

2、在layout.json中定义布局的基本信息

{
   "layout": "shop", // 布局标识与插件key保持一致
   "cover": "/static/resource/images/system/layout_default.png" // 布局缩略图
}

下图为缩略图应用场景，缩略图大小宽高为 178 / 128

3.在admin端打开配置--布局设置--选择插件应用后的设置，选择开发好的布局方式，点击确认，再次进入该单应用的站点布局就会修改成功。