基于 Vue + Element Plus + TypeScript 的后台管理系统 —— Layout 页面布局和主题定制

在完成后台管理系统的基本项目结构搭建后，本文进一步探讨其核心页面结构——布局（Layout）的实现。典型后台系统的布局结构通常包含三大核心元素：头部区域（Header）、侧边栏（Sidebar） 以及 主内容区域（Main Content）。此外，本文还将结合主题定制与暗黑模式切换机制进行综合设计，以满足系统在美观性与个性化方面的多样化需求。源码地址：Github

---

一、前置知识：主题机制与暗黑模式

1.1 主题机制

Element Plus 提供了灵活的主题定制能力。其核心在于通过修改诸如 el-color-primary 等 CSS 变量，以实现全局主题色的统一控制。本文采取 JavaScript 动态生成颜色变体的方式，并将其挂载至 html 元素，从而达到实时主题切换的目的。

需要注意的是，对于样式控制更为精细的业务场景，可通过自定义 CSS 变量方式进行补充。

补充说明：CSS 变量既可挂载至 html 元素，也可挂载至伪元素 :root。实践中，考虑到 JavaScript 操作的便利性，本文将主题变量挂载于 html 元素，静态文件挂载到:root伪元素上。

对应的目录机构如下

srs/
├── styles/                # 样式文件目录
│   ├── _reset.css         # 样式重置文件
│   └── index.css          # 全局样式入口
│   └── var.css            # elementPlus变量覆盖和其他自定义css变量(vite.config.ts配置)
└── utils/                 # 工具函数目录
    └── theme.ts           # 主题相关工具函数

参考阅读：解析 Element Plus SCSS 变量：Sass 特性的精妙运用

1.2 暗黑模式切换

Element Plus 的暗黑模式启用方式较为简洁，仅需如下两步操作：

1. 向 html 元素添加 dark 类名；

2. 引入暗黑主题样式文件：

   import 'element-plus/theme-chalk/dark/css-vars.css'
   

---

二、布局结构实现

2.1 基础布局结构

项目采用典型的经典布局形式，如下图所示：

对应的源码目录结构如下：

src/layout/
├── index.vue                       // 布局入口文件
└── components/
    ├── AppMain/                    // 主内容区域
    │   └── index.vue
    ├── Logo/                       // 系统 Logo（图标 + 文字）
    │   └── index.vue
    ├── NavBar/                     // 顶部导航栏
    │   ├── index.vue
    │   └── components/
    │       └── BreadCrumb.vue     // 面包屑导航
    ├── SettingsDrawer/            // 系统设置抽屉弹窗
    │   └── index.vue
    ├── SideBar/                   // 左侧菜单栏
    │   └── index.vue
    └── TagsView/                  // 标签页组件（多页签）
        └── index.vue

注：本文暂未涉及多层级菜单、动态菜单与设置持久化等进阶功能。源码使用ElementPlus示例代码就可以

---

2.2 主题色设置与暗黑模式实现

为了实现主题个性化功能，本文引入 Element Plus 的 ColorPicker 组件用于选择主色调（即 el-color-primary），并借助 AI 工具生成该颜色的多组变体。随后，通过 vueuse 提供的 useCssVar 工具函数，动态地将这些颜色变量应用于页面。

主题色变体生成与应用

function generateThemeColors(primary: string) {
  const colors: Record<string, string> = { primary }

  // 生成浅色变体
  for (let i = 1; i <= 9; i++) {
    const factor = i * 0.1
    colors[`primary-light-${i}`] = adjustBrightness(primary, factor)
  }

  // 生成深色变体
  colors['primary-dark-2'] = adjustBrightness(primary, -0.2)

  return colors
}

export function applyTheme(color: string) {
  const el = document.documentElement
  const colors = generateThemeColors(color)
  Object.entries(colors).forEach(([key, value]) => {
    useCssVar(`--el-color-${key}`, el).value = value
  })
}

暗黑模式切换方法

根据 Element Plus 官方推荐方式，仅需动态添加或移除 dark 类名，即可实现暗黑主题的启用或关闭。由于 Element Plus 已内置大部分暗黑样式，开发者仅需对局部样式做微调。

/**
 * 切换暗黑模式
 * @param isDark 是否启用暗黑模式
 */
export function toggleDarkMode(isDark: boolean) {
  if (isDark) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}

样式变量参考列表（暗黑与亮色通用）

类型	CSS 变量名
默认背景色	--el-fill-color-blank
激活状态色	--el-fill-color
悬停状态色	--el-fill-color-light
正常文字颜色	--el-text-color-regular
主题色	--el-color-primary
页面背景色	--el-bg-color-page