布局

src/layout 是项目的布局核心目录，用于存放全局布局组件、公共结构以及与页面整体展示相关的逻辑。通过 setting.ts 配置文件可灵活定制布局行为。

📁 目录结构

src/
└── layout/
    ├── basic-layout/     # 基础登录页等使用的简单布局
    ├── components/       # 公共子组件（如 footer）
    ├── default/          # 默认主系统布局
    │   ├── components/   # 子组件：header, sidebar, setting 等
    │   └── index.vue     # 主布局容器
    └── user-layout/      # 用户中心等使用的布局
        ├── components/
        └── index.vue

⚙️ 布局配置（setting.ts）

const defaultSetting = {
    layout: 'header-sidebar-nav', // 布局模式：sidebar-nav / header-sidebar-nav
    showCrumb: true,              // 是否显示面包屑导航
    showLogo: true,               // 是否显示LOGO
    isUniqueOpened: false,        // 是否只展开一个一级菜单
    sideWidth: 200,               // 侧边栏宽度
    sideTheme: 'light',           // 侧边栏主题（light/dark）
    sideDarkColor: '#1C6FD7',     // 深色侧边栏背景色
    openMultipleTabs: false,      // 是否开启多标签页
    theme: '#2A7DE1',             // 主题颜色
    successTheme: '#67c23a',      // 成功提示色
    warningTheme: '#F95D47',      // 警告提示色
    dangerTheme: '#f56c6c',       // 危险提示色
    errorTheme: '#f56c6c',        // 错误提示色
    infoTheme: '#909399',         // 信息提示色
    showSetting: true,            // 是否展示设置按钮
    showHelp: true,               // 是否展示帮助文档按钮
    helpUrl: 'https://www.baidu.com' // 帮助文档地址
}
export default defaultSetting

🧩 核心布局说明

1. default

默认主布局，支持两种模式：

侧边栏拉通 (layout === 'sidebar-nav')：左侧菜单栏拉通 + 顶部和内容区域。
顶部拉通 (layout === 'header-sidebar-nav')：顶部拉通 + 左侧菜单和内容区域。

侧边栏拉通

顶部拉通

<template>
    <div class="layout-default">
        <!-- 左侧菜单拉通 + 右侧 header + main -->
        <div v-if="settingStore.layout === LayoutEnum.SIDEBAR_NAV" class="flex h-screen">
            <layout-sidebar />
            <div class="flex-1 flex-col">
                <layout-header />
                <layout-main />
            </div>
        </div>

        <!-- 顶部拉通 + 左侧菜单 + main -->
        <div v-if="settingStore.layout === LayoutEnum.HEADER_SIDEBAR_NAV" class="h-screen">
            <layout-header />
            <div class="flex min-w-0">
                <layout-sidebar />
                <layout-main />
            </div>
        </div>
    </div>
</template>

特性：

支持动态切换布局；
使用 Pinia 管理状态（如折叠菜单、主题、语言）；
自适应移动端（自动弹出抽屉菜单）；

2. basic-layout

基础布局，通常用于初始化密码，修改密码等无复杂导航且无需登录的场景。

basic-layout

<template>
    <div class="basic-layout-bg h-screen">
        <div class="navbar">
            <side-logo :isLight="true" />
            <language-drop-down />
        </div>
        <slot></slot>
    </div>
</template>

3. user-layout

用户中心专用布局，去除了侧边栏，保留顶部导航和内容区域。

user-center

<template>
    <div class="layout-default h-screen">
        <layout-header :showBreadcrumb="false" />
        <div class="app-main-container">
            <layout-main />
        </div>
    </div>
</template>

📊 总结对比表

布局类型	适用场景	特点
`default`	后台管理主界面	完整的菜单、头部、多标签页支持
`basic`	修改初始密码、忘记密码	极简布局，仅含LOGO和语言切换
`user`	用户中心	去除侧边栏，专注个人资料与操作

✅ 推荐使用方式

修改 @/config/setting.ts 中的配置即可快速定制布局风格；
所有布局组件高度解耦，便于扩展和复用；
支持响应式适配、主题切换、国际化等特性，适用于企业级中后台管理系统开发。

布局

On this page