layout 自定义布局开发

平台端开发布局风格

文件位置：admin/src/layout/

插件开发布局风格

文件位置：admin/src/addon/插件名称/layout/

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

创建一个自定义布局并将其保存到 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>

创建layout.json文件，配置自定义布局的信息：

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

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

平台端可以给每个应用设置布局:在admin端打开配置--布局设置--点击应用后的设置，选择开发好的布局方式，点击确认，再次进入该单应用的站点布局就会修改成功。